/* ============================================================================
   HORIZONTED · SISTEMA DE DISEÑO (Design System) — v1.0
   Fuente de verdad visual de la Suite Administrativa y base del producto SaaS.
   Reglas: ver DESIGN_SYSTEM_HORIZONTED.md. No duplicar tokens en cada página:
   importar este archivo y consumir las variables/clases hz-*.
   Tipografía: IBM Plex Sans (financiera/confiable) con fallback de sistema.
   ============================================================================ */

/* ---- 1. TOKENS (light por defecto; dark vía [data-theme="dark"]) ---- */
:root {
  /* Marca */
  --hz-brand:        #E11D2A;   /* rojo HorizonTED — SOLO wordmark/marca, nunca acción */
  --hz-brand-ink:    #B11420;

  /* Acento de acción (confianza fintech) — botones primarios, enlaces, activos */
  --hz-accent:       #9C27B0;   /* Morado — acento estándar HorizonTED (Panel General) */
  --hz-accent-hover: #7B1FA2;
  --hz-accent-soft:  #F3E5F5;

  /* Neutros (slate) */
  --hz-ink:          #0F172A;   /* texto principal */
  --hz-ink-2:        #475569;   /* texto secundario (contraste AA) */
  --hz-muted:        #64748B;   /* texto terciario/labels */
  --hz-line:         #E2E8F0;   /* bordes */
  --hz-line-2:       #CBD5E1;
  --hz-surface:      #FFFFFF;   /* tarjetas */
  --hz-surface-2:    #F1F5F9;   /* zonas/encabezados de tabla */
  --hz-bg:           #F6F8FB;   /* fondo de app */
  --hz-navy:         #0F172A;   /* sidebar */
  --hz-navy-2:       #1E293B;

  /* Semánticos (finanzas) */
  --hz-pos:          #059669;   --hz-pos-soft: #D1FAE5;   /* ingreso / positivo */
  --hz-neg:          #DC2626;   --hz-neg-soft: #FEE2E2;   /* egreso / negativo / peligro */
  --hz-warn:         #B45309;   --hz-warn-soft: #FEF3C7;  /* aviso */
  --hz-info:         #0369A1;   --hz-info-soft: #E0F2FE;  /* informativo */

  /* Elevación / forma / movimiento */
  --hz-radius:   12px;
  --hz-radius-sm: 8px;
  --hz-shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --hz-shadow-2: 0 4px 12px rgba(15,23,42,.08);
  --hz-shadow-3: 0 12px 28px rgba(15,23,42,.12);
  --hz-t:        .18s cubic-bezier(.4,0,.2,1);
  /* Curvas de easing fuertes (Emil): ease-out con punch para UI */
  --hz-ease-out:    cubic-bezier(.23,1,.32,1);
  --hz-ease-in-out: cubic-bezier(.77,0,.175,1);
  --hz-ease-drawer: cubic-bezier(.32,.72,0,1);

  /* Superficie profunda (jerarquía de elevación — evita el "todo blanco plano") */
  --hz-surface-3: #E8EDF3;

  /* ESCALA DE Z-INDEX (fuente única — elimina solapamientos entre ventanas).
     Regla: usar SIEMPRE estos tokens, nunca números mágicos (9999, 99999…). */
  --hz-z-base:      1;
  --hz-z-nav:       100;   /* barra superior */
  --hz-z-sidebar:   200;   /* barra lateral */
  --hz-z-dropdown:  1000;  /* selects, menús, popovers */
  --hz-z-tooltip:   1500;  /* tooltips (por encima de dropdowns) */
  --hz-z-modal:     2000;  /* overlays de modales */
  --hz-z-drawer:    2100;  /* drawers/off-canvas móvil */
  --hz-z-toast:     3000;  /* notificaciones (siempre arriba) */

  /* Tipografía */
  --hz-font: 'IBM Plex Sans','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --hz-num:  'IBM Plex Sans','Inter',system-ui,sans-serif; /* cifras */
}

:root[data-theme="dark"] {
  --hz-accent:       #C084FC;  --hz-accent-hover: #D8B4FE;  --hz-accent-soft: rgba(192,132,252,.14);
  --hz-ink:          #F8FAFC;  --hz-ink-2: #CBD5E1;  --hz-muted: #94A3B8;
  --hz-line:         #334155;  --hz-line-2: #475569;
  --hz-surface:      #1E293B;  --hz-surface-2: #0F172A;  --hz-surface-3: #0B1120;
  --hz-bg:           #0B1120;  --hz-navy: #0B1120;  --hz-navy-2: #1E293B;
  --hz-pos: #34D399; --hz-pos-soft: rgba(16,185,129,.16);
  --hz-neg: #F87171; --hz-neg-soft: rgba(239,68,68,.16);
  --hz-warn:#FBBF24; --hz-warn-soft: rgba(245,158,11,.16);
  --hz-info:#38BDF8; --hz-info-soft: rgba(14,165,233,.16);
  --hz-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --hz-shadow-2: 0 4px 12px rgba(0,0,0,.45);
  --hz-shadow-3: 0 12px 28px rgba(0,0,0,.55);
}

/* ---- 2. BASE (incluye corrección de scroll: el body SIEMPRE hace scroll) ---- */
.hz-app, .hz-app * { box-sizing: border-box; }
.hz-app {
  margin: 0;
  min-height: 100vh;                /* nunca height:100vh+overflow:hidden en el body */
  background: var(--hz-bg);
  color: var(--hz-ink);
  font-family: var(--hz-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.hz-app h1,.hz-app h2,.hz-app h3 { letter-spacing: -.02em; font-weight: 800; margin: 0; }
.hz-tnum { font-variant-numeric: tabular-nums; font-family: var(--hz-num); }

/* Foco accesible unificado.
   NO va colgado de .hz-app a proposito: una regla de accesibilidad no puede
   depender de que alguien recuerde poner una clase en el <body>. Estuvo dentro
   de .hz-app y solo una pagina de doce aplicaba esa clase, asi que el anillo de
   foco no existia en el resto del producto. Ahora alcanza a todo documento que
   enlace esta hoja. */
:focus-visible {
  outline: 2px solid var(--hz-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* El teclado no debe quedar peor que el raton: si un componente apaga el
   outline por estetica, este respaldo lo devuelve al navegar con Tab. */
:focus:not(:focus-visible) { outline: none; }

/* Movimiento reducido: menos movimiento, no cero animacion.
   Se conservan opacidad y color (ayudan a entender que cambio de estado) y se
   elimina todo desplazamiento, escala y giro, que es lo que produce mareo.
   Por eso se acota transition-property en vez de poner transition:none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, box-shadow, fill, stroke !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
}

/* Los dispositivos tactiles disparan :hover al tocar y el estado se queda
   pegado despues del toque. Envolver los hover decorativos aqui los limita al
   raton. Uso: .hz-hoverable dentro de este bloque, o copiar la media query. */
@media (hover: hover) and (pointer: fine) {
  .hz-card.hz-hoverable:hover { box-shadow: var(--hz-shadow-2); border-color: var(--hz-line-2); }
}

/* ---- 3. MARCA (wordmark + logo) ---- */
.hz-brand { display: flex; align-items: center; gap: 12px; }
.hz-brand__logo {
  width: 42px; height: 42px; border-radius: 11px; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: var(--hz-shadow-2); flex-shrink: 0;
}
.hz-brand__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hz-brand__word { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: inherit; }
.hz-brand__word b { color: var(--hz-brand); font-weight: 800; }  /* la parte "TED" */
.hz-brand__sub { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hz-muted); }

/* ---- 4. SHELL (sidebar + contenido) ---- */
.hz-shell { display: flex; min-height: 100vh; }
.hz-sidebar {
  width: 256px; flex-shrink: 0; background: var(--hz-navy); color: #cbd5e1;
  display: flex; flex-direction: column; gap: 4px; padding: 20px 14px;
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}
.hz-sidebar__brand { padding: 6px 10px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; border-bottom: 1px solid var(--hz-navy-2); margin-bottom: 10px; }
.hz-sidebar__brand .hz-brand__word { color: #f8fafc; }
.hz-navlink {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-height: 44px;
  border-radius: var(--hz-radius-sm); color: #94a3b8; text-decoration: none;
  font-weight: 600; font-size: .9rem; border-left: 3px solid transparent;
  transition: background-color .18s var(--hz-ease-out), color .18s var(--hz-ease-out), border-left-color .18s var(--hz-ease-out);
}
.hz-navlink:hover { background: var(--hz-navy-2); color: #fff; }
.hz-navlink.is-active { background: var(--hz-navy-2); color: #fff; border-left-color: var(--hz-accent); }
.hz-navlink svg { width: 18px; height: 18px; flex-shrink: 0; }
.hz-main { flex: 1; min-width: 0; padding: 28px 32px 48px; }

/* ---- 5. ENCABEZADO DE PÁGINA ---- */
.hz-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.hz-pagehead h1 { font-size: 1.5rem; }
.hz-pagehead p { margin: 4px 0 0; color: var(--hz-muted); font-size: .9rem; }

/* ---- 6. TARJETAS ---- */
.hz-card { background: var(--hz-surface); border: 1px solid var(--hz-line); border-radius: var(--hz-radius); box-shadow: var(--hz-shadow-1); padding: 22px; }
.hz-card--pad-lg { padding: 28px; }
.hz-card__title { font-size: .95rem; font-weight: 700; margin: 0 0 16px; color: var(--hz-ink); }

/* KPI */
.hz-kpi { background: var(--hz-surface); border: 1px solid var(--hz-line); border-radius: var(--hz-radius); box-shadow: var(--hz-shadow-1); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.hz-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hz-accent); }
.hz-kpi--pos::before { background: var(--hz-pos); }
.hz-kpi--neg::before { background: var(--hz-neg); }
.hz-kpi--muted::before { background: var(--hz-line-2); }
.hz-kpi__label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hz-muted); }
.hz-kpi__value { font-size: 1.7rem; font-weight: 800; color: var(--hz-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.hz-kpi__value.is-pos { color: var(--hz-pos); }
.hz-kpi__value.is-neg { color: var(--hz-neg); }
.hz-kpi__sub { font-size: .78rem; color: var(--hz-muted); }
.hz-grid { display: grid; gap: 18px; }
.hz-grid--4 { grid-template-columns: repeat(4,1fr); }
.hz-grid--3 { grid-template-columns: repeat(3,1fr); }
.hz-grid--2 { grid-template-columns: repeat(2,1fr); }

/* ---- 7. TABLAS ---- */
.hz-tablewrap { overflow-x: auto; border-radius: var(--hz-radius); }
.hz-table { width: 100%; border-collapse: collapse; }
.hz-table th { position: sticky; top: 0; background: var(--hz-surface-2); text-align: left; padding: 12px 16px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hz-ink-2); border-bottom: 1px solid var(--hz-line); }
.hz-table td { padding: 14px 16px; font-size: .88rem; border-bottom: 1px solid var(--hz-line); color: var(--hz-ink); vertical-align: middle; }
.hz-table tbody tr { transition: background var(--hz-t); }
.hz-table tbody tr:hover { background: var(--hz-surface-2); }
.hz-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- 8. BOTONES ---- */
/* transition con propiedades EXPLICITAS. Antes era `transition: var(--hz-t)`,
   que al no nombrar ninguna equivale a `transition: all`: el navegador vigila
   tambien width/height/padding y tira frames. Solo se anima lo que cambia de
   verdad al pasar el raton. El transform del :active va aparte, mas rapido. */
.hz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--hz-radius-sm); font-family: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; transition: background-color .18s var(--hz-ease-out), border-color .18s var(--hz-ease-out), color .18s var(--hz-ease-out), box-shadow .18s var(--hz-ease-out), filter .18s var(--hz-ease-out); }
.hz-btn svg { width: 17px; height: 17px; }
.hz-btn:disabled { opacity: .55; cursor: not-allowed; }
/* Feedback de press (Emil): el botón "responde" al toque. Solo transform (GPU). */
.hz-btn:active:not(:disabled) { transform: scale(.97); transition: transform 120ms var(--hz-ease-out); }
.hz-btn--primary { background: var(--hz-accent); color: #fff; }
.hz-btn--primary:hover:not(:disabled) { background: var(--hz-accent-hover); box-shadow: var(--hz-shadow-2); }
.hz-btn--ghost { background: var(--hz-surface); color: var(--hz-ink-2); border-color: var(--hz-line); }
.hz-btn--ghost:hover:not(:disabled) { border-color: var(--hz-accent); color: var(--hz-accent); }
.hz-btn--pos { background: var(--hz-pos); color: #fff; }
.hz-btn--danger { background: var(--hz-neg); color: #fff; }
.hz-btn--danger:hover:not(:disabled) { filter: brightness(.94); }

/* ---- 9. BADGES / CHIPS ---- */
.hz-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.hz-badge--pos { background: var(--hz-pos-soft); color: var(--hz-pos); }
.hz-badge--neg { background: var(--hz-neg-soft); color: var(--hz-neg); }
.hz-badge--warn { background: var(--hz-warn-soft); color: var(--hz-warn); }
.hz-badge--info { background: var(--hz-info-soft); color: var(--hz-info); }
.hz-badge--outline { background: transparent; border: 1.5px solid var(--hz-line-2); color: var(--hz-muted); }
.hz-badge--dashed { background: transparent; border: 1.5px dashed var(--hz-line-2); color: var(--hz-muted); }

/* ---- 10. TABS (módulo y sub-pestaña) ---- */
.hz-tabs { display: flex; gap: 6px; overflow-x: auto; }
.hz-tab { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 42px; padding: 9px 16px; border: none; background: transparent; color: var(--hz-muted); font-family: inherit; font-weight: 700; font-size: .88rem; border-radius: var(--hz-radius-sm); cursor: pointer; transition: background-color .18s var(--hz-ease-out), color .18s var(--hz-ease-out); }
.hz-tab svg { width: 17px; height: 17px; }
.hz-tab:hover { background: var(--hz-surface-2); color: var(--hz-ink); }
.hz-tab.is-active { background: var(--hz-accent); color: #fff; }

/* ---- 11. FORMULARIOS ---- */
.hz-field { display: flex; flex-direction: column; gap: 5px; }
.hz-field label { font-size: .78rem; font-weight: 700; color: var(--hz-ink-2); }
.hz-input, .hz-select { font-family: inherit; font-size: .88rem; padding: 10px 12px; border: 1px solid var(--hz-line-2); border-radius: var(--hz-radius-sm); background: var(--hz-surface); color: var(--hz-ink); transition: border-color .18s var(--hz-ease-out), box-shadow .18s var(--hz-ease-out); }
.hz-input:focus, .hz-select:focus { outline: none; border-color: var(--hz-accent); box-shadow: 0 0 0 3px var(--hz-accent-soft); }

/* ---- 12. MODAL ---- */
.hz-modal { position: fixed; inset: 0; z-index: var(--hz-z-modal); display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.5); backdrop-filter: blur(4px); }
.hz-modal.is-open { display: flex; }
.hz-modal__panel { background: var(--hz-surface); border: 1px solid var(--hz-line); border-radius: var(--hz-radius); box-shadow: var(--hz-shadow-3); width: 100%; max-width: 460px; padding: 24px; }

/* ---- 13. ALERTA / AVISO ---- */
.hz-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--hz-radius-sm); font-size: .86rem; font-weight: 600; }
.hz-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.hz-alert--warn { background: var(--hz-warn-soft); color: var(--hz-warn); }
.hz-alert--info { background: var(--hz-info-soft); color: var(--hz-info); }
.hz-alert--neg  { background: var(--hz-neg-soft);  color: var(--hz-neg); }

/* ---- 14. RESPONSIVE ---- */
@media (max-width: 900px) {
  .hz-shell { flex-direction: column; }
  .hz-sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hz-sidebar__brand { border-bottom: none; margin: 0 auto 0 0; padding: 6px; }
  .hz-main { padding: 20px 16px 40px; }
  .hz-grid--4 { grid-template-columns: repeat(2,1fr); }
  .hz-grid--3, .hz-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hz-grid--4 { grid-template-columns: 1fr; }
}

/* ---- 15. MEMBRETE DE DOCUMENTO IMPRIMIBLE ----------------------------------
   Un papel que sale de la plataforma tiene que poder identificarse solo, lejos
   de la pantalla que lo genero. Esto vivia copiado dentro de suite.html
   (.print-header/.print-brand), asi que las paginas que no eran la proforma
   imprimian sin identificacion — el dashboard B2G llegaba a un ente publico sin
   logo, sin wordmark y sin RIF.

   Tres familias, segun a quien va dirigido el documento:
     --comercial    propuesta, B2G: identidad completa + eslogan + contacto.
     --contractual  contrato, comodato, nota de entrega: identificacion sobria.
                    SIN eslogan ni redes; un contrato no hace publicidad.
     --interno      nomina, despacho, auditoria: membrete minimo, sin contacto.

   Colores en hex literal a proposito: al imprimir no hay garantia de que las
   variables del tema esten resueltas como en pantalla, y el papel no tiene
   modo oscuro. Es la unica parte del sistema donde eso es correcto.
   -------------------------------------------------------------------------- */
.hz-membrete { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 3px solid #E11D2A; padding-bottom: 14px; margin-bottom: 24px; }
.hz-membrete__marca { display: flex; align-items: center; gap: 14px; }
.hz-membrete__logo { display: block; width: 72px; height: 72px; border-radius: 12px; object-fit: contain; background: #fff; padding: 4px; border: 2px solid #E11D2A; }
.hz-membrete__word { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: #0f172a; line-height: 1.1; }
.hz-membrete__word b { color: #E11D2A; font-weight: 800; }   /* la parte "TED" */
.hz-membrete__razon { font-weight: 600; color: #64748b; font-size: .95rem; letter-spacing: 0; margin-left: 6px; }
.hz-membrete__legal { margin: 4px 0 0; font-size: .82rem; color: #64748b; line-height: 1.45; }
.hz-membrete__eslogan { margin: 4px 0 0; font-size: .84rem; font-weight: 600; color: #E11D2A; }
.hz-membrete__meta { text-align: right; font-size: .8rem; color: #475569; }
.hz-membrete__meta h2 { margin: 0 0 6px; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: #9C27B0; font-weight: 800; }

/* El eslogan solo pertenece a la familia comercial. Ocultarlo aqui evita que
   se cuele en un contrato por copiar el bloque de al lado. */
.hz-membrete--contractual .hz-membrete__eslogan,
.hz-membrete--interno .hz-membrete__eslogan { display: none; }
.hz-membrete--interno .hz-membrete__logo { width: 48px; height: 48px; }
.hz-membrete--interno { border-bottom-width: 2px; }

/* Pie: cierra la hoja y repite la identificacion minima. */
.hz-membrete-pie { margin-top: 34px; border-top: 2px solid #E11D2A; padding-top: 10px; font-size: .82rem; color: #64748b; text-align: center; line-height: 1.6; }
.hz-membrete-pie b { color: #0f172a; }

/* Para tableros que se ven en pantalla y a veces se imprimen (B2G): el
   membrete solo aparece en el papel, donde es imprescindible. */
.hz-membrete--solo-impresion, .hz-membrete-pie--solo-impresion { display: none; }
@media print {
  .hz-membrete--solo-impresion { display: flex !important; }
  .hz-membrete-pie--solo-impresion { display: block !important; }
  /* Un membrete partido a la mitad por un salto de pagina no identifica nada. */
  .hz-membrete, .hz-membrete-pie { break-inside: avoid; page-break-inside: avoid; }
}

/* ============================================================================
   COMPAT — tokens SIN prefijo usados por las páginas admin migradas.
   Gemini migró las páginas al DS pero eliminó sus :root propios, dejando
   referencias var(--primary/--border/--muted/...) SIN DEFINIR → interfaz rota.
   Este bloque las mapea al DS. Las páginas con :root propio (p.ej. suite.html)
   lo sobreescriben (su <style> va después del <link>) y no se ven afectadas.
   ============================================================================ */
:root {
  --primary:       var(--hz-ink);
  --primary-light: var(--hz-accent-soft);
  --accent:        var(--hz-accent);
  --navy2:         var(--hz-navy-2);
  --text:          var(--hz-ink);
  --muted:         var(--hz-muted);
  --border:        var(--hz-line);
  --bg:            var(--hz-bg);
  --surface:       var(--hz-surface);
  --card-bg:       var(--hz-surface);
  --success:       var(--hz-pos);
  --success-bg:    var(--hz-pos-soft);
  --danger:        var(--hz-neg);
  --danger-bg:     var(--hz-neg-soft);
  --warning:       var(--hz-warn);
  --transition:    var(--hz-t);
  --shadow-sm:     var(--hz-shadow-1);
  --surface-2:     var(--hz-surface-2);
  --surface-3:     var(--hz-surface-3);
  /* Escala de z-index sin prefijo (misma fuente única) */
  --z-nav:      var(--hz-z-nav);
  --z-sidebar:  var(--hz-z-sidebar);
  --z-dropdown: var(--hz-z-dropdown);
  --z-tooltip:  var(--hz-z-tooltip);
  --z-modal:    var(--hz-z-modal);
  --z-drawer:   var(--hz-z-drawer);
  --z-toast:    var(--hz-z-toast);
  --ease-out:   var(--hz-ease-out);
}