/* ==========================================================================
   ScrapIA — capa de sistema visual

   Se carga DESPUES de app.css a proposito: con la misma especificidad gana lo
   ultimo, asi que estas reglas cambian el aspecto del sitio entero sin tocar
   las 171 reglas anteriores ni el marcado de ninguna pagina.

   Las cuatro reglas que no se rompen:
     - 20px en tarjetas, imagenes e inputs. 9999px SOLO en botones.
     - Ninguna llamada a la accion de color: la unica es la pastilla oscura.
     - El verde aparece en texto y destellos, nunca rellenando una superficie.
     - Una sola sombra, susurrada. Nada de bordes gruesos.
   ========================================================================== */

body {
    background: var(--si-paper);
    color: var(--si-ink);
    font-family: var(--si-font);
    font-size: 14px;
    line-height: 1.56;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--si-font-display);
    font-weight: 600;          /* el sistema susurra: nunca por encima de 600 */
    letter-spacing: normal;
    color: var(--si-ink);
}

p { color: var(--si-muted); }
strong { color: var(--si-ink); font-weight: 600; }

/* --- Navegacion: pastilla de cristal flotando sobre la imagen -------------- */

.si-header {
    position: sticky;
    top: 16px;
    z-index: 30;
    max-width: 960px;
    margin: 16px auto 0;
    padding: 12px 20px;
    gap: 20px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--si-radius);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--si-shadow);
}

/* El logotipo es la decision mas reconocible del sistema: serif en cursiva,
   nunca una sans en negrita. */
.si-brand {
    font-family: var(--si-font-serif);
    font-style: italic;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--si-ink);
}

.si-brand span { color: var(--si-accent); }

.si-nav { align-items: center; gap: 6px; }

/* El `:not()` NO es cosmetico: `.si-nav a:hover` tiene mas especificidad (0,2,1) que
   `.si-nav-cta:hover` (0,2,0), asi que le pisaba el fondo al boton oscuro y lo dejaba en gris
   claro CON EL TEXTO BLANCO ENCIMA: al pasar el raton, el boton desaparecia. */
.si-nav a {
    padding: 8px 12px;
    border-radius: var(--si-pill);
    font-size: 14px;
    font-weight: 400;
    color: var(--si-muted);
    transition: color .18s ease, background .18s ease;
}

.si-nav a:not(.si-nav-cta):not(.si-nav-pill):hover {
    color: var(--si-ink);
    background: var(--si-cloud);
}

/* Y el boton gana siempre, venga de donde venga la otra regla. */
.si-nav a.si-nav-cta,
.si-nav a.si-nav-cta:hover,
.si-nav a.si-nav-cta:focus {
    background: var(--si-ink);
    color: var(--si-paper);
}

.si-nav a.si-nav-cta:hover { background: #000000; }

/* --- Botones: pastillas. La primaria es oscura, y es la unica. ------------- */

.si-button-primary,
.si-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--si-pill);
    background: var(--si-ink);
    color: var(--si-paper);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
}

.si-button-primary:hover,
.si-nav-cta:hover { background: #000000; transform: translateY(-1px); }

.si-button-secondary,
.si-button-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-pill);
    background: var(--si-paper);
    color: var(--si-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.si-button-secondary:hover,
.si-button-ghost:hover { background: var(--si-cloud); border-color: var(--si-hairline); }

.si-button-xl { padding: 13px 26px; font-size: 16px; }

.si-button-primary:disabled,
.si-button-secondary:disabled,
.si-button-ghost:disabled {
    background: var(--si-pebble);
    border-color: var(--si-pebble);
    color: var(--si-ash);
    cursor: not-allowed;
    transform: none;
}

/* --- Portada: una sola experiencia atmosferica, sin bandas ni rejillas ----- */

.si-landing-hero {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 88px clamp(20px, 5vw, 40px) 96px;
    overflow: hidden;
}

/* El fondo es un recurso propio en SVG: pesa unos kB y escala sin pixelarse.
   Las tres ultimas propiedades no son opcionales: la regla original de app.css traia
   `width: 70%` y `filter: blur(40px)` para un degradado, y el SVG las heredaba, asi que salia
   recortado a la derecha y desenfocado hasta ser papilla. Si algun dia se edita el SVG, hay
   que subir el ?v= o Cloudflare seguira sirviendo el viejo cuatro horas. */
.si-landing-bg {
    position: absolute;
    inset: -12% -14% auto;
    width: auto;
    height: 128%;
    filter: none;
    background: url("img/campo.svg?v=2") center / cover no-repeat;
    opacity: 1;
    z-index: 0;
    animation: si-deriva 44s ease-in-out infinite alternate;
}

/* Difumina el borde inferior para que la imagen no acabe en una linea recta. Se dejo en 220px
   en la primera version y, sumado al velo del SVG, borraba el campo del todo: la imagen tiene
   que anclar la marca, no desaparecer. */
.si-landing-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--si-paper));
    z-index: 1;
    pointer-events: none;
}

@keyframes si-deriva {
    from { transform: scale(1.04) translate3d(-8px, 0, 0); }
    to   { transform: scale(1.09) translate3d(8px, -12px, 0); }
}

.si-landing-copy,
.si-landing-card { position: relative; z-index: 2; }

.si-landing-title {
    font-family: var(--si-font-display);
    font-size: clamp(34px, 5.4vw, 42px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: normal;
}

/* El destello: plata con un guino verde. Solo en texto decorativo. */
.si-gradient,
.si-kicker-glow {
    background: var(--si-shimmer);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: si-brillo 7s linear infinite;
}

/* Dentro del titular hay que encadenar LAS DOS animaciones. Los `span` del titular arrancan
   en `opacity: 0` y solo se ven cuando termina `si-rise`; al poner aqui solo el destello se
   sobrescribia esa animacion y la linea del medio del titular quedaba invisible para siempre. */
.si-landing-title .si-gradient {
    animation: si-rise .8s ease forwards, si-brillo 7s linear infinite;
}

@keyframes si-brillo {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}

.si-kicker {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--si-ash);
}

.si-landing-lead {
    font-size: 18px;
    line-height: 1.5;
    color: var(--si-muted);
    max-width: 46ch;
}

.si-landing-strip {
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--si-muted);
}

.si-landing-strip span {
    padding: 6px 14px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-pill);
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(8px);
}

.si-landing-strip b { color: var(--si-ink); font-weight: 600; }

/* --- Superficies: todas curvan al mismo angulo, y eso es lo que hace que el
       producto parezca un solo material. ---------------------------------- */

.si-landing-card,
.si-landing-mock,
.si-feature-card,
.si-landing-pricing-card,
.si-form-panel,
.si-agent-panel,
.si-checkout-panel,
.si-iteration-card,
.si-admin,
.si-carousel-stage {
    border-radius: var(--si-radius);
    border: 1px solid var(--si-line);
    background: var(--si-soft);
    box-shadow: var(--si-shadow);
}

.si-landing-mock { background: var(--si-paper); overflow: hidden; }

.si-landing-mock pre {
    margin: 0;
    padding: 18px 20px;
    background: var(--si-ink);
    color: #e8e8e8;
    font-size: 12.5px;
    line-height: 1.6;
    overflow-x: auto;
}

.si-landing-mock pre code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.si-mock-out { padding: 16px 20px; }
.si-mock-out p { margin: 0 0 6px; font-size: 13px; }
.si-mock-out b { color: var(--si-ink); }

/* La tarjeta es una REJILLA, no un flex: ahi lo que controla el ancho de un hijo es
   `justify-self`, no `align-self`. Con `align-self` sola la etiqueta seguia estirandose a todo
   el ancho y salia como una barra verde en lugar de como pastilla. Se sube tambien la
   especificidad a (0,2,0) para no depender del orden de carga de los ficheros. */
.si-feature-card .si-feature-tag,
.si-landing-features .si-feature-tag {
    display: inline-flex;
    justify-self: start;
    align-self: start;
    width: fit-content;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: var(--si-pill);
    background: var(--si-mint);
    color: #2f6b3a;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.si-landing-features,
.si-landing-pricing {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 40px) 64px;
    gap: 20px;
}

.si-feature-card { padding: 24px; }
.si-feature-card h2 { font-size: 24px; margin: 14px 0 8px; }
.si-feature-card p { margin: 0; }

.si-landing-pricing-card { padding: 24px; text-align: center; }

.si-pricing-amount {
    display: block;
    font-family: var(--si-font-display);
    font-size: 42px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--si-ink);
}

/* Bloque de lavado verde: el UNICO sitio donde el color rellena superficie. */
.si-band { background: var(--si-mint); border: 0; }

/* ==========================================================================
   PORTADA REHECHA
   Antes: tres cajas de texto iguales y un muro de parrafos. El mecanismo del
   producto se contaba en una frase que nadie lee. Ahora el mecanismo es una
   ilustracion animada a todo lo ancho y el texto se ha recortado a la mitad.
   ========================================================================== */

.si-hero-nota {
    margin-top: 18px;
    font-size: 13px;
    color: var(--si-ash);
}

.si-mock-nota {
    color: var(--si-ash);
    font-size: 12px;
}

/* La barra de navegacion flota y es pegajosa, asi que al saltar a #features o #pricing el
   titulo quedaba oculto detras. `scroll-margin-top` reserva ese hueco. */
section[id] { scroll-margin-top: 108px; }

.si-seccion-cabeza {
    max-width: 560px;
    margin: 0 auto 36px;
    text-align: center;
}

.si-seccion-cabeza h2 {
    margin: 10px 0 0;
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1.25;
}

/* --- El mecanismo, que es el centro de la pagina --------------------------- */

.si-mecanismo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px clamp(20px, 5vw, 40px) 64px;
}

/* Sin caja ni borde a proposito: el dibujo ya trae sus propias tarjetas dentro,
   y meterlo en otra caja era exactamente el problema de la version anterior. */
.si-mecanismo-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

.si-mecanismo-pies {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--si-muted);
}

.si-mecanismo-pies b { color: var(--si-ink); font-weight: 600; }

/* Punto separador con el destello del sistema */
.si-shimmer-punto {
    width: 42px;
    height: 1px;
    background: var(--si-shimmer);
    background-size: 220% 100%;
    animation: si-brillo 7s linear infinite;
}

/* --- Filas alternas: ilustracion y el texto justo -------------------------- */

.si-filas {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 40px);
    display: grid;
    gap: 40px;
}

/* La ilustracion no debe comerse la fila: con 1fr/1fr y un tope de ancho, el texto y el dibujo
   pesan lo mismo y desaparecen los huecos muertos de la primera version. */
.si-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
}

.si-fila img { max-width: 460px; justify-self: center; }

.si-fila-invertida .si-fila-texto { order: 2; }

.si-fila h3 {
    margin: 0 0 10px;
    font-size: clamp(22px, 2.6vw, 27px);
    line-height: 1.3;
}

.si-fila p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    max-width: 40ch;
}

.si-fila img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* --- Precio: una linea, no una tarjeta ------------------------------------ */

.si-precio {
    max-width: 720px;
    margin: 64px auto 0;
    padding: 48px clamp(20px, 5vw, 40px) 72px;
    text-align: center;
}

.si-precio-linea {
    margin: 12px 0 6px;
    font-family: var(--si-font-display);
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.35;
    color: var(--si-muted);
}

.si-precio-linea b { color: var(--si-ink); font-weight: 600; }
.si-precio-cero { color: var(--si-accent) !important; }
.si-precio-sep { color: var(--si-pebble); margin: 0 10px; }

.si-precio-nota {
    margin: 0 0 26px;
    font-size: 14px;
    color: var(--si-ash);
}

@media (max-width: 860px) {
    .si-fila { grid-template-columns: 1fr; }
    .si-fila-invertida .si-fila-texto { order: 0; }
    .si-filas { gap: 48px; }
}

/* --- Formularios ---------------------------------------------------------- */

.si-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], select, textarea {
    padding: 12px 16px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    background: var(--si-paper);
    color: var(--si-ink);
    font-family: var(--si-font);
    font-size: 16px;
}

.si-input:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--si-ash);
    box-shadow: 0 0 0 4px rgba(68, 143, 82, .1);
}

::placeholder { color: var(--si-muted); opacity: 1; }

/* --- Avisos: hairline y lavado, sin bloques saturados --------------------- */

.si-alert, .si-alert-success, .si-alert-error, .si-error {
    border-radius: var(--si-radius);
    border: 1px solid var(--si-line);
    background: var(--si-soft);
    padding: 14px 18px;
    font-size: 14px;
    box-shadow: none;
}

.si-alert-success { border-color: #b9d8c0; background: var(--si-mint); color: #2f6b3a; }
.si-alert-error, .si-error { border-color: #e3c9c6; background: #fbf1f0; color: var(--si-red); }

/* --- Filo decorativo: plata con un destello. Separa sin pesar. ------------ */

.si-divider, .si-shimmer {
    height: 1px;
    border: 0;
    background: var(--si-shimmer);
    background-size: 220% 100%;
    animation: si-brillo 7s linear infinite;
}

/* --- Pie ------------------------------------------------------------------ */

.si-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px clamp(20px, 5vw, 40px);
    border-top: 1px solid var(--si-cloud);
    color: var(--si-muted);
    font-size: 13px;
    background: transparent;
}

.si-footer a:hover { color: var(--si-ink); }

/* --- Selector de idioma y pastilla de sesion ------------------------------ */

.si-lang-switch {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-pill);
    background: var(--si-paper);
}

.si-lang-button {
    padding: 5px 12px;
    border: 0;
    border-radius: var(--si-pill);
    background: transparent;
    color: var(--si-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.si-lang-active { background: var(--si-ink); color: var(--si-paper); }

.si-nav-pill {
    border: 1px solid var(--si-line);
    border-radius: var(--si-pill);
    background: var(--si-paper);
    font-size: 13px;
}

/* El radio hace todo el trabajo: sin marcos ni sombras alrededor. */
img, .si-carousel-stage img { border-radius: var(--si-radius); max-width: 100%; height: auto; }

@media (max-width: 900px) {
    .si-header { margin: 12px 12px 0; padding: 10px 14px; }
    .si-nav { flex-wrap: wrap; justify-content: flex-end; }
    .si-landing-hero { padding-top: 56px; }
}

/* Quien pide menos movimiento no ve ninguno. */
@media (prefers-reduced-motion: reduce) {
    .si-landing-bg,
    .si-gradient,
    .si-kicker-glow,
    .si-divider,
    .si-shimmer { animation: none; }

    .si-button-primary:hover { transform: none; }
}

/* ==========================================================================
   ADMINISTRACION UNIFICADA
   Antes eran tres paginas (/admin, /leads, /admin/smtp) y cada una una pila de
   cajas sueltas sin jerarquia. Ahora una cabecera, unas pestanas y un panel.
   ========================================================================== */

.si-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    margin: 24px 0 0;
    border: 1px solid var(--si-line);
    border-radius: var(--si-pill);
    background: var(--si-soft);
    width: fit-content;
    max-width: 100%;
}

.si-tab {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 9px 18px;
    border-radius: var(--si-pill);
    background: transparent;
    color: var(--si-muted);
    font: inherit;
    font-size: .93rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.si-tab:hover { color: var(--si-ink); background: var(--si-cloud); }

.si-tab-active,
.si-tab-active:hover {
    background: var(--si-ink);
    color: var(--si-paper);
}

.si-tab-panel {
    margin-top: 22px;
    padding: 26px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    background: var(--si-paper);
    box-shadow: var(--si-shadow);
}

/* Una tarjeta dentro de un panel: sin sombra propia, que ya la pone el panel. */
.si-card {
    padding: 20px;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-radius-sm);
    background: var(--si-soft);
}

.si-card h2 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.si-card h2 small {
    font-weight: 500;
    color: var(--si-muted);
    font-size: .85rem;
}

.si-form-panel-centered { text-align: center; }
.si-form-panel-centered .si-button-primary,
.si-form-panel-centered .si-button-ghost { margin-top: 14px; }

/* Etiqueta ENCIMA del campo, no envolviendolo: asi se puede asociar con for/id y
   el lector de pantalla la anuncia bien. */
.si-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.si-field > label { font-size: .85rem; font-weight: 600; color: var(--si-ink); }
.si-field-narrow { max-width: 220px; }

.si-panel-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--si-pebble);
}

.si-panel-toolbar .si-field { margin-bottom: 0; min-width: 190px; }
.si-panel-toolbar-actions { display: flex; gap: 10px; margin-left: auto; }

.si-panel-count { margin: 14px 0; font-size: .88rem; color: var(--si-muted); }

.si-panel-block {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--si-pebble);
}

.si-panel-block h3 { margin: 0 0 6px; font-size: 1.05rem; }

.si-check-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 18px; }

.si-empty {
    padding: 26px;
    text-align: center;
    color: var(--si-muted);
    background: var(--si-soft);
    border: 1px dashed var(--si-pebble);
    border-radius: var(--si-radius-sm);
}

/* Una tabla ancha desplaza SU CAJA, nunca la pagina. */
.si-table-scroll {
    overflow-x: auto;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-radius-sm);
}

.si-table-scroll .si-table { margin: 0; }

.si-run-list { display: grid; gap: 14px; }

/* Texto solo para lectores de pantalla. */
.si-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 720px) {
    .si-tab-panel { padding: 18px; }
    .si-panel-toolbar-actions { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   ACCESO (una sola pantalla, sin contrasenas)
   Antes eran cinco pantallas con el mismo formulario generico y sin foco. Esto
   es una tarjeta centrada, un campo grande y un boton: nada mas que decidir.
   ========================================================================== */

.si-acceso {
    min-height: calc(100vh - 200px);
    display: grid;
    place-items: center;
    padding: 48px 20px 80px;
}

.si-acceso-caja {
    width: 100%;
    max-width: 420px;
    padding: 40px 36px 32px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    background: var(--si-paper);
    box-shadow: var(--si-shadow);
    text-align: center;
}

.si-acceso-caja .si-brand { display: inline-block; margin-bottom: 26px; }

.si-acceso-caja h1 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 3.4vw, 1.9rem);
    line-height: 1.2;
}

.si-acceso-lead { margin: 0 0 26px; font-size: .95rem; }

/* El formulario se alinea a la izquierda aunque la tarjeta este centrada: una
   etiqueta centrada sobre su campo se lee peor. */
.si-acceso-caja .si-field { text-align: left; }

.si-input-grande { padding: 14px 16px; font-size: 1.02rem; }

/* Seis digitos: monoespaciado y separados, para poder comprobarlos de un vistazo. */
.si-input-codigo {
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.7rem;
    letter-spacing: .5em;
    padding: 14px 8px 14px 20px;   /* el ultimo hueco del letter-spacing descentra: se compensa */
}

.si-button-ancho { width: 100%; justify-content: center; margin-top: 6px; }

.si-acceso-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--si-cloud);
}

.si-acceso-pie {
    margin: 22px 0 0;
    font-size: .8rem;
    color: var(--si-muted);
    line-height: 1.5;
}

@media (max-width: 480px) {
    .si-acceso-caja { padding: 30px 22px 24px; }
    .si-input-codigo { font-size: 1.4rem; letter-spacing: .35em; }
}

/* ==========================================================================
   MIS PLANTILLAS Y SALDO
   ========================================================================== */

.si-plantilla-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    margin-top: 22px;
}

.si-plantilla {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    background: var(--si-paper);
    box-shadow: var(--si-shadow);
}

.si-plantilla > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.si-plantilla h2 {
    margin: 0;
    font-size: .98rem;
    line-height: 1.35;
    /* El objetivo puede ser largo; se corta a dos lineas en vez de estirar la tarjeta. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.si-plantilla-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 16px;
}

.si-plantilla-datos dt {
    margin: 0;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--si-muted);
}

.si-plantilla-datos dd { margin: 2px 0 0; font-size: .9rem; font-weight: 600; color: var(--si-ink); }

.si-plantilla > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--si-cloud);
}

.si-plantilla > footer small { color: var(--si-muted); font-size: .78rem; }
.si-plantilla-acciones { display: flex; gap: 8px; }

/* Etiqueta de estado. El color no va solo: lleva texto, para que se entienda
   sin distinguir colores. */
.si-etiqueta {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--si-pill);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.si-etiqueta-ok { background: var(--si-mint); color: #1f5c2b; }
.si-etiqueta-espera { background: var(--si-cloud); color: var(--si-muted); }
.si-etiqueta-mal { background: #f6dedb; color: var(--si-red); }

.si-empty-grande { padding: 46px 26px; }
.si-empty-grande .si-button-primary { margin-top: 16px; }
.si-lead-izq { text-align: left; max-width: 62ch; }

.si-planes {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 24px 0;
}

.si-plan {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 18px;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    background: var(--si-paper);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.si-plan:hover { border-color: var(--si-ash); }

/* El elegido se marca con borde grueso Y con fondo: dos senales, no solo el color. */
.si-plan-activo,
.si-plan-activo:hover {
    border-color: var(--si-ink);
    box-shadow: inset 0 0 0 1px var(--si-ink);
    background: var(--si-soft);
}

.si-plan-nombre { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--si-muted); }
.si-plan-importe { font-family: var(--si-font-display); font-size: 1.7rem; line-height: 1.1; }
.si-plan small { color: var(--si-muted); font-size: .82rem; }
.si-plan em { font-style: normal; font-size: .82rem; color: var(--si-ink); }

.si-pago-cierre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--si-pebble);
}

.si-pago-cierre span { display: block; font-size: .8rem; color: var(--si-muted); }
.si-pago-cierre b { font-family: var(--si-font-display); font-size: 1.5rem; }

/* TRAMPA DE GRID: `.si-admin` es un grid, y en un grid los hijos valen `min-width:auto`, asi que la
   pista NO baja del ancho minimo de su contenido. Con una tabla ancha dentro, el contenedor entero
   crecia (1385 px en un viewport de 1360) y la PAGINA se desplazaba en horizontal, aunque la tabla
   tuviera su propio `overflow-x`. Con `minmax(0, 1fr)` la pista si puede encogerse y el
   desplazamiento se queda dentro de la caja de la tabla, que es donde debe estar. */
.si-admin {
    grid-template-columns: minmax(0, 1fr);
}

.si-admin > * { min-width: 0; }

/* 68 px para el titulo de una seccion interna era el motivo de que todo pareciese un cartel sin
   jerarquia: el h1 gritaba mas que el contenido. */
.si-admin-head h1 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.12;
    margin: 6px 0 0;
}

.si-admin-head { align-items: center; flex-wrap: wrap; }

/* La pastilla del correo no puede empujar el ancho de la pagina. */
.si-admin-head .si-nav-pill {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* En movil, un objetivo largo o un selector CSS no tienen espacios donde cortar, asi que la fila
   crece y arrastra la pagina. Se les permite romper por donde sea: es feo partir una palabra, es
   peor que el usuario tenga que desplazar la pagina entera de lado. */
.si-admin-row,
.si-admin-row b,
.si-admin-row span,
.si-card,
.si-plantilla h2 {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.si-admin-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}

@media (max-width: 720px) {
    .si-admin-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   SCROLL CONTENIDO — la regla que faltaba en todas las páginas
   Una lista larga NO alarga la página: se desplaza dentro de su caja. El scroll
   infinito venía de tablas y trazas creciendo sin tope.
   ========================================================================== */

.si-scroll-y {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.si-scroll-y-corto { max-height: 260px; }
.si-scroll-y-alto { max-height: 620px; }

/* Barra fina y discreta, no la del sistema a todo lo ancho. */
.si-scroll-y::-webkit-scrollbar { width: 10px; }
.si-scroll-y::-webkit-scrollbar-thumb {
    background: var(--si-pebble);
    border: 3px solid var(--si-paper);
    border-radius: var(--si-pill);
}
.si-scroll-y::-webkit-scrollbar-thumb:hover { background: var(--si-ash); }

/* ==========================================================================
   CHIPS Y PLEGABLES
   ========================================================================== */

.si-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.si-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-pill);
    background: var(--si-paper);
    font-size: .78rem;
    font-weight: 600;
    color: var(--si-muted);
    white-space: nowrap;
}

.si-chip-tinta { background: var(--si-ink); border-color: var(--si-ink); color: var(--si-paper); }
.si-chip-verde { background: var(--si-mint); border-color: #bcdcc4; color: #1f5c2b; }
.si-chip-rojo { background: #f6dedb; border-color: #e8c4bf; color: var(--si-red); }

.si-plegable {
    margin-top: 20px;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-radius-sm);
    background: var(--si-soft);
}

.si-plegable > summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 16px;
    cursor: pointer;
    font-weight: 600;
    color: var(--si-ink);
    list-style: none;
}

.si-plegable > summary::-webkit-details-marker { display: none; }

/* El triangulo lo dibujamos nosotros para que gire al abrir. */
.si-plegable > summary::before {
    content: ">";
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    color: var(--si-ash);
    transition: transform .15s ease;
}
.si-plegable[open] > summary::before { transform: rotate(90deg); }
.si-plegable > summary small { color: var(--si-muted); font-weight: 500; margin-left: auto; }

/* ==========================================================================
   PASOS DEL AGENTE
   Cada paso: numero, lo que hizo, por que, y la captura de ese momento.
   ========================================================================== */

.si-pasos {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--si-pebble);
    background: var(--si-paper);
}

.si-paso {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 12px 16px;
    border-bottom: 1px solid var(--si-cloud);
}

.si-paso:last-child { border-bottom: 0; }

.si-paso-num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--si-pill);
    background: var(--si-cloud);
    color: var(--si-muted);
    font-size: .76rem;
    font-weight: 700;
}

.si-paso-fallido .si-paso-num { background: #f6dedb; color: var(--si-red); }

.si-paso-cuerpo { min-width: 0; }
.si-paso-cuerpo b { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.si-paso-cuerpo p { margin: 3px 0 0; font-size: .84rem; color: var(--si-muted); overflow-wrap: anywhere; }
.si-paso-fallo { color: var(--si-red) !important; }

/* Miniatura: da contexto sin ocupar media pantalla, y abre la grande al pulsar. */
.si-paso-mini {
    width: 92px;
    height: 58px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--si-pebble);
    border-radius: 6px;
    background: var(--si-cloud);
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.si-paso-mini:hover { border-color: var(--si-ink); transform: scale(1.03); }
.si-paso-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

.si-notas {
    margin: 0;
    padding: 12px 16px;
    list-style: none;
    border-top: 1px solid var(--si-pebble);
}

.si-notas li { font-size: .82rem; color: var(--si-muted); padding: 2px 0; overflow-wrap: anywhere; }

.si-notas li span {
    display: inline-block;
    min-width: 62px;
    margin-right: 8px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--si-ash);
}

/* ==========================================================================
   RESULTADO Y VISOR
   ========================================================================== */

.si-resultado {
    margin-top: 24px;
    padding: 22px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    background: var(--si-paper);
    box-shadow: var(--si-shadow);
}

.si-resultado-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.si-resultado-dato-caja { min-width: 0; flex: 1 1 260px; }

.si-resultado-etiqueta {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--si-muted);
    margin-bottom: 6px;
}

.si-resultado-dato {
    margin: 0;
    font-family: var(--si-font-display);
    font-size: clamp(1.15rem, 2.4vw, 1.65rem);
    line-height: 1.25;
    color: var(--si-ink);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.si-resultado-dato-mal { font-size: 1rem; color: var(--si-muted); font-family: var(--si-font); }

.si-visor {
    margin: 20px 0 0;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-radius-sm);
    overflow: hidden;
    background: var(--si-cloud);
}

.si-visor img { width: 100%; display: block; max-height: 520px; object-fit: contain; background: var(--si-cloud); }

.si-visor figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: var(--si-paper);
    border-top: 1px solid var(--si-pebble);
    font-size: .82rem;
    color: var(--si-muted);
}

.si-visor figcaption small { color: var(--si-ash); margin-left: 6px; }

.si-visor-flecha {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-pill);
    background: var(--si-paper);
    color: var(--si-ink);
    font-size: 1.2rem; line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.si-visor-flecha:hover { background: var(--si-cloud); }

/* ==========================================================================
   MIENTRAS RESUELVE — la pantalla del agente en directo

   Una ejecucion con IA son minutos. Lo que habia antes era el boton puesto en
   «Resolviendo...» y nada mas, asi que no habia manera de distinguir un agente
   trabajando de uno colgado. Aqui se ve lo que ve el: la ultima captura grande,
   los pasos segun caen y un reloj.

   Sigue las mismas cuatro reglas del sistema: nada de color de relleno, una
   sola sombra, y el unico verde es el punto que late.
   ========================================================================== */

.si-vivo {
    margin-top: 24px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    background: var(--si-paper);
    box-shadow: var(--si-shadow);
    overflow: hidden;
}

.si-vivo-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--si-cloud);
}

.si-vivo-que { flex: 1 1 auto; min-width: 0; }
.si-vivo-que b { display: block; font-size: .95rem; color: var(--si-ink); overflow-wrap: anywhere; }
.si-vivo-que small { display: block; font-size: .78rem; color: var(--si-muted); font-variant-numeric: tabular-nums; }

/* El unico elemento animado de la pagina. Late para decir «sigo vivo», que es
   exactamente la pregunta que no se podia responder antes. */
.si-vivo-pulso {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: var(--si-pill);
    background: var(--si-accent);
    box-shadow: 0 0 0 0 rgba(68, 143, 82, .5);
    animation: si-latido 1.6s ease-out infinite;
}

@keyframes si-latido {
    0%   { box-shadow: 0 0 0 0 rgba(68, 143, 82, .45); }
    70%  { box-shadow: 0 0 0 9px rgba(68, 143, 82, 0); }
    100% { box-shadow: 0 0 0 0 rgba(68, 143, 82, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .si-vivo-pulso { animation: none; }
}

.si-vivo-parar {
    flex: 0 0 auto;
    padding: 7px 15px;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-pill);
    background: var(--si-paper);
    color: var(--si-ink);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.si-vivo-parar:hover:not(:disabled) { background: var(--si-cloud); border-color: var(--si-ink); }
.si-vivo-parar:disabled { color: var(--si-ash); cursor: default; }

.si-vivo-aviso {
    margin: 0;
    padding: 10px 18px;
    background: var(--si-soft);
    border-bottom: 1px solid var(--si-cloud);
    font-size: .82rem;
    color: var(--si-muted);
}

/* El trabajo vive en el servidor, no en la pestaña. Decirlo cambia lo que la gente hace:
   sin esta linea nadie se atreve a cerrar, y esperar mirando cinco minutos es el problema. */
.si-vivo-nota {
    margin: 0;
    padding: 9px 18px;
    border-bottom: 1px solid var(--si-cloud);
    font-size: .78rem;
    color: var(--si-muted);
    overflow-wrap: anywhere;
}

.si-vivo-nota code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--si-cloud);
    font-size: .95em;
    color: var(--si-ink);
}

.si-vivo-nota b { color: var(--si-ink); }

/* --- Marcador de la lista, cuando el objetivo trae varios elementos -------- */

.si-vivo-lista { padding: 12px 18px 0; }

.si-vivo-lista p { margin: 7px 0 0; font-size: .82rem; color: var(--si-muted); overflow-wrap: anywhere; }
.si-vivo-lista p b { color: var(--si-ink); }

.si-vivo-barra {
    height: 4px;
    border-radius: var(--si-pill);
    background: var(--si-cloud);
    overflow: hidden;
}

.si-vivo-barra span {
    display: block;
    height: 100%;
    background: var(--si-ink);
    transition: width .4s ease;
}

/* --- La pantalla y los pasos ---------------------------------------------- */

.si-vivo-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 0;
}

.si-vivo-pantalla {
    margin: 0;
    min-width: 0;
    background: var(--si-cloud);
    border-right: 1px solid var(--si-cloud);
}

.si-vivo-pantalla img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    object-position: top center;
    background: var(--si-cloud);
}

.si-vivo-pantalla figcaption {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 12px;
    background: var(--si-paper);
    border-top: 1px solid var(--si-cloud);
}

.si-vivo-pantalla figcaption span { font-size: .82rem; color: var(--si-ink); overflow-wrap: anywhere; }
.si-vivo-pantalla figcaption small {
    font-size: .72rem;
    color: var(--si-ash);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.si-vivo-espera {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 20px;
    text-align: center;
    font-size: .85rem;
    color: var(--si-muted);
}

/* Del ultimo al primero: lo recien hecho arriba, sin tener que perseguir el scroll. */
.si-vivo-pasos {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--si-paper);
}

.si-vivo-pasos li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 14px;
    border-bottom: 1px solid var(--si-cloud);
}

.si-vivo-pasos li:last-child { border-bottom: 0; }
.si-vivo-pasos li:first-child b { color: var(--si-ink); }
.si-vivo-pasos li b { display: block; font-size: .84rem; overflow-wrap: anywhere; }
.si-vivo-pasos li p { margin: 2px 0 0; font-size: .78rem; color: var(--si-muted); overflow-wrap: anywhere; }

.si-vivo-num {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--si-pill);
    background: var(--si-cloud);
    color: var(--si-muted);
    font-size: .7rem;
    font-weight: 700;
}

.si-vivo-paso-fallido .si-vivo-num { background: #f6dedb; color: var(--si-red); }
.si-vivo-vacio { display: block !important; font-size: .82rem; color: var(--si-ash); }

/* --- Tira de miniaturas: por donde ha pasado ------------------------------ */

.si-vivo-tira {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    overflow-x: auto;
    border-top: 1px solid var(--si-cloud);
    background: var(--si-soft);
}

.si-vivo-tira img {
    flex: 0 0 auto;
    width: 84px;
    height: 52px;
    object-fit: cover;
    object-position: top left;
    border: 1px solid var(--si-pebble);
    border-radius: 6px;
    background: var(--si-paper);
}

.si-vivo-tira img:last-child { border-color: var(--si-ink); }

/* --- Elementos de la lista ya resueltos ----------------------------------- */

.si-vivo-resueltos {
    margin: 0;
    padding: 10px 14px;
    list-style: none;
    border-top: 1px solid var(--si-cloud);
}

.si-vivo-resueltos li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 4px 0;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.si-vivo-resueltos li > span {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    border-radius: var(--si-pill);
    background: var(--si-cloud);
    color: var(--si-muted);
    font-size: .68rem;
    font-weight: 700;
}

.si-vivo-resueltos li b { color: var(--si-ink); }
.si-vivo-resueltos li em { font-style: normal; color: var(--si-muted); }
.si-vivo-ok > span { background: var(--si-mint); color: #1f5c2b; }
.si-vivo-ko > span { background: #f6dedb; color: var(--si-red); }

@media (max-width: 760px) {
    .si-vivo-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .si-vivo-pantalla { border-right: 0; border-bottom: 1px solid var(--si-cloud); }
    .si-vivo-pantalla img { max-height: 300px; }
    .si-vivo-pasos { max-height: 220px; }
}

@media (max-width: 620px) {
    .si-paso { grid-template-columns: 28px minmax(0, 1fr); }
    .si-paso-mini { grid-column: 2; width: 100%; height: 120px; }
    .si-scroll-y { max-height: 340px; }
}

/* ==========================================================================
   CIFRAS DEL NEGOCIO
   Cuatro números y una frase que los interpreta. Un panel de métricas sin la
   frase obliga a hacer la cuenta mentalmente cada vez que se abre.
   ========================================================================== */

.si-cifras {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 20px;
}

.si-cifra {
    padding: 16px 18px;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-radius-sm);
    background: var(--si-soft);
    border-left: 3px solid var(--si-ash);
}

.si-cifra span {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--si-muted);
}

.si-cifra b {
    display: block;
    margin: 6px 0 4px;
    font-family: var(--si-font-display);
    font-size: 1.6rem;
    line-height: 1.05;
    color: var(--si-ink);
}

.si-cifra small { display: block; font-size: .76rem; line-height: 1.45; color: var(--si-muted); }

.si-cifra-ok { border-left-color: var(--si-accent); }
.si-cifra-mal { border-left-color: var(--si-red); }
.si-cifra-mal b { color: var(--si-red); }
.si-cifra-aviso { border-left-color: #b8860b; }

.si-cifras-lectura {
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px dashed var(--si-pebble);
    border-radius: var(--si-radius-sm);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--si-muted);
}

.si-cifras-lectura strong { color: var(--si-ink); }
.si-cifras-lectura small { display: block; margin-top: 8px; font-size: .76rem; color: var(--si-ash); }

/* ==========================================================================
   CELDAS CON ACCIONES (CRUD de cuentas)
   ========================================================================== */

.si-celda-sub { display: block; margin-top: 2px; font-size: .74rem; color: var(--si-muted); }

.si-input-mini { padding: 6px 9px; font-size: .84rem; max-width: 130px; }

.si-button-mini {
    padding: 6px 11px !important;
    font-size: .78rem !important;
    white-space: nowrap;
}

.si-celda-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.si-celda-edicion { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* El saldo es un botón, no un texto: si se puede cambiar, tiene que parecer pulsable. */
.si-celda-boton {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 9px;
    border: 1px dashed var(--si-pebble);
    border-radius: var(--si-radius-sm);
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--si-ink);
    cursor: pointer;
}

.si-celda-boton:hover { border-style: solid; background: var(--si-cloud); }
.si-celda-boton span { font-size: .7rem; font-weight: 500; color: var(--si-muted); }

/* Una cuenta de baja se ve de baja, sin tener que leer la columna de estado. */
.si-fila-baja { opacity: .55; }
.si-fila-baja b { text-decoration: line-through; }

.si-celda-mini {
    display: block;
    width: 62px;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--si-pebble);
    border-radius: 5px;
}

.si-celda-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

.si-admin-pie { margin: 18px 0 0; font-size: .8rem; color: var(--si-ash); }
.si-admin-pie a { color: var(--si-muted); }

/* ==========================================================================
   PLANTILLAS COMPACTAS + CÓMO SE MONTÓ
   La tarjeta pasa de un bloque con tres filas de datos a una línea de cabecera
   y una cadena de pasos: se ve de un vistazo qué hace la plantilla.
   ========================================================================== */

.si-plantilla-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.si-plantilla { padding: 16px 18px; }
.si-plantilla > header { margin-bottom: 10px; }
.si-plantilla h2 { font-size: .92rem; }

.si-plantilla-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 12px;
    font-size: .78rem;
    color: var(--si-muted);
}

.si-plantilla-meta b { color: var(--si-ink); font-weight: 600; }

/* La cadena: un eslabón por paso, con el verbo y el punto donde actúa. Es el
   «algo visual» que faltaba para saber cómo se montó sin abrir nada. */
.si-cadena {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0 0 12px;
}

.si-eslabon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 8px;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-pill);
    background: var(--si-soft);
    font-size: .72rem;
    color: var(--si-muted);
}

.si-eslabon i {
    font-style: normal;
    font-size: .8rem;
    line-height: 1;
}

.si-eslabon code {
    max-width: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
    color: var(--si-ash);
}

.si-eslabon-extrae { background: var(--si-mint); border-color: #bcdcc4; color: #1f5c2b; }
.si-eslabon-extrae code { color: #3d7a49; }
.si-cadena-flecha { color: var(--si-pebble); font-size: .7rem; }

/* ==========================================================================
   INTEGRACIONES
   Antes eran cinco cajas apiladas con <pre> a pelo, cada una del mismo tamaño
   y sin saber por dónde empezar. Ahora: la clave arriba, y las recetas debajo.
   ========================================================================== */

.si-clave-caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    background: var(--si-soft);
    margin-bottom: 22px;
}

.si-clave-valor {
    flex: 1 1 260px;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-radius-sm);
    background: var(--si-paper);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .88rem;
    color: var(--si-ink);
    overflow-x: auto;
    white-space: nowrap;
}

.si-receta {
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-radius-sm);
    background: var(--si-paper);
    margin-bottom: 12px;
    overflow: hidden;
}

.si-receta > header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--si-soft);
    border-bottom: 1px solid var(--si-pebble);
}

.si-receta > header h3 { margin: 0; font-size: .92rem; }
.si-receta > header .si-chip { margin-left: auto; }
.si-receta-cuerpo { padding: 14px 16px; }
.si-receta-cuerpo p { margin: 0 0 10px; font-size: .84rem; }
.si-receta-cuerpo p:last-child { margin-bottom: 0; }

/* Un bloque de código que se desplaza SOLO en horizontal dentro de su caja. */
.si-codigo {
    margin: 0;
    padding: 13px 15px;
    border-radius: var(--si-radius-sm);
    background: #16171a;
    color: #e6e6e6;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .8rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

.si-codigo .si-cod-cmd { color: #7fd694; }
.si-codigo .si-cod-flag { color: #9db8f5; }
.si-codigo .si-cod-txt { color: #e0c98a; }

/* ==========================================================================
   PAGOS con algo más que texto
   ========================================================================== */

.si-pago-cabecera {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: stretch;
    margin-bottom: 24px;
}

.si-saldo-tarjeta {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: var(--si-radius);
    background: var(--si-ink);
    color: var(--si-paper);
}

.si-saldo-tarjeta span { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }

.si-saldo-tarjeta b {
    display: block;
    margin: 8px 0 2px;
    font-family: var(--si-font-display);
    font-size: 2.6rem;
    line-height: 1;
}

.si-saldo-tarjeta small { font-size: .82rem; opacity: .75; }

/* Un destello diagonal, para que la tarjeta no sea un rectángulo negro plano. */
.si-saldo-tarjeta::after {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 70%;
    height: 180%;
    background: linear-gradient(120deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%);
    transform: rotate(18deg);
    pointer-events: none;
}

.si-medidor { margin-top: 16px; }

.si-medidor-barra {
    height: 6px;
    border-radius: var(--si-pill);
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}

.si-medidor-relleno { height: 100%; border-radius: var(--si-pill); background: #7fd694; }

.si-pago-porque {
    padding: 20px;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-radius);
    background: var(--si-soft);
}

.si-pago-porque h3 { margin: 0 0 12px; font-size: .95rem; }
.si-pago-porque ul { margin: 0; padding: 0; list-style: none; }

.si-pago-porque li {
    position: relative;
    padding: 0 0 9px 22px;
    font-size: .86rem;
    color: var(--si-muted);
}

.si-pago-porque li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--si-accent);
}

.si-plan-etiqueta {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 8px;
    border-radius: var(--si-pill);
    background: var(--si-mint);
    color: #1f5c2b;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.si-plan { position: relative; }

@media (max-width: 780px) {
    .si-pago-cabecera { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   PÁGINA DEL AGENTE — una columna
   Antes era un «hero» a dos columnas: media pantalla la ocupaba un titular
   gigante y el trabajo real quedaba apretado en la otra mitad. Aquí no se viene
   a leer un eslogan: se escribe un objetivo y se lee un dato.
   ========================================================================== */

.si-agente {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 32px) 80px;
}

.si-agente-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.si-agente-cabecera h1 {
    margin: 6px 0 0;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.08;
}

.si-chip-enlace { text-decoration: none; color: var(--si-ink); }
.si-chip-enlace:hover { background: var(--si-cloud); border-color: var(--si-ash); }

/* El panel deja de ser una columna estrecha y pasa a ser la caja de trabajo. */
.si-agente .si-agent-panel {
    padding: 24px;
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    background: var(--si-paper);
    box-shadow: var(--si-shadow);
}

.si-agente .si-textarea { min-height: 96px; resize: vertical; }
.si-agente .si-field > label small { font-weight: 500; color: var(--si-ash); text-transform: none; }

/* El botón manda: ancho cómodo y solo. */
.si-agente .si-button-row { margin-top: 4px; }
.si-agente .si-button-row .si-button-primary { padding-inline: 30px; }

/* El resultado ya trae su propia tarjeta: dentro del panel no repetimos borde. */
.si-agente .si-agent-panel .si-resultado {
    border: 0;
    box-shadow: none;
    padding: 22px 0 0;
    border-top: 1px solid var(--si-cloud);
    border-radius: 0;
    margin-top: 24px;
}

/* «opcional» va junto a su etiqueta, no en la linea de abajo. */
.si-field > label small { display: inline; margin-left: 6px; font-size: .78rem; }

/* ==========================================================================
   UN SOLO ANCHO DE PÁGINA
   Había cuatro geometrías distintas conviviendo, y se notaba al cambiar de
   página: la portada a 1200 px, la cabecera a 960, las páginas de panel
   (plantillas, pagos, integraciones, admin) a ancho completo del navegador, y
   el agente a 900. Se toma la de la portada como norma —es la que está bien— y
   la usan TODAS, cabecera y pie incluidos, para que los bordes del contenido
   caigan en la misma línea vertical al navegar.
   ========================================================================== */

:root {
    --si-ancho: 1200px;
    --si-relleno: clamp(20px, 5vw, 40px);
}

.si-header,
.si-footer,
.si-landing-hero,
.si-landing-features,
.si-landing-pricing,
.si-mecanismo,
.si-filas,
.si-admin,
.si-agente,
.si-acceso,
.si-auth,
.si-legal {
    max-width: var(--si-ancho);
    margin-left: auto;
    margin-right: auto;
}

/* El relleno horizontal también tiene que coincidir: si no, el ancho exterior es
   el mismo pero el texto empieza en sitios distintos, que es lo que se ve. */
.si-header { padding-left: var(--si-relleno); padding-right: var(--si-relleno); }
.si-footer { padding-left: var(--si-relleno); padding-right: var(--si-relleno); }
.si-admin,
.si-agente,
.si-acceso,
.si-auth,
.si-legal {
    padding-left: var(--si-relleno);
    padding-right: var(--si-relleno);
}

/* El agente deja de ser una excepción de 900 px. La caja de trabajo ocupa el
   ancho de la página como el resto de paneles. */
.si-agente { max-width: var(--si-ancho); }

/* /login sigue siendo una tarjeta centrada y estrecha, pero eso ahora se lee
   como una decisión (una pantalla de un solo gesto), no como otro ancho suelto:
   la SECCIÓN mide lo mismo que las demás y es la tarjeta la que se estrecha. */
.si-acceso { display: grid; place-items: center; }

/* app.css declara `label { display: grid }` para los formularios antiguos, donde la etiqueta
   envolvía a su campo. En `.si-field` la etiqueta va SEPARADA del campo, así que ese grid convertía
   el «opcional» en una fila propia debajo del texto. Aquí la etiqueta es una línea. */
.si-field > label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

/* ==========================================================================
   IDENTIFICADOR DE LA EJECUCIÓN
   Cada ejecución ya tenía uno, pero solo se veía por API. Para reportar que algo
   salió mal había que describirlo y buscarlo a mano entre las ejecuciones; con el
   id se va directo a su traza y sus capturas. Un clic lo selecciona entero.
   ========================================================================== */

.si-identificador {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--si-cloud);
}

.si-identificador > span {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--si-ash);
}

.si-identificador code {
    user-select: all;              /* un clic lo coge entero, sin arrastrar */
    padding: 3px 9px;
    border: 1px solid var(--si-pebble);
    border-radius: var(--si-radius-sm);
    background: var(--si-soft);
    color: var(--si-muted);
    font-size: .76rem;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    cursor: text;
}

.si-identificador code:hover { border-color: var(--si-ink); color: var(--si-ink); }

.si-identificador-fino { margin: 6px 0 0; padding-top: 0; border-top: 0; }
.si-identificador-fino code { font-size: .7rem; padding: 2px 7px; }

/* ==========================================================================
   AVISO DE LISTA — multiplicar el cobro se pide, no se supone
   Detectar una lista es una heurística sobre el texto, y equivocarse cuesta
   dinero: cobra una ejecución por elemento. Antes era una línea informativa
   y el botón seguía diciendo «Resolver». Ahora el precio va EN el botón y
   desmentir la detección es un clic.
   ========================================================================== */

.si-aviso-lista {
    margin: 14px 0 0;
    padding: 12px 15px;
    border: 1px solid var(--si-pebble);
    border-left: 3px solid var(--si-ink);
    border-radius: var(--si-radius-sm);
    background: var(--si-soft);
}

.si-aviso-lista p { margin: 0; font-size: .85rem; color: var(--si-muted); }
.si-aviso-lista p b { color: var(--si-ink); }

/* Un botón que se lee como un enlace: es una salida, no una acción principal.
   El sistema solo permite una llamada a la acción, y es la pastilla oscura. */
.si-enlace-boton {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--si-ink);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.si-enlace-boton:hover { color: var(--si-accent); }

/* La salida no es tocar el precio, es reescribir el texto. */
.si-aviso-lista-nota { margin-top: 6px !important; font-size: .78rem; color: var(--si-ash) !important; }