/*
 * © 2026 AS Sistemas · Alberto Salafia · Todos los derechos reservados
 * GesDoc — estilos base (v6 · Workspace Pro)
 *
 * Paleta aprobada: azul #1B6B93 / naranja #E8750A / verde #2D9B6F
 * Fondo claro #F4F7FB, superficie #FFFFFF
 * Tipografía: Sora (titulos) + Outfit (cuerpo), self-hosted en /fonts/.
 *
 * Skills aplicados: emil-design-eng (microinteracciones, custom easing) +
 * high-end-visual-design (mesh gradient, magnetic, spotlight) +
 * redesign-existing-projects (auditoría) + taste-skill (anti AI default).
 */

    /* Tipografias self-hosted (variable fonts, cubren todos los pesos) */
    @font-face {
      font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
      src: url('../fonts/outfit-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
      src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Sora'; font-style: normal; font-weight: 100 900; font-display: swap;
      src: url('../fonts/sora-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Sora'; font-style: normal; font-weight: 100 900; font-display: swap;
      src: url('../fonts/sora-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    /* SVG defensive: cualquier SVG inline sin tamaño explícito */
    svg { flex-shrink: 0; }
    svg:not([width]):not([height]) { width: 1em; height: 1em; }

    :root {
      /* paleta AS — preservada del original */
      --c-azul:         #1B6B93;
      --c-azul-dark:    #14567A;
      --c-azul-soft:    #E6F0F7;
      --c-naranja:      #E8750A;
      --c-naranja-soft: #FCEEDF;
      --c-verde:        #2D9B6F;
      --c-verde-soft:   #E0F2EA;
      --c-fondo:        #ECE9E2;
      --c-card:         #FFFFFF;
      --c-borde:        #E2E7EE;
      --c-borde-soft:   #EEF1F5;
      --c-texto:        #0F1626;
      --c-texto-muted:  #5A6478;
      --c-peligro:      #C0392B;
      --c-exito:        #2D9B6F;

      --r-sm: 8px;
      --r-md: 12px;
      --r-lg: 16px;

      --sh-card: 0 1px 2px rgba(20, 86, 122, 0.05), 0 6px 18px -6px rgba(20, 86, 122, 0.10);

      --ff-sans:    'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --ff-display: 'Sora',   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

      /* nuevos tokens v6 (no romper los anteriores) */
      --c-azul-2:       #14567A;
      --c-azul-3:       #0E3F5C;
      --c-azul-line:    #BBD3E3;
      --c-azul-glow:    rgba(27,107,147,.18);
      --c-naranja-2:    #C5630A;
      --c-naranja-line: #F0BC85;
      --c-naranja-glow: rgba(232,117,10,.20);
      --c-verde-2:      #20785A;
      --c-verde-line:   #B0DCC4;

      --surface:    #FFFFFF;
      --surface-2:  #FAFBFD;
      --surface-3:  #EEF3F8;

      --line:    #E2E7EE;
      --line-2:  #D0D7E2;
      --line-3:  #B5BEC9;

      --ink:    #0F1626;
      --ink-2:  #2A3447;
      --ink-3:  #5A6478;
      --mute:   #8590A2;
      --mute-2: #B0B8C5;

      --amber:        #B07D17;
      --amber-soft:   #FBF1DC;
      --red:          #B23A2E;
      --red-soft:     #F5DDD5;
      --violet:       #6D4FB8;
      --violet-soft:  #ECE4F7;

      --sh-0: 0 1px 0 rgba(255,255,255,.6) inset;
      --sh-1: 0 1px 2px rgba(20,86,122,.06);
      --sh-2: 0 1px 2px rgba(20,86,122,.05), 0 6px 18px -6px rgba(20,86,122,.12);
      --sh-3: 0 2px 6px rgba(20,86,122,.06), 0 18px 36px -12px rgba(20,86,122,.16);
      --ring-azul:    0 0 0 3px rgba(27,107,147,.16);
      --ring-naranja: 0 0 0 3px rgba(232,117,10,.18);

      --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
      --ease-fluid:  cubic-bezier(0.32, 0.72, 0, 1);
      --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

      --mono: ui-monospace, 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
    }

    body {
      font-family: var(--ff-sans);
      color: var(--c-texto);
      background: var(--c-fondo);
      min-height: 100dvh;
      -webkit-font-smoothing: antialiased;
      font-size: 15px;
      line-height: 1.5;
      font-feature-settings: 'tnum','ss01','cv11';
      position: relative;
      overflow-x: hidden;
    }

    /* mesh gradient animado de fondo */
    body::before {
      content: '';
      position: fixed; inset: -20%; z-index: -1;
      background:
        radial-gradient(50% 40% at 80% 20%, rgba(27,107,147,0.10), transparent 60%),
        radial-gradient(45% 35% at 15% 80%, rgba(232,117,10,0.08), transparent 65%),
        radial-gradient(35% 30% at 50% 50%, rgba(45,155,111,0.06), transparent 70%);
      pointer-events: none;
      animation: meshDrift 24s var(--ease-in-out) infinite;
    }
    @keyframes meshDrift {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%      { transform: translate(2%, -2%) scale(1.06); }
      66%      { transform: translate(-2%, 2%) scale(1.04); }
    }

    button { font-family: inherit; cursor: pointer; }
    input, select, textarea { font-family: inherit; font-size: inherit; }

    .mono { font-family: var(--mono); font-feature-settings: 'tnum','zero'; }
    .hidden { display: none !important; }
    ::selection { background: var(--c-azul-soft); color: var(--c-azul-dark); }

    /* keyframe stagger entry universal */
    @keyframes revealUp {
      from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
      to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
    }
    @keyframes pulseRing {
      0%   { transform: scale(1);   opacity: 0.6; }
      100% { transform: scale(2.6); opacity: 0;   }
    }

    /* ============== LOGIN SCREEN — TECH REDESIGN ============== */
    /* Navy casi negro + líneas finas futuristas que se cruzan en diagonal
       (sutiles, no invaden) + glow blanco suave arriba a la derecha.
       Scope: solo login. */
    .login-screen {
      --px: 0; --py: 0; /* parallax: seteados por JS con el mouse (desktop) */
      min-height: 100dvh;
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(52% 44% at 100% 0%, rgba(255,255,255,0.13) 0%, rgba(200,230,255,0.04) 26%, transparent 54%),
        radial-gradient(70% 60% at 4% 100%, rgba(28,140,196,0.12) 0%, transparent 58%),
        linear-gradient(165deg, #071726 0%, #050E18 46%, #03080F 100%),
        #03080F;
    }
    /* Grilla técnica fina de cuadros chicos (54px), líneas sutiles cian.
       Reacciona al puntero (parallax sutil) y respira en opacidad. Capa
       grande + mask radial para que se desvanezca y no invada el centro. */
    .login-screen::before {
      content: '';
      position: absolute; inset: -180px; z-index: -1;
      background-image:
        linear-gradient(rgba(96,206,250,0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96,206,250,0.075) 1px, transparent 1px);
      background-size: 54px 54px, 54px 54px;
      -webkit-mask-image: radial-gradient(125% 105% at 50% 40%, #000 22%, transparent 80%);
      mask-image: radial-gradient(125% 105% at 50% 40%, #000 22%, transparent 80%);
      transform: translate3d(calc(var(--px) * 16px), calc(var(--py) * 16px), 0);
      transition: transform 480ms var(--ease-out);
      animation: loginBeamBreathe 7.5s var(--ease-out) infinite;
      will-change: transform, opacity;
    }
    /* Segunda capa de profundidad: grilla mayor que parallaxea al revés
       (más lento, sensación de capas). Da el "momento de firma" tech. */
    .login-screen::after {
      content: '';
      position: absolute; inset: -180px; z-index: -1;
      background-image:
        linear-gradient(rgba(108,212,250,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108,212,250,0.05) 1px, transparent 1px);
      background-size: 162px 162px, 162px 162px;
      -webkit-mask-image: radial-gradient(120% 100% at 50% 42%, #000 14%, transparent 74%);
      mask-image: radial-gradient(120% 100% at 50% 42%, #000 14%, transparent 74%);
      transform: translate3d(calc(var(--px) * -26px), calc(var(--py) * -26px), 0);
      transition: transform 620ms var(--ease-out);
      will-change: transform;
    }
    @keyframes loginBeamBreathe {
      0%, 100% { opacity: 0.55; }
      50%      { opacity: 0.9; }
    }
    @media (prefers-reduced-motion: reduce) {
      .login-screen::before { animation: none; opacity: 0.62; transform: none; }
      .login-screen::after  { transform: none; }
    }

    /* ---- HERO PORTAL (estilo portal premium, no card) ---- */
    .login-shell {
      position: relative; z-index: 1;
      width: 100%; max-width: 440px;
      display: flex; flex-direction: column; align-items: center;
      text-align: center;
      padding: 8px 24px;
    }
    .login-shell > * {
      opacity: 0; transform: translateY(14px);
      animation: revealUp 760ms var(--ease-out) forwards;
    }
    .login-logo  { animation-delay: 40ms; }
    .login-eyebrow { animation-delay: 120ms; }
    .login-wordmark { animation-delay: 180ms; }
    .login-rule  { animation-delay: 240ms; }
    .login-tagline { animation-delay: 300ms; }
    .login-switch { animation-delay: 380ms; }

    /* Isotipo con halo radiante detrás (como la referencia) */
    .login-logo {
      width: 88px; height: 88px; margin-bottom: 26px;
      border-radius: 22px;
      background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(108,212,250,0.05) 100%);
      display: flex; align-items: center; justify-content: center;
      color: #EAF6FF;
      font-family: var(--ff-display); font-weight: 800; font-size: 32px; letter-spacing: -0.05em;
      border: 1px solid rgba(120, 200, 255, 0.22);
      box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.20),
        0 16px 44px -10px rgba(43, 169, 224, 0.50);
      position: relative;
    }
    .login-logo::before {
      content: '';
      position: absolute; inset: -70px; z-index: -1;
      background: radial-gradient(circle, rgba(43,169,224,0.34) 0%, rgba(43,169,224,0.10) 38%, transparent 70%);
      animation: loginHaloPulse 5.5s var(--ease-out) infinite;
    }
    .login-logo img { width: 100%; height: 100%; object-fit: contain; padding: 9px; position: relative; z-index: 1; }
    @keyframes loginHaloPulse {
      0%, 100% { opacity: 0.65; transform: scale(1); }
      50%      { opacity: 1;    transform: scale(1.08); }
    }

    .login-eyebrow {
      font-family: var(--mono);
      font-size: 11px; font-weight: 500;
      letter-spacing: 0.34em; text-transform: uppercase;
      color: #5FB8E6;
      margin-bottom: 16px;
    }
    .login-wordmark {
      margin: 0;
      font-family: var(--ff-display);
      font-weight: 800;
      font-size: clamp(58px, 15.5vw, 108px);
      line-height: 0.92; letter-spacing: -0.045em;
      color: #F6FBFF;
      text-shadow: 0 2px 30px rgba(43,169,224,0.18);
    }
    .login-wordmark .accent {
      background: linear-gradient(135deg, #7FDBFF 0%, #2BA9E0 55%, #1872B0 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      filter: drop-shadow(0 2px 22px rgba(43,169,224,0.40));
    }
    .login-rule {
      width: 56px; height: 1px; margin: 24px 0 20px;
      background: linear-gradient(90deg, transparent, rgba(108,212,250,0.7), transparent);
    }
    .login-tagline {
      margin: 0 0 32px;
      font-size: 15px; line-height: 1.6;
      color: #9EBCD0; max-width: 380px;
    }

    /* ---- SWITCH: paso 1 (CTA) y paso 2 (form) NO se apilan: cada uno
       ocupa su alto natural (sin hueco muerto). El inactivo es display:none;
       el que entra anima opacity/transform via keyframe. ---- */
    .login-switch { width: 100%; }
    .login-cta-wrap {
      display: flex; justify-content: center; padding-top: 4px;
      animation: loginStepIn 420ms var(--ease-out) both;
    }
    .login-form { display: none; }
    .login-screen.is-form .login-cta-wrap { display: none; }
    .login-screen.is-form .login-form {
      display: block;
      animation: loginStepIn 360ms var(--ease-out) both;
    }
    @keyframes loginStepIn {
      from { opacity: 0; transform: translateY(14px) scale(0.985); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    /* Micro-momento de "reconfiguración": al pasar al form el logo se
       achica apenas y el halo se calma — la pantalla se acomoda para vos. */
    .login-logo {
      transition: transform 420ms var(--ease-out);
    }
    .login-screen.is-form .login-logo { transform: scale(0.86); }
    .login-screen.is-form .login-logo::before { animation-play-state: paused; opacity: 0.5; }

    .login-enter {
      display: inline-flex; align-items: center; gap: 12px;
      padding: 16px 38px;
      background: linear-gradient(135deg, #2BA9E0 0%, #1E7FBF 100%);
      color: #fff; border: none; border-radius: 999px;
      font-family: var(--ff-display);
      font-size: 14px; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 14px 36px -8px rgba(43,169,224,0.62), 0 0 0 1px rgba(108,212,250,0.25) inset;
      transition: filter 220ms var(--ease-out), transform 180ms var(--ease-fluid), box-shadow 220ms var(--ease-out);
    }
    .login-enter svg { width: 16px; height: 16px; transition: transform 240ms var(--ease-fluid); }
    @media (hover: hover) and (pointer: fine) {
      .login-enter:hover { filter: brightness(1.10); box-shadow: 0 18px 46px -8px rgba(43,169,224,0.82), 0 0 0 1px rgba(108,212,250,0.45) inset; }
      .login-enter:hover svg { transform: translateX(5px); }
    }
    .login-enter:active { transform: scale(0.97); }

    @media (prefers-reduced-motion: reduce) {
      .login-cta-wrap, .login-screen.is-form .login-form { animation: none; }
      .login-logo, .login-screen.is-form .login-logo { transition: none; transform: none; }
    }

    .login-back {
      display: inline-block; margin-top: 18px;
      background: none; border: none; cursor: pointer;
      font-family: var(--mono);
      font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
      color: #6E8AA0;
      transition: color 200ms var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .login-back:hover { color: #6CD4FA; }
    }

    @media (prefers-reduced-motion: reduce) {
      .login-shell > * { animation: none; opacity: 1; transform: none; }
      .login-logo::before { animation: none; }
    }
    .login-field { margin-bottom: 16px; }
    .login-field label {
      display: block; font-size: 11px; font-weight: 600;
      color: #8FB0C6; letter-spacing: 0.08em;
      text-transform: uppercase; margin-bottom: 7px;
    }
    .login-field input {
      width: 100%; padding: 12px 14px;
      border: 1px solid rgba(120, 200, 255, 0.16);
      border-radius: var(--r-sm);
      background: rgba(255, 255, 255, 0.045); color: #EAF6FF;
      outline: none;
      transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .login-field input::placeholder { color: #6E8AA0; }
    /* El autofill de Chrome pisa el fondo oscuro con un blanco/amarillo feo.
       Forzamos el look glass oscuro tambien en estado autofilled. El trick
       del box-shadow inset gigante "pinta" el fondo sin que el navegador lo
       resetee; transition larguisima evita el flash blanco inicial. */
    .login-field input:-webkit-autofill,
    .login-field input:-webkit-autofill:hover,
    .login-field input:-webkit-autofill:focus,
    .login-field input:-webkit-autofill:active {
      -webkit-text-fill-color: #EAF6FF;
      caret-color: #EAF6FF;
      -webkit-box-shadow: 0 0 0 1000px #0E2236 inset;
      box-shadow: 0 0 0 1000px #0E2236 inset;
      border: 1px solid rgba(120, 200, 255, 0.16);
      transition: background-color 600000s 0s, color 600000s 0s;
    }
    .login-field input:-webkit-autofill:focus {
      border-color: #4FC0F5;
      -webkit-box-shadow: 0 0 0 1000px #0E2236 inset, 0 0 0 4px rgba(79, 192, 245, 0.18), 0 0 18px -2px rgba(79, 192, 245, 0.25);
      box-shadow: 0 0 0 1000px #0E2236 inset, 0 0 0 4px rgba(79, 192, 245, 0.18), 0 0 18px -2px rgba(79, 192, 245, 0.25);
    }
    .login-field input:focus {
      border-color: #4FC0F5;
      background: rgba(255, 255, 255, 0.07);
      box-shadow: 0 0 0 4px rgba(79, 192, 245, 0.18), 0 0 18px -2px rgba(79, 192, 245, 0.25);
    }
    .login-btn {
      width: 100%; padding: 14px 16px;
      background: linear-gradient(135deg, #2BA9E0 0%, #1E7FBF 100%);
      color: #fff;
      border: none; border-radius: var(--r-sm);
      font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
      margin-top: 12px;
      cursor: pointer;
      transition: filter 220ms var(--ease-out), transform 180ms var(--ease-fluid), box-shadow 220ms var(--ease-out);
      box-shadow: 0 8px 24px -6px rgba(43, 169, 224, 0.55), 0 0 0 1px rgba(108, 212, 250, 0.20) inset;
    }
    @media (hover: hover) and (pointer: fine) {
      .login-btn:hover {
        filter: brightness(1.08);
        box-shadow: 0 12px 32px -6px rgba(43, 169, 224, 0.70), 0 0 0 1px rgba(108, 212, 250, 0.35) inset;
      }
    }
    .login-btn:active { transform: scale(0.97); }
    .login-btn:disabled { opacity: .6; cursor: not-allowed; }
    .login-error {
      margin-top: 14px; padding: 10px 12px;
      background: rgba(192, 57, 43, 0.16); color: #FFB4A8;
      border-radius: var(--r-sm); font-size: 13px;
      border: 1px solid rgba(255, 120, 100, 0.30);
    }
    .login-footer {
      margin-top: 40px; text-align: center;
      font-family: var(--mono);
      font-size: 10.5px; color: #5A7388;
      letter-spacing: 0.18em; text-transform: uppercase;
      animation-delay: 460ms;
    }

    /* ============== APP SHELL ============== */
    .app-shell { display: flex; flex-direction: column; min-height: 100dvh; }

    .app-header {
      background: rgba(255,255,255,0.78);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      color: var(--c-texto);
      padding: 12px clamp(16px, 3vw, 28px);
      display: flex; align-items: center; gap: 14px;
      position: sticky; top: 0; z-index: 10;
      min-height: 60px;
      border-bottom: 1px solid var(--line);
      box-shadow: var(--sh-1);
    }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand-logo {
      width: 38px; height: 38px; border-radius: 10px;
      background: linear-gradient(135deg, var(--c-azul) 0%, var(--c-azul-2) 100%);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--ff-display);
      font-weight: 800; font-size: 14px; letter-spacing: -0.05em;
      color: #fff;
      overflow: hidden;
      box-shadow: inset 0 1px 1px rgba(255,255,255,.18), 0 4px 12px -4px var(--c-azul-glow);
      position: relative;
      transition: transform 220ms var(--ease-fluid);
      cursor: pointer;
    }
    .brand-logo:active { transform: scale(0.94); }
    /* holographic foil al hover */
    .brand-logo::before {
      content: '';
      position: absolute; inset: 0;
      background: conic-gradient(from 200deg at 50% 50%,
        transparent 0deg,
        rgba(255,255,255,.0) 60deg,
        rgba(232,117,10,.25) 110deg,
        rgba(255,255,255,.4) 140deg,
        rgba(27,107,147,.3) 180deg,
        rgba(255,255,255,.0) 240deg,
        transparent 360deg);
      opacity: 0;
      mix-blend-mode: overlay;
      transition: opacity 600ms var(--ease-out), transform 1.2s var(--ease-out);
      pointer-events: none;
    }
    .brand-logo:hover::before {
      opacity: 1; transform: rotate(360deg);
    }
    .brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; position: relative; z-index: 1; }
    .brand-text h1 {
      margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.018em;
      font-family: var(--ff-display);
      color: var(--c-texto);
    }
    .brand-text p {
      margin: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
      color: var(--c-texto-muted);
      letter-spacing: 0.1em; text-transform: uppercase;
      margin-top: 2px;
    }

    .app-header .spacer { flex: 1; }

    /* badge naranja del header (rol del usuario) */
    .user-badge {
      background: var(--c-naranja-soft);
      color: var(--c-naranja-2);
      font-size: 10px; font-weight: 700;
      padding: 5px 11px;
      border-radius: 999px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      line-height: 1;
      display: inline-flex; align-items: center; gap: 6px;
      height: 24px;
      white-space: nowrap;
      border: 1px solid var(--c-naranja-line);
    }
    .user-badge::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: var(--c-naranja);
    }

    .icon-btn {
      width: 36px; height: 36px; border-radius: 9px;
      background: var(--surface); border: 1px solid var(--line);
      color: var(--ink-2);
      font-size: 14px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: var(--sh-0), var(--sh-1);
      transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    /* Fix: el atributo [hidden] del browser usa display:none, pero el .icon-btn
       con display:flex lo pisa. Reforzamos para que hidden esconda de verdad. */
    .icon-btn[hidden] { display: none !important; }
    .icon-btn:hover { border-color: var(--line-2); background: var(--surface-2); }
    .icon-btn:active { transform: scale(0.94); }
    .icon-btn svg { width: 15px; height: 15px; }

    /* hairline gradient azul→naranja debajo del header (firma de marca) */
    .app-header::after {
      content: '';
      position: absolute; left: 0; right: 0; bottom: -2px;
      height: 2px;
      background: linear-gradient(90deg, var(--c-azul) 0%, var(--c-azul) 38%, var(--c-naranja) 62%, var(--c-naranja) 100%);
      opacity: 0.85;
      pointer-events: none;
    }

    /* Tabs desktop */
    .tabs-desktop {
      background: rgba(255,255,255,0.5);
      backdrop-filter: saturate(180%) blur(12px);
      -webkit-backdrop-filter: saturate(180%) blur(12px);
      border-bottom: 1px solid var(--line);
      display: flex; padding: 0 clamp(16px, 3vw, 28px);
      position: sticky; top: 60px; z-index: 9;
    }
    .tabs-desktop button {
      background: transparent; border: 0;
      padding: 13px 16px;
      font-size: 13.5px; font-weight: 500;
      color: var(--ink-3);
      position: relative;
      cursor: pointer;
      transition: color 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .tabs-desktop button:hover { color: var(--c-texto); }
    .tabs-desktop button:active { transform: scale(0.97); }
    .tabs-desktop button.active {
      color: var(--c-azul);
      font-weight: 600;
    }
    .tabs-desktop button.active::after {
      content: '';
      position: absolute; left: 16px; right: 16px; bottom: -1px;
      height: 2px;
      background: linear-gradient(90deg, var(--c-azul) 0%, var(--c-naranja) 100%);
      border-radius: 2px 2px 0 0;
    }

    main.app-main {
      flex: 1;
      padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 28px);
      padding-bottom: 96px;
      max-width: 1640px; width: 100%;
      margin: 0 auto;
    }

    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* Tab Inicio: layout grid con primary + aside (panel "Hoy") */
    #tab-inicio.tab-panel.active {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 304px;
      gap: 24px;
      align-items: start;
    }
    #tab-inicio .primary { min-width: 0; display: flex; flex-direction: column; }

    /* Bottom nav mobile */
    .bottom-nav {
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(255,255,255,0.92);
      backdrop-filter: saturate(180%) blur(16px);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      border-top: 1px solid var(--line);
      display: flex; justify-content: space-around;
      padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
      z-index: 10;
    }
    .bottom-nav button {
      flex: 1; background: transparent; border: 0;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      padding: 6px 4px;
      color: var(--ink-3);
      font-size: 11px; font-weight: 500;
      cursor: pointer;
      transition: color 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .bottom-nav button:hover { color: var(--c-texto); }
    .bottom-nav button:active { transform: scale(0.94); }
    .bottom-nav button.active { color: var(--c-azul); font-weight: 600; }
    .bottom-nav svg { width: 22px; height: 22px; }

    @media (min-width: 768px) {
      /* En desktop tambien se muestra la bottom-nav con iconos. */
      main.app-main { padding-bottom: 76px; }
    }
    @media (max-width: 1180px) {
      #tab-inicio.tab-panel.active {
        grid-template-columns: 1fr;
      }
      #tab-inicio aside.today-aside {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
        position: static !important;
      }
    }
    @media (max-width: 880px) {
      #tab-inicio aside.today-aside {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 767px) {
      .tabs-desktop { display: none; }
      .app-header { position: static; }
      .tabs-desktop { position: static; }
    }

    /* ============== INICIO ============== */

    /* Buscador global en Inicio */
    .global-search { position: relative; margin-bottom: 18px;
      opacity: 0; transform: translateY(8px); filter: blur(6px);
      animation: revealUp 600ms var(--ease-out) forwards;
    }
    .gs-input-wrap {
      display: flex; align-items: center;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 14px;
      box-shadow: var(--sh-0), var(--sh-1);
      transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .gs-input-wrap:focus-within {
      border-color: var(--c-azul);
      box-shadow: var(--ring-azul);
    }
    .gs-icon { width: 18px; height: 18px; color: var(--mute); flex-shrink: 0; margin-right: 10px; }
    .gs-input-wrap input {
      flex: 1; border: 0; outline: 0; background: transparent;
      padding: 11px 4px; font-family: var(--ff-sans); font-size: 14px;
      color: var(--c-texto);
    }
    .gs-clear {
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--surface-3); border: 0; color: var(--ink-3);
      cursor: pointer; font-size: 14px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .gs-clear:hover { background: var(--c-borde); color: var(--c-texto); }
    .gs-clear:active { transform: scale(0.92); }
    .gs-clear svg { width: 14px; height: 14px; }
    .gs-results {
      position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
      background: var(--c-card);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      box-shadow: var(--sh-3);
      max-height: 420px; overflow-y: auto;
      opacity: 0; transform: translateY(-4px);
      animation: revealUp 280ms var(--ease-out) forwards;
    }
    .gs-group-title {
      font-family: var(--mono);
      font-size: 10px; font-weight: 600;
      color: var(--mute); letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 12px 14px 4px;
    }
    .gs-item {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 14px; cursor: pointer;
      border-top: 1px solid var(--c-borde-soft);
      transition: background 180ms var(--ease-out);
    }
    .gs-item:hover { background: var(--c-azul-soft); }
    .gs-item-badge {
      width: 36px; height: 36px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--ff-display); font-size: 11px; font-weight: 700;
      letter-spacing: 0.04em; flex-shrink: 0;
      box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
      border: 1px solid;
    }
    .gs-item-badge[data-kind="cliente"]     { background: var(--c-azul-soft);    color: var(--c-azul);    border-color: var(--c-azul-line); }
    .gs-item-badge[data-kind="informe"]     { background: var(--c-azul-soft);    color: var(--c-azul);    border-color: var(--c-azul-line); }
    .gs-item-badge[data-kind="remito"]      { background: var(--c-naranja-soft); color: var(--c-naranja); border-color: var(--c-naranja-line); }
    .gs-item-badge[data-kind="presupuesto"] { background: var(--c-verde-soft);   color: var(--c-verde);   border-color: var(--c-verde-line); }
    .gs-item-badge[data-kind="acta"]        { background: rgba(124,92,196,.14); color: #7C5CC4; border-color: rgba(124,92,196,.30); }

    /* Nota legal en el acta de retiro impresa (constancia de entrega) */
    .doc-print-acta-legal p {
      font-size: 12px; line-height: 1.5; color: var(--c-texto-muted, #6B7280);
      font-style: italic; margin: 0; padding: 10px 0 2px;
    }
    .gs-item-body { flex: 1; min-width: 0; }
    .gs-item-title { font-size: 14px; font-weight: 600; color: var(--c-texto); }
    .gs-item-meta  { font-size: 11.5px; color: var(--c-texto-muted); margin-top: 1px; }
    .gs-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--c-texto-muted); }

    /* PENDIENTES BAR (NUEVO) */
    .pendientes-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 11px;
      box-shadow: var(--sh-0), var(--sh-1);
      margin-bottom: 18px;
      flex-wrap: wrap;
      opacity: 0; transform: translateY(8px); filter: blur(6px);
      animation: revealUp 600ms var(--ease-out) 80ms forwards;
    }
    .pendientes-bar__label {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--mono); font-size: 10.5px; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-3);
      padding-right: 8px;
      border-right: 1px solid var(--line);
      margin-right: 4px;
    }
    .pendientes-bar__label svg { width: 13px; height: 13px; color: var(--c-naranja); }
    .pendientes-bar__label .count {
      color: var(--c-naranja-2); background: var(--c-naranja-soft);
      border: 1px solid var(--c-naranja-line);
      padding: 1px 6px; border-radius: 999px; font-size: 10px;
    }
    .pend-chip {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 10px;
      background: var(--surface-3);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 12.5px; color: var(--ink-2);
      text-decoration: none;
      cursor: pointer;
      transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out), transform 220ms var(--ease-fluid);
    }
    .pend-chip:hover { background: var(--surface); border-color: var(--line-2); transform: translateY(-1px); }
    .pend-chip:active { transform: scale(0.97); }
    .pend-chip .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; position: relative; }
    .pend-chip .dot.amber  { background: var(--amber); }
    .pend-chip .dot.violet { background: var(--violet); }
    .pend-chip .dot.red    { background: var(--c-naranja); }
    .pend-chip .dot.red::after {
      content: ''; position: absolute; inset: 0;
      border-radius: 50%; background: var(--c-naranja);
      animation: pulseRing 2s ease-out infinite;
    }
    .pend-chip strong { font-weight: 600; color: var(--c-texto); }
    .pend-chip .meta { color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }
    .pendientes-bar__see {
      margin-left: auto;
      font-size: 12.5px; font-weight: 500;
      color: var(--c-azul);
      text-decoration: none;
      padding: 4px 8px; border-radius: 6px;
      transition: background 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .pendientes-bar__see:hover { background: var(--c-azul-soft); }
    .pendientes-bar__see:active { transform: scale(0.97); }

    /* Stats cards (border-left + sparkline + spotlight) */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
    .stat-card {
      background: var(--c-card);
      border: 1px solid var(--line);
      border-left: 3px solid var(--stat-color, var(--c-azul));
      border-radius: var(--r-md);
      padding: 12px 14px 10px;
      box-shadow: var(--sh-0), var(--sh-1);
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out);
      opacity: 0; transform: translateY(14px); filter: blur(8px);
      animation: revealUp 700ms var(--ease-out) forwards;
      --mx: 50%; --my: 50%;
    }
    .stat-card:nth-child(1) { animation-delay: 160ms; }
    .stat-card:nth-child(2) { animation-delay: 240ms; }
    .stat-card:nth-child(3) { animation-delay: 320ms; }

    /* spotlight border que sigue al cursor */
    .stat-card::after {
      content: '';
      position: absolute; inset: 0;
      border-radius: var(--r-md);
      background: radial-gradient(180px circle at var(--mx) var(--my), var(--stat-glow, rgba(27,107,147,0.14)), transparent 60%);
      opacity: 0;
      transition: opacity 350ms var(--ease-out);
      pointer-events: none;
    }
    @media (hover: hover) and (pointer: fine) {
      .stat-card:hover {
        box-shadow: var(--sh-0), var(--sh-2);
        transform: translateY(-2px);
        border-top-color: var(--line-2);
        border-right-color: var(--line-2);
        border-bottom-color: var(--line-2);
      }
      .stat-card:hover::after { opacity: 1; }
    }
    .stat-card > * { position: relative; z-index: 1; }

    .stat-card-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .stat-card-head .stat-ico {
      width: 32px; height: 32px;
      border-radius: 8px;
      display: grid; place-items: center;
      border: 1px solid var(--line);
      box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
      transition: transform 350ms var(--ease-spring);
    }
    .stat-card:hover .stat-card-head .stat-ico { transform: rotate(-4deg) scale(1.05); }
    .stat-card-head .stat-ico svg { width: 14px; height: 14px; }
    .stat-card .stat-num {
      font-family: var(--ff-display);
      font-size: 26px; font-weight: 800; line-height: 0.95;
      letter-spacing: -0.04em;
      color: var(--c-texto);
      font-feature-settings: 'tnum';
      display: flex; align-items: baseline; gap: 10px;
      margin-bottom: 2px;
    }
    .stat-card .stat-num small {
      font-family: var(--mono);
      font-size: 11.5px; font-weight: 600;
      padding: 3px 8px; border-radius: 6px;
      letter-spacing: 0.02em;
    }
    .stat-card .stat-num small.up   { background: var(--c-verde-soft); color: var(--c-verde-2); }
    .stat-card .stat-num small.down { background: var(--red-soft);     color: var(--red); }

    .stat-card .stat-spark { width: 100%; height: 22px; margin: 4px 0 4px; display: block; overflow: visible; }
    .stat-card .stat-spark .spark-line {
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      animation: drawSpark 1.6s var(--ease-out) forwards;
      animation-delay: 600ms;
    }
    @keyframes drawSpark { to { stroke-dashoffset: 0; } }
    .stat-card .stat-spark .spark-fill {
      opacity: 0;
      animation: fadeFill 800ms ease-out forwards;
      animation-delay: 1.4s;
    }
    @keyframes fadeFill { to { opacity: 1; } }

    .stat-card .stat-lbl {
      font-family: var(--mono);
      font-size: 10.5px; color: var(--ink-3);
      letter-spacing: 0.14em; text-transform: uppercase;
      font-weight: 500;
    }
    .stat-card .stat-foot {
      display: flex; gap: 14px;
      padding-top: 10px; margin-top: 10px;
      border-top: 1px dashed var(--line);
      font-size: 11.5px; color: var(--ink-3);
    }
    .stat-card .stat-foot strong { color: var(--c-texto); font-weight: 600; }

    .stat-card[data-kind="informes"]     { --stat-color: var(--c-azul);    --stat-glow: rgba(27,107,147,0.14); }
    .stat-card[data-kind="remitos"]      { --stat-color: var(--c-naranja); --stat-glow: rgba(232,117,10,0.16); }
    .stat-card[data-kind="presupuestos"] { --stat-color: var(--c-verde);   --stat-glow: rgba(45,155,111,0.14); }
    .stat-card[data-kind="informes"]     .stat-ico { background: var(--c-azul-soft);    color: var(--c-azul);    border-color: var(--c-azul-line); }
    .stat-card[data-kind="remitos"]      .stat-ico { background: var(--c-naranja-soft); color: var(--c-naranja); border-color: var(--c-naranja-line); }
    .stat-card[data-kind="presupuestos"] .stat-ico { background: var(--c-verde-soft);   color: var(--c-verde);   border-color: var(--c-verde-line); }

    /* Acceso rápido a nuevo documento */
    .modulos-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-bottom: 26px;
    }
    .modulo-card {
      background: var(--c-card);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 16px 16px 16px 18px;
      display: flex; gap: 14px; align-items: flex-start;
      cursor: pointer;
      box-shadow: var(--sh-0), var(--sh-1);
      transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out), transform 220ms var(--ease-fluid);
      position: relative;
      overflow: hidden;
      --mx: 50%; --my: 50%;
      opacity: 0; transform: translateY(12px); filter: blur(6px);
      animation: revealUp 700ms var(--ease-out) forwards;
    }
    .modulo-card:nth-child(1) { animation-delay: 360ms; }
    .modulo-card:nth-child(2) { animation-delay: 420ms; }
    .modulo-card:nth-child(3) { animation-delay: 480ms; }
    .modulo-card:nth-child(4) { animation-delay: 540ms; }

    .modulo-card::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px;
      transform: scaleY(0); transform-origin: bottom;
      transition: transform 420ms var(--ease-fluid);
    }
    .modulo-card[data-mod="informe"]::before     { background: var(--c-azul); }
    .modulo-card[data-mod="remito"]::before      { background: var(--c-naranja); }
    .modulo-card[data-mod="presupuesto"]::before { background: var(--c-verde); }
    .modulo-card[data-mod="acta"]::before        { background: #7C5CC4; }

    .modulo-card::after {
      content: '';
      position: absolute; inset: 0;
      border-radius: var(--r-md);
      background: radial-gradient(220px circle at var(--mx) var(--my), var(--mod-glow, rgba(27,107,147,0.10)), transparent 60%);
      opacity: 0;
      transition: opacity 350ms var(--ease-out);
      pointer-events: none;
    }
    .modulo-card[data-mod="remito"]      { --mod-glow: rgba(232,117,10,0.12); }
    .modulo-card[data-mod="presupuesto"] { --mod-glow: rgba(45,155,111,0.10); }
    .modulo-card[data-mod="acta"]        { --mod-glow: rgba(124,92,196,0.12); }

    @media (hover: hover) and (pointer: fine) {
      .modulo-card:hover {
        box-shadow: var(--sh-0), var(--sh-2);
        border-color: var(--line-2);
        transform: translateY(-2px);
      }
      .modulo-card:hover::before { transform: scaleY(1); transform-origin: top; }
      .modulo-card:hover::after  { opacity: 1; }
    }
    .modulo-card:active { transform: scale(0.99); }
    .modulo-card > * { position: relative; z-index: 1; }

    .modulo-icon {
      width: 44px; height: 44px; border-radius: 10px;
      display: grid; place-items: center;
      flex-shrink: 0;
      border: 1px solid;
      box-shadow: inset 0 1px 1px rgba(255,255,255,.5);
      transition: transform 350ms var(--ease-spring);
    }
    .modulo-card:hover .modulo-icon { transform: rotate(-6deg) scale(1.06); }
    .modulo-icon svg { width: 18px; height: 18px; }

    .modulo-body { flex: 1; min-width: 0; }
    .modulo-card h3 {
      margin: 0 0 4px; font-size: 15px; font-weight: 700;
      color: var(--c-texto); font-family: var(--ff-display);
      letter-spacing: -0.005em;
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .modulo-card h3 .num-tag {
      font-family: var(--mono); font-weight: 500; font-size: 10.5px;
      color: var(--ink-3); letter-spacing: 0.06em;
      padding: 2px 7px;
      background: var(--surface-3);
      border: 1px solid var(--line);
      border-radius: 5px;
    }
    .modulo-card p {
      margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
    }
    .modulo-card span {
      font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
      letter-spacing: 0.08em; text-transform: uppercase;
      font-weight: 500;
    }

    .modulo-card[data-mod="informe"]     .modulo-icon { background: var(--c-azul-soft);    color: var(--c-azul);    border-color: var(--c-azul-line); }
    .modulo-card[data-mod="remito"]      .modulo-icon { background: var(--c-naranja-soft); color: var(--c-naranja); border-color: var(--c-naranja-line); }
    .modulo-card[data-mod="presupuesto"] .modulo-icon { background: var(--c-verde-soft);   color: var(--c-verde);   border-color: var(--c-verde-line); }
    .modulo-card[data-mod="acta"]        .modulo-icon { background: rgba(124,92,196,.14);  color: #7C5CC4;          border-color: rgba(124,92,196,.30); }

    .modulo-arrow {
      width: 30px; height: 30px;
      border-radius: 50%;
      background: var(--surface-3);
      border: 1px solid var(--line);
      display: grid; place-items: center;
      color: var(--ink-2);
      flex-shrink: 0; align-self: center;
      transition: transform 280ms var(--ease-spring), background 250ms var(--ease-out), color 250ms var(--ease-out), border-color 250ms var(--ease-out);
    }
    .modulo-arrow svg { width: 13px; height: 13px; }
    .modulo-card[data-mod="informe"]:hover     .modulo-arrow { background: var(--c-azul);    color: #fff; border-color: var(--c-azul-2);    transform: translate(4px, -2px) scale(1.1); }
    .modulo-card[data-mod="remito"]:hover      .modulo-arrow { background: var(--c-naranja); color: #fff; border-color: var(--c-naranja-2); transform: translate(4px, -2px) scale(1.1); }
    .modulo-card[data-mod="presupuesto"]:hover .modulo-arrow { background: var(--c-verde);   color: #fff; border-color: var(--c-verde-2);   transform: translate(4px, -2px) scale(1.1); }
    .modulo-card[data-mod="acta"]:hover        .modulo-arrow { background: #7C5CC4;          color: #fff; border-color: #6D4FB3;          transform: translate(4px, -2px) scale(1.1); }

    .section-head {
      display: flex; align-items: center; justify-content: space-between;
      margin: 28px 0 14px; gap: 10px; flex-wrap: wrap;
    }
    .section-title {
      margin: 0;
      font-family: var(--ff-display);
      font-size: 17px; font-weight: 700;
      color: var(--c-texto);
      letter-spacing: -0.012em;
    }

    /* Filtros pill */
    .pill-filters {
      display: flex; gap: 2px; padding: 3px;
      background: var(--surface-3); border-radius: 9px;
      box-shadow: inset 0 1px 1px rgba(15,22,38,.04);
      flex-wrap: wrap;
    }
    .pill-filter {
      background: transparent;
      border: 0;
      color: var(--ink-3);
      padding: 6px 12px;
      border-radius: 7px;
      font-size: 12.5px; font-weight: 500;
      cursor: pointer;
      transition: background 200ms var(--ease-out), color 200ms var(--ease-out), transform 150ms var(--ease-fluid), box-shadow 200ms var(--ease-out);
    }
    .pill-filter:hover { color: var(--c-texto); }
    .pill-filter:active { transform: scale(0.96); }
    .pill-filter.active {
      background: var(--c-azul);
      color: #fff;
      box-shadow: 0 1px 2px rgba(27,107,147,.4);
    }
    .pill-filter[data-f="remito"].active      { background: var(--c-naranja); box-shadow: 0 1px 2px rgba(232,117,10,.4); }
    .pill-filter[data-f="presupuesto"].active { background: var(--c-verde);   box-shadow: 0 1px 2px rgba(45,155,111,.4); }

    /* Lista de recientes — cards con badge cuadrado + meta + estado */
    .recent-list { display: flex; flex-direction: column; gap: 10px; }
    .recent-item {
      background: var(--c-card);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 12px 14px;
      display: flex; align-items: center; gap: 14px;
      cursor: pointer;
      box-shadow: var(--sh-0), var(--sh-1);
      transition: box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 180ms var(--ease-fluid);
      opacity: 0; transform: translateY(6px); filter: blur(4px);
      animation: revealUp 480ms var(--ease-out) forwards;
    }
    .recent-item:nth-child(1) { animation-delay: 540ms; }
    .recent-item:nth-child(2) { animation-delay: 600ms; }
    .recent-item:nth-child(3) { animation-delay: 660ms; }
    .recent-item:nth-child(4) { animation-delay: 720ms; }
    .recent-item:nth-child(5) { animation-delay: 780ms; }
    .recent-item:hover { box-shadow: var(--sh-0), var(--sh-2); border-color: var(--line-2); transform: translateY(-1px); }
    .recent-item:active { transform: scale(0.99); }

    .recent-badge {
      width: 46px; height: 46px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--ff-display);
      font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
      flex-shrink: 0;
      box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
      border: 1px solid;
      transition: transform 280ms var(--ease-spring);
    }
    .recent-item:hover .recent-badge { transform: scale(1.06) rotate(-3deg); }
    .recent-badge[data-kind="informe"]     { background: var(--c-azul-soft);    color: var(--c-azul);    border-color: var(--c-azul-line); }
    .recent-badge[data-kind="remito"]      { background: var(--c-naranja-soft); color: var(--c-naranja); border-color: var(--c-naranja-line); }
    .recent-badge[data-kind="presupuesto"] { background: var(--c-verde-soft);   color: var(--c-verde);   border-color: var(--c-verde-line); }
    .recent-badge[data-kind="acta"]        { background: rgba(124,92,196,.14); color: #7C5CC4; border-color: rgba(124,92,196,.30); }
    .recent-body { flex: 1; min-width: 0; }
    .recent-head {
      display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px;
    }
    .recent-num {
      font-size: 12px; font-weight: 600; color: var(--ink-3, #6B7280);
      text-transform: uppercase; letter-spacing: 0.4px;
      white-space: nowrap;
    }
    .recent-date {
      font-size: 11.5px; color: var(--ink-3, #6B7280);
      margin-left: auto; white-space: nowrap;
    }
    .recent-destino {
      font-size: 14.5px; font-weight: 600; color: var(--c-texto);
      letter-spacing: -0.005em;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .recent-detalle {
      font-size: 12.5px; color: var(--ink-3, #6B7280);
      margin-top: 2px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Legacy (compat por si alguien todavia los renderea) */
    .recent-title { font-size: 14.5px; font-weight: 600; color: var(--c-texto); margin-bottom: 3px; letter-spacing: -0.005em; }
    .recent-meta { font-size: 12.5px; color: var(--ink-3); }
    .recent-meta .num-doc { font-family: var(--mono); font-size: 12px; color: var(--c-texto); letter-spacing: 0.02em; }
    .recent-status {
      font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
      white-space: nowrap;
      display: inline-flex; align-items: center; gap: 5px;
      border: 1px solid transparent;
    }
    .recent-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
    .rs-completado, .rs-finalizado, .rs-entregado, .rs-aprobado { background: var(--c-verde-soft);   color: var(--c-verde-2); border-color: var(--c-verde-line); }
    .rs-borrador, .rs-enviado                                   { background: var(--c-naranja-soft); color: var(--c-naranja-2); border-color: var(--c-naranja-line); }
    .rs-rechazado, .rs-anulado                                  { background: var(--red-soft);       color: var(--red); border-color: #ECC2BB; }
    .rs-default                                                 { background: var(--surface-3);      color: var(--ink-3); border-color: var(--line); }

    .empty-state {
      background: var(--c-card);
      border: 1px dashed var(--line-2);
      border-radius: var(--r-md);
      padding: 36px 24px;
      text-align: center;
      color: var(--ink-3);
    }
    .empty-state h3 { margin: 0 0 6px; color: var(--c-texto); font-size: 15px; font-family: var(--ff-display); font-weight: 700; }
    .empty-state p  { margin: 0; font-size: 13px; }

    /* BENCHMARK (NUEVO) */
    .benchmark {
      margin-top: 24px;
      display: flex; align-items: center; gap: 14px;
      padding: 14px 18px;
      background: linear-gradient(90deg, var(--c-azul-soft) 0%, var(--c-card) 60%, var(--c-naranja-soft) 100%);
      border: 1px solid var(--line);
      border-radius: 11px;
      box-shadow: var(--sh-0), var(--sh-1);
      font-size: 13px;
      flex-wrap: wrap;
      opacity: 0; transform: translateY(12px); filter: blur(6px);
      animation: revealUp 700ms var(--ease-out) 800ms forwards;
    }
    .benchmark__icon {
      width: 32px; height: 32px;
      border-radius: 8px;
      display: grid; place-items: center;
      background: var(--c-card);
      border: 1px solid var(--c-azul-line);
      color: var(--c-azul);
      flex-shrink: 0;
      box-shadow: var(--sh-1);
    }
    .benchmark__icon svg { width: 15px; height: 15px; }
    .benchmark__text { color: var(--ink-2); }
    .benchmark__text strong { color: var(--c-azul); font-weight: 700; }
    .benchmark__meta {
      margin-left: auto;
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
      color: var(--ink-3);
    }

    /* PANEL "HOY" lateral derecho (NUEVO) */
    .today-aside {
      position: sticky;
      top: 124px;
      display: flex; flex-direction: column;
      gap: 14px;
      opacity: 0; transform: translateY(14px); filter: blur(6px);
      animation: revealUp 700ms var(--ease-out) 200ms forwards;
    }
    .today-card {
      background: var(--c-card);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--sh-0), var(--sh-1);
      overflow: hidden;
    }
    .today-head {
      padding: 11px 14px 9px;
      display: flex; justify-content: space-between; align-items: center;
      border-bottom: 1px solid var(--line);
    }
    .today-head h3 {
      margin: 0;
      font-family: var(--mono);
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--ink-3);
    }
    .today-head .meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; }

    .calendar { padding: 12px 12px 14px; }
    .calendar-month { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .calendar-month-label { font-family: var(--ff-display); font-weight: 700; font-size: 14px; letter-spacing: -0.005em; }
    .calendar-nav { display: flex; gap: 3px; }
    .calendar-nav button {
      background: var(--c-card); border: 1px solid var(--line);
      width: 24px; height: 24px; border-radius: 6px;
      display: grid; place-items: center;
      cursor: pointer; color: var(--ink-3);
      transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .calendar-nav button:hover { border-color: var(--line-2); }
    .calendar-nav button:active { transform: scale(0.92); }
    .calendar-nav button svg { width: 11px; height: 11px; }

    .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
    .calendar-grid .dow { font-family: var(--mono); font-size: 9.5px; color: var(--mute); letter-spacing: 0.06em; padding: 4px 0 6px; font-weight: 500; }
    .calendar-day {
      position: relative;
      aspect-ratio: 1 / 1;
      display: grid; place-items: center;
      font-family: var(--mono); font-size: 11.5px;
      color: var(--ink-2);
      border-radius: 6px;
      cursor: pointer;
      transition: background 180ms var(--ease-out), color 180ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .calendar-day:hover { background: var(--surface-3); color: var(--c-texto); }
    .calendar-day:active { transform: scale(0.92); }
    .calendar-day.muted { color: var(--mute-2); }
    .calendar-day.today {
      background: var(--c-azul);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 2px 8px -2px var(--c-azul-glow);
    }
    .calendar-day.today:hover { background: var(--c-azul-2); color: #fff; }
    .calendar-day .act {
      position: absolute;
      bottom: 3px; left: 50%; transform: translateX(-50%);
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--c-azul);
    }
    .calendar-day .act.naranja { background: var(--c-naranja); }
    .calendar-day .act.verde   { background: var(--c-verde); }
    .calendar-day .act.violet  { background: var(--violet); }
    .calendar-day.today .act   { background: rgba(255,255,255,.9); }

    /* Dots dinamicos del almanaque (un dot por kind, hasta 4 por dia) */
    .calendar-day.has-events { font-weight: 600; }
    .calendar-day .cal-dot {
      position: absolute;
      bottom: 2px;
      width: 4px; height: 4px;
      border-radius: 50%;
    }
    /* Distribuir hasta 4 dots horizontalmente */
    .calendar-day .cal-dot:nth-child(1) { left: 50%; transform: translateX(-50%); }
    .calendar-day .cal-dot:nth-child(2) { left: 50%; transform: translateX(-9px); }
    .calendar-day .cal-dot:nth-child(2) ~ .cal-dot:nth-child(1),
    .calendar-day:has(.cal-dot:nth-child(2)) .cal-dot:nth-child(1) { left: 50%; transform: translateX(0px); }
    .calendar-day .cal-dot-creado     { background: var(--c-azul); }
    .calendar-day .cal-dot-aceptado   { background: var(--c-verde); }
    .calendar-day .cal-dot-vence      { background: var(--c-naranja); }
    .calendar-day .cal-dot-instalacion{ background: var(--c-peligro); }
    .calendar-day.today .cal-dot { box-shadow: 0 0 0 1px rgba(255,255,255,.85); }

    /* Panel detalle del dia (debajo del calendario) */
    .cal-day-detail {
      margin-top: 12px;
      background: var(--c-fondo, var(--surface-2));
      border: 1px solid var(--c-borde-soft);
      border-radius: var(--r-md);
      padding: 10px 12px;
    }
    .cal-day-detail-head {
      display: flex; justify-content: space-between; align-items: center;
      gap: 8px; margin-bottom: 8px;
    }
    .cal-day-detail-head strong {
      font-size: 12px; letter-spacing: 0.04em;
      color: var(--c-texto);
    }
    .cal-day-close {
      appearance: none; border: none; background: transparent;
      font-size: 18px; line-height: 1; padding: 2px 6px;
      cursor: pointer; color: var(--c-texto-muted); border-radius: 4px;
    }
    .cal-day-close:hover { color: var(--c-texto); background: var(--c-borde-soft); }
    .cal-day-evt {
      display: grid;
      grid-template-columns: 8px 70px 1fr;
      gap: 8px; align-items: center;
      padding: 6px 4px;
      border-bottom: 1px dashed var(--c-borde-soft);
      cursor: pointer;
      font-size: 12px;
    }
    .cal-day-evt:last-child { border-bottom: none; }
    .cal-day-evt:hover { background: var(--c-card); }
    .cal-day-evt-dot { width: 8px; height: 8px; border-radius: 50%; }
    .cal-day-evt-kind { font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-texto-muted); }
    .cal-day-evt-num { font-family: var(--mono, monospace); font-size: 11px; color: var(--c-texto); white-space: nowrap; }
    .cal-day-evt-cli { color: var(--c-texto-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 2 / 4; font-size: 11.5px; }

    .calendar-legend {
      margin-top: 12px;
      display: flex; gap: 14px; flex-wrap: wrap;
      padding-top: 10px; border-top: 1px dashed var(--line);
    }
    .calendar-legend span { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 5px; }
    .calendar-legend .ldot { width: 6px; height: 6px; border-radius: 50%; }

    .upcoming { padding: 6px 12px 10px; }
    .upcoming-item {
      display: flex; gap: 10px; align-items: flex-start;
      padding: 9px 4px;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
      border-radius: 6px;
      transition: padding 180ms var(--ease-out), background 180ms var(--ease-out), transform 150ms var(--ease-fluid);
      text-decoration: none;
      color: inherit;
    }
    .upcoming-item:last-child { border-bottom: none; }
    .upcoming-item:hover { background: var(--surface-2); padding-left: 8px; padding-right: 8px; }
    .upcoming-item:active { transform: scale(0.99); }
    .upcoming-day {
      font-family: var(--mono);
      color: var(--ink-2); font-weight: 600;
      background: var(--surface-3);
      border: 1px solid var(--line);
      padding: 5px 7px; border-radius: 6px;
      display: flex; flex-direction: column; align-items: center;
      line-height: 1; gap: 2px;
      flex-shrink: 0; min-width: 38px;
    }
    .upcoming-day strong { font-size: 13px; font-weight: 700; }
    .upcoming-day small { font-size: 9px; color: var(--ink-3); letter-spacing: 0.08em; }
    .upcoming-day.is-today { background: var(--c-azul-soft); border-color: var(--c-azul-line); color: var(--c-azul-2); }
    .upcoming-day.is-today small { color: var(--c-azul); }
    .upcoming-info { flex: 1; min-width: 0; padding-top: 2px; }
    .upcoming-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--c-texto); }
    .upcoming-sub { font-size: 11px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.02em; margin-top: 2px; }

    .activity { padding: 4px 14px 12px; }
    .activity-item {
      display: flex; gap: 10px; align-items: flex-start;
      padding: 8px 0;
      position: relative;
    }
    .activity-item:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 8px; top: 28px; bottom: -8px;
      width: 1px;
      background: var(--line);
      z-index: 0;
    }
    .activity-mark {
      width: 17px; height: 17px;
      border-radius: 50%;
      display: grid; place-items: center;
      flex-shrink: 0;
      background: var(--c-card);
      z-index: 1;
      margin-top: 1px;
      box-shadow: inset 0 0 0 2px;
      transition: transform 280ms var(--ease-spring);
    }
    .activity-item:hover .activity-mark { transform: scale(1.15); }
    .activity-mark::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .activity-mark.azul    { color: var(--c-azul); }
    .activity-mark.naranja { color: var(--c-naranja); }
    .activity-mark.verde   { color: var(--c-verde); }
    .activity-text { flex: 1; min-width: 0; }
    .activity-title { font-size: 12px; line-height: 1.4; color: var(--ink-2); }
    .activity-title strong { color: var(--c-texto); font-weight: 600; }
    .activity-time { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.04em; margin-top: 2px; }

    /* ============== CLIENTES ============== */
    .toolbar {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 16px; flex-wrap: wrap;
    }
    .toolbar .search {
      flex: 1; min-width: 200px;
      padding: 9px 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--c-card);
      outline: none;
      font-size: 14px;
      box-shadow: var(--sh-0), var(--sh-1);
      transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .toolbar .search:focus { border-color: var(--c-azul); box-shadow: var(--ring-azul); }

    .cliente-card {
      background: var(--c-card);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 14px 16px;
      margin-bottom: 10px;
      display: flex; align-items: center; gap: 14px;
      box-shadow: var(--sh-0), var(--sh-1);
      cursor: pointer;
      transition: box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 180ms var(--ease-fluid);
    }
    .cliente-card:hover { box-shadow: var(--sh-0), var(--sh-2); border-color: var(--line-2); transform: translateY(-1px); }
    .cliente-card:active { transform: scale(0.99); }
    .cliente-icon {
      width: 42px; height: 42px; border-radius: 11px;
      background: var(--c-azul-soft); color: var(--c-azul);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--ff-display); font-weight: 700; font-size: 14px;
      flex-shrink: 0;
      border: 1px solid var(--c-azul-line);
      box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
    }
    .cliente-body { flex: 1; min-width: 0; }
    .cliente-name {
      font-size: 15px; font-weight: 600; color: var(--c-texto);
      margin-bottom: 3px;
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      letter-spacing: -0.005em;
    }
    .cliente-meta { font-size: 12.5px; color: var(--ink-3); }
    .tipo-badge {
      font-size: 10px; font-weight: 600;
      padding: 2px 9px; border-radius: 999px;
      text-transform: uppercase; letter-spacing: 0.06em;
      background: var(--surface-3); color: var(--ink-3);
      border: 1px solid var(--line);
    }
    .tipo-badge[data-tipo="educacion"] { background: var(--c-azul-soft);    color: var(--c-azul-2);    border-color: var(--c-azul-line); }
    .tipo-badge[data-tipo="empresa"]   { background: var(--c-naranja-soft); color: var(--c-naranja-2); border-color: var(--c-naranja-line); }
    .tipo-badge[data-tipo="gobierno"]  { background: var(--c-verde-soft);   color: var(--c-verde-2);   border-color: var(--c-verde-line); }
    .cliente-actions { display: flex; gap: 6px; }

    /* Modal */
    .modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(15, 25, 38, 0.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex; align-items: flex-start; justify-content: center;
      z-index: 50; padding: 24px;
      overflow-y: auto;
      animation: bdFade 220ms var(--ease-out);
    }
    @keyframes bdFade { from { opacity: 0; } to { opacity: 1; } }
    .modal {
      background: var(--c-card);
      border-radius: var(--r-lg);
      width: 100%; max-width: 640px;
      box-shadow: 0 20px 60px rgba(20, 86, 122, 0.30);
      overflow: hidden;
      margin: 20px auto;
      border: 1px solid var(--line);
      transform: translateY(8px); opacity: 0; filter: blur(4px);
      animation: revealUp 320ms var(--ease-out) forwards;
    }
    .modal-header {
      background: linear-gradient(135deg, var(--c-azul) 0%, var(--c-azul-2) 100%);
      color: #fff;
      padding: 14px 18px;
      display: flex; align-items: center; gap: 10px;
      position: relative;
      overflow: hidden;
    }
    .modal-header::after {
      content: '';
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--c-azul) 0%, var(--c-naranja) 100%);
    }
    .modal-header h2 {
      margin: 0; font-family: var(--ff-display);
      font-size: 16px; font-weight: 700; letter-spacing: -0.012em;
    }
    .modal-header .modal-close {
      margin-left: auto;
      background: rgba(255,255,255,0.15); border: 0;
      width: 28px; height: 28px; border-radius: 50%;
      color: #fff; font-size: 16px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .modal-header .modal-close:hover { background: rgba(255,255,255,0.25); }
    .modal-header .modal-close:active { transform: scale(0.92); }
    .modal-body { padding: 20px; }
    .modal-footer {
      padding: 14px 18px;
      border-top: 1px solid var(--line);
      display: flex; justify-content: flex-end; gap: 8px;
      background: var(--surface-2);
    }

    /* Aviso de sin conexión. Fijo abajo para no tapar el header ni el contenido,
       y por encima de todo menos los modales de confirmación. */
    .sin-conexion-bar {
      position: fixed; left: 0; right: 0; bottom: 0;
      z-index: 150;
      background: #B45309; color: #fff;
      padding: 9px 14px;
      font-size: 13px; line-height: 1.4; text-align: center;
      box-shadow: 0 -2px 12px rgba(0,0,0,.18);
    }
    @media print { .sin-conexion-bar { display: none !important; } }

    /* Config de envío por mail */
    .mail-cfg-sec {
      padding: 14px 0;
      border-top: 1px solid var(--line);
    }
    .mail-cfg-sec:first-of-type { border-top: 0; padding-top: 4px; }
    .mail-cfg-sec-tit {
      font-size: 12px; font-weight: 700; letter-spacing: .6px;
      text-transform: uppercase; color: var(--c-texto-muted, #6B7280);
      margin-bottom: 12px;
    }
    .mail-cfg-nota {
      font-size: 12.5px; color: var(--c-texto-muted, #6B7280);
      margin-top: 6px; line-height: 1.45;
    }
    .mail-cfg-nota code {
      background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
      font-size: 12px;
    }
    .mail-cfg-pill {
      display: inline-block; margin-left: 6px; padding: 1px 8px;
      border-radius: 999px; font-size: 11px; font-weight: 600;
      background: var(--surface-2); color: var(--c-texto-muted, #6B7280);
      text-transform: none; letter-spacing: 0;
    }
    .mail-cfg-pill.ok { background: rgba(45,155,111,.14); color: #2D9B6F; }
    /* Simula la línea que el cliente ve en su bandeja de entrada. */
    .mail-cfg-preview {
      margin-top: 14px; padding: 12px 14px;
      border: 1px solid var(--line); border-radius: 10px;
      background: var(--surface-2);
    }
    .mail-cfg-preview .de { font-weight: 700; font-size: 14px; color: var(--c-texto); }
    .mail-cfg-preview .asunto { font-size: 13.5px; color: var(--c-texto); margin-top: 2px; }
    .mail-cfg-preview .dir { font-size: 12px; color: var(--c-texto-muted, #6B7280); margin-top: 3px; }
    .mail-cfg-check {
      display: flex; align-items: center; gap: 9px;
      font-size: 14.5px; cursor: pointer;
    }
    .mail-cfg-check input { width: 17px; height: 17px; cursor: pointer; }

    /* Confirmación propia. Capa propia por encima de los modales (z-index 50),
       para poder preguntar desde adentro de un formulario sin taparlo ni
       destruirlo. Hereda el look de .modal; solo cambia el apilamiento. */
    #confirm-root .modal-backdrop {
      z-index: 200;
      align-items: center;
    }
    .modal-confirm { max-width: 460px; }
    .modal-confirm .cf-msg {
      margin: 0; line-height: 1.55; color: var(--c-texto);
    }
    .modal-confirm .cf-tipear-lbl {
      display: block; margin: 16px 0 6px;
      font-size: 13px; color: var(--c-texto-muted, #6B7280);
    }
    .modal-confirm #cf-tipear {
      width: 100%; padding: 9px 11px;
      border: 1px solid var(--line); border-radius: 8px;
      background: var(--c-card); color: var(--c-texto);
      font-size: 15px; font-family: inherit;
    }
    .modal-confirm .btn[disabled] { opacity: .5; cursor: not-allowed; }

    .form-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .form-grid .full { grid-column: 1 / -1; }
    .form-grid label {
      display: block; font-size: 11px; font-weight: 600;
      color: var(--ink-3); letter-spacing: 0.06em;
      text-transform: uppercase; margin-bottom: 5px;
    }
    .form-grid input, .form-grid select, .form-grid textarea {
      width: 100%; padding: 10px 12px;
      border: 1px solid var(--line); border-radius: var(--r-sm);
      background: var(--surface-2); color: var(--c-texto); outline: none;
      font-family: var(--ff-sans); font-size: 14px;
      transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
      border-color: var(--c-azul); background: #fff;
      box-shadow: var(--ring-azul);
    }
    .form-grid textarea { resize: vertical; min-height: 60px; }

    /* Subentidades inline en modal de cliente */
    .subs-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
    .subs-section h3 {
      margin: 0 0 12px; font-family: var(--ff-display);
      font-size: 13px; font-weight: 700;
      color: var(--c-texto); letter-spacing: -0.005em;
    }
    .subs-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
    .sub-item {
      background: var(--surface-2); border: 1px solid var(--line);
      border-radius: var(--r-sm); padding: 8px 12px;
      display: flex; align-items: center; gap: 10px;
      transition: background 200ms var(--ease-out);
    }
    .sub-item:hover { background: var(--surface-3); }
    .sub-info { flex: 1; min-width: 0; }
    .sub-name { font-size: 13.5px; font-weight: 600; color: var(--c-texto); }
    .sub-meta { font-size: 11.5px; color: var(--ink-3); }
    .sub-actions { display: flex; gap: 4px; }

    .sub-form-inline {
      background: var(--c-azul-soft);
      border: 1px solid var(--c-azul-line);
      border-radius: var(--r-sm);
      padding: 12px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
      margin-top: 8px;
      animation: revealUp 280ms var(--ease-out);
    }
    .sub-form-inline .full { grid-column: 1 / -1; }
    .sub-form-inline .actions { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; }
    .sub-form-inline label {
      display: block; font-size: 11px; color: var(--ink-3);
      font-weight: 600; letter-spacing: 0.04em; margin-bottom: 4px;
    }
    .sub-form-inline input {
      width: 100%; padding: 7px 10px;
      border: 1px solid var(--c-borde); border-radius: var(--r-sm);
      background: var(--c-card); color: var(--c-texto);
      font-family: var(--ff-sans); font-size: 13px; outline: none;
      transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .sub-form-inline input:focus {
      border-color: var(--c-azul); box-shadow: var(--ring-azul);
    }

    .subs-hint {
      font-size: 12.5px; color: var(--ink-3);
      background: var(--surface-2); padding: 14px; border-radius: var(--r-sm);
      text-align: center;
      border: 1px dashed var(--line-2);
    }

    /* ============== INFORMES / REMITOS / PRESUPUESTOS — comunes ============== */
    .modal.modal-lg { max-width: 820px; }
    .modal.modal-xl { max-width: 1180px; }

    /* ==== AS-PRES (módulo Presupuestos integrado) — preservado ==== */
    .ap-tabs { display: flex; gap: 2px; background: rgba(255,255,255,0.15); border-radius: 10px; padding: 3px; }
    .ap-tab {
      padding: 7px 14px; border-radius: 8px; border: none; cursor: pointer;
      font-size: 12px; font-weight: 600; font-family: var(--ff-sans);
      background: transparent; color: rgba(255,255,255,0.7);
      transition: background 200ms var(--ease-out), color 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .ap-tab.active { background: #fff; color: var(--c-verde); }
    .ap-tab:hover:not(.active) { color: #fff; }
    .ap-tab:active { transform: scale(0.97); }

    .ap-section-toggles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .ap-stoggle {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 16px; border-radius: 30px; cursor: pointer;
      border: 1px solid var(--line); color: var(--ink-3);
      font-size: 12px; font-weight: 700; background: var(--c-card);
      transition: border-color 250ms var(--ease-out), color 250ms var(--ease-out), background 250ms var(--ease-out), transform 150ms var(--ease-fluid);
      user-select: none;
    }
    .ap-stoggle:active { transform: scale(0.97); }
    .ap-stoggle.on { border-color: var(--c-verde); color: var(--c-verde); background: var(--c-verde-soft); }
    .ap-stoggle .ap-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; }
    .ap-stoggle.on .ap-dot { background: var(--c-verde); border-color: var(--c-verde); }

    .ap-margin-dash {
      background: var(--c-card); border: 1px solid var(--line);
      border-radius: var(--r-md); padding: 18px; margin-bottom: 14px;
      box-shadow: var(--sh-0), var(--sh-1);
    }
    .ap-dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .ap-dash-label {
      font-family: var(--ff-display); font-weight: 700; font-size: 13px;
      color: var(--c-verde); letter-spacing: -0.005em;
    }
    .ap-cost-toggle {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 20px; border: none;
      font-size: 11px; font-weight: 700; cursor: pointer;
      letter-spacing: .04em;
      transition: background 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .ap-cost-toggle:active { transform: scale(0.97); }
    .ap-cost-toggle.on { background: rgba(212,148,58,0.12); color: #B07828; }
    .ap-cost-toggle.off { background: var(--surface-2); color: var(--ink-3); }

    .ap-stats { display: flex; gap: 10px; flex-wrap: wrap; }
    .ap-stat { border-radius: 12px; padding: 12px 14px; text-align: center; flex: 1; min-width: 110px; }
    .ap-stat.ap-teal  { background: var(--c-azul-soft); }
    .ap-stat.ap-amber { background: rgba(212,148,58,0.1); }
    .ap-stat.ap-green { background: var(--c-verde-soft); }
    .ap-stat.ap-red   { background: var(--red-soft); }
    .ap-stat-val { font-family: var(--ff-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-feature-settings: 'tnum'; }
    .ap-stat.ap-teal  .ap-stat-val { color: var(--c-azul); }
    .ap-stat.ap-amber .ap-stat-val { color: #B07828; }
    .ap-stat.ap-green .ap-stat-val { color: var(--c-verde); }
    .ap-stat.ap-red   .ap-stat-val { color: var(--c-peligro); }
    .ap-stat-lbl { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; font-weight: 500; }

    /* form-card: card reutilizable para agrupar campos en modales (informe/remito/presupuesto/cliente).
       .ap-card es el alias historico usado en presupuesto y comparte 100% el estilo. */
    .form-card, .ap-card {
      background: var(--c-card); border: 1px solid var(--line);
      border-radius: var(--r-md); padding: 18px; margin-bottom: 14px;
      box-shadow: var(--sh-0), var(--sh-1);
    }
    .form-card-title, .ap-card-title {
      font-family: var(--ff-display); font-weight: 700; font-size: 13px;
      letter-spacing: -0.005em;
      margin: 0 0 12px; padding-bottom: 7px;
      border-bottom: 1px solid var(--c-borde-soft);
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .form-card-title { color: var(--c-azul); }
    .ap-card-title   { color: var(--c-verde); }
    .form-card label, .ap-card label {
      display: block; font-size: 10.5px; color: var(--ink-3);
      margin-bottom: 5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    }
    .form-card input, .form-card select, .form-card textarea,
    .ap-card input, .ap-card select, .ap-textarea {
      width: 100%; padding: 9px 12px; background: var(--surface-2);
      border: 1px solid var(--line); border-radius: var(--r-sm);
      color: var(--c-texto); font-size: 13px; font-family: var(--ff-sans);
      outline: none; transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .form-card input:focus, .form-card select:focus, .form-card textarea:focus {
      border-color: var(--c-azul); box-shadow: var(--ring-azul);
    }
    .ap-card input:focus, .ap-card select:focus, .ap-textarea:focus {
      border-color: var(--c-verde); box-shadow: 0 0 0 3px var(--c-verde-soft);
    }
    .ap-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
    .form-card textarea { resize: vertical; min-height: 60px; line-height: 1.5; }

    /* Selector de plantilla en pestana Clausulas (presupuestos) */
    .ap-template-card {
      border-left: 3px solid var(--c-azul);
      background: var(--c-azul-soft);
    }
    .ap-template-row {
      display: flex; gap: 10px; align-items: stretch;
    }
    .ap-template-select {
      flex: 1; min-width: 0;
    }
    .ap-template-hint {
      font-size: 11.5px; color: var(--c-texto-muted);
      margin-top: 8px; line-height: 1.45;
    }
    @media (max-width: 540px) {
      .ap-template-row { flex-direction: column; }
    }
    /* form-grid dentro de form-card mantiene comportamiento existente */
    .form-card .form-grid { gap: 10px 12px; }

    .ap-item-head, .ap-item-row {
      display: grid; gap: 6px; padding: 4px; align-items: center;
    }
    .ap-item-head { padding: 8px 4px; border-bottom: 1px solid var(--c-borde-soft); margin-bottom: 4px; }
    .ap-item-row + .ap-item-row { border-top: 1px solid var(--c-borde-soft); padding-top: 8px; margin-top: 4px; }
    .ap-item-row.g7 { grid-template-columns: 50px 1fr 90px 90px 90px 80px 32px; }
    .ap-item-row.g5 { grid-template-columns: 50px 1fr 90px 90px 32px; }
    .ap-item-head.g7 { grid-template-columns: 50px 1fr 90px 90px 90px 80px 32px; }
    .ap-item-head.g5 { grid-template-columns: 50px 1fr 90px 90px 32px; }
    .ap-th { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 2px; }
    .ap-th.r { text-align: right; }

    .ap-ci {
      width: 100%; padding: 7px 8px; background: var(--surface-2);
      border: 1px solid var(--line); border-radius: 6px;
      color: var(--c-texto); font-size: 12px; font-family: var(--ff-sans);
      outline: none; transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .ap-ci:focus { border-color: var(--c-verde); box-shadow: 0 0 0 2px var(--c-verde-soft); }
    .ap-ci.ap-r { text-align: right; font-family: var(--mono); }
    .ap-ci.ap-cost { color: #B07828; font-family: var(--mono); }
    .ap-ci.ap-link { font-size: 10px; color: var(--c-azul); margin-top: 4px; padding: 5px 8px; }
    .ap-ci.ap-detail { text-align: left; }

    .ap-cell-ro { padding: 6px 4px; font-family: var(--mono); font-size: 12px; font-weight: 600; text-align: right; font-feature-settings: 'tnum'; }
    .ap-cell-ro.pos { color: var(--c-verde); }
    .ap-cell-ro.neg { color: var(--c-peligro); }

    .ap-add-btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      width: 100%; padding: 10px; margin-top: 8px;
      background: transparent; border: 1px dashed rgba(45,155,111,0.4);
      border-radius: var(--r-sm); color: var(--c-verde);
      font-size: 12px; font-weight: 700; cursor: pointer;
      font-family: var(--ff-sans);
      transition: background 220ms var(--ease-out), border-style 220ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .ap-add-btn:hover { background: var(--c-verde-soft); border-style: solid; }
    .ap-add-btn:active { transform: scale(0.98); }

    .ap-rm-btn {
      width: 28px; height: 28px; border-radius: 8px; border: none;
      background: var(--red-soft); color: var(--c-peligro);
      cursor: pointer; font-size: 15px;
      display: flex; align-items: center; justify-content: center;
      transition: background 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .ap-rm-btn:hover { background: #F8C9C2; }
    .ap-rm-btn:active { transform: scale(0.92); }

    /* ============================================================
       VISTA DE IMPRESION / DETALLE UNIFICADA
       Aplica a renderInformeDetail / renderRemitoDetail / renderPresupuestoPreview.
       Layout consistente para los 3 docs; colores via tokens (theme-aware).
       ============================================================ */
    .doc-print {
      background: var(--c-card);
      max-width: 820px; margin: 0 auto;
      padding: 30px 36px;
      color: var(--c-texto);
      font-size: 11pt; line-height: 1.55;
      box-shadow: var(--sh-card);
      border-radius: var(--r-md);
    }

    .doc-print-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 20px;
      padding-bottom: 14px;
      border-bottom: 2px solid var(--c-azul);
      margin-bottom: 18px;
    }
    .doc-print-brand {
      display: flex; align-items: center; gap: 14px;
      flex: 1; min-width: 0;
    }
    .doc-print-logo {
      width: 64px; height: 64px;
      border-radius: 12px;
      background: var(--c-azul-soft);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; flex-shrink: 0;
    }
    .doc-print-logo img,
    .doc-print-logo svg {
      width: 100%; height: 100%; object-fit: contain;
    }
    .doc-print-logo-fb {
      font-family: var(--ff-display); font-weight: 800;
      font-size: 24px; color: var(--c-azul);
      letter-spacing: -0.04em;
    }
    .doc-print-empresa { flex: 1; min-width: 0; }
    .doc-print-empresa h1 {
      margin: 0;
      font-family: var(--ff-display); font-size: 17pt; font-weight: 700;
      color: var(--c-texto); letter-spacing: -0.012em;
      line-height: 1.1;
    }
    .doc-print-empresa p {
      margin: 2px 0 4px;
      font-size: 9.5pt; color: var(--ink-3);
      font-style: italic;
    }
    .doc-print-empresa .doc-print-razon-social {
      margin: 1px 0 2px;
      font-size: 9pt; color: var(--ink-2);
      font-style: normal; font-weight: 600;
      letter-spacing: 0.01em;
    }
    .doc-print-contact {
      font-size: 8.5pt; color: var(--ink-3);
      letter-spacing: 0.02em;
    }

    .doc-print-info { text-align: right; flex-shrink: 0; }
    .doc-print-tipo {
      font-family: var(--ff-display); font-weight: 800;
      font-size: 16pt; color: var(--c-azul);
      letter-spacing: 0.04em; text-transform: uppercase;
      line-height: 1.05;
    }
    .doc-print-num {
      font-family: var(--mono); font-size: 11pt;
      color: var(--c-texto); margin-top: 4px;
    }
    .doc-print-fecha {
      font-size: 9.5pt; color: var(--ink-3); margin-top: 2px;
    }

    /* === Variantes por tenant para diferenciar visualmente los docs =====
       AS: tipo+nº a la IZQUIERDA, logo+empresa a la DERECHA, línea naranja.
       Marand: layout default (brand izq, info der), línea azul/dorado del theme.
       Cuando AS y Marand mandan presupuestos a la misma empresa, el cliente
       distingue de un vistazo cuál es cuál (no parece el mismo doc clonado). */
    .doc-print-head--as {
      border-bottom-color: var(--c-naranja, #E8750A);
    }
    .doc-print-head--as .doc-print-info {
      text-align: left;
    }
    .doc-print-head--as .doc-print-tipo {
      color: var(--c-naranja, #E8750A);
    }
    .doc-print-head--as .doc-print-brand {
      flex-direction: row-reverse;
      text-align: right;
    }
    .doc-print-head--as .doc-print-empresa h1,
    .doc-print-head--as .doc-print-empresa p,
    .doc-print-head--as .doc-print-empresa .doc-print-razon-social {
      text-align: right;
    }
    .doc-print-head--as .doc-print-logo {
      background: var(--c-naranja-soft, #FFF4E5);
    }
    .doc-print-head--as .doc-print-logo-fb {
      color: var(--c-naranja, #E8750A);
    }

    .doc-print-title {
      font-family: var(--ff-display);
      font-size: 14pt; font-weight: 700;
      color: var(--c-texto);
      margin: 4px 0 14px;
      padding-bottom: 7px;
      border-bottom: 1px dashed var(--c-borde);
    }

    .doc-print-meta {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 8px 24px;
      font-size: 10pt;
      margin-bottom: 18px;
      padding: 12px 14px;
      background: var(--surface-2);
      border-radius: var(--r-sm);
      border: 1px solid var(--c-borde-soft);
    }
    .doc-print-meta > div { display: flex; gap: 8px; align-items: baseline; }
    .doc-print-meta .lbl {
      font-weight: 600; color: var(--ink-3);
      font-size: 8.5pt;
      text-transform: uppercase; letter-spacing: 0.06em;
      min-width: 88px; flex-shrink: 0;
    }

    .doc-print-table {
      width: 100%; border-collapse: collapse;
      font-size: 10pt; margin-bottom: 12px;
    }
    .doc-print-table th, .doc-print-table td {
      padding: 8px 10px;
      border: 1px solid var(--c-borde);
      text-align: left; vertical-align: top;
    }
    .doc-print-table th {
      background: var(--c-azul-soft); color: var(--c-azul);
      font-family: var(--mono); font-size: 9pt;
      font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .doc-print-sec-row {
      background: var(--surface-3);
      font-weight: 700; font-size: 10pt;
      color: var(--c-texto); letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .doc-print-total-row {
      background: var(--c-azul-soft);
      font-weight: 700; font-size: 11pt;
      color: var(--c-azul);
    }

    .doc-print-sec { margin: 18px 0; }
    .doc-print-sec h3 {
      font-family: var(--ff-display);
      font-size: 11pt; font-weight: 700;
      color: var(--c-azul); letter-spacing: -0.005em;
      margin: 0 0 8px;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--c-borde);
    }
    .doc-print-sec p { margin: 4px 0; font-size: 10pt; line-height: 1.6; }
    .doc-print-sec ul { padding-left: 20px; margin: 4px 0; }
    .doc-print-sec li { font-size: 10pt; line-height: 1.6; }
    .doc-print-link a {
      color: var(--c-azul); text-decoration: none;
      font-size: 8.5pt;
      border-bottom: 1px solid var(--c-azul-line);
    }
    .doc-print-closing { margin-top: 22px; }
    .doc-print-closing p { margin: 6px 0; }

    .doc-print-firmas {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin: 32px 0 22px;
    }
    .doc-print-firma { text-align: center; }
    .doc-print-firma img {
      width: 100%; max-width: 280px; height: 80px;
      object-fit: contain;
      margin: 0 auto 4px; display: block;
    }
    .doc-print-firma-empty {
      height: 80px; max-width: 280px;
      border-bottom: 1.5px solid var(--c-borde);
      margin: 0 auto 4px;
    }
    .doc-print-firma-lbl {
      font-family: var(--mono); font-size: 8.5pt;
      font-weight: 600; color: var(--ink-3);
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .doc-print-firma-name {
      font-size: 10pt; color: var(--c-texto); margin-top: 2px;
    }

    .doc-print-empty {
      color: var(--ink-3); font-size: 10pt;
      font-style: italic; text-align: center;
      padding: 20px;
    }

    .doc-print-foot {
      margin-top: 28px; padding-top: 14px;
      border-top: 2px solid var(--c-azul);
      text-align: center;
      font-size: 8.5pt; color: var(--ink-3);
      line-height: 1.7;
    }
    .doc-print-foot strong {
      display: block;
      font-family: var(--ff-display);
      font-size: 10pt; color: var(--c-texto);
      margin-bottom: 3px; letter-spacing: 0.02em;
    }

    /* Print-only: ocultar todo lo demás del shell */
    @media print {
      @page { margin: 10mm 12mm; size: A4; }
      body * { visibility: hidden; }
      .doc-print, .doc-print * { visibility: visible; }
      .doc-print {
        position: absolute; top: 0; left: 0;
        width: 100%; max-width: 100%;
        box-shadow: none; padding: 0; margin: 0;
        background: #fff !important; color: #000 !important;
        border-radius: 0;
        font-size: 9pt; line-height: 1.35;
      }
      .doc-print-empresa h1, .doc-print-foot strong { color: #000 !important; }
      .doc-print-empresa p, .doc-print-contact, .doc-print-fecha,
      .doc-print-firma-lbl, .doc-print-foot { color: #444 !important; }
      /* Compactacion para A4 — apunta a 1 sola hoja por doc */
      .doc-print-head { padding-bottom: 6px; margin-bottom: 8px; gap: 12px; }
      .doc-print-logo { width: 44px; height: 44px; border-radius: 6px; background: transparent !important; }
      .doc-print-empresa h1 { font-size: 13pt; }
      .doc-print-empresa p { font-size: 8pt; margin: 1px 0; }
      .doc-print-tipo { font-size: 13pt; }
      .doc-print-num { font-size: 9.5pt; margin-top: 2px; }
      .doc-print-fecha { font-size: 8pt; }
      .doc-print-title { font-size: 11.5pt; margin: 2px 0 6px; padding-bottom: 3px; }
      .doc-print-meta { padding: 6px 10px; margin-bottom: 8px; font-size: 8.5pt; gap: 2px 18px; }
      .doc-print-meta .lbl { font-size: 7pt; }
      .doc-print-table { font-size: 8.5pt; margin-bottom: 6px; }
      .doc-print-table th, .doc-print-table td { padding: 4px 6px; }
      .doc-print-table th { background: #f0f0f0 !important; color: #000 !important; }
      .doc-print-total-row { background: #f0f0f0 !important; color: #000 !important; }
      .doc-print-sec-row { background: #f7f7f7 !important; }
      .doc-print-sec { margin: 8px 0; }
      .doc-print-sec h3 { font-size: 9.5pt; margin: 0 0 4px; padding-bottom: 2px; color: #000 !important; }
      .doc-print-sec p, .doc-print-sec li { font-size: 8.5pt; margin: 2px 0; }
      /* Firmas chicas */
      .doc-print-firmas { gap: 16px; margin: 12px 0 8px; page-break-inside: avoid; }
      .doc-print-firma img { height: 50px; max-width: 220px; }
      .doc-print-firma-empty { height: 50px; max-width: 220px; }
      .doc-print-firma-lbl { font-size: 7pt; }
      .doc-print-firma-name { font-size: 8.5pt; }
      /* Footer */
      .doc-print-foot { margin-top: 10px; padding-top: 6px; font-size: 7.5pt; line-height: 1.4; }
      .doc-print-foot strong { font-size: 8.5pt; }
      /* Page-break avoids */
      .doc-print-table, .doc-print-sec, .doc-print-firmas, .doc-print-foot { page-break-inside: avoid; }
      tr, .doc-print-firma { page-break-inside: avoid; }

      /* ------------------------------------------------------------
         REMITO y ACTA: son documentos que se entregan en mano y se
         firman, no cotizaciones que se leen. Suelen tener pocos
         renglones, asi que la compactacion de arriba los dejaba
         diminutos en el tercio superior de la hoja, con media pagina
         en blanco y una linea de firma minuscula.

         Se les sube el cuerpo a 11pt y se manda el bloque de firmas al
         PIE de la hoja, como un remito de papel. El presupuesto queda
         como estaba: ahi la compactacion sirve, porque es largo.
         ------------------------------------------------------------ */
      .doc-print[data-doc-type="remito"],
      .doc-print[data-doc-type="acta"] {
        font-size: 11pt; line-height: 1.5;
        /* Alto util de A4 menos los margenes de @page (10mm arriba y abajo).
           Con flex, el margin-top:auto de las firmas las empuja al pie. */
        display: flex; flex-direction: column;
        min-height: 277mm;
      }
      .doc-print[data-doc-type="remito"] .doc-print-tipo,
      .doc-print[data-doc-type="acta"]   .doc-print-tipo   { font-size: 17pt; }
      .doc-print[data-doc-type="remito"] .doc-print-num,
      .doc-print[data-doc-type="acta"]   .doc-print-num    { font-size: 12pt; }
      .doc-print[data-doc-type="remito"] .doc-print-fecha,
      .doc-print[data-doc-type="acta"]   .doc-print-fecha  { font-size: 10pt; }
      .doc-print[data-doc-type="remito"] .doc-print-empresa h1,
      .doc-print[data-doc-type="acta"]   .doc-print-empresa h1 { font-size: 16pt; }
      .doc-print[data-doc-type="remito"] .doc-print-logo,
      .doc-print[data-doc-type="acta"]   .doc-print-logo   { width: 58px; height: 58px; }
      .doc-print[data-doc-type="remito"] .doc-print-title,
      .doc-print[data-doc-type="acta"]   .doc-print-title  { font-size: 14pt; margin: 6px 0 10px; }
      .doc-print[data-doc-type="remito"] .doc-print-meta,
      .doc-print[data-doc-type="acta"]   .doc-print-meta   { font-size: 10.5pt; padding: 10px 14px; gap: 6px 22px; }
      .doc-print[data-doc-type="remito"] .doc-print-meta .lbl,
      .doc-print[data-doc-type="acta"]   .doc-print-meta .lbl { font-size: 8.5pt; }
      .doc-print[data-doc-type="remito"] .doc-print-table,
      .doc-print[data-doc-type="acta"]   .doc-print-table  { font-size: 10.5pt; }
      .doc-print[data-doc-type="remito"] .doc-print-table th,
      .doc-print[data-doc-type="remito"] .doc-print-table td,
      .doc-print[data-doc-type="acta"]   .doc-print-table th,
      .doc-print[data-doc-type="acta"]   .doc-print-table td { padding: 8px 10px; }
      .doc-print[data-doc-type="remito"] .doc-print-sec h3,
      .doc-print[data-doc-type="acta"]   .doc-print-sec h3  { font-size: 11.5pt; }
      .doc-print[data-doc-type="remito"] .doc-print-sec p,
      .doc-print[data-doc-type="remito"] .doc-print-sec li,
      .doc-print[data-doc-type="acta"]   .doc-print-sec p,
      .doc-print[data-doc-type="acta"]   .doc-print-sec li  { font-size: 10.5pt; margin: 4px 0; }

      /* Firmas al pie, con espacio real para firmar a mano */
      .doc-print[data-doc-type="remito"] .doc-print-firmas,
      .doc-print[data-doc-type="acta"]   .doc-print-firmas {
        margin-top: auto; padding-top: 24px; gap: 32px;
      }
      .doc-print[data-doc-type="remito"] .doc-print-firma img,
      .doc-print[data-doc-type="acta"]   .doc-print-firma img,
      .doc-print[data-doc-type="remito"] .doc-print-firma-empty,
      .doc-print[data-doc-type="acta"]   .doc-print-firma-empty {
        height: 78px; max-width: 320px;
      }
      .doc-print[data-doc-type="remito"] .doc-print-firma-lbl,
      .doc-print[data-doc-type="acta"]   .doc-print-firma-lbl  { font-size: 9.5pt; }
      .doc-print[data-doc-type="remito"] .doc-print-firma-name,
      .doc-print[data-doc-type="acta"]   .doc-print-firma-name { font-size: 10.5pt; }
      .doc-print[data-doc-type="remito"] .doc-print-foot,
      .doc-print[data-doc-type="acta"]   .doc-print-foot { font-size: 9pt; margin-top: 14px; }
      .doc-print[data-doc-type="remito"] .doc-print-foot strong,
      .doc-print[data-doc-type="acta"]   .doc-print-foot strong { font-size: 10pt; }
    }

    /* ============================================================
       TYPEAHEAD COMBO — input typeable + dropdown filtrado + auto-crear
       Reemplaza al patron <select>+combo-create. Aplicado a Cliente
       y Dependencia en los 3 modales (informe, remito, presupuesto).
       ============================================================ */
    .ta-wrap { position: relative; }
    .ta-input {
      /* Hereda estilos de .form-grid input / .form-card input.
         Solo agrega un padding-right minimo por las dudas. */
    }
    .ta-dropdown {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: var(--c-card); border: 1px solid var(--c-borde);
      border-radius: var(--r-sm);
      box-shadow: 0 8px 24px -6px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
      max-height: 240px; overflow-y: auto;
      z-index: 100;
      animation: ta-fade 160ms var(--ease-out);
    }
    .ta-dropdown.hidden { display: none; }
    @keyframes ta-fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
    .ta-item {
      padding: 9px 12px; font-size: 13.5px;
      color: var(--c-texto); cursor: pointer;
      border-bottom: 1px solid var(--c-borde-soft);
      transition: background 120ms var(--ease-out);
    }
    .ta-item:last-child { border-bottom: none; }
    .ta-item:hover, .ta-item.is-active {
      background: var(--c-azul-soft); color: var(--c-azul);
    }
    .ta-empty {
      padding: 10px 12px; font-size: 12.5px; color: var(--ink-3);
      font-style: italic; text-align: center;
    }
    .ta-create {
      padding: 9px 12px; font-size: 12.5px;
      color: var(--c-azul); cursor: pointer;
      background: var(--c-azul-soft);
      border-top: 1px solid var(--c-azul-line);
      font-weight: 600;
      transition: background 120ms var(--ease-out);
    }
    .ta-create:hover { background: var(--c-azul-line); }
    .ta-create strong { color: var(--c-texto); font-weight: 700; }
    /* Sublabel chico al lado de la descripcion (rubro · precio) en items del catalogo */
    .ta-sub {
      display: inline-block; margin-left: 8px;
      font-size: 11.5px; color: var(--ink-3, #6B7280);
      font-weight: 400;
    }
    .ta-item:hover .ta-sub, .ta-item.is-active .ta-sub {
      color: var(--c-azul, #1B6B93);
    }
    /* Aviso al final cuando hay mas matches que el limite mostrado */
    .ta-more {
      padding: 7px 12px; font-size: 11.5px;
      color: var(--ink-3, #6B7280); text-align: center;
      background: var(--c-borde-soft, #F0F2F5);
      font-style: italic;
    }

    /* ============================================================
       CATALOGO — card resumen en Config + modal de gestion
       ============================================================ */
    .catalogo-summary {
      display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
      margin-bottom: 8px;
    }
    .catalogo-stats {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    }
    .catalogo-stat {
      background: var(--c-azul-soft, #E8F1F7);
      border: 1px solid var(--c-azul-line, #C4DCE8);
      border-radius: var(--r-sm, 8px); padding: 10px 12px;
      text-align: center;
    }
    .catalogo-stat .num {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 22px; font-weight: 700; color: var(--c-azul, #1B6B93);
      line-height: 1;
    }
    .catalogo-stat .lbl {
      font-size: 11px; color: var(--c-texto-muted, #6B7280);
      margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .catalogo-actions { display: flex; flex-direction: column; gap: 6px; }
    .catalogo-hint {
      font-size: 12.5px; color: var(--c-texto-muted, #6B7280);
      margin-top: 6px;
    }
    .catalogo-hint code {
      background: var(--c-borde-soft, #F0F2F5); padding: 1px 5px;
      border-radius: 3px; font-size: 11.5px;
    }
    @media (max-width: 720px) {
      .catalogo-summary { grid-template-columns: 1fr; }
      .catalogo-actions { flex-direction: row; }
    }

    /* Toolbar del modal de catalogo */
    .cat-toolbar {
      display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 8px;
      margin-bottom: 14px;
      position: sticky; top: 0; background: var(--c-card); z-index: 5;
      padding: 8px 0;
    }
    .cat-toolbar input, .cat-toolbar select {
      height: 36px; padding: 6px 10px; font-size: 13px;
      border: 1px solid var(--c-borde); border-radius: var(--r-sm);
      background: var(--c-card); color: var(--c-texto);
    }
    @media (max-width: 720px) {
      .cat-toolbar { grid-template-columns: 1fr 1fr; }
      .cat-toolbar .btn { grid-column: 1 / -1; }
    }

    /* Tabla del catalogo */
    .cat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .cat-table thead th {
      text-align: left; padding: 8px 10px;
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--c-texto-muted, #6B7280);
      border-bottom: 2px solid var(--c-borde);
      background: var(--c-borde-soft, #F8F9FB);
      position: sticky; top: 56px; z-index: 4;
    }
    .cat-table th.r, .cat-table td.r { text-align: right; }
    .cat-table tbody td {
      padding: 8px 10px; border-bottom: 1px solid var(--c-borde-soft, #F0F2F5);
      vertical-align: top;
    }
    .cat-table tbody tr:hover { background: var(--c-azul-soft, #F4F8FB); }
    .cat-table .cat-cod {
      font-family: ui-monospace, "Cascadia Mono", monospace;
      font-size: 11.5px; color: var(--c-texto-muted, #6B7280);
    }
    .cat-table .cat-desc { font-weight: 500; }
    .cat-table .cat-prov {
      font-size: 11px; color: var(--c-texto-muted, #6B7280); margin-top: 2px;
    }
    .cat-pager {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; padding: 12px 0 4px;
      font-size: 12.5px; color: var(--c-texto-muted, #6B7280);
    }
    .cat-pager span { flex: 1; text-align: center; }

    /* Modal de auto-aprendizaje del catalogo */
    .al-list { display: flex; flex-direction: column; gap: 6px; }
    .al-row {
      display: grid; grid-template-columns: auto 1fr; gap: 10px;
      padding: 10px 12px; align-items: start;
      border: 1px solid var(--c-borde-soft, #F0F2F5);
      border-radius: var(--r-sm, 8px);
      background: var(--c-card);
      cursor: pointer;
    }
    .al-row:hover { border-color: var(--c-azul-line, #C4DCE8); background: var(--c-azul-soft, #F4F8FB); }
    .al-row input[type="checkbox"] { margin-top: 4px; transform: scale(1.15); }
    .al-info { min-width: 0; }
    .al-desc { font-weight: 500; font-size: 13.5px; color: var(--c-texto); }
    .al-meta {
      display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
      margin-top: 6px; font-size: 12px;
    }
    .al-meta input[type="text"] {
      height: 28px; padding: 3px 8px; font-size: 12px;
      border: 1px solid var(--c-borde); border-radius: 4px;
      background: var(--c-card); color: var(--c-texto); max-width: 180px;
    }
    .al-meta .al-price {
      padding: 2px 8px; background: var(--c-borde-soft, #F0F2F5);
      border-radius: 4px; color: var(--c-texto-muted, #6B7280);
    }

    /* Badge link bidireccional Presupuesto <-> Remito en vista detalle */
    .linked-doc-badge {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 8px 14px; margin: 0 0 12px;
      background: var(--c-verde-soft, #E5F4EC);
      border: 1px solid var(--c-verde-line, #BFE0CF);
      border-left: 3px solid var(--c-verde, #2D9B6F);
      border-radius: var(--r-sm, 8px);
      font-size: 13px;
    }
    .linked-doc-badge__lbl {
      color: var(--c-texto-muted, #6B7280);
      text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; font-weight: 600;
    }
    .linked-doc-badge__link {
      color: var(--c-verde, #2D9B6F); font-weight: 700; text-decoration: none;
      font-family: ui-monospace, "Cascadia Mono", monospace;
    }
    .linked-doc-badge__link:hover { text-decoration: underline; }
    @media print {
      .linked-doc-badge { display: none !important; }
    }

    /* ============================================================
       COBRANZAS — tab nueva, stats hero, tabla, filtros, planilla print
       ============================================================ */
    #tab-cobranzas { padding: 16px 18px 80px; }

    .cob-hero {
      display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px;
      margin-bottom: 16px;
    }
    @media (max-width: 900px) {
      .cob-hero { grid-template-columns: 1fr; }
    }
    .cob-hero-stats {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    }
    .cob-stat {
      background: var(--c-card); border: 1px solid var(--c-borde);
      border-radius: var(--r-md, 10px); padding: 14px 16px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }
    .cob-stat .lbl {
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
      color: var(--c-texto-muted, #6B7280); font-weight: 600;
    }
    .cob-stat .val {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 24px; font-weight: 700; line-height: 1.1; margin: 4px 0;
    }
    .cob-stat .sub {
      font-size: 11.5px; color: var(--c-texto-muted, #6B7280);
    }
    .cob-stat--pendiente .val { color: var(--c-naranja, #E8750A); }
    .cob-stat--pendiente { border-left: 3px solid var(--c-naranja, #E8750A); }
    .cob-stat--pagada .val { color: var(--c-verde, #2D9B6F); }
    .cob-stat--pagada { border-left: 3px solid var(--c-verde, #2D9B6F); }
    .cob-stat--cancelada .val { color: var(--c-texto-muted, #6B7280); }
    .cob-stat--cancelada { border-left: 3px solid var(--c-borde, #DDE3EA); }

    .cob-hero-actions {
      display: flex; flex-direction: column; gap: 6px; align-items: stretch;
    }
    .cob-hero-actions .btn { white-space: nowrap; }
    .cob-hero-actions .btn-primary { font-weight: 700; }
    @media (max-width: 900px) {
      .cob-hero-actions { flex-direction: row; flex-wrap: wrap; }
      .cob-hero-actions .btn { flex: 1 1 auto; }
    }

    .cob-toolbar {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr auto;
      gap: 8px; margin-bottom: 14px;
      background: var(--c-card); border: 1px solid var(--c-borde);
      padding: 10px; border-radius: var(--r-sm, 8px);
    }
    @media (max-width: 900px) {
      .cob-toolbar { grid-template-columns: 1fr 1fr; }
    }
    .cob-toolbar input, .cob-toolbar select {
      height: 34px; padding: 4px 10px; font-size: 13px;
      border: 1px solid var(--c-borde); border-radius: var(--r-sm);
      background: var(--c-card); color: var(--c-texto);
    }
    .cob-date-range {
      display: flex; align-items: center; gap: 6px;
      font-size: 11.5px; color: var(--c-texto-muted, #6B7280);
    }
    .cob-date-range span { white-space: nowrap; }
    .cob-date-range input { flex: 1; min-width: 0; }

    .cob-list-box {
      background: var(--c-card); border: 1px solid var(--c-borde);
      border-radius: var(--r-md, 10px); padding: 16px;
    }
    .cob-list-head {
      display: flex; align-items: baseline; justify-content: space-between;
      margin-bottom: 10px;
    }
    .cob-list-head h3 {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 16px; font-weight: 600; margin: 0;
    }
    .cob-list-summary {
      display: flex; gap: 14px; font-size: 12.5px; color: var(--c-texto-muted, #6B7280);
    }
    .cob-list-total {
      color: var(--c-azul, #1B6B93); font-weight: 700;
    }

    .cob-table {
      width: 100%; border-collapse: collapse; font-size: 13px;
    }
    .cob-table thead th {
      text-align: left; padding: 8px 10px;
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--c-texto-muted, #6B7280); font-weight: 600;
      border-bottom: 2px solid var(--c-borde);
      background: var(--c-borde-soft, #F8F9FB);
    }
    .cob-table th.r, .cob-table td.r { text-align: right; }
    .cob-table tbody td {
      padding: 8px 10px; border-bottom: 1px solid var(--c-borde-soft, #F0F2F5);
      vertical-align: middle;
    }
    .cob-table tbody tr:hover { background: var(--c-azul-soft, #F4F8FB); }

    .cob-tipo {
      display: inline-block; width: 22px; height: 22px; line-height: 22px;
      text-align: center; font-weight: 700; font-size: 11px;
      border-radius: 4px;
      background: var(--c-azul-soft, #E8F1F7); color: var(--c-azul, #1B6B93);
    }
    .cob-tipo--A { background: #FEF3C7; color: #92400E; }
    .cob-tipo--B { background: #DBEAFE; color: #1E40AF; }
    .cob-tipo--C { background: #DCFCE7; color: #166534; }
    .cob-tipo--M { background: #FCE7F3; color: #9D174D; }
    .cob-tipo--X { background: #F3F4F6; color: #4B5563; }

    .cob-remito-col { font-size: 12px; }
    .cob-remito-link {
      color: var(--c-azul, #1B6B93); text-decoration: none; font-weight: 600;
      font-family: ui-monospace, "Cascadia Mono", monospace;
    }
    .cob-remito-link:hover { text-decoration: underline; }
    .cob-remito-ext {
      color: var(--c-texto-muted, #6B7280); font-style: italic;
      font-family: ui-monospace, "Cascadia Mono", monospace;
    }
    .cob-remito-sin { color: var(--c-borde, #DDE3EA); }

    .cob-estado-sel {
      height: 28px; padding: 2px 6px; font-size: 11.5px;
      border: 1px solid var(--c-borde); border-radius: 4px;
      background: var(--c-card); font-weight: 600;
    }
    .cob-estado--pendiente { color: var(--c-naranja, #E8750A); border-color: var(--c-naranja, #E8750A); }
    .cob-estado--pagada    { color: var(--c-verde, #2D9B6F); border-color: var(--c-verde, #2D9B6F); }
    .cob-estado--cancelada { color: var(--c-texto-muted, #6B7280); }
    .cob-estado-pill {
      display: inline-block; padding: 2px 8px; border-radius: 10px;
      font-size: 11px; font-weight: 600;
      background: var(--c-borde-soft, #F0F2F5);
    }
    .cob-estado-pill.cob-estado--pendiente { background: #FEEBC8; }
    .cob-estado-pill.cob-estado--pagada    { background: #C8F0DC; }

    /* Carga rapida — tabla tipo Excel */
    .bulk-fac-table {
      width: 100%; border-collapse: collapse; font-size: 12.5px;
    }
    .bulk-fac-table thead th {
      text-align: left; padding: 6px 8px; font-size: 10.5px;
      text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--c-texto-muted, #6B7280);
      background: var(--c-borde-soft, #F0F2F5);
      border-bottom: 1px solid var(--c-borde);
    }
    .bulk-fac-table tbody td {
      padding: 2px 4px; border-bottom: 1px solid var(--c-borde-soft, #F0F2F5);
    }
    .bulk-fac-table input, .bulk-fac-table select {
      width: 100%; height: 30px; padding: 2px 6px; font-size: 12px;
      border: 1px solid transparent; border-radius: 3px;
      background: var(--c-card); color: var(--c-texto);
    }
    .bulk-fac-table input:focus, .bulk-fac-table select:focus {
      outline: 2px solid var(--c-azul, #1B6B93); outline-offset: -2px;
      border-color: transparent;
    }
    .bulk-fac-table tbody tr:hover { background: var(--c-azul-soft, #F4F8FB); }

    /* Badge "Facturación" en detalle de remito */
    .remito-facturas-badge {
      margin: 0 0 14px;
      padding: 12px 14px;
      background: var(--c-azul-soft, #F4F8FB);
      border: 1px solid var(--c-azul-line, #C4DCE8);
      border-left: 3px solid var(--c-azul, #1B6B93);
      border-radius: var(--r-sm, 8px);
    }
    .rfb-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
    }
    .rfb-lbl {
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
      font-weight: 700; color: var(--c-azul, #1B6B93);
      display: inline-flex; align-items: center; gap: 10px;
    }
    .rfb-state {
      padding: 3px 10px; border-radius: 999px;
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.3px;
      border: 1px solid transparent;
    }
    .rfb-state--pend { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
    .rfb-state--ok   { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
    .rfb-state--paid { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
    .rfb-empty {
      font-size: 12.5px; color: var(--c-texto-muted, #6B7280);
      font-style: italic;
    }
    .rfb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    .rfb-table th, .rfb-table td {
      padding: 6px 8px; border-bottom: 1px solid var(--c-borde-soft, #F0F2F5);
      text-align: left;
    }
    .rfb-table th.r, .rfb-table td.r { text-align: right; }
    .rfb-table th {
      font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--c-texto-muted, #6B7280); font-weight: 600;
    }
    .rfb-total {
      margin-top: 8px; padding-top: 8px;
      border-top: 1px solid var(--c-borde-soft, #F0F2F5);
      font-size: 12.5px; color: var(--c-texto);
    }
    @media print {
      .remito-facturas-badge { display: none !important; }
    }

    /* Card "Saldo del cliente" en modal de cliente */
    .cli-saldo-card {
      margin: 12px 0;
      padding: 14px 16px;
      background: var(--c-naranja-soft, #FFF4E5);
      border: 1px solid var(--c-naranja, #E8750A);
      border-left: 4px solid var(--c-naranja, #E8750A);
      border-radius: var(--r-sm, 8px);
    }
    .cli-saldo-row {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
    }
    .cli-saldo-lbl {
      font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--c-texto-muted, #6B7280); font-weight: 600;
    }
    .cli-saldo-val {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 22px; font-weight: 700; color: var(--c-naranja, #E8750A);
    }
    .cli-saldo-sub {
      font-size: 12px; color: var(--c-texto-muted, #6B7280);
    }
    .cli-saldo-ok {
      color: var(--c-verde, #2D9B6F); font-weight: 600; font-size: 13px;
    }
    .cli-saldo-loading {
      font-size: 12.5px; color: var(--c-texto-muted, #6B7280);
      font-style: italic;
    }

    /* Bloque "Combinar con otro cliente" en modal del cliente */
    .cli-merge-zone {
      margin-top: 14px; padding-top: 14px;
      border-top: 1px dashed var(--c-borde, #DDE3EA);
    }
    .cli-merge-link {
      background: none; border: none; padding: 4px 0;
      font-size: 12.5px; color: var(--c-texto-muted, #6B7280);
      cursor: pointer; text-align: left;
    }
    .cli-merge-link:hover { color: var(--red, #C53030); text-decoration: underline; }

    /* Resumen del modal de merge */
    .cli-merge-summary {
      background: var(--c-borde-soft, #F8F9FB);
      border: 1px solid var(--c-borde, #DDE3EA);
      border-radius: var(--r-sm, 8px);
      padding: 12px 14px; font-size: 13px;
    }
    .cli-merge-summary strong { color: var(--c-texto); }
    .cli-merge-counts {
      list-style: none; padding: 8px 0 0; margin: 0;
      display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px;
    }
    .cli-merge-counts li {
      background: var(--c-card); border: 1px solid var(--c-borde, #DDE3EA);
      border-radius: 6px; padding: 6px 10px; font-size: 12.5px;
      color: var(--c-texto-muted, #6B7280);
    }
    .cli-merge-counts li span {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 18px; font-weight: 700; color: var(--c-azul, #1B6B93);
      margin-right: 6px;
    }
    .cli-merge-summary p {
      margin: 10px 0 0; font-size: 13px; color: var(--c-texto);
    }

    /* ============================================================
       DOCS — toolbar de filtro por fecha
       ============================================================ */
    .docs-date-toolbar {
      display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
      padding: 8px 10px; margin: 4px 0 12px;
      background: var(--c-card); border: 1px solid var(--c-borde, #DDE3EA);
      border-radius: var(--r-sm, 8px); font-size: 12.5px;
    }
    .docs-date-presets { display: flex; flex-wrap: wrap; gap: 4px; }
    .docs-date-pill {
      background: var(--c-borde-soft, #F0F2F5);
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 4px 12px; font-size: 12px; font-weight: 600;
      color: var(--c-texto-muted, #6B7280);
      cursor: pointer; transition: all 0.15s;
    }
    .docs-date-pill:hover {
      background: var(--c-azul-soft, #E8F1F7); color: var(--c-azul, #1B6B93);
    }
    .docs-date-pill.active {
      background: var(--c-azul, #1B6B93); color: #fff; border-color: var(--c-azul, #1B6B93);
    }
    .docs-date-range {
      display: flex; align-items: center; gap: 6px;
      font-size: 11px; color: var(--c-texto-muted, #6B7280);
    }
    .docs-date-range span { white-space: nowrap; }
    .docs-date-range input[type="date"] {
      height: 30px; padding: 2px 8px; font-size: 12px;
      border: 1px solid var(--c-borde, #DDE3EA); border-radius: 5px;
      background: var(--c-card);
    }
    .docs-date-count {
      margin-left: auto; font-size: 12px; color: var(--c-texto-muted, #6B7280);
      font-weight: 600;
    }
    @media (max-width: 720px) {
      .docs-date-toolbar { flex-direction: column; align-items: stretch; }
      .docs-date-count { margin-left: 0; text-align: right; }
    }

    /* Badge visual cuando el sublabel arranca con "⚠ ya facturado".
       attachTypeahead pone el texto plano, lo distinguimos via :has() en navegadores
       modernos. Sin :has() degradado: solo se ve el emoji ⚠ que ya queda evidente. */
    @supports selector(:has(*)) {
      .ta-item:has(.ta-sub) .ta-sub { display: inline-block; }
      .ta-dropdown .ta-item .ta-sub {
        /* base: gris habitual */
      }
    }

    /* Popup "¿Quién me debe?" — lista clickeable de top deudores */
    .qmd-list { display: flex; flex-direction: column; gap: 8px; }
    .qmd-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      width: 100%; padding: 12px 14px;
      background: var(--c-card); border: 1px solid var(--c-borde, #DDE3EA);
      border-left: 3px solid var(--c-naranja, #E8750A);
      border-radius: var(--r-sm, 8px);
      cursor: pointer; text-align: left;
      transition: all 0.15s;
    }
    .qmd-row:hover {
      background: var(--c-naranja-soft, #FFF4E5);
      border-color: var(--c-naranja, #E8750A);
      transform: translateX(2px);
    }
    .qmd-info { min-width: 0; flex: 1; }
    .qmd-nombre {
      font-size: 14px; font-weight: 600; color: var(--c-texto);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .qmd-cnt {
      font-size: 12px; color: var(--c-texto-muted, #6B7280);
      margin-top: 2px;
    }
    .qmd-total {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 18px; font-weight: 700; color: var(--c-naranja, #E8750A);
      white-space: nowrap;
    }
    .qmd-arrow {
      font-size: 12px; color: var(--c-texto-muted, #6B7280);
      transition: transform 0.2s var(--ease-out, ease);
      width: 14px;
    }
    .qmd-row-wrap--open .qmd-arrow { transform: rotate(90deg); }

    /* Detalle expandido del cliente: tabla con sus facturas pendientes */
    .qmd-row-wrap { display: flex; flex-direction: column; }
    .qmd-row-wrap--open .qmd-row {
      background: var(--c-naranja-soft, #FFF4E5);
      border-radius: 8px 8px 0 0;
    }
    .qmd-detail {
      background: var(--c-card);
      border: 1px solid var(--c-naranja, #E8750A);
      border-top: none;
      border-radius: 0 0 8px 8px;
      padding: 10px 14px 12px;
      margin-bottom: 8px;
      animation: qmd-detail-in 250ms var(--ease-out, ease);
    }
    @keyframes qmd-detail-in {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .qmd-loading, .qmd-empty {
      padding: 10px; font-size: 12.5px; color: var(--c-texto-muted, #6B7280);
      font-style: italic; text-align: center;
    }
    .qmd-fact-table {
      width: 100%; border-collapse: collapse; font-size: 12px;
    }
    .qmd-fact-table thead th {
      text-align: left; padding: 6px 8px; font-size: 10.5px;
      text-transform: uppercase; letter-spacing: 0.4px;
      color: var(--c-texto-muted, #6B7280); font-weight: 600;
      border-bottom: 1px solid var(--c-borde, #DDE3EA);
    }
    .qmd-fact-table th.r, .qmd-fact-table td.r { text-align: right; }
    .qmd-fact-table tbody td {
      padding: 6px 8px;
      border-bottom: 1px solid var(--c-borde-soft, #F0F2F5);
      vertical-align: middle;
    }
    .qmd-fact-table tbody tr:last-child td { border-bottom: none; }
    .qmd-fact-table tfoot td {
      padding: 8px; font-size: 12px;
      border-top: 2px solid var(--c-borde, #DDE3EA);
    }
    .qmd-remito {
      font-family: ui-monospace, "Cascadia Mono", monospace;
      font-size: 11px; color: var(--c-azul, #1B6B93); font-weight: 600;
    }
    .qmd-remito--ext { color: var(--c-texto-muted, #6B7280); font-style: italic; }
    .qmd-remito--sin { color: var(--c-borde, #DDE3EA); }
    .qmd-mora {
      display: inline-block; padding: 1px 7px;
      border-radius: 999px; font-size: 10.5px; font-weight: 700;
    }
    .qmd-mora--baja  { background: #DCFCE7; color: #166534; }
    .qmd-mora--media { background: #FEF3C7; color: #92400E; }
    .qmd-mora--alta  { background: #FEE2E2; color: #991B1B; }

    .qmd-actions {
      margin-top: 10px;
      display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
    }

    /* Badge "facturado" / "sin facturar" en items de Recientes y Docs */
    .recent-fact-badge {
      display: inline-block; margin-top: 4px;
      padding: 2px 8px; border-radius: 999px;
      font-size: 10.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.3px;
    }
    .recent-fact-badge--ok {
      background: #DCFCE7; color: #166534;
      border: 1px solid #86EFAC;
    }
    .recent-fact-badge--pend {
      background: #FEF3C7; color: #92400E;
      border: 1px solid #FCD34D;
    }
    .recent-fact-badge--paid {
      background: #DBEAFE; color: #1E40AF;
      border: 1px solid #93C5FD;
    }

    /* ============================================================
       Generar borrador — card en el modal + modal-overlay
       ============================================================ */
    .gb-helper-card {
      background: linear-gradient(135deg, var(--c-azul-soft, #E8F1F7) 0%, var(--c-verde-soft, #E5F4EC) 100%);
      border: 1px solid var(--c-azul-line, #C4DCE8);
      border-left: 4px solid var(--c-azul, #1B6B93);
    }
    .gb-helper-row {
      display: flex; gap: 14px; align-items: center; justify-content: space-between;
    }
    .gb-helper-info { flex: 1; min-width: 0; }
    .gb-helper-title {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 15px; font-weight: 700; color: var(--c-texto);
      margin-bottom: 3px;
    }
    .gb-helper-desc {
      font-size: 12.5px; color: var(--c-texto-muted, #6B7280);
      line-height: 1.4;
    }
    .gb-helper-row .btn { white-space: nowrap; }

    /* Modal generar borrador — pasos numerados */
    .gb-modal-step {
      display: grid; grid-template-columns: 36px 1fr; gap: 12px;
      margin-bottom: 18px;
    }
    .gb-modal-step-num {
      width: 30px; height: 30px; border-radius: 50%;
      background: var(--c-azul, #1B6B93); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 15px; font-weight: 700;
    }
    .gb-modal-step-body h4 {
      margin: 4px 0 4px; font-size: 14px; font-weight: 600;
    }
    .gb-modal-hint {
      margin: 0 0 8px; font-size: 12px; color: var(--c-texto-muted, #6B7280);
    }
    .gb-modal-hint em { font-style: italic; color: var(--c-texto); }

    /* Botones "Sacar foto" / "Subir fotos" arriba del dropzone */
    .gb-upload-actions {
      display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
    }
    .gb-action-btn {
      flex: 1 1 calc(50% - 5px); min-width: 130px;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 14px 16px; font-size: 14px; font-weight: 600;
      cursor: pointer;
    }
    .gb-action-ico { font-size: 18px; }

    /* En mobile (≤600px) stackeamos vertical para que no se amontonen */
    @media (max-width: 600px) {
      .gb-upload-actions { flex-direction: column; gap: 8px; }
      .gb-action-btn {
        flex: 1 1 auto; width: 100%;
        padding: 14px 16px; font-size: 15px;
      }
      .gb-modal-step { grid-template-columns: 28px 1fr; gap: 8px; }
      .gb-modal-step-num { width: 24px; height: 24px; font-size: 13px; }
      .gb-modal-step-body h4 { font-size: 13.5px; }
      .gb-modal-hint { font-size: 11.5px; }
      #gb-contexto { font-size: 13.5px; }
      .gb-thumbs { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    }

    /* En desktop (hover fine pointer + ancho >= 720) ocultar el boton "Sacar
       foto" — solo tiene sentido en mobile con camara. En desktop confunde
       porque abre file picker single-select. Queda solo "Subir fotos" que
       acepta multiple. */
    @media (hover: hover) and (pointer: fine) and (min-width: 720px) {
      .gb-action-btn--camera { display: none; }
      .gb-action-btn--upload { flex: 1 1 auto; max-width: 280px; margin: 0 auto; }
    }

    /* Uploader / dropzone (para drag&drop desde desktop) */
    .gb-uploader {
      display: block; cursor: pointer;
      border: 2px dashed var(--c-azul-line, #C4DCE8);
      border-radius: var(--r-sm, 8px);
      padding: 14px 16px;
      background: var(--c-azul-soft, #F4F8FB);
      transition: all 0.15s var(--ease-out, ease);
    }
    .gb-uploader:hover, .gb-uploader.is-dragover {
      border-color: var(--c-azul, #1B6B93);
      background: var(--c-azul-line, #DCEBF3);
    }
    .gb-uploader-prompt {
      display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
      color: var(--c-azul, #1B6B93); font-size: 12px; font-weight: 600;
    }
    .gb-uploader-icon { font-size: 18px; }

    /* En mobile, ocultar el dropzone (no aplica). Quedan solo los dos botones. */
    @media (max-width: 720px) {
      .gb-uploader { display: none; }
    }

    .gb-thumbs {
      margin-top: 12px;
      display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
    }
    .gb-thumb {
      position: relative; aspect-ratio: 1;
      border: 1px solid var(--c-borde, #DDE3EA); border-radius: 6px;
      overflow: hidden; background: var(--c-borde-soft, #F8F9FB);
    }
    .gb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .gb-thumb-del {
      position: absolute; top: 4px; right: 4px;
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(0,0,0,0.6); color: #fff;
      border: none; cursor: pointer; font-size: 14px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .gb-thumb-del:hover { background: var(--c-peligro, #C53030); }
    .gb-thumb-name {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 3px 6px; font-size: 10px;
      background: rgba(0,0,0,0.55); color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Checkbox "Adjuntar al informe" overlay sobre cada thumb */
    .gb-thumb-adj {
      position: absolute; top: 4px; left: 4px; right: 32px;
      background: rgba(0,0,0,0.65); color: #fff;
      padding: 3px 6px; border-radius: 4px;
      font-size: 10.5px; font-weight: 600;
      cursor: pointer; user-select: none;
      display: flex; align-items: center; gap: 4px;
      transition: background 0.15s;
    }
    .gb-thumb-adj:hover { background: rgba(0,0,0,0.85); }
    .gb-thumb-adj input[type="checkbox"] {
      margin: 0; width: 12px; height: 12px; flex-shrink: 0;
    }
    .gb-thumb.is-adj { outline: 3px solid var(--c-verde, #2D9B6F); outline-offset: -3px; }
    .gb-thumb.is-adj .gb-thumb-adj { background: var(--c-verde, #2D9B6F); }

    /* Grid de fotos adjuntas en el modal de informe */
    .if-fotos-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;
    }
    .if-foto-thumb {
      position: relative; aspect-ratio: 1;
      border: 1px solid var(--c-borde, #DDE3EA); border-radius: 6px;
      overflow: hidden; background: var(--c-borde-soft, #F8F9FB);
    }
    .if-foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .if-foto-del {
      position: absolute; top: 4px; right: 4px;
      width: 24px; height: 24px; border-radius: 50%;
      background: rgba(0,0,0,0.65); color: #fff;
      border: none; cursor: pointer; font-size: 15px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .if-foto-del:hover { background: var(--c-peligro, #C53030); }
    .if-foto-name {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 3px 6px; font-size: 10px;
      background: rgba(0,0,0,0.55); color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Grid de fotos en el detalle/PDF del informe */
    .doc-print-fotos-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
      margin-top: 8px;
    }
    .doc-print-foto {
      border: 1px solid var(--c-borde, #DDE3EA); border-radius: 4px;
      overflow: hidden; background: #fff;
      aspect-ratio: 4/3;
    }
    .doc-print-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @media print {
      .doc-print-fotos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        page-break-inside: avoid;
      }
      .doc-print-foto { aspect-ratio: 4/3; }
      .doc-print-foto img { max-height: 110px; }
    }

    /* Mobile: doc-print en pantalla — header en columna,
       meta a 1 col, fotos a 2 cols, firmas apiladas.
       Soluciona el bug del lema cayendo letra por letra cuando el
       contenedor de empresa se colapsaba por el flex side-by-side. */
    @media (max-width: 640px) {
      .doc-print {
        padding: 16px 14px;
        max-width: 100%;
        border-radius: 6px;
        font-size: 13px;
      }
      .doc-print-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 12px;
      }
      .doc-print-brand,
      .doc-print-head--as .doc-print-brand {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 12px;
      }
      .doc-print-head--as .doc-print-empresa h1,
      .doc-print-head--as .doc-print-empresa p,
      .doc-print-head--as .doc-print-empresa .doc-print-razon-social {
        text-align: left;
      }
      .doc-print-info,
      .doc-print-head--as .doc-print-info {
        text-align: left;
      }
      .doc-print-logo { width: 52px; height: 52px; }
      .doc-print-empresa h1 { font-size: 15pt; }
      .doc-print-empresa p { font-size: 10pt; }
      .doc-print-tipo { font-size: 14pt; }
      .doc-print-num { font-size: 10pt; }
      .doc-print-title {
        font-size: 13pt;
        margin: 4px 0 10px;
      }
      .doc-print-meta {
        grid-template-columns: 1fr;
        gap: 6px 12px;
        padding: 10px 12px;
        margin-bottom: 14px;
      }
      .doc-print-meta .lbl { min-width: 72px; }
      .doc-print-fotos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
      }
      .doc-print-firmas {
        grid-template-columns: 1fr;
        gap: 18px;
      }
      .doc-print-sec h3 { font-size: 11pt; }
      /* Tablas: scroll horizontal si no entran */
      .doc-print-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 10pt;
      }
    }

    #gb-contexto {
      width: 100%; padding: 10px 12px;
      border: 1px solid var(--c-borde, #DDE3EA);
      border-radius: var(--r-sm, 8px);
      font-size: 13px; font-family: inherit;
      resize: vertical; min-height: 90px;
    }
    #gb-contexto:focus {
      outline: 2px solid var(--c-azul, #1B6B93); outline-offset: -1px;
      border-color: transparent;
    }

    .gb-error {
      margin-top: 10px; padding: 10px 12px;
      background: #FEE2E2; color: #991B1B;
      border: 1px solid #FCA5A5; border-radius: 6px;
      font-size: 12.5px;
    }

    /* Resumen del borrador IA anterior (modo refinar) */
    .gb-prev-summary {
      margin-bottom: 18px;
      padding: 14px 16px;
      background: linear-gradient(135deg, rgba(27,107,147,0.06), rgba(45,155,111,0.04));
      border: 1px solid var(--c-borde, #DDE3EA);
      border-left: 3px solid var(--c-azul, #1B6B93);
      border-radius: var(--r-md, 10px);
    }
    .gb-prev-summary-head {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 8px;
    }
    .gb-prev-summary-badge {
      display: inline-block;
      padding: 3px 8px;
      background: var(--c-azul, #1B6B93); color: #fff;
      font-size: 10.5px; font-weight: 600;
      letter-spacing: 0.04em; text-transform: uppercase;
      border-radius: 4px;
    }
    .gb-prev-summary-time {
      font-size: 11.5px; color: var(--c-texto-muted, #6B7280);
    }
    .gb-prev-summary-title {
      font-size: 14px; font-weight: 600;
      color: var(--c-texto, #1A2332);
      margin-bottom: 4px;
    }
    .gb-prev-summary-meta {
      font-size: 11.5px; color: var(--c-texto-muted, #6B7280);
      margin-bottom: 6px;
    }
    .gb-prev-summary-list {
      margin: 6px 0 0; padding-left: 18px;
      font-size: 12.5px; color: var(--c-texto, #1A2332);
    }
    .gb-prev-summary-list li { margin: 2px 0; }

    /* Link de escape "empezar de cero" en modo refinar */
    .gb-modal-escape {
      margin-top: 12px;
      text-align: center;
      font-size: 12px;
    }
    .gb-modal-escape a {
      color: var(--c-texto-muted, #6B7280);
      text-decoration: none;
      border-bottom: 1px dotted var(--c-texto-muted, #6B7280);
    }
    .gb-modal-escape a:hover {
      color: var(--c-azul, #1B6B93);
      border-bottom-color: var(--c-azul, #1B6B93);
    }


    /* Modo planilla impresa (boton "Imprimir planilla" en tab Cobranzas).
       Oculta el shell completo dejando solo la planilla profesional (header
       de empresa + resumen + tabla + firma + footer del emisor). */
    .cob-print-doc, #cob-print-foot-wrap, .cob-print-firma { display: none; }

    /* Hero de la planilla: total MUY visible a la derecha + filtros aplicados a la izq */
    .cob-print-hero {
      display: flex; justify-content: space-between; align-items: center;
      gap: 20px;
      padding: 18px 20px; margin: 18px 0 14px;
      background: var(--c-naranja-soft, #FFF4E5);
      border: 2px solid var(--c-naranja, #E8750A);
      border-radius: var(--r-sm, 8px);
    }
    .cob-print-hero-side { flex: 1; min-width: 0; }
    .cob-print-filtros {
      font-size: 13.5px; color: var(--c-texto); font-weight: 600;
      margin-bottom: 6px;
    }
    .cob-print-sec-totals {
      font-size: 12px; color: var(--c-texto-muted, #6B7280);
      display: flex; gap: 6px; flex-wrap: wrap;
    }
    .cob-print-hero-total {
      display: flex; flex-direction: column; align-items: flex-end;
      white-space: nowrap;
    }
    .cob-print-hero-total .lbl {
      font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
      color: var(--c-naranja, #E8750A); font-weight: 700;
      margin-bottom: 2px;
    }
    .cob-print-hero-total .val {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 36px; font-weight: 800; color: var(--c-naranja, #E8750A);
      line-height: 1;
    }
    @media print {
      .cob-print-hero {
        background: #fff !important;
        border: 2px solid #000 !important;
      }
      .cob-print-hero-total .val { font-size: 32px; color: #000 !important; }
      .cob-print-hero-total .lbl { color: #000 !important; }
    }

    /* Boton flotante "Volver" — visible solo en pantalla, oculto en print */
    .cob-print-back-btn {
      position: fixed; top: 16px; left: 16px; z-index: 9999;
      padding: 8px 16px;
      background: var(--c-texto, #1A2332); color: #fff;
      border: none; border-radius: 999px;
      font-size: 13px; font-weight: 600; cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      display: none;
    }
    .cob-print-back-btn:hover {
      background: var(--c-azul, #1B6B93);
    }
    body.cob-print-mode .cob-print-back-btn { display: block; }
    @media print {
      body.cob-print-mode .cob-print-back-btn { display: none !important; }
    }

    /* ============================================================
       DASHBOARD del aside del Inicio (reemplaza al almanaque viejo)
       ============================================================ */

    /* Card "Por cobrar" — total adeudado destacado */
    .dash-cobrar {
      display: block; width: 100%; text-align: left;
      cursor: pointer; border: none;
      background: var(--c-naranja-soft, #FFF4E5);
      border-left: 4px solid var(--c-naranja, #E8750A);
      padding: 14px 16px;
      transition: all 0.2s var(--ease-out, ease);
    }
    .dash-cobrar:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px -8px rgba(232, 117, 10, 0.4);
    }
    .dash-cobrar-lbl {
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
      color: var(--c-naranja, #E8750A); font-weight: 700;
    }
    .dash-cobrar-val {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 26px; font-weight: 800; color: var(--c-naranja, #E8750A);
      line-height: 1; margin: 6px 0 4px;
    }
    .dash-cobrar-sub {
      font-size: 12.5px; color: var(--c-texto-muted, #6B7280);
    }
    .dash-cobrar-cta {
      font-size: 11.5px; font-weight: 600;
      color: var(--c-naranja, #E8750A);
      margin-top: 8px;
      opacity: 0.85;
    }
    .dash-cobrar:hover .dash-cobrar-cta { opacity: 1; }

    /* Card "Próximas instalaciones" */
    .dash-inst-list {
      display: flex; flex-direction: column; gap: 6px;
    }
    .dash-inst-row {
      display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center;
      padding: 8px 10px; width: 100%;
      background: var(--c-card); border: 1px solid var(--c-borde, #DDE3EA);
      border-radius: var(--r-sm, 8px);
      cursor: pointer; text-align: left;
      transition: all 0.15s var(--ease-out, ease);
    }
    .dash-inst-row:hover {
      border-color: var(--c-peligro, #C53030);
      background: var(--c-borde-soft, #FFF5F5);
    }
    .dash-inst-date {
      display: flex; flex-direction: column; align-items: center;
      background: var(--c-peligro, #C53030); color: #fff;
      border-radius: 6px; padding: 4px 0;
    }
    .dash-inst-date strong {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 16px; font-weight: 700; line-height: 1;
    }
    .dash-inst-date small {
      font-size: 9px; letter-spacing: 0.5px; opacity: 0.9; margin-top: 2px;
    }
    .dash-inst-body { min-width: 0; }
    .dash-inst-title {
      font-size: 13px; font-weight: 600; color: var(--c-texto);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dash-inst-sub {
      font-size: 11.5px; color: var(--c-texto-muted, #6B7280);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      margin-top: 1px;
    }

    /* Card "Pendientes" — contadores accionables */
    .dash-pend-list { display: flex; flex-direction: column; gap: 6px; }
    .dash-pend-row {
      display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
      padding: 8px 10px; width: 100%;
      background: var(--c-card); border: 1px solid var(--c-borde, #DDE3EA);
      border-radius: var(--r-sm, 8px);
      cursor: pointer; text-align: left;
      transition: all 0.15s var(--ease-out, ease);
    }
    .dash-pend-row:hover {
      border-color: var(--c-azul, #1B6B93);
      background: var(--c-azul-soft, #F4F8FB);
    }
    .dash-pend-cnt {
      font-family: var(--ff-display, "Sora", system-ui);
      font-size: 22px; font-weight: 800;
      color: var(--c-azul, #1B6B93);
      text-align: center; line-height: 1;
    }
    .dash-pend-row[data-kind="cobranza"] .dash-pend-cnt    { color: var(--c-naranja, #E8750A); }
    .dash-pend-row[data-kind="remito"] .dash-pend-cnt      { color: var(--c-naranja, #E8750A); }
    .dash-pend-row[data-kind="presupuesto"] .dash-pend-cnt { color: var(--c-verde, #2D9B6F); }
    .dash-pend-row[data-kind="informe"] .dash-pend-cnt     { color: var(--c-azul, #1B6B93); }
    .dash-pend-info { min-width: 0; }
    .dash-pend-lbl {
      font-size: 12.5px; font-weight: 600; color: var(--c-texto);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dash-pend-sub {
      font-size: 11px; color: var(--c-texto-muted, #6B7280);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      margin-top: 1px;
    }
    .dash-pend-arrow {
      color: var(--c-texto-muted, #6B7280); font-size: 18px;
      font-weight: 300;
    }
    .dash-pend-row:hover .dash-pend-arrow { color: var(--c-azul, #1B6B93); }

    /* Header del dashboard con toggle privacy */
    .dash-section-head { padding: 8px 14px; }
    .dash-section-head-row {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .dash-section-head h3 {
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
      font-weight: 700; color: var(--c-texto-muted, #6B7280); margin: 0;
    }
    .dash-privacy-toggle {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 999px;
      background: var(--c-borde-soft, #F0F2F5); border: 1px solid var(--c-borde, #DDE3EA);
      color: var(--c-texto-muted, #6B7280);
      font-size: 11px; font-weight: 600;
      cursor: pointer; transition: all 0.15s;
    }
    .dash-privacy-toggle:hover {
      background: var(--c-azul-soft, #E8F1F7); color: var(--c-azul, #1B6B93);
      border-color: var(--c-azul-line, #C4DCE8);
    }
    .dash-privacy-icon { font-size: 12px; }

    /* Cuando privacy está activo, los montos del dashboard se ofuscan.
       Se mantiene el espacio para que el layout no salte. El usuario sabe que
       hay info pero no la ve sin clickear el toggle. */
    body.dash-privacy-on .dash-cobrar-val,
    body.dash-privacy-on .dash-cobrar-sub {
      filter: blur(7px);
      user-select: none;
      transition: filter 0.2s var(--ease-out, ease);
    }
    body.dash-privacy-on .dash-cobrar:hover .dash-cobrar-val,
    body.dash-privacy-on .dash-cobrar:hover .dash-cobrar-sub {
      filter: blur(0);
    }

    /* ============================================================
       PULSO DEL NEGOCIO — mini-grafico SVG con curvas animadas
       ============================================================ */
    .dash-pulso { position: relative; overflow: hidden; }
    .dash-pulso-legend {
      display: flex; gap: 18px; font-size: 11px;
      justify-content: center;
      color: var(--c-texto-muted, #6B7280); margin: 6px 0 10px;
      line-height: 1;
    }
    .dash-pulso-leg {
      display: inline-flex; align-items: center; gap: 6px;
      font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
      line-height: 1;
    }
    .dash-pulso-leg .dot {
      width: 9px; height: 9px; border-radius: 50%;
      display: block; flex-shrink: 0;
    }
    .dash-pulso-leg--fact .dot { background: var(--c-azul, #1B6B93); box-shadow: 0 0 6px var(--c-azul, #1B6B93); }
    .dash-pulso-leg--cob  .dot { background: var(--c-verde, #2D9B6F); box-shadow: 0 0 6px var(--c-verde, #2D9B6F); }

    .dash-pulso-svg {
      width: 100%; height: 140px; display: block;
      overflow: visible;
    }
    .dash-pulso-area { stroke: none; opacity: 0.85; }
    .dash-pulso-line {
      fill: none; stroke-width: 2.4;
      stroke-linejoin: round; stroke-linecap: round;
    }
    .dash-pulso-line--fact {
      stroke: var(--c-azul, #1B6B93);
      filter: drop-shadow(0 0 4px rgba(27, 107, 147, 0.45));
    }
    .dash-pulso-line--cob {
      stroke: var(--c-verde, #2D9B6F);
      filter: drop-shadow(0 0 4px rgba(45, 155, 111, 0.45));
    }
    .dash-pulso-dot { transition: r 0.15s ease; }
    .dash-pulso-dot--fact { fill: var(--c-azul, #1B6B93); }
    .dash-pulso-dot--cob  { fill: var(--c-verde, #2D9B6F); }
    .dash-pulso-grid-ln {
      stroke: var(--c-borde, #DDE3EA);
      stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5;
    }
    .dash-pulso-xlabel {
      font-size: 9px; fill: var(--c-texto-muted, #6B7280);
      font-weight: 600; letter-spacing: 0.5px;
      font-family: var(--ff-sans, system-ui);
    }
    .dash-pulso-tooltip {
      position: absolute; z-index: 5;
      background: var(--c-texto, #1A2332); color: #fff;
      padding: 6px 10px; border-radius: 6px;
      font-size: 11.5px; pointer-events: none;
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
      transform: translateX(-50%);
      white-space: nowrap;
    }
    .dash-pulso-tooltip::after {
      content: ''; position: absolute; left: 50%; bottom: -4px;
      width: 8px; height: 8px; background: var(--c-texto, #1A2332);
      transform: translateX(-50%) rotate(45deg);
    }
    .pulso-tt-mes {
      font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px;
      opacity: 0.7; margin-bottom: 2px;
    }
    .pulso-tt-row { display: flex; align-items: center; gap: 5px; }
    .pulso-tt-row .dot {
      width: 6px; height: 6px; border-radius: 50%;
    }
    .pulso-tt-row--fact .dot { background: #6EA8C7; }
    .pulso-tt-row--cob  .dot { background: #6BC9A0; }

    /* En modo privacy, blureamos el grafico tambien — sino el "Por cobrar"
       queda blureado pero las curvas del pulso revelan tendencia/escala.
       Hover sobre el card desblurea momentaneamente (igual que la card "Por cobrar"). */
    body.dash-privacy-on .dash-pulso-svg {
      filter: blur(6px);
      transition: filter 0.2s var(--ease-out, ease);
    }
    body.dash-privacy-on .dash-pulso:hover .dash-pulso-svg {
      filter: blur(0);
    }

    /* Empty state del pulso (cuando no hay facturas cargadas todavia) */
    .dash-pulso-empty {
      position: relative;
      text-align: center; padding: 18px 12px 14px;
      color: var(--c-texto-muted, #6B7280);
      overflow: hidden;
      border-radius: 8px;
    }
    .dash-pulso-empty-bg {
      position: absolute; inset: 0; width: 100%; height: 100%;
      pointer-events: none;
      animation: emp-breath 6s ease-in-out infinite;
    }
    .emp-stroke {
      stroke-width: 2.4;
      stroke-linecap: round; stroke-linejoin: round;
      stroke-dasharray: 4 6;
      opacity: 0.55;
      animation: emp-dash 22s linear infinite;
    }
    .emp-stroke--fact {
      stroke: var(--c-azul, #1B6B93);
      filter: drop-shadow(0 0 6px rgba(27, 107, 147, 0.5));
    }
    .emp-stroke--cob {
      stroke: var(--c-verde, #2D9B6F);
      filter: drop-shadow(0 0 6px rgba(45, 155, 111, 0.5));
      animation-direction: reverse;
    }
    @keyframes emp-dash {
      to { stroke-dashoffset: -200; }
    }
    @keyframes emp-breath {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.03); opacity: 0.92; }
    }

    .dash-pulso-empty-content {
      position: relative; z-index: 1;
    }
    .dash-pulso-empty-icon {
      font-size: 38px; margin-bottom: 6px;
      display: inline-block;
      animation: emp-icon-float 3s ease-in-out infinite;
      filter: drop-shadow(0 4px 10px rgba(27, 107, 147, 0.35));
    }
    @keyframes emp-icon-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    .dash-pulso-empty p {
      font-size: 12.5px; margin: 0 0 12px; line-height: 1.4;
      color: var(--c-texto, #1A2332); font-weight: 500;
    }
    /* Especificidad doble (.dash-pulso .dash-pulso-cta-btn) para ganarle al .btn
       base que viene mas adelante en el archivo y machacaba el background. */
    .dash-pulso .dash-pulso-cta-btn {
      background: linear-gradient(135deg, var(--c-azul, #1B6B93) 0%, var(--c-verde, #2D9B6F) 100%);
      color: #fff !important;
      border: none;
      box-shadow: 0 4px 12px rgba(27, 107, 147, 0.35);
      font-weight: 700;
      padding: 8px 18px;
      transition: all 0.2s var(--ease-out, ease);
      cursor: pointer;
    }
    .dash-pulso .dash-pulso-cta-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(27, 107, 147, 0.5);
      filter: brightness(1.08);
      border: none;
    }
    [data-theme="marand"] .dash-pulso .dash-pulso-cta-btn,
    [data-theme="marand-claro"] .dash-pulso .dash-pulso-cta-btn {
      background: linear-gradient(135deg, #C9A84C 0%, #E8C96A 100%);
      color: #0A0A0A !important;
      box-shadow: 0 4px 12px rgba(201, 168, 76, 0.4);
    }

    .cob-print-firma {
      margin-top: 30px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
      padding: 0 16px;
    }
    .cob-print-firma-box { text-align: center; }
    .cob-print-firma-line {
      font-family: ui-monospace, monospace; font-size: 12px; color: var(--c-borde, #999);
      margin-bottom: 4px;
    }
    .cob-print-firma-lbl {
      font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--c-texto-muted, #6B7280);
    }

    /* Refactor planilla print autocontenida:
       En modo print, ocultamos TODO el body excepto el printDoc.
       Esto es robusto: no depende de mostrar/ocultar pedazos del DOM mezclados.
       El printDoc esta agregado directo al body, asi que es hermano del app-shell. */
    @media print {
      body.cob-print-mode .app-shell,
      body.cob-print-mode #modal-root,
      body.cob-print-mode .modal-backdrop,
      body.cob-print-mode .toast,
      body.cob-print-mode .cob-print-back-btn { display: none !important; }
      body.cob-print-mode #cob-print-wrap { display: block !important; }
      body.cob-print-mode #cob-print-wrap .cob-print-table { font-size: 11px; }
    }

    /* Estilos de la tabla impresa (limpia, sin selects ni botones) */
    .cob-print-table {
      width: 100%; border-collapse: collapse;
      font-size: 12px; margin: 14px 0;
    }
    .cob-print-table thead th {
      text-align: left; padding: 8px 10px;
      font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--c-texto-muted, #6B7280); font-weight: 700;
      border-bottom: 2px solid var(--c-texto, #1A2332);
      background: var(--c-borde-soft, #F8F9FB);
    }
    .cob-print-table th.r, .cob-print-table td.r { text-align: right; }
    .cob-print-table tbody td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--c-borde, #DDE3EA);
      vertical-align: middle;
    }
    .cob-print-table .cob-tipo {
      display: inline-block; width: 22px; height: 22px; line-height: 22px;
      text-align: center; font-weight: 700; font-size: 11px;
      border-radius: 4px;
      background: var(--c-azul-soft, #E8F1F7); color: var(--c-azul, #1B6B93);
    }
    .cob-print-empty {
      padding: 40px 20px; text-align: center;
      color: var(--c-texto-muted, #6B7280); font-style: italic; font-size: 14px;
      border: 1px dashed var(--c-borde, #DDE3EA); border-radius: 8px;
      margin: 14px 0;
    }
    @media print {
      .cob-print-table thead th {
        background: #f0f0f0 !important;
        border-bottom: 2px solid #000 !important;
        color: #000 !important;
      }
      .cob-print-table tbody td { border-bottom: 1px solid #ccc !important; }
    }

    /* Combo "Crear nuevo" inline (cliente / subentidad) */
    .combo-create {
      background: var(--c-azul-soft);
      border: 1px solid var(--c-azul-line);
      border-radius: var(--r-sm);
      padding: 12px;
      margin-top: 6px;
      display: grid; gap: 8px;
      grid-template-columns: 1fr 1fr;
      animation: combo-slide 220ms var(--ease-out);
    }
    @keyframes combo-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    .combo-create .full { grid-column: 1 / -1; }
    .combo-create label {
      font-size: 10px; font-weight: 600;
      color: var(--c-azul); letter-spacing: 0.06em;
      text-transform: uppercase; margin-bottom: 4px; display: block;
    }
    .combo-create input, .combo-create select {
      width: 100%; padding: 8px 10px;
      border: 1px solid var(--line); border-radius: var(--r-sm);
      background: var(--c-card); color: var(--c-texto);
      font-family: var(--ff-sans); font-size: 13px;
      outline: none;
      transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .combo-create input:focus, .combo-create select:focus { border-color: var(--c-azul); box-shadow: var(--ring-azul); }
    .combo-create .actions { display: flex; gap: 6px; justify-content: flex-end; }

    .pres-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
    @media (max-width: 980px) { .pres-layout { grid-template-columns: 1fr; } }

    .opt-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
    .opt-tabs button {
      flex: 1; padding: 9px 12px;
      border: 1.5px solid var(--line); background: #fff; color: var(--ink-3);
      border-radius: var(--r-sm); font-weight: 600; font-size: 13px;
      cursor: pointer;
      transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .opt-tabs button:active { transform: scale(0.97); }
    .opt-tabs button.active {
      background: var(--c-verde); color: #fff; border-color: var(--c-verde);
    }
    .opt-tabs button.has-items::after {
      content: '•'; color: var(--c-verde); margin-left: 4px;
    }
    .opt-tabs button.active.has-items::after { color: #fff; }

    .cat-section { margin-bottom: 14px; }
    .cat-section h4 {
      font-family: var(--ff-display);
      font-size: 12px; font-weight: 700; color: var(--c-azul);
      letter-spacing: -0.005em;
      background: var(--c-azul-soft);
      padding: 7px 12px; border-left: 3px solid var(--c-verde);
      border-radius: 4px; margin-bottom: 6px;
    }
    .cat-item {
      display: grid; grid-template-columns: auto 1fr auto auto auto;
      align-items: center; gap: 8px;
      padding: 7px 10px; border-radius: var(--r-sm);
      transition: background 150ms var(--ease-out);
      border-bottom: 1px solid var(--c-borde-soft);
    }
    .cat-item:hover { background: var(--surface-2); }
    .cat-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--c-verde); }
    .cat-item .cat-desc { font-size: 12.5px; line-height: 1.3; }
    .cat-item .cat-desc b { font-size: 13px; }
    .cat-item .cat-desc small { display: block; color: var(--ink-3); font-size: 11px; }
    .cat-item .cat-links { display: flex; gap: 4px; }
    .cat-item .cat-links a { text-decoration: none; font-size: 14px; opacity: 0.55; transition: opacity 200ms var(--ease-out); }
    .cat-item .cat-links a:hover { opacity: 1; }
    .cat-item .cat-precio { font-family: var(--mono); font-weight: 700; color: var(--c-verde); font-size: 12.5px; min-width: 80px; text-align: right; font-feature-settings: 'tnum'; }
    .cat-item .cat-qty {
      width: 50px; padding: 5px;
      border: 1px solid var(--line); border-radius: var(--r-sm);
      text-align: center; font-weight: 600; font-size: 12px;
      font-family: var(--mono);
    }
    .cat-item .cat-qty:disabled { background: var(--surface-3); color: var(--mute); }

    .pres-sidebar { position: sticky; top: 12px; align-self: flex-start; }
    .pres-totals {
      background: linear-gradient(135deg, var(--c-verde) 0%, #1F7855 100%);
      color: #fff; padding: 18px; border-radius: var(--r-md);
      margin-bottom: 12px;
      box-shadow: 0 4px 16px -4px rgba(45,155,111,.4);
    }
    .pres-totals .pt-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; font-family: var(--mono); font-feature-settings: 'tnum'; }
    .pres-totals .pt-row.big {
      font-size: 22px; font-weight: 800;
      border-top: 2px solid rgba(255,255,255,0.3);
      margin-top: 6px; padding-top: 10px; font-family: var(--ff-display); letter-spacing: -0.02em;
    }
    .pres-totals .pt-row.small { font-size: 11px; opacity: 0.85; }

    .labor-box {
      background: var(--amber-soft); border: 2px dashed #E6B422;
      border-radius: var(--r-sm); padding: 12px;
    }
    .labor-box label {
      display: block; font-weight: 600; color: #7A5800; font-size: 11px;
      letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px;
    }
    .labor-box input {
      width: 100%; padding: 8px 10px;
      border: 1px solid #D4A017; border-radius: var(--r-sm);
      background: #fff; font-size: 13px; outline: none;
      margin-bottom: 6px;
    }
    .labor-box input.price { font-weight: 700; text-align: right; font-family: var(--mono); }

    .pres-selected {
      background: #fff; border: 1px solid var(--line);
      border-radius: var(--r-md); padding: 12px; margin-top: 12px;
      max-height: 200px; overflow-y: auto;
    }
    .pres-selected h5 {
      font-family: var(--mono); font-size: 10px; font-weight: 600;
      color: var(--c-verde-2); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px;
    }
    .pres-selected .sel-line {
      display: flex; justify-content: space-between;
      padding: 3px 0; font-size: 12px;
      border-bottom: 1px dashed var(--c-borde-soft);
    }
    .pres-selected .sel-line .name { flex: 1; padding-right: 8px; }
    .pres-selected .sel-line .price { font-weight: 600; font-family: var(--mono); }
    .modal-body.scroll { max-height: 70vh; overflow-y: auto; }

    /* Lista de items repetibles */
    .item-card {
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      padding: 12px;
      margin-bottom: 10px;
      position: relative;
    }
    .item-card .item-num {
      position: absolute; top: 10px; right: 10px;
      font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ink-3);
      background: #fff; border: 1px solid var(--line);
      padding: 2px 8px; border-radius: 999px;
      letter-spacing: 0.04em;
    }
    .item-card .item-del {
      position: absolute; top: 6px; right: 6px;
      background: #fff; border: 1px solid #F5C9C3; color: var(--c-peligro);
      width: 24px; height: 24px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700; cursor: pointer; line-height: 1;
      transition: background 200ms var(--ease-out), transform 150ms var(--ease-fluid);
    }
    .item-card .item-del:hover { background: var(--red-soft); }
    .item-card .item-del:active { transform: scale(0.92); }

    .item-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 8px;
    }
    .item-grid .full { grid-column: 1 / -1; }
    .item-grid label {
      display: block; font-size: 10px; font-weight: 600;
      color: var(--ink-3); letter-spacing: 0.06em;
      text-transform: uppercase; margin-bottom: 4px;
    }
    .item-grid input, .item-grid select, .item-grid textarea {
      width: 100%; padding: 8px 10px;
      border: 1px solid var(--line); border-radius: var(--r-sm);
      background: #fff; color: var(--c-texto); outline: none;
      font-family: var(--ff-sans); font-size: 13px;
      transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .item-grid input:focus, .item-grid select:focus, .item-grid textarea:focus {
      border-color: var(--c-azul); box-shadow: var(--ring-azul);
    }
    .item-grid textarea { resize: vertical; min-height: 50px; }

    /* Firmas canvas */
    .firmas-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    @media (max-width: 600px) { .firmas-grid { grid-template-columns: 1fr; } }
    .firma-block label {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 11px; font-weight: 600;
      color: var(--ink-3); letter-spacing: 0.06em;
      text-transform: uppercase; margin-bottom: 5px;
    }
    .firma-block label .clear-btn {
      background: transparent; border: 0;
      color: var(--ink-3); font-size: 11px;
      text-transform: none; letter-spacing: 0; font-weight: 500;
      cursor: pointer; text-decoration: underline;
    }
    .firma-canvas {
      width: 100%; height: 120px;
      background: var(--surface-2);
      border: 1.5px dashed var(--line-2);
      border-radius: var(--r-sm);
      display: block; touch-action: none; cursor: crosshair;
    }

    /* Vista detalle / impresion — preservado */
    .detail-page {
      background: #fff; padding: 30px;
      max-width: 820px; margin: 0 auto;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      box-shadow: var(--sh-1);
    }
    .detail-page .doc-header {
      display: flex; align-items: center; gap: 16px;
      padding-bottom: 16px; border-bottom: 2px solid var(--c-azul);
      margin-bottom: 20px;
    }
    .detail-page .doc-header .doc-logo {
      width: 60px; height: 60px; border-radius: 12px;
      background: var(--c-azul); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--ff-display); font-weight: 800; font-size: 22px;
      letter-spacing: -0.05em; overflow: hidden;
    }
    .detail-page .doc-header .doc-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
    .detail-page .doc-header .doc-empresa h1 {
      margin: 0; font-family: var(--ff-display); font-size: 20px; color: var(--c-texto); letter-spacing: -0.012em;
    }
    .detail-page .doc-header .doc-empresa p { margin: 0; font-size: 12px; color: var(--ink-3); }
    .detail-page .doc-header .doc-num {
      margin-left: auto; text-align: right;
    }
    .detail-page .doc-header .doc-num .doc-tipo {
      font-family: var(--ff-display); font-weight: 800;
      font-size: 18px; color: var(--c-azul); letter-spacing: -0.012em;
    }
    .detail-page .doc-header .doc-num .doc-numero {
      font-family: var(--mono); font-size: 13px; color: var(--c-texto);
      margin-top: 2px;
    }
    .detail-page .doc-header .doc-num .doc-fecha {
      font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    }
    .detail-page h3 {
      font-family: var(--ff-display); font-size: 12px;
      color: var(--c-azul); letter-spacing: -0.005em;
      margin: 18px 0 8px;
      padding-bottom: 5px; border-bottom: 1px solid var(--line);
      font-weight: 700;
    }
    .detail-page .meta-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
      font-size: 13px;
    }
    .detail-page .meta-grid .lbl {
      font-weight: 600; color: var(--ink-3);
    }
    .detail-page .equipos-table {
      width: 100%; border-collapse: collapse; font-size: 12px;
    }
    .detail-page .equipos-table th, .detail-page .equipos-table td {
      padding: 7px 8px; border: 1px solid var(--line);
      text-align: left; vertical-align: top;
    }
    .detail-page .equipos-table th {
      background: var(--c-azul-soft); color: var(--c-azul-2);
      font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    }
    .detail-page .firmas-print {
      display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
      margin-top: 40px;
    }
    .detail-page .firma-print {
      text-align: center;
    }
    .detail-page .firma-print img {
      max-width: 100%; height: 80px; object-fit: contain;
      border-bottom: 1px solid var(--c-texto);
      margin-bottom: 4px;
    }
    .detail-page .firma-print .firma-empty {
      height: 80px; border-bottom: 1px solid var(--c-texto);
      margin-bottom: 4px;
    }
    .detail-page .firma-print .firma-lbl {
      font-family: var(--mono); font-size: 11px; color: var(--ink-3);
      letter-spacing: 0.08em; text-transform: uppercase;
    }

    /* Print */
    @media print {
      .app-header, .tabs-desktop, .bottom-nav, .modal-backdrop, .toast { display: none !important; }
      body, html { background: #fff !important; }
      body::before, body::after { display: none !important; }
      .app-main { padding: 0 !important; max-width: none !important; }
      .detail-page { padding: 10px; box-shadow: none; border: none; }
      .detail-toolbar { display: none !important; }
      #tab-inicio.tab-panel.active { grid-template-columns: 1fr !important; }
    }

    .detail-toolbar {
      display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
      max-width: 820px; margin: 0 auto 12px;
    }
    @media (max-width: 720px) {
      .detail-toolbar { justify-content: stretch; }
      .detail-toolbar .btn { flex: 1 1 auto; min-width: calc(50% - 8px); justify-content: center; }
    }

    /* Estado del documento abierto: pills clickeables que cambian el estado in-situ */
    .detail-state-bar {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      max-width: 820px; margin: 0 auto 10px;
      padding: 10px 14px;
      background: var(--c-card);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      box-shadow: var(--sh-1);
    }
    .detail-state-bar__label {
      font-family: var(--ff-label, var(--ff-sans));
      font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--c-texto-muted); font-weight: 600;
    }
    .detail-state-pills {
      display: flex; gap: 6px; flex-wrap: wrap;
    }
    .detail-state-pill {
      appearance: none;
      border: 1px solid var(--line);
      background: var(--surface-2, var(--c-fondo));
      color: var(--c-texto-muted);
      font-family: var(--ff-sans);
      font-size: 12px; font-weight: 600;
      padding: 6px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .detail-state-pill:hover { color: var(--c-texto); border-color: var(--line-2); }
    .detail-state-pill.active {
      background: var(--c-azul-soft);
      border-color: var(--c-azul);
      color: var(--c-azul-dark, var(--c-azul));
      font-weight: 700;
    }
    @media print {
      .detail-state-bar { display: none !important; }
    }

    /* Stats compactas en el aside (3 filas en una card, sin sparkline) */
    .stats-aside .stats-aside-list {
      display: flex; flex-direction: column;
      gap: 6px;
    }
    .stats-aside-row {
      display: grid;
      grid-template-columns: 26px 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 8px 4px;
      border-bottom: 1px dashed var(--c-borde-soft);
    }
    .stats-aside-row:last-child { border-bottom: none; }
    .stats-aside-ico {
      width: 26px; height: 26px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--surface-2, var(--c-fondo));
      border: 1px solid var(--c-borde-soft);
      border-radius: 7px;
    }
    .stats-aside-ico svg { width: 14px; height: 14px; }
    .stats-aside-lbl {
      font-size: 12px;
      color: var(--c-texto);
      font-weight: 500;
    }
    .stats-aside-num {
      font-family: var(--ff-display, var(--ff-sans));
      font-size: 20px; font-weight: 700;
      color: var(--c-texto);
      letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
    }

    /* ============================================================
       Tab Ganancias — control financiero sobre presupuestos aceptados
       ============================================================ */
    #tab-ganancias { max-width: 1080px; margin: 0 auto; padding: 8px 0 80px; }

    .gan-toolbar {
      display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 18px;
    }
    .gan-month-nav {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--c-card); border: 1px solid var(--line);
      border-radius: 999px; padding: 4px 6px;
      box-shadow: var(--sh-1);
    }
    .gan-month-nav .btn {
      padding: 4px 12px; border-radius: 999px;
      font-size: 16px; font-weight: 700; line-height: 1;
    }
    .gan-month-label {
      font-family: var(--ff-display, var(--ff-sans));
      font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 0 10px; min-width: 130px; text-align: center;
      color: var(--c-texto);
    }
    .gan-filters {
      display: flex; flex-wrap: wrap; gap: 10px;
    }
    .gan-filter {
      display: inline-flex; flex-direction: column; gap: 4px;
      font-size: 11px;
    }
    .gan-filter > span {
      font-family: var(--ff-label, var(--ff-sans));
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--c-texto-muted); font-weight: 600;
    }
    .gan-filter select {
      padding: 8px 12px; border-radius: 8px;
      border: 1px solid var(--line); background: var(--c-card);
      color: var(--c-texto); font-size: 13px;
      min-width: 160px;
    }

    .gan-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
      margin-bottom: 18px;
    }
    .gan-stat {
      background: var(--c-card); border: 1px solid var(--line);
      border-left-width: 3px;
      border-radius: var(--r-md); padding: 16px 18px;
      box-shadow: var(--sh-card);
    }
    .gan-stat-in     { border-left-color: var(--c-verde, #2D9B6F); }
    .gan-stat-cost   { border-left-color: var(--c-naranja, #E8750A); }
    .gan-stat-profit { border-left-color: var(--c-azul, #1B6B93); }
    .gan-stat-lbl {
      font-family: var(--ff-label, var(--ff-sans));
      font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--c-texto-muted); font-weight: 600;
    }
    .gan-stat-val {
      font-family: var(--ff-display, var(--ff-sans));
      font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
      color: var(--c-texto);
      margin-top: 4px;
    }
    .gan-stat-sub {
      font-size: 11.5px; color: var(--c-texto-muted);
      margin-top: 2px;
    }

    .gan-list-wrap {
      background: var(--c-card); border: 1px solid var(--line);
      border-radius: var(--r-md); overflow: hidden;
      box-shadow: var(--sh-card);
    }
    .gan-list-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--c-borde-soft);
    }
    .gan-list-head h3 {
      margin: 0;
      font-family: var(--ff-display, var(--ff-sans));
      font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
      color: var(--c-texto);
    }
    .gan-list-count {
      font-size: 11px; color: var(--c-texto-muted);
      letter-spacing: 0.12em; text-transform: uppercase;
    }
    .gan-row {
      display: grid;
      grid-template-columns: 130px 1fr 100px 110px 110px 110px 70px;
      gap: 12px; align-items: center;
      padding: 11px 18px;
      border-bottom: 1px solid var(--c-borde-soft);
      cursor: pointer;
      transition: background .15s ease;
    }
    .gan-row:last-child { border-bottom: none; }
    .gan-row:hover { background: var(--surface-2, var(--c-fondo)); }
    .gan-row.gan-row-head {
      background: var(--surface-2, transparent);
      cursor: default;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--c-texto-muted);
    }
    .gan-row.gan-row-head:hover { background: var(--surface-2, transparent); }
    .gan-row__num    { font-weight: 700; color: var(--c-texto); font-size: 12px; }
    .gan-row__cli    { color: var(--c-texto); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gan-row__date   { color: var(--c-texto-muted); font-size: 12px; }
    .gan-row__money  { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; }
    .gan-row__profit { font-weight: 700; color: var(--c-verde); }
    .gan-row__profit.neg { color: var(--c-peligro); }
    .gan-row__margen { font-size: 12px; color: var(--c-texto-muted); text-align: right; }
    .gan-empty {
      padding: 36px 18px; text-align: center;
      color: var(--c-texto-muted); font-size: 13px;
    }

    @media (max-width: 720px) {
      .gan-stats { grid-template-columns: 1fr; }
      .gan-row, .gan-row.gan-row-head {
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
        padding: 12px 14px;
      }
      .gan-row.gan-row-head { display: none; }
      .gan-row__num    { grid-column: 1; font-size: 12px; }
      .gan-row__date   { grid-column: 2; text-align: right; font-size: 11px; }
      .gan-row__cli    { grid-column: 1 / -1; font-weight: 600; font-size: 13px; }
      .gan-row__money  { text-align: left; }
      .gan-row__money:nth-child(4)::before { content: 'Venta: '; color: var(--c-texto-muted); font-weight: 400; font-size: 11px; }
      .gan-row__money:nth-child(5)::before { content: 'Costo: '; color: var(--c-texto-muted); font-weight: 400; font-size: 11px; }
      .gan-row__profit::before { content: 'Ganancia: '; color: var(--c-texto-muted); font-weight: 400; font-size: 11px; }
      .gan-row__margen { text-align: left; }
    }

    .placeholder {
      background: var(--c-card);
      border: 1px dashed var(--line-2);
      border-radius: var(--r-md);
      padding: 40px 20px;
      text-align: center;
      color: var(--ink-3);
    }
    .placeholder h3 { margin: 0 0 6px; color: var(--c-texto); font-size: 16px; font-family: var(--ff-display); font-weight: 700; }

    /* ============== CONFIG ============== */
    .config-card {
      background: var(--c-card);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 22px;
      margin-bottom: 18px;
      box-shadow: var(--sh-0), var(--sh-1);
    }
    .config-card h2 {
      margin: 0 0 16px; font-size: 16px; font-weight: 700;
      color: var(--c-texto); font-family: var(--ff-display); letter-spacing: -0.012em;
    }
    .form-row { margin-bottom: 14px; }
    .form-row label {
      display: block; font-size: 11px; font-weight: 600;
      color: var(--ink-3); letter-spacing: 0.06em;
      text-transform: uppercase; margin-bottom: 6px;
    }
    .form-row input, .form-row select {
      width: 100%; padding: 11px 12px;
      border: 1px solid var(--line); border-radius: var(--r-sm);
      background: var(--surface-2); color: var(--c-texto); outline: none;
      transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .form-row input:focus, .form-row select:focus {
      border-color: var(--c-azul); background: #fff; box-shadow: var(--ring-azul);
    }
    .form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

    .btn {
      padding: 9px 16px; border: 1px solid transparent;
      border-radius: var(--r-sm);
      font-size: 14px; font-weight: 600;
      background: var(--c-card); color: var(--c-texto);
      border-color: var(--line);
      cursor: pointer;
      box-shadow: var(--sh-0), var(--sh-1);
      transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 150ms var(--ease-fluid), box-shadow 200ms var(--ease-out);
    }
    .btn:hover { border-color: var(--line-3); }
    .btn:active { transform: scale(0.97); box-shadow: var(--sh-0); }
    .btn-primary { background: var(--c-azul); color: #fff; border-color: var(--c-azul); box-shadow: 0 4px 14px -4px var(--c-azul-glow); }
    .btn-primary:hover { background: var(--c-azul-dark); border-color: var(--c-azul-dark); box-shadow: 0 8px 22px -4px var(--c-azul-glow); }
    .btn-danger  { background: #fff; color: var(--c-peligro); border-color: #F5C9C3; }
    .btn-danger:hover { background: var(--red-soft); }
    .btn-sm { padding: 6px 11px; font-size: 12px; }

    .users-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 8px;
    }
    .users-table th, .users-table td {
      padding: 11px 8px;
      border-bottom: 1px solid var(--c-borde-soft);
      text-align: left; font-size: 13px;
    }
    .users-table th {
      font-family: var(--mono);
      font-weight: 500; color: var(--ink-3);
      font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
    }
    .users-table td .actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 10px;
      border-radius: 999px; font-size: 11px; font-weight: 600;
      border: 1px solid transparent;
    }
    .badge-admin  { background: var(--c-azul-soft);    color: var(--c-azul-2);    border-color: var(--c-azul-line); }
    .badge-user   { background: var(--surface-3);      color: var(--ink-3);       border-color: var(--line); }
    .badge-on     { background: var(--c-verde-soft);   color: var(--c-verde-2);   border-color: var(--c-verde-line); }
    .badge-off    { background: var(--red-soft);       color: var(--c-peligro);   border-color: #ECC2BB; }

    /* Logo upload */
    .logo-row {
      display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    }
    .logo-preview {
      width: 84px; height: 84px;
      border: 1px solid var(--line);
      background: linear-gradient(135deg, var(--c-azul-soft) 0%, #DBEAFE 100%);
      border-radius: var(--r-md);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; flex-shrink: 0;
      font-family: var(--ff-display); font-weight: 800; font-size: 26px;
      color: var(--c-azul); letter-spacing: -0.05em;
      box-shadow: inset 0 1px 1px rgba(255,255,255,.5);
    }
    .logo-preview img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
    .logo-actions { display: flex; flex-direction: column; gap: 8px; }
    .logo-hint { font-size: 12.5px; color: var(--ink-3); }
    .logo-actions .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .file-btn { position: relative; overflow: hidden; }
    .file-btn input[type="file"] {
      position: absolute; inset: 0; opacity: 0; cursor: pointer;
    }

    /* Alta de usuario inline */
    .user-form-inline {
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      padding: 16px;
      margin-top: 14px;
      display: grid; gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .user-form-inline .full { grid-column: 1 / -1; }
    .user-form-inline label {
      display: block; font-size: 11px; font-weight: 600;
      color: var(--ink-3); letter-spacing: 0.06em;
      text-transform: uppercase; margin-bottom: 5px;
    }
    .user-form-inline input,
    .user-form-inline select {
      width: 100%; padding: 10px 12px; height: 40px;
      border: 1px solid var(--line); border-radius: var(--r-sm);
      background: #fff; color: var(--c-texto);
      font-family: var(--ff-sans); font-size: 14px;
      outline: none;
      transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
      appearance: none; -webkit-appearance: none;
    }
    .user-form-inline select {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%235A6478' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat; background-position: right 12px center;
      padding-right: 28px;
    }
    .user-form-inline input:focus, .user-form-inline select:focus {
      border-color: var(--c-azul);
      box-shadow: var(--ring-azul);
    }

    /* Toast */
    .toast {
      position: fixed; left: 50%; bottom: 96px;
      transform: translateX(-50%) translateY(8px);
      background: var(--c-texto); color: #fff;
      padding: 11px 20px; border-radius: 999px;
      font-size: 13px; font-weight: 500;
      box-shadow: 0 12px 32px -8px rgba(15,22,38,.4);
      opacity: 0; pointer-events: none;
      transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-fluid);
      z-index: 100;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .toast.error { background: var(--c-peligro); }

    /* Estado de carga / skeleton */
    .loading {
      text-align: center; padding: 40px;
      color: var(--ink-3); font-size: 13px;
      position: relative;
    }
    .loading::before {
      content: '';
      display: inline-block;
      width: 14px; height: 14px;
      border: 2px solid var(--line);
      border-top-color: var(--c-azul);
      border-radius: 50%;
      margin-right: 10px;
      vertical-align: -2px;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Accesibilidad */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition: none !important;
        animation: none !important;
      }
      body::before { animation: none !important; }
      .stat-card, .modulo-card, .recent-item, .pendientes-bar, .benchmark, .today-aside,
      .login-card, .global-search, .page-head {
        opacity: 1 !important; transform: none !important; filter: none !important;
      }
      .stat-card .stat-spark .spark-line { stroke-dashoffset: 0 !important; }
      .stat-card .stat-spark .spark-fill { opacity: 1 !important; }
    }

    :focus-visible {
      outline: 2px solid var(--c-azul);
      outline-offset: 2px;
      border-radius: 6px;
    }

    /* ============================================================
       TEMA MARAND - tenant Marand (Munoz Maria Cristina)
       Manual de identidad MARAND v1.0 (mayo 2026):
       negro profundo + dorado mate + tipografia Bebas/Barlow.
       Se activa con [data-theme="marand"] en <html>.
       ============================================================ */
    :root[data-theme="marand"] {
      /* Tokens AS preservados (override por tenant Marand) */
      --c-azul:         #C9A84C;
      --c-azul-dark:    #7A6530;
      --c-azul-soft:    rgba(201, 168, 76, 0.16);
      --c-naranja:      #E8C96A;
      --c-naranja-soft: rgba(232, 201, 106, 0.16);
      --c-verde:        #10B981;
      --c-verde-soft:   rgba(16, 185, 129, 0.18);
      --c-fondo:        #0A0A0A;
      --c-card:         #111111;
      --c-borde:        #2A2A2A;
      --c-borde-soft:   #1A1A1A;
      --c-texto:        #F5F5F0;
      --c-texto-muted:  #B5B5A8;
      --c-peligro:      #E11D48;
      --c-exito:        #10B981;

      /* tokens v6 — capa Workspace Pro */
      --c-azul-2:       #7A6530;
      --c-azul-3:       #5A4A22;
      --c-azul-line:    rgba(201, 168, 76, 0.32);
      --c-azul-glow:    rgba(201, 168, 76, 0.34);
      --c-naranja-2:    #C9A84C;
      --c-naranja-line: rgba(232, 201, 106, 0.40);
      --c-naranja-glow: rgba(232, 201, 106, 0.30);
      --c-verde-2:      #0E8E68;
      --c-verde-line:   rgba(16, 185, 129, 0.30);

      --surface:    #111111;
      --surface-2:  #1A1A1A;
      --surface-3:  #0F0F0F;

      --line:    #2A2A2A;
      --line-2:  #3A3A3A;
      --line-3:  #4A4A4A;

      --ink:    #F5F5F0;
      --ink-2:  #DCDCD2;
      --ink-3:  #A0A095;
      --mute:   #888888;
      --mute-2: #555550;

      --amber:        #E8C96A;
      --amber-soft:   rgba(232, 201, 106, 0.18);
      --red:          #E11D48;
      --red-soft:     rgba(225, 29, 72, 0.18);
      --violet:       #B89BFF;
      --violet-soft:  rgba(184, 155, 255, 0.18);

      --sh-0: 0 1px 0 rgba(255,255,255,.04) inset;
      --sh-1: 0 1px 2px rgba(0,0,0,.45);
      --sh-2: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px -6px rgba(0,0,0,.65);
      --sh-3: 0 2px 6px rgba(0,0,0,.55), 0 18px 36px -12px rgba(0,0,0,.75);
      --sh-card: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px -6px rgba(0,0,0,.55);
      --ring-azul:    0 0 0 3px rgba(201,168,76,.30);
      --ring-naranja: 0 0 0 3px rgba(232,201,106,.30);

      /* Tipografias MARAND (self-hosted en /fonts/marand/) */
      /* Inter como primaria del cuerpo (mas legible en pantalla); Barlow queda
         como fallback para preservar estetica del manual cuando aplica. */
      --ff-sans:    'Inter', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --ff-display: 'Bebas Neue', 'Oswald', Impact, 'Arial Black', sans-serif;
      --ff-label:   'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
    }

    /* Body fondo oscuro + peso 500 base para mejor legibilidad sobre negro */
    :root[data-theme="marand"] body {
      background: var(--c-fondo);
      color: var(--c-texto);
      font-weight: 500;
    }

    /* Login screen MARAND: radial dark + card negra */
    :root[data-theme="marand"] .login-screen {
      background:
        radial-gradient(ellipse at 50% 30%, #1A1A1A 0%, #0A0A0A 70%);
    }
    :root[data-theme="marand"] .login-card {
      background: #111111;
      border-color: #2A2A2A;
    }
    :root[data-theme="marand"] .login-card::before {
      background: linear-gradient(90deg, #C9A84C 0%, #E8C96A 50%, #C9A84C 100%);
    }
    :root[data-theme="marand"] .login-brand-logo {
      background: #0A0A0A;
      box-shadow: inset 0 0 0 1px rgba(201,168,76,.45), 0 8px 24px -6px rgba(0,0,0,.6);
    }
    :root[data-theme="marand"] .login-brand-logo::after { display: none; }
    :root[data-theme="marand"] .login-brand h1 {
      font-family: var(--ff-display);
      font-size: 38px; font-weight: 400; letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    :root[data-theme="marand"] .login-field input {
      background: #1A1A1A; color: var(--c-texto);
      border-color: var(--c-borde);
    }
    :root[data-theme="marand"] .login-field input:focus {
      background: #1F1F1F; border-color: var(--c-azul);
    }
    :root[data-theme="marand"] .login-btn {
      background: var(--c-azul); color: #0A0A0A;
      font-weight: 700;
    }
    :root[data-theme="marand"] .login-btn:hover {
      background: #E8C96A;
    }
    :root[data-theme="marand"] .login-footer {
      color: var(--c-azul);
      letter-spacing: 0.22em;
    }

    /* Header MARAND: negro translucido en lugar de blanco */
    :root[data-theme="marand"] .app-header {
      background: rgba(17,17,17,0.85);
      border-bottom: 1px solid var(--c-azul-line);
    }
    :root[data-theme="marand"] .app-header::after {
      background: linear-gradient(90deg, transparent 0%, var(--c-azul) 50%, transparent 100%);
    }
    :root[data-theme="marand"] .brand-logo {
      background: #0A0A0A;
      box-shadow: inset 0 0 0 1px rgba(201,168,76,.45), 0 4px 12px -4px rgba(0,0,0,.5);
    }
    :root[data-theme="marand"] .brand-logo::before { display: none; }
    :root[data-theme="marand"] .brand-text h1 {
      font-family: var(--ff-display);
      font-size: 17px; font-weight: 400; letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* Tabs desktop + bottom nav: oscuro */
    :root[data-theme="marand"] .tabs-desktop,
    :root[data-theme="marand"] .bottom-nav {
      background: rgba(17,17,17,0.85);
      border-color: var(--c-borde);
    }

    /* Bottom-nav en desktop: mas sutil (delgada, transparente) que en mobile.
       Es accesible pero no acapara la atencion. */
    @media (min-width: 768px) {
      .bottom-nav {
        background: rgba(255,255,255,0.65);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        padding: 6px 0 6px;
        max-width: 540px;
        margin: 0 auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 14px;
        border-radius: 999px;
        border: 1px solid var(--line);
        box-shadow: 0 6px 24px -8px rgba(20,86,122,.16);
      }
      .bottom-nav button {
        font-size: 10.5px;
        padding: 4px 12px;
      }
      .bottom-nav svg { width: 18px; height: 18px; }
      :root[data-theme="marand"] .bottom-nav {
        background: rgba(20,20,20,0.78);
        border-color: var(--c-borde);
        box-shadow: 0 6px 24px -8px rgba(0,0,0,.6);
      }
    }

    /* Cards y superficies generales: foco oscuro */
    :root[data-theme="marand"] .stat-card,
    :root[data-theme="marand"] .modulo-card,
    :root[data-theme="marand"] .config-card,
    :root[data-theme="marand"] .today-card,
    :root[data-theme="marand"] .recent-list .recent-item,
    :root[data-theme="marand"] .pendientes-bar,
    :root[data-theme="marand"] .global-search,
    :root[data-theme="marand"] .benchmark {
      background: var(--c-card);
      border-color: var(--c-borde);
      color: var(--c-texto);
    }

    /* Inputs y selects globales: dark */
    :root[data-theme="marand"] input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
    :root[data-theme="marand"] textarea,
    :root[data-theme="marand"] select {
      background: #1A1A1A;
      color: var(--c-texto);
      border-color: var(--c-borde);
    }
    :root[data-theme="marand"] input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
    :root[data-theme="marand"] textarea:focus,
    :root[data-theme="marand"] select:focus {
      background: #1F1F1F;
      border-color: var(--c-azul);
    }

    /* Botones primarios en MARAND: dorado sobre negro */
    :root[data-theme="marand"] .btn-primary,
    :root[data-theme="marand"] .login-btn {
      color: #0A0A0A;
      font-weight: 700;
    }

    /* Section titles + headings con tipografia display */
    :root[data-theme="marand"] .section-title,
    :root[data-theme="marand"] h2,
    :root[data-theme="marand"] h3 {
      font-family: var(--ff-display);
      letter-spacing: 0.04em;
    }

    /* Labels en mayuscula con Barlow Condensed - mas espacio entre letras
       para que se lean limpio sobre fondo oscuro. */
    :root[data-theme="marand"] label,
    :root[data-theme="marand"] .stat-lbl,
    :root[data-theme="marand"] .pendientes-bar__label,
    :root[data-theme="marand"] .pill-filter {
      font-family: var(--ff-label);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 600;
    }
    /* Section titles + subtitulos: usar Inter en vez de Bebas para que se lean
       mejor en pantalla. Bebas se reserva para wordmark / numeros grandes. */
    :root[data-theme="marand"] .section-title,
    :root[data-theme="marand"] h2,
    :root[data-theme="marand"] h3,
    :root[data-theme="marand"] h4 {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    :root[data-theme="marand"] .stat-num,
    :root[data-theme="marand"] .login-brand h1 {
      /* Solo numeros grandes y wordmark MARAND mantienen Bebas Neue */
      font-family: var(--ff-display);
      letter-spacing: 0.04em;
    }

    /* Logo Marand: contenedor que recibe el SVG inline desde JS */
    .marand-logo-svg {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      padding: 4px;
    }
    .marand-logo-svg svg {
      width: 100%; height: 100%;
      max-width: 100%; max-height: 100%;
    }

    /* ============================================================
       TEMA MARAND CLARO - variante diurna del tenant Marand
       Paleta gris calido + dorado mate. Para uso de oficina diaria
       (menos fatiga visual que el modo oscuro).
       Se activa con [data-theme="marand-claro"] en <html>.
       ============================================================ */
    :root[data-theme="marand-claro"] {
      /* Tokens base — paleta clara con acentos dorados */
      --c-azul:         #9A7F35;
      --c-azul-dark:    #6E5A26;
      --c-azul-soft:    rgba(154, 127, 53, 0.10);
      --c-naranja:      #C9A84C;
      --c-naranja-soft: rgba(201, 168, 76, 0.14);
      --c-verde:        #2D9B6F;
      --c-verde-soft:   rgba(45, 155, 111, 0.14);
      --c-fondo:        #EDEBE5;
      --c-card:         #FFFFFF;
      --c-borde:        #DDD9CE;
      --c-borde-soft:   #E8E4D8;
      --c-texto:        #1A1A1A;
      --c-texto-muted:  #6B6B5E;
      --c-peligro:      #C9354F;
      --c-exito:        #2D9B6F;

      /* tokens v6 — capa Workspace Pro */
      --c-azul-2:       #6E5A26;
      --c-azul-3:       #4A3D1A;
      --c-azul-line:    rgba(154, 127, 53, 0.30);
      --c-azul-glow:    rgba(154, 127, 53, 0.20);
      --c-naranja-2:    #9A7F35;
      --c-naranja-line: rgba(201, 168, 76, 0.36);
      --c-naranja-glow: rgba(201, 168, 76, 0.20);
      --c-verde-2:      #248560;
      --c-verde-line:   rgba(45, 155, 111, 0.28);

      --surface:    #FFFFFF;
      --surface-2:  #F5F3EC;
      --surface-3:  #FAF9F4;

      --line:    #DDD9CE;
      --line-2:  #C9C5B8;
      --line-3:  #B5B0A0;

      --ink:    #1A1A1A;
      --ink-2:  #2A2A2A;
      --ink-3:  #4A4A40;
      --mute:   #6B6B5E;
      --mute-2: #8A8A7C;

      --amber:        #C9A84C;
      --amber-soft:   rgba(201, 168, 76, 0.18);
      --red:          #C9354F;
      --red-soft:     rgba(201, 53, 79, 0.14);
      --violet:       #6B4FB8;
      --violet-soft:  rgba(107, 79, 184, 0.14);

      --sh-0: 0 1px 0 rgba(255,255,255,.6) inset;
      --sh-1: 0 1px 2px rgba(60,52,30,.06);
      --sh-2: 0 1px 2px rgba(60,52,30,.06), 0 6px 18px -6px rgba(60,52,30,.12);
      --sh-3: 0 2px 6px rgba(60,52,30,.10), 0 18px 36px -12px rgba(60,52,30,.18);
      --sh-card: 0 1px 2px rgba(60,52,30,.06), 0 4px 14px -6px rgba(60,52,30,.10);
      --ring-azul:    0 0 0 3px rgba(154,127,53,.20);
      --ring-naranja: 0 0 0 3px rgba(201,168,76,.22);

      /* Tipografias MARAND — mismas que el oscuro */
      --ff-sans:    'Inter', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --ff-display: 'Bebas Neue', 'Oswald', Impact, 'Arial Black', sans-serif;
      --ff-label:   'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
    }

    /* Body claro */
    :root[data-theme="marand-claro"] body {
      background: var(--c-fondo);
      color: var(--c-texto);
      font-weight: 500;
    }

    /* Header NEGRO en modo claro — ancla visual de marca, separa del workspace */
    :root[data-theme="marand-claro"] .app-header {
      background: #0A0A0A;
      border-bottom: 1px solid rgba(201, 168, 76, 0.30);
      color: #F5F5F0;
    }
    :root[data-theme="marand-claro"] .app-header::after {
      background: linear-gradient(90deg, transparent 0%, #C9A84C 50%, transparent 100%);
    }
    :root[data-theme="marand-claro"] .brand-logo {
      background: #0A0A0A;
      box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.50), 0 4px 12px -4px rgba(0,0,0,.6);
    }
    :root[data-theme="marand-claro"] .brand-logo::before { display: none; }
    :root[data-theme="marand-claro"] .brand-text h1 {
      font-family: var(--ff-display);
      font-size: 17px; font-weight: 400; letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #F5F5F0;
    }
    :root[data-theme="marand-claro"] .brand-text p {
      color: #B5B5A8;
    }
    :root[data-theme="marand-claro"] .user-badge {
      background: rgba(201, 168, 76, 0.18);
      color: #E8C96A;
      border: 1px solid rgba(201, 168, 76, 0.40);
    }
    :root[data-theme="marand-claro"] .app-header .icon-btn,
    :root[data-theme="marand"]       .app-header .icon-btn {
      background: transparent;
      border-color: rgba(201, 168, 76, 0.35);
      color: #F5F5F0;
      box-shadow: none;
    }
    :root[data-theme="marand-claro"] .app-header .icon-btn:hover,
    :root[data-theme="marand"]       .app-header .icon-btn:hover {
      background: rgba(201, 168, 76, 0.18);
      border-color: rgba(201, 168, 76, 0.60);
      color: #E8C96A;
    }
    :root[data-theme="marand-claro"] .app-header .icon-btn svg,
    :root[data-theme="marand"]       .app-header .icon-btn svg {
      width: 17px; height: 17px;
    }

    /* Tabs desktop NEGRAS pegadas al header (en modo claro Marand) */
    :root[data-theme="marand-claro"] .tabs-desktop {
      background: #0A0A0A;
      border-color: rgba(201, 168, 76, 0.20);
      color: #F5F5F0;
    }
    :root[data-theme="marand-claro"] .tabs-desktop button {
      color: #B5B5A8;
    }
    :root[data-theme="marand-claro"] .tabs-desktop button:hover {
      color: #F5F5F0;
    }
    :root[data-theme="marand-claro"] .tabs-desktop button.active {
      color: #E8C96A;
      border-bottom-color: #C9A84C;
    }

    /* Bottom-nav: en modo claro queda blanco (separa del header oscuro y mantiene legibilidad) */
    :root[data-theme="marand-claro"] .bottom-nav {
      background: rgba(255, 255, 255, 0.85);
      border-color: var(--c-borde);
    }
    @media (min-width: 768px) {
      :root[data-theme="marand-claro"] .bottom-nav {
        background: rgba(255, 255, 255, 0.78);
        border-color: var(--c-borde);
        box-shadow: 0 6px 24px -8px rgba(60,52,30,.18);
      }
    }

    /* Boton sun/moon en header — solo visible cuando JS lo activa (tenant Marand) */
    .header-mode-toggle {
      position: relative;
    }
    .header-mode-toggle .ico-sun,
    .header-mode-toggle .ico-moon {
      width: 20px; height: 20px;
      transition: opacity .2s ease, transform .2s ease;
    }
    .header-mode-toggle .ico-moon { display: none; }
    /* En modo claro mostramos LUNA (la accion es ir a oscuro) */
    :root[data-theme="marand-claro"] .header-mode-toggle .ico-sun  { display: none; }
    :root[data-theme="marand-claro"] .header-mode-toggle .ico-moon { display: block; }
    /* En modo oscuro mostramos SOL (la accion es ir a claro) */
    :root[data-theme="marand"] .header-mode-toggle .ico-sun  { display: block; }
    :root[data-theme="marand"] .header-mode-toggle .ico-moon { display: none; }

    /* Cards y superficies: blanco sobre fondo beige */
    :root[data-theme="marand-claro"] .stat-card,
    :root[data-theme="marand-claro"] .modulo-card,
    :root[data-theme="marand-claro"] .config-card,
    :root[data-theme="marand-claro"] .today-card,
    :root[data-theme="marand-claro"] .recent-list .recent-item,
    :root[data-theme="marand-claro"] .pendientes-bar,
    :root[data-theme="marand-claro"] .global-search,
    :root[data-theme="marand-claro"] .benchmark {
      background: var(--c-card);
      border-color: var(--c-borde);
      color: var(--c-texto);
    }

    /* Inputs blancos con borde beige */
    :root[data-theme="marand-claro"] input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
    :root[data-theme="marand-claro"] textarea,
    :root[data-theme="marand-claro"] select {
      background: #FFFFFF;
      color: var(--c-texto);
      border-color: var(--c-borde);
    }
    :root[data-theme="marand-claro"] input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
    :root[data-theme="marand-claro"] textarea:focus,
    :root[data-theme="marand-claro"] select:focus {
      background: #FAFAF7;
      border-color: var(--c-azul);
    }

    /* Botones primarios: dorado sobre negro (igual que oscuro, mantiene identidad) */
    :root[data-theme="marand-claro"] .btn-primary,
    :root[data-theme="marand-claro"] .login-btn {
      color: #0A0A0A;
      font-weight: 700;
    }

    /* Tipografia headings — comparte logica con oscuro */
    :root[data-theme="marand-claro"] .section-title,
    :root[data-theme="marand-claro"] h2,
    :root[data-theme="marand-claro"] h3,
    :root[data-theme="marand-claro"] h4 {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    :root[data-theme="marand-claro"] label,
    :root[data-theme="marand-claro"] .stat-lbl,
    :root[data-theme="marand-claro"] .pendientes-bar__label,
    :root[data-theme="marand-claro"] .pill-filter {
      font-family: var(--ff-label);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 600;
    }
    :root[data-theme="marand-claro"] .stat-num {
      /* Numeros grandes con Bebas Neue (identidad MARAND preservada) */
      font-family: var(--ff-display);
      letter-spacing: 0.04em;
    }

    /* ============================================================
       Toggle Claro/Oscuro (solo visible en tenant Marand)
       ============================================================ */
    .theme-toggle {
      display: inline-flex;
      gap: 6px;
      padding: 4px;
      background: var(--c-fondo);
      border: 1px solid var(--c-borde);
      border-radius: 999px;
    }
    .theme-toggle button {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--c-texto-muted);
      font-family: var(--ff-label, inherit);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 8px 16px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .15s ease, color .15s ease;
    }
    .theme-toggle button:hover { color: var(--c-texto); }
    .theme-toggle button.active {
      background: var(--c-card);
      color: var(--c-texto);
      box-shadow: var(--sh-1, 0 1px 2px rgba(0,0,0,.08));
    }
    .theme-toggle-hint {
      font-size: 12px;
      color: var(--c-texto-muted);
      margin-top: 8px;
    }

    /* ============================================================
       Cáscara de marca AS SISTEMAS — Login GESDOC (acento azul).
       Todo scopeado bajo #login-screen: NO afecta el interior de la app.
       Mismo molde split que Mi Negocio; solo cambia el bloque de acento.
       (c) 2026 AS Sistemas
       ============================================================ */
    #login-screen {
      --gl-acento: #3DA5E8;
      --gl-acento-2: #2E96DD;
      --gl-acento-rgb: 61, 165, 232;
      --gl-acento-texto: #03182A;
      --gl-bg-marca: linear-gradient(150deg, #0A1A2A 0%, #08141F 50%, #050D15 100%);
      --gl-bg-form: #0A0D10;
      --gl-bg-input: #14181C;
      --gl-txt-titulo: #E8F2FB;
      --gl-txt-cuerpo: #8FB1CC;
      --gl-txt-form: #E8EBED;
      --gl-txt-tenue: #5A6066;
      --gl-borde: rgba(255,255,255,.08);
      --gl-glow: 0 0 26px -6px rgba(var(--gl-acento-rgb), .7);
      --gl-glow-fuerte: 0 0 34px -4px rgba(var(--gl-acento-rgb), .95);
      --gl-grilla: rgba(var(--gl-acento-rgb), .06);
      --gl-resorte: cubic-bezier(.32, .72, 0, 1);
      display: block; padding: 0; min-height: 100dvh; background: var(--gl-bg-form);
    }
    #login-screen .gl { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 100dvh; }

    #login-screen .gl-brand {
      position: relative; overflow: hidden; background: var(--gl-bg-marca);
      padding: 56px 60px; display: flex; flex-direction: column; justify-content: space-between;
    }
    #login-screen .gl-grid {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: linear-gradient(var(--gl-grilla) 1px, transparent 1px), linear-gradient(90deg, var(--gl-grilla) 1px, transparent 1px);
      background-size: 42px 42px; -webkit-mask-image: radial-gradient(120% 100% at 30% 20%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 100% at 30% 20%, #000 55%, transparent 100%);
    }
    #login-screen .gl-aura {
      position: absolute; z-index: 0; pointer-events: none; width: 520px; height: 520px; top: 0; left: 0; border-radius: 50%;
      background: radial-gradient(circle, rgba(var(--gl-acento-rgb), .50), transparent 65%);
      filter: blur(48px); opacity: .55; will-change: transform; animation: gl-aura 13s ease-in-out infinite;
    }
    @keyframes gl-aura {
      0% { transform: translate(-40px,-30px) scale(1); } 33% { transform: translate(46%,90px) scale(1.08); }
      66% { transform: translate(-30px,240px) scale(.96); } 100% { transform: translate(-40px,-30px) scale(1); }
    }
    #login-screen .gl-circuit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
    #login-screen .gl-t { fill: none; stroke: rgba(var(--gl-acento-rgb), .14); stroke-width: 1.3; }
    #login-screen .gl-p {
      fill: none; stroke: rgba(var(--gl-acento-rgb), .95); stroke-width: 2.2; stroke-linecap: round;
      stroke-dasharray: 34 360; filter: drop-shadow(0 0 4px rgba(var(--gl-acento-rgb), .8)); animation: gl-pulso 3.8s linear infinite;
    }
    #login-screen .gl-p.d1 { animation-delay: -1.2s; } #login-screen .gl-p.d2 { animation-delay: -2.5s; animation-duration: 4.6s; }
    #login-screen .gl-p.d3 { animation-delay: -.6s; animation-duration: 3.2s; } #login-screen .gl-p.d4 { animation-delay: -3.1s; animation-duration: 5.1s; }
    @keyframes gl-pulso { to { stroke-dashoffset: -394; } }
    #login-screen .gl-node { fill: var(--gl-acento); filter: drop-shadow(0 0 5px rgba(var(--gl-acento-rgb), .9)); animation: gl-nodo 2.6s ease-in-out infinite; }
    #login-screen .gl-node:nth-of-type(2){animation-delay:-.8s} #login-screen .gl-node:nth-of-type(3){animation-delay:-1.6s}
    #login-screen .gl-node:nth-of-type(4){animation-delay:-.4s} #login-screen .gl-node:nth-of-type(5){animation-delay:-2.1s} #login-screen .gl-node:nth-of-type(6){animation-delay:-1.1s}
    @keyframes gl-nodo { 0%,100% { opacity:.30; } 50% { opacity:1; } }

    #login-screen .gl-top, #login-screen .gl-content, #login-screen .gl-footer { position: relative; z-index: 2; }
    #login-screen .gl-logo {
      height: 52px; width: auto; display: inline-flex; align-items: center;
      color: var(--gl-txt-titulo); font-family: var(--ff-display, var(--ff-sans)); font-weight: 800; font-size: 22px;
    }
    #login-screen .gl-logo img { height: 100%; width: auto; object-fit: contain; display: block; }
    #login-screen .gl-eyebrow { margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gl-txt-cuerpo); }
    #login-screen .gl-title { margin: 14px 0 0; font-family: var(--ff-sans); font-size: clamp(48px,6.5vw,84px); line-height: 1.0; letter-spacing: -.03em; color: var(--gl-txt-titulo); font-weight: 700; }
    #login-screen .gl-title b { font-weight: 700; color: var(--gl-acento); }
    #login-screen .gl-sub { margin-top: 18px; max-width: 42ch; color: var(--gl-txt-cuerpo); font-size: 16px; line-height: 1.55; }
    #login-screen .gl-checks { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
    #login-screen .gl-check { display: flex; align-items: center; gap: 12px; color: var(--gl-txt-cuerpo); font-size: 14px; }
    #login-screen .gl-tick { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 22px; display: grid; place-items: center; color: var(--gl-acento); background: rgba(var(--gl-acento-rgb), .12); border: 1px solid rgba(var(--gl-acento-rgb), .35); }
    #login-screen .gl-tick svg { width: 13px; height: 13px; }
    #login-screen .gl-footer { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--gl-txt-tenue); }

    #login-screen .gl-form-wrap { background: var(--gl-bg-form); display: grid; place-items: center; padding: 48px 40px; }
    #login-screen .gl-form { width: min(380px, 100%); }
    #login-screen .gl-h2 { margin: 0 0 6px; font-family: var(--ff-sans); font-size: 26px; font-weight: 700; color: var(--gl-txt-form); letter-spacing: -.02em; }
    #login-screen .gl-lead { margin: 0 0 26px; color: var(--gl-txt-tenue); font-size: 14px; }
    #login-screen .gl-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
    #login-screen .gl-field label { font-size: 13px; color: var(--gl-txt-tenue); text-transform: none; letter-spacing: 0; font-weight: 400; }
    #login-screen .gl-field input {
      font-family: var(--ff-sans); font-size: 15px; color: var(--gl-txt-form); background: var(--gl-bg-input);
      border: 1px solid var(--gl-borde); border-radius: 12px; padding: 13px 14px; width: 100%;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    #login-screen .gl-field input::placeholder { color: #4a5258; }
    #login-screen .gl-field input:focus { outline: none; border-color: var(--gl-acento); background: var(--gl-bg-input); box-shadow: 0 0 0 3px rgba(var(--gl-acento-rgb), .18), var(--gl-glow); }
    #login-screen .gl-btn {
      width: 100%; margin-top: 6px; cursor: pointer; font-family: var(--ff-sans); font-weight: 600; font-size: 15px;
      color: var(--gl-acento-texto); border: 0; border-radius: 12px; padding: 14px 18px;
      background: linear-gradient(135deg, var(--gl-acento), var(--gl-acento-2)); box-shadow: var(--gl-glow);
      transition: transform .5s var(--gl-resorte), box-shadow .5s var(--gl-resorte);
    }
    #login-screen .gl-btn:hover { transform: translateY(-2px); box-shadow: var(--gl-glow-fuerte); }
    #login-screen .gl-btn:active { transform: translateY(0) scale(.98); transition: transform .12s ease; }
    #login-screen .gl-btn:disabled { opacity: .6; cursor: not-allowed; }
    #login-screen .login-error { margin-top: 18px; }

    @media (max-width: 860px) { #login-screen .gl { grid-template-columns: 1fr; } #login-screen .gl-brand { display: none; } }
    @media (prefers-reduced-motion: reduce) {
      #login-screen .gl-aura, #login-screen .gl-p, #login-screen .gl-node, #login-screen .gl-btn { animation: none !important; transition: none !important; }
    }

    /* ===== Instrucciones de pago (seña + saldo) ===== */
    .cfg-cobro-hint { font-size: 12.5px; color: var(--c-texto-muted, #6B7280); margin: -2px 0 12px; line-height: 1.45; }
    .cobro-top { display: flex; gap: 12px; align-items: flex-end; }
    .cobro-top + .cobro-result { margin-top: 12px; }
    .cobro-cell { flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .cobro-cell span { font-size: 12px; color: var(--c-texto-muted, #6B7280); }
    .cobro-cell b { font-size: 18px; font-weight: 700; }
    .cobro-cell input { width: 100%; }
    .cobro-cell.cobro-hi b { color: var(--c-azul, #1B6B93); font-size: 22px; }
    .cobro-msg { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; resize: vertical; }
    .cobro-hint { font-size: 12px; color: var(--c-texto-muted, #6B7280); margin: 6px 0 0; }
    .cobro-actions { flex-wrap: wrap; gap: 8px; }
    .cobro-saved { font-size: 12px; color: var(--c-verde, #2D9B6F); font-weight: 600; margin: -2px 0 10px; }
    .cobro-dirty { font-size: 12px; color: var(--c-naranja, #E8750A); font-weight: 600; margin: -2px 0 10px; }
    .cobro-mode { display: flex; gap: 6px; margin-bottom: 12px; }
    .cobro-mode-btn { flex: 1; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line, #DDE3EA); background: var(--c-card, #fff); color: var(--c-texto, #1A2332); font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s ease; }
    .cobro-mode-btn.active { background: var(--c-azul, #1B6B93); color: #fff; border-color: var(--c-azul, #1B6B93); }
    .cobro-estado { display: flex; flex-direction: column; gap: 8px; }
    .cobro-estado-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .cobro-estado-lbl { font-size: 14px; color: var(--c-texto, #1A2332); }
    .cobro-estado-lbl b { font-weight: 700; }
    .cobro-pagada { font-size: 12.5px; font-weight: 600; color: var(--c-verde, #2D9B6F); margin-right: 8px; }
    .cobro-efvo { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--c-texto, #1A2332); cursor: pointer; }
    .cobro-efvo input { width: 16px; height: 16px; }
    .firma-actions { display: inline-flex; gap: 10px; align-items: center; }
    .firma-usar { color: var(--c-azul, #1B6B93); font-weight: 600; }

    /* Dictado por voz — boton de microfono del contexto */
    .gb-mic { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line, #DDE3EA); background: var(--c-card, #fff); color: var(--c-azul, #1B6B93); font-weight: 600; font-size: 13px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
    .gb-mic svg { width: 16px; height: 16px; }
    .gb-mic:hover { border-color: var(--c-azul, #1B6B93); }
    .gb-mic.is-rec { background: #E23B3B; color: #fff; border-color: #E23B3B; animation: gb-mic-pulse 1.3s ease-in-out infinite; }
    .gb-mic.is-disabled { opacity: .55; }
    @keyframes gb-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(226,59,59,.5); } 50% { box-shadow: 0 0 0 6px rgba(226,59,59,0); } }