/* =============================================================================================
   mockup.css — CSOS-86 (Tanda 5 · checkpoint 1): RE-SKIN de PRESENTACIÓN del mockup importado.

   FUENTE DEL LOOK: design/console.css + design/"Consola Operativa SOS v3.html" (mockup de Vlad).
   Se CARGA DESPUÉS de consola.css: es una capa ADITIVA. NO reemplaza el design system de CSOS-74
   (la Directriz manda el CONTRASTE; el mockup manda el LOOK — README de design/). Alcance de este
   checkpoint: el CHROME global (navbar) + la pantalla de Registrar Pago. Nada más.

   POR QUÉ ARCHIVO SEPARADO (y no merge en consola.css): consola.css es la traducción 1:1 de la
   Directriz con tokens WCAG afinados a mano (dos tokens por color para que el coral-como-texto llegue
   a 4.5:1). Meter el re-skin ahí arriesgaría pisar esa afinación; una capa aparte deja el re-skin
   auditable y reversible, y hace obvio el límite entre «design system» y «piel del mockup».

   TOKENS — reconciliación (lo más importante del archivo):
   Los tokens de COLOR/SUPERFICIE/TINTA/BORDE del mockup (--sp-*, --surface, --ink*, --border*) se
   ALIAN a los tokens del design system de CSOS-74. Beneficio triple:
     1) CONTRASTE: --ink-3 heredado = --tinta-3 (medido 4.50), no el #6b7c80 del mockup (≈4.37, falla).
        Es la regla WCAG del README: donde el color del mockup sería TEXTO y no llega a 4.5:1, se
        conserva el token compilante de la app. Misma familia de tono, otra luminosidad.
     2) LIGHT-ONLY heredado: la app se fuerza a la paleta clara SIEMPRE (la rama oscura de consola.css
        §3 quedó desactivada — diseño oficial solo claro). Al aliar, el re-skin hereda esa decisión sin
        declarar paleta propia; si algún día se reintroduce el tema oscuro allí, el re-skin voltea solo.
     3) SALDOS (R6/R15): las cifras siguen usando --coral-texto/--rojo-texto de la app (abajo), no el
        coral de relleno del mockup.
   Los tokens PURAMENTE VISUALES que la app no tiene (radios, spacing, sombras teñidas, primary-700/50)
   se declaran literales: no portan texto, no tienen exigencia de contraste.
   ============================================================================================= */

:root {
    /* Marca / superficie / tinta — ALIAS al design system (WCAG + dark-mode heredados) */
    --sp-primary:     var(--primary);
    --sp-primary-700: #00424d;                /* hover del brand (literal: la app no tiene un +1 tono) */
    --sp-primary-50:  var(--tinte-primary);
    --sp-teal:        var(--teal);
    --surface:        var(--superficie);
    --surface-alt:    var(--superficie-alt);
    --border:         var(--borde);
    --border-soft:    var(--borde-suave);
    --ink:            var(--tinta);
    --ink-2:          var(--tinta-2);
    --ink-3:          var(--tinta-3);          /* WCAG: NO el #6b7c80 del mockup (≈4.37); el compilante de la app */

    /* Cifras y avisos del mockup → ALIAS a los tokens WCAG del design system (mismo tono, luminancia
       compilante 4.5:1, y volteo dark-mode heredado). El mockup pinta el coral/verde/rojo/ámbar de
       RELLENO (bonitos pero de bajo contraste como TEXTO); aquí se mapean a los `*-texto` de la app.
       El ámbar `--warn-ink` (donde vive el aviso de SOBREPAGO) = `--naranja-texto` (contraste medido
       5.06 / 4.74 / 4.51 en consola.css) — WCAG AA, no el ámbar de relleno. */
    --sp-coral:   var(--coral-texto);
    --sp-green:   var(--verde-texto);
    --sp-red:     var(--rojo-texto);
    --sp-orange:  var(--naranja-texto);       /* atención (mockup --sp-orange) → token WCAG */
    --warn-ink:   var(--naranja-texto);

    /* Tintes de estado del mockup → ALIAS a los tintes del design system (voltean en dark solos).
       Son FONDOS de pills/iconos, no texto: no tienen exigencia de 4.5:1, pero se alian igual para
       que la piel del re-skin y el design system compartan una sola paleta. */
    --tint-coral:  var(--tinte-coral);
    --tint-teal:   var(--tinte-teal);
    --tint-green:  var(--tinte-verde);
    --tint-red:    var(--tinte-rojo);
    --tint-orange: var(--tinte-naranja);

    /* EL AZUL DEL MOCKUP NO ENTRA (directriz §3, «Nota abierta — el azul»): un 7º color sin
       significado declarado no existe en esta paleta. El mockup lo usaba para «dato temporal/neutro»
       (repago, kpi-value--blue); aquí se ALIA a teal (operativo), que ya está declarado y es WCAG.
       Cuando Vlad declare el azul y verifique su contraste, se cambia AQUÍ y en un solo sitio. */
    --sp-blue:   var(--teal-texto);
    --tint-blue: var(--tinte-teal);

    /* Sombras teñidas de teal-dark (cohesión + calidez del mockup) */
    --shadow-sm: 0 1px 2px rgba(0, 48, 57, .06), 0 1px 3px rgba(0, 48, 57, .05);
    --shadow-md: 0 6px 16px rgba(0, 48, 57, .09), 0 2px 5px rgba(0, 48, 57, .05);
    --shadow-lg: 0 16px 34px rgba(0, 48, 57, .14), 0 5px 12px rgba(0, 48, 57, .07);

    /* Radios / spacing / motion del mockup (--speed bajo el techo de 200 ms de la Directriz) */
    --r-sm: 8px;  --r-md: 13px;  --r-lg: 18px;  --r-pill: 999px;
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --speed: 140ms;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   CHROME — navbar teal-dark con el LOGO de marca (logo-horizontal-blanco.svg sobre el fondo oscuro).
   La .navbar de consola.css ya es teal-dark (var(--primary)); aquí solo se calza el logo. El asset
   se recortó a su bounding box (viewBox 202 275 1515 530) para que a 34 px de alto se vea el lockup
   completo y no un logo diminuto dentro del art board 1920×1080.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.navbar__marca {
    display: inline-flex;
    align-items: center;
}
.navbar__logo {
    height: 34px;
    width: auto;
    display: block;
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   CSOS-162 · CARD DE CONTENIDO CENTRAL — el bloque acotado (formulario / vista central) se ve como
   una tarjeta INDEPENDIENTE flotando sobre la banda gris de la página.
   Modelo (corrección de alcance de Vlad): la PÁGINA no es una tarjeta; el fondo se tinta gris muy
   claro (--superficie-alt) y el navbar queda fuera. La CARD es el contenedor central acotado (~800px
   centrado, medida que ya existe en CSOS-160/161): fondo blanco, borde 1px visible, esquinas
   redondeadas, sombra suave y padding interno. Un SOLO contenedor-card: donde ya hay borde/fondo
   propio (.frame, .l-card) NO se anida otro — se consolida o se aplana el interior.
   Solo presentación; tokens del design system + sombras de esta hoja. Piel, no estructura de datos.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

/* Banda de página gris para que la card blanca destaque y «flote». (consola.css §4 la dejaba blanca;
   aquí, capa aditiva, se tinta — reversible quitando esta regla.) El navbar pinta su propio teal-dark. */
body {
    background: var(--surface-alt);
}

/* ── (A) EDITORES `.frame` — ya son la card (borde+fondo+sombra+radio, 800px centrado). Solo se
   confirma que el borde sea VISIBLE (1px --border) y la sombra de flotación, para que lea como
   tarjeta aparte sobre el gris. No se envuelve en nada externo (un solo contenedor-card). ── */
.sp-console .frame {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

/* ── (B) FORMULARIOS `.formulario` — no eran card (solo un tope de ancho). Se les da el MISMO
   tratamiento de tarjeta: blanco, borde 1px visible, radio, sombra y respiración, centrados. Conservan
   su ancho de lectura (620px de consola.css; los de dinero suben a 800 con `.pago-form--marco`). ── */
.sp-console .formulario {
    margin-inline: auto;
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

/* Ingreso: `.login__tarjeta` YA es la card; su `.formulario` interno se APLANA para no anidar dos
   tarjetas (un solo contenedor-card). */
.sp-console .login__tarjeta .formulario {
    margin-inline: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Formularios de dinero (`.pago-form--marco`): la card es el `<form>`; la `.l-card` de contexto (saldo
   del gasto) que vive DENTRO deja de competir como tarjeta blanca y pasa a ser un PANEL inset (fondo
   alterno, sin sombra) — así no hay doble tarjeta dentro de la card. */
.sp-console .pago-form--marco .l-card {
    background: var(--surface-alt);
    box-shadow: none;
}

/* ── (C) LISTAS — la tabla del listado no leía como tarjeta (fondo transparente); sobre el gris
   quedaría «desnuda». Se envuelve la tabla en la misma piel de card. `.mov-table__wrap` es el envoltorio
   común (donantes/proveedores/fondos); el listado de rescates usa `.bloque__datos`. ── */
.sp-console .mov-table__wrap,
.sp-console #bloque-lista-rescates .bloque__datos {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
/* Fondos ya envuelve su tabla en una `.l-card` (que es la card): ahí el `.mov-table__wrap` NO debe
   volver a encuadrar (evita card-dentro-de-card). Se aplana cuando cuelga de una `.l-card`. */
.sp-console .l-card .mov-table__wrap {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Móvil (≤640px): las cards de contenido conservan gutters chicos (el padding del <main> ya baja en
   consola.css/navbar); se reduce la respiración interna y el radio para que ocupen el ancho sin
   overflow horizontal. */
@media (max-width: 640px) {
    .sp-console .formulario {
        padding: var(--sp-4);
        border-radius: var(--r-md);
    }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   CSOS-126 · COLUMNA DE FORMULARIO — alinea el ENCABEZADO de página con la card del formulario.
   Problema: en las pantallas de formulario el bloque `.encabezado-pagina` (título + botón «Cancelar»)
   iba a ANCHO COMPLETO pegado a los bordes del viewport, mientras la card del `<form>` quedaba
   centrada y angosta (~620px, o 800px en los «money form»). Resultado: header desconectado y card
   «huérfana» flotando en un mar de blanco.
   Solución de ALCANCE ACOTADO (no rompe listas ni detalles): NO se toca `.encabezado-pagina` global
   —lo comparten pantallas anchas (listas de casos/donantes/fondos/proveedores, detalles de fondo/
   proveedor, ficha de donante, detalle de movimiento) que NO deben cambiar—. En su lugar, SOLO las
   plantillas de formulario envuelven su contenido en `.columna-form`: un contenedor que fija el mismo
   tope de ancho de la card y centra la columna. Así el encabezado, la tarjeta de contexto (`.l-card`)
   y el `<form>` caen en UNA sola columna centrada y alineada, que se ve intencional.
   Los hijos (`.formulario` a 620px / `.pago-form--marco` a 800px) ya se autocentran con su propio
   `max-width` + `margin-inline:auto`; dentro de una columna del MISMO ancho ese centrado queda como
   no-op (no pelea, no se anida un segundo tope distinto).
   Responsive: en móvil el tope queda por encima del viewport, así que la columna ocupa el ancho
   disponible (sin overflow); `margin-inline:auto` solo actúa cuando sobra espacio horizontal.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.sp-console .columna-form {
    max-width: 620px;         /* familia simple: iguala la card `.formulario` (620px) */
    margin-inline: auto;
}

/* «Money form» (donación · gasto · pago /nueva/) y editores clínicos: la card sube a 800px
   (`.pago-form--marco` / `.frame`). El modificador sube el tope de la columna al mismo ancho;
   hereda el `margin-inline:auto` de la clase base. Se aplica junto con `.columna-form`. */
.sp-console .columna-form--ancho {
    max-width: 800px;
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   CSOS-136 · FORMULARIO DE CONTACTO — layout compacto y horizontal (alta de contacto).
   Problema (queja explícita de Vlad): la card iba angosta (620px) con mares de blanco a los lados y
   los ROLES apilados uno por uno (vertical larguísimo). Solución ACOTADA a este formulario
   (`.formulario--contacto`), sin tocar los demás:
     1) La card llena la columna ANCHA (800px, `.columna-form--ancho` en el template) en vez del tope
        de 620px de `.formulario` — aprovecha el horizontal.
     2) Campos en 2 columnas (`.campo-fila`) donde tiene sentido (tipo|nombre, tel|correo,
        documento tipo|número, etc.).
     3) Roles en GRILLA de casillas (varias columnas automáticas), no lista vertical.
   Responsive: bajo 640px todo colapsa a 1 columna, sin overflow horizontal.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.sp-console .formulario--contacto { max-width: 100%; }  /* llena la columna ancha (800), no 620 */

/* Fila de 2 columnas: cada `.campo` hijo ocupa una celda; el `gap` sustituye al margen inferior. */
.sp-console .formulario--contacto .campo-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--e-4);
}
.sp-console .formulario--contacto .campo-fila .campo { margin-bottom: 0; }

/* Roles en grilla: el widget `CheckboxSelectMultiple` de Django 4.2 renderiza un contenedor `<div
   id="id_roles">` con un `<div>` por casilla (ya NO un `<ul>`). Se convierte ese contenedor en una
   grilla de columnas automáticas (mínimo 150px, tantas como quepan) y cada `<div>` es una celda. Se
   apunta al `<div>` hijo directo del `.campo--roles` (el widget), no al `<label>` del rótulo. */
.sp-console .formulario--contacto .campo--roles > div {
    margin-top: var(--e-1);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 16px;
}
.sp-console .formulario--contacto .campo--roles > div > div { margin: 0; }
/* La piel de casilla se aplica SOLO a los labels internos del widget (los de cada rol), no al
   `<label>Roles:</label>` del campo — de ahí el `> div label`. */
.sp-console .formulario--contacto .campo--roles > div label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
.sp-console .formulario--contacto .campo--roles input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
}

/* Bloque gateado por tipo (documento de persona / datos de empresa): agrupación visual sutil con su
   rótulo. La VISIBILIDAD la alterna el JS del template vía la propiedad `hidden`; aquí solo es piel.
   Como estos bloques no fijan `display`, el `[hidden]` del navegador (display:none) los oculta bien. */
.sp-console .formulario--contacto .bloque-tipo {
    margin: 0 0 var(--e-4);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-alt);
}
.sp-console .formulario--contacto .bloque-tipo > .campo-fila:last-child { margin-bottom: 0; }
.sp-console .formulario--contacto .bloque-tipo__titulo {
    margin: 0 0 var(--sp-3);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
}

/* Inputs con respiración vertical: la base `.campo input` (consola.css) no trae padding vertical, lo
   que deja los controles muy bajos; aquí se les da altura de toque cómoda (vara de diseño). Scoped a
   este form para no alterar los demás. */
.sp-console .formulario--contacto .campo input:not([type="checkbox"]),
.sp-console .formulario--contacto .campo select,
.sp-console .formulario--contacto .campo textarea {
    padding-block: 9px;
}

/* Móvil (≤640px): las 2 columnas colapsan a 1 (sin overflow); se restituye el margen inferior por
   campo que el `gap` cubría en escritorio. */
@media (max-width: 640px) {
    .sp-console .formulario--contacto .campo-fila {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .sp-console .formulario--contacto .campo-fila .campo { margin-bottom: var(--e-4); }
    .sp-console .formulario--contacto .campo-fila .campo:last-child { margin-bottom: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   CONTENIDO scoped bajo .sp-console (main). El mockup ancla sus componentes en .sp-console; se pone
   esa clase en <main> (no en <body>) para que el chrome (navbar) NO caiga bajo el scope y sus reglas
   de enlace/tipografía no peleen con las de la consola. Los tokens viven en :root, así el navbar los
   lee igual.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Card de panel (.l-card) — la tarjeta del saldo del Pago ── */
.sp-console .l-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-4);
    overflow: hidden;
    transition: box-shadow var(--speed) var(--ease);
}
.sp-console .l-card:hover { box-shadow: var(--shadow-md); }
.sp-console .l-card__body { padding: var(--sp-4); }

/* ── Filas de dato (.field / .field__label / .field__value) ── */
.sp-console .field {
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
}
.sp-console .field:last-child { border-bottom: 0; }
.sp-console .field__label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sp-console .field__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
/* R15 / R6: el SALDO manda su color coral (o rojo si fuera negativo) POR ENCIMA del --ink del value.
   Especificidad (0,3,0) > (0,2,0) para que la convención de cifras de la app gane al re-skin. */
.sp-console .field__value.cifra--saldo    { color: var(--coral-texto); }
.sp-console .field__value.cifra--negativo { color: var(--rojo-texto); }

/* ═════ FORMULARIO del Pago — estilo de input del mockup (.modal__field). SCOPED a .pago-form para
   NO tocar los demás formularios (esos son de checkpoints posteriores). ═════ */
.sp-console .pago-form .campo label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sp-console .pago-form .campo input:not([type="checkbox"]),
.sp-console .pago-form .campo select,
.sp-console .pago-form .campo textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--speed), box-shadow var(--speed);
}
/* Foco: anillo teal del mockup. NO se anula el outline — el :focus-visible de consola.css (outline
   para teclado) sigue vivo; el anillo es un refuerzo, no un reemplazo (accesibilidad). */
.sp-console .pago-form .campo input:not([type="checkbox"]):focus,
.sp-console .pago-form .campo select:focus,
.sp-console .pago-form .campo textarea:focus {
    border-color: var(--sp-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-teal) 18%, transparent);
}

/* ── Interruptor pagar_desde_fg (U5) — el checkbox se pinta como toggle. Su VISIBILIDAD la decide la
   vista (pop del campo por `puede_pagar_desde_fg`); aquí solo es piel. ── */
.sp-console .pago-form .campo--switch {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-alt);
}
.sp-console .pago-form .campo--switch__text { display: flex; flex-direction: column; gap: 2px; }
.sp-console .pago-form .campo--switch label {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
}
.sp-console .pago-form .campo--switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    position: relative;
    width: 42px;
    height: 24px;
    min-height: 24px;
    margin: 1px 0 0;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    cursor: pointer;
    transition: background var(--speed), border-color var(--speed);
}
.sp-console .pago-form .campo--switch input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ink-3);
    transition: transform var(--speed), background var(--speed);
}
.sp-console .pago-form .campo--switch input[type="checkbox"]:checked {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
}
.sp-console .pago-form .campo--switch input[type="checkbox"]:checked::after {
    transform: translateX(18px);
    background: #fff;
}

/* ── Botones — brand (primario) / ghost (cancelar/volver) ── */
.sp-console .btn-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: none;
    border-radius: var(--r-sm);
    background: var(--sp-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: transform .12s var(--ease), background var(--speed);
}
.sp-console .btn-brand:hover { background: var(--sp-primary-700); transform: translateY(-2px); }
.sp-console .btn-brand:active { transform: translateY(0); }

.sp-console .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;                 /* R8: objetivo táctil ≥44 px aun siendo <a> */
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--speed), color var(--speed);
}
.sp-console .btn-ghost:hover { background: var(--surface-alt); color: var(--ink); }

/* ── Tarjeta de ERROR humana (.err) — reemplaza el <ul class="errorlist"> crudo (U4). El rojo usa
   los tokens WCAG de la app (--rojo-texto / --tinte-rojo), igual convención que .bloque--error. El
   TEXTO del error lo sigue fijando el servicio; esto es solo la piel. ── */
.sp-console .err {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 var(--sp-4);
    padding: 15px 17px;
    border: 1px solid var(--rojo-texto);
    border-radius: var(--r-md);
    background: var(--tinte-rojo);
}
.sp-console .err__ic { flex: 0 0 18px; margin-top: 1px; display: flex; color: var(--rojo-texto); }
.sp-console .err__ic svg { width: 18px; height: 18px; }
.sp-console .err__body { min-width: 0; }
.sp-console .err__t { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--rojo-texto); }
.sp-console .err__d { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }

/* ── Marca de campo OBLIGATORIO (mockup fix f): el `*` junto a la etiqueta. Rojo WCAG de la app;
   es un marcador, no una cifra. `aria-hidden` en el markup (la obligatoriedad real la comunica el
   propio widget `required`), así que el color es puramente decorativo. ── */
.sp-console .pago-form .campo label .req { color: var(--rojo-texto); font-weight: 800; }

/* ═════ R13 · CONSECUENCIA EN CIFRAS — bloque «saldo antes → después» del mockup (.delta__*).
   El AVISO de SOBREPAGO vive en el tratamiento ÁMBAR (.delta__b--warn / --warn-ink). En esta tanda
   el aviso se entrega por el framework de mensajes (nivel WARNING ⇒ `.mensajes__item--warning`, ya
   ámbar WCAG); estos estilos dejan lista la piel del bloque before→after para la superficie 2 (aviso
   persistente en el detalle del caso) y el flujo con paso de confirmación — FUERA de alcance aquí,
   porque mostrar el «antes» exige capturar el monto ANTES de guardar (un confirm-step nuevo, no pura
   presentación). Colores aliados a los tokens WCAG (arriba): coral=saldos, verde=delta positivo,
   ámbar=aviso. ═════ */
.sp-console .delta {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin: 0 0 var(--sp-4);
}
.sp-console .delta__h {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border-soft);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-3);
}
.sp-console .delta__row {
    display: grid;
    grid-template-columns: 1fr auto 22px auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-soft);
}
.sp-console .delta__row:last-child { border-bottom: 0; }
.sp-console .delta__k { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.sp-console .delta__a {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.sp-console .delta__arw { color: var(--ink-3); display: flex; justify-content: center; }
.sp-console .delta__arw svg { width: 15px; height: 15px; }
.sp-console .delta__b {
    font-size: 15px;
    font-weight: 800;
    color: var(--sp-coral);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.sp-console .delta__b--up   { color: var(--sp-green); }
.sp-console .delta__b--warn { color: var(--warn-ink); }
.sp-console .delta__row--flat .delta__b { color: var(--ink-2); }
.sp-console .delta__foot {
    padding: 11px 14px;
    background: var(--tint-orange);
    border-top: 1px solid var(--border-soft);
    font-size: 12px;
    font-weight: 700;
    color: var(--warn-ink);
    line-height: 1.45;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.sp-console .delta__foot svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; }

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   CSOS-86 t5 · PASO 2 — BASE DE DISEÑO COMPARTIDA. Port de los componentes de design/console.css que
   la app aún no tenía, alia­dos a los tokens WCAG de CSOS-74 (arriba). Todo cuelga de .sp-console.
   Reutilizable por cualquier pantalla del re-skin; ninguna vuelve a inventar su CSS.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── l-card: cabecera (el cuerpo .l-card__body ya vive arriba) ──────────────────────────────── */
.sp-console .l-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 13px var(--sp-4) 12px;
    border-bottom: 1px solid var(--border-soft);
}
.sp-console .l-card__head .l-ic {
    width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sp-primary-50); color: var(--sp-primary);
}
.sp-console .l-card__head .l-ic svg { width: 15px; height: 15px; }
.sp-console .l-card__head h3 {
    margin: 0; font-size: 14px; font-weight: 700;
    letter-spacing: -.01em; color: var(--ink);
}
.sp-console .l-card__body--tight { padding: var(--sp-3) var(--sp-4); }
/* enlace y texto atenuado dentro de un .field (generaliza la fila de dato) */
.sp-console .field__value a { color: var(--sp-teal); text-decoration: none; font-weight: 600; }
.sp-console .field__value a:hover { text-decoration: underline; }
.sp-console .muted { color: var(--ink-3); }

/* ── HERO del animal — foto + scrim + nombre + chips + badge de urgencia ─────────────────────── */
.sp-console .animal-hero-card {
    position: relative;
    background: var(--sp-primary);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--sp-4);
    transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.sp-console .animal-hero-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.sp-console .animal-hero-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: linear-gradient(150deg, #0b3a42 0%, #07262c 100%);
    overflow: hidden;
}
.sp-console .animal-hero-img__src {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s var(--ease);
}
.sp-console .animal-hero-card:hover .animal-hero-img__src { transform: scale(1.04); }
.sp-console .animal-hero-img__ph {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; color: rgba(255, 255, 255, .55);
}
.sp-console .animal-hero-img__ph svg { width: 64px; height: 64px; }
.sp-console .animal-hero-img__ph span { font-size: 12px; letter-spacing: .02em; }
.sp-console .animal-hero-scrim {
    position: absolute; left: 0; right: 0; bottom: 0; top: 38%;
    background: linear-gradient(to top, rgba(0, 38, 46, .94) 0%, rgba(0, 38, 46, .78) 32%, rgba(0, 38, 46, 0) 100%);
    z-index: 1; pointer-events: none;
}
/* Badge de urgencia. El variante URGENTE es rojo WCAG con texto blanco (relleno, no texto suelto). */
.sp-console .animal-hero-img__badge {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--sp-primary);
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sp-console .animal-hero-img__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sp-console .animal-hero-img__badge--urgent {
    background: var(--sp-red); color: #fff;
    animation: pulse-urgent 2.4s ease-in-out infinite;
}
@keyframes pulse-urgent {
    0%, 100% { box-shadow: 0 0 0 0 rgba(186, 5, 23, .55); }
    50%      { box-shadow: 0 0 0 7px rgba(186, 5, 23, 0); }
}
.sp-console .animal-hero-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: var(--sp-4) var(--sp-4) 15px;
    text-align: left;
}
.sp-console .animal-hero-name {
    font-size: 23px; font-weight: 800; color: #fff; margin: 0 0 3px;
    line-height: 1.08; letter-spacing: -.02em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.sp-console .animal-hero-meta {
    font-size: 11.5px; color: rgba(255, 255, 255, .82); margin: 0; letter-spacing: .02em; font-weight: 500;
}
.sp-console .hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-console .hero-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    backdrop-filter: blur(4px);
}
.sp-console .hero-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── KPI cards — base + variantes de color (alia­das a los tokens WCAG) ──────────────────────── */
.sp-console .kpi-row {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 10px; margin-bottom: var(--sp-4);
}
.sp-console .kpi-row--4 { grid-template-columns: repeat(4, 1fr); }
.sp-console .kpi-row--3 { grid-template-columns: repeat(3, 1fr); }
.sp-console .kpi-row--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) {
    .sp-console .kpi-row, .sp-console .kpi-row--4,
    .sp-console .kpi-row--3, .sp-console .kpi-row--2 { grid-template-columns: repeat(2, 1fr); }
}
.sp-console .kpi-card {
    --kpi-accent: var(--sp-primary);
    --kpi-tint:   var(--sp-primary-50);
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px 14px 15px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    overflow: hidden;
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.sp-console .kpi-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--kpi-accent);
    transition: height var(--speed) var(--ease);
}
.sp-console .kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sp-console .kpi-card:hover::before { height: 6px; }
/* variantes — solo tokens de color (fondo de icono = tinte; valor = token WCAG de TEXTO) */
.sp-console .kpi-card--green  { --kpi-accent: var(--sp-green);  --kpi-tint: var(--tint-green); }
.sp-console .kpi-card--teal   { --kpi-accent: var(--sp-teal);   --kpi-tint: var(--tint-teal); }
.sp-console .kpi-card--orange { --kpi-accent: var(--sp-orange); --kpi-tint: var(--tint-orange); }
.sp-console .kpi-card--red    { --kpi-accent: var(--sp-red);    --kpi-tint: var(--tint-red); }
.sp-console .kpi-card--coral  { --kpi-accent: var(--sp-coral);  --kpi-tint: var(--tint-coral); }
.sp-console .kpi-icon {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px;
    background: var(--kpi-tint); color: var(--kpi-accent);
    transition: transform var(--speed) var(--ease);
}
.sp-console .kpi-card:hover .kpi-icon { transform: scale(1.07); }
.sp-console .kpi-icon svg { width: 19px; height: 19px; }
.sp-console .kpi-label {
    font-size: 10.5px; font-weight: 700; color: var(--ink-3);
    margin: 0 0 6px; text-transform: uppercase; letter-spacing: .055em; line-height: 1.25;
}
.sp-console .kpi-value {
    font-size: 25px; font-weight: 800; color: var(--ink);
    margin: 0; line-height: 1.05; letter-spacing: -.025em;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* Colores de la CIFRA del KPI = tokens WCAG `-texto` (4.5:1). NO los rellenos del mockup. */
.sp-console .kpi-value--green  { color: var(--verde-texto); }
.sp-console .kpi-value--teal   { color: var(--teal-texto); }
.sp-console .kpi-value--orange { color: var(--naranja-texto); }
.sp-console .kpi-value--red    { color: var(--rojo-texto); }
.sp-console .kpi-value--coral  { color: var(--coral-texto); }   /* R15: saldos */
.sp-console .kpi-value--txt    { font-size: 17px; letter-spacing: -.01em; }
.sp-console .kpi-sub { font-size: 10.5px; color: var(--ink-3); margin: 4px 0 0; font-weight: 500; }

/* ── TABS — nav + underline animado (.tab-ink) + panel ──────────────────────────────────────── */
.sp-console .tabset__nav {
    position: relative;
    display: flex; gap: 2px;
    padding: 6px var(--sp-5) 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.sp-console .tab-btn {
    appearance: none; background: none; border: none; cursor: pointer;
    padding: 14px 16px 15px; position: relative;
    font-size: 14px; font-weight: 600; color: var(--ink-3);
    letter-spacing: -.005em; white-space: nowrap;
    transition: color var(--speed) var(--ease);
}
.sp-console .tab-btn:hover { color: var(--ink-2); }
.sp-console .tab-btn.is-active { color: var(--sp-primary); font-weight: 700; }
.sp-console .tab-ink {
    position: absolute; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--sp-primary);
    transition: left .18s var(--ease), width .18s var(--ease);
}
.sp-console .tab-panel { padding: var(--sp-5); animation: tab-fade .18s var(--ease); }
.sp-console .tab-panel[hidden] { display: none; }
@keyframes tab-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sp-console .section-eyebrow {
    font-size: 11px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .08em; margin: var(--sp-5) 0 var(--sp-2);
}
.sp-console .section-eyebrow:first-child { margin-top: 0; }

/* ── ACTION RAIL — botones por tipo (brand/success/destructive/donate/neutral) ──────────────── */
.sp-console .action-group-label {
    font-size: 10.5px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .08em; margin: 14px 0 8px;
}
.sp-console .action-group-label:first-child { margin-top: 0; }
.sp-console .action-btn {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 11px 13px; border-radius: var(--r-sm); border: 1px solid transparent;
    cursor: pointer; font-size: 13.5px; font-weight: 650; margin-bottom: 8px;
    text-align: left; color: #fff; letter-spacing: -.005em; text-decoration: none;
    box-shadow: var(--shadow-sm); min-height: 44px;    /* R8: objetivo táctil */
    transition: transform .12s var(--ease), box-shadow var(--speed) var(--ease), filter var(--speed);
}
.sp-console .action-btn:last-child { margin-bottom: 0; }
.sp-console .action-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.sp-console .action-btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.sp-console .action-btn__icon {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px;
    background: rgba(255, 255, 255, .18);
    display: flex; align-items: center; justify-content: center;
}
.sp-console .action-btn__icon svg { width: 15px; height: 15px; }
/* Rellenos con texto BLANCO → tokens `-texto` (todos AA sobre blanco: coral 5.24 / verde 5.09 /
   rojo 6.73). Es relleno+blanco, no texto de color suelto. */
.sp-console .action-btn--brand        { background: var(--sp-primary); }
.sp-console .action-btn--brand:hover  { background: var(--sp-primary-700); }
.sp-console .action-btn--success      { background: var(--sp-green); }
.sp-console .action-btn--destructive  { background: var(--sp-red); }
.sp-console .action-btn--donate       { background: var(--sp-coral); }   /* DONAR · único CTA cálido */
.sp-console .action-btn--neutral {
    background: var(--surface); color: var(--ink); border-color: var(--border);
}
.sp-console .action-btn--neutral:hover { background: var(--surface-alt); filter: none; }
.sp-console .action-btn--neutral .action-btn__icon { background: var(--sp-primary-50); color: var(--sp-primary); }
/* CSOS-142 (#27) — microcopy «qué mueve» bajo cada acción del panel «Registro rápido». El botón
   pasa de una sola etiqueta a una columna: título (la acción) + subtítulo explicativo. Se alinea el
   ícono al inicio (no al centro) porque el subtítulo puede ocupar dos líneas. Scoped a
   `.l-card--registro` para no afectar los `action-btn` de otras superficies (hero de fondo, etc.). */
.sp-console .l-card--registro .action-btn { align-items: flex-start; }
.sp-console .l-card--registro .action-btn .action-btn__icon { margin-top: 1px; }
.sp-console .action-btn__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-console .action-btn__sub {
    font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: 0;
    opacity: .85;   /* sobre relleno de color el texto es blanco; se atenúa levemente */
}
.sp-console .action-btn--neutral .action-btn__sub { color: var(--ink-2); opacity: 1; }

/* ── CHILD-ITEM — fila de caso hijo / lista compacta con icono ──────────────────────────────── */
.sp-console .child-list { list-style: none; margin: 0; padding: 0; }
.sp-console .child-item {
    display: flex; align-items: center; gap: 11px;
    padding: 11px var(--sp-4); border-bottom: 1px solid var(--border-soft);
    transition: background var(--speed);
}
.sp-console .child-item:last-child { border-bottom: 0; }
.sp-console .child-item:hover { background: var(--surface-alt); }
.sp-console .child-item__ic {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
    background: var(--sp-primary-50); color: var(--sp-primary);
    display: flex; align-items: center; justify-content: center;
}
.sp-console .child-item__t { font-size: 13px; font-weight: 650; color: var(--sp-teal); margin: 0; }
.sp-console .child-item__s { font-size: 11.5px; color: var(--ink-3); margin: 1px 0 0; }

/* ── TAB-EMPTY-STATE — vacío con calidez (arte + copy + CTA) ─────────────────────────────────── */
.sp-console .tab-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 56px 24px; gap: 6px;
}
.sp-console .empty-art {
    width: 96px; height: 96px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 38%, var(--sp-primary-50), var(--surface) 72%);
    border: 1.5px dashed color-mix(in srgb, var(--sp-teal) 35%, var(--border));
    color: var(--sp-teal); margin-bottom: 6px;
}
.sp-console .empty-art svg { width: 44px; height: 44px; }
.sp-console .tab-empty-state h4 { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.sp-console .tab-empty-state p { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-3); max-width: 280px; }

/* ── MODAL — backdrop con blur + entrada animada ────────────────────────────────────────────── */
.sp-console .modal-backdrop {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 38, 46, .45);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    animation: backdrop-in .18s var(--ease);
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.sp-console .modal {
    width: min(520px, 92%);
    background: var(--surface); border-radius: var(--r-lg);
    box-shadow: 0 30px 70px rgba(0, 38, 46, .4);
    overflow: hidden;
    animation: modal-in .18s var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.sp-console .modal__head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 20px 16px;
    background: var(--sp-primary); color: #fff;
}
.sp-console .modal__head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sp-console .modal__head p { margin: 3px 0 0; font-size: 12px; color: rgba(255, 255, 255, .8); }
.sp-console .modal__close {
    margin-left: auto; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px;
    border: none; cursor: pointer; background: rgba(255, 255, 255, .14); color: #fff;
    display: flex; align-items: center; justify-content: center; transition: background var(--speed);
}
.sp-console .modal__close:hover { background: rgba(255, 255, 255, .26); }
.sp-console .modal__body { padding: 22px 20px; }
.sp-console .modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ═════ ADICIÓN (a) · TABLA DE LISTA — para la lista de rescates y cualquier listado tabular.
   Adaptada de .mov-table del mockup (Flujos v4). Cifras tabulares alineadas a la derecha (tnum),
   pills/badges en celda. R16: las cifras llegan formateadas por un service; la tabla no calcula. ═════ */
.sp-console .mov-table__wrap { overflow-x: auto; }
.sp-console .mov-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.sp-console .mov-table thead th {
    text-align: left; font-size: 10px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .06em;
    padding: 9px 12px; border-bottom: 1.5px solid var(--border);
    background: var(--surface-alt); white-space: nowrap;
}
.sp-console .mov-table thead th.col-monto { text-align: right; }
.sp-console .mov-table tbody td {
    padding: 10px 12px; border-bottom: 1px solid var(--border-soft);
    color: var(--ink); vertical-align: middle;
}
.sp-console .mov-table tbody tr:last-child td { border-bottom: 0; }
.sp-console .mov-table tbody tr { transition: background var(--speed); }
.sp-console .mov-table tbody tr:hover { background: var(--surface-alt); }
.sp-console .mov-table td.col-monto {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sp-console .mov-table a { color: var(--sp-teal); text-decoration: none; font-weight: 650; }
.sp-console .mov-table a:hover { text-decoration: underline; }
.sp-console .mov-table .dato__etiqueta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* pill de tipo de TRANSACCIÓN (mov-pill) — 8 tipos, color = significado (misma familia que las
   .pill--<tipo> de consola.css, pero con el punto del mockup). */
.sp-console .mov-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.sp-console .mov-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sp-console .mov-pill--donacion      { background: var(--tint-coral);  color: var(--sp-coral); }
.sp-console .mov-pill--gasto         { background: var(--tint-orange); color: var(--warn-ink); }
.sp-console .mov-pill--pago          { background: var(--tint-teal);   color: var(--sp-teal); }
.sp-console .mov-pill--devolucion    { background: var(--tint-teal);   color: var(--sp-teal); }
.sp-console .mov-pill--credito,
.sp-console .mov-pill--repago,
.sp-console .mov-pill--transferencia,
.sp-console .mov-pill--ajuste        { background: var(--sp-primary-50); color: var(--sp-primary); }

/* ═════ ADICIÓN (c) · TRATAMIENTO DE LA DEVOLUCIÓN por fila (directriz §6d) — reutilizable.
   pendiente = DESTACADA · exitosa = normal · desistida = ATENUADA (⛔ NO tachada; desistida ≠ anulada).
   El BADGE de estado sigue siendo .pill--devolucion-<estado> de consola.css (WCAG); esto es el
   tratamiento de la FILA que lo envuelve. ═════ */
.sp-console .mov-row--pendiente td {
    background: var(--tint-orange);
    box-shadow: inset 3px 0 0 var(--sp-orange);
}
.sp-console .mov-row--exitosa { /* normal: sin tratamiento especial, es la línea base */ }
.sp-console .mov-row--desistida {
    opacity: .55;                 /* atenuada — NO `text-decoration`, para no confundir con R9 */
}

/* ═════ ADICIÓN (b) · DELTA CLÍNICO — el mismo bloque antes→después para ESTADO CLÍNICO, no solo
   plata (Formularios v4: «donde hay plata O estado clínico»). El variante de dinero (arriba) queda
   intacto; aquí solo se generaliza para valores de TEXTO (Diagnóstico / Hospitalización / Alta). ═════ */
.sp-console .delta--estado .delta__row {
    grid-template-columns: 1fr auto 22px 1.2fr;
}
.sp-console .delta--estado .delta__a,
.sp-console .delta--estado .delta__b {
    font-variant-numeric: normal;
    text-align: left;
    white-space: normal;
    font-size: 13.5px;
}
.sp-console .delta--estado .delta__b { color: var(--sp-teal); }   /* clínico = teal (R6) */
.sp-console .delta__b--clinico { color: var(--sp-teal); }

/* ── err: variante de AVISO ámbar (reutiliza la piel de .err para el partial de alerta) ──────── */
.sp-console .err--warn {
    border-color: var(--warn-ink);
    background: var(--tint-orange);
}
.sp-console .err--warn .err__ic,
.sp-console .err--warn .err__t { color: var(--warn-ink); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   DETALLE DEL CASO · re-skin SOS v3 (CSOS-86 t5) — layout de 3 columnas + piezas propias del detalle.
   Solo presentación; los tokens WCAG salen de consola.css. Traducción 1:1 del mockup
   «Consola Operativa SOS v3.html» (console-grid / dim-row / action rail).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.sp-console .console-grid {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr) 296px;
    gap: 16px;
    align-items: start;
}
.sp-console .col-left,
.sp-console .col-right { display: flex; flex-direction: column; gap: 16px; }
/* El riel de acciones acompaña el scroll en pantallas altas (queda a mano sin perder el contexto). */
@media (min-width: 1241px) {
    .sp-console .col-right { position: sticky; top: 16px; }
}
@media (max-width: 1240px) {
    .sp-console .console-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Tarjeta que hospeda el tabset: sin padding propio (lo pone cada .tab-panel). */
.sp-console .tabs-card { padding: 0; overflow: hidden; }

/* Cabecera del caso (título + accesos Editar/Volver) dentro de la columna central. */
.sp-console .case-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.sp-console .case-title {
    font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.sp-console .case-head__sub { font-size: 13px; color: var(--ink-3); margin: 4px 0 0; }
.sp-console .case-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 5 DIMENSIONES (R5) — una línea cada una, con su tag de ORIGEN (derivado/marcado) ─────────── */
.sp-console .dim-list { list-style: none; margin: 0; padding: 0; }
.sp-console .dim-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px var(--sp-4); border-bottom: 1px solid var(--border-soft);
}
.sp-console .dim-row:last-child { border-bottom: 0; }
.sp-console .dim-row__main { flex: 1; min-width: 0; }
.sp-console .dim-name { font-size: 12px; font-weight: 600; color: var(--ink-3); margin: 0 0 4px; }
.sp-console .dim-val  { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.sp-console .origin {
    flex: 0 0 auto; margin-top: 2px;
    font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: 3px 7px; border-radius: var(--r-pill);
    background: var(--surface-alt); color: var(--ink-3); border: 1px solid var(--border);
}
.sp-console .origin--marcado { background: var(--tint-teal); color: var(--sp-teal); border-color: transparent; }
.sp-console .origin--derivado { background: var(--sp-primary-50); color: var(--sp-primary); border-color: transparent; }
.sp-console .card-foot {
    padding: 11px var(--sp-4); border-top: 1px solid var(--border-soft);
    background: var(--surface-alt); font-size: 11px; color: var(--ink-3); line-height: 1.45;
}

/* ── ACTION RAIL — divisor entre grupos + nota de acción BLOQUEADA (M5: explica, no desaparece) ── */
.sp-console .action-divider {
    display: flex; align-items: center; gap: 10px; margin: 16px 0 12px;
    color: var(--ink-3); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
}
.sp-console .action-divider::before,
.sp-console .action-divider::after { content: ''; height: 1px; background: var(--border); flex: 1; }
.sp-console .action-divider span { white-space: nowrap; }
.sp-console .action-note { margin-bottom: 8px; }
.sp-console .action-btn--disabled {
    background: var(--surface-alt); color: var(--ink-3); border-color: var(--border);
    box-shadow: none; cursor: not-allowed;
}
.sp-console .action-btn--disabled:hover { transform: none; box-shadow: none; filter: none; }
.sp-console .action-btn--disabled .action-btn__icon { background: var(--surface); color: var(--ink-3); }
.sp-console .action-note__why {
    margin: 5px 2px 0; font-size: 11px; line-height: 1.4; color: var(--warn-ink);
}
/* Selector de etapa dentro del riel (hereda el .campo de consola.css; aquí solo el respiro). */
.sp-console .rail-form { margin: 8px 0 0; }
.sp-console .rail-form .campo { margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   DETALLE · piezas NUEVAS de la fidelidad 1:1 (CSOS-86 t5) — banner de cierre, barra de cobertura,
   títulos de sección, diccionario TX, expander del riel, KPI Fase 2 y el EVENT LOG. Solo piel; las
   cifras/estados llegan resueltos por la vista/services (R16). Tokens WCAG de consola.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Banner de cierre (plegado desde la antigua pestaña «Cierre» al Resumen) ─────────────────── */
.sp-console .cierre-banner {
    display: flex; align-items: flex-start; gap: 12px;
    margin: 0 0 var(--sp-4); padding: 13px 15px;
    border: 1px solid var(--border); border-left: 4px solid var(--sp-teal);
    border-radius: var(--r-md); background: var(--tint-teal);
}
.sp-console .cierre-banner__ic {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sp-teal); color: #fff;
}
.sp-console .cierre-banner__ic svg { width: 15px; height: 15px; }
.sp-console .cierre-banner__t { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sp-console .cierre-banner__d { margin: 3px 0 0; font-size: 12px; color: var(--ink-2); }

/* ── Barra de cobertura del fondo (renderFund) ───────────────────────────────────────────────── */
.sp-console .fund { margin: var(--sp-4) 0 var(--sp-2); }
.sp-console .fund__head {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px;
}
.sp-console .fund__label {
    font-size: 11px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .06em;
}
.sp-console .fund__pct { font-size: 13.5px; font-weight: 800; color: var(--sp-teal); }
.sp-console .fund__track {
    position: relative; height: 12px; border-radius: var(--r-pill);
    background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden;
}
.sp-console .fund__fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    border-radius: var(--r-pill); background: var(--sp-teal);
    transition: width .3s var(--ease);
}
.sp-console .fund__note { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.sp-console .fund__note .cifra--saldo { color: var(--coral-texto); font-weight: 700; }
.sp-console .fund__empty { margin: var(--sp-4) 0 var(--sp-2); font-size: 12.5px; line-height: 1.5; }

/* ── Título de sección dentro de una pestaña (con icono cuadrado) ─────────────────────────────── */
.sp-console .section-title {
    display: flex; align-items: center; gap: 8px;
    margin: var(--sp-5) 0 var(--sp-3); font-size: 15px; font-weight: 700;
    letter-spacing: -.01em; color: var(--ink);
}
.sp-console .section-title:first-child { margin-top: 0; }
.sp-console .section-title .s-ic {
    width: 24px; height: 24px; flex: 0 0 24px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sp-primary-50); color: var(--sp-primary);
}
.sp-console .section-title .s-ic svg { width: 14px; height: 14px; }

/* ── KPI Fase 2 — tarjeta APAGADA con «—» (placeholder honesto, R7) ──────────────────────────── */
.sp-console .kpi-card--fase2 {
    background: var(--surface-alt); border-style: dashed; box-shadow: none;
}
.sp-console .kpi-card--fase2::before { background: var(--border); }
.sp-console .kpi-card--fase2:hover { transform: none; box-shadow: none; }
.sp-console .kpi-card--fase2 .kpi-icon { background: var(--surface); color: var(--ink-3); }
.sp-console .kpi-value--fase2 { color: var(--ink-3); }

/* ── Diccionario de las 7 transacciones (TX_DEF) — leyenda colapsable ────────────────────────── */
.sp-console .tx-def {
    margin: var(--sp-4) 0 0; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--surface-alt); overflow: hidden;
}
.sp-console .tx-def__summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 11px var(--sp-4); font-size: 12.5px; font-weight: 700; color: var(--ink-2);
    list-style: none;
}
.sp-console .tx-def__summary::-webkit-details-marker { display: none; }
.sp-console .tx-def__chevron {
    display: flex; color: var(--ink-3); transition: transform var(--speed) var(--ease);
}
.sp-console .tx-def__chevron svg { width: 15px; height: 15px; }
.sp-console .tx-def[open] .tx-def__chevron { transform: rotate(180deg); }
.sp-console .tx-def__list {
    list-style: none; margin: 0; padding: 4px var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--border-soft); background: var(--surface);
}
.sp-console .tx-def__list li {
    padding: 9px 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
    border-bottom: 1px solid var(--border-soft);
}
.sp-console .tx-def__list li:last-child { border-bottom: 0; }
.sp-console .tx-def__list .mov-pill { margin-right: 6px; vertical-align: middle; }

/* ── Expander del riel de transacciones («N registros más») ──────────────────────────────────── */
.sp-console .tx-more { margin-top: 8px; }
.sp-console .tx-more__summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    padding: 9px 11px; border-radius: var(--r-sm); border: 1px dashed var(--border);
    font-size: 12.5px; font-weight: 650; color: var(--ink-2); background: var(--surface-alt);
    min-height: 44px;
}
.sp-console .tx-more__summary::-webkit-details-marker { display: none; }
.sp-console .tx-more__chevron { display: flex; color: var(--ink-3); transition: transform var(--speed) var(--ease); }
.sp-console .tx-more__chevron svg { width: 15px; height: 15px; }
.sp-console .tx-more[open] .tx-more__chevron { transform: rotate(180deg); }
.sp-console .tx-more__list { margin-top: 8px; }

/* ── EVENT LOG (pestaña Actividad) — línea de tiempo con doble timestamp + actor ──────────────── */
.sp-console .event-log { list-style: none; margin: 0; padding: 0; }
.sp-console .event {
    position: relative; display: flex; gap: 12px;
    padding: 0 0 var(--sp-4) 2px;
}
.sp-console .event::before {
    content: ''; position: absolute; left: 5px; top: 14px; bottom: -4px;
    width: 2px; background: var(--border);
}
.sp-console .event:last-child { padding-bottom: 0; }
.sp-console .event:last-child::before { display: none; }
.sp-console .event__dot {
    position: relative; z-index: 1; flex: 0 0 12px; width: 12px; height: 12px; margin-top: 3px;
    border-radius: 50%; background: var(--sp-teal); box-shadow: 0 0 0 3px var(--tint-teal);
}
.sp-console .event--anulacion .event__dot { background: var(--rojo-texto); box-shadow: 0 0 0 3px var(--tinte-rojo); }
.sp-console .event__body { flex: 1; min-width: 0; }
.sp-console .event__head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; }
.sp-console .event__tipo { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sp-console .event__subtipo {
    font-size: 11px; font-weight: 700; color: var(--sp-teal);
    background: var(--tint-teal); padding: 2px 8px; border-radius: var(--r-pill);
}
.sp-console .event--anulacion .event__tipo { color: var(--rojo-texto); }
.sp-console .event__detalle { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.sp-console .event__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3);
}
.sp-console .event__ts { font-variant-numeric: tabular-nums; }
.sp-console .event__ts-k {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-3); margin-right: 4px;
}
.sp-console .event__actor {
    display: inline-flex; align-items: center; gap: 5px; font-weight: 650; color: var(--ink-2);
}
.sp-console .event__actor svg { width: 13px; height: 13px; }
/* Chip de REGISTRO TARDÍO — ámbar WCAG (el asentamiento llegó mucho después del hecho) */
.sp-console .chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--r-pill);
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.sp-console .chip--tarde { background: var(--tint-orange); color: var(--warn-ink); }

/* ── Paginación (CSOS-86 t5 · Parte B) — controles de las tablas largas (libro, listado). Tokens del
   design system: bordes/superficie del mockup, radios y --speed; hereda light/dark y foco WCAG. ── */
.sp-console .paginacion {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 14px;
}
.sp-console .paginacion__paginas {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    list-style: none; margin: 0; padding: 0;
}
.sp-console .paginacion__enlace,
.sp-console .paginacion__num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
    font-size: 13px; font-weight: 650; text-decoration: none;
    transition: background var(--speed), border-color var(--speed), color var(--speed);
}
.sp-console a.paginacion__enlace:hover,
.sp-console a.paginacion__num:hover {
    background: var(--sp-primary-50); border-color: var(--sp-primary); color: var(--sp-primary);
}
.sp-console .paginacion__num--actual {
    background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; cursor: default;
}
.sp-console .paginacion__enlace--off {
    opacity: .45; cursor: not-allowed;
}
.sp-console .paginacion__estado {
    margin: 0 0 0 auto; font-size: 12px; color: var(--muted, var(--ink-soft));
}

/* ── Respeto a prefers-reduced-motion para las animaciones NUEVAS del re-skin (el hero pulsa, los
   KPIs y tabs se deslizan). consola.css ya apaga transiciones; aquí se apagan las animaciones. ── */
@media (prefers-reduced-motion: reduce) {
    .sp-console .animal-hero-img__badge--urgent,
    .sp-console .tab-panel,
    .sp-console .modal,
    .sp-console .modal-backdrop { animation: none !important; }
    .sp-console *, .sp-console *::before, .sp-console *::after { transition: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   v6 · EDITORES DE INTERVENCIÓN (CSOS · Editores de Intervencion SOS v1) — capa ADITIVA.
   Traducción 1:1 de la capa «v6» del mockup, scopeada a .sp-console (fuera del navbar). Reusa los
   tokens WCAG ya definidos (--sp-*, --tint-*, --r-*, --border-soft, --surface-alt, --ink-*). Las
   clases .delta__*, .kpi-*, .l-card, .action-btn ya vivían en esta hoja: aquí solo lo NUEVO que el
   mockup trae y no existía (frame, form-grid/f, ctx, stepper, custody, signer, chk, locked, notice,
   blocker, btn+variants, money, priv). Dinero en CORAL (R15); avisos en ÁMBAR (--warn-ink).
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

/* Dinero (tabular, coral) y badge [Privado] (F0). */
.sp-console .money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; color: var(--sp-coral); }
.sp-console .money--delta-up { color: var(--sp-green); }
.sp-console .priv {
    display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 4px;
    background: var(--sp-primary-50); color: var(--sp-primary); font-size: 8px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; margin-left: 6px; vertical-align: middle;
}

/* Marco de pantalla del editor.
   CSOS-160 — ancho estándar de formulario: se acota a 800px y se centra en la página, igual que
   el resto de editores/formularios (antes quedaba a full-width porque .frame no tenía tope). En
   móvil el tope de 800px queda por encima del viewport, así que el marco sigue ocupando el ancho
   disponible (responsive intacto); `margin-inline:auto` solo actúa cuando sobra espacio horizontal. */
.sp-console .frame { max-width: 800px; margin-inline: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }

/* CSOS-161 — familia «money form» (donación · gasto · pago /nueva/) al MISMO ancho que .frame.
   Estos formularios usan la piel `.formulario` (max-width 620px, alineada a la izquierda) en vez de
   `.frame`, por eso quedaban distintos a los editores clínicos/privilegiados (que ya son 800 centrados
   tras CSOS-160). El modificador `.pago-form--marco` sube el tope a 800px y centra TODO el formulario
   (tarjeta de contexto `.l-card` + campos + notices + botones), porque en estas tres plantillas la
   ctx-card se movió DENTRO del <form>, así queda contenida en el mismo ancho (ya no full-width).
   Scoped al modificador para NO tocar `pago_confirmar` ni el resto de formularios `.formulario`/`.pago-form`.
   En móvil el tope de 800px queda por encima del viewport → el form ocupa el ancho disponible
   (responsive intacto); `margin-inline:auto` solo actúa cuando sobra espacio horizontal. */
.sp-console .pago-form--marco { max-width: 800px; margin-inline: auto; }
.sp-console .frame__top { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); background: var(--surface-alt); }
.sp-console .frame__top .l-ic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; }
.sp-console .frame__ttl { margin: 0; font-size: 15.5px; font-weight: 750; letter-spacing: -.012em; color: var(--ink); }
.sp-console .frame__sub { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-3); }
.sp-console .frame__body { padding: 20px; }
.sp-console .frame__foot { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-top: 1px solid var(--border-soft); background: var(--surface-alt); flex-wrap: wrap; }
.sp-console .frame__foot .spacer { flex: 1; }
.sp-console .frame__hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; max-width: 52ch; }

/* Rejilla y campos del formulario. */
.sp-console .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.sp-console .form-grid--1 { grid-template-columns: 1fr; }
.sp-console .f { display: flex; flex-direction: column; gap: 5px; }
.sp-console .f--wide { grid-column: 1 / -1; }
.sp-console .f > label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; display: flex; align-items: center; gap: 6px; }
.sp-console .f > label .req, .sp-console .req { color: var(--sp-red); font-weight: 800; }
/* CSOS-142 — casilla de confirmación (switch): el label es hijo directo de `.f`, así que heredaba
   `.f > label{display:flex;align-items:center}` (pensado para etiquetas CORTAS con ícono) y su frase
   larga NO rompía línea, desbordándose por la derecha fuera de la card. Regla reutilizable (misma
   solución que el fix inline de 7faff47, aquí compartida por los switches de confirmación de
   intervención y hogar de paso, y aplicable también al input renderizado por el widget del form):
   el checkbox se fija (`flex:0 0 auto`) y el label toma el ancho restante y envuelve el texto
   (`display:block;flex:1;min-width:0`). El contenedor alinea al inicio vía inline `align-items:flex-start`. */
.sp-console .f.campo--switch > input[type="checkbox"] { flex: 0 0 auto; margin-top: 2px; }
.sp-console .f.campo--switch > label { display: block; flex: 1; min-width: 0; margin: 0; }
.sp-console .f input, .sp-console .f select, .sp-console .f textarea {
    width: 100%; font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--ink);
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
}
.sp-console .f textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
.sp-console .f input:focus, .sp-console .f select:focus, .sp-console .f textarea:focus {
    outline: none; border-color: var(--sp-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-teal) 18%, transparent);
}
.sp-console .f__hint { font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.sp-console .f__hint b { color: var(--ink-2); font-weight: 700; }
.sp-console .readonly { font-size: 13.5px; font-weight: 650; color: var(--ink); padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--r-sm); background: var(--surface-alt); }

/* Tarjeta de contexto «dónde está el animal ahora». */
.sp-console .ctx { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); overflow: hidden; margin: 0 0 18px; }
.sp-console .ctx__h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.sp-console .ctx__r { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
.sp-console .ctx__r:last-child { border-bottom: 0; }
.sp-console .ctx__k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.sp-console .ctx__v { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* Stepper de dos actos (Datos → Confirmar). */
.sp-console .stepper { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.sp-console .stepper__s { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); white-space: nowrap; }
.sp-console .stepper__s.on { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.sp-console .stepper__d { width: 14px; height: 1.5px; background: var(--border); flex: 0 0 14px; }

/* Línea de custodia «de dónde → a dónde» (U6). */
.sp-console .custody { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: stretch; gap: 10px; margin: 0 0 16px; }
.sp-console .custody__box { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--border); }
.sp-console .custody__box--to { background: var(--tint-teal); border-color: color-mix(in srgb, var(--sp-teal) 32%, var(--border)); }
.sp-console .custody__box--end { background: var(--sp-primary-50); border-color: color-mix(in srgb, var(--sp-primary) 26%, var(--border)); }
.sp-console .custody__k { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.sp-console .custody__v { font-size: 14.5px; font-weight: 800; color: var(--ink); margin: 5px 0 0; line-height: 1.2; letter-spacing: -.012em; }
.sp-console .custody__s { font-size: 11.5px; color: var(--ink-3); margin: 3px 0 0; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sp-console .custody__arw { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
@media (max-width: 640px) { .sp-console .custody { grid-template-columns: 1fr; } .sp-console .custody__arw { transform: rotate(90deg); } .sp-console .form-grid { grid-template-columns: 1fr; } }

/* Firma de quién actúa (U6). */
.sp-console .signer { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); margin: 0 0 16px; }
.sp-console .signer__av { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--sp-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.sp-console .signer__t { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.sp-console .signer__s { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; font-variant-numeric: tabular-nums; }

/* Casilla que nombra el hecho físico (U6). */
.sp-console .chk { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border: 1.5px solid color-mix(in srgb, var(--sp-orange) 40%, var(--border)); border-radius: var(--r-md); background: var(--tint-orange); margin: 0 0 16px; }
.sp-console .chk input { appearance: none; width: 20px; height: 20px; flex: 0 0 20px; margin: 1px 0 0; border: 1.5px solid var(--warn-ink); border-radius: 6px; background: var(--surface); cursor: pointer; position: relative; }
.sp-console .chk input:checked { background: var(--sp-green); border-color: var(--sp-green); }
.sp-console .chk input:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(42deg); }
.sp-console .chk label { font-size: 12.5px; font-weight: 650; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.sp-console .chk label b { color: var(--ink); font-weight: 800; }

/* Precondición no cumplida: el formulario se ve, pero no se toca (RF-037). */
.sp-console .locked { opacity: .45; pointer-events: none; filter: grayscale(.25); }

/* Avisos con cara humana (notice) — bloqueo/ok/warn/camino. */
.sp-console .notice { display: flex; gap: 12px; padding: 15px 17px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-alt); margin: 0 0 18px; }
.sp-console .notice__ic { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--ink-3); }
.sp-console .notice__b { flex: 1; min-width: 0; }
.sp-console .notice__t { margin: 0; font-size: 14.5px; font-weight: 750; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; }
.sp-console .notice__d { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; max-width: 70ch; }
.sp-console .notice__d b { color: var(--ink); font-weight: 700; }
.sp-console .notice__acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 13px; }
.sp-console .notice--block { border-color: color-mix(in srgb, var(--sp-red) 32%, var(--border)); background: var(--tint-red); }
.sp-console .notice--block .notice__ic { background: var(--sp-red); }
.sp-console .notice--warn { border-color: color-mix(in srgb, var(--sp-orange) 40%, var(--border)); background: var(--tint-orange); }
.sp-console .notice--warn .notice__ic { background: var(--sp-orange); }
.sp-console .notice--path { border-color: color-mix(in srgb, var(--sp-teal) 34%, var(--border)); background: var(--tint-teal); }
.sp-console .notice--path .notice__ic { background: var(--sp-teal); }
.sp-console .notice--ok { border-color: color-mix(in srgb, var(--sp-green) 32%, var(--border)); background: var(--tint-green); }
.sp-console .notice--ok .notice__ic { background: var(--sp-green); }

/* Objeto que estorba, nombrado y clicable (blocker). */
.sp-console .blocker { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); text-decoration: none; }
.sp-console .blocker:hover { border-color: var(--sp-teal); }
.sp-console .blocker__id { font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--sp-teal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-console .blocker__t { font-size: 12.5px; font-weight: 650; color: var(--ink); flex: 1; min-width: 0; }
.sp-console .blocker__go { color: var(--ink-3); display: flex; }
.sp-console .blocker__go svg { width: 15px; height: 15px; }

/* Botones del editor (btn + variantes). Coexisten con .btn-brand/.btn-ghost del re-skin previo. */
.sp-console .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; font-family: var(--font); font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; text-decoration: none; }
.sp-console .btn svg { width: 15px; height: 15px; }
.sp-console .btn--primary { background: var(--sp-primary); color: #fff; }
.sp-console .btn--primary:hover { background: var(--sp-primary-700); }
.sp-console .btn--coral { background: var(--sp-coral); color: #fff; }
.sp-console .btn--coral:hover { background: #d2451f; }
.sp-console .btn--danger { background: var(--sp-red); color: #fff; }
.sp-console .btn--danger:hover { background: #96040f; }
.sp-console .btn--ghost { background: var(--surface); color: var(--ink-2); border-color: var(--border); }
.sp-console .btn--ghost:hover { background: var(--surface-alt); color: var(--ink); }
.sp-console .btn--teal { background: var(--sp-teal); color: #fff; }
.sp-console .btn--teal:hover { background: #096e69; }
.sp-console .btn[disabled], .sp-console .btn:disabled { opacity: .4; cursor: not-allowed; }

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   CSOS-116 · F2 — DIRECTORIO DE FONDOS (índice rico + detalle hero). Capa ADITIVA, scoped a
   .sp-console. Port 1:1 de los componentes del mockup «Directorio y Fondo SOS v1» que la app aún no
   tenía (privcard, aging, fg-hero, seg-tabs, lt-table, owe, absorb, caso-tag, mock-sel, dir-grid,
   tamaño de página). Reusa los tokens WCAG ya definidos arriba (--sp-*, --tint-*, --ink-*, --r-*,
   --border*, --surface*). Dinero en CORAL (R15), avisos en ÁMBAR (--warn-ink). Solo presentación:
   toda cifra llega resuelta por services (R16).
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Chip base (neutral) + variantes de color + punto. Se re-declara .chip--tarde DESPUÉS para que
   el chip de «registro tardío» conserve su ámbar (misma especificidad, gana el último). ── */
.sp-console .chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--r-pill);
    font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
    text-transform: none; white-space: nowrap;
    background: var(--surface-alt); color: var(--ink-2); border: 1px solid var(--border);
}
.sp-console .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.sp-console .chip--blue   { background: var(--tint-teal);   color: var(--sp-teal);   border-color: transparent; }
.sp-console .chip--green  { background: var(--tint-green);  color: var(--sp-green);  border-color: transparent; }
.sp-console .chip--orange { background: var(--tint-orange); color: var(--warn-ink); border-color: transparent; }
.sp-console .chip--red    { background: var(--tint-red);    color: var(--sp-red);    border-color: transparent; }
/* re-aserción: el chip de registro tardío sigue ámbar (uppercase, como lo pide el event log). */
.sp-console .chip--tarde  { background: var(--tint-orange); color: var(--warn-ink); border-color: transparent;
    text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .04em; }

/* ── Etiqueta de caso/fondo en el libro (código SOS de la contraparte). ── */
.sp-console .caso-tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: var(--r-sm);
    font-size: 11px; font-weight: 800; letter-spacing: .02em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    background: var(--sp-primary-50); color: var(--sp-primary);
}

/* ── Selector de mockup (Periodo) — decorativo; --off = placeholder inhabilitado con nota honesta. ── */
.sp-console .mock-sel {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 9.5px; font-weight: 800; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .06em;
}
.sp-console .mock-sel select {
    appearance: none; -webkit-appearance: none;
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink);
    background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: 7px 14px; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.sp-console .mock-sel--off select { opacity: .6; cursor: not-allowed; }

/* ── PRIVCARD — tarjeta del saldo grande con aging (Comprometido/Libre/Cobertura) + fórmula. ── */
.sp-console .privcard {
    border: 1.5px solid color-mix(in srgb, var(--sp-primary) 22%, var(--border));
    border-radius: var(--r-md); overflow: hidden; background: var(--surface);
    margin-bottom: var(--sp-4); box-shadow: var(--shadow-sm);
}
.sp-console .privcard__h {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 16px; background: var(--sp-primary); color: #fff;
}
.sp-console .privcard__h svg { width: 16px; height: 16px; }
.sp-console .privcard__h h4 { margin: 0; font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.sp-console .privcard__h .priv { background: rgba(255,255,255,.2); color: #fff; margin-left: auto; }
.sp-console .privcard__big {
    padding: 16px; border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.sp-console .privcard__amt {
    font-size: 30px; font-weight: 800; color: var(--sp-coral);
    font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; white-space: nowrap;
}
/* R15/R6: el signo del saldo manda su color por encima del coral por defecto. */
.sp-console .privcard__amt.cifra--negativo { color: var(--rojo-texto); }
.sp-console .privcard__lbl { font-size: 11.5px; color: var(--ink-3); font-weight: 650; line-height: 1.5; }
.sp-console .privcard__lbl em { color: var(--ink-3); font-style: italic; }
.sp-console .aging { display: flex; padding: 0; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.sp-console .aging__c { flex: 1 1 33%; padding: 12px 14px; border-right: 1px solid var(--border-soft); }
.sp-console .aging__c:last-child { border-right: 0; }
.sp-console .aging__k { margin: 0; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; }
.sp-console .aging__v { margin: 4px 0 0; font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-console .aging__c--warm .aging__v { color: var(--warn-ink); }
.sp-console .aging__c--hot .aging__v { color: var(--sp-red); }
.sp-console .pnote {
    font-size: 11px; color: var(--ink-3); line-height: 1.55;
    padding: 11px 14px; background: var(--surface-alt); border-top: 1px solid var(--border-soft);
}
.sp-console .pnote b { color: var(--ink-2); font-weight: 700; }

/* ── FG-HERO — banda destacada del Fondo General en el índice (clic → detalle). ── */
.sp-console .fg-hero {
    display: flex; align-items: stretch; gap: 20px; flex-wrap: wrap;
    padding: 18px 20px; margin-bottom: 16px; text-decoration: none;
    border: 1px solid var(--border); border-left: 4px solid var(--sp-primary);
    border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm);
    transition: border-color var(--speed), transform var(--speed), box-shadow var(--speed);
}
.sp-console .fg-hero:hover {
    border-color: color-mix(in srgb, var(--sp-teal) 45%, var(--border));
    transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.sp-console .fg-hero__l { flex: 1 1 300px; min-width: 0; }
.sp-console .fg-hero__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.sp-console .fg-hero__tag svg { width: 13px; height: 13px; }
.sp-console .fg-hero__amt { margin: 7px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--sp-coral); font-variant-numeric: tabular-nums; }
.sp-console .fg-hero__amt.cifra--negativo { color: var(--rojo-texto); }
.sp-console .fg-hero__s { margin: 7px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.45; max-width: 46ch; }
.sp-console .fg-hero__r { display: flex; align-items: center; gap: 0; flex: 0 1 auto; }
.sp-console .fg-hero__c { padding: 0 18px; border-left: 1px solid var(--border-soft); }
.sp-console .fg-hero__c:first-child { padding-left: 0; border-left: 0; }
.sp-console .fg-hero__k { margin: 0; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; }
.sp-console .fg-hero__v { margin: 5px 0 0; font-size: 15px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-console .fg-hero__go { display: flex; align-items: center; color: var(--sp-teal); margin-left: 14px; }
.sp-console .fg-hero__go svg { width: 16px; height: 16px; }
@media (max-width: 720px) {
    .sp-console .fg-hero__r { flex: 1 1 100%; flex-wrap: wrap; gap: 12px 0; }
    .sp-console .fg-hero__c { flex: 1 1 45%; padding: 0 14px 0 0; border-left: 0; }
    .sp-console .fg-hero__amt { font-size: 28px; }
    .sp-console .fg-hero__go { display: none; }
}

/* ── SEG-TABS — pestañas por estado con conteo (píldora segmentada). ── */
.sp-console .seg-tabs {
    display: flex; gap: 2px; padding: 4px; flex-wrap: wrap;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: var(--r-pill); width: fit-content;
}
.sp-console .seg-tabs__b {
    display: inline-flex; align-items: center;
    padding: 8px 16px; border-radius: var(--r-pill); text-decoration: none;
    font-size: 12.5px; font-weight: 700; color: var(--ink-3); border: none; background: none; cursor: pointer;
    transition: background var(--speed), color var(--speed);
}
.sp-console .seg-tabs__b:hover { color: var(--ink); }
.sp-console .seg-tabs__b.on { background: var(--sp-primary); color: #fff; }
.sp-console .seg-tabs__b .n { font-variant-numeric: tabular-nums; opacity: .75; margin-left: 5px; }

/* ── Barra superior de la tabla de lista (buscador + pestañas + contador). ── */
.sp-console .lt__bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
}
.sp-console .lt__search {
    flex: 1 1 260px; max-width: 400px; display: flex; align-items: center; gap: 9px;
    background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 9px 12px; color: var(--ink-3); margin: 0;
}
.sp-console .lt__search svg { flex: 0 0 15px; }
.sp-console .lt__search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.sp-console .lt__count { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-console .lt__foot {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-top: 1px solid var(--border-soft); background: var(--surface-alt);
    font-size: 11.5px; color: var(--ink-3); line-height: 1.45;
}
.sp-console .lt__foot b { color: var(--ink-2); font-weight: 700; }

/* ── LT-TABLE — tabla del índice (nombre con avatar + subtítulo, num alineado). ── */
.sp-console .lt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-console .lt-table thead th {
    text-align: left; font-size: 10px; font-weight: 800; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .06em; padding: 10px 14px;
    border-bottom: 1.5px solid var(--border); background: var(--surface-alt); white-space: nowrap;
}
.sp-console .lt-table th.num, .sp-console .lt-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-console .lt-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); color: var(--ink-2); vertical-align: middle; }
.sp-console .lt-table tbody tr:last-child td { border-bottom: 0; }
.sp-console .lt-table tbody tr { transition: background var(--speed); }
.sp-console .lt-table tbody tr:hover { background: var(--surface-alt); cursor: pointer; }
.sp-console .lt-table td.money { font-weight: 700; }
.sp-console .lt-table a { color: var(--sp-teal); text-decoration: none; font-weight: 650; }
.sp-console .lt-table a:hover { text-decoration: underline; }
.sp-console .lt-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-console .lt-name b { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.005em; display: block; line-height: 1.25; }
.sp-console .lt-name b a { color: var(--ink); font-weight: 700; }
.sp-console .lt-name em { font-style: normal; display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.sp-console .lt-av {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
    background: var(--sp-primary-50); color: var(--sp-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
}
/* Responsive: en móvil la tabla se vuelve tarjetas (etiqueta desde data-label). */
@media (max-width: 720px) {
    .sp-console .lt-table thead { display: none; }
    .sp-console .lt-table, .sp-console .lt-table tbody, .sp-console .lt-table tr, .sp-console .lt-table td { display: block; width: auto; }
    .sp-console .lt-table tbody tr { padding: 13px 15px; border-bottom: 1px solid var(--border-soft); }
    .sp-console .lt-table tbody tr:last-child { border-bottom: 0; }
    .sp-console .lt-table tbody td { border-bottom: 0; padding: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; min-height: 26px; }
    .sp-console .lt-table tbody td + td { margin-top: 8px; }
    .sp-console .lt-table tbody td:first-child { grid-template-columns: 1fr; margin-bottom: 9px; }
    .sp-console .lt-table tbody td::before { content: attr(data-label); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
    .sp-console .lt-table tbody td:first-child::before { content: none; }
    .sp-console .lt-table tbody td.num { text-align: right; }
    .sp-console .lt-table tbody td .chip { justify-self: end; width: fit-content; }
}

/* ── OWE — «casos que le deben» con antigüedad + monto (panel del detalle). ── */
.sp-console .owe { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.sp-console .owe:last-child { border-bottom: 0; }
.sp-console .owe__b { flex: 1; min-width: 0; }
.sp-console .owe__t { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.sp-console .owe__t a { color: var(--sp-teal); text-decoration: none; font-weight: 700; }
.sp-console .owe__t a:hover { text-decoration: underline; }
.sp-console .owe__s { margin: 2px 0 0; font-size: 10.5px; color: var(--ink-3); }
.sp-console .owe__amt { font-size: 13.5px; font-weight: 800; color: var(--sp-coral); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── ABSORB — «Balance del fondo» Entró / Salió / Neto (3 columnas). ── */
.sp-console .absorb { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-4); }
.sp-console .absorb__h { display: flex; align-items: center; gap: 9px; padding: 13px 16px; background: var(--surface-alt); border-bottom: 1px solid var(--border-soft); }
.sp-console .absorb__h svg { width: 16px; height: 16px; color: var(--ink-3); }
.sp-console .absorb__h h4 { margin: 0; font-size: 14px; font-weight: 750; color: var(--ink); }
/* CSOS-142 — Entró/Salió/Neto en UNA columna (3 filas apiladas), no 3 columnas: la card vive en la
   columna derecha (angosta) y a 3 columnas las cifras COP se truncaban (el Neto salía cortado). Cada
   fila ocupa todo el ancho, con separador inferior; las cifras (20px, tabular-nums) se leen completas. */
.sp-console .absorb__grid { display: grid; grid-template-columns: 1fr; }
.sp-console .absorb__c { padding: 15px 16px; border-bottom: 1px solid var(--border-soft); }
.sp-console .absorb__c:last-child { border-bottom: 0; }
.sp-console .absorb__k { margin: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.sp-console .absorb__v { margin: 5px 0 0; font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sp-console .absorb__v--net { color: var(--sp-coral); }
.sp-console .absorb__v--net.cifra--negativo { color: var(--rojo-texto); }
.sp-console .absorb__s { margin: 3px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.4; }
/* CSOS-142 — el media query <=520px que apilaba en 1 columna quedó redundante: la base ya apila. */

/* ── Meta a la derecha de la cabecera de una l-card (conteo «N») + pie informativo. ── */
.sp-console .accordion-head-meta { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.sp-console .iv-foot { padding: 11px 14px; border-top: 1px solid var(--border-soft); background: var(--surface-alt); font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.sp-console .iv-foot b { color: var(--ink-2); font-weight: 700; }

/* ── DIR-GRID — layout de 2 columnas del detalle (movimientos + paneles). Colapsa en tablet. ── */
.sp-console .dir-grid { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 16px; align-items: start; }
@media (max-width: 1024px) { .sp-console .dir-grid { grid-template-columns: 1fr; } }

/* ── Selector de tamaño de página (10/20/30). ── */
.sp-console .tamano-pagina { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.sp-console .tamano-pagina__lbl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-console .tamano-pagina__op {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 8px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 650; text-decoration: none;
    transition: background var(--speed), border-color var(--speed), color var(--speed);
}
.sp-console a.tamano-pagina__op:hover { background: var(--sp-primary-50); border-color: var(--sp-primary); color: var(--sp-primary); }
.sp-console .tamano-pagina__op--actual { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; cursor: default; }
/* =============================================================================================
   F3 (CSOS-125) — DETALLE (single) de un movimiento. Capa ADITIVA: reusa tokens WCAG y componentes
   ya existentes (.l-card, .field, .custody, .mov-pill, .badge, .err). Solo añade el HERO del
   movimiento, la línea de tiempo de la devolución, el placeholder de auditoría y el riel de acciones.
   ============================================================================================= */

/* ── Hero del movimiento: pill + código + estado + monto grande + caso/fondo + efecto ── */
.sp-console .mov-single-hero {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.sp-console .mov-single-hero--anulada { border-color: color-mix(in srgb, var(--sp-red) 30%, var(--border)); background: var(--tint-red); }
.sp-console .mov-single-hero__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sp-console .mov-single-hero__code { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-console .mov-single-hero__chips { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.sp-console .mov-single-hero__amt { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: var(--sp-3) 0 0; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sp-console .mov-single-hero__sub { font-size: 12.5px; color: var(--ink-3); margin: 6px 0 0; line-height: 1.5; max-width: 62ch; }
.sp-console .mov-single-hero__meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-soft); }
.sp-console .mov-single-hero__meta-k { display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 4px; }
.sp-console .mov-single-hero__meta-v { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.sp-console .mov-single-hero__meta-v a { color: var(--sp-teal); text-decoration: none; }
.sp-console .mov-single-hero__meta-v a:hover { text-decoration: underline; }
.sp-console .mov-single-hero__meta-note { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 640px) { .sp-console .mov-single-hero__meta { grid-template-columns: 1fr; gap: var(--sp-3); } .sp-console .mov-single-hero__amt { font-size: 27px; } }

/* ── Línea de tiempo de la devolución (estados REALES: reclamada → cobrada/desistida) ── */
.sp-console .mov-timeline { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.sp-console .mov-timeline__step { position: relative; padding: 0 0 var(--sp-4) 26px; }
.sp-console .mov-timeline__step:last-child { padding-bottom: 0; }
.sp-console .mov-timeline__step::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--border); }
.sp-console .mov-timeline__step:last-child::before { display: none; }
.sp-console .mov-timeline__dot { position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); }
.sp-console .mov-timeline__step--done .mov-timeline__dot { background: var(--sp-green); border-color: var(--sp-green); }
.sp-console .mov-timeline__step--done::before { background: var(--sp-green); }
.sp-console .mov-timeline__step--actual .mov-timeline__dot { background: var(--sp-primary); border-color: var(--sp-primary); }
.sp-console .mov-timeline__step--off .mov-timeline__dot { opacity: .5; }
.sp-console .mov-timeline__label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.sp-console .mov-timeline__step--off .mov-timeline__label { color: var(--ink-3); font-weight: 600; }
.sp-console .mov-timeline__sub { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ── Card placeholder (auditoría pendiente): mismo cuerpo, matiz de "aún no disponible" ── */
.sp-console .l-card--placeholder { border-style: dashed; background: var(--surface-alt); }
.sp-console .l-card--placeholder code { font-size: 11.5px; background: var(--surface); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border); }

/* ── Riel de acciones del single (solo navegación en F3): fila de action-btn ── */
.sp-console .mov-single-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-4); }
.sp-console .mov-single-actions .action-btn { margin-bottom: 0; }

/* F3 (CSOS-125): el tipo del libro de movimientos es un enlace al single. El pill conserva su piel;
   el ancla solo lo hace clicable (sin subrayado, hereda el color del pill). */
.sp-console .mov-tipo-link { text-decoration: none; display: inline-block; }
.sp-console .mov-tipo-link:hover .mov-pill { filter: brightness(1.06); box-shadow: var(--shadow-sm); }

/* ── CSOS-116 · FIX A — CTA «Registrar transferencia» subido al hero del fondo ──
   El botón se sacó del final del riel derecho (donde quedaba flotando abajo, fuera de vista) y se
   ancló bajo el saldo grande, antes del `dir-grid`. En escritorio se ajusta al contenido y se alinea
   a la derecha (no ocupa toda la banda); en pantallas angostas pasa a ancho completo (objetivo táctil
   R8). No hay position:fixed/sticky: el CTA fluye en el layout, arriba y visible sin scroll. */
.sp-console .fondo-acciones-hero { display: flex; justify-content: flex-end; margin: 0 0 16px; }
.sp-console .fondo-acciones-hero .action-btn { width: auto; margin-bottom: 0; }
@media (max-width: 640px) {
    .sp-console .fondo-acciones-hero { justify-content: stretch; }
    .sp-console .fondo-acciones-hero .action-btn { width: 100%; }
}

/* ── CSOS-116 · FIX B — fila del libro del fondo clickeable hacia el single del movimiento ──
   Patrón "stretched link": el <a> de la celda «Transacción» proyecta un ::after que cubre toda la
   fila, así el clic en cualquier columna abre el single. Requiere `position: relative` en la fila
   para anclar el ::after. Seguro aquí porque el libro del fondo no tiene otros controles por fila
   (no se anida <a> dentro de <a>). El hover de fila (background) ya existe en .mov-table; se añade el
   cursor y un realce del pill para señalar que es navegable. */
.sp-console .mov-table tbody tr.fila--enlace { position: relative; cursor: pointer; }
.sp-console .mov-table .mov-fila-link { text-decoration: none; display: inline-block; }
.sp-console .mov-table .mov-fila-link::after { content: ""; position: absolute; inset: 0; }
.sp-console .mov-table tbody tr.fila--enlace:hover .mov-pill { filter: brightness(1.06); box-shadow: var(--shadow-sm); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   CSOS-143 · Selector con buscador (typeahead) — piel del componente selector-buscador.js
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   MEJORA PROGRESIVA: el <select> nativo (`.sb__native`) se oculta SOLO cuando el JS ya montó el
   componente (marca `data-sb-listo` en el <select>, que vive dentro de `.sb`). Si el JS/HTMX no
   cargan, `.sb` no existe y el select nativo se ve y funciona (degradación). Tema light, tokens WCAG
   del design system (--surface/--border/--ink/--sp-teal…). Ancho AUTOMÁTICO (el popup se adapta al
   contenedor del campo, no al ancho fijo del select nativo). */

/* Contenedor: relativo para anclar el popup absoluto. Ancho fluido (hereda el del .campo). */
.sp-console .sb { position: relative; width: 100%; }

/* El <select> nativo, ya mejorado, se oculta pero sigue en el DOM (envía su value en el POST). */
.sp-console .sb .sb__native { display: none; }

/* Input de búsqueda: mismo tratamiento que los inputs del formulario (bordes/foco del mockup),
   con una lupa a la izquierda. Se estiliza aquí explícitamente para verse igual en cualquier form
   (no depende de la clase `.pago-form` del contenedor). */
.sp-console .sb__input {
    width: 100%;
    padding: 11px 13px 11px 36px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7c80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
    color: var(--ink);
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--speed), box-shadow var(--speed);
}
/* Foco: anillo teal del mockup (refuerzo; el :focus-visible de consola.css sigue vivo). */
.sp-console .sb__input:focus {
    border-color: var(--sp-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-teal) 18%, transparent);
    outline: none;
}

/* Popup de resultados: tarjeta flotante bajo el input, ancho del contenedor, con sombra y scroll. */
.sp-console .sb__pop {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.sp-console .sb__pop[hidden] { display: none; }

/* Lista de opciones: scroll vertical si hay muchas (el endpoint ya topa el número). */
.sp-console .sb__list {
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 280px;
    overflow-y: auto;
}

/* Cada opción: etiqueta principal + sub-línea (NIT, proveedor, acreedor…). */
.sp-console .sb-opt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.sp-console .sb-opt__label { font-size: 14px; color: var(--ink); }
.sp-console .sb-opt__sub { font-size: 12px; color: var(--ink-3); }

/* Opción activa (teclado o ratón): resaltado teal suave. `is-activa` lo pone el JS. */
.sp-console .sb-opt.is-activa,
.sp-console .sb-opt:hover {
    background: var(--tint-teal);
}

/* Estado vacío: no es elegible (sin data-value), se ve apagado y sin cursor de clic. */
.sp-console .sb-opt--vacia {
    color: var(--ink-3);
    cursor: default;
    font-size: 13px;
}
.sp-console .sb-opt--vacia:hover { background: transparent; }

/* ── Fila «＋ Crear …» (OPT-IN CSOS-131) — acción pinned de PRIMERO en el popup.
   Se distingue de los resultados con acento teal + peso, y un separador inferior que la despega del
   listado. El JS la prepend-ea en el <ul>; aquí solo se le da piel. Es una sola línea (no lleva
   sub-etiqueta), por eso se centra verticalmente en vez de heredar el `flex-direction:column`. */
.sp-console .sb__crear {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: var(--sp-teal);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--r-sm);
    /* Separador con el bloque de resultados: margen + hairline bajo la fila. */
    margin-bottom: 4px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
}
/* Activa (teclado/ratón): mismo tinte teal que un resultado resaltado, para coherencia. */
.sp-console .sb__crear.is-activa,
.sp-console .sb__crear:hover { background: var(--tint-teal); }

/* CSOS-133 — respaldo sin-JS: cuando el buscador (`.sb`) SÍ montó, la fila «＋ Crear animal» del
   popup cumple el papel del atajo, así que se OCULTA el enlace de respaldo `.campo__accion` que la
   plantilla dejó para el caso JS/HTMX caído (ahí `.sb` no existe y el enlace permanece visible). */
.sp-console .sb ~ .campo__accion { display: none; }