/* ==========================================================================
   SINCO · Diseño del área de clientes (19-10-2026)
   Azul noche + acento ámbar→naranja SINCO. Inspirado en «sinco_qwen.html».
   Reglas completas en CLAUDE.md (sección «Diseño SINCO»). Clases con prefijo s-.
   ========================================================================== */

:root {
    --bg: #0e1729;          /* fondo: azul noche (no negro) */
    --bg2: #111c31;         /* bandas alternas */
    --surface: #15213a;     /* tarjetas */
    --surface2: #1a2844;    /* tarjetas dentro de tarjetas, inputs */
    --surface3: #22324f;    /* iconos, hover */
    --line: rgba(148, 172, 214, .13);
    --line-strong: rgba(148, 172, 214, .24);
    --txt: #e8eef8;
    --muted: #a3b2cc;
    --muted2: #72839f;
    --amber: #f7b955;
    --accent: #f2610c;      /* naranja SINCO */
    --accent-soft: rgba(242, 97, 12, .14);
    --grad: linear-gradient(135deg, #f7b955 0%, #f2610c 100%);
    --blue: #38bdf8;
    --green: #34d399;
    --yellow: #fbbf24;
    --orange: #fb923c;
    --red: #f87171;
    --violet: #a78bfa;
    --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 28px;
    --shadow: 0 24px 60px -24px rgba(2, 8, 23, .8);
    --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ---------- Base ---------- */
html:has(body.s-ui), body.s-ui { overflow-x: clip; }
body.s-ui { background: var(--bg); color: var(--txt); font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
body.s-ui ::selection { background: var(--accent); color: #fff; }
.s-ui h1, .s-ui h2, .s-ui h3, .s-ui .s-display { font-family: var(--f-display); letter-spacing: -.02em; }
.s-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.s-num { font-variant-numeric: tabular-nums; }
.s-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-muted { color: var(--muted); }
.s-muted2 { color: var(--muted2); }

/* Fondo con rejilla tenue y halos (cabeceras) */
.s-fondo { position: relative; isolation: isolate; }
.s-fondo::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(148,172,214,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,172,214,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%); }
.s-halo { position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none; z-index: -1; }
.s-halo.ambar { background: radial-gradient(circle, rgba(247,185,85,.20), transparent 62%); }
.s-halo.azul { background: radial-gradient(circle, rgba(56,189,248,.16), transparent 64%); }

/* ---------- Superficies ---------- */
.s-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.s-card-2 { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r); }
.s-card-glass { background: linear-gradient(160deg, rgba(34,50,79,.92), rgba(21,33,58,.94)); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.s-card-acento { background: linear-gradient(165deg, #2a2219 0%, var(--surface) 55%); border: 1px solid rgba(247,185,85,.28); border-radius: var(--r-xl); }
a.s-card, button.s-card, .s-card.s-hover { transition: transform .25s, border-color .25s, background .25s; }
a.s-card:hover, button.s-card:hover, .s-card.s-hover:hover { border-color: var(--line-strong); transform: translateY(-2px); }

/* Esquinas de visor de cámara */
.s-visor { position: relative; }
.s-visor::before, .s-visor::after { content: ''; position: absolute; width: 16px; height: 16px; border-color: rgba(247,185,85,.55); border-style: solid; pointer-events: none; }
.s-visor::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 4px; }
.s-visor::after { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: 4px; }

/* ---------- Texto pequeño ---------- */
.s-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--amber); background: rgba(247,185,85,.10); border: 1px solid rgba(247,185,85,.24); padding: 6px 12px; border-radius: 999px; }
.s-eyebrow .dot, .s-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); display: inline-block; }
.s-label { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted2); font-weight: 600; }

/* ---------- Botones ---------- */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; border-radius: 12px; padding: 12px 20px; transition: .2s; white-space: nowrap; cursor: pointer; border: 1px solid transparent; }
.s-btn-primary { background: var(--grad); color: #1a0d03; box-shadow: 0 10px 28px -12px rgba(242,97,12,.8); }
.s-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(242,97,12,.9); color: #1a0d03; }
.s-btn-ghost { border-color: var(--line-strong); color: var(--txt); background: rgba(255,255,255,.03); }
.s-btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(148,172,214,.4); }
.s-btn-wa { background: #25d366; color: #fff; }
.s-btn-wa:hover { background: #1fb955; }
.s-btn-sm { padding: 8px 14px; font-size: 12.5px; border-radius: 10px; }
.s-btn-lg { padding: 15px 28px; font-size: 15.5px; border-radius: 14px; }
.s-btn[disabled], .s-btn.dim { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Chips de estado ---------- */
.s-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; letter-spacing: .01em; white-space: nowrap; border: 1px solid; }
.s-chip i.d { width: 6px; height: 6px; border-radius: 50%; display: block; }
.s-chip.blue { background: rgba(56,189,248,.12); color: #7dd3fc; border-color: rgba(56,189,248,.28); } .s-chip.blue i.d { background: var(--blue); }
.s-chip.green { background: rgba(52,211,153,.12); color: #6ee7b7; border-color: rgba(52,211,153,.28); } .s-chip.green i.d { background: var(--green); }
.s-chip.yellow { background: rgba(251,191,36,.12); color: #fcd34d; border-color: rgba(251,191,36,.28); } .s-chip.yellow i.d { background: var(--yellow); }
.s-chip.orange { background: rgba(251,146,60,.12); color: #fdba74; border-color: rgba(251,146,60,.28); } .s-chip.orange i.d { background: var(--orange); }
.s-chip.red { background: rgba(248,113,113,.12); color: #fca5a5; border-color: rgba(248,113,113,.28); } .s-chip.red i.d { background: var(--red); }
.s-chip.grey { background: rgba(255,255,255,.05); color: var(--muted); border-color: var(--line-strong); } .s-chip.grey i.d { background: var(--muted2); }
.s-chip.violet { background: rgba(167,139,250,.12); color: #c4b5fd; border-color: rgba(167,139,250,.28); } .s-chip.violet i.d { background: var(--violet); }
.c-blue { color: var(--blue); } .c-green { color: var(--green); } .c-yellow { color: var(--yellow); } .c-orange { color: var(--orange); } .c-red { color: var(--red); } .c-grey { color: var(--muted2); } .c-amber { color: var(--amber); }

/* Icono en caja */
.s-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface3); border: 1px solid var(--line); flex: none; }
.s-ico.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
.s-ico.lg { width: 52px; height: 52px; border-radius: 15px; font-size: 20px; }
.s-ico.acento { background: rgba(242,97,12,.14); border-color: rgba(242,97,12,.3); color: #ffa36b; }

/* Barras de progreso tipo «exportando» */
.s-barra { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.s-barra > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--green), var(--amber)); }
.s-barra.acento > i { background: var(--grad); }
.s-barra.anim > i { animation: s-crecer 1.6s cubic-bezier(.22,1,.36,1) both; }
@keyframes s-crecer { from { width: 0; } }

/* ---------- Animaciones de productora ---------- */

/* REC parpadeando */
.s-rec { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: #fca5a5; }
.s-rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: s-parpadeo 1.2s steps(2, start) infinite; }
@keyframes s-parpadeo { to { visibility: hidden; } }

/* Línea de tiempo de montaje (NLE): pistas, clips y cabezal */
.s-nle { position: relative; border-radius: var(--r); background: #0b1324; border: 1px solid var(--line); padding: 12px 12px 10px 44px; overflow: hidden; }
.s-nle .regla { position: absolute; left: 44px; right: 12px; top: 0; height: 10px; background-image: repeating-linear-gradient(90deg, rgba(148,172,214,.35) 0 1px, transparent 1px 12px); opacity: .5; }
.s-nle .pista { position: relative; height: 18px; margin-top: 6px; }
.s-nle .pista .nombre { position: absolute; left: -36px; top: 2px; font: 600 9.5px/1 var(--f-mono); color: var(--muted2); }
.s-nle .clip { position: absolute; top: 0; height: 100%; border-radius: 5px; border: 1px solid rgba(255,255,255,.14); overflow: hidden; }
.s-nle .clip.v { background: linear-gradient(180deg, rgba(56,189,248,.45), rgba(56,189,248,.22)); }
.s-nle .clip.v2 { background: linear-gradient(180deg, rgba(167,139,250,.5), rgba(167,139,250,.24)); }
.s-nle .clip.a { background: linear-gradient(180deg, rgba(52,211,153,.4), rgba(52,211,153,.18)); }
.s-nle .clip.a::after { content: ''; position: absolute; inset: 3px 4px; background: repeating-linear-gradient(90deg, rgba(110,231,183,.8) 0 2px, transparent 2px 4px);
    -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); opacity: .55; transform: scaleY(.7); }
.s-nle .clip.t { background: linear-gradient(180deg, rgba(247,185,85,.55), rgba(242,97,12,.3)); }
.s-nle .cabezal { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); left: 44px; animation: s-cabezal 9s linear infinite; z-index: 2; }
.s-nle .cabezal::before { content: ''; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 8px solid var(--accent); }
@keyframes s-cabezal { from { left: 44px; } to { left: calc(100% - 14px); } }

/* Tira de película (fotogramas) */
.s-pelicula { display: flex; gap: 6px; padding: 8px 0; background: #070d19; border-radius: 10px; position: relative; overflow: hidden; }
.s-pelicula::before, .s-pelicula::after { content: ''; position: absolute; left: 0; right: 0; height: 5px; background: repeating-linear-gradient(90deg, rgba(232,238,248,.35) 0 6px, transparent 6px 14px); }
.s-pelicula::before { top: 1px; } .s-pelicula::after { bottom: 1px; }

/* Revelado de foto (Lightroom): de exposición baja y sin color a la foto final */
.s-revelado { animation: s-revelar 2.4s cubic-bezier(.22,1,.36,1) both; }
@keyframes s-revelar { 0% { filter: grayscale(1) brightness(.35) contrast(.8) blur(2px); } 55% { filter: grayscale(.4) brightness(.8) contrast(.95) blur(0); } 100% { filter: none; } }

/* Histograma */
.s-histo { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.s-histo i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(247,185,85,.9), rgba(56,189,248,.35)); animation: s-histo 2.8s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes s-histo { from { transform: scaleY(.55); } to { transform: scaleY(1); } }

/* Forma de onda de audio */
.s-onda { display: flex; align-items: center; gap: 2px; height: 28px; }
.s-onda i { width: 3px; border-radius: 2px; background: var(--green); opacity: .8; animation: s-onda 1.1s ease-in-out infinite alternate; }
@keyframes s-onda { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* Flotar */
.s-flotar { animation: s-flotar 7s ease-in-out infinite; }
.s-flotar.lento { animation-duration: 9s; animation-direction: reverse; }
@keyframes s-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Cinta que se desplaza (ticker) */
.s-ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg2); padding: 14px 0; overflow: hidden; position: relative; }
.s-ticker::before, .s-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; }
.s-ticker::before { left: 0; background: linear-gradient(90deg, var(--bg2), transparent); }
.s-ticker::after { right: 0; background: linear-gradient(-90deg, var(--bg2), transparent); }
.s-ticker-pista { display: flex; gap: 44px; width: max-content; animation: s-desliza 38s linear infinite; }
.s-ticker-pista span { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; font-weight: 500; }
.s-ticker-pista span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); opacity: .8; }
@keyframes s-desliza { to { transform: translateX(-50%); } }

/* Aparecer al hacer scroll */
.s-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.s-reveal.in { opacity: 1; transform: none; }
.s-pulso { animation: s-pulso .45s ease; }
@keyframes s-pulso { 0% { transform: scale(.97); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }

/* Línea del ciclo de vida (5 estados) */
.s-ciclo { position: relative; }
.s-ciclo .pista { position: absolute; top: 28px; left: 8%; right: 8%; height: 2px; background: var(--line); border-radius: 2px; }
.s-ciclo .relleno { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--green), var(--yellow), var(--orange), var(--red)); transition: width .5s cubic-bezier(.4,0,.2,1); }
.s-ciclo .nodos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; position: relative; }
.s-ciclo .nodo { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; cursor: pointer; background: none; border: 0; color: inherit; }
.s-ciclo .nodo .caja { width: 56px; height: 56px; border-radius: 17px; background: var(--surface2); border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: .3s; position: relative; z-index: 2; font-size: 20px; }
.s-ciclo .nodo:hover .caja { transform: translateY(-4px); }
.s-ciclo .nodo.on .caja { transform: translateY(-4px) scale(1.06); border-color: currentColor; background: var(--surface3); box-shadow: 0 10px 30px -8px rgba(0,0,0,.8); }
.s-ciclo .nodo.on .caja::after { content: ''; position: absolute; inset: -7px; border-radius: 22px; border: 1px solid currentColor; opacity: .3; }
.s-ciclo .nodo .paso { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted2); font-weight: 700; }
.s-ciclo .nodo .nom { font-family: var(--f-display); font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--txt); }
.s-ciclo .nodo.on .nom { color: currentColor; }
.s-ciclo .nodo .cuando { font-size: 11.5px; color: var(--muted2); }

/* Tablas */
.s-tabla { width: 100%; border-collapse: collapse; }
.s-tabla th, .s-tabla td { padding: 14px 18px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.s-tabla thead th { background: var(--surface2); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted2); font-weight: 600; white-space: nowrap; }
.s-tabla tbody tr:last-child td { border-bottom: 0; }
.s-tabla tbody tr:hover { background: rgba(255,255,255,.02); }
.s-tabla td.hit { background: rgba(242,97,12,.09); box-shadow: inset 0 0 0 1px rgba(242,97,12,.4); }

/* Acordeón (FAQ) */
.s-faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: .25s; }
.s-faq.open { border-color: rgba(247,185,85,.3); background: var(--surface2); }
.s-faq > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; text-align: left; font-size: 14.2px; font-weight: 600; color: var(--txt); }
.s-faq > button:hover { color: var(--amber); }
.s-faq .mas { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line-strong); display: grid; place-items: center; flex: none; position: relative; transition: .3s; }
.s-faq .mas::before, .s-faq .mas::after { content: ''; position: absolute; background: var(--txt); border-radius: 2px; transition: .3s; }
.s-faq .mas::before { width: 9px; height: 1.5px; } .s-faq .mas::after { width: 1.5px; height: 9px; }
.s-faq.open .mas { background: var(--amber); border-color: var(--amber); transform: rotate(180deg); }
.s-faq.open .mas::before, .s-faq.open .mas::after { background: #1a0d03; }
.s-faq.open .mas::after { opacity: 0; }
.s-faq .resp { max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(.4,0,.2,1); }
.s-faq .resp > div { padding: 0 20px 20px; font-size: 13.4px; color: var(--muted); line-height: 1.7; }
.s-faq .resp b { color: var(--txt); }

/* Selector (botones de opción) */
.s-opcion { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; text-align: left; transition: .2s; position: relative; overflow: hidden; color: var(--txt); }
.s-opcion:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface3); }
.s-opcion.on { border-color: var(--accent); background: linear-gradient(160deg, rgba(242,97,12,.16), rgba(242,97,12,.04)); }
.s-opcion.on::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); }
.s-opcion:disabled { opacity: .3; cursor: not-allowed; }
.s-opcion .ahorro { position: absolute; top: 5px; right: 5px; font-size: 9.5px; font-weight: 700; background: var(--green); color: #04150e; padding: 2px 6px; border-radius: 6px; }
.s-opcion.on .ahorro { background: var(--amber); color: #1a0d03; }
.s-radio { width: 17px; height: 17px; border-radius: 50%; border: 1.6px solid var(--line-strong); flex: none; position: relative; transition: .2s; }
.on .s-radio { border-color: var(--accent); }
.on .s-radio::after { content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--accent); }

/* Pestañas de proyecto */
.acl-tab { background: var(--surface); border: 1px solid var(--line); }
.acl-tab.acl-tab-on { background: var(--grad); color: #1a0d03; border-color: transparent; box-shadow: 0 8px 22px -10px rgba(242,97,12,.8); }

/* Formularios */
.s-ui .s-input, .s-ui input.s-input, .s-ui textarea.s-input, .s-ui select.s-input { width: 100%; background: var(--surface2); border: 1px solid var(--line-strong); color: var(--txt); border-radius: 12px; padding: .65rem .85rem; font-size: 14px; }
.s-ui .s-input:focus { outline: none; border-color: rgba(247,185,85,.6); box-shadow: 0 0 0 3px rgba(247,185,85,.15); }
.s-ui .s-input::placeholder { color: var(--muted2); }

/* Separador con fecha estilo claqueta */
.s-claqueta { height: 10px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(135deg, #e8eef8 0 10px, #0b1324 10px 20px); opacity: .85; }

/* Accesibilidad: sin animaciones si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
    .s-ui *, .s-ui *::before, .s-ui *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .s-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Capa de compatibilidad: las secciones antiguas (fotos, vídeos, entrega final…)
   usan clases claras de Tailwind. Aquí se reinterpretan en azul noche.
   Especificidad body.s-ui .clase > .clase de Tailwind, sin !important.
   ========================================================================== */
body.s-ui .bg-white, body.s-ui .bg-gray-50\/50 { background-color: var(--surface); }
body.s-ui .bg-gray-50 { background-color: var(--surface2); }
body.s-ui .bg-gray-100 { background-color: var(--surface2); }
body.s-ui .bg-gray-200 { background-color: var(--surface3); }
body.s-ui .bg-gray-300 { background-color: #2b3d5e; }
body.s-ui .bg-gray-800, body.s-ui .bg-gray-900, body.s-ui .bg-tinta, body.s-ui .bg-black { background-color: #24365a; }
body.s-ui .hover\:bg-gray-50:hover, body.s-ui .hover\:bg-gray-100:hover { background-color: var(--surface3); }
body.s-ui .hover\:bg-gray-200:hover { background-color: #2b3d5e; }
body.s-ui .hover\:bg-black:hover, body.s-ui .hover\:bg-gray-800:hover, body.s-ui .hover\:bg-gray-900:hover { background-color: #2d4570; }
body.s-ui .text-gray-900, body.s-ui .text-gray-800, body.s-ui .text-tinta, body.s-ui .text-black { color: var(--txt); }
body.s-ui .text-gray-700, body.s-ui .text-gray-600 { color: #c3cfe2; }
body.s-ui .text-gray-500 { color: var(--muted); }
body.s-ui .text-gray-400, body.s-ui .text-gray-300 { color: var(--muted2); }
body.s-ui .hover\:text-gray-900:hover, body.s-ui .hover\:text-tinta:hover, body.s-ui .hover\:text-gray-700:hover { color: #fff; }
body.s-ui .border-gray-100, body.s-ui .border-gray-200, body.s-ui .border-gray-300, body.s-ui .border-black\/5 { border-color: var(--line); }
body.s-ui .divide-gray-100 > :not([hidden]) ~ :not([hidden]), body.s-ui .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }
body.s-ui .ring-black\/5, body.s-ui .ring-gray-200 { --tw-ring-color: var(--line); }
body.s-ui .shadow, body.s-ui .shadow-sm, body.s-ui .shadow-md, body.s-ui .shadow-lg { --tw-shadow-color: rgba(2,8,23,.6); }
/* Tonos suaves (fondos -50/-100) → translúcidos sobre azul */
body.s-ui .bg-emerald-50, body.s-ui .bg-green-50, body.s-ui .bg-emerald-100, body.s-ui .bg-green-100 { background-color: rgba(52,211,153,.12); }
body.s-ui .bg-amber-50, body.s-ui .bg-yellow-50, body.s-ui .bg-amber-100, body.s-ui .bg-yellow-100 { background-color: rgba(251,191,36,.12); }
body.s-ui .bg-orange-50, body.s-ui .bg-orange-100, body.s-ui .bg-marca-50, body.s-ui .bg-marca-100 { background-color: rgba(242,97,12,.13); }
body.s-ui .bg-red-50, body.s-ui .bg-red-100, body.s-ui .bg-rose-50, body.s-ui .bg-rose-100 { background-color: rgba(248,113,113,.12); }
body.s-ui .bg-sky-50, body.s-ui .bg-blue-50, body.s-ui .bg-sky-100, body.s-ui .bg-blue-100, body.s-ui .bg-cyan-50 { background-color: rgba(56,189,248,.12); }
body.s-ui .bg-violet-50, body.s-ui .bg-purple-50, body.s-ui .bg-indigo-50, body.s-ui .bg-violet-100, body.s-ui .bg-purple-100, body.s-ui .bg-indigo-100 { background-color: rgba(167,139,250,.13); }
body.s-ui .bg-teal-50, body.s-ui .bg-teal-100 { background-color: rgba(45,212,191,.12); }
body.s-ui .border-emerald-200, body.s-ui .border-green-200 { border-color: rgba(52,211,153,.3); }
body.s-ui .border-amber-200, body.s-ui .border-yellow-200 { border-color: rgba(251,191,36,.3); }
body.s-ui .border-red-200, body.s-ui .border-rose-200 { border-color: rgba(248,113,113,.3); }
body.s-ui .border-sky-200, body.s-ui .border-blue-200 { border-color: rgba(56,189,248,.3); }
body.s-ui .border-orange-200, body.s-ui .border-marca-200 { border-color: rgba(242,97,12,.35); }
/* Textos de color oscuros (-700/-800/-900) → versiones claras legibles */
body.s-ui .text-emerald-600, body.s-ui .text-emerald-700, body.s-ui .text-emerald-800, body.s-ui .text-green-600, body.s-ui .text-green-700, body.s-ui .text-green-800 { color: #6ee7b7; }
body.s-ui .text-amber-600, body.s-ui .text-amber-700, body.s-ui .text-amber-800, body.s-ui .text-amber-900, body.s-ui .text-yellow-600, body.s-ui .text-yellow-700, body.s-ui .text-yellow-800 { color: #fcd34d; }
body.s-ui .text-orange-600, body.s-ui .text-orange-700, body.s-ui .text-orange-800, body.s-ui .text-orange-900, body.s-ui .text-marca-700 { color: #fdba74; }
body.s-ui .text-red-600, body.s-ui .text-red-700, body.s-ui .text-red-800, body.s-ui .text-red-900, body.s-ui .text-rose-600 { color: #fca5a5; }
body.s-ui .text-sky-600, body.s-ui .text-sky-700, body.s-ui .text-sky-800, body.s-ui .text-blue-600, body.s-ui .text-blue-700, body.s-ui .text-blue-800 { color: #7dd3fc; }
body.s-ui .text-violet-600, body.s-ui .text-purple-600, body.s-ui .text-indigo-600, body.s-ui .text-indigo-700, body.s-ui .text-purple-700 { color: #c4b5fd; }
body.s-ui .text-teal-600, body.s-ui .text-teal-700 { color: #5eead4; }
body.s-ui .ring-emerald-200 { --tw-ring-color: rgba(52,211,153,.3); } body.s-ui .ring-amber-200 { --tw-ring-color: rgba(251,191,36,.3); }
body.s-ui .ring-sky-200 { --tw-ring-color: rgba(56,189,248,.3); } body.s-ui .ring-marca-200 { --tw-ring-color: rgba(242,97,12,.35); }
body.s-ui .ring-marca-100 { --tw-ring-color: rgba(242,97,12,.25); }
/* Formularios antiguos */
body.s-ui input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), body.s-ui select, body.s-ui textarea { background-color: var(--surface2); color: var(--txt); border-color: var(--line-strong); }
body.s-ui input::placeholder, body.s-ui textarea::placeholder { color: var(--muted2); }
body.s-ui option { background: var(--surface); color: var(--txt); }
body.s-ui .ring-white, body.s-ui .ring-4.ring-white { --tw-ring-color: var(--surface); }
body.s-ui .bg-white\/95, body.s-ui .bg-white\/90, body.s-ui .bg-white\/80 { background-color: rgba(21,33,58,.92); }
body.s-ui .bg-\[\#f5f5f2\]\/95, body.s-ui .bg-\[\#f5f5f2\] { background-color: rgba(14,23,41,.92); }
/* Tarjeta del diseño anterior (19-10-2026, clara) */
body.s-ui .acl-card { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }

/* Degradados claros de las secciones antiguas → tintes sobre azul */
body.s-ui .from-gray-50 { --tw-gradient-from: rgba(21,33,58,1) var(--tw-gradient-from-position); --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-gray-50 { --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(21,33,58,1) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-gray-50 { --tw-gradient-to: rgba(21,33,58,1) var(--tw-gradient-to-position); }
body.s-ui .from-gray-100 { --tw-gradient-from: rgba(21,33,58,1) var(--tw-gradient-from-position); --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-gray-100 { --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(21,33,58,1) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-gray-100 { --tw-gradient-to: rgba(21,33,58,1) var(--tw-gradient-to-position); }
body.s-ui .from-gray-200 { --tw-gradient-from: rgba(21,33,58,1) var(--tw-gradient-from-position); --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-gray-200 { --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(21,33,58,1) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-gray-200 { --tw-gradient-to: rgba(21,33,58,1) var(--tw-gradient-to-position); }
body.s-ui .from-slate-50 { --tw-gradient-from: rgba(21,33,58,1) var(--tw-gradient-from-position); --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-slate-50 { --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(21,33,58,1) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-slate-50 { --tw-gradient-to: rgba(21,33,58,1) var(--tw-gradient-to-position); }
body.s-ui .from-slate-100 { --tw-gradient-from: rgba(21,33,58,1) var(--tw-gradient-from-position); --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-slate-100 { --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(21,33,58,1) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-slate-100 { --tw-gradient-to: rgba(21,33,58,1) var(--tw-gradient-to-position); }
body.s-ui .from-slate-200 { --tw-gradient-from: rgba(21,33,58,1) var(--tw-gradient-from-position); --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-slate-200 { --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(21,33,58,1) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-slate-200 { --tw-gradient-to: rgba(21,33,58,1) var(--tw-gradient-to-position); }
body.s-ui .from-white { --tw-gradient-from: rgba(21,33,58,1) var(--tw-gradient-from-position); --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-white { --tw-gradient-to: rgba(21,33,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(21,33,58,1) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-white { --tw-gradient-to: rgba(21,33,58,1) var(--tw-gradient-to-position); }
body.s-ui .from-purple-50 { --tw-gradient-from: rgba(167,139,250,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(167,139,250,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-purple-50 { --tw-gradient-to: rgba(167,139,250,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(167,139,250,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-purple-50 { --tw-gradient-to: rgba(167,139,250,.12) var(--tw-gradient-to-position); }
body.s-ui .from-purple-100 { --tw-gradient-from: rgba(167,139,250,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(167,139,250,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-purple-100 { --tw-gradient-to: rgba(167,139,250,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(167,139,250,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-purple-100 { --tw-gradient-to: rgba(167,139,250,.12) var(--tw-gradient-to-position); }
body.s-ui .from-purple-200 { --tw-gradient-from: rgba(167,139,250,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(167,139,250,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-purple-200 { --tw-gradient-to: rgba(167,139,250,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(167,139,250,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-purple-200 { --tw-gradient-to: rgba(167,139,250,.12) var(--tw-gradient-to-position); }
body.s-ui .from-indigo-50 { --tw-gradient-from: rgba(129,140,248,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(129,140,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-indigo-50 { --tw-gradient-to: rgba(129,140,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(129,140,248,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-indigo-50 { --tw-gradient-to: rgba(129,140,248,.12) var(--tw-gradient-to-position); }
body.s-ui .from-indigo-100 { --tw-gradient-from: rgba(129,140,248,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(129,140,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-indigo-100 { --tw-gradient-to: rgba(129,140,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(129,140,248,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-indigo-100 { --tw-gradient-to: rgba(129,140,248,.12) var(--tw-gradient-to-position); }
body.s-ui .from-indigo-200 { --tw-gradient-from: rgba(129,140,248,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(129,140,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-indigo-200 { --tw-gradient-to: rgba(129,140,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(129,140,248,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-indigo-200 { --tw-gradient-to: rgba(129,140,248,.12) var(--tw-gradient-to-position); }
body.s-ui .from-pink-50 { --tw-gradient-from: rgba(244,114,182,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(244,114,182,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-pink-50 { --tw-gradient-to: rgba(244,114,182,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(244,114,182,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-pink-50 { --tw-gradient-to: rgba(244,114,182,.12) var(--tw-gradient-to-position); }
body.s-ui .from-pink-100 { --tw-gradient-from: rgba(244,114,182,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(244,114,182,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-pink-100 { --tw-gradient-to: rgba(244,114,182,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(244,114,182,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-pink-100 { --tw-gradient-to: rgba(244,114,182,.12) var(--tw-gradient-to-position); }
body.s-ui .from-pink-200 { --tw-gradient-from: rgba(244,114,182,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(244,114,182,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-pink-200 { --tw-gradient-to: rgba(244,114,182,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(244,114,182,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-pink-200 { --tw-gradient-to: rgba(244,114,182,.12) var(--tw-gradient-to-position); }
body.s-ui .from-rose-50 { --tw-gradient-from: rgba(251,113,133,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(251,113,133,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-rose-50 { --tw-gradient-to: rgba(251,113,133,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(251,113,133,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-rose-50 { --tw-gradient-to: rgba(251,113,133,.12) var(--tw-gradient-to-position); }
body.s-ui .from-rose-100 { --tw-gradient-from: rgba(251,113,133,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(251,113,133,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-rose-100 { --tw-gradient-to: rgba(251,113,133,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(251,113,133,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-rose-100 { --tw-gradient-to: rgba(251,113,133,.12) var(--tw-gradient-to-position); }
body.s-ui .from-rose-200 { --tw-gradient-from: rgba(251,113,133,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(251,113,133,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-rose-200 { --tw-gradient-to: rgba(251,113,133,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(251,113,133,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-rose-200 { --tw-gradient-to: rgba(251,113,133,.12) var(--tw-gradient-to-position); }
body.s-ui .from-red-50 { --tw-gradient-from: rgba(248,113,113,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(248,113,113,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-red-50 { --tw-gradient-to: rgba(248,113,113,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(248,113,113,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-red-50 { --tw-gradient-to: rgba(248,113,113,.12) var(--tw-gradient-to-position); }
body.s-ui .from-red-100 { --tw-gradient-from: rgba(248,113,113,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(248,113,113,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-red-100 { --tw-gradient-to: rgba(248,113,113,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(248,113,113,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-red-100 { --tw-gradient-to: rgba(248,113,113,.12) var(--tw-gradient-to-position); }
body.s-ui .from-red-200 { --tw-gradient-from: rgba(248,113,113,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(248,113,113,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-red-200 { --tw-gradient-to: rgba(248,113,113,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(248,113,113,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-red-200 { --tw-gradient-to: rgba(248,113,113,.12) var(--tw-gradient-to-position); }
body.s-ui .from-orange-50 { --tw-gradient-from: rgba(251,146,60,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(251,146,60,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-orange-50 { --tw-gradient-to: rgba(251,146,60,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(251,146,60,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-orange-50 { --tw-gradient-to: rgba(251,146,60,.12) var(--tw-gradient-to-position); }
body.s-ui .from-orange-100 { --tw-gradient-from: rgba(251,146,60,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(251,146,60,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-orange-100 { --tw-gradient-to: rgba(251,146,60,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(251,146,60,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-orange-100 { --tw-gradient-to: rgba(251,146,60,.12) var(--tw-gradient-to-position); }
body.s-ui .from-orange-200 { --tw-gradient-from: rgba(251,146,60,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(251,146,60,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-orange-200 { --tw-gradient-to: rgba(251,146,60,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(251,146,60,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-orange-200 { --tw-gradient-to: rgba(251,146,60,.12) var(--tw-gradient-to-position); }
body.s-ui .from-amber-50 { --tw-gradient-from: rgba(251,191,36,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(251,191,36,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-amber-50 { --tw-gradient-to: rgba(251,191,36,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(251,191,36,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-amber-50 { --tw-gradient-to: rgba(251,191,36,.12) var(--tw-gradient-to-position); }
body.s-ui .from-amber-100 { --tw-gradient-from: rgba(251,191,36,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(251,191,36,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-amber-100 { --tw-gradient-to: rgba(251,191,36,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(251,191,36,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-amber-100 { --tw-gradient-to: rgba(251,191,36,.12) var(--tw-gradient-to-position); }
body.s-ui .from-amber-200 { --tw-gradient-from: rgba(251,191,36,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(251,191,36,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-amber-200 { --tw-gradient-to: rgba(251,191,36,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(251,191,36,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-amber-200 { --tw-gradient-to: rgba(251,191,36,.12) var(--tw-gradient-to-position); }
body.s-ui .from-yellow-50 { --tw-gradient-from: rgba(250,204,21,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(250,204,21,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-yellow-50 { --tw-gradient-to: rgba(250,204,21,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(250,204,21,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-yellow-50 { --tw-gradient-to: rgba(250,204,21,.12) var(--tw-gradient-to-position); }
body.s-ui .from-yellow-100 { --tw-gradient-from: rgba(250,204,21,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(250,204,21,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-yellow-100 { --tw-gradient-to: rgba(250,204,21,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(250,204,21,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-yellow-100 { --tw-gradient-to: rgba(250,204,21,.12) var(--tw-gradient-to-position); }
body.s-ui .from-yellow-200 { --tw-gradient-from: rgba(250,204,21,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(250,204,21,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-yellow-200 { --tw-gradient-to: rgba(250,204,21,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(250,204,21,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-yellow-200 { --tw-gradient-to: rgba(250,204,21,.12) var(--tw-gradient-to-position); }
body.s-ui .from-green-50 { --tw-gradient-from: rgba(52,211,153,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(52,211,153,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-green-50 { --tw-gradient-to: rgba(52,211,153,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(52,211,153,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-green-50 { --tw-gradient-to: rgba(52,211,153,.12) var(--tw-gradient-to-position); }
body.s-ui .from-green-100 { --tw-gradient-from: rgba(52,211,153,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(52,211,153,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-green-100 { --tw-gradient-to: rgba(52,211,153,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(52,211,153,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-green-100 { --tw-gradient-to: rgba(52,211,153,.12) var(--tw-gradient-to-position); }
body.s-ui .from-green-200 { --tw-gradient-from: rgba(52,211,153,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(52,211,153,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-green-200 { --tw-gradient-to: rgba(52,211,153,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(52,211,153,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-green-200 { --tw-gradient-to: rgba(52,211,153,.12) var(--tw-gradient-to-position); }
body.s-ui .from-blue-50 { --tw-gradient-from: rgba(56,189,248,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(56,189,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-blue-50 { --tw-gradient-to: rgba(56,189,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(56,189,248,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-blue-50 { --tw-gradient-to: rgba(56,189,248,.12) var(--tw-gradient-to-position); }
body.s-ui .from-blue-100 { --tw-gradient-from: rgba(56,189,248,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(56,189,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-blue-100 { --tw-gradient-to: rgba(56,189,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(56,189,248,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-blue-100 { --tw-gradient-to: rgba(56,189,248,.12) var(--tw-gradient-to-position); }
body.s-ui .from-blue-200 { --tw-gradient-from: rgba(56,189,248,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(56,189,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.s-ui .via-blue-200 { --tw-gradient-to: rgba(56,189,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(56,189,248,.12) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.s-ui .to-blue-200 { --tw-gradient-to: rgba(56,189,248,.12) var(--tw-gradient-to-position); }

/* Ventana de confirmación (sConfirmar en sinco_cliente.js), 26-10-2026 */
.s-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,9,18,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.s-modal.on { opacity: 1; }
.s-modal-caja { width: 100%; max-width: 480px; padding: 24px; border-radius: var(--r-xl, 20px); box-shadow: var(--shadow); transform: translateY(12px) scale(.98); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.s-modal.on .s-modal-caja { transform: none; }
.s-modal-lista { margin-top: 12px; display: grid; gap: 6px; font-size: 14px; }
.s-modal-lista li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface3); border: 1px solid var(--line); font-weight: 600; }
.s-modal-aviso { margin-top: 12px; font-size: 12.5px; color: var(--muted2); display: flex; gap: 8px; align-items: flex-start; }
.s-modal-aviso i { margin-top: 3px; color: var(--amber); }
.s-modal-botones { margin-top: 22px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 480px) { .s-modal-botones .s-btn { flex: 1; } }

/* Pestañas de una página (Mi plan de custodia), 26-10-2026: fijas arriba al hacer scroll y deslizables en el móvil */
.s-pestanas { position: sticky; top: 0; z-index: 30; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px 22px; padding: 10px 4px; background: linear-gradient(var(--bg, #0b1220) 80%, transparent); -webkit-overflow-scrolling: touch; }
.s-pestanas::-webkit-scrollbar { display: none; }
.s-pestana { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); background: var(--surface2, rgba(255,255,255,.04)); border: 1px solid var(--line); white-space: nowrap; transition: color .2s, background .2s, border-color .2s; }
.s-pestana:hover { color: #fff; border-color: var(--line-strong, var(--line)); }
.s-pestana i { font-size: 12px; opacity: .8; }
.s-pestana b { font-size: 11px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--surface3); color: var(--muted); }
.s-pestana.on { color: #1a0d03; background: var(--amber); border-color: var(--amber); }
.s-pestana.on i { opacity: 1; }
.s-pestana.on b { background: rgba(0,0,0,.18); color: #1a0d03; }

/* Bloques plegables (<details class="s-plegable">) con flecha, 26-10-2026 */
.s-plegable > summary { list-style: none; cursor: pointer; position: relative; padding-right: 28px; }
.s-plegable > summary::-webkit-details-marker { display: none; }
.s-plegable > summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; position: absolute; right: 2px; top: 2px; color: var(--muted2); transition: transform .2s; }
.s-plegable[open] > summary::after { transform: rotate(180deg); }