/* ═══════════════════════════════════════════════
         TOKENS — LIGHT MODE · Paleta Bandera Mexicana
         Verde #006847 · Blanco #FFFFFF · Rojo #CE1126
         ═══════════════════════════════════════════════ */
      :root {
        /* primary = verde bandera, secondary = rojo bandera */
        --primary: #006847;
        --primary-dark: #004d34;
        --primary-glow: rgba(0, 104, 71, 0.18);
        --primary-subtle: rgba(0, 104, 71, 0.08);
        --accent: #ce1126;
        --accent2: #a50d1e;

        /* surfaces — blanco puro con toques verdes muy suaves */
        --bg-app: #f2f7f4;
        --bg-sidebar: #ffffff;
        --bg-chat: #eef5f1;
        --bg-header: #ffffff;
        --bg-input-area: #ffffff;
        --bg-msg-ai: #ffffff;
        --bg-msg-user: #ce1126; /* mensajes del usuario: rojo bandera */
        --bg-bubble: rgba(0, 104, 71, 0.06);

        /* text */
        --text-primary: #0d1f17;
        --text-secondary: #3d5a4a;
        --text-muted: #84a695;
        --text-user-msg: #ffffff; /* texto sobre rojo = blanco */

        /* borders / dividers */
        --border: #d0e6da;
        --border-light: rgba(0, 104, 71, 0.08);

        /* sidebar source cards */
        --card-bg: #f7faf8;
        --card-border: var(--primary);

        /* chat dot pattern — verde muy suave */
        --dot-color: rgba(0, 104, 71, 0.15);

        /* status dot verde */
        --status-color: #006847;
        --conf-alta: #22c55e;
        --conf-media: #f59e0b;
        --conf-baja: #ef4444;

        /* version badge verde */
        --badge-bg: rgba(0, 104, 71, 0.1);
        --badge-color: var(--primary);

        /* shadows */
        --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
        --shadow-btn: 0 4px 14px rgba(0, 104, 71, 0.38);

        /* Auth modal vars — light mode */
        --bg-panel: #ffffff;
        --bg-glass: rgba(255, 255, 255, 0.9);
        --bg-glass2: rgba(242, 247, 244, 0.95);
        --bg-input: #f2f7f4;
        --border-color: #d0e6da;
        --cyan: #006847;
        --cyan-border: rgba(0, 104, 71, 0.3);
        --cyan-dim: rgba(0, 104, 71, 0.4);
        --cyan-glow: rgba(0, 104, 71, 0.08);
        --gold: #1a7a43;
        --gold-border: rgba(46, 204, 113, 0.3);
        --gold-glow: rgba(46, 204, 113, 0.08);
        --shadow-cyan: 0 8px 32px rgba(0, 104, 71, 0.18);
      }

      /* ═══════════════════════════════════════════════
         TOKENS — DARK MODE
         Paleta: Negro · Índigo · Dorado — alineada con landing
         ═══════════════════════════════════════════════ */
      [data-theme="dark"] {
        --primary: #3d6bff;
        --primary-dark: #1e3fcc;
        --primary-glow: rgba(61, 107, 255, 0.22);
        --primary-subtle: rgba(61, 107, 255, 0.08);
        --accent: #c9a227;
        --accent2: #3d6bff;

        --bg-app: #080a0f;
        --bg-sidebar: #0b0d16;
        --bg-chat: #0d0f1a;
        --bg-header: #0b0d16;
        --bg-input-area: #0b0d16;
        --bg-msg-ai: #111420;
        --bg-msg-user: #1e2440;
        --bg-bubble: rgba(61, 107, 255, 0.07);

        --text-primary: #eef0f8;
        --text-secondary: #8b90a8;
        --text-muted: #454a62;
        --text-user-msg: #c8d0f0;

        --border: rgba(79, 70, 229, 0.12);
        --border-light: rgba(79, 70, 229, 0.06);

        --card-bg: rgba(17, 20, 32, 0.8);
        --card-border: var(--primary);

        --dot-color: rgba(79, 70, 229, 0.08);

        --status-color: #3d6bff;

        --badge-bg: rgba(61, 107, 255, 0.12);
        --badge-color: var(--accent);

        --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
        --shadow-btn: 0 4px 18px rgba(61, 107, 255, 0.32);

        /* Auth modal vars — dark mode */
        --bg-panel: #111420;
        --bg-glass: rgba(17, 20, 32, 0.95);
        --bg-glass2: rgba(13, 15, 26, 0.98);
        --bg-input: #0d0f1a;
        --border-color: rgba(79, 70, 229, 0.15);
        --cyan: #3d6bff;
        --cyan-border: rgba(61, 107, 255, 0.25);
        --cyan-dim: rgba(61, 107, 255, 0.3);
        --cyan-glow: rgba(61, 107, 255, 0.08);
        --gold: #3d6bff;
        --gold-border: rgba(61, 107, 255, 0.25);
        --gold-glow: rgba(61, 107, 255, 0.08);
        --shadow-cyan: 0 8px 32px rgba(61, 107, 255, 0.18);
      }

      /* ═══════════════════════════════════════════════
         RESET & BASE
         ═══════════════════════════════════════════════ */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
        overflow: hidden;
      }
      body {
        font-family: "DM Sans", system-ui, sans-serif;
        background: var(--bg-app);
        color: var(--text-primary);
        transition:
          background 0.3s,
          color 0.3s;
      }

      .app {
        display: flex;
        height: 100dvh;
        position: relative;
        overflow: hidden;
      }

      /* ═══════════════════════════════════════════════
         OVERLAY (mobile)
         ═══════════════════════════════════════════════ */
      #overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99;
        backdrop-filter: blur(2px);
      }
      #overlay.visible {
        display: block;
      }

      /* ═══════════════════════════════════════════════
         SIDEBAR
         ═══════════════════════════════════════════════ */
      .sidebar {
        width: 290px;
        background: var(--bg-sidebar);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        overflow: hidden;
        z-index: 100;
        transition:
          transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
          background 0.3s,
          border-color 0.3s;
      }
      @media (max-width: 640px) {
        .sidebar {
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          transform: translateX(-100%);
          box-shadow: 4px 0 32px rgba(0, 0, 0, 0.25);
        }
        .sidebar.open {
          transform: translateX(0);
        }
      }

      /* sidebar top section */
      .sidebar-top {
        padding: 20px 18px 14px;
        border-bottom: 1px solid var(--border);
      }
      .sidebar-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
      }
      .brand-identity {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .brand-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--primary-subtle);
        border: 1px solid var(--primary-glow);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
        box-shadow: 0 0 12px var(--primary-glow);
      }
      [data-theme="dark"] .brand-icon {
        box-shadow:
          0 0 18px var(--primary-glow),
          inset 0 0 8px rgba(61, 107, 255, 0.08);
      }
      .brand-text h2 {
        font-family: "Space Mono", monospace;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: 0.02em;
      }
      .brand-text .brand-sub {
        font-size: 0.62rem;
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 1px;
      }
      .version-badge {
        display: inline-flex;
        align-items: center;
        font-size: 0.6rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 20px;
        background: var(--badge-bg);
        color: var(--badge-color);
        border: 1px solid var(--primary-glow);
        margin-top: 6px;
        font-family: "Space Mono", monospace;
        letter-spacing: 0.05em;
      }

      #close-sidebar {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1.2rem;
        cursor: pointer;
        display: none;
        padding: 4px;
        border-radius: 6px;
        transition: color 0.2s;
      }
      #close-sidebar:hover {
        color: var(--primary);
      }
      @media (max-width: 640px) {
        #close-sidebar {
          display: block;
        }
      }

      .sidebar-desc {
        font-size: 0.71rem;
        color: var(--text-muted);
        line-height: 1.5;
        margin: 10px 0 12px;
      }

      /* tricolor stripe at top of sidebar (light mode only) */
      .sidebar::before {
        content: "";
        display: block;
        height: 4px;
        background: linear-gradient(
          90deg,
          #006847 33.3%,
          #f0f0f0 33.3% 66.6%,
          #ce1126 66.6%
        );
        flex-shrink: 0;
      }
      [data-theme="dark"] .sidebar::before {
        display: none;
      }

      #new-chat-btn {
        width: 100%;
        padding: 11px 16px;
        background: linear-gradient(
          135deg,
          var(--primary) 0%,
          var(--primary-dark) 100%
        );
        border: none;
        border-radius: 12px;
        color: white;
        font-size: 0.82rem;
        font-weight: 700;
        font-family: "Space Mono", monospace;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        box-shadow:
          0 4px 20px rgba(0, 104, 71, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        letter-spacing: 0.04em;
        position: relative;
        overflow: hidden;
      }
      #new-chat-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.12),
          transparent
        );
        transition: left 0.5s ease;
      }
      #new-chat-btn:hover::before {
        left: 200%;
      }
      #new-chat-btn .ncb-icon {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
        flex-shrink: 0;
        transition: transform 0.3s;
      }
      #new-chat-btn:hover .ncb-icon {
        transform: rotate(90deg);
      }
      #new-chat-btn:hover {
        transform: translateY(-2px);
        box-shadow:
          0 8px 28px rgba(0, 104, 71, 0.55),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }
      #new-chat-btn:active {
        transform: translateY(0);
      }
      [data-theme="dark"] #new-chat-btn:hover {
        box-shadow:
          0 8px 28px rgba(180, 140, 40, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }

      /* sidebar tabs */
      /* v22 FIX: grid en vez de flex — con flex:1 y contenido de ancho
         fijo (icono+texto), los botones no se encogían por debajo de su
         ancho intrínseco (faltaba min-width:0), así que al agregar más
         pestañas (Casos, Agenda) el contenedor las desbordaba y el
         .sidebar padre (overflow:hidden) las recortaba en silencio —
         "Docs" se veía cortado y "Casos"/"Agenda" no se veían en absoluto.
         Con grid de 3 columnas, cualquier número de pestañas se acomoda
         en filas completas, nunca se recorta. */
      .sidebar-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-bottom: 1px solid var(--border);
        padding: 6px 14px 0;
        gap: 4px 6px;
      }
      .tab-btn {
        min-width: 0;
        padding: 8px 3px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 0.62rem;
        font-weight: 700;
        font-family: "Space Mono", monospace;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        letter-spacing: 0.02em;
        border-radius: 8px 8px 0 0;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .tab-btn .tab-icon {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s;
        flex-shrink: 0;
      }
      .tab-btn .tab-icon svg {
        width: 12px;
        height: 12px;
      }
      .tab-btn .tab-icon svg {
        stroke: var(--text-muted);
      }
      .tab-btn:hover .tab-icon {
        background: var(--primary-subtle);
      }
      .tab-btn:hover .tab-icon svg {
        stroke: var(--primary);
      }
      .tab-btn:hover {
        color: var(--text-secondary);
        background: var(--primary-subtle);
      }
      .tab-btn.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
        background: var(--primary-subtle);
      }
      .tab-btn.active .tab-icon {
        background: var(--primary);
        box-shadow: 0 2px 8px var(--primary-glow);
      }
      .tab-btn.active .tab-icon svg {
        color: white;
        stroke: white;
      }

      #panel-fuentes,
      #panel-historial {
        flex: 1;
        overflow-y: auto;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 7px;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
      }
      #panel-historial {
        display: none;
      }
      #panel-documentos {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        flex: 1;
        max-height: 80vh;
        min-height: 70vh;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) transparent;
      }

      /* ══════════════════════════════════════════════
         DOCUMENTOS — MODO PANTALLA COMPLETA (v21)
         Cuando el panel está activo, se expande sobre
         el área principal sin mover el DOM.
         ══════════════════════════════════════════════ */
      #panel-documentos.docs-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--bg-app);
        max-height: 100dvh;
        min-height: 100dvh;
        overflow-y: auto;
        padding: 0;
        display: flex !important;
        flex-direction: column;
        animation: docs-fs-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      }
      @keyframes docs-fs-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* Header del panel full-screen */
      .docs-fs-header {
        display: none;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        border-bottom: 1px solid var(--border);
        background: var(--bg-sidebar);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      #panel-documentos.docs-fullscreen .docs-fs-header {
        display: flex;
      }
      .docs-fs-back {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text-primary);
        padding: 6px 12px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.15s;
        font-family: inherit;
      }
      .docs-fs-back:hover {
        background: var(--primary-subtle);
        border-color: var(--primary);
        color: var(--primary);
      }
      .docs-fs-back svg {
        width: 15px; height: 15px;
        stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      }
      .docs-fs-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
        font-family: 'Orbitron', sans-serif;
        letter-spacing: 0.5px;
      }
      .docs-fs-badge {
        margin-left: auto;
        font-size: 11px;
        color: var(--text-muted);
        background: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 3px 10px;
      }

      /* Inner content tiene más ancho en fullscreen */
      #panel-documentos.docs-fullscreen .docs-panel-inner {
        max-width: 860px;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 40px;
        flex: 1;
        /* v20.3 FIX: la base de .docs-panel-inner trae height:100% +
           overflow:hidden, lo que recorta el contenido a la altura visible
           en vez de dejarlo crecer y disparar el scroll del contenedor
           full-screen (que sí tiene overflow-y:auto). Sin este reset, el
           panel "full screen" seguía sin poder scrollearse. */
        height: auto;
        min-height: 100%;
        overflow: visible;
      }

      /* ── Toggle ZDR (Zero Data Retention) ── */
      .doc-zdr-toggle {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 8px 14px 10px;
        padding: 10px 14px;
        border-radius: 10px;
        background: var(--bg-input);
        border: 1px solid var(--border);
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
        user-select: none;
      }
      .doc-zdr-toggle:hover { border-color: var(--primary); }
      .doc-zdr-toggle input[type="checkbox"] {
        width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
        accent-color: var(--primary); cursor: pointer;
      }
      .doc-zdr-toggle-text { flex: 1; }
      .doc-zdr-toggle-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .doc-zdr-toggle-desc {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 2px;
        line-height: 1.4;
      }
      .zdr-on .doc-zdr-toggle-label { color: var(--primary); }
      .zdr-badge {
        font-size: 9px;
        background: rgba(61,107,255,0.12);
        color: var(--primary);
        border: 1px solid rgba(61,107,255,0.25);
        border-radius: 4px;
        padding: 1px 5px;
        font-weight: 700;
        letter-spacing: 0.5px;
      }
      
      #panel-documentos::-webkit-scrollbar {
        width: 8px;
      }
      
      #panel-documentos::-webkit-scrollbar-track {
        background: transparent;
      }
      
      #panel-documentos::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 4px;
      }
      
      #panel-documentos::-webkit-scrollbar-thumb:hover {
        background: var(--primary-dark);
      }

      /* ══════════════════════════════════════════
         DOCUMENTOS PANEL — Enterprise UI
         ══════════════════════════════════════════ */
      .docs-panel-inner {
        display: flex;
        flex-direction: column;
        /* v20.3 FIX: height:100% + overflow:hidden recortaba el contenido
           (dropzone + lista) a la altura visible del panel en vez de dejar
           que el contenedor padre (#panel-documentos, que sí tiene
           overflow-y:scroll) hiciera el scroll real. Por eso no se veían
           los documentos de más abajo en "Mis documentos". */
        height: auto;
        min-height: 100%;
        overflow: visible;
      }

      /* ── Drop Zone ── */
      .doc-dropzone {
        margin: 12px 14px 10px;
        border: 2px dashed var(--border);
        border-radius: 12px;
        padding: 18px 14px 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--bg-input);
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
      }
      .doc-dropzone::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--primary-subtle);
        opacity: 0;
        transition: opacity 0.2s;
      }
      .doc-dropzone:hover,
      .doc-dropzone.drag-over {
        border-color: var(--primary);
        background: var(--primary-subtle);
      }
      .doc-dropzone:hover::before,
      .doc-dropzone.drag-over::before {
        opacity: 1;
      }
      .doc-dropzone.drag-over {
        border-style: solid;
        transform: scale(1.01);
      }
      .doc-dropzone-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 12px var(--primary-glow);
        position: relative;
        z-index: 1;
        transition: transform 0.2s;
      }
      .doc-dropzone:hover .doc-dropzone-icon {
        transform: translateY(-2px);
      }
      .doc-dropzone-icon svg {
        width: 18px;
        height: 18px;
        stroke: white;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .doc-dropzone-text {
        text-align: center;
        position: relative;
        z-index: 1;
      }
      .doc-dropzone-text strong {
        display: block;
        font-size: 0.73rem;
        font-weight: 700;
        color: var(--text-primary);
        font-family: "Space Mono", monospace;
        letter-spacing: -0.01em;
      }
      .doc-dropzone-text span {
        font-size: 0.63rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .doc-upload-btn {
        position: relative;
        z-index: 1;
        padding: 6px 16px;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 0.68rem;
        font-weight: 700;
        font-family: "Space Mono", monospace;
        cursor: pointer;
        transition: all 0.2s;
        letter-spacing: 0.02em;
        box-shadow: 0 2px 8px var(--primary-glow);
      }
      .doc-upload-btn:hover {
        background: var(--primary-dark);
        box-shadow: 0 4px 14px var(--primary-glow);
        transform: translateY(-1px);
      }
      #doc-file-input { display: none; }

      /* ── v22.2 — Documento de varias páginas ── */
      .doc-multipagina-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: calc(100% - 28px);
        margin: 0 14px 12px;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1.5px dashed var(--primary-glow);
        background: var(--bg-input);
        text-align: center;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--primary);
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.18s;
      }
      .doc-multipagina-link::before {
        content: "📎";
        font-size: 0.95rem;
      }
      .doc-multipagina-link:hover {
        border-color: var(--primary);
        background: var(--primary-subtle);
        transform: translateY(-1px);
      }

      .doc-multipagina-panel {
        display: none;
        flex-direction: column;
        gap: 10px;
        margin: 0 14px 12px;
        padding: 12px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg-input);
        flex-shrink: 0;
      }
      .doc-multipagina-panel.visible { display: flex; }
      .doc-multipagina-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .doc-multipagina-header strong {
        font-size: 0.72rem;
        font-family: "Space Mono", monospace;
        color: var(--text-primary);
      }
      #doc-multipagina-contador {
        font-size: 0.63rem;
        color: var(--text-muted);
        font-family: "Space Mono", monospace;
      }
      .doc-multipagina-hint {
        font-size: 0.62rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .doc-multipagina-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        gap: 8px;
      }
      .doc-multipagina-pagina {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--border);
        aspect-ratio: 3 / 4;
        background: var(--bg-primary, #0000);
      }
      .doc-multipagina-pagina img {
        width: 100%; height: 100%;
        object-fit: cover;
        display: block;
      }
      .doc-multipagina-num {
        position: absolute;
        top: 3px; left: 3px;
        background: rgba(0,0,0,0.65);
        color: #fff;
        font-size: 0.55rem;
        font-weight: 700;
        border-radius: 4px;
        padding: 1px 5px;
        font-family: "Space Mono", monospace;
      }
      .doc-multipagina-quitar {
        position: absolute;
        top: 3px; right: 3px;
        width: 18px; height: 18px;
        border-radius: 50%;
        background: rgba(0,0,0,0.65);
        color: #fff;
        border: none;
        font-size: 0.65rem;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .doc-multipagina-quitar:hover { background: #ef4444; }
      .doc-multipagina-mover {
        position: absolute;
        bottom: 3px;
        display: flex;
        gap: 3px;
        left: 3px; right: 3px;
        justify-content: space-between;
      }
      .doc-multipagina-mover button {
        width: 18px; height: 18px;
        border-radius: 4px;
        background: rgba(0,0,0,0.65);
        color: #fff;
        border: none;
        font-size: 0.6rem;
        cursor: pointer;
      }
      .doc-multipagina-mover button:disabled { opacity: 0.3; cursor: default; }
      .doc-multipagina-acciones {
        display: flex;
        gap: 8px;
      }
      .doc-multipagina-btn {
        flex: 1;
        padding: 7px 10px;
        border-radius: 8px;
        font-size: 0.65rem;
        font-weight: 700;
        font-family: "Space Mono", monospace;
        cursor: pointer;
        border: none;
        transition: all 0.15s;
      }
      .doc-multipagina-btn.secundario {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-primary);
      }
      .doc-multipagina-btn.secundario:hover { border-color: var(--primary); color: var(--primary); }
      .doc-multipagina-btn.primario {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 2px 8px var(--primary-glow);
      }
      .doc-multipagina-btn.primario:hover { background: var(--primary-dark); }
      .doc-multipagina-btn.primario:disabled {
        opacity: 0.45;
        cursor: default;
        box-shadow: none;
      }
      .doc-multipagina-cancelar {
        align-self: center;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 0.6rem;
        text-decoration: underline;
        cursor: pointer;
      }
      #doc-file-input-paginas { display: none; }

      /* ── Progress bar durante upload ── */
      .doc-upload-progress {
        margin: 0 14px 8px;
        display: none;
        flex-direction: column;
        gap: 6px;
        flex-shrink: 0;
      }
      .doc-upload-progress.visible { display: flex; }
      .doc-progress-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .doc-progress-name {
        font-size: 0.67rem;
        font-weight: 600;
        color: var(--text-primary);
        font-family: "Space Mono", monospace;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70%;
      }
      .doc-progress-status {
        font-size: 0.62rem;
        color: var(--primary);
        font-weight: 700;
        letter-spacing: 0.04em;
      }
      .doc-progress-bar-track {
        height: 4px;
        border-radius: 999px;
        background: var(--border);
        overflow: hidden;
      }
      .doc-progress-bar-fill {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--primary), #3d6bff);
        width: 0%;
        transition: width 0.4s ease;
        position: relative;
      }
      .doc-progress-bar-fill::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
        animation: shimmer-progress 1.2s ease-in-out infinite;
      }
      @keyframes shimmer-progress {
        0%,100% { opacity: 0.3; }
        50% { opacity: 1; }
      }

      /* ── Plan limit bar ── */
      .doc-plan-bar {
        margin: 0 14px 10px;
        flex-shrink: 0;
      }
      .doc-plan-bar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
      }
      .doc-plan-bar-label {
        font-size: 0.61rem;
        color: var(--text-muted);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .doc-plan-bar-count {
        font-size: 0.61rem;
        color: var(--primary);
        font-weight: 700;
        font-family: "Space Mono", monospace;
      }
      .doc-plan-bar-track {
        height: 3px;
        border-radius: 999px;
        background: var(--border);
        overflow: hidden;
      }
      .doc-plan-bar-fill {
        height: 100%;
        border-radius: 999px;
        background: var(--primary);
        transition: width 0.6s ease;
      }
      .doc-plan-bar-fill.warning { background: #f59e0b; }
      .doc-plan-bar-fill.danger  { background: #ef4444; }

      /* ── Lista de documentos ── */
      .docs-list {
        flex: 1;
        min-height: 300px;
        max-height: 400px;
        overflow-y: auto;
        min-height: 400px;
        overflow-y: auto;
        padding: 0 14px 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
      }
      .docs-list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0 4px;
        flex-shrink: 0;
      }
      .docs-list-title {
        font-size: 0.63rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-family: "Space Mono", monospace;
      }
      .docs-list-refresh {
        background: none;
        border: none;
        cursor: pointer;
        padding: 2px;
        color: var(--text-muted);
        transition: color 0.2s, transform 0.3s;
        display: flex;
        align-items: center;
      }
      .docs-list-refresh:hover { color: var(--primary); }
      .docs-list-refresh.spinning { animation: spin 0.8s linear infinite; }
      .docs-list-refresh svg {
        width: 13px; height: 13px;
        stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      }
      @keyframes spin { to { transform: rotate(360deg); } }

      /* ── Document card ── */
      .doc-card {
        background: var(--bg-msg-ai);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }
      .doc-card::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 3px;
        background: var(--primary);
        opacity: 0;
        transition: opacity 0.2s;
      }
      .doc-card:hover {
        border-color: var(--primary);
        background: var(--primary-subtle);
        transform: translateX(2px);
      }
      .doc-card:hover::before { opacity: 1; }
      .doc-card.active {
        border-color: var(--primary);
        background: var(--primary-subtle);
      }
      .doc-card.active::before { opacity: 1; }
      .doc-card-top {
        display: flex;
        align-items: flex-start;
        gap: 8px;
      }
      .doc-card-icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 13px;
      }
      .doc-card-icon.pdf  { background: rgba(239,68,68,0.12); }
      .doc-card-icon.docx { background: rgba(59,130,246,0.12); }
      .doc-card-icon.txt  { background: rgba(107,114,128,0.12); }
      .doc-card-meta {
        flex: 1;
        min-width: 0;
      }
      .doc-card-name {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: "Space Mono", monospace;
        letter-spacing: -0.01em;
      }
      .doc-card-sub {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 2px;
        flex-wrap: wrap;
      }
      .doc-card-type-badge {
        font-size: 0.58rem;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 4px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .doc-card-type-badge.contrato    { background: rgba(0,104,71,0.12); color: var(--primary); }
      .doc-card-type-badge.demanda     { background: rgba(206,17,38,0.12); color: #ce1126; }
      .doc-card-type-badge.convenio    { background: rgba(139,92,246,0.12); color: #7c3aed; }
      .doc-card-type-badge.testamento  { background: rgba(245,158,11,0.12); color: #b45309; }
      .doc-card-type-badge.poder       { background: rgba(14,165,233,0.12); color: #0284c7; }
      .doc-card-type-badge.documento   { background: var(--primary-subtle); color: var(--text-secondary); }
      .doc-card-date {
        font-size: 0.59rem;
        color: var(--text-muted);
      }
      .doc-card-status {
        font-size: 0.59rem;
        font-weight: 700;
        letter-spacing: 0.03em;
      }
      .doc-card-status.analizando { color: #f59e0b; }
      .doc-card-status.listo      { color: var(--primary); }
      .doc-card-status.error      { color: #ef4444; }
      .doc-card-actions {
        display: flex;
        gap: 4px;
        margin-top: 7px;
        padding-top: 7px;
        border-top: 1px solid var(--border-light);
      }
      .doc-card-action {
        flex: 1;
        padding: 5px 4px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg-input);
        font-size: 0.62rem;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.18s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-family: "Space Mono", monospace;
      }
      .doc-card-action svg {
        width: 11px; height: 11px;
        stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
        flex-shrink: 0;
      }
      .doc-card-action:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-subtle);
      }
      .doc-card-action.danger:hover {
        border-color: #ef4444;
        color: #ef4444;
        background: rgba(239,68,68,0.06);
      }
      .doc-card-action:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      /* ── Firma electrónica — botón accent + modal ── */
      .doc-card-action.firma {
        background: rgba(99,102,241,0.08);
        color: #818cf8;
        border-color: rgba(99,102,241,0.25);
      }
      .doc-card-action.firma:hover:not(:disabled) {
        background: rgba(99,102,241,0.18);
        border-color: #818cf8;
      }
      #firma-modal-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(6px);
        z-index: 2000;
        display: flex; align-items: center; justify-content: center;
        padding: 1rem;
      }
      #firma-modal {
        background: #1a1a2e;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 16px;
        padding: 2rem;
        width: 100%; max-width: 520px;
        max-height: 90vh; overflow-y: auto;
      }
      #firma-modal h3 {
        margin: 0 0 1.25rem; font-size: 1.15rem; color: var(--text);
        display: flex; align-items: center; gap: .5rem;
      }
      .firma-field { margin-bottom: 1rem; }
      .firma-field label {
        display: block; font-size: .78rem; color: var(--text-muted);
        margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .05em;
      }
      .firma-field input, .firma-field select {
        width: 100%; background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px; padding: .6rem .8rem;
        color: var(--text); font-size: .9rem;
        box-sizing: border-box;
      }
      .firma-field input:focus, .firma-field select:focus {
        outline: none; border-color: #818cf8;
      }
      .firma-firmante-block {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 10px; padding: 1rem; margin-bottom: .75rem;
      }
      .firma-firmante-title {
        font-size: .8rem; color: #818cf8; font-weight: 600;
        margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .05em;
      }
      .firma-add-btn {
        background: none; border: 1px dashed rgba(255,255,255,0.2);
        color: var(--text-muted); border-radius: 8px;
        padding: .5rem 1rem; font-size: .85rem; cursor: pointer; width: 100%;
        transition: all .2s;
      }
      .firma-add-btn:hover { border-color: #818cf8; color: #818cf8; }
      .firma-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }
      .firma-actions button { flex: 1; padding: .7rem; border-radius: 8px;
        border: none; cursor: pointer; font-size: .9rem; font-weight: 600; }
      .firma-btn-cancel { background: rgba(255,255,255,0.06); color: var(--text-muted); }
      .firma-btn-send   { background: linear-gradient(135deg,#818cf8,#6366f1); color: #fff; }
      .firma-btn-send:disabled { opacity: .5; cursor: not-allowed; }
      .firma-status-badge {
        display: inline-flex; align-items: center; gap: .35rem;
        padding: .25rem .65rem; border-radius: 20px; font-size: .75rem; font-weight: 600;
      }
      .firma-status-badge.pending   { background: rgba(245,158,11,.12); color: #f59e0b; }
      .firma-status-badge.completed { background: rgba(34,197,94,.12);  color: #22c55e; }
      .firma-status-badge.rejected  { background: rgba(239,68,68,.12);  color: #ef4444; }

      /* ── Modal de análisis expandido ── */
      #doc-analysis-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        backdrop-filter: blur(6px);
        z-index: 1500;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
      }
      #doc-analysis-overlay.open {
        opacity: 1;
        pointer-events: all;
      }
      .doc-analysis-modal {
        background: var(--bg-sidebar);
        border-radius: 16px;
        width: 100%;
        max-width: 680px;
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0,0,0,0.3);
        transform: translateY(10px) scale(0.98);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid var(--border);
      }
      #doc-analysis-overlay.open .doc-analysis-modal {
        transform: translateY(0) scale(1);
      }
      .dam-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 18px 14px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .dam-header-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 12px var(--primary-glow);
      }
      .dam-header-icon svg {
        width: 18px; height: 18px; stroke: white; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      }
      .dam-header-info { flex: 1; min-width: 0; }
      .dam-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-primary);
        font-family: "Space Mono", monospace;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dam-subtitle {
        font-size: 0.63rem;
        color: var(--text-muted);
        margin-top: 1px;
      }
      .dam-close {
        width: 28px; height: 28px;
        border-radius: 7px;
        border: 1px solid var(--border);
        background: var(--bg-input);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        font-size: 16px;
        transition: all 0.18s;
        flex-shrink: 0;
      }
      .dam-close:hover {
        border-color: var(--primary);
        color: var(--primary);
      }

      /* ── Tabs dentro del modal ── */
      .dam-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid var(--border);
        padding: 0 18px;
        flex-shrink: 0;
      }
      .dam-tab {
        padding: 10px 14px;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        font-size: 0.69rem;
        font-weight: 700;
        font-family: "Space Mono", monospace;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s;
        letter-spacing: 0.03em;
      }
      .dam-tab:hover { color: var(--text-primary); }
      .dam-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
      }

      .dam-body {
        flex: 1;
        overflow-y: auto;
        padding: 18px;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
      }

      /* ── Análisis: resumen ── */
      .dam-section {
        margin-bottom: 16px;
      }
      .dam-section-title {
        font-size: 0.63rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--text-muted);
        margin-bottom: 7px;
        font-family: "Space Mono", monospace;
      }
      .dam-tags-row {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
      }
      .dam-tag {
        padding: 3px 9px;
        border-radius: 5px;
        font-size: 0.65rem;
        font-weight: 600;
        background: var(--primary-subtle);
        color: var(--primary);
        border: 1px solid var(--primary-glow);
      }
      .dam-tag.red   { background: rgba(206,17,38,0.08); color: #ce1126; border-color: rgba(206,17,38,0.15); }
      .dam-tag.amber { background: rgba(245,158,11,0.1); color: #b45309; border-color: rgba(245,158,11,0.2); }
      .dam-tag.blue  { background: rgba(59,130,246,0.1); color: #1d4ed8; border-color: rgba(59,130,246,0.2); }
      .dam-tag.purple{ background: rgba(139,92,246,0.1); color: #6d28d9; border-color: rgba(139,92,246,0.2); }
      .dam-prose {
        font-size: 0.77rem;
        line-height: 1.65;
        color: var(--text-primary);
      }
      .dam-prose p { margin-bottom: 8px; }
      .dam-prose p:last-child { margin-bottom: 0; }
      .dam-prose strong { font-weight: 700; color: var(--primary); }

      /* v24.2 — pestaña "Documento original" del modal de análisis */
      .dam-original-text {
        white-space: pre-wrap;
        word-break: break-word;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 11.5px;
        line-height: 1.6;
        color: var(--text-primary);
        background: var(--bg-secondary, rgba(0,0,0,0.03));
        border: 1px solid var(--border-color, rgba(0,0,0,0.08));
        border-radius: 8px;
        padding: 14px;
        max-height: 60vh;
        overflow-y: auto;
      }
      .dam-alert {
        padding: 10px 13px;
        border-radius: 8px;
        font-size: 0.73rem;
        line-height: 1.5;
        display: flex;
        gap: 9px;
        align-items: flex-start;
      }
      .dam-alert.warn  { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.25); color: #92400e; }
      .dam-alert.risk  { background: rgba(239,68,68,0.08);   border: 1px solid rgba(239,68,68,0.2);  color: #991b1b; }
      .dam-alert.ok    { background: rgba(0,104,71,0.07);    border: 1px solid var(--primary-glow);  color: var(--primary-dark); }
      .dam-alert-icon  { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
      [data-theme="dark"] .dam-alert.warn  { color: #fbbf24; }
      [data-theme="dark"] .dam-alert.risk  { color: #f87171; }
      [data-theme="dark"] .dam-alert.ok    { color: #6ee7b7; }
      .dam-divider {
        height: 1px;
        background: var(--border);
        margin: 14px 0;
      }
      .dam-skeleton {
        background: linear-gradient(90deg, var(--border) 25%, var(--bg-input) 50%, var(--border) 75%);
        background-size: 200% 100%;
        animation: skeleton-wave 1.4s ease-in-out infinite;
        border-radius: 6px;
        height: 14px;
        margin-bottom: 8px;
      }
      .dam-skeleton.wide  { width: 100%; }
      .dam-skeleton.mid   { width: 75%; }
      .dam-skeleton.short { width: 50%; }
      @keyframes skeleton-wave {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
      }
      .dam-no-analysis {
        text-align: center;
        padding: 24px 16px;
        color: var(--text-muted);
        font-size: 0.73rem;
        line-height: 1.5;
      }
      .dam-no-analysis span {
        display: block;
        font-size: 28px;
        margin-bottom: 8px;
      }

      /* ── Chat tab en el modal ── */
      .dam-chat-area {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 300px;
      }
      .dam-chat-messages {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
        min-height: 180px;
      }
      .dam-msg {
        max-width: 90%;
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 0.75rem;
        line-height: 1.55;
      }
      .dam-msg.user {
        align-self: flex-end;
        background: var(--bg-msg-user);
        color: var(--text-user-msg);
        border-bottom-right-radius: 3px;
      }
      .dam-msg.ai {
        align-self: flex-start;
        background: var(--bg-msg-ai);
        border: 1px solid var(--border);
        color: var(--text-primary);
        border-bottom-left-radius: 3px;
      }
      .dam-msg.ai strong { color: var(--primary); }
      .dam-chat-input-row {
        display: flex;
        gap: 8px;
        align-items: flex-end;
        flex-shrink: 0;
      }
      .dam-chat-input {
        flex: 1;
        padding: 9px 12px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        background: var(--bg-input);
        color: var(--text-primary);
        font-size: 0.74rem;
        font-family: "DM Sans", sans-serif;
        resize: none;
        min-height: 42px;
        max-height: 100px;
        transition: border-color 0.2s;
        line-height: 1.5;
      }
      .dam-chat-input:focus {
        outline: none;
        border-color: var(--primary);
      }
      .dam-chat-input::placeholder { color: var(--text-muted); }
      .dam-chat-send {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--primary);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.18s;
        box-shadow: 0 2px 8px var(--primary-glow);
      }
      .dam-chat-send:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px var(--primary-glow);
      }
      .dam-chat-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
      .dam-chat-send svg {
        width: 16px; height: 16px; stroke: white; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      }

      /* ── Dot loader ── */
      .dam-typing {
        display: flex;
        gap: 4px;
        align-items: center;
        padding: 8px 12px;
      }
      .dam-typing span {
        width: 5px; height: 5px;
        border-radius: 50%;
        background: var(--primary);
        animation: dam-bounce 1.2s ease-in-out infinite;
      }
      .dam-typing span:nth-child(2) { animation-delay: 0.2s; }
      .dam-typing span:nth-child(3) { animation-delay: 0.4s; }
      @keyframes dam-bounce {
        0%,80%,100% { transform: translateY(0); opacity: 0.4; }
        40%          { transform: translateY(-5px); opacity: 1; }
      }

      /* ── Empty state docs ── */
      .docs-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 20px 12px;
        text-align: center;
        color: var(--text-muted);
      }
      .docs-empty-icon {
        width: 40px; height: 40px;
        border-radius: 10px;
        background: var(--primary-subtle);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
      }
      .docs-empty-icon svg {
        width: 20px; height: 20px;
        stroke: var(--primary); fill: none;
        stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
        opacity: 0.7;
      }
      .docs-empty p {
        font-size: 0.7rem;
        line-height: 1.4;
      }
      .docs-empty strong {
        display: block;
        font-size: 0.73rem;
        font-weight: 700;
        color: var(--text-secondary);
        margin-bottom: 2px;
        font-family: "Space Mono", monospace;
      }

      /* ── Plan upgrade notice en docs ── */
      .docs-upgrade-notice {
        margin: 0 14px 10px;
        padding: 10px 12px;
        border-radius: 8px;
        background: rgba(245,158,11,0.08);
        border: 1px solid rgba(245,158,11,0.22);
        font-size: 0.68rem;
        color: #92400e;
        line-height: 1.45;
        flex-shrink: 0;
        display: none;
      }
      [data-theme="dark"] .docs-upgrade-notice { color: #fbbf24; }
      .docs-upgrade-notice strong { font-weight: 700; }
      .docs-upgrade-notice a {
        color: var(--primary);
        font-weight: 700;
        cursor: pointer;
        text-decoration: underline;
      }

      /* ══════════════════════════════════════════════
         EXPEDIENTES / CASOS — v22.1 (Gestor de Expedientes)
         Reutiliza el lenguaje visual de docs-fs-*, docs-panel-inner,
         docs-list, doc-card, doc-card-action y dam-* (modal genérico) —
         cero CSS duplicado para lo que ya es idéntico visualmente.
         ══════════════════════════════════════════════ */
      #panel-casos {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        flex: 1;
        max-height: 80vh;
        min-height: 70vh;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) transparent;
      }
      #panel-casos.docs-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--bg-app);
        max-height: 100dvh;
        min-height: 100dvh;
        overflow-y: auto;
        padding: 0;
        display: flex !important;
        flex-direction: column;
        animation: docs-fs-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #panel-casos.docs-fullscreen .docs-fs-header { display: flex; }
      #panel-casos.docs-fullscreen .docs-panel-inner {
        max-width: 860px;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 40px;
        flex: 1;
        height: auto;
        min-height: 100%;
        overflow: visible;
      }
      #panel-casos::-webkit-scrollbar { width: 8px; }
      #panel-casos::-webkit-scrollbar-track { background: transparent; }
      #panel-casos::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
      #panel-casos::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

      /* ══════ PANEL AGENDA — mismo patrón que panel-casos ══════ */
      #panel-agenda {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        flex: 1;
        max-height: 80vh;
        min-height: 70vh;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) transparent;
      }
      #panel-agenda.docs-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--bg-app);
        max-height: 100dvh;
        min-height: 100dvh;
        overflow-y: auto;
        padding: 0;
        display: flex !important;
        flex-direction: column;
        animation: docs-fs-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #panel-agenda.docs-fullscreen .docs-fs-header { display: flex; }
      #panel-agenda.docs-fullscreen .docs-panel-inner {
        max-width: 860px;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 40px;
        flex: 1;
        height: auto;
        min-height: 100%;
        overflow: visible;
      }
      #panel-agenda::-webkit-scrollbar { width: 8px; }
      #panel-agenda::-webkit-scrollbar-track { background: transparent; }
      #panel-agenda::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
      #panel-agenda::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

      .doc-card-icon.termino { background: rgba(61,107,255,0.12); }
      .termino-status-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        letter-spacing: 0.03em;
        white-space: nowrap;
      }
      .termino-status-badge.pendiente { background: rgba(61,107,255,0.14); color: var(--primary); }
      .termino-status-badge.urgente   { background: rgba(201,162,39,0.18); color: #c9a227; }
      .termino-status-badge.vencido   { background: rgba(220,53,69,0.16); color: #dc3545; }
      .termino-status-badge.cumplido  { background: rgba(0,150,80,0.14); color: #2e9e5b; }

      /* v24.2 — link al documento del que salió el plazo (auto-detectado o
         manual con caso ligado), + badges de origen/confianza */
      .termino-doc-origen {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 4px;
        font-size: 11px;
        color: var(--text-secondary, #6b7280);
      }
      .termino-doc-origen svg { flex-shrink: 0; opacity: .7; }
      .termino-doc-origen a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .termino-doc-origen a:hover { text-decoration: underline; }
      .termino-origen-badge {
        font-size: 9.5px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 20px;
        letter-spacing: .02em;
        white-space: nowrap;
      }
      .termino-origen-badge.auto        { background: rgba(61,107,255,0.14); color: var(--primary); }
      .termino-origen-badge.conf-alta   { background: rgba(0,150,80,0.14);   color: #2e9e5b; }
      .termino-origen-badge.conf-media  { background: rgba(201,162,39,0.18); color: #c9a227; }
      .termino-origen-badge.conf-baja   { background: rgba(220,53,69,0.16); color: #dc3545; }
      .agenda-alert-banner {
        margin: 12px 14px 0;
        padding: 10px 14px;
        border-radius: 10px;
        background: rgba(220,53,69,0.10);
        border: 1px solid rgba(220,53,69,0.3);
        color: var(--text-primary);
        font-size: 0.78rem;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .agenda-alert-banner.ok {
        background: rgba(0,150,80,0.08);
        border-color: rgba(0,150,80,0.25);
      }

      /* ══════ PANEL CONTACTOS — mismo patrón que panel-casos/agenda ══════ */
      #panel-contactos {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        flex: 1;
        max-height: 80vh;
        min-height: 70vh;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) transparent;
      }
      #panel-contactos.docs-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--bg-app);
        max-height: 100dvh;
        min-height: 100dvh;
        overflow-y: auto;
        padding: 0;
        display: flex !important;
        flex-direction: column;
        animation: docs-fs-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #panel-contactos.docs-fullscreen .docs-fs-header { display: flex; }
      #panel-contactos.docs-fullscreen .docs-panel-inner {
        max-width: 860px;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 40px;
        flex: 1;
        height: auto;
        min-height: 100%;
        overflow: visible;
      }
      #panel-contactos::-webkit-scrollbar { width: 8px; }
      #panel-contactos::-webkit-scrollbar-track { background: transparent; }
      #panel-contactos::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
      #panel-contactos::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

      /* ══════ PANEL LEGAL TRACER — mismo patrón que panel-casos/agenda ══════ */
      #panel-tracer {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        flex: 1;
        max-height: 80vh;
        min-height: 70vh;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) transparent;
      }
      #panel-tracer.docs-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--bg-app);
        max-height: 100dvh;
        min-height: 100dvh;
        overflow-y: auto;
        padding: 0;
        display: flex !important;
        flex-direction: column;
        animation: docs-fs-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #panel-tracer.docs-fullscreen .docs-fs-header { display: flex; }
      #panel-tracer.docs-fullscreen .docs-panel-inner {
        max-width: 860px;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 40px;
        flex: 1;
        height: auto;
        min-height: 100%;
        overflow: visible;
      }
      #panel-tracer::-webkit-scrollbar { width: 8px; }
      #panel-tracer::-webkit-scrollbar-track { background: transparent; }
      #panel-tracer::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
      #panel-tracer::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

      .tracer-textarea {
        width: 100%;
        min-height: 120px;
        background: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 0.85rem;
        color: var(--text-primary);
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.15s;
      }
      .tracer-textarea:focus { outline: none; border-color: var(--primary); }
      .tracer-charcount {
        text-align: right;
        font-size: 0.68rem;
        color: var(--text-muted);
        margin: 4px 2px 12px;
      }
      .tracer-charcount.limite { color: #dc3545; }
      .tracer-section-title {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--primary);
        margin: 18px 0 8px;
      }
      .tracer-primary-box {
        background: rgba(61,107,255,0.06);
        border: 1px solid rgba(61,107,255,0.18);
        border-radius: 10px;
        padding: 14px 16px;
      }
      .tracer-primary-name { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
      .tracer-primary-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
      .tracer-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
      .tracer-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
      .tracer-table th {
        background: var(--bg-input);
        color: var(--text-muted);
        text-align: left;
        padding: 8px 10px;
        font-weight: 700;
        white-space: nowrap;
        border-bottom: 1px solid var(--border);
      }
      .tracer-table td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
        vertical-align: top;
      }
      .tracer-table tr:last-child td { border-bottom: none; }
      .tracer-riesgo-box {
        background: rgba(220,53,69,0.07);
        border: 1px solid rgba(220,53,69,0.22);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 0.8rem;
        color: var(--text-primary);
        line-height: 1.5;
      }
      .tracer-recomendacion-box {
        background: rgba(0,150,80,0.07);
        border: 1px solid rgba(0,150,80,0.22);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 0.8rem;
        color: var(--text-primary);
        line-height: 1.5;
      }
      .tracer-explicacion-box {
        background: rgba(148,109,255,0.07);
        border: 1px solid rgba(148,109,255,0.22);
        border-radius: 10px;
        padding: 14px 16px;
        font-size: 0.82rem;
        color: var(--text-primary);
        line-height: 1.65;
        white-space: pre-line;
      }
      .tracer-actions-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
      .tracer-actions-row .doc-upload-btn { width: auto; flex: 1; min-width: 160px; }
      .tracer-error-box {
        background: rgba(220,53,69,0.08);
        border: 1px solid rgba(220,53,69,0.25);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 0.8rem;
        color: #dc3545;
      }

      .doc-card-icon.contacto { background: rgba(61,107,255,0.12); }
      .contacto-tipo-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        letter-spacing: 0.03em;
        white-space: nowrap;
      }
      .contacto-tipo-badge.cliente           { background: rgba(0,150,80,0.14); color: #2e9e5b; }
      .contacto-tipo-badge.contraparte       { background: rgba(220,53,69,0.16); color: #dc3545; }
      .contacto-tipo-badge.abogado_contrario { background: rgba(220,53,69,0.16); color: #dc3545; }
      .contacto-tipo-badge.testigo           { background: rgba(201,162,39,0.18); color: #c9a227; }
      .contacto-tipo-badge.perito            { background: rgba(61,107,255,0.14); color: var(--primary); }
      .contacto-tipo-badge.otro              { background: var(--bg-input); color: var(--text-muted); }

      /* Búsqueda + chips de filtro (reutilizable) */
      .docs-search-row { padding: 10px 14px 0; }
      .docs-search-input {
        width: 100%;
        background: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 9px 14px;
        font-size: 0.82rem;
        color: var(--text-primary);
        font-family: inherit;
        transition: border-color 0.15s;
      }
      .docs-search-input:focus { outline: none; border-color: var(--primary); }
      .docs-filter-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 14px 0;
      }
      .docs-filter-chip {
        font-size: 0.68rem;
        font-weight: 600;
        padding: 5px 12px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: var(--bg-input);
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .docs-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
      .docs-filter-chip.active { background: var(--primary); border-color: var(--primary); color: white; }
      .contacto-card-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
      .contacto-card-links a {
        font-size: 0.68rem;
        color: var(--primary);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .contacto-card-links a:hover { text-decoration: underline; }

      /* ── Icono de expediente en doc-card reutilizado ── */
      .doc-card-icon.caso { background: rgba(0,104,71,0.12); }

      /* ── Badge de estatus del expediente ── */
      .caso-status-badge {
        font-size: 0.58rem;
        font-weight: 700;
        padding: 1px 7px;
        border-radius: 999px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .caso-status-badge.activo    { background: rgba(0,104,71,0.12);   color: var(--primary); }
      .caso-status-badge.archivado { background: rgba(107,114,128,0.14); color: #6b7280; }
      .caso-status-badge.concluido { background: rgba(59,130,246,0.12);  color: #1d4ed8; }
      [data-theme="dark"] .caso-status-badge.archivado { color: #9ca3af; }
      [data-theme="dark"] .caso-status-badge.concluido { color: #60a5fa; }

      .caso-card-docs-count {
        font-size: 0.59rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 3px;
      }
      .caso-card-docs-count svg {
        width: 10px; height: 10px;
        stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      }

      /* ── Overlays + caja modal (mismo lenguaje que #doc-analysis-overlay,
         IDs propios para no interferir con el modal de documentos) ── */
      #caso-detail-overlay, #caso-form-overlay, #termino-form-overlay, #contacto-form-overlay, #contacto-vincular-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        backdrop-filter: blur(6px);
        z-index: 1500;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
      }
      #caso-detail-overlay.open, #caso-form-overlay.open, #termino-form-overlay.open, #contacto-form-overlay.open, #contacto-vincular-overlay.open {
        opacity: 1;
        pointer-events: all;
      }
      .caso-detail-modal, .caso-form-modal {
        background: var(--bg-sidebar);
        border-radius: 16px;
        width: 100%;
        max-width: 680px;
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0,0,0,0.3);
        transform: translateY(10px) scale(0.98);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid var(--border);
      }
      #caso-detail-overlay.open .caso-detail-modal,
      #caso-form-overlay.open .caso-form-modal,
      #termino-form-overlay.open .caso-form-modal,
      #contacto-form-overlay.open .caso-form-modal,
      #contacto-vincular-overlay.open .caso-form-modal {
        transform: translateY(0) scale(1);
      }
      .caso-form-modal { max-width: 560px; }

      /* ── Formulario crear/editar expediente ── */
      .cf-body {
        flex: 1;
        overflow-y: auto;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
      }
      .cf-row { display: flex; flex-direction: column; gap: 5px; }
      .cf-row.two-col { flex-direction: row; gap: 10px; }
      .cf-row.two-col > div { flex: 1; display: flex; flex-direction: column; gap: 5px; }
      .cf-label {
        font-size: 0.63rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        font-family: "Space Mono", monospace;
      }
      .cf-label .req { color: #ce1126; }
      .cf-input, .cf-select, .cf-textarea {
        padding: 9px 12px;
        border: 1.5px solid var(--border);
        border-radius: 9px;
        background: var(--bg-input);
        color: var(--text-primary);
        font-size: 0.77rem;
        font-family: "DM Sans", sans-serif;
        transition: border-color 0.2s;
        width: 100%;
      }
      .cf-input:focus, .cf-select:focus, .cf-textarea:focus {
        outline: none;
        border-color: var(--primary);
      }
      .cf-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
      .cf-partes-list { display: flex; flex-direction: column; gap: 8px; }
      .cf-parte-row { display: flex; gap: 6px; align-items: center; }
      .cf-parte-row .cf-input { flex: 2; }
      .cf-parte-row .cf-select { flex: 1; }
      .cf-parte-remove {
        width: 30px; height: 30px;
        flex-shrink: 0;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-input);
        color: #ef4444;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.18s;
      }
      .cf-parte-remove:hover { border-color: #ef4444; background: rgba(239,68,68,0.08); }
      .cf-add-parte {
        align-self: flex-start;
        padding: 6px 12px;
        border: 1px dashed var(--border);
        border-radius: 8px;
        background: none;
        color: var(--primary);
        font-size: 0.68rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.18s;
        font-family: "Space Mono", monospace;
      }
      .cf-add-parte:hover { border-color: var(--primary); background: var(--primary-subtle); }
      .cf-footer {
        display: flex;
        gap: 8px;
        padding: 14px 18px;
        border-top: 1px solid var(--border);
        flex-shrink: 0;
      }
      .cf-btn {
        flex: 1;
        padding: 10px;
        border-radius: 9px;
        font-size: 0.72rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        font-family: "Space Mono", monospace;
        border: none;
      }
      .cf-btn.primary { background: var(--primary); color: white; box-shadow: 0 2px 8px var(--primary-glow); }
      .cf-btn.primary:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); }
      .cf-btn.secondary { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); }
      .cf-btn.secondary:hover { border-color: var(--primary); color: var(--primary); }
      .cf-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

      /* ── Footer de acciones del modal de detalle ── */
      .cdm-footer {
        display: flex;
        gap: 6px;
        padding: 12px 18px;
        border-top: 1px solid var(--border);
        flex-shrink: 0;
        flex-wrap: wrap;
      }
      .cdm-footer .doc-card-action { flex: 1; min-width: 80px; }

      /* ── Tab Redactar ── */
      .cdm-redactar-tipos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
      .cdm-tipo-chip {
        padding: 8px 14px;
        border: 1.5px solid var(--border);
        border-radius: 9px;
        background: var(--bg-input);
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.18s;
        font-family: "Space Mono", monospace;
        text-transform: capitalize;
      }
      .cdm-tipo-chip:hover { border-color: var(--primary); color: var(--primary); }
      .cdm-tipo-chip.active { border-color: var(--primary); background: var(--primary-subtle); color: var(--primary); }
      .cdm-redactar-btn {
        width: 100%;
        padding: 11px;
        border: none;
        border-radius: 9px;
        background: var(--primary);
        color: white;
        font-size: 0.74rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        font-family: "Space Mono", monospace;
        box-shadow: 0 2px 8px var(--primary-glow);
        margin-bottom: 14px;
      }
      .cdm-redactar-btn:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); }
      .cdm-redactar-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
      .cdm-resultado { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--bg-input); }
      .cdm-resultado-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
      .cdm-resultado-meta { font-size: 0.6rem; color: var(--text-muted); font-family: "Space Mono", monospace; }
      .cdm-resultado-texto {
        font-size: 0.76rem;
        line-height: 1.7;
        color: var(--text-primary);
        white-space: pre-wrap;
        max-height: 340px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
      }
      .cdm-copy-btn {
        padding: 5px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg-sidebar);
        color: var(--text-secondary);
        font-size: 0.62rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.18s;
        flex-shrink: 0;
      }
      .cdm-copy-btn:hover { border-color: var(--primary); color: var(--primary); }

      /* ── Tab Documentos (dentro del detalle de expediente) ── */
      .cdm-doc-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: 6px;
      }
      .cdm-doc-row-name {
        flex: 1;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: "Space Mono", monospace;
      }
      .cdm-doc-row-action {
        padding: 4px 9px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg-input);
        font-size: 0.6rem;
        font-weight: 700;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.18s;
        flex-shrink: 0;
      }
      .cdm-doc-row-action:hover { border-color: var(--primary); color: var(--primary); }
      .cdm-doc-row-action.danger:hover { border-color: #ef4444; color: #ef4444; }
      .cdm-vincular-row { display: flex; gap: 6px; margin-bottom: 12px; }
      .cdm-vincular-row select { flex: 1; }

      /* source cards */
      .source-card {
        background: var(--card-bg);
        border-radius: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-left: 3px solid var(--primary);
        transition: all 0.2s;
      }
      .source-card:hover {
        border-color: var(--primary);
        background: var(--primary-subtle);
        transform: translateX(2px);
      }
      .source-card a {
        color: var(--primary);
        text-decoration: none;
        font-size: 0.76rem;
        font-weight: 700;
        display: block;
        margin-bottom: 3px;
        font-family: "Space Mono", monospace;
      }
      .source-card .law-name {
        font-size: 0.67rem;
        color: var(--text-secondary);
        line-height: 1.35;
      }
      .source-card .art-info {
        font-size: 0.63rem;
        color: var(--text-muted);
        margin-top: 2px;
      }
      .conf-badge {
        display: inline-block;
        font-size: 0.57rem;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        margin-top: 5px;
        text-transform: uppercase;
        font-family: "Space Mono", monospace;
        letter-spacing: 0.04em;
      }
      .conf-alta {
        background: rgba(34, 197, 94, 0.12);
        color: #22c55e;
      }
      .conf-media {
        background: rgba(245, 158, 11, 0.12);
        color: #f59e0b;
      }
      .conf-baja {
        background: rgba(239, 68, 68, 0.12);
        color: #ef4444;
      }

      /* SJF source card — acento dorado/ámbar para distinguir jurisprudencia */
      .source-card-sjf {
        border-left-color: #3d6bff !important;
      }
      .source-card-sjf a {
        color: #3d6bff !important;
      }
      .source-card-sjf:hover {
        background: rgba(61, 107, 255, 0.07) !important;
        border-color: #3d6bff !important;
      }
      /* Fuente sin link — deshabilitada visualmente */
      .source-no-link {
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--text-muted);
        display: block;
        margin-bottom: 3px;
        font-family: "Space Mono", monospace;
        cursor: default;
      }

      /* history items */
      .history-item {
        background: var(--card-bg);
        border-radius: 10px;
        padding: 9px 11px;
        cursor: pointer;
        transition: all 0.2s;
        border: 1px solid var(--border);
        border-left: 3px solid transparent;
      }
      .history-item:hover {
        background: var(--primary-subtle);
        border-left-color: var(--primary);
      }
      .history-item .hi-title {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px;
      }
      .history-item .hi-date {
        font-size: 0.61rem;
        color: var(--text-muted);
      }
      .history-item .hi-delete {
        float: right;
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 0.68rem;
        transition: color 0.2s;
      }
      .history-item .hi-delete:hover {
        color: var(--primary);
      }

      /* sidebar footer */
      .sidebar-footer {
        padding: 10px 16px;
        font-size: 0.61rem;
        color: var(--text-muted);
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .sidebar-footer .footer-icon {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        background: var(--primary-subtle);
        border: 1px solid var(--primary-glow);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 0 8px var(--primary-glow);
      }
      .sidebar-footer .footer-icon svg {
        width: 13px;
        height: 13px;
        stroke: var(--primary);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .footer-status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--status-color);
        flex-shrink: 0;
        margin-left: auto;
        animation: pulse-status 2s infinite;
      }
      @keyframes pulse-status {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(0, 104, 71, 0.5);
        }
        50% {
          box-shadow: 0 0 0 4px rgba(0, 104, 71, 0);
        }
      }
      [data-theme="dark"] .footer-status-dot {
        animation: pulse-status-green 2s infinite;
      }
      @keyframes pulse-status-green {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(61, 107, 255, 0.5);
        }
        50% {
          box-shadow: 0 0 0 5px rgba(61, 107, 255, 0);
        }
      }

      /* ═══════════════════════════════════════════════
         MAIN CHAT AREA
         ═══════════════════════════════════════════════ */
      .main-chat {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        height: 100%;
      }

      /* HEADER */
      header {
        background: var(--bg-header);
        padding: 11px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        gap: 8px;
        position: relative;
        z-index: 5;
        box-shadow: 0 1px 0 var(--border-light), 0 4px 14px rgba(0, 0, 0, 0.03);
        transition:
          background 0.3s,
          border-color 0.3s;
      }
      [data-theme="dark"] header {
        box-shadow: 0 1px 0 var(--border-light), 0 4px 18px rgba(0, 0, 0, 0.3);
      }
      .header-left {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      #menu-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.2rem;
        color: var(--text-primary);
        padding: 4px;
        display: none;
        flex-shrink: 0;
        border-radius: 6px;
        transition: color 0.2s;
      }
      #menu-btn:hover {
        color: var(--primary);
      }
      @media (max-width: 640px) {
        #menu-btn {
          display: block;
        }
      }

      .header-brand {
        display: flex;
        align-items: baseline;
        gap: 7px;
      }
      .header-brand h1 {
        font-family: "Space Mono", monospace;
        font-size: 1.05rem;
        color: var(--text-primary);
        font-weight: 700;
        letter-spacing: 0.03em;
      }
      .header-brand .hb-version {
        font-size: 0.68rem;
        color: var(--primary);
        font-weight: 700;
        font-family: "Space Mono", monospace;
        opacity: 0.8;
      }

      .header-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
      }

      /* theme toggle button */
      #theme-toggle {
        position: relative;
        width: 52px;
        height: 26px;
        border-radius: 999px;
        background: linear-gradient(135deg, #1a3a2a, #0d1f17);
        border: 1px solid rgba(0, 104, 71, 0.4);
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow:
          inset 0 1px 3px rgba(0, 0, 0, 0.3),
          0 0 8px rgba(0, 104, 71, 0.15);
        overflow: hidden;
      }
      #theme-toggle::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.03),
          transparent
        );
        border-radius: inherit;
      }
      /* thumb */
      #theme-toggle .toggle-thumb {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: linear-gradient(145deg, #00c878, #006847);
        box-shadow:
          0 1px 4px rgba(0, 0, 0, 0.4),
          0 0 8px rgba(0, 200, 120, 0.5);
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
      }
      /* stars decoration */
      #theme-toggle .toggle-stars {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.45rem;
        line-height: 1;
        color: rgba(255, 255, 255, 0.25);
        letter-spacing: -1px;
        transition: opacity 0.3s;
        pointer-events: none;
      }
      /* dark mode state */
      [data-theme="dark"] #theme-toggle {
        background: linear-gradient(135deg, #0a0c14, #10131e);
        border-color: rgba(61, 107, 255, 0.35);
        box-shadow:
          inset 0 1px 3px rgba(0, 0, 0, 0.5),
          0 0 10px rgba(61, 107, 255, 0.1);
      }
      [data-theme="dark"] #theme-toggle .toggle-thumb {
        left: calc(100% - 23px);
        background: linear-gradient(145deg, #e8c96a, #1e3fcc);
        box-shadow:
          0 1px 4px rgba(0, 0, 0, 0.5),
          0 0 10px rgba(61, 107, 255, 0.6);
      }
      [data-theme="dark"] #theme-toggle .toggle-stars {
        right: auto;
        left: 6px;
        opacity: 0;
      }
      #theme-toggle:hover {
        transform: scale(1.06);
        border-color: rgba(0, 200, 120, 0.6);
      }
      [data-theme="dark"] #theme-toggle:hover {
        border-color: rgba(61, 107, 255, 0.6);
      }

      /* confidence badge */
      #conf-global {
        display: none;
        align-items: center;
        gap: 4px;
        font-size: 0.67rem;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        white-space: nowrap;
        font-family: "Space Mono", monospace;
      }
      #conf-global.alta {
        display: flex;
        background: rgba(34, 197, 94, 0.1);
        color: #16a34a;
        border: 1px solid rgba(34, 197, 94, 0.3);
      }
      #conf-global.media {
        display: flex;
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
      }
      #conf-global.baja {
        display: flex;
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.3);
      }
      #conf-global .conf-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .alta .conf-dot {
        background: #22c55e;
      }
      .media .conf-dot {
        background: #f59e0b;
      }
      .baja .conf-dot {
        background: #ef4444;
      }

      /* status indicator */
      .status {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.69rem;
        font-weight: 700;
        color: var(--text-secondary);
        font-family: "Space Mono", monospace;
        letter-spacing: 0.04em;
      }
      .status-dot {
        width: 7px;
        height: 7px;
        background: var(--status-color);
        border-radius: 50%;
        animation: pulse-green 2s infinite;
      }
      @keyframes pulse-green {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(0, 104, 71, 0.5);
        }
        50% {
          box-shadow: 0 0 0 5px rgba(0, 104, 71, 0);
        }
      }
      [data-theme="dark"] .status-dot {
        animation: pulse-green-hdr 2s infinite;
      }
      @keyframes pulse-green-hdr {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(61, 107, 255, 0.6);
        }
        50% {
          box-shadow: 0 0 0 6px rgba(61, 107, 255, 0);
        }
      }

      /* article badge in header */
      .article-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.69rem;
        color: var(--text-secondary);
        background: var(--primary-subtle);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 4px 12px;
        font-family: "Space Mono", monospace;
      }

      /* ═══════════════════════════════════════════════
         CHAT WINDOW
         ═══════════════════════════════════════════════ */
      #chat-window {
        flex: 1;
        padding: 18px 16px;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        gap: 14px;
        background: var(--bg-chat);
        background-image: radial-gradient(
          var(--dot-color) 0.8px,
          transparent 0.8px
        );
        background-size: 22px 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
        transition: background 0.3s;
        position: relative;
      }

      /* dark mode abstract wave/glow overlay */
      [data-theme="dark"] #chat-window::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(
            ellipse 60% 40% at 80% 20%,
            rgba(61, 107, 255, 0.04) 0%,
            transparent 70%
          ),
          radial-gradient(
            ellipse 40% 60% at 20% 80%,
            rgba(80, 100, 160, 0.04) 0%,
            transparent 70%
          );
        z-index: 0;
      }
      [data-theme="dark"] #chat-window > * {
        position: relative;
        z-index: 1;
      }
      #chat-window::-webkit-scrollbar {
        width: 8px;
      }
      #chat-window::-webkit-scrollbar-track {
        background: transparent;
      }
      #chat-window::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 8px;
      }
      #chat-window::-webkit-scrollbar-thumb:hover {
        background: var(--primary-glow);
      }

      /* messages */
      .message {
        max-width: 86%;
        padding: 12px 16px;
        border-radius: 18px;
        font-size: 0.875rem;
        line-height: 1.65;
        animation: fadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px) scale(0.99);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      .ai {
        align-self: flex-start;
        background: var(--bg-msg-ai);
        border: 1px solid var(--border);
        border-bottom-left-radius: 4px;
        box-shadow:
          var(--shadow-sm),
          0 1px 0 rgba(255, 255, 255, 0.4) inset;
        display: flex;
        gap: 12px;
        align-items: flex-start;
        max-width: 90%;
        position: relative;
      }
      [data-theme="dark"] .ai {
        box-shadow:
          var(--shadow-sm),
          0 0 0 1px rgba(255, 255, 255, 0.02) inset;
      }
      .ai::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(
          180deg,
          var(--primary),
          transparent
        );
        opacity: 0.55;
      }
      .ai-icon-wrap {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--primary-subtle);
        border: 1px solid var(--primary-glow);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
        margin-top: 1px;
      }
      [data-theme="dark"] .ai-icon-wrap {
        box-shadow: 0 0 10px var(--primary-glow);
      }
      .ai-body {
        flex: 1;
        min-width: 0;
      }
      .user {
        align-self: flex-end;
        background: linear-gradient(
          135deg,
          var(--primary),
          var(--primary-dark)
        );
        color: white;
        border-bottom-right-radius: 4px;
        box-shadow: var(--shadow-btn);
      }
      [data-theme="dark"] .user {
        background: var(--bg-msg-user);
        color: var(--text-user-msg);
        box-shadow: 0 2px 12px rgba(80, 100, 160, 0.25);
        border: 1px solid rgba(100, 120, 180, 0.2);
      }
      .ai strong {
        color: var(--primary);
      }
      .ai ul,
      .ai ol {
        margin-left: 16px;
        margin-top: 5px;
        margin-bottom: 5px;
      }
      .ai li {
        margin-bottom: 3px;
      }
      .ai p {
        margin-bottom: 7px;
      }
      .ai p:last-child {
        margin-bottom: 0;
      }
      .ai blockquote {
        border-left: 3px solid var(--primary);
        padding: 6px 10px;
        margin: 8px 0;
        background: var(--primary-subtle);
        border-radius: 0 8px 8px 0;
        font-style: italic;
        color: var(--text-secondary);
      }
      .ai h2,
      .ai h3 {
        color: var(--primary);
        margin: 9px 0 5px;
        font-size: 0.92rem;
        border-bottom: 1px solid var(--border);
        padding-bottom: 3px;
      }
      .msg-conf-bar {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.65rem;
        font-weight: 600;
        margin-top: 8px;
        padding-top: 7px;
        border-top: 1px solid var(--border);
        color: var(--text-muted);
        font-family: "Space Mono", monospace;
      }
      .dot-mini {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      /* ═══════════════════════════════════════════════
         DOCUMENT ACTIONS (descargar / editar contrato)
         ═══════════════════════════════════════════════ */
      .doc-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
        position: relative;
      }
      .doc-action-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--bg-bubble);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.01em;
        cursor: pointer;
        transition:
          transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
          background 0.18s,
          color 0.18s,
          border-color 0.18s,
          box-shadow 0.18s;
        font-family: inherit;
        position: relative;
        overflow: hidden;
      }
      .doc-action-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          var(--primary),
          var(--primary-dark)
        );
        opacity: 0;
        transition: opacity 0.18s;
        z-index: 0;
      }
      .doc-action-btn svg,
      .doc-action-btn span {
        position: relative;
        z-index: 1;
      }
      .doc-action-btn:hover {
        color: #fff;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px var(--primary-glow);
      }
      .doc-action-btn:hover::before {
        opacity: 1;
      }
      .doc-action-btn:active {
        transform: translateY(0) scale(0.97);
      }
      .doc-action-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
      }
      .doc-action-btn.doc-action-pdf {
        border-color: var(--primary-glow);
        color: var(--primary);
      }
      .doc-action-btn.doc-action-md {
        border-color: var(--primary-glow);
        color: var(--primary);
      }

      /* ═══════════════════════════════════════════════
         CATÁLOGO DE SERVICIOS (Agentic Commerce) — tarjetas
         integradas al tema gold/indigo, en vez de pills sueltos
         ═══════════════════════════════════════════════ */
      .svc-catalog {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;
      }
      .svc-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 13px 16px;
        border-radius: 14px;
        border: 1px solid var(--gold-border);
        background: linear-gradient(
          135deg,
          var(--gold-glow),
          rgba(0, 0, 0, 0)
        );
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        color: var(--text);
        transition:
          transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
          border-color 0.18s,
          box-shadow 0.18s,
          background 0.18s;
      }
      .svc-card:hover {
        transform: translateY(-2px);
        border-color: var(--gold);
        box-shadow: 0 8px 20px var(--gold-glow);
        background: linear-gradient(
          135deg,
          var(--gold-glow),
          var(--primary-glow)
        );
      }
      .svc-card:active {
        transform: translateY(0) scale(0.98);
      }
      .svc-card:disabled {
        opacity: 0.6;
        cursor: default;
        transform: none;
      }
      .svc-card-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
      }
      .svc-card-name {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: 0.01em;
      }
      .svc-card-desc {
        font-size: 11.5px;
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .svc-card-price {
        flex-shrink: 0;
        padding: 6px 12px;
        border-radius: 999px;
        background: var(--gold);
        color: #0a0f0c;
        font-size: 12.5px;
        font-weight: 800;
        letter-spacing: 0.01em;
        white-space: nowrap;
      }

      /* ═══════════════════════════════════════════════
         LOADER
         ═══════════════════════════════════════════════ */
      .loader-container {
        display: none;
        align-self: flex-start;
        padding-left: 4px;
      }
      .typing-dots {
        display: flex;
        gap: 5px;
        padding: 12px 16px;
        background: var(--bg-msg-ai);
        border-radius: 18px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
      }
      .dot {
        width: 8px;
        height: 8px;
        background: var(--primary);
        border-radius: 50%;
        animation: bounce 1.4s infinite ease-in-out both;
        opacity: 0.6;
      }
      .dot:nth-child(1) {
        animation-delay: -0.32s;
      }
      .dot:nth-child(2) {
        animation-delay: -0.16s;
      }
      @keyframes bounce {
        0%,
        80%,
        100% {
          transform: scale(0);
        }
        40% {
          transform: scale(1);
        }
      }

      /* ═══════════════════════════════════════════════
         INPUT AREA
         ═══════════════════════════════════════════════ */
      .input-area {
        padding: 11px 14px;
        padding-bottom: max(11px, env(safe-area-inset-bottom));
        background: var(--bg-input-area);
        display: flex;
        align-items: center;
        gap: 8px;
        border-top: 1px solid var(--border);
        flex-shrink: 0;
        position: relative;
        z-index: 5;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.03);
        transition:
          background 0.3s,
          border-color 0.3s;
      }
      [data-theme="dark"] .input-area {
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25);
      }
      #user-input {
        flex: 1;
        padding: 12px 18px;
        border-radius: 28px;
        border: 1.5px solid var(--border);
        background: var(--bg-chat);
        color: var(--text-primary);
        font-size: 15px;
        font-family: "DM Sans", sans-serif;
        outline: none;
        transition: all 0.25s;
      }
      #user-input::placeholder {
        color: var(--text-muted);
      }
      #user-input:focus {
        border-color: var(--primary);
        background: var(--bg-msg-ai);
        box-shadow:
          0 0 0 3px var(--primary-subtle),
          0 2px 12px rgba(0, 104, 71, 0.08);
      }

      .action-btn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      #voice-btn {
        background: var(--bg-msg-ai);
        border: 1.5px solid var(--border);
        position: relative;
        overflow: visible;
      }
      #voice-btn .vb-ring {
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1.5px solid var(--primary);
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
      }
      #voice-btn:hover {
        background: var(--primary-subtle);
        border-color: var(--primary);
        transform: scale(1.1);
        box-shadow: 0 0 16px var(--primary-glow);
      }
      #voice-btn:hover .vb-ring {
        opacity: 0.5;
      }
      #voice-btn svg {
        width: 18px;
        height: 18px;
        stroke: var(--primary);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: all 0.2s;
      }
      #voice-btn.recording {
        background: var(--primary);
        border-color: var(--primary);
        box-shadow: 0 0 0 0 var(--primary-glow);
        animation: pulse-rec 1.4s infinite;
      }
      #voice-btn.recording svg {
        stroke: white;
      }
      #voice-btn.recording .vb-wave {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: var(--primary);
        animation: wave-out 1.4s infinite;
        z-index: -1;
      }
      @keyframes wave-out {
        0% {
          transform: scale(1);
          opacity: 0.6;
        }
        100% {
          transform: scale(1.8);
          opacity: 0;
        }
      }
      @keyframes pulse-rec {
        0%,
        100% {
          box-shadow: 0 0 0 0 var(--primary-glow);
        }
        50% {
          box-shadow: 0 0 0 8px transparent;
        }
      }

      #send-btn {
        background: linear-gradient(
          135deg,
          var(--primary),
          var(--primary-dark)
        );
        border: none;
        box-shadow:
          0 4px 16px var(--primary-glow),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        position: relative;
        overflow: hidden;
      }
      #send-btn svg {
        width: 17px;
        height: 17px;
        stroke: white;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #send-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 22px var(--primary-glow);
      }
      #send-btn:hover svg {
        transform: translateX(2px) translateY(-2px);
      }
      #send-btn:active {
        transform: scale(0.96);
      }
      #send-btn:disabled {
        background: var(--border);
        box-shadow: none;
        cursor: not-allowed;
        transform: none;
        opacity: 0.5;
      }

      /* Botón de catálogo de servicios (Agentic Commerce) — mismo
         lenguaje visual que #send-btn pero en gold, para diferenciarlo
         sin que se vea desalineado del resto de action-btn */
      #agentic-servicios-btn {
        background: linear-gradient(135deg, var(--gold), #b8860b);
        border: none;
        box-shadow:
          0 4px 16px var(--gold-glow),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        position: relative;
        overflow: hidden;
      }
      #agentic-servicios-btn svg {
        width: 17px;
        height: 17px;
        stroke: #0a0f0c;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #agentic-servicios-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 22px var(--gold-glow);
      }
      #agentic-servicios-btn:hover svg {
        transform: scale(1.08);
      }
      #agentic-servicios-btn:active {
        transform: scale(0.96);
      }

      /* ═══════════════════════════════════════════════
         MISC
         ═══════════════════════════════════════════════ */
      .empty-hint {
        color: var(--text-muted);
        font-size: 0.71rem;
        font-style: italic;
        text-align: center;
        padding: 12px 0;
      }

      /* ── LEGAL BAR ── */
      .legal-bar {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 7px 20px;
        background: var(--bg-input-area);
        border-top: 1px solid var(--border-light);
        transition: background 0.3s;
      }
      .legal-bar-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--primary);
        opacity: 0.5;
        flex-shrink: 0;
        animation: pulse-status 3s infinite;
      }
      .legal-bar-text {
        font-size: 0.6rem;
        color: var(--text-muted);
        letter-spacing: 0.02em;
        line-height: 1.4;
        text-align: center;
      }
      .legal-bar-text strong {
        color: var(--text-secondary);
        font-weight: 600;
      }
      .legal-bar-link {
        font-size: 0.6rem;
        color: var(--primary);
        text-decoration: none;
        font-weight: 700;
        font-family: "Space Mono", monospace;
        letter-spacing: 0.04em;
        opacity: 0.8;
        white-space: nowrap;
        flex-shrink: 0;
        transition: opacity 0.2s;
        border: 1px solid var(--primary-glow);
        padding: 2px 8px;
        border-radius: 20px;
      }
      .legal-bar-link:hover {
        opacity: 1;
        background: var(--primary-subtle);
      }
      .legal-bar-sep {
        width: 1px;
        height: 12px;
        background: var(--border);
        flex-shrink: 0;
      }
      @media (max-width: 640px) {
        .legal-bar {
          padding: 6px 12px;
          gap: 7px;
        }
        .legal-bar-sep {
          display: none;
        }
      }

      @media (max-width: 640px) {
        .message {
          max-width: 95%;
          font-size: 0.85rem;
        }
        #chat-window {
          padding: 12px 10px;
          gap: 10px;
        }
        .status span:last-child {
          display: none;
        }
      }

      /* ═══════════════════════════════════════════════
         MODAL AVISO LEGAL — compacto, scrolleable, botón siempre visible
         ═══════════════════════════════════════════════ */
      #legal-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background: rgba(8, 10, 15, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      #legal-modal-overlay.hidden {
        display: none;
      }
      .legal-modal {
        position: relative;
        background: #0d1018;
        border: 1px solid rgba(61, 107, 255, 0.18);
        border-radius: 20px;
        width: min(440px, 100%);
        max-height: min(92vh, 640px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow:
          0 0 0 1px rgba(61, 107, 255, 0.06) inset,
          0 32px 80px rgba(0, 0, 0, 0.7);
        animation: lmIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      @keyframes lmIn {
        from { opacity: 0; transform: scale(0.92) translateY(24px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
      }
      .legal-modal::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1.5px;
        background: linear-gradient(90deg,
          transparent 0%,
          rgba(201,168,76,0.7) 30%,
          rgba(255,255,255,0.5) 50%,
          rgba(201,168,76,0.7) 70%,
          transparent 100%);
        border-radius: 20px 20px 0 0;
      }
      .modal-hero {
        padding: 28px 28px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .modal-hero::-webkit-scrollbar { display: none; }
      .modal-logo {
        width: 56px; height: 56px;
        background: rgba(201,168,76,0.1);
        border: 1px solid rgba(201,168,76,0.25);
        border-radius: 14px;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 14px;
        flex-shrink: 0;
      }
      .modal-logo img { width: 36px; height: 36px; object-fit: contain; }
      .modal-brand {
        font-family: "Syne", "DM Sans", sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #eef0f8;
        margin-bottom: 3px;
      }
      .modal-tagline {
        font-size: 0.68rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(201,168,76,0.6);
        font-weight: 600;
        margin-bottom: 20px;
      }
      .modal-notice-card {
        width: 100%;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 14px;
        padding: 16px;
        text-align: left;
      }
      .notice-title {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(201,168,76,0.6);
        margin-bottom: 12px;
        display: flex; align-items: center; gap: 7px;
      }
      .notice-title::before {
        content: "";
        display: inline-block;
        width: 14px; height: 1px;
        background: rgba(201,168,76,0.35);
      }
      .notice-items { display: flex; flex-direction: column; gap: 9px; }
      .notice-item {
        display: flex; align-items: flex-start; gap: 9px;
        font-size: 0.8rem; line-height: 1.5;
        color: rgba(255,255,255,0.5);
      }
      .ni-dot {
        width: 18px; height: 18px;
        border-radius: 5px;
        background: rgba(201,168,76,0.12);
        border: 1px solid rgba(201,168,76,0.22);
        display: flex; align-items: center; justify-content: center;
        font-size: 0.6rem; flex-shrink: 0; margin-top: 1px;
        color: rgba(201,168,76,0.85); font-weight: 700;
      }
      .notice-item strong { color: rgba(255,255,255,0.85); }
      .modal-footer {
        padding: 16px 28px 20px;
        border-top: 1px solid rgba(255,255,255,0.06);
        background: rgba(0,0,0,0.3);
        flex-shrink: 0;
      }
      .modal-checkbox-row {
        display: flex; align-items: flex-start; gap: 10px;
        margin-bottom: 14px; cursor: pointer;
        font-size: 0.8rem; color: rgba(255,255,255,0.45);
        user-select: none; line-height: 1.5;
      }
      .modal-checkbox-row input[type="checkbox"] {
        width: 16px; height: 16px;
        accent-color: #3d6bff;
        cursor: pointer; flex-shrink: 0; margin-top: 2px;
      }
      .modal-checkbox-row a {
        color: rgba(201,168,76,0.8);
        text-decoration: none; font-weight: 600;
        transition: color 0.2s;
      }
      .modal-checkbox-row a:hover { color: #3d6bff; }
      #modal-accept-btn {
        width: 100%;
        padding: 13px;
        background: rgba(201,168,76,0.12);
        border: 1px solid rgba(201,168,76,0.2);
        border-radius: 12px;
        color: rgba(255,255,255,0.28);
        font-size: 0.88rem; font-weight: 700;
        font-family: "DM Sans", sans-serif;
        cursor: not-allowed;
        letter-spacing: 0.04em;
        transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        position: relative; overflow: hidden;
      }
      #modal-accept-btn.enabled {
        background: #3d6bff;
        border-color: #3d6bff;
        color: #080a0f;
        cursor: pointer;
        box-shadow: 0 6px 24px rgba(201,168,76,0.35);
      }
      #modal-accept-btn.enabled::before {
        content: "";
        position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        animation: btnShine 2s ease-in-out infinite;
      }
      @keyframes btnShine { 0% { left: -100%; } 100% { left: 220%; } }
      #modal-accept-btn.enabled:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 32px rgba(201,168,76,0.45);
      }
      #modal-accept-btn.enabled:active { transform: translateY(0); }
      .modal-meta {
        display: flex; justify-content: center; align-items: center;
        gap: 8px; margin-top: 10px;
        font-size: 0.6rem; color: rgba(255,255,255,0.2);
        letter-spacing: 0.04em;
      }
      .modal-meta a {
        color: rgba(255,255,255,0.22); text-decoration: none; transition: color 0.2s;
      }
      .modal-meta a:hover { color: rgba(201,168,76,0.5); }
      .modal-meta .dot-sep { opacity: 0.3; }
      @media (max-width: 480px) {
        .legal-modal { border-radius: 16px; max-height: 95dvh; }
        .modal-hero { padding: 20px 18px 16px; }
        .modal-footer { padding: 14px 18px 16px; }
        .modal-brand { font-size: 1.1rem; }
        .modal-logo { width: 48px; height: 48px; }
      }

      /* ═══════════════════════════════════════════════
         MODAL TÉRMINOS Y CONDICIONES
         ═══════════════════════════════════════════════ */
      #tyc-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: 9998;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }
      #tyc-modal-overlay.hidden {
        display: none;
      }
      .tyc-modal {
        background: var(--bg-sidebar);
        border: 1px solid var(--border);
        border-radius: 18px;
        max-width: 620px;
        width: 100%;
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        animation: lmIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .tyc-header {
        padding: 18px 24px 14px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
      }
      .tyc-header h2 {
        font-family: "Space Mono", monospace;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
      }
      .tyc-close {
        display: none;
      }
      .tyc-body {
        padding: 20px 24px;
        overflow-y: auto;
        flex: 1;
        font-size: 0.83rem;
        line-height: 1.75;
        color: var(--text-secondary);
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
      }
      .tyc-body h3 {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--primary);
        margin: 16px 0 5px;
        padding-bottom: 4px;
        border-bottom: 1px solid var(--border);
      }
      .tyc-body h3:first-child {
        margin-top: 0;
      }
      .tyc-body p {
        margin-bottom: 8px;
      }
      .tyc-body strong {
        color: var(--text-primary);
      }
      .tyc-footer {
        padding: 14px 24px 18px;
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-shrink: 0;
      }
      .tyc-footer-note {
        font-size: 0.68rem;
        color: var(--text-muted);
      }
      .tyc-footer-close {
        padding: 11px 28px;
        background: var(--primary);
        border: none;
        border-radius: 10px;
        color: white;
        font-weight: 700;
        font-size: 0.84rem;
        font-family: "DM Sans", sans-serif;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
      }
      .tyc-footer-close:hover {
        opacity: 0.88;
        transform: translateY(-1px);
      }
      .tyc-footer-close:active {
        transform: translateY(0);
      }

      /* ═══════════════════════════════════════════════
         MODAL AVISO DE PRIVACIDAD
         ═══════════════════════════════════════════════ */
      #privacy-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: 9998;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }
      #privacy-modal-overlay.hidden {
        display: none;
      }
      .privacy-modal {
        background: var(--bg-sidebar);
        border: 1px solid var(--border);
        border-radius: 18px;
        max-width: 620px;
        width: 100%;
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        animation: lmIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .privacy-header {
        padding: 18px 24px 14px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
      }
      .privacy-header-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: var(--primary-subtle);
        border: 1px solid var(--primary-glow);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .privacy-header-icon svg {
        width: 15px;
        height: 15px;
        stroke: var(--primary);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .privacy-header h2 {
        font-family: "Space Mono", monospace;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
        flex: 1;
      }
      .privacy-header .privacy-badge {
        font-size: 0.55rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 20px;
        background: var(--badge-bg);
        color: var(--badge-color);
        border: 1px solid var(--primary-glow);
        font-family: "Space Mono", monospace;
        letter-spacing: 0.05em;
        white-space: nowrap;
      }
      .privacy-body {
        padding: 20px 24px;
        overflow-y: auto;
        flex: 1;
        font-size: 0.83rem;
        line-height: 1.75;
        color: var(--text-secondary);
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
      }
      .privacy-body h3 {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--primary);
        margin: 18px 0 6px;
        padding-bottom: 4px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .privacy-body h3:first-child {
        margin-top: 0;
      }
      .privacy-body h3 .h3-num {
        width: 18px;
        height: 18px;
        border-radius: 5px;
        background: var(--primary-subtle);
        border: 1px solid var(--primary-glow);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.58rem;
        font-family: "Space Mono", monospace;
        color: var(--primary);
        flex-shrink: 0;
      }
      .privacy-body p {
        margin-bottom: 8px;
      }
      .privacy-body strong {
        color: var(--text-primary);
      }
      .privacy-body ul {
        margin: 6px 0 10px 16px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .privacy-body li {
        list-style: none;
        padding-left: 12px;
        position: relative;
      }
      .privacy-body li::before {
        content: "—";
        position: absolute;
        left: 0;
        color: var(--primary);
        font-weight: 700;
        font-size: 0.7rem;
      }
      .privacy-body .arco-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 10px 0;
      }
      .privacy-body .arco-item {
        background: var(--primary-subtle);
        border: 1px solid var(--primary-glow);
        border-radius: 10px;
        padding: 10px 12px;
      }
      .privacy-body .arco-item strong {
        display: block;
        font-size: 0.75rem;
        color: var(--primary);
        margin-bottom: 2px;
        font-family: "Space Mono", monospace;
      }
      .privacy-body .arco-item span {
        font-size: 0.72rem;
        color: var(--text-secondary);
      }
      .privacy-body .contact-box {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-left: 3px solid var(--primary);
        border-radius: 0 10px 10px 0;
        padding: 12px 16px;
        margin: 10px 0;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .privacy-body .contact-box svg {
        width: 18px;
        height: 18px;
        stroke: var(--primary);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
      }
      .privacy-body .contact-box a {
        color: var(--primary);
        font-weight: 700;
        text-decoration: none;
        font-family: "Space Mono", monospace;
        font-size: 0.78rem;
      }
      .privacy-body .contact-box a:hover {
        text-decoration: underline;
      }
      .privacy-footer {
        padding: 14px 24px 18px;
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-shrink: 0;
      }
      .privacy-footer-note {
        font-size: 0.62rem;
        color: var(--text-muted);
        font-family: "Space Mono", monospace;
      }
      .privacy-footer-close {
        padding: 11px 28px;
        background: var(--primary);
        border: none;
        border-radius: 10px;
        color: white;
        font-weight: 700;
        font-size: 0.84rem;
        font-family: "DM Sans", sans-serif;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
        box-shadow: 0 4px 14px var(--primary-glow);
      }
      .privacy-footer-close:hover {
        opacity: 0.88;
        transform: translateY(-1px);
      }

      /* ═══════════════════════════════════════════════
         ACCESSIBILITY / TTS / WAKE-WORD BUTTONS
         ═══════════════════════════════════════════════ */
      .hdr-icon-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--primary-subtle);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        color: var(--text-muted);
        position: relative;
      }
      .hdr-icon-btn svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke 0.2s;
        pointer-events: none;
      }
      .hdr-icon-btn:hover {
        background: var(--primary-subtle);
        border-color: var(--primary);
        color: var(--primary);
        box-shadow: 0 0 12px var(--primary-glow);
        transform: scale(1.08);
      }
      .hdr-icon-btn.active {
        background: var(--primary-subtle);
        border-color: var(--primary);
        color: var(--primary);
        box-shadow: 0 0 14px var(--primary-glow);
      }
      .hdr-icon-btn.active svg {
        stroke: var(--primary);
      }
      .hdr-icon-btn.listening {
        border-color: var(--primary);
        color: var(--primary);
        animation: hdr-pulse 2s infinite;
      }
      @keyframes hdr-pulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 var(--primary-glow);
        }
        50% {
          box-shadow: 0 0 0 6px transparent;
        }
      }
      .hdr-icon-btn[title]:hover::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 7px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--bg-sidebar);
        border: 1px solid var(--border);
        color: var(--text-primary);
        font-size: 0.62rem;
        white-space: nowrap;
        padding: 3px 8px;
        border-radius: 6px;
        pointer-events: none;
        font-family: "Space Mono", monospace;
        letter-spacing: 0.02em;
        z-index: 100;
        box-shadow: var(--shadow-md);
      }
      #voice-toast {
        position: fixed;
        bottom: 90px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: var(--bg-sidebar);
        border: 1px solid var(--primary);
        color: var(--primary);
        font-family: "Space Mono", monospace;
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        padding: 8px 18px;
        border-radius: 999px;
        box-shadow: 0 4px 20px var(--primary-glow);
        opacity: 0;
        transition:
          opacity 0.3s,
          transform 0.3s;
        pointer-events: none;
        z-index: 9999;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      #voice-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
      #voice-toast .vt-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--primary);
        animation: hdr-pulse 1.2s infinite;
        flex-shrink: 0;
      }
      body.a11y-mode #app {
        box-shadow: inset 0 0 0 2px var(--primary-glow);
      }

      /* ══════════════════════════════════════════
         AUTH MODAL — Login / Register
      ══════════════════════════════════════════ */
      #auth-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 8500;
        background: rgba(0, 0, 0, 0.92);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8px);
      }
      #auth-modal-overlay.hidden {
        display: none;
      }

      /* ══════ MODAL PLANES ══════ */
      #plans-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 9000;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(6px);
        padding: 24px;
      }
      #plans-modal-overlay.hidden {
        display: none;
      }
      .plans-modal {
        width: min(960px, 100%);
        max-height: 90vh;
        overflow-y: auto;
        background: var(--bg-sidebar);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: var(--shadow-md);
        animation: auth-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .plans-header {
        padding: 24px 28px 16px;
        text-align: center;
        border-bottom: 1px solid var(--border);
        position: relative;
      }
      .plans-title {
        font-family: "Syne", sans-serif;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--primary);
      }
      .plans-subtitle {
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 6px;
      }
      .plans-close {
        position: absolute;
        top: 14px;
        right: 18px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--bg-app);
        color: var(--text-secondary);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
      }
      .plans-close:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
      }
      .plans-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 14px;
        padding: 24px;
      }
      .plan-card {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--card-bg);
        padding: 18px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
        transition:
          transform 0.15s,
          box-shadow 0.15s;
      }
      .plan-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
      }
      .plan-card.current {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--primary-glow);
      }
      .plan-card.featured {
        border-color: var(--accent);
      }
      .plan-badge {
        position: absolute;
        top: -10px;
        right: 12px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 3px 9px;
        border-radius: 20px;
        background: var(--accent);
        color: #fff;
        text-transform: uppercase;
      }
      .plan-name {
        font-family: "Syne", sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: 1px;
      }
      .plan-subname {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        letter-spacing: 0.5px;
        margin-top: -4px;
      }
      .plan-price {
        font-size: 24px;
        font-weight: 800;
        color: var(--primary);
        line-height: 1.1;
        margin-top: 4px;
      }
      .plan-price span {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-muted);
      }
      .plan-price-note {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: -4px;
      }
      .plan-tagline {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.4;
      }
      .plan-beneficio {
        font-size: 11px;
        line-height: 1.4;
        color: var(--primary);
        background: var(--primary-glow);
        border-radius: 6px;
        padding: 8px 10px;
        font-weight: 600;
      }
      .plan-features {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 12.5px;
        color: var(--text-secondary);
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
      }
      .plan-features li {
        display: flex;
        align-items: flex-start;
        gap: 6px;
      }
      .plan-features li::before {
        content: "✓";
        color: var(--primary);
        font-weight: 700;
        flex-shrink: 0;
      }
      .plan-features li.no::before {
        content: "✕";
        color: var(--text-muted);
      }
      .plan-features li.no {
        color: var(--text-muted);
      }
      .plan-btn {
        margin-top: 4px;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid var(--primary);
        background: transparent;
        color: var(--primary);
        font-weight: 700;
        font-size: 12.5px;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.15s;
        text-transform: uppercase;
      }
      .plan-btn:hover {
        background: var(--primary);
        color: #fff;
      }
      .plan-btn.primary {
        background: var(--primary);
        color: #fff;
      }
      .plan-btn.primary:hover {
        background: var(--primary-dark);
      }
      .plan-btn:disabled {
        opacity: 0.5;
        cursor: default;
        background: var(--bg-app);
        color: var(--text-muted);
        border-color: var(--border);
      }
      .plans-footer {
        text-align: center;
        font-size: 11.5px;
        color: var(--text-muted);
        padding: 0 24px 22px;
      }
      @media (max-width: 760px) {
        .plans-grid {
          grid-template-columns: 1fr;
        }
      }

      .auth-modal {
        width: min(440px, 94vw);
        background: var(--bg-panel);
        border: 1px solid var(--cyan-border);
        border-radius: 10px;
        box-shadow:
          var(--shadow-cyan),
          0 0 60px rgba(0, 200, 255, 0.06);
        overflow: hidden;
        animation: auth-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      @keyframes auth-in {
        from {
          opacity: 0;
          transform: translateY(16px) scale(0.97);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .auth-header {
        padding: 28px 28px 20px;
        background: linear-gradient(
          160deg,
          rgba(0, 200, 255, 0.06) 0%,
          transparent 60%
        );
        border-bottom: 1px solid var(--cyan-border);
        text-align: center;
      }
      .auth-logo {
        width: 52px;
        height: 52px;
        margin: 0 auto 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .auth-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .auth-title {
        font-family: "Syne", sans-serif;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--cyan);
        text-shadow: 0 0 14px var(--cyan-dim);
      }
      .auth-subtitle {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 4px;
        letter-spacing: 0.5px;
      }

      /* Tabs */
      .auth-tabs {
        display: flex;
        border-bottom: 1px solid var(--cyan-border);
      }
      .auth-tab {
        flex: 1;
        padding: 12px 0;
        font-size: 12px;
        letter-spacing: 1px;
        text-align: center;
        color: var(--text-muted);
        border-bottom: 2px solid transparent;
        cursor: pointer;
        background: none;
        border-top: none;
        border-left: none;
        border-right: none;
        font-family: inherit;
        transition: all 0.2s;
      }
      .auth-tab.active {
        color: var(--cyan);
        border-bottom-color: var(--cyan);
      }
      .auth-tab:hover:not(.active) {
        color: var(--text-secondary);
      }

      /* Form body */
      .auth-body {
        padding: 22px 28px 24px;
      }

      .auth-field {
        margin-bottom: 14px;
      }
      .auth-field label {
        display: block;
        font-size: 10px;
        letter-spacing: 1.5px;
        color: var(--text-muted);
        text-transform: uppercase;
        margin-bottom: 5px;
      }
      .auth-field input {
        width: 100%;
        padding: 10px 12px;
        background: var(--bg-input);
        border: 1px solid var(--cyan-border);
        border-radius: 5px;
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 500;
        outline: none;
        transition:
          border-color 0.2s,
          box-shadow 0.2s,
          background 0.2s;
        -webkit-text-fill-color: var(--text-primary);
      }
      .auth-field input:focus {
        border-color: var(--cyan-border);
        box-shadow: 0 0 0 3px var(--cyan-dim);
        background: var(--bg-glass2);
        -webkit-text-fill-color: var(--text-primary);
      }
      .auth-field input::placeholder {
        color: var(--text-muted);
        opacity: 0.7;
        -webkit-text-fill-color: var(--text-muted);
      }
      /* Fix autofill Chrome — evita fondo azul sobre texto */
      .auth-field input:-webkit-autofill,
      .auth-field input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--text-primary) !important;
        box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
        transition: background-color 9999s ease-in-out 0s;
      }

      .auth-error {
        font-size: 11px;
        color: #ef4444;
        padding: 8px 10px;
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.2);
        border-radius: 4px;
        margin-bottom: 12px;
        display: none;
      }
      .auth-error.visible {
        display: block;
      }

      .auth-submit {
        width: 100%;
        padding: 11px;
        background: rgba(0, 200, 255, 0.1);
        border: 1px solid var(--cyan-border);
        border-radius: 5px;
        color: var(--cyan);
        font-family: "Syne", sans-serif;
        font-size: 11px;
        letter-spacing: 2px;
        cursor: pointer;
        transition: all 0.25s;
        position: relative;
        overflow: hidden;
      }
      .auth-submit::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(0, 200, 255, 0.12),
          transparent
        );
        transform: translateX(-100%);
        transition: transform 0.4s;
      }
      .auth-submit:hover::before {
        transform: translateX(100%);
      }
      .auth-submit:hover {
        background: rgba(0, 200, 255, 0.18);
        box-shadow: 0 0 14px rgba(0, 200, 255, 0.15);
      }
      .auth-submit:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      .auth-submit.loading {
        opacity: 0.7;
        pointer-events: none;
      }

      /* Divider */
      .auth-divider {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 14px 0;
      }
      .auth-divider::before,
      .auth-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--cyan-border);
      }
      .auth-divider span {
        font-size: 10px;
        color: var(--text-muted);
        letter-spacing: 1px;
      }

      /* Google button */
      .auth-google {
        width: 100%;
        padding: 10px;
        background: var(--bg-glass);
        border: 1px solid var(--cyan-border);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-primary);
        font-size: 13px;
      }
      .auth-google:hover {
        background: var(--bg-glass2);
      }
      .auth-google svg {
        flex-shrink: 0;
      }

      /* Plan notice */
      .auth-plan-notice {
        margin-top: 14px;
        padding: 10px 12px;
        background: rgba(61, 107, 255, 0.06);
        border: 1px solid var(--gold-border);
        border-radius: 4px;
        font-size: 11px;
        color: var(--text-secondary);
        line-height: 1.5;
        text-align: center;
      }
      .auth-plan-notice strong {
        color: var(--gold);
      }

      .auth-footer-link {
        text-align: center;
        margin-top: 12px;
        font-size: 11px;
        color: var(--text-muted);
      }
      .auth-footer-link a {
        color: var(--cyan);
        cursor: pointer;
      }

      /* Plan limit banner */
      #limit-banner {
        display: none;
        padding: 10px 16px;
        background: rgba(200, 168, 75, 0.1);
        border-top: 1px solid var(--gold-border);
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-shrink: 0;
      }
      #limit-banner.visible {
        display: flex;
      }
      .limit-text {
        font-size: 12px;
        color: var(--gold);
      }
      .limit-text strong {
        color: var(--text-primary);
      }
      .upgrade-btn {
        flex-shrink: 0;
        padding: 6px 14px;
        background: var(--gold-glow);
        border: 1px solid var(--gold-border);
        border-radius: 4px;
        color: var(--gold);
        font-size: 11px;
        font-family: "Syne", sans-serif;
        letter-spacing: 1px;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s;
      }
      .upgrade-btn:hover {
        background: rgba(61, 107, 255, 0.15);
      }

      /* User chip in header */
      .user-chip {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px 3px 6px;
        background: var(--bg-glass);
        border: 1px solid var(--cyan-border);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s;
      }
      .user-chip:hover {
        background: var(--bg-glass2);
      }
      .user-chip-avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--cyan-glow);
        border: 1px solid var(--cyan-border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
      }
      .user-chip-name {
        font-size: 11px;
        color: var(--text-secondary);
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /* v20.0 — Consejo Validador badge en header */
      .hdr-validator-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 7px;
        border-radius: 10px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        background: linear-gradient(135deg, rgba(61,107,255,0.18) 0%, rgba(22,160,133,0.12) 100%);
        border: 1px solid rgba(61,107,255,0.4);
        color: #3d6bff;
        white-space: nowrap;
      }
      /* v20.0 — Micro-formulario de feedback de validadores */
      .validator-feedback-panel {
        margin-top: 14px;
        padding: 14px 16px;
        border-radius: 10px;
        border: 1px solid rgba(61,107,255,0.22);
        background: rgba(61,107,255,0.04);
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .vfp-label {
        font-size: 0.75rem;
        color: var(--text-muted, #888);
        font-weight: 600;
        letter-spacing: 0.03em;
      }
      .vfp-thumbs {
        display: flex;
        gap: 8px;
      }
      .vfp-thumb-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid rgba(120,120,120,0.3);
        background: transparent;
        color: inherit;
        transition: all 0.18s ease;
      }
      .vfp-thumb-btn:hover { transform: scale(1.05); }
      .vfp-thumb-btn.up:hover,
      .vfp-thumb-btn.up.selected  { background: rgba(61,107,255,0.15); border-color: rgba(61,107,255,0.5); color: #3d6bff; }
      .vfp-thumb-btn.down:hover,
      .vfp-thumb-btn.down.selected { background: rgba(231,76,60,0.12); border-color: rgba(231,76,60,0.4); color: #e74c3c; }
      .vfp-comment {
        font-size: 0.8rem;
        padding: 8px 10px;
        border-radius: 7px;
        border: 1px solid rgba(120,120,120,0.25);
        background: rgba(0,0,0,0.12);
        color: inherit;
        resize: none;
        font-family: inherit;
        width: 100%;
        box-sizing: border-box;
        line-height: 1.5;
      }
      .vfp-comment::placeholder { color: rgba(150,150,150,0.7); }
      .vfp-correct-wrap {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
      .vfp-correct-label {
        font-size: 0.74rem;
        color: rgba(231,76,60,0.9);
        font-weight: 600;
        line-height: 1.35;
      }
      .vfp-correct {
        border-color: rgba(231,76,60,0.35);
      }
      .vfp-send-btn {
        align-self: flex-start;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        border: 1px solid rgba(61,107,255,0.4);
        background: rgba(61,107,255,0.12);
        color: #3d6bff;
        transition: all 0.18s;
      }
      .vfp-send-btn:hover { background: rgba(61,107,255,0.22); }
      .vfp-sent-msg {
        font-size: 0.78rem;
        color: #3d6bff;
        font-weight: 600;
      }
      .user-chip-plan {
        font-size: 9px;
        padding: 1px 5px;
        border-radius: 3px;
        letter-spacing: 0.5px;
        font-family: "Share Tech Mono", monospace;
      }
      .plan-gratuito {
        background: rgba(100, 100, 100, 0.15);
        color: #888;
      }
      .plan-basico {
        background: rgba(0, 200, 255, 0.12);
        color: var(--cyan);
      }
      .plan-pro {
        background: rgba(61, 107, 255, 0.15);
        color: var(--gold);
      }
      .plan-educativo {
        background: rgba(34, 197, 94, 0.12);
        color: #22c55e;
      }
      .plan-despacho {
        background: rgba(168, 85, 247, 0.12);
        color: #a855f7;
      }

      /* Sidebar user section */
      .sidebar-user {
        padding: 12px 16px;
        border-bottom: 1px solid var(--cyan-border);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .sidebar-user-info {
        flex: 1;
        min-width: 0;
      }
      .sidebar-user-name {
        font-size: 12px;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .sidebar-user-email {
        font-size: 10px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .sidebar-logout {
        font-size: 11px;
        color: var(--text-muted);
        padding: 4px 8px;
        border-radius: 6px;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.2s;
        background: transparent;
        border: none;
        font-family: inherit;
      }
      .sidebar-logout:hover {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
      }
      .sidebar-account-row {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--cyan-border);
        color: var(--text-secondary);
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.18s;
        text-decoration: none;
      }
      .sidebar-account-row:hover {
        color: var(--primary);
        background: var(--primary-subtle);
      }
      .sidebar-account-row svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        flex-shrink: 0;
      }
      .sidebar-account-row span {
        flex: 1;
      }
      .sidebar-account-row .sar-arrow {
        width: 13px;
        height: 13px;
        opacity: 0.5;
        flex-shrink: 0;
      }

      /* Usage counter */
      .usage-bar-wrap {
        padding: 0 16px 10px;
      }
      .usage-bar-label {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        color: var(--text-muted);
        margin-bottom: 4px;
      }
      .usage-bar-track {
        height: 3px;
        background: var(--bg-glass2);
        border-radius: 2px;
        overflow: hidden;
      }
      .usage-bar-fill {
        height: 100%;
        border-radius: 2px;
        background: var(--cyan);
        transition: width 0.5s;
      }
      .usage-bar-fill.warn {
        background: var(--gold);
      }
      .usage-bar-fill.full {
        background: #ef4444;
      }
    
      .doc-card.analyzing {
        border-color: var(--primary);
        background: rgba(61, 107, 255, 0.05);
      }
      
      .doc-card.analyzing .doc-card-name {
        font-weight: 700;
        color: var(--primary);
      }
    
      /* Dashboard tipo Juriscribe v20.2 */
      .docs-dashboard {
        display: none;
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        background: rgba(0,0,0,0.3);
        border-radius: 8px;
        margin-top: 15px;
      }
      
      .docs-dashboard.active {
        display: flex;
      }
      
      .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--primary);
      }
      
      .dashboard-tabs {
        display: flex;
        gap: 10px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 10px;
      }
      
      .dashboard-tab {
        padding: 8px 16px;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.9em;
        transition: all 0.3s;
      }
      
      .dashboard-tab.active {
        color: var(--primary);
        border-bottom: 2px solid var(--primary);
      }
      
      .dashboard-content {
        display: none;
        padding: 15px;
        background: rgba(0,0,0,0.2);
        border-radius: 4px;
        max-height: 400px;
        overflow-y: auto;
      }
      
      .dashboard-content.active {
        display: block;
      }
      
      .dashboard-riesgos {
        list-style: none;
      }
      
      .dashboard-riesgos li {
        padding: 8px;
        margin: 5px 0;
        background: rgba(239, 68, 68, 0.1);
        border-left: 3px solid #ef4444;
        border-radius: 2px;
        font-size: 0.85em;
      }
      
      .docs-chat {
        margin-top: 15px;
        padding: 15px;
        background: rgba(0,0,0,0.2);
        border-radius: 4px;
        max-height: 300px;
        overflow-y: auto;
      }

    
      .doc-card {
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 6px;
        margin: 8px 0;
        background: rgba(61, 107, 255, 0.02);
        cursor: pointer;
        transition: all 0.3s;
      }
      
      .doc-card:hover {
        background: rgba(61, 107, 255, 0.08);
        border-color: var(--primary);
      }
      
      .doc-card.analyzing {
        border-color: var(--primary);
        background: rgba(61, 107, 255, 0.1);
        animation: pulse 1.5s infinite;
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
      }
      
      .doc-card-name {
        font-weight: 600;
        color: var(--text);
        margin: 5px 0;
      }
      
      .doc-card-status {
        font-size: 0.8em;
        color: var(--primary);
        margin: 3px 0;
      }