/* ==========================================================================
   tema.css — piel del panel (D-142, rediseño «híbrido»): modo claro (D) y
   modo noche (E). Capa que va DESPUÉS de styles.css; no mueve ni oculta nada.
   Orden: 1) tokens claros + puente a los tokens de styles.css
          2) tokens noche bajo [data-tema="noche"]
          3) capa lateral (base global, controles, cáscara, rail, col. 2 y 4)
          4) capa de detalle (interior de .cases-col-detail)
   Colores: SOLO var(--h-*). Para retirar la piel, basta quitar el <link>.
   ========================================================================== */

/* Híbrido D (blanco) — tokens. Fuente única de color para las capas hib/*.css.
   E (noche) redefine estos mismos tokens en tokens-e.css. Ninguna capa usa hex sueltos. */
:root {
    /* superficies */
    --h-main: #ffffff;        /* columna de lectura (detalle) */
    --h-side: #f7f7f5;        /* columnas laterales (lista y contexto) */
    --h-paper: #ffffff;       /* papel: mensajes, tarjeta seleccionada */
    --h-field: #ffffff;       /* fondo de inputs y botones secundarios */
    --h-track: #f1f0ed;       /* pista del control segmentado */
    --h-seg-on: #ffffff;      /* segmento activo */
    --h-ai: #f4f3ef;          /* resumen IA, línea de producto, chip de edad neutro */
    --h-sel: #fff1ea;         /* carpeta activa / tinte de selección */
    --h-hover: rgba(128, 118, 100, .08);

    /* texto y líneas */
    --h-text: #161616;
    --h-muted: #5d5d5a;       /* 6,6:1 sobre blanco, 6,2:1 sobre --h-side */
    --h-line: #e8e7e3;        /* separadores de columna y de sección */
    --h-ctl-line: #dcdad5;    /* borde de inputs y botones secundarios */
    --h-btn-line: #161616;    /* borde de botones de sección */

    /* tinta, rail, marca */
    --h-ink: #161616;         /* botón primario */
    --h-on-ink: #ffffff;
    --h-rail: #161616;
    --h-rail-icon: #c9c8c4;
    --h-rail-active: #ffffff;
    --h-accent: #ff5314;      /* SOLO: anillo de selección, raya de carpeta/rail, foco. Nunca texto ni estado */
    --h-focus: #e2470e;

    /* estados: fondo suave / texto / punto */
    --h-new-bg: #e4ebf7;      --h-new-fg: #1f3f8f;      --h-new-dot: #2f5bd3;
    --h-curso-bg: #e3f2e5;    --h-curso-fg: #0c5c1c;    --h-curso-dot: #1f8a3a;
    --h-cli-bg: #f8edcc;      --h-cli-fg: #6e4e00;      --h-cli-dot: #c08a00;
    --h-amph-bg: #eee6f6;     --h-amph-fg: #5b2d91;     --h-amph-dot: #7a45c2;
    --h-collab-bg: #dcefea;   --h-collab-fg: #0c6158;   --h-collab-dot: #14907f;
    --h-cerr-bg: #ecebe7;     --h-cerr-fg: #55524d;     --h-cerr-dot: #8a8780;

    /* edad / tarde / error */
    --h-age-bg: #efeeea;      --h-age-fg: #161616;
    --h-late-bg: #fde6e3;     --h-late-fg: #9e1c14;
    --h-error: #b3261e;       --h-badge: #d4372f;

    --h-shadow-pop: 0 8px 24px rgba(20, 18, 15, .14), 0 0 0 1px rgba(20, 18, 15, .06);

    /* puente a los tokens propios de styles.css, para que lo no tocado también siga el tema */
    --bg: var(--h-side);
    --surface: var(--h-paper);
    --surface-2: var(--h-side);
    --surface-3: var(--h-ai);
    --text: var(--h-text);
    --muted: var(--h-muted);
    --muted-strong: var(--h-text);
    --accent: var(--h-ink);
    --accent-hover: var(--h-ink);
    --brand: var(--h-ink);
    --accent-soft: var(--h-ai);
    --accent-softer: var(--h-side);
    --accent-border: var(--h-ctl-line);
    --sel-tint: var(--h-sel);
    --sel-bar: var(--h-accent);
    --border: var(--h-line);
    --border-strong: var(--h-ctl-line);
    --st-new: var(--h-new-fg);         --st-new-soft: var(--h-new-bg);
    --st-curso: var(--h-curso-fg);     --st-curso-soft: var(--h-curso-bg);
    --st-cli: var(--h-cli-fg);         --st-cli-soft: var(--h-cli-bg);
    --st-amphora: var(--h-amph-fg);    --st-amphora-soft: var(--h-amph-bg);
    --st-collab: var(--h-collab-fg);   --st-collab-soft: var(--h-collab-bg);
    --st-cerrado: var(--h-cerr-fg);    --st-cerrado-soft: var(--h-cerr-bg);
    --age-1-fg: var(--h-age-fg);  --age-1-bg: var(--h-paper);  --age-1-line: var(--h-ctl-line);
    --age-2-fg: var(--h-age-fg);  --age-2-bg: var(--h-age-bg);
    --age-late-fg: var(--h-late-fg);  --age-late-bg: var(--h-late-bg);
    --error: var(--h-error);  --error-soft: var(--h-late-bg);
    --info: var(--h-new-fg);  --warning: var(--h-cli-fg);
    --shadow: none; --shadow-sm: none;
    --shadow-md: var(--h-shadow-pop); --shadow-lg: var(--h-shadow-pop);
    --radius: 8px; --radius-lg: 10px;

    --f-body: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
    --f-label: "Poppins", -apple-system, system-ui, sans-serif;
    /* Letra de lectura y escritura (la del sistema, la de antes): mensajes,
       editor de respuesta, instrucción a la IA y campos de formulario. */
    --f-read: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Modo noche (híbrido E): redefine SOLO los tokens --h-*; el puente de arriba los propaga.
   Se activa con <html data-tema="noche"> (botón del rail, persistido en localStorage). */
:root[data-tema="noche"] {
    color-scheme: dark;
    --h-main: #171513;
    --h-side: #1e1b18;
    --h-paper: #221f1b;
    --h-field: #24201c;
    --h-track: #25211c;
    --h-seg-on: #35302a;
    --h-ai: #2a2621;
    --h-sel: #2e2822;
    --h-hover: rgba(255, 246, 230, .06);

    --h-text: #f3eee6;
    --h-muted: #aaa296;       /* 7:1 sobre --h-main */
    --h-line: #2f2a24;
    --h-ctl-line: #3c362f;
    --h-btn-line: #8a8174;

    --h-ink: #f3eee6;
    --h-on-ink: #151515;
    --h-rail: #0d0c0b;
    --h-rail-icon: #8f877b;
    --h-rail-active: #fffcf8;
    --h-accent: #ff5314;
    --h-focus: #ff7a45;

    --h-new-bg: #1f2a44;      --h-new-fg: #b3c7ff;      --h-new-dot: #6f93ff;
    --h-curso-bg: #1d3424;    --h-curso-fg: #93dba8;    --h-curso-dot: #5ec27a;
    --h-cli-bg: #3a2f12;      --h-cli-fg: #f0cd78;      --h-cli-dot: #d9a520;
    --h-amph-bg: #2e2340;     --h-amph-fg: #d4bcf7;     --h-amph-dot: #a77ce6;
    --h-collab-bg: #163631;   --h-collab-fg: #8fdecf;   --h-collab-dot: #3fb5a0;
    --h-cerr-bg: #2c2823;     --h-cerr-fg: #c9c2b7;     --h-cerr-dot: #8f877b;

    --h-age-bg: #2e2923;      --h-age-fg: #e7e0d5;
    --h-late-bg: #3d1f1c;     --h-late-fg: #f6aba3;
    --h-error: #f08a80;       --h-badge: #e0473e;

    --h-shadow-pop: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 246, 230, .08);
}

/* ==========================================================================
   Híbrido · capa LATERAL — base global, controles, cáscara de 3 columnas,
   rail, columna 2 (lista) y columna 4 (contexto). Va DESPUÉS de styles.css +
   tokens-d.css (+ tokens-e.css) y ANTES de layer-detalle.css.
   Colores: SOLO var(--h-*) (o color-mix de dos tokens / token + transparent).
   No mueve, reordena ni oculta nada.

   VARIABLES AUXILIARES (para reutilizar desde layer-detalle.css):
     --hl-ctl      34px  control de campo grande (buscador, nota, select de ticket)
     --hl-ctl-md   30px  botón secundario / input de fila (header detalle, vínculo)
     --hl-ctl-sm   26px  botón pequeño (col 4, barra de lista)
     --hl-btn-lg   40px  CTA (NUEVO CASO). (ESCRIBIR RESPUESTA = 46px, lo pone el detalle)
     --hl-r        8px   radio de control      --hl-r-sm 6px  radio de botón pequeño/fantasma
     --hl-r-tag    3px   radio de tag          --hl-r-box 10px radio de caja (IA, mensaje)
     --hl-dur 140ms / --hl-ease                transiciones (anuladas con reduced-motion)
     --hl-ring     halo de foco de campos (naranja de foco al 22 %)
     --hl-caret    flecha propia de <select> dibujada con gradientes de token
                   (usar: background-image: var(--hl-caret); + las 3 props de
                   posición/tamaño/repetición de la receta SELECT de abajo)

   RECETAS (buscar «RECETA:» — son listas de selectores; para usarlas en el
   detalle basta con añadir allí el selector con las mismas declaraciones):
     PRIMARIO tinta · SECUNDARIO campo · FANTASMA · TAG (Poppins 10 px mayús.)
     · EYEBROW (Bricolage 700 11,5 px, tracking 1,3 px) · POPOVER.
   Globales que tocan el detalle (especificidad baja, (0,0,2)–(0,1,2)):
     body / button / input / select / textarea / checkbox / radio / :focus-visible
     y .case-badge (tag de estado, también el del header del detalle).
   ========================================================================== */

:root {
    --hl-ctl: 34px;
    --hl-ctl-md: 30px;
    --hl-ctl-sm: 26px;
    --hl-btn-lg: 40px;
    --hl-r: 8px;
    --hl-r-sm: 6px;
    --hl-r-tag: 3px;
    --hl-r-box: 10px;
    --hl-dur: 140ms;
    --hl-ease: cubic-bezier(.2, .7, .3, 1);
    --hl-ring: 0 0 0 3px color-mix(in srgb, var(--h-focus) 22%, transparent);
    --hl-caret:
        linear-gradient(45deg, transparent calc(50% - 1px), var(--h-muted) calc(50% - 1px), var(--h-muted) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(-45deg, transparent calc(50% - 1px), var(--h-muted) calc(50% - 1px), var(--h-muted) calc(50% + 1px), transparent calc(50% + 1px));
    --hl-rail-hover: color-mix(in srgb, var(--h-rail-active) 8%, transparent);
    --hl-rail-on: color-mix(in srgb, var(--h-rail-active) 10%, transparent);
    --hl-press: color-mix(in srgb, var(--h-text) 10%, transparent);
}

/* ── 0. Base ─────────────────────────────────────────────────────────────── */
body {
    font-family: var(--f-body);
    background: var(--h-side);
    color: var(--h-text);
    -webkit-font-smoothing: antialiased;
}
body button { font-family: inherit; }
body input,
body select,
body textarea { font-family: var(--f-read); }
body input,
body select,
body textarea { color: var(--h-text); }
body ::selection { background: var(--h-sel); color: var(--h-text); }

/* Movimiento: transiciones cortas en lo interactivo */
body button, body summary, body a, body input, body select, body textarea,
body label, body .case-card {
    transition: background-color var(--hl-dur) var(--hl-ease), border-color var(--hl-dur) var(--hl-ease),
                box-shadow var(--hl-dur) var(--hl-ease), color var(--hl-dur) var(--hl-ease),
                opacity var(--hl-dur) var(--hl-ease);
}
@media (prefers-reduced-motion: reduce) {
    body *, body *::before, body *::after { transition: none !important; animation-duration: 0s !important; }
}

/* Foco de teclado: naranja de foco, único uso del naranja fuera de selección */
body :is(button, summary, a, label, [tabindex]):focus-visible {
    outline: 2px solid var(--h-focus);
    outline-offset: 2px;
}
body button:disabled { cursor: not-allowed; opacity: .5; }

/* Botón sin clase propia: hereda letra y queda con forma de control */
body button { border-radius: var(--hl-r-sm); }

/* ── 1. Campos ───────────────────────────────────────────────────────────
   (0,1,2): gana a las reglas de UNA clase de styles.css; las de dos clases
   o la capa de detalle pueden afinar. */
body input:is([type="text"], [type="search"], [type="email"], [type="number"], [type="tel"], [type="url"], [type="password"], [type="date"], :not([type])),
body select:not([multiple]),
body textarea:not([hidden]) {
    font-size: 13.5px;
    color: var(--h-text);
    background-color: var(--h-field);
    border: 1px solid var(--h-ctl-line);
    border-radius: var(--hl-r);
    box-shadow: none;
}
body input:is([type="text"], [type="search"], [type="email"], [type="number"], [type="tel"], [type="url"], [type="password"], [type="date"], :not([type])),
body select:not([multiple]) {
    min-height: var(--hl-ctl-md);
    padding: 4px 10px;
    line-height: 20px;
}
body textarea:not([hidden]) { line-height: 1.5; padding: 8px 10px; }

body input:is([type="text"], [type="search"], [type="email"], [type="number"], [type="tel"], [type="url"], [type="password"], [type="date"], :not([type])):hover,
body select:not([multiple]):hover,
body textarea:not([hidden]):hover { border-color: var(--h-muted); }

body input:is([type="text"], [type="search"], [type="email"], [type="number"], [type="tel"], [type="url"], [type="password"], [type="date"], :not([type])):focus,
body select:not([multiple]):focus,
body textarea:not([hidden]):focus {
    outline: none;
    border-color: var(--h-focus);
    box-shadow: var(--hl-ring);
}
body input::placeholder,
body textarea::placeholder { color: var(--h-muted); opacity: 1; }

/* RECETA: SELECT con flecha propia (tokens, sin imagen) */
body select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: var(--hl-caret);
    background-position: calc(100% - 16px) 50%, calc(100% - 11.5px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
    text-overflow: ellipsis;
}
body select option { background: var(--h-paper); color: var(--h-text); }

/* Checkbox propio: tinta al marcar, tick dibujado con bordes de token */
body input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1.5px solid var(--h-muted);
    border-radius: 4px;
    background: var(--h-field);
    cursor: pointer;
    vertical-align: middle;
}
body input[type="checkbox"]:hover { border-color: var(--h-text); }
body input[type="checkbox"]:checked,
body input[type="checkbox"]:indeterminate { background: var(--h-ink); border-color: var(--h-ink); }
body input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: .5px;
    width: 4px;
    height: 8px;
    border: solid var(--h-on-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
body input[type="checkbox"]:indeterminate::after {
    content: "";
    position: absolute;
    left: 2.5px;
    right: 2.5px;
    top: 5px;
    height: 2px;
    border-radius: 1px;
    background: var(--h-on-ink);
}
body input[type="checkbox"]:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 2px; }
body input[type="radio"] { accent-color: var(--h-ink); }
/* inputs ocultos a propósito por styles.css (el control visible es su etiqueta):
   el checkbox global no debe darles tamaño */
body .seg-prio-pill input,
body .case-notas-task-toggle input[type="checkbox"] { width: 0; height: 0; border: 0; opacity: 0; }

/* ── 2. Botones ─────────────────────────────────────────────────────────── */

/* RECETA: PRIMARIO tinta */
body .cases-nuevo-btn,
body .case-amphora-ticket-submit,
body .bulk-estado-trigger,
body .case-order-link-confirm-btn,
body .bulk-merge-btn-primary {
    background: var(--h-ink);
    color: var(--h-on-ink);
    border: 1px solid var(--h-ink);
    box-shadow: none;
    opacity: 1;
}
body .cases-nuevo-btn:hover,
body .case-amphora-ticket-submit:hover:not(:disabled),
body .bulk-estado-trigger:hover,
body .bulk-estado-menu[open] > .bulk-estado-trigger,
body .case-order-link-confirm-btn:hover,
body .bulk-merge-btn-primary:hover {
    background: color-mix(in srgb, var(--h-ink) 86%, var(--h-main));
    border-color: color-mix(in srgb, var(--h-ink) 86%, var(--h-main));
    color: var(--h-on-ink);
    opacity: 1;
}
body .cases-nuevo-btn:active,
body .case-amphora-ticket-submit:active:not(:disabled),
body .bulk-estado-trigger:active { background: var(--h-ink); box-shadow: inset 0 0 0 99px var(--hl-press); }

/* RECETA: SECUNDARIO (campo + línea de control) */
body .case-order-invoice-btn,
body .case-order-refund-btn,
body .email-sync-btn,
body .bulk-btn,
body .case-amphora-action-btn,
body .case-amphora-ticket-attach-btn,
body .case-order-link-form .case-order-link-btn,
body .case-amphora-duplicate-ticket-btn,
body .bulk-merge-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--h-text);
    background: var(--h-field);
    border: 1px solid var(--h-ctl-line);
    border-radius: var(--hl-r-sm);
    box-shadow: none;
    font-weight: 500;
    cursor: pointer;
    opacity: 1;
}
body .case-order-invoice-btn:hover,
body .case-order-refund-btn:hover,
body .email-sync-btn:hover:not(:disabled),
body .bulk-btn:hover,
body .case-amphora-action-btn:hover:not(:disabled),
body .case-amphora-ticket-attach-btn:hover,
body .case-order-link-form .case-order-link-btn:hover,
body .case-amphora-duplicate-ticket-btn:hover,
body .bulk-merge-btn-secondary:hover {
    background: var(--h-field);
    border-color: var(--h-muted);
    color: var(--h-text);
    opacity: 1;
}
body .case-order-invoice-btn:active,
body .case-order-refund-btn:active,
body .email-sync-btn:active,
body .bulk-btn:active,
body .case-amphora-action-btn:active,
body .case-amphora-ticket-attach-btn:active,
body .case-order-link-form .case-order-link-btn:active { background: var(--h-track); }

/* RECETA: FANTASMA */
body .case-sort-trigger,
body .bulk-clear,
body .case-notas-task-toggle,
body .case-amphora-ticket-close-btn,
body .sidebar-toggle,
body .case-order-link-linked .case-order-link-btn,
body .case-amphora-link-control-btn,
body .case-amphora-actions-retry,
body .case-notas-restore-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--hl-r-sm);
    box-shadow: none;
    color: var(--h-text);
    cursor: pointer;
    text-decoration: none;
}
body .case-sort-trigger:hover,
body .case-sort-menu[open] > .case-sort-trigger,
body .case-sort-menu--custom > .case-sort-trigger,
body .bulk-clear:hover,
body .case-notas-task-toggle:hover,
body .case-order-link-linked .case-order-link-btn:hover,
body .case-amphora-link-control-btn:hover,
body .case-amphora-actions-retry:hover,
body .case-notas-restore-btn:hover {
    background: var(--h-hover);
    border-color: transparent;
    color: var(--h-text);
    text-decoration: none;
}
body .case-sort-trigger:active,
body .bulk-clear:active,
body .case-order-link-linked .case-order-link-btn:active,
body .case-amphora-link-control-btn:active { background: var(--hl-press); }

/* ── 3. RECETA: TAG — estado, edad, chips de col 4 ──────────────────────── */
body .case-badge,
body .case-order-financial,
body .financial-paid,
body .case-amphora-status,
body .case-amphora-ticket-badge {
    display: inline-flex;
    align-items: center;
    height: 19px;
    min-height: 0;
    padding: 0 6px;
    border: 0;
    border-radius: var(--hl-r-tag);
    font-family: var(--f-label);
    font-size: 10px;
    line-height: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
}
body .case-badge-nuevo { background: var(--h-new-bg); color: var(--h-new-fg); }
body .case-badge-en_curso { background: var(--h-curso-bg); color: var(--h-curso-fg); }
body .case-badge-esperando_cliente { background: var(--h-cli-bg); color: var(--h-cli-fg); }
body .case-badge-esperando_amphora { background: var(--h-amph-bg); color: var(--h-amph-fg); }
body .case-badge-collab { background: var(--h-collab-bg); color: var(--h-collab-fg); }
body .case-badge-cerrado { background: var(--h-cerr-bg); color: var(--h-cerr-fg); }
body .case-badge-origen {
    background: transparent;
    color: var(--h-muted);
    box-shadow: inset 0 0 0 1px var(--h-ctl-line);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 500;
}

/* RECETA: EYEBROW (rótulo corto en mayúscula espaciada) */
body .case-notas-title,
body .case-amphora-duplicates-label {
    margin: 0;
    font-family: var(--f-body);
    font-size: 11.5px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--h-text);
}

/* RECETA: POPOVER */
body .case-sort-list,
body .bulk-estado-list {
    padding: 5px;
    background: var(--h-paper);
    border: 0;
    border-radius: var(--hl-r-box);
    box-shadow: var(--h-shadow-pop);
}
body .case-sort-option,
body .bulk-estado-option {
    border-radius: var(--hl-r-sm);
    color: var(--h-text);
    font-size: 13px;
    background: transparent;
}
body .case-sort-option { padding: 6px 8px; }
body .bulk-estado-option { padding: 0 10px; height: 30px; }
body .case-sort-option small { color: var(--h-muted); font-size: 12px; font-weight: 400; }
body .case-sort-option:hover,
body .bulk-estado-option:hover { background: var(--h-hover); }
body .case-sort-option:focus-visible { outline: 2px solid var(--h-focus); outline-offset: -2px; }
body .case-sort-option[aria-checked="true"] { font-weight: 700; }
body .case-sort-ck { color: var(--h-text); }

/* Toasts: de hex a tokens */
body .toast-error { background: var(--h-late-bg); color: var(--h-late-fg); border-color: color-mix(in srgb, var(--h-late-fg) 30%, transparent); }
body .toast-success { background: var(--h-curso-bg); color: var(--h-curso-fg); border-color: color-mix(in srgb, var(--h-curso-fg) 30%, transparent); }
body .toast-info { background: var(--h-new-bg); color: var(--h-new-fg); border-color: color-mix(in srgb, var(--h-new-fg) 30%, transparent); }
body .toast-warning { background: var(--h-cli-bg); color: var(--h-cli-fg); border-color: color-mix(in srgb, var(--h-cli-fg) 30%, transparent); }

/* ── 4. Cáscara: columnas a alto completo, pegadas, línea fina ──────────── */
body .content:has(> #cases-shell) { padding: 0; }
body .cases-shell {
    gap: 0;
    height: 100vh;
    background: var(--h-side);
}
/* La lectura conserva su tope de 900px; el sobrante lo absorbe la col 4 hasta
   340px (el resto, si lo hay, queda en --h-side, sin hueco visible). */
body .cases-shell.cases-shell--with-detail {
    grid-template-columns: 280px minmax(auto, 900px) minmax(240px, 340px);
}
body .cases-col-list,
body .cases-col-detail,
body .cases-col-checklist {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body .cases-col-list {
    background: var(--h-side);
    border-right: 1px solid var(--h-line);
    padding: 0 14px 16px;
}
body .cases-col-detail { background: var(--h-main); }
body .cases-col-checklist {
    background: var(--h-side);
    border-left: 1px solid var(--h-line);
    padding: 0;
}
/* sin detalle (2 columnas) la lista se apoya en la lectura igual */
body .cases-shell:not(.cases-shell--with-detail) .cases-col-detail { border-left: 0; }

/* ── 5. Rail (.sidebar; plegado = como lo usa Jorge) ───────────────────── */
body .sidebar {
    background: var(--h-rail);
    border-right: 0;
    color: var(--h-rail-icon);
}
body .app-shell.sidebar-collapsed .sidebar,
html.sidebar-collapsed-preload body .sidebar { width: 56px; }
body .sidebar-brand,
body .sidebar-user { color: var(--h-rail-active); }
body .sidebar-user { color: var(--h-rail-icon); }
body .app-shell.sidebar-collapsed .sidebar-header { padding: 14px 0 16px; }
body .app-shell.sidebar-collapsed .sidebar-nav {
    padding: 0;
    gap: 6px;
    align-items: center;
}
body .sidebar-toggle {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--hl-r);
    color: var(--h-rail-icon);
}
body .sidebar-toggle:hover { background: var(--hl-rail-hover); color: var(--h-rail-active); }
body .sidebar-nav a {
    border-radius: var(--hl-r);
    color: var(--h-rail-icon);
}
body .app-shell.sidebar-collapsed .sidebar-nav a {
    width: 38px;
    height: 38px;
    padding: 0;
}
body .sidebar-nav a:hover { background: var(--hl-rail-hover); color: var(--h-rail-active); }
body .sidebar-nav a:active { background: var(--hl-rail-on); }
body .sidebar-nav a.active {
    background: var(--hl-rail-on);
    color: var(--h-rail-active);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--h-accent);
}
body .sidebar-nav a svg { width: 18px; height: 18px; }
body .nav-badge {
    top: 5px;
    right: 5px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--h-badge);
    color: var(--h-rail-active);
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
}
body .sidebar-footer { border-top: 0; }
body .app-shell.sidebar-collapsed .sidebar-footer {
    padding: 14px 0;
    align-items: center;
}
body .sidebar-footer button[type="submit"] {
    border: 0;
    border-radius: var(--hl-r);
    background: transparent;
    color: var(--h-rail-icon);
}
body .app-shell.sidebar-collapsed .sidebar-footer button[type="submit"] {
    width: 38px;
    height: 38px;
    padding: 0;
}
body .sidebar-footer button[type="submit"]:hover { background: var(--hl-rail-hover); color: var(--h-rail-active); }
body .sidebar :focus-visible { outline-color: var(--h-focus); outline-offset: 0; }

/* ── 6. Columna 2 · lista ─────────────────────────────────────────────── */
body .cases-search-row {
    background: var(--h-side);
    padding-top: 16px;
    column-gap: 8px;
}
body .cases-search-bar { position: relative; }
/* lupa: máscara SVG (forma) pintada con token */
body .cases-search-bar::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 15px;
    height: 15px;
    margin-top: -7.5px;
    background: var(--h-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}
body .cases-search-bar input[type="search"] {
    height: var(--hl-ctl);
    min-height: var(--hl-ctl);
    padding: 0 10px 0 33px;
    font-size: 13.5px;
    background: var(--h-field);
    border: 1px solid var(--h-ctl-line);
    border-radius: var(--hl-r);
}
body .cases-search-bar input[type="search"]:focus {
    outline: none;
    border-color: var(--h-focus);
    box-shadow: var(--hl-ring);
}
body .email-sync-btn {
    width: var(--hl-ctl);
    height: var(--hl-ctl);
    padding: 0;
    border-radius: var(--hl-r);
    color: var(--h-text);
}
body .email-sync-btn:disabled { color: var(--h-muted); }

/* NUEVO CASO */
body .cases-nuevo-btn {
    height: var(--hl-btn-lg);
    padding: 0 14px;
    margin: 14px 0 14px;
    gap: 8px;
    border-radius: var(--hl-r);
    font-family: var(--f-label);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Carpetas */
body .cases-tabs {
    background: var(--h-side);
    top: 48px;              /* = alto de la fila buscador (16 + 34) − 2 de solape */
    gap: 1px;
    margin-bottom: 12px;
}
body .tab-subitems { gap: 1px; margin: 1px 0; }
body .tab-item,
body .tab-subitem {
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--h-text);
    background: transparent;
}
body .tab-item { font-weight: 700; }
body .tab-subitem { padding-left: 22px; font-weight: 400; }
body .tab-item:hover,
body .tab-subitem:hover { background: var(--h-hover); color: var(--h-text); }
body .tab-item.active,
body .tab-subitem.active {
    background: var(--h-sel);
    color: var(--h-text);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--h-accent);
}
body .tab-item.disabled:hover { background: transparent; }
body .tab-count,
body .tab-subitem .tab-count {
    min-width: 0;
    height: auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-family: var(--f-label);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--h-muted);
}
body .tab-item.active .tab-count,
body .tab-subitem.active .tab-count { background: transparent; color: var(--h-text); }

/* Barra seleccionar / ordenar (mismo alto 44px en los dos estados: no se toca) */
body .bulk-toolbar {
    padding: 2px 0;
    margin-bottom: 6px;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 1px 0 var(--h-line);
}
body .bulk-select-all-wrap {
    gap: 8px;
    font-size: 13px;
    color: var(--h-muted);
}
body .bulk-select-all-wrap:hover { color: var(--h-text); }
body .case-sort-trigger {
    height: var(--hl-ctl-sm);
    padding: 0 6px 0 8px;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}
body .case-sort-trigger > span { max-width: 64px; }
body .case-sort-trigger svg { color: var(--h-muted); }

/* Barra de tanda (con selección) */
body .bulk-toolbar.has-selection {
    padding: 6px 8px;
    background: var(--h-paper);
    border: 0;
    border-radius: var(--hl-r);
    box-shadow: var(--h-shadow-pop);
}
body .bulk-count-chip {
    height: 20px;
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--hl-r-tag);
    background: var(--h-ink);
    color: var(--h-on-ink);
    font-family: var(--f-label);
    font-size: 11px;
    font-weight: 600;
}
body .bulk-clear { width: var(--hl-ctl-sm); height: var(--hl-ctl-sm); padding: 0; color: var(--h-muted); }
body .bulk-actions { gap: 4px; }
body .bulk-estado-trigger {
    height: var(--hl-ctl-sm);
    padding: 0 9px;
    gap: 5px;
    border-radius: var(--hl-r-sm);
    font-size: 12.5px;
    font-weight: 700;
}
body .bulk-btn { height: var(--hl-ctl-sm); padding: 0 9px; font-size: 12.5px; }
body .bulk-btn-icon { width: var(--hl-ctl-sm); padding: 0; }
body .bulk-btn-merge { color: var(--h-text); }
body .bulk-btn-discard:hover,
body .bulk-btn-danger:hover {
    color: var(--h-late-fg);
    border-color: color-mix(in srgb, var(--h-late-fg) 45%, transparent);
    background: var(--h-late-bg);
}
body .bulk-btn-danger { color: var(--h-error); border-color: color-mix(in srgb, var(--h-error) 45%, transparent); }
body .bulk-divider { background: var(--h-ctl-line); }

/* Tarjetas de caso: filas sin caja; la abierta = papel + anillo naranja */
body .case-list { gap: 3px; margin: 0 -6px; }
body .case-card {
    padding: 9px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--hl-r);
    box-shadow: none;
}
body .case-card:hover { background: var(--h-hover); }
body .case-card:active { background: var(--hl-press); }
body .case-card.bulk-selected { background: var(--h-sel); box-shadow: none; }
body .case-card.selected,
body .case-card.selected.bulk-selected {
    background: var(--h-paper);
    box-shadow: inset 0 0 0 1.5px var(--h-accent);
}
body .case-card.htmx-request {
    border-left: 0;
    background: var(--h-hover);
    box-shadow: inset 3px 0 0 var(--h-muted);
}
body .case-card-loading { color: var(--h-muted); font-size: 11.5px; }
body .case-card-header {
    gap: 8px;
    margin-bottom: 3px;
    min-height: 20px;
}
body .case-card-sender {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--h-text);
}
body .case-card-unread-dot {
    margin: 0 -2px 0 0;
    color: var(--h-text);
    font-size: 8px;
}
body .case-card-subject {
    gap: 8px;
    padding-left: 23px;
    font-size: 13px;
    line-height: 19px;
    color: var(--h-muted);
}
body .case-card.unread .case-card-subject { color: var(--h-muted); }

/* Edad (D-138): mismo TAG, rampa conservada: 0 = solo cifra, 1 = contorno,
   2 = relleno neutro, tarde = rojo suave */
body .case-card-age {
    height: 19px;
    min-width: 0;
    padding: 0 6px;
    border-radius: var(--hl-r-tag);
    font-family: var(--f-label);
    font-size: 10px;
    line-height: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: none;
    color: var(--h-muted);
    background: transparent;
    box-shadow: none;
}
body .case-card-age--0 { padding: 0 2px; }
body .case-card-age--1 { color: var(--h-age-fg); background: var(--h-paper); box-shadow: inset 0 0 0 1px var(--h-ctl-line); }
body .case-card-age--2 { color: var(--h-age-fg); background: var(--h-age-bg); }
body .case-card-age--late { color: var(--h-late-fg); background: var(--h-late-bg); font-weight: 600; }

/* Marca de seguimiento en la tarjeta (hex de styles.css → tokens) */
body .case-card-seg { font-size: 11.5px; gap: 4px; }
body .case-card-seg-dot { width: 6px; height: 6px; }
body .case-card-seg--vencidos { color: var(--h-late-fg); }
body .case-card-seg--vencidos .case-card-seg-dot { background: var(--h-badge); }
body .case-card-seg--semana { color: var(--h-cli-fg); }
body .case-card-seg--semana .case-card-seg-dot { background: var(--h-cli-dot); }
body .case-card-seg--adelante { color: var(--h-muted); }
body .case-card-seg--adelante .case-card-seg-dot { background: var(--h-ctl-line); }

/* Chips de la tarjeta (duplicado / Amphora ha respondido) */
body .case-card-dup,
body .case-card-amphora-reply {
    margin-left: 23px;
    border-radius: var(--hl-r-tag);
    padding: 1px 6px 1px 5px;
    font-size: 11.5px;
}
body .case-card-dup { background: var(--h-new-bg); color: var(--h-new-fg); }
body .case-card-amphora-reply { background: var(--h-amph-bg); color: var(--h-amph-fg); }
body .case-list:empty::before { color: var(--h-muted); }

/* ── 7. Columna 4 · secciones separadas por línea fina, sin cajas ──────── */
body .case-notas-block,
body .case-order-block,
body .case-amphora-block,
body .case-amphora-ticket {
    margin: 0;
    padding: 16px 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--h-line);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    font-size: 13px;
    line-height: 19px;
    color: var(--h-text);
}
body .cases-col-checklist > :last-child { border-bottom: 0; }

/* Títulos de bloque: Poppins 700 15 px */
body .case-order-number,
body .case-amphora-title,
body .case-amphora-ticket-title {
    font-family: var(--f-label);
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--h-text);
}
body .case-order-icon,
body .case-amphora-icon,
body .case-notas-icon { color: var(--h-muted); }

/* Notas */
body .case-notas-block { display: flex; flex-direction: column; gap: 10px; }
body .case-notas-header {
    padding: 0;
    gap: 6px;
    background: transparent;
    border: 0;
}
body .case-notas-icon svg { width: 13px; height: 13px; }
body .case-notas-progress { font-size: 12px; color: var(--h-muted); }
body .case-notas-stream { padding: 0; gap: 0; max-height: 190px; }
body .case-nota { padding: 6px 0; border-bottom: 1px solid var(--h-line); }
body .case-nota-lead { font-size: 12px; color: var(--h-muted); }
body .case-nota-who { color: var(--h-text); }
body .case-nota-who--jorge { color: var(--h-new-fg); }
body .case-nota-who--nico { color: var(--h-curso-fg); }
body .case-nota-body { color: var(--h-text); font-size: 13px; line-height: 19px; }
body .case-nota-checkbox { color: var(--h-text); }
body .case-nota-delete-btn { color: var(--h-muted); }
body .case-nota-delete-btn:hover { color: var(--h-error); }
body .note-mention { color: var(--h-text); background: var(--h-sel); }
/* el formulario entero es el campo: input sin borde + 2 botones dentro */
body .case-notas-add {
    height: var(--hl-ctl);
    gap: 4px;
    padding: 0 3px 0 10px;
    background: var(--h-field);
    border: 1px solid var(--h-ctl-line);
    border-radius: var(--hl-r);
}
body .case-notas-add:hover { border-color: var(--h-muted); }
body .case-notas-add:focus-within { border-color: var(--h-focus); box-shadow: var(--hl-ring); }
body .case-notas-add .case-notas-add-input,
body .case-notas-add .case-notas-add-input:hover,
body .case-notas-add .case-notas-add-input:focus {
    height: 30px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-size: 13px;
}
body .case-notas-task-toggle,
body .case-notas-send {
    width: var(--hl-ctl-sm);
    height: var(--hl-ctl-sm);
    border-radius: var(--hl-r-sm);
}
body .case-notas-task-toggle { color: var(--h-muted); position: relative; }
body .case-notas-task-toggle input[type="checkbox"] {
    position: absolute; width: 0; height: 0; opacity: 0; border: 0; pointer-events: none;
}
body .case-notas-task-toggle svg,
body .case-notas-send svg { width: 14px; height: 14px; }
body .case-notas-task-toggle:has(input:checked) { background: var(--h-ink); color: var(--h-on-ink); border-color: var(--h-ink); }
body .case-notas-send {
    border: 0;
    background: var(--h-ink);
    color: var(--h-on-ink);
}
body .case-notas-send:hover { background: color-mix(in srgb, var(--h-ink) 86%, var(--h-main)); color: var(--h-on-ink); }
body .case-notas-trash { border-top: 0; padding: 0; }
body .case-notas-trash > summary { font-size: 12px; color: var(--h-muted); }

/* Pedido */
body .case-order-header {
    gap: 6px;
    row-gap: 9px;
    padding: 0;
    margin-bottom: 9px;
    border: 0;
}
body .case-order-shopify-link,
body .case-amphora-order-link { color: var(--h-muted); border-radius: 4px; }
body .case-order-shopify-link:hover,
body .case-amphora-order-link:hover { color: var(--h-text); }
body .case-order-actions { gap: 6px; }
body .case-order-actions > .case-order-invoice-btn,
body .case-order-actions > .case-order-refund-btn {
    height: var(--hl-ctl-sm);
    padding: 0 6px;
    gap: 4px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
}
body .case-order-invoice-btn svg,
body .case-order-refund-btn svg { color: var(--h-muted); }
body .case-order-refund-btn[title^="Cancelar"]:hover { color: var(--h-late-fg); border-color: color-mix(in srgb, var(--h-late-fg) 45%, transparent); }
body .case-order-refund-btn[title^="Cancelar"]:hover svg { color: var(--h-late-fg); }
body .case-order-meta { gap: 8px; margin-bottom: 6px; font-size: 13px; color: var(--h-muted); }
body .case-order-date { color: var(--h-text); }
body .financial-paid { background: var(--h-curso-bg); color: var(--h-curso-fg); }
body .case-order-financial:not(.financial-paid) { background: var(--h-ai); color: var(--h-text); }
body .case-order-customer {
    margin-bottom: 9px;
    padding: 0;
    border: 0;
    color: var(--h-text);
}
body .case-order-items { gap: 4px; margin-bottom: 9px; }
body .case-order-item {
    padding: 7px 10px;
    border-radius: 7px;
    background: var(--h-ai);
    font-size: 13px;
    gap: 8px;
}
body .case-order-item-icon { color: var(--h-muted); }
body .case-order-item-text,
body .case-order-item-qty,
body .case-order-item-price { color: var(--h-text); }
body .case-order-totals {
    padding: 0;
    border: 0;
    gap: 4px 8px;
    font-size: 13px;
}
body .case-order-totals dt { color: var(--h-muted); }
body .case-order-totals dd { color: var(--h-text); }
body .case-order-totals .case-order-approx { color: var(--h-muted); }
body .case-order-total-label,
body .case-order-total-value {
    margin-top: 2px;
    padding-top: 0;
    border: 0;
    font-family: var(--f-label);
    font-weight: 600;
    color: var(--h-text);
    align-self: baseline;
}
body .case-order-total-label { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
body .case-order-total-value { font-size: 15px; }
body .case-order-refunded-value { color: var(--h-cli-fg); }
body .case-order-link { margin-top: 9px; font-size: 12px; color: var(--h-muted); }
body .case-order-link-linked { gap: 6px; justify-content: space-between; }
body .case-order-link-linked .case-order-link-actions { gap: 2px; }
body .case-order-link-linked .case-order-link-btn,
body .case-amphora-link-control-btn {
    height: 24px;
    padding: 0 7px;
    font-size: 12.5px;
    font-weight: 500;
}
/* vacío: texto apagado, sin caja discontinua */
body .case-order-block--empty,
body .case-amphora-block--empty {
    text-align: left;
    font-style: normal;
    color: var(--h-muted);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--h-line);
}
body .case-order-block--empty > p,
body .case-amphora-block--empty > p { margin: 0; font-size: 13px; color: var(--h-muted); }
body .case-order-link-form { gap: 6px; flex-wrap: nowrap; }
body .case-order-link-input,
body .case-order-link-form .case-order-link-input {
    flex: 1 1 0;
    width: 0;
    height: var(--hl-ctl-md);
    min-height: var(--hl-ctl-md);
    padding: 0 9px;
    font-size: 13px;
}
body .case-order-link-form .case-order-link-btn {
    height: var(--hl-ctl-md);
    padding: 0 10px;
    border-radius: var(--hl-r);
    font-size: 12.5px;
    white-space: nowrap;
}
body .case-order-link-suggest,
body .case-order-link-mismatch { border-radius: var(--hl-r); }

/* Amphora */
body .case-amphora-header {
    gap: 5px;
    row-gap: 6px;
    padding: 0;
    margin-bottom: 9px;
    border: 0;
}
body .case-amphora-status { margin-left: 0; }
body .case-amphora-status:not([class*="status--"]) { background: var(--h-ai); color: var(--h-text); }
body .case-amphora-status--transit { background: var(--h-amph-bg); color: var(--h-amph-fg); }
body .case-amphora-status--delivered { background: var(--h-curso-bg); color: var(--h-curso-fg); }
body .case-amphora-status--hold { background: var(--h-cli-bg); color: var(--h-cli-fg); }
body .case-amphora-status--exception { background: var(--h-late-bg); color: var(--h-late-fg); }
body .case-amphora-status--cancelled { background: var(--h-cerr-bg); color: var(--h-cerr-fg); }
/* tránsito = dato (días), forma de tag de edad */
body .case-amphora-transit {
    height: 19px;
    padding: 0 6px;
    gap: 3px;
    border: 0;
    border-radius: var(--hl-r-tag);
    font-family: var(--f-label);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 12px;
    background: var(--h-ai);
    color: var(--h-text);
}
body .case-amphora-transit svg { width: 10px; height: 10px; }
body .case-amphora-transit--warn { background: var(--h-cli-bg); color: var(--h-cli-fg); }
body .case-amphora-transit--bad { background: var(--h-late-bg); color: var(--h-late-fg); }
body .case-amphora-actions { margin-bottom: 9px; }
body .case-amphora-actions-row { gap: 6px; }
body .case-amphora-action-btn {
    height: var(--hl-ctl-sm);
    padding: 0 9px;
    border-radius: 7px;
    font-size: 12.5px;
}
body .case-amphora-actions-state,
body .case-amphora-actions-loading,
body .case-amphora-dup-unavailable { font-size: 12.5px; color: var(--h-muted); gap: 4px; }
body .case-amphora-actions-retry {
    height: 24px;
    padding: 0 7px;
    font-size: 12.5px;
    font-weight: 600;
}
body .case-amphora-duplicates { gap: 4px; margin-bottom: 9px; }
body .case-amphora-duplicates-label { color: var(--h-muted); font-size: 11px; }
body .case-amphora-duplicate-row {
    background: var(--h-paper);
    border: 1px solid var(--h-line);
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--h-text);
}
body a.case-amphora-duplicate-row:hover { border-color: var(--h-muted); }
body .case-amphora-duplicate-ticket-btn { height: var(--hl-ctl-sm); padding: 0 8px; font-size: 12px; }
body .case-amphora-duplicate-ticket-btn--open { color: var(--h-new-fg); }
body .case-amphora-duplicate-ticket-btn--closed { color: var(--h-muted); }
body .case-amphora-carrier { gap: 6px; margin-bottom: 9px; font-size: 13px; }
body .case-amphora-carrier-name { color: var(--h-muted); font-weight: 500; }
body .case-amphora-tracking-link,
body .case-amphora-tracking-link:hover {
    color: var(--h-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2.5px;
    text-decoration-color: var(--h-ctl-line);
    border-radius: 3px;
}
body .case-amphora-tracking-link:hover { text-decoration-color: currentColor; }
body .case-amphora-address {
    margin-bottom: 9px;
    padding: 0;
    border: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--h-text);
}
body .case-amphora-weights,
body .case-amphora-lifecycle {
    margin: 0 0 9px;
    padding: 0;
    border: 0;
    gap: 4px 8px;
    font-size: 13px;
}
body .case-amphora-weights dt,
body .case-amphora-lifecycle dt { color: var(--h-muted); }
body .case-amphora-weights dd,
body .case-amphora-lifecycle dd { color: var(--h-text); }
body .case-amphora-sync {
    padding: 0;
    border: 0;
    font-style: normal;
    font-size: 12px;
    color: var(--h-muted);
}
body .case-amphora-link-control {
    gap: 2px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--h-muted);
}
body .case-amphora-link-control > span { margin-right: auto; }
body .case-amphora-block--pending { background: transparent; border: 0; border-bottom: 1px solid var(--h-line); }
body .case-amphora-live-id { color: var(--h-text); }

/* D-144: acción principal del bloque sin envío = primario tinta. Va después de
   la receta SECUNDARIO y con más especificidad para ganarle. */
body .case-amphora-action-btn.case-amphora-action-btn--primary {
    background: var(--h-ink);
    color: var(--h-on-ink);
    border-color: var(--h-ink);
    font-weight: 600;
}
body .case-amphora-action-btn.case-amphora-action-btn--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--h-ink) 86%, var(--h-main));
    border-color: color-mix(in srgb, var(--h-ink) 86%, var(--h-main));
    color: var(--h-on-ink);
}

/* Ticket Amphora */
body .case-amphora-ticket { font-size: 13px; }
body .case-amphora-ticket--collapsed .case-amphora-ticket-title {
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--h-muted);
}
body .case-amphora-ticket--collapsed[open] .case-amphora-ticket-title {
    font-family: var(--f-label);
    font-size: 15px;
    font-weight: 600;
    color: var(--h-text);
}
body .case-amphora-ticket-open-link { font-size: 13px; font-weight: 600; color: var(--h-text); }
body .case-amphora-ticket--collapsed:not([open]) > .case-amphora-ticket-header { margin-bottom: 0; }
body .case-amphora-ticket-header { gap: 6px; margin-bottom: 9px; }
body .case-amphora-ticket-badge { margin-left: auto; }
body .case-amphora-ticket-badge--open { background: var(--h-new-bg); color: var(--h-new-fg); }
body .case-amphora-ticket-badge--closed { background: var(--h-cerr-bg); color: var(--h-cerr-fg); }
body .case-amphora-ticket-id {
    margin: 0 0 9px;
    font-family: var(--f-body);
    font-size: 12px;
    color: var(--h-muted);
}
body .case-amphora-thread { gap: 8px; margin: 0 0 12px; }
body .case-amphora-msg {
    max-width: 94%;
    padding: 8px 10px 9px;
    border: 0;
    border-radius: var(--hl-r-box);
    font-size: 13px;
    line-height: 19px;
}
body .case-amphora-msg--us {
    background: var(--h-ai);
    border-bottom-right-radius: 4px;
}
body .case-amphora-msg--amphora {
    background: var(--h-paper);
    box-shadow: inset 0 0 0 1px var(--h-line);
    border-bottom-left-radius: 4px;
}
body .case-amphora-msg-meta { gap: 8px; margin-bottom: 3px; }
body .case-amphora-msg-author { font-size: 12px; font-weight: 700; color: var(--h-text); }
body .case-amphora-msg-author svg { color: var(--h-amph-dot); }
body .case-amphora-msg-org,
body .case-amphora-msg-time { color: var(--h-muted); }
body .case-amphora-msg-time { font-size: 11.5px; }
body .case-amphora-msg-body { color: var(--h-text); }
body .case-amphora-msg-file { color: var(--h-muted); }
body .case-amphora-msg-file-link { color: var(--h-new-fg); }
body .case-amphora-ticket-form { gap: 8px; }
body .case-amphora-ticket-select {
    height: var(--hl-ctl);
    min-height: var(--hl-ctl);
    font-size: 13px;
}
body .case-amphora-ticket-textarea {
    min-height: 76px;
    font-size: 13px;
    border-radius: var(--hl-r);
}
body .case-amphora-ticket-actionrow { gap: 6px; }
body .case-amphora-ticket-attach-btn {
    width: var(--hl-ctl-md);
    height: var(--hl-ctl-md);
    padding: 0;
    border-radius: var(--hl-r);
    color: var(--h-text);
}
body .case-amphora-ticket-attach-btn.has-files { border-color: var(--h-text); }
body .case-amphora-ticket-attach-count { color: var(--h-text); }
body .case-amphora-ticket-submit {
    height: var(--hl-ctl-md);
    padding: 0 14px;
    border-radius: var(--hl-r);
    font-size: 13px;
    font-weight: 700;
}
body .case-amphora-ticket-close-btn {
    width: var(--hl-ctl-md);
    height: var(--hl-ctl-md);
    padding: 0;
    color: var(--h-error);
}
body .case-amphora-ticket-close-btn:hover { background: var(--h-late-bg); color: var(--h-late-fg); }
body .case-amphora-ticket-file { font-size: 12.5px; }
body .case-amphora-ticket-file-remove { color: var(--h-muted); }
body .case-amphora-ticket-file-remove:hover { color: var(--h-error); }
body .case-amphora-ticket-error { color: var(--h-error); font-size: 12.5px; }
body .case-amphora-ticket-disabled { color: var(--h-muted); font-size: 12.5px; }

/* ==========================================================================
   Híbrido D/E — capa DETALLE (interior de .cases-col-detail).
   Solo piel: no mueve, no reordena, no oculta. Colores SOLO var(--h-*).
   Va DESPUÉS de tokens-*.css y layer-lateral.css.
   ========================================================================== */
:root {
    --hd-dur: 140ms;
    --hd-ease: cubic-bezier(.2, .7, .3, 1);
    --hd-label: 190px;           /* columna de rótulo de las secciones */
    --hd-eyebrow-font: var(--f-body);
}

/* ---------- Ritmo general ---------- */
body .cases-col-detail .case-detail {
    gap: 12px;
    padding-top: 18px;
    color: var(--h-text);
    font-family: var(--f-body);
}
body .cases-col-detail .case-dup-wrap:not(:has(*)),
body .cases-col-detail .case-client-wrap:not(:has(*)) { display: none; }

/* Rótulo eyebrow compartido (Resumen IA, secciones, Historial) */
body .cases-col-detail .case-summary-label,
body .cases-col-detail .case-detail-section-title,
body .cases-col-detail .case-detail-section > details:not(.responder-collapse) > summary,
body .cases-col-detail .responder-collapse[open] > .responder-collapse-summary {
    font-family: var(--hd-eyebrow-font);
    font-size: 11.5px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--h-text);
}

/* ==========================================================================
   1. CABECERA DEL CASO
   ========================================================================== */
body .cases-col-detail .case-detail-header {
    border-bottom: 1px solid var(--h-line);
    padding-bottom: 10px;
}
body .cases-col-detail .case-detail-header-top {
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
body .cases-col-detail .case-detail-subject,
body .cases-col-detail .case-title-input {
    font-family: var(--f-label);
    font-size: 21px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -.1px;
    color: var(--h-text);
}
body .cases-col-detail .case-detail-subject {
    padding: 0 4px;
    margin-left: -4px;
    border-radius: 6px;
    transition: background var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .case-title-edit:not(.editing) > .case-detail-subject:hover { background: var(--h-hover); }
body .cases-col-detail .case-title-edit.editing > .case-title-form { background: var(--h-main); }
body .cases-col-detail .case-title-input {
    background: var(--h-field);
    border: 1px solid var(--h-ctl-line);
    border-radius: 8px;
}
body .cases-col-detail .case-title-input:focus { outline: 2px solid var(--h-focus); outline-offset: 1px; }
body .cases-col-detail .case-title-save {
    height: 30px; padding: 0 12px;
    border: 0; border-radius: 8px;
    background: var(--h-ink); color: var(--h-on-ink);
    font-family: var(--f-label); font-size: 12.5px; font-weight: 700;
    cursor: pointer;
}

/* Lápiz: fantasma */
body .cases-col-detail .case-title-pencil {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--h-muted);
    cursor: pointer;
    transition: background var(--hd-dur) var(--hd-ease), color var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .case-title-pencil:hover { background: var(--h-hover); color: var(--h-text); }
body .cases-col-detail .case-title-pencil:active { background: var(--h-track); }

/* Chip de estado → tag Poppins */
body .cases-col-detail .case-detail-header .case-badge {
    display: inline-flex; align-items: center;
    height: 24px; padding: 0 9px;
    border: 0; border-radius: 3px;
    font-family: var(--f-label); font-size: 10px; line-height: 12px;
    font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; white-space: nowrap;
    flex-shrink: 0;
}
body .cases-col-detail .case-badge-nuevo { background: var(--h-new-bg); color: var(--h-new-fg); }
body .cases-col-detail .case-badge-en_curso { background: var(--h-curso-bg); color: var(--h-curso-fg); }
body .cases-col-detail .case-badge-esperando_cliente { background: var(--h-cli-bg); color: var(--h-cli-fg); }
body .cases-col-detail .case-badge-esperando_amphora { background: var(--h-amph-bg); color: var(--h-amph-fg); }
body .cases-col-detail .case-badge-collab { background: var(--h-collab-bg); color: var(--h-collab-fg); }
body .cases-col-detail .case-badge-cerrado { background: var(--h-cerr-bg); color: var(--h-cerr-fg); }

/* Sin asignar / Seguimiento: botón secundario 30 px */
body .cases-col-detail .case-asignacion-chip > summary,
body .cases-col-detail .case-seguimiento-chip-summary {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 10px;
    border: 1px solid var(--h-ctl-line);
    border-radius: 8px;
    background: var(--h-field);
    color: var(--h-text);
    font-family: var(--f-body); font-size: 13px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    transition: background var(--hd-dur) var(--hd-ease), border-color var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .case-asignacion-chip > summary:hover,
body .cases-col-detail .case-seguimiento-chip-summary:hover { background: var(--h-side); border-color: var(--h-muted); }
body .cases-col-detail .case-asignacion-chip > summary:active,
body .cases-col-detail .case-seguimiento-chip-summary:active { background: var(--h-track); }
body .cases-col-detail .case-asignacion-chip[open] > summary,
body .cases-col-detail .case-seguimiento-chip[open] > .case-seguimiento-chip-summary { background: var(--h-track); border-color: var(--h-muted); }
body .cases-col-detail .case-asignacion-chip > summary svg,
body .cases-col-detail .case-seguimiento-chip-summary svg { color: var(--h-muted); }
body .cases-col-detail .case-seguimiento-chip-date { color: var(--h-text); }
body .cases-col-detail .case-seguimiento-chip-summary.has-seg { border-color: var(--h-muted); }
body .cases-col-detail .case-seguimiento-chip-summary.is-vencido {
    background: var(--h-late-bg); border-color: var(--h-error); color: var(--h-late-fg);
}
body .cases-col-detail .case-seguimiento-chip-summary.is-vencido svg,
body .cases-col-detail .case-seguimiento-chip-summary.is-vencido .case-seguimiento-chip-date { color: var(--h-late-fg); }

/* Desplegables de cabecera: papel flotante */
body .cases-col-detail .case-asignacion-form,
body .cases-col-detail .case-seguimiento-pop {
    border: 0; border-radius: 10px;
    background: var(--h-paper);
    color: var(--h-text);
    box-shadow: var(--h-shadow-pop);
}
body .cases-col-detail .case-asignacion-option {
    border-radius: 6px; color: var(--h-text); font-size: 13px;
    transition: background var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .case-asignacion-option:hover { background: var(--h-hover); }
body .cases-col-detail .case-asignacion-option.active {
    background: var(--h-sel); color: var(--h-text); font-weight: 700;
}
body .cases-col-detail .case-seguimiento-input,
body .cases-col-detail .seg-date-face {
    background: var(--h-field); color: var(--h-text);
    border: 1px solid var(--h-ctl-line); border-radius: 8px;
}
body .cases-col-detail .seg-date-label.is-placeholder { color: var(--h-muted); }
body .cases-col-detail .seg-prio-face {
    background: var(--h-field); color: var(--h-text);
    border: 1px solid var(--h-ctl-line); border-radius: 7px;
}
body .cases-col-detail .seg-prio-pill--none input:checked + .seg-prio-face { background: var(--h-track); border-color: var(--h-muted); color: var(--h-text); }
body .cases-col-detail .seg-prio-pill--alta input:checked + .seg-prio-face { background: var(--h-late-bg); border-color: var(--h-badge); color: var(--h-late-fg); }
body .cases-col-detail .seg-prio-pill--media input:checked + .seg-prio-face { background: var(--h-cli-bg); border-color: var(--h-cli-dot); color: var(--h-cli-fg); }
body .cases-col-detail .seg-prio-pill--baja input:checked + .seg-prio-face { background: var(--h-curso-bg); border-color: var(--h-curso-dot); color: var(--h-curso-fg); }
body .cases-col-detail .seg-prio-pill input:focus-visible + .seg-prio-face { outline: 2px solid var(--h-focus); }
body .cases-col-detail .seg-dot--alta { background: var(--h-badge); }
body .cases-col-detail .seg-dot--media { background: var(--h-cli-dot); }
body .cases-col-detail .seg-dot--baja { background: var(--h-curso-dot); }
body .cases-col-detail .case-seguimiento-save-btn {
    border: 0; border-radius: 8px;
    background: var(--h-ink); color: var(--h-on-ink);
    font-family: var(--f-label); font-weight: 700;
}
body .cases-col-detail .case-seguimiento-done-btn { border-color: var(--h-curso-dot); color: var(--h-curso-fg); background: var(--h-field); }
body .cases-col-detail .case-seguimiento-del-btn { border-color: var(--h-ctl-line); color: var(--h-error); background: var(--h-field); }

/* Remitente · email · fecha */
body .cases-col-detail .case-detail-header-meta {
    gap: 5px; align-items: baseline;
    font-size: 13px; line-height: 20px;
    color: var(--h-muted);
}
body .cases-col-detail .case-detail-header-meta > span:first-child { color: var(--h-text); font-weight: 700; }
body .cases-col-detail .case-detail-header-meta .muted { color: var(--h-muted); }
body .cases-col-detail .case-detail-amphora-link { color: var(--h-text); text-decoration: underline; text-underline-offset: 2px; }

/* Banner de duplicado (si aparece) */
body .cases-col-detail .case-dup-banner {
    border: 1px solid var(--h-line); border-left: 3px solid var(--h-new-dot);
    border-radius: 10px; background: var(--h-paper); color: var(--h-text);
}
body .cases-col-detail .case-dup-banner--confirm { border-left-color: var(--h-curso-dot); background: var(--h-curso-bg); }
body .cases-col-detail .case-dup-banner--conflict { border-left-color: var(--h-cli-dot); background: var(--h-cli-bg); }

/* ==========================================================================
   2. ESTADOS → control segmentado + Descartar fantasma
   ========================================================================== */
body .cases-col-detail .case-detail-section-actions {
    border-top: 0; padding-top: 0;
    align-items: center; gap: 10px;
}
body .cases-col-detail .case-detail-estado-form {
    gap: 2px; padding: 3px;
    border-radius: 10px;
    background: var(--h-track);
}
body .cases-col-detail .case-detail-section-actions .case-detail-estado-form button {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--h-text);
    font-family: var(--f-body); font-size: 13px; font-weight: 500;
    opacity: 1; cursor: pointer;
    transition: background var(--hd-dur) var(--hd-ease), box-shadow var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .case-detail-section-actions .case-detail-estado-form button:hover:not(:disabled) { background: var(--h-hover); }
body .cases-col-detail .case-detail-section-actions .case-detail-estado-form button:active:not(:disabled) { background: var(--h-seg-on); }
body .cases-col-detail .case-detail-section-actions .case-detail-estado-form button:disabled {
    background: var(--h-seg-on);
    color: var(--h-text);
    font-weight: 700;
    cursor: default;
    box-shadow: inset 0 0 0 1.5px var(--h-accent);
}
body .cases-col-detail .case-detail-estado-form button:disabled::before {
    content: ""; width: 7px; height: 7px; border-radius: 4px; flex-shrink: 0;
    background: var(--h-cerr-dot);
}
body .cases-col-detail .case-detail-estado-form .estado-btn-nuevo:disabled::before { background: var(--h-new-dot); }
body .cases-col-detail .case-detail-estado-form .estado-btn-en_curso:disabled::before { background: var(--h-curso-dot); }
body .cases-col-detail .case-detail-estado-form .estado-btn-esperando_cliente:disabled::before { background: var(--h-cli-dot); }
body .cases-col-detail .case-detail-estado-form .estado-btn-esperando_amphora:disabled::before { background: var(--h-amph-dot); }
body .cases-col-detail .case-detail-estado-form .estado-btn-collab:disabled::before { background: var(--h-collab-dot); }
body .cases-col-detail .case-detail-estado-form .estado-btn-cerrado:disabled::before { background: var(--h-cerr-dot); }

body .cases-col-detail .nocs-descartar { margin-top: 0; }
body .cases-col-detail .case-detail-section-actions .nocs-descartar-trigger {
    height: 30px; margin: 0; padding: 0 10px;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--h-muted);
    font-family: var(--f-body); font-size: 13px; font-weight: 500;
    opacity: 1; cursor: pointer;
    transition: background var(--hd-dur) var(--hd-ease), color var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .case-detail-section-actions .nocs-descartar-trigger:hover { background: var(--h-late-bg); color: var(--h-late-fg); }
body .cases-col-detail .case-detail-section-actions .nocs-descartar-trigger:active { background: var(--h-late-bg); color: var(--h-error); }

/* Confirmación de Descartar */
body .cases-col-detail .nocs-confirm {
    padding: 14px 16px;
    border: 1px solid var(--h-line); border-radius: 10px;
    background: var(--h-paper);
    box-shadow: var(--h-shadow-pop);
}
body .cases-col-detail .nocs-confirm-text { color: var(--h-text); font-size: 13.5px; }
body .cases-col-detail .nocs-rule-opt { border-top: 1px solid var(--h-line); }
body .cases-col-detail .nocs-chk { color: var(--h-text); font-size: 13px; }
body .cases-col-detail .nocs-chk b { color: var(--h-text); }
body .cases-col-detail .nocs-chk .nocs-box { border: 1.5px solid var(--h-ctl-line); background: var(--h-field); border-radius: 4px; }
body .cases-col-detail .nocs-chk:hover .nocs-box { border-color: var(--h-muted); }
body .cases-col-detail .nocs-chk .nocs-box svg { color: var(--h-on-ink); }
body .cases-col-detail .nocs-chk.nocs-on .nocs-box { background: var(--h-ink); border-color: var(--h-ink); }
body .cases-col-detail .nocs-chk:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 2px; border-radius: 4px; }
body .cases-col-detail .nocs-seg { background: var(--h-track); border: 0; border-radius: 8px; }
body .cases-col-detail .nocs-seg-btn { color: var(--h-text); border-radius: 6px; }
body .cases-col-detail .nocs-seg-btn.nocs-on { background: var(--h-seg-on); box-shadow: inset 0 0 0 1.5px var(--h-accent); }
body .cases-col-detail .nocs-scope-row .nocs-lbl { color: var(--h-muted); }
body .cases-col-detail .case-detail-section-actions .nocs-confirm button {
    height: 30px; padding: 0 14px;
    border-radius: 8px; opacity: 1; cursor: pointer;
    font-size: 13px;
}
body .cases-col-detail .case-detail-section-actions .nocs-confirm .nocs-btn-primary {
    border: 0; background: var(--h-ink); color: var(--h-on-ink);
    font-family: var(--f-label); font-weight: 700;
}
body .cases-col-detail .case-detail-section-actions .nocs-confirm .nocs-btn-primary:hover { background: var(--h-ink); box-shadow: 0 0 0 3px var(--h-track); }
body .cases-col-detail .case-detail-section-actions .nocs-confirm .nocs-btn-ghost {
    border: 0; background: transparent; color: var(--h-muted); font-weight: 500;
}
body .cases-col-detail .case-detail-section-actions .nocs-confirm .nocs-btn-ghost:hover { background: var(--h-hover); color: var(--h-text); }

/* ==========================================================================
   3. RESUMEN IA (también fijado arriba)
   ========================================================================== */
body .cases-col-detail .col3-pinned {
    background: var(--h-main);
    margin: 0 -10px;
    padding: 2px 10px;
}
body .cases-col-detail .col3-pinned::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
    background: linear-gradient(var(--h-main) 35%, transparent);
    pointer-events: none;
}
body .cases-col-detail .case-summary-block {
    margin-bottom: 0;
    padding: 9px 16px 10px;
    border: 0; border-radius: 10px;
    background: var(--h-ai);
    box-shadow: none;
    color: var(--h-text);
    font-size: 13px; line-height: 20px;   /* zona fijada: cada línea extra resta lectura */
}
body .cases-col-detail .case-summary-block--muted { background: var(--h-side); }
body .cases-col-detail .case-summary-header { gap: 8px; margin-bottom: 3px; }
body .cases-col-detail .case-summary-icon { color: var(--h-text); }
body .cases-col-detail .case-summary-icon svg { width: 14px; height: 14px; }
body .cases-col-detail .case-summary-date { color: var(--h-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
body .cases-col-detail .case-summary-body { color: var(--h-text); }
body .cases-col-detail .case-summary-body strong { font-weight: 700; }
body .cases-col-detail .case-summary-list li::marker { color: var(--h-muted); }
body .cases-col-detail .case-summary-para { margin-bottom: 4px; }
body .cases-col-detail .case-summary-placeholder,
body .cases-col-detail .case-summary-loading { color: var(--h-muted); }

/* ==========================================================================
   4. ÚLTIMO MENSAJE + Traducir
   ========================================================================== */
body .cases-col-detail .case-detail-section { border-top: 0; padding-top: 0; }
body .cases-col-detail .case-detail-msg-head {
    align-items: center; gap: 8px;
    min-height: 26px; margin-bottom: 8px;
}
body .cases-col-detail .case-detail-msg-author {
    margin: 0;
    font-size: 13px; font-weight: 700; color: var(--h-text);
}
body .cases-col-detail .case-detail-msg-when { color: var(--h-muted); font-weight: 400; }
body .cases-col-detail .case-detail-gmail-link { color: var(--h-muted); border-radius: 4px; transition: color var(--hd-dur) var(--hd-ease); }
body .cases-col-detail .case-detail-gmail-link:hover { color: var(--h-text); }

/* Botón pequeño secundario (26 px): Traducir, Ver en inglés, traducir del historial */
body .cases-col-detail .case-detail-translate-link,
body .cases-col-detail .msg-translate-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 9px;
    border: 1px solid var(--h-ctl-line); border-radius: 7px;
    background: var(--h-field);
    color: var(--h-text);
    font-family: var(--f-body); font-size: 12.5px; font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--hd-dur) var(--hd-ease), border-color var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .case-detail-translate-link:not(:disabled):hover,
body .cases-col-detail .msg-translate-btn:not(:disabled):hover { background: var(--h-side); border-color: var(--h-muted); text-decoration: none; }
body .cases-col-detail .case-detail-translate-link:not(:disabled):active,
body .cases-col-detail .msg-translate-btn:not(:disabled):active { background: var(--h-track); }
body .cases-col-detail .msg-translate-btn svg { color: var(--h-muted); }
body .cases-col-detail .case-detail-translate-spinner,
body .cases-col-detail .msg-translate-spinner { color: var(--h-muted); }

/* El mensaje: papel con línea fina */
body .cases-col-detail .case-detail-email-body,
body .cases-col-detail .case-detail-email-body-html {
    margin-top: 0;
    padding: 16px 20px;
    border: 1px solid var(--h-line); border-radius: 10px;
    background: var(--h-paper);
    box-shadow: none;
    color: var(--h-text);
    font-size: 15px; line-height: 24px;
}
body .cases-col-detail .case-detail-email-body-html p { margin: 0 0 9px; }
body .cases-col-detail .case-detail-email-body-html p:last-child { margin-bottom: 0; }
body .cases-col-detail .case-detail-email-body-html a,
body .cases-col-detail .case-event-body a { color: var(--h-new-fg); }
body .cases-col-detail .case-detail-email-body-html blockquote,
body .cases-col-detail .case-event-body blockquote { border-left: 3px solid var(--h-line); color: var(--h-muted); }
body .cases-col-detail .case-msg-translation {
    color: var(--h-text);
}

/* ==========================================================================
   5. ESCRIBIR RESPUESTA
   ========================================================================== */
/* Cerrado: barra tinta 46 px */
body .cases-col-detail .responder-collapse:not([open]) > .responder-collapse-summary {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 46px; padding: 0 16px;
    border: 0; border-radius: 10px;
    background: var(--h-ink); color: var(--h-on-ink);
    box-shadow: none;
    font-family: var(--f-label); font-size: 13.5px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    transition: box-shadow var(--hd-dur) var(--hd-ease), transform var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .responder-collapse:not([open]) > .responder-collapse-summary:hover { background: var(--h-ink); box-shadow: 0 0 0 3px var(--h-track); }
body .cases-col-detail .responder-collapse:not([open]) > .responder-collapse-summary:active { transform: translateY(1px); }
body .cases-col-detail .responder-collapse:not([open]) > .responder-collapse-summary .responder-collapse-chevron { color: var(--h-on-ink); opacity: .7; }

/* Abierto: hoja de papel con cabecera eyebrow */
body .cases-col-detail .responder-collapse[open] {
    padding: 0 16px 14px;
    border: 1px solid var(--h-line); border-radius: 10px;
    background: var(--h-paper);
}
body .cases-col-detail .responder-collapse[open] > .responder-collapse-summary {
    display: flex; align-items: center; gap: 8px;
    height: 42px; margin: 0 -16px; padding: 0 16px;
    border: 0; border-bottom: 1px solid var(--h-line); border-radius: 10px 10px 0 0;
    background: transparent;
    transition: background var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .responder-collapse[open] > .responder-collapse-summary:hover { background: var(--h-hover); }
body .cases-col-detail .responder-collapse[open] .responder-collapse-icon,
body .cases-col-detail .responder-collapse[open] .responder-collapse-chevron { color: var(--h-muted); }

body .cases-col-detail .responder-form { gap: 0; }
/* Para / Asunto: filas tipo cabecera de email */
body .cases-col-detail .responder-field--inline {
    align-items: center; gap: 8px;
    min-height: 40px;
    border-bottom: 1px solid var(--h-line);
}
body .cases-col-detail .responder-field--inline > label {
    flex: 0 0 56px; text-align: left;
    font-size: 13px; color: var(--h-muted);
}
body .cases-col-detail .responder-field input[type="text"],
body .cases-col-detail .responder-field input[type="email"] {
    height: 32px; padding: 0 8px; margin-left: -8px;
    border: 0; border-radius: 6px;
    background: transparent; box-shadow: none;
    color: var(--h-text); font-family: var(--f-read); font-size: 14px;
    transition: background var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .responder-field input[type="text"]:hover,
body .cases-col-detail .responder-field input[type="email"]:hover { background: var(--h-hover); }
body .cases-col-detail .responder-field input[type="text"]:focus,
body .cases-col-detail .responder-field input[type="email"]:focus {
    outline: none; background: var(--h-field); box-shadow: var(--hl-ring, none);
}
body .cases-col-detail .responder-field .responder-to-choice { border-color: var(--h-ctl-line); background: var(--h-field); color: var(--h-text); }
body .cases-col-detail .responder-field .responder-to-choice.is-selected { border-color: var(--h-ink); background: var(--h-sel); }
body .cases-col-detail .responder-to-meta,
body .cases-col-detail .responder-to-notice { color: var(--h-muted); }
body .cases-col-detail .responder-warning { color: var(--h-cli-fg); }

body .cases-col-detail .responder-msg-labelrow { min-height: 40px; padding-top: 4px; }
body .cases-col-detail .responder-msg-labelrow > label { font-size: 13px; color: var(--h-muted); }
body .cases-col-detail .case-translate-btn--inline {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 9px;
    border: 1px solid var(--h-ctl-line); border-radius: 7px;
    background: var(--h-field); color: var(--h-text);
    font-size: 12.5px; font-weight: 500;
    transition: background var(--hd-dur) var(--hd-ease), border-color var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .case-translate-btn--inline:not(:disabled):hover { background: var(--h-side); border-color: var(--h-muted); }
body .cases-col-detail .case-translate-btn--inline svg { color: var(--h-muted); }
body .cases-col-detail .case-translate-spinner { color: var(--h-muted); }
body .cases-col-detail .case-translate-result { color: var(--h-text); }

/* Quill */
body .cases-col-detail .responder-form .ql-toolbar.ql-snow {
    padding: 4px 6px;
    border: 1px solid var(--h-ctl-line); border-bottom-color: var(--h-line);
    border-radius: 8px 8px 0 0;
    background: var(--h-side);
    font-family: var(--f-body);
}
body .cases-col-detail .responder-form .ql-toolbar.ql-snow .ql-formats { margin-right: 6px; }
body .cases-col-detail .responder-form .ql-toolbar.ql-snow .ql-formats + .ql-formats { padding-left: 6px; border-left: 1px solid var(--h-line); }
body .cases-col-detail .responder-form .ql-toolbar.ql-snow button {
    width: 28px; height: 26px; padding: 4px 5px; border-radius: 6px;
    transition: background var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .responder-form .ql-toolbar.ql-snow button:hover { background: var(--h-hover); }
body .cases-col-detail .responder-form .ql-toolbar.ql-snow button.ql-active { background: var(--h-track); }
body .cases-col-detail .ql-snow.ql-toolbar button .ql-stroke,
body .cases-col-detail .ql-snow .ql-toolbar button .ql-stroke { stroke: var(--h-muted); }
body .cases-col-detail .ql-snow.ql-toolbar button .ql-fill,
body .cases-col-detail .ql-snow .ql-toolbar button .ql-fill { fill: var(--h-muted); }
body .cases-col-detail .ql-snow.ql-toolbar button:hover .ql-stroke,
body .cases-col-detail .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--h-text); }
body .cases-col-detail .ql-snow.ql-toolbar button:hover .ql-fill,
body .cases-col-detail .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--h-text); }
body .cases-col-detail .ql-snow.ql-toolbar button:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 1px; }
body .cases-col-detail .responder-form .ql-container.ql-snow {
    border: 1px solid var(--h-ctl-line); border-top: 0;
    border-radius: 0 0 8px 8px;
    background: var(--h-field);
    color: var(--h-text);
    font-family: var(--f-read); font-size: 15px;
    transition: border-color var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .responder-editor { background: var(--h-field); }
body .cases-col-detail .responder-form .ql-container.ql-snow:focus-within { border-color: var(--h-ink); }
body .cases-col-detail .responder-editor .ql-editor { padding: 14px 16px; line-height: 24px; }
body .cases-col-detail .responder-editor .ql-editor.ql-blank::before { color: var(--h-muted); font-style: normal; left: 16px; }
body .cases-col-detail .ql-snow .ql-tooltip { background: var(--h-paper); color: var(--h-text); border: 1px solid var(--h-line); box-shadow: var(--h-shadow-pop); border-radius: 8px; }
body .cases-col-detail .ql-snow .ql-tooltip input[type=text] { background: var(--h-field); color: var(--h-text); border: 1px solid var(--h-ctl-line); }
body .cases-col-detail .ql-snow .ql-tooltip a { color: var(--h-text); }
body .cases-col-detail .responder-preview { border: 1px solid var(--h-line); border-radius: 8px; background: var(--h-paper); }
body .cases-col-detail .responder-preview-head { background: var(--h-side); color: var(--h-muted); border-bottom: 1px solid var(--h-line); }
body .cases-col-detail .responder-preview-back { color: var(--h-text); }

/* Adjuntar: secundario con clip */
body .cases-col-detail .responder-attachments { margin-top: 10px; }
body .cases-col-detail .responder-attach-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 11px 0 9px;
    border: 1px solid var(--h-ctl-line); border-radius: 8px;
    background: var(--h-field); color: var(--h-text);
    font-size: 13px; font-weight: 500;
    transition: background var(--hd-dur) var(--hd-ease), border-color var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .responder-attach-btn:hover { background: var(--h-side); border-color: var(--h-muted); color: var(--h-text); }
body .cases-col-detail .responder-attach-btn:focus-within { outline: 2px solid var(--h-focus); outline-offset: 2px; }
body .cases-col-detail .responder-attach-btn svg { color: var(--h-muted); }
body .cases-col-detail .responder-file-item { background: var(--h-ai); border: 0; border-radius: 7px; color: var(--h-text); }
body .cases-col-detail .responder-file-size { color: var(--h-muted); }
body .cases-col-detail .responder-remove-file-btn { color: var(--h-muted); background: transparent; }
body .cases-col-detail .responder-remove-file-btn:hover { color: var(--h-error); }
body .cases-col-detail .responder-error { color: var(--h-error); }

/* Instrucción IA: misma superficie que el Resumen IA (la voz de la máquina) */
body .cases-col-detail .ai-draft-block {
    margin: 12px 0; padding: 10px;
    border: 0; border-radius: 10px;
    background: var(--h-ai);
}
body .cases-col-detail textarea.ai-draft-instruccion {
    min-height: 44px; margin-bottom: 8px;
    padding: 9px 11px;
    border: 1px solid var(--h-ctl-line); border-radius: 8px;
    background: var(--h-field); color: var(--h-text);
    font-family: var(--f-read); font-size: 13.5px; line-height: 20px;
    transition: border-color var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail textarea.ai-draft-instruccion::placeholder { color: var(--h-muted); }
body .cases-col-detail textarea.ai-draft-instruccion:hover { border-color: var(--h-muted); }
body .cases-col-detail textarea.ai-draft-instruccion:focus { outline: none; border-color: var(--h-focus); box-shadow: var(--hl-ring, none); }
body .cases-col-detail .ai-draft-actions { gap: 6px; }
body .cases-col-detail .ai-draft-btn {
    height: 32px; padding: 0 12px;
    border: 1px solid var(--h-btn-line); border-radius: 8px;
    background: var(--h-paper); color: var(--h-text);
    font-family: var(--f-body); font-size: 13.5px; font-weight: 700;
    transition: background var(--hd-dur) var(--hd-ease), box-shadow var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .ai-draft-btn:not(:disabled):hover { background: var(--h-paper); border-color: var(--h-btn-line); box-shadow: 0 0 0 3px var(--h-track); }
body .cases-col-detail .ai-draft-btn:not(:disabled):active { background: var(--h-track); box-shadow: none; }
body .cases-col-detail .ai-reformular-btn { border-color: transparent; background: transparent; font-weight: 500; }
body .cases-col-detail .ai-reformular-btn:not(:disabled):hover { background: var(--h-hover); border-color: transparent; box-shadow: none; }
body .cases-col-detail .ai-draft-spinner,
body .cases-col-detail .draft-reform-meta { color: var(--h-muted); }

/* Enviar respuesta: primario tinta */
body .cases-col-detail .responder-actions { padding-top: 2px; }
body .cases-col-detail .responder-submit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 20px;
    border: 0; border-radius: 8px;
    background: var(--h-ink); color: var(--h-on-ink);
    box-shadow: none;
    font-family: var(--f-label); font-size: 13px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    transition: box-shadow var(--hd-dur) var(--hd-ease), transform var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .responder-submit-btn:not(:disabled):hover { opacity: 1; box-shadow: 0 0 0 3px var(--h-track); }
body .cases-col-detail .responder-submit-btn:not(:disabled):active { transform: translateY(1px); }

/* ==========================================================================
   6. SECCIONES como FILAS separadas por línea fina, rótulo a la izquierda
   (Acción interna sugerida, Etiqueta UPS, Compensación) · Historial encima
   ========================================================================== */
body .cases-col-detail .case-detail-section:has(> .case-detail-section-title),
body .cases-col-detail .case-detail-section:has(> details:not(.responder-collapse)) {
    padding: 12px 0;
    border-top: 1px solid var(--h-line);
    background: transparent;
    border-radius: 0;
}
/* La primera fila arranca pegada a la barra tinta: hueco del flex + línea */
body .cases-col-detail .case-detail-section:has(> .case-detail-section-title) {
    display: grid;
    grid-template-columns: var(--hd-label) minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 8px;
    align-items: start;
}
body .cases-col-detail .case-detail-section-title {
    margin: 0; padding-top: 7px;
}
/* Botón de herramienta de sección: papel con borde tinta, 32 px */
body .cases-col-detail .sug-wrap { gap: 5px; min-width: 0; }
body .cases-col-detail .sug-calc-btn {
    display: inline-flex; align-items: center;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--h-btn-line); border-radius: 8px;
    background: var(--h-paper); color: var(--h-text);
    font-family: var(--f-body); font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    transition: box-shadow var(--hd-dur) var(--hd-ease), background var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .sug-calc-btn:hover { background: var(--h-paper); box-shadow: 0 0 0 3px var(--h-track); }
body .cases-col-detail .sug-calc-btn:active { background: var(--h-track); box-shadow: none; }
body .cases-col-detail .sug-calc-hint { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--h-muted); }
body .cases-col-detail .sug-calc-spinner { color: var(--h-muted); }

/* Compensación / Historial: <details> con chevron propio */
body .cases-col-detail .case-detail-section > details:not(.responder-collapse) > summary {
    display: flex; align-items: center; gap: 10px;
    min-height: 30px; padding: 0;
    list-style: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .case-detail-section > details:not(.responder-collapse) > summary::-webkit-details-marker { display: none; }
body .cases-col-detail .case-detail-section > details:not(.responder-collapse) > summary::before {
    content: "";
    width: 6px; height: 6px; margin: 0 2px 0 1px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--hd-dur) var(--hd-ease);
    flex-shrink: 0;
}
body .cases-col-detail .case-detail-section > details[open]:not(.responder-collapse) > summary::before { transform: rotate(45deg) translate(-2px, -1px); }
body .cases-col-detail .case-detail-section > details:not(.responder-collapse) > summary:hover { color: var(--h-muted); }

body .cases-col-detail .case-detail-section:has(> details:not(.responder-collapse)) { padding: 8px 0; }
/* Compensación: rótulo a la izquierda, datos a la derecha (details en rejilla) */
body .cases-col-detail .case-detail-section > details:has(> .case-detail-compensacion-readonly) {
    display: grid;
    grid-template-columns: var(--hd-label) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
}
body .cases-col-detail .case-detail-compensacion-readonly {
    margin: 0; padding-top: 5px;
    gap: 4px 16px;
    font-size: 13px; line-height: 20px;
}
body .cases-col-detail .case-detail-compensacion-readonly dt { font-weight: 500; color: var(--h-muted); }
body .cases-col-detail .case-detail-compensacion-readonly dd { color: var(--h-text); }

/* ---------- Presupuesto internacional (caso Amphora) ---------- */
body .cases-col-detail .intl-f-details,
body .cases-col-detail .intl-q {
    border: 1px solid var(--h-line); border-radius: 10px;
    background: var(--h-paper);
    box-shadow: none;
    color: var(--h-text);
}
body .cases-col-detail .intl-f-summary {
    display: flex; align-items: center;
    min-height: 34px; padding: 0 14px;
    font-family: var(--f-body); font-size: 11px; font-weight: 700;
    letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--h-muted);
    transition: color var(--hd-dur) var(--hd-ease), background var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .intl-f-summary:hover { color: var(--h-text); background: var(--h-hover); }
body .cases-col-detail .intl-f-details[open] .intl-f-summary { border-bottom: 1px solid var(--h-line); }
body .cases-col-detail .intl-f-head { padding: 12px 14px 6px; }
body .cases-col-detail .intl-f-title,
body .cases-col-detail .intl-q-title { font-family: var(--f-label); font-size: 15px; font-weight: 700; color: var(--h-text); }
body .cases-col-detail .intl-f-prefill { background: var(--h-curso-bg); color: var(--h-curso-fg); border-radius: 3px; font-family: var(--f-label); font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
body .cases-col-detail .intl-f-sec { padding: 0 14px 12px; }
body .cases-col-detail .intl-f-sec + .intl-f-sec { border-top: 1px solid var(--h-line); padding-top: 12px; }
body .cases-col-detail .intl-f-leg {
    margin: 0 0 6px;
    font-family: var(--f-body); font-size: 11px; font-weight: 700;
    letter-spacing: 1.1px; text-transform: uppercase; color: var(--h-muted);
}
body .cases-col-detail .intl-f-row { gap: 6px; }
body .cases-col-detail .intl-f-row select,
body .cases-col-detail .intl-f-altrow select,
body .cases-col-detail .intl-f-row input[type="text"] {
    height: 34px; min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--h-ctl-line); border-radius: 8px;
    background-color: var(--h-field); color: var(--h-text);
    font-family: var(--f-read); font-size: 13.5px;
}
body .cases-col-detail .intl-f-row select,
body .cases-col-detail .intl-f-altrow select { padding-right: 30px; }
body .cases-col-detail .intl-f-row input::placeholder { color: var(--h-muted); }
/* flecha, hover y foco: los de la base global (layer-lateral) */
body .cases-col-detail .intl-f-altrow { gap: 8px; margin-top: 8px; }
body .cases-col-detail .intl-f-altrow select { flex: 1 1 auto; min-width: 0; }
body .cases-col-detail .intl-f-altlbl { font-size: 12.5px; color: var(--h-muted); }
body .cases-col-detail .intl-f-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--h-line);
    background: var(--h-side);
    border-radius: 0 0 10px 10px;
}
body .cases-col-detail .intl-f-actions .sug-calc-hint { flex-basis: 100%; }

/* Recibo del presupuesto (tras calcular) */
body .cases-col-detail .intl-q-ctx,
body .cases-col-detail .intl-q-v s,
body .cases-col-detail .intl-q-foot { color: var(--h-muted); }
body .cases-col-detail .intl-q-ctx b,
body .cases-col-detail .intl-q-k,
body .cases-col-detail .intl-q-sub-k { color: var(--h-text); }
body .cases-col-detail .intl-q-chip { background: var(--h-ai); color: var(--h-text); border-radius: 3px; }
body .cases-col-detail .intl-q-item + .intl-q-item { border-top: 1px solid var(--h-line); }
body .cases-col-detail .intl-q-sub { background: var(--h-side); }
body .cases-col-detail .intl-q-hero { background: var(--h-ink); color: var(--h-on-ink); }
body .cases-col-detail .intl-q-hero-l small,
body .cases-col-detail .intl-q-price em { color: var(--h-on-ink); opacity: .75; }
body .cases-col-detail .intl-q-price input {
    color: var(--h-on-ink);
    background: color-mix(in srgb, var(--h-on-ink) 12%, transparent);
    border-color: color-mix(in srgb, var(--h-on-ink) 25%, transparent);
}
body .cases-col-detail .intl-q-draft {
    background: var(--h-ink); color: var(--h-on-ink);
    border-radius: 8px; font-family: var(--f-label); font-weight: 700;
}
body .cases-col-detail .intl-q-draft:hover { background: var(--h-ink); box-shadow: 0 0 0 3px var(--h-track); }
body .cases-col-detail .intl-q-recalc { color: var(--h-text); text-decoration: underline; }
body .cases-col-detail .intl-q-alt-m.pos { color: var(--h-curso-fg); }
body .cases-col-detail .intl-q-alt-m.mid { color: var(--h-cli-fg); }
body .cases-col-detail .intl-q-alt-m.neg { color: var(--h-error); }

/* ==========================================================================
   7. HISTORIAL (rótulo encima: la línea de tiempo necesita el ancho)
   ========================================================================== */
body .cases-col-detail .case-detail-section:has(> .case-history-details) { padding-bottom: 4px; }
body .cases-col-detail .case-detail-timeline { margin: 10px 0 0; gap: 0; }
body .cases-col-detail .timeline-item {
    position: relative;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 0 0 16px;
    background: transparent;
    border: 0; border-radius: 0;
    color: var(--h-text);
    font-size: 13px;
}
/* hilo vertical entre iconos */
body .cases-col-detail .timeline-item:not(:last-child)::after {
    content: ""; position: absolute;
    left: 14px; top: 32px; bottom: 4px; width: 1px;
    background: var(--h-line);
}
body .cases-col-detail .timeline-icon {
    width: 28px; height: 28px;
    border: 0; border-radius: 50%;
    background: var(--h-ai); color: var(--h-text);
}
body .cases-col-detail .timeline-icon svg { width: 14px; height: 14px; }
body .cases-col-detail .timeline-item--email_sent .timeline-icon { background: var(--h-ink); color: var(--h-on-ink); }
body .cases-col-detail .timeline-item--email_received .timeline-icon { background: var(--h-ai); color: var(--h-text); }
body .cases-col-detail .timeline-item--status_changed .timeline-icon,
body .cases-col-detail .timeline-item--unknown .timeline-icon { color: var(--h-muted); }
body .cases-col-detail .timeline-item--note_added { background: transparent; }
body .cases-col-detail .timeline-item--money .timeline-icon { background: var(--h-curso-bg); color: var(--h-curso-fg); }
body .cases-col-detail .timeline-item--money .timeline-money { color: var(--h-curso-fg); }

/* Cabecera de cada email: frase normal (no MAYÚSCULAS heredadas) */
body .cases-col-detail .case-detail-section details > summary.timeline-email-summary {
    display: block;
    margin: 0 -8px; padding: 4px 8px 6px;
    border-radius: 8px;
    font-family: var(--f-body); font-size: 13px; line-height: 19px; font-weight: 400;
    letter-spacing: 0; text-transform: none;
    color: var(--h-text);
    transition: background var(--hd-dur) var(--hd-ease);
}
body .cases-col-detail .case-detail-section details > summary.timeline-email-summary:hover { background: var(--h-hover); }
body .cases-col-detail .timeline-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body .cases-col-detail .timeline-label { color: var(--h-muted); }
body .cases-col-detail .timeline-label strong { color: var(--h-text); font-weight: 700; }
body .cases-col-detail .timeline-time { color: var(--h-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
body .cases-col-detail .timeline-sub { margin: 1px 0 0; font-size: 13px; font-weight: 700; color: var(--h-text); }
body .cases-col-detail .timeline-to { margin: 0; font-size: 12.5px; color: var(--h-muted); }
body .cases-col-detail .timeline-chevron { color: var(--h-muted); width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
body .cases-col-detail .timeline-origin { background: var(--h-ai); border: 0; border-radius: 3px; color: var(--h-muted); }
body .cases-col-detail .timeline-clip { background: var(--h-ai); border: 0; color: var(--h-text); }
/* Cuerpo del email del historial: papel con línea fina, como el mensaje */
body .cases-col-detail .case-event-body {
    margin-top: 6px;
    padding: 14px 18px;
    border: 1px solid var(--h-line); border-radius: 10px;
    background: var(--h-paper);
    color: var(--h-text);
    font-size: 14px; line-height: 22px;
}
body .cases-col-detail .case-event-body p { margin: 0 0 9px; }
body .cases-col-detail .case-event-body p:last-child { margin-bottom: 0; }
body .cases-col-detail .msg-translate { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--h-line); }
body .cases-col-detail .case-event-attachments { color: var(--h-muted); }

/* ---------- Foco de teclado y movimiento ---------- */
body .cases-col-detail button:focus-visible,
body .cases-col-detail summary:focus-visible,
body .cases-col-detail a:focus-visible,
body .cases-col-detail .case-detail-subject:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 2px; }
body .cases-col-detail button:disabled:not(.estado-btn) { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
    body .cases-col-detail *,
    body .cases-col-detail *::before,
    body .cases-col-detail *::after { transition: none !important; }
}

/* ── Botón de modo noche (rail, encima de cerrar sesión) ─────────────────── */
body .sidebar-footer .tema-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 0.5rem 0.75rem; border: 0; border-radius: var(--hl-r-sm);
    background: transparent; color: var(--h-rail-icon); cursor: pointer;
    font-size: 0.9rem; text-align: left;
    transition: background var(--hl-dur) var(--hl-ease), color var(--hl-dur) var(--hl-ease);
}
body .sidebar-footer .tema-toggle:hover { background: var(--hl-rail-hover); color: var(--h-rail-active); }
body .app-shell.sidebar-collapsed .sidebar-footer .tema-toggle { justify-content: center; padding: 0.5rem; }
body .tema-toggle .tema-icon-sol { display: none; }
:root[data-tema="noche"] body .tema-toggle .tema-icon-luna { display: none; }
:root[data-tema="noche"] body .tema-toggle .tema-icon-sol { display: inline; }

/* ── Repaso fuera de casos: colores escritos a mano en styles.css que en modo
      noche dejaban texto ilegible (botones con fondo de token y texto #fff,
      fondos claros fijos). Todo pasa a tokens; en claro se ve igual que antes. */
body .alerta-btn-retry,
body .case-dup-btn-primary,
body .alerta-btn-reconcile,
body .nocs-btn-danger,
body .alertas-count { color: var(--h-on-ink); }
body .alerta-btn-retry,
body .case-dup-btn-primary { background: var(--h-ink); }
body .alerta-btn-reconcile { background: var(--h-cli-fg); }
body .nocs-btn-danger,
body .alertas-count { background: var(--h-error); border-color: var(--h-error); }
body .seg-row-done-btn,
body .men-row-done-btn,
body .case-seguimiento-done-btn {
    border-color: var(--h-curso-dot); color: var(--h-curso-fg); background: transparent;
}
body .seg-row-done-btn:hover,
body .men-row-done-btn:hover,
body .case-seguimiento-done-btn:hover { background: var(--h-curso-bg); }
body .df-badge--edited { background: var(--h-cli-bg); color: var(--h-cli-fg); border-color: var(--h-ctl-line); }
body .alerta-pill--orphan,
body .nocs-propose { border-color: var(--h-ctl-line); }

/* ── Letra de lectura (D-142 adenda): lo que se lee o se escribe largo va en la
      letra del sistema; la de la web queda para títulos, rótulos y botones. ── */
body :is(.case-detail-email-body, .case-detail-email-body-html, .case-event-body,
         .case-msg-translation, .case-translate-result, .case-amphora-msg-body,
         .ql-editor) { font-family: var(--f-read); }