/* Soporte: las solicitudes de la persona a Control Hub (pantallas/soporte.js). */
#view-soporte { --sop-borde: var(--fc-border, var(--border, #e5e7eb)); --sop-tarjeta: var(--fc-card, var(--bg-card, #fff)); --sop-tinta: var(--fc-ink, var(--text-primary, #111)); --sop-gris: var(--fc-muted, var(--text-secondary, #6b7280)); --sop-fondo: var(--arc-tray, var(--bg-secondary, #f3f4f6)); --sop-aviso: var(--fc-warning, #b45309); --sop-ok: var(--fc-success, #15803d); --sop-mal: var(--fc-danger, var(--red, #b91c1c)); --sop-acento: var(--accent, #10b981); }
/* La banda de Inicio: el mismo degradado pastel con luces que derivan (kit Arc, home-top-grid). */
.sop-contenido { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 16px; max-width: 860px; margin-bottom: 96px; padding: 16px; border-radius: 32px; background: linear-gradient(118deg, oklch(27% .04 300) 0%, oklch(24% .02 290) 40%, oklch(25% .03 50) 100%); }
[data-theme="light"] .sop-contenido { background: linear-gradient(118deg, oklch(95.5% .035 300) 0%, oklch(97.5% .02 290) 32%, oklch(98.2% .012 80) 60%, oklch(97% .03 45) 100%); }
.sop-contenido::before { content: ""; position: absolute; inset: -35%; z-index: -1; pointer-events: none; filter: blur(60px); will-change: transform; opacity: .72; animation: arc-deriva 22s ease-in-out infinite alternate; animation-delay: -7s;
  background: radial-gradient(ellipse 38% 32% at 18% 22%, oklch(40% .08 300 / .8), transparent 70%), radial-gradient(ellipse 34% 30% at 82% 30%, oklch(38% .07 45 / .8), transparent 70%), radial-gradient(ellipse 40% 30% at 55% 85%, oklch(36% .06 230 / .8), transparent 70%); }
[data-theme="light"] .sop-contenido::before { background: radial-gradient(ellipse 36% 30% at 18% 22%, oklch(86% .13 300), transparent 70%), radial-gradient(ellipse 32% 28% at 82% 30%, oklch(90% .12 45), transparent 70%), radial-gradient(ellipse 38% 28% at 55% 85%, oklch(90% .09 230), transparent 70%), radial-gradient(ellipse 26% 24% at 30% 80%, oklch(93% .1 80), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .sop-contenido::before { animation: none; } }
@media (max-width: 760px) { .sop-contenido { padding: 10px; border-radius: 24px; } }

/* Contador de avisos junto a «Soporte» en el menú: redondo y con los tonos de la banda. */
/* El kit Arc pinta todo .nav-badge con !important (arc-pantallas.css): aquí se pisa con el id. */
#soporte-badge, html[data-ui] #soporte-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: linear-gradient(135deg, oklch(86% .13 300), oklch(90% .12 45)) !important; color: oklch(28% .05 300) !important; font-size: 11.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--fc-card, var(--bg-sidebar, #fff)); }
#soporte-badge.hidden, html[data-ui] #soporte-badge.hidden { display: none; }
html[data-theme="dark"] #soporte-badge, html[data-ui][data-theme="dark"] #soporte-badge { background: linear-gradient(135deg, oklch(60% .12 300), oklch(68% .12 45)) !important; color: oklch(15% .03 300) !important; }

/* Pestañas En curso / Archivadas */
.sop-pestanas { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sop-fondo); }
.sop-pestana { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--sop-gris); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 150ms, color 150ms; }
.sop-pestana[aria-selected="true"] { background: var(--sop-tarjeta); color: var(--sop-tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.sop-cuenta { min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in oklab, var(--sop-tinta) 8%, transparent); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.sop-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--sop-aviso); }
.sop-aviso-lista { margin: -4px 0 0; font-size: 14px; font-weight: 500; color: var(--sop-aviso); }

/* Lista: la tarjeta entera se pulsa */
.sop-lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sop-tarjeta { border: 1px solid oklch(100% 0 0 / .08); border-radius: 20px; background: var(--sop-tarjeta); overflow: hidden; box-shadow: 0 18px 40px -30px oklch(40% .06 300 / .35); transition: border-color 150ms, transform 150ms; }
[data-theme="light"] .sop-tarjeta { border-color: oklch(100% 0 0 / .8); }
.sop-tarjeta:hover { border-color: color-mix(in oklab, var(--sop-tinta) 25%, var(--sop-borde)); }
.sop-tarjeta-boton { display: grid; gap: 8px; width: 100%; padding: 18px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sop-tarjeta-boton:focus-visible { outline: 2px solid var(--sop-acento); outline-offset: -2px; border-radius: 16px; }
.sop-tarjeta h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--sop-tinta); }
.sop-tarjeta-atencion { border-left: 4px solid var(--sop-aviso); }
.sop-atencion-resolution { border-left-color: var(--sop-ok); }
.sop-atencion-update { border-left-color: var(--sop-acento); }
.sop-atencion { margin: 0; font-size: 14px; color: var(--sop-tinta); }
.sop-atencion strong { color: var(--sop-aviso); }
.sop-atencion-resolution .sop-atencion strong { color: var(--sop-ok); }
.sop-atencion-update .sop-atencion strong { color: var(--sop-acento); }
.sop-tarjeta-archivada { opacity: .78; }
.sop-tarjeta-archivada:hover { opacity: 1; }

/* Ficha y formulario */
.sop-ficha, .sop-form { display: grid; gap: 10px; padding: 24px; border: 1px solid oklch(100% 0 0 / .08); border-radius: 24px; background: var(--sop-tarjeta); box-shadow: 0 18px 40px -30px oklch(40% .06 300 / .35); }
[data-theme="light"] :is(.sop-ficha, .sop-form) { border-color: oklch(100% 0 0 / .8); }
.sop-pestanas { background: color-mix(in oklab, var(--sop-tarjeta) 55%, transparent); backdrop-filter: blur(8px); }
.sop-vacio { padding: 36px 16px; border-radius: 20px; background: color-mix(in oklab, var(--sop-tarjeta) 70%, transparent); }
.sop-ficha h2, .sop-form h2 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.sop-tarjeta-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sop-ref { font-variant-numeric: tabular-nums; color: var(--sop-gris); font-size: 13px; }
.sop-meta { margin: 0; font-size: 13px; color: var(--sop-gris); }
.sop-texto { margin: 4px 0; white-space: pre-wrap; line-height: 1.5; }

/* Estados */
.sop-estado { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in oklab, var(--sop-tinta) 8%, transparent); color: var(--sop-tinta); }
.sop-estado-awaiting_confirmation { background: color-mix(in oklab, var(--sop-aviso) 16%, transparent); color: var(--sop-aviso); }
.sop-estado-in_progress, .sop-estado-confirmed, .sop-estado-analyzing { background: color-mix(in oklab, var(--sop-acento) 14%, transparent); color: var(--sop-acento); }
.sop-estado-resolved, .sop-estado-closed { background: color-mix(in oklab, var(--sop-ok) 14%, transparent); color: var(--sop-ok); }
.sop-estado-cancelled { color: var(--sop-gris); text-decoration: line-through; }

/* Tipo de solicitud: opciones grandes y legibles en vez de un desplegable */
.sop-tipos { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sop-tipos legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--sop-gris); }
@media (min-width: 640px) { .sop-tipos { grid-template-columns: 1fr 1fr; } .sop-tipos legend { grid-column: 1 / -1; } }
.sop-tipo { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--sop-borde); border-radius: 12px; background: var(--sop-fondo); cursor: pointer; transition: border-color 150ms, background-color 150ms; }
.sop-tipo:hover { border-color: color-mix(in oklab, var(--sop-tinta) 25%, var(--sop-borde)); }
.sop-tipo input { margin: 3px 0 0; accent-color: var(--sop-acento); flex: none; }
.sop-tipo:has(input:checked) { border-color: var(--sop-acento); background: color-mix(in oklab, var(--sop-acento) 9%, var(--sop-tarjeta)); }
.sop-tipo:has(input:focus-visible) { outline: 2px solid var(--sop-acento); outline-offset: 2px; }
.sop-tipo-texto { display: grid; gap: 2px; min-width: 0; }
.sop-tipo-texto strong { font-size: 14px; font-weight: 600; color: var(--sop-tinta); }
.sop-tipo-texto small { font-size: 12.5px; line-height: 1.4; color: var(--sop-gris); }

/* Línea de progreso: Recibida → En revisión → En curso → Resuelta → Cerrada */
.sop-progreso { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 6px 0 2px; padding: 0; list-style: none; counter-reset: etapa; }
.sop-progreso-cancelada { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
.sop-etapa { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.sop-etapa::before { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--sop-borde); }
.sop-etapa:first-child::before { display: none; }
.sop-etapa-hecha::before, .sop-etapa-actual::before { background: var(--sop-acento); }
.sop-etapa-punto { z-index: 1; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sop-borde); background: var(--sop-tarjeta); box-sizing: border-box; }
.sop-etapa-hecha .sop-etapa-punto { border-color: var(--sop-acento); background: var(--sop-acento); }
.sop-etapa-actual .sop-etapa-punto { border-color: var(--sop-acento); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sop-acento) 22%, transparent); }
.sop-progreso-cancelada .sop-etapa-actual .sop-etapa-punto { border-color: var(--sop-gris); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sop-gris) 22%, transparent); }
.sop-etapa-texto { display: grid; gap: 1px; min-width: 0; }
.sop-etapa-texto strong { font-size: 12.5px; font-weight: 600; color: var(--sop-gris); }
.sop-etapa-hecha .sop-etapa-texto strong, .sop-etapa-actual .sop-etapa-texto strong { color: var(--sop-tinta); }
.sop-etapa-texto small { font-size: 11.5px; color: var(--sop-gris); font-variant-numeric: tabular-nums; }
.sop-progreso-compacta { max-width: 260px; margin: 2px 0 0; }
.sop-progreso-compacta .sop-etapa::before { top: 5px; }
.sop-progreso-compacta .sop-etapa-punto { width: 12px; height: 12px; }
.sop-progreso-compacta .sop-etapa-actual .sop-etapa-punto { box-shadow: 0 0 0 3px color-mix(in oklab, var(--sop-acento) 22%, transparent); }
@media (max-width: 560px) { .sop-etapa-texto small { display: none; } .sop-etapa-texto strong { font-size: 11px; } }

/* Resolución: confirmar que funciona o reabrir; archivadas */
.sop-resolucion { display: grid; gap: 10px; padding: 16px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--sop-ok) 35%, transparent); background: color-mix(in oklab, var(--sop-ok) 8%, transparent); }
.sop-resolucion h3 { margin: 0; font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.sop-resolucion p { margin: 0; font-size: 14px; line-height: 1.5; }
.sop-resolucion form { display: grid; gap: 10px; }
.sop-reabrir { display: grid; gap: 8px; padding-top: 4px; }
.sop-archivada { border-color: var(--sop-borde); background: var(--sop-fondo); }

/* Formularios dentro de la ficha: aire entre caja y botón, y el pie con la cancelación aparte */
.sop-ficha form, .sop-resolucion form, .sop-propuesta form, .sop-conversacion form { display: grid; gap: 12px; margin: 0; }
.sop-ficha .form-group, .sop-form .form-group { display: grid; gap: 6px; margin: 0; }
.sop-ficha .form-group textarea, .sop-form .form-group textarea, .sop-form .form-group input[type="text"] { width: 100%; box-sizing: border-box; min-height: 44px; }
.sop-ficha .btn, .sop-form .btn { justify-self: start; }
.sop-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--sop-borde); }
.sop-conversacion { padding-top: 8px; border-top: 1px solid var(--sop-borde); }

/* Propuesta y conversación */
.sop-propuesta { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: color-mix(in oklab, var(--sop-aviso) 7%, transparent); }
.sop-propuesta h3, .sop-conversacion h3 { margin: 0; font-size: 15px; }
.sop-propuesta dl { margin: 0; display: grid; gap: 4px; }
.sop-propuesta dt { font-weight: 600; }
.sop-propuesta dd { margin: 0 0 6px; white-space: pre-wrap; }
.sop-preguntas { display: grid; gap: 4px; }
.sop-preguntas p, .sop-preguntas ul { margin: 0; }
.sop-preguntas ul { padding-left: 20px; }
.sop-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.sop-conversacion { display: grid; gap: 8px; }
.sop-comentarios { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sop-comentarios li { padding: 10px 12px; border: 1px solid var(--sop-borde); border-radius: 12px; max-width: 92%; }
.sop-comentarios li.sop-mio { justify-self: end; background: color-mix(in oklab, var(--sop-acento) 8%, transparent); border-color: color-mix(in oklab, var(--sop-acento) 25%, var(--sop-borde)); }
.sop-comentarios li.sop-equipo { justify-self: start; background: var(--sop-fondo); }
.sop-comentarios p { margin: 4px 0 0; white-space: pre-wrap; line-height: 1.5; }
.sop-volver { justify-self: start; padding: 0; border: 0; background: none; color: var(--sop-gris); cursor: pointer; font: inherit; }
.sop-volver:hover { color: var(--sop-tinta); }
.sop-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.sop-nota { margin: 0; font-size: 13px; color: var(--sop-gris); line-height: 1.45; }
.sop-error { margin: 0; color: var(--sop-mal); }
.sop-error:empty { display: none; }
.sop-vacio { padding: 28px 8px; text-align: center; color: var(--sop-gris); }
.sop-vacio strong { display: block; color: var(--sop-tinta); margin-bottom: 4px; }
.sop-vacio p { margin: 0; }

/* Grupos de la lista, filtros y buscador */
/* El grupo es un simple contenedor: sin fondo ni bordes propios (styles.css pinta de blanco cualquier
   <section> en el tema claro y las tarjetas perdían sus esquinas redondeadas) */
#view-soporte .sop-grupo { display: grid; gap: 10px; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; }
.sop-grupo-titulo { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--sop-gris); }
.sop-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sop-chip { min-height: 32px; padding: 4px 12px; border: 1px solid var(--sop-borde); border-radius: 999px; background: color-mix(in oklab, var(--sop-tarjeta) 75%, transparent); color: var(--sop-gris); font: inherit; font-size: 13px; cursor: pointer; transition: background-color 150ms, color 150ms, border-color 150ms; }
.sop-chip[aria-pressed="true"] { background: var(--sop-tinta); border-color: var(--sop-tinta); color: var(--sop-tarjeta); }
.sop-buscar { flex: 1 1 240px; max-width: 360px; }
.sop-buscar input { width: 100%; box-sizing: border-box; min-height: 36px; padding: 6px 14px; border: 1px solid var(--sop-borde); border-radius: 999px; background: var(--sop-tarjeta); color: var(--sop-tinta); font: inherit; font-size: 14px; }
.sop-buscar input:focus { outline: 2px solid var(--sop-acento); outline-offset: 1px; }

/* Plazos orientativos y valoración */
.sop-plazos { margin: -2px 0 4px; font-size: 13px; color: var(--sop-gris); text-align: center; }
.sop-valoracion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sop-valoracion legend { float: left; margin-right: 6px; padding: 0; font-size: 14px; }
.sop-valor { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--sop-borde); border-radius: 999px; background: var(--sop-tarjeta); cursor: pointer; font-size: 13.5px; transition: border-color 150ms, background-color 150ms; }
.sop-valor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sop-valor:has(input:checked) { border-color: var(--sop-ok); background: color-mix(in oklab, var(--sop-ok) 14%, transparent); }
.sop-valor:has(input:focus-visible) { outline: 2px solid var(--sop-acento); outline-offset: 2px; }
.sop-valor span[aria-hidden] { font-size: 16px; line-height: 1; }

/* Adjuntos */
.sop-adjuntar { display: grid; gap: 6px; justify-items: start; }
.sop-adjuntar-boton { cursor: pointer; }
.sop-adjuntos-pendientes, .sop-adjuntos-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; width: 100%; }
.sop-adjuntos-pendientes li, .sop-adjuntos-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--sop-borde); border-radius: 10px; background: var(--sop-fondo); font-size: 13.5px; }
.sop-adjuntos-pendientes li span, .sop-adjuntos-lista li .sop-adjunto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sop-adjuntos-pendientes small, .sop-adjuntos-lista small { color: var(--sop-gris); white-space: nowrap; }
.sop-quitar { border: 0; background: none; color: var(--sop-gris); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sop-quitar:hover { color: var(--sop-mal); }
.sop-adjunto { border: 0; background: none; padding: 0; color: var(--sop-tinta); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sop-adjuntos { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--sop-borde); }
.sop-adjuntos h3 { margin: 0; font-size: 15px; }
.sop-adjuntos .sop-adjuntar-boton { justify-self: start; }

/* Ventana emergente de Soporte: el mensaje conserva los saltos de línea; la de confirmación lleva el
   icono en verde (la de fallo lo lleva en rojo por la clase ui-dialog-peligro del kit) */
.sop-dialogo .ui-dialog-msg { white-space: pre-line; }
.ui-dialog-exito .ui-dialog-ico { background: color-mix(in oklab, var(--fc-success, #15803d) 12%, var(--fc-card, #fff)); border-color: color-mix(in oklab, var(--fc-success, #15803d) 28%, var(--fc-border, #e5e7eb)); color: var(--fc-success, #15803d); }
html[data-ui] .ui-dialog-exito .ui-dialog-ico { background: oklch(95% .05 150); border-color: oklch(88% .08 150); color: oklch(45% .15 150); }
html[data-ui][data-theme="dark"] .ui-dialog-exito .ui-dialog-ico { background: oklch(30% .06 150); border-color: oklch(40% .08 150); color: oklch(80% .14 150); }

/* Tarjeta de Inicio: qué solicitudes requieren a la persona, con enlace a cada una */
#view-dashboard #home-soporte { margin-bottom: 18px; }
#view-dashboard .sop-inicio-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
#view-dashboard .sop-inicio-lista li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--home-line, var(--border, #e5e7eb)); }
#view-dashboard .sop-inicio-lista li:last-child { border-bottom: 0; }
#view-dashboard .sop-inicio-lista strong { display: block; font-weight: 600; font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-dashboard .sop-inicio-lista small { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
#view-dashboard .sop-inicio-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--orange, #c79130); justify-self: center; }
#view-dashboard .sop-inicio-punto.sop-inicio-ok { background: var(--fc-success, #15803d); }

/* Ayuda antes de enviar (artículos de Control Hub): bajo el resumen, sugerencias que se pulsan y el
   artículo leído sin salir del formulario. Es una <section>: el id pisa el fondo blanco de styles.css. */
#view-soporte .sop-ayuda { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--sop-borde); border-radius: 16px; background: var(--sop-fondo) !important; box-shadow: none; }
#view-soporte .sop-ayuda[hidden] { display: none; }
.sop-ayuda h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--sop-tinta); }
.sop-ayuda-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sop-ayuda-item { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--sop-borde); border-radius: 12px; background: var(--sop-tarjeta); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 150ms; }
.sop-ayuda-item:hover { border-color: color-mix(in oklab, var(--sop-tinta) 25%, var(--sop-borde)); }
.sop-ayuda-item:focus-visible { outline: 2px solid var(--sop-acento); outline-offset: 1px; }
.sop-ayuda-item strong { font-size: 14px; font-weight: 600; color: var(--sop-tinta); }
.sop-ayuda-item small { font-size: 13px; color: var(--sop-gris); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sop-articulo { display: grid; gap: 10px; }
.sop-articulo h3 { font-size: 17px; }
.sop-articulo h3:focus { outline: none; }
.sop-articulo-cuerpo { display: grid; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--sop-tinta); overflow-wrap: anywhere; }
.sop-articulo-cuerpo > * { margin: 0; }
.sop-articulo-cuerpo h4 { font-size: 15.5px; font-weight: 600; }
.sop-articulo-cuerpo h5 { font-size: 14.5px; font-weight: 600; }
.sop-articulo-cuerpo ul, .sop-articulo-cuerpo ol { display: grid; gap: 4px; padding-left: 22px; }
.sop-articulo-cuerpo blockquote { display: grid; gap: 8px; padding-left: 12px; border-left: 2px solid var(--sop-borde); color: var(--sop-gris); }
.sop-articulo-cuerpo blockquote > * { margin: 0; }
.sop-articulo-cuerpo code { padding: 1px 5px; border-radius: 6px; background: color-mix(in oklab, var(--sop-tinta) 8%, transparent); font-size: 13px; }
.sop-articulo-cuerpo pre { padding: 10px 12px; border: 1px solid var(--sop-borde); border-radius: 12px; background: var(--sop-tarjeta); overflow-x: auto; white-space: pre-wrap; }
.sop-articulo-cuerpo pre code { padding: 0; background: none; }
.sop-articulo-cuerpo a { color: var(--sop-tinta); text-decoration: underline; text-underline-offset: 3px; }
.sop-articulo-cuerpo hr { width: 100%; border: 0; border-top: 1px solid var(--sop-borde); }