/* SISTEMA DE DISEÑO DEPEDÉ
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Una sola hoja para las diez apps. Antes cada una tenía sus colores puestos
 * a ojo: siete azules distintos, cuatro grises de texto, cada pantalla con su
 * propio tamaño de letra. Diez apps que se sienten como diez productos.
 *
 * La paleta y la tipografía salen del catálogo de ui-ux-pro-max para el
 * perfil "Data-Dense Dashboard", que es exactamente lo que es esto: una
 * herramienta de trabajo donde caben muchos números por pantalla y lo que
 * importa es leerlos rápido, no que se vea bonita.
 *
 * CONTRASTE — verificado, no supuesto:
 *   texto/fondo          9.90:1      texto apagado/tarjeta  7.58:1
 *   blanco/primario      8.72:1      negro/ámbar            6.59:1
 *   blanco/destructivo   4.83:1      primario/fondo         8.34:1
 * El azul secundario (#3B82F6) da 3.68:1 con texto blanco: NO se usa para
 * texto, solo para barras, bordes y áreas grandes.
 *
 * NADA DE EMOJIS COMO ICONOS. El emoji cambia de dibujo según el teléfono,
 * no hereda el color del texto y los lectores de pantalla lo leen en voz
 * alta como "edificio de oficinas". Se usan SVG en línea (ver iconos.svg).
 */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

:root{
  /* ── Color ─────────────────────────────────────────────────────── */
  --dpd-primary:#1E40AF;        --dpd-on-primary:#FFFFFF;
  --dpd-primary-soft:#E6EDFB;   --dpd-primary-hover:#1A3798;
  --dpd-secondary:#3B82F6;      /* solo áreas grandes: no pasa contraste con texto */
  --dpd-accent:#D97706;         --dpd-on-accent:#000000;
  --dpd-accent-soft:#FEF3E2;

  --dpd-bg:#F8FAFC;             --dpd-card:#FFFFFF;
  --dpd-fg:#1E3A8A;             /* azul muy oscuro: da 9.9:1 y ata el texto a la marca */
  --dpd-muted:#E9EEF6;          --dpd-muted-fg:#475569;
  --dpd-border:#DBEAFE;         --dpd-border-fuerte:#BFD4F5;

  --dpd-ok:#0F7A54;             --dpd-ok-soft:#E3F3EC;
  --dpd-warn:#8A6100;           --dpd-warn-soft:#FBF1DC;
  --dpd-bad:#DC2626;            --dpd-bad-soft:#FEE9E9;
  --dpd-ring:#1E40AF;

  /* ── Tipografía ────────────────────────────────────────────────── */
  /* Fira Sans para leer, Fira Code para números: las cifras salen todas del
     mismo ancho y las columnas de plata quedan alineadas sin trucos. */
  --dpd-fuente:'Fira Sans', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dpd-mono:'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;

  --dpd-t-xs:11.5px;  --dpd-t-sm:13px;    --dpd-t-base:15px;
  --dpd-t-lg:17px;    --dpd-t-xl:21px;    --dpd-t-2xl:27px;  --dpd-t-3xl:34px;

  /* ── Espacio y forma ───────────────────────────────────────────── */
  --dpd-e1:4px; --dpd-e2:8px; --dpd-e3:12px; --dpd-e4:16px;
  --dpd-e5:24px; --dpd-e6:32px; --dpd-e7:48px;
  --dpd-r-sm:8px; --dpd-r:12px; --dpd-r-lg:16px; --dpd-r-full:999px;
  --dpd-sombra:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --dpd-sombra-alta:0 8px 24px -8px rgba(30,58,138,.18);

  /* ── Movimiento ────────────────────────────────────────────────── */
  --dpd-curva:cubic-bezier(0.23, 1, 0.32, 1);
  --dpd-rapido:150ms; --dpd-normal:200ms;
}

/* ── Modo oscuro ─────────────────────────────────────────────────────
 * No es la versión clara con los colores invertidos: los azules se aclaran
 * para no perder contraste sobre fondo oscuro, y el fondo lleva un tinte
 * azul en vez de gris puro para que siga siendo el mismo producto.
 */
:root[data-tema="oscuro"]{
  --dpd-bg:#0B1220;             --dpd-card:#121C2E;
  --dpd-fg:#E8EEF9;             --dpd-muted:#1B2740;  --dpd-muted-fg:#9BAAC4;
  --dpd-border:#22314F;         --dpd-border-fuerte:#31456B;
  --dpd-primary:#5B8DEF;        --dpd-on-primary:#0B1220;
  --dpd-primary-soft:#17233C;   --dpd-primary-hover:#7AA5F5;
  --dpd-accent:#F0A63C;         --dpd-accent-soft:#2A2113;
  --dpd-ok:#3FBE8C;             --dpd-ok-soft:#12281F;
  --dpd-warn:#E0AE4A;           --dpd-warn-soft:#2A2113;
  --dpd-bad:#F16A6A;            --dpd-bad-soft:#2C1618;
  --dpd-sombra:0 1px 3px rgba(0,0,0,.4);
  --dpd-sombra-alta:0 10px 30px -10px rgba(0,0,0,.6);
}

/* ═══════════════════════════════════════════════════════════════════
 *  BASE
 * ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
body.dpd{
  margin:0; background:var(--dpd-bg); color:var(--dpd-fg);
  font-family:var(--dpd-fuente); font-size:var(--dpd-t-base); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
.dpd h1,.dpd h2,.dpd h3{ margin:0; line-height:1.25; letter-spacing:-.01em; }
.dpd h1{ font-size:var(--dpd-t-xl); font-weight:700; }
.dpd h2{ font-size:var(--dpd-t-lg); font-weight:650; }
.dpd a{ color:var(--dpd-primary); }

/* El anillo de foco NO se quita. Es lo único que le dice a quien navega con
   teclado dónde está parado, y quitarlo es el error de accesibilidad más
   repetido que hay. */
.dpd :focus-visible{
  outline:2px solid var(--dpd-ring); outline-offset:2px; border-radius:4px;
}

/* Los números en columna, con el mismo ancho de cifra. Sin esto una columna
   de plata baila al cambiar de fila y cuesta comparar de un vistazo. */
.dpd-num{ font-variant-numeric:tabular-nums; font-family:var(--dpd-mono); }

/* ═══════════════════════════════════════════════════════════════════
 *  ESTRUCTURA
 * ═══════════════════════════════════════════════════════════════════ */
.dpd-wrap{ max-width:1120px; margin:0 auto; padding:var(--dpd-e5) var(--dpd-e4) var(--dpd-e7); }
.dpd-wrap.estrecho{ max-width:720px; }

.dpd-card{
  background:var(--dpd-card); border:1px solid var(--dpd-border);
  border-radius:var(--dpd-r); box-shadow:var(--dpd-sombra); overflow:hidden;
}
.dpd-card > .pad{ padding:var(--dpd-e4); }

.dpd-titulo{
  font-size:var(--dpd-t-xs); letter-spacing:.09em; text-transform:uppercase;
  color:var(--dpd-muted-fg); font-weight:600;
  margin:var(--dpd-e5) 0 var(--dpd-e2);
  display:flex; align-items:center; gap:var(--dpd-e3);
}
.dpd-titulo::after{ content:""; flex:1; height:1px; background:var(--dpd-border); }

/* ═══════════════════════════════════════════════════════════════════
 *  BOTONES
 *  44×44 mínimo. Es la medida que exige la guía táctil y la razón por la que
 *  hoy hay que apuntar para darle a un botón desde el celular.
 * ═══════════════════════════════════════════════════════════════════ */
.dpd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--dpd-e2);
  min-height:44px; padding:0 var(--dpd-e4);
  border-radius:var(--dpd-r-sm); border:1px solid var(--dpd-border-fuerte);
  background:var(--dpd-card); color:var(--dpd-fg);
  font-family:inherit; font-size:var(--dpd-t-sm); font-weight:600;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--dpd-rapido) var(--dpd-curva),
             border-color var(--dpd-rapido) var(--dpd-curva),
             color var(--dpd-rapido) var(--dpd-curva);
}
.dpd-btn svg{ width:18px; height:18px; flex:0 0 auto; }
.dpd-btn.principal{ background:var(--dpd-primary); color:var(--dpd-on-primary);
                    border-color:var(--dpd-primary); }
.dpd-btn.acento{ background:var(--dpd-accent); color:var(--dpd-on-accent);
                 border-color:var(--dpd-accent); }
.dpd-btn.peligro{ background:var(--dpd-bad); color:#fff; border-color:var(--dpd-bad); }
.dpd-btn.plano{ border-color:transparent; background:transparent; }
.dpd-btn.chico{ min-height:36px; padding:0 var(--dpd-e3); font-size:var(--dpd-t-xs); }
.dpd-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* El hover encerrado: en pantalla táctil un toque lo dispara y el estilo se
   queda pegado hasta tocar otra cosa. */
@media (hover:hover) and (pointer:fine){
  .dpd-btn:hover{ background:var(--dpd-muted); border-color:var(--dpd-primary); }
  .dpd-btn.principal:hover{ background:var(--dpd-primary-hover); }
  .dpd-btn.plano:hover{ background:var(--dpd-muted); }
}

/* ═══════════════════════════════════════════════════════════════════
 *  CIFRAS Y ETIQUETAS
 * ═══════════════════════════════════════════════════════════════════ */
.dpd-kpis{ display:grid; gap:var(--dpd-e3);
           grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.dpd-kpi{ background:var(--dpd-card); border:1px solid var(--dpd-border);
          border-radius:var(--dpd-r); padding:var(--dpd-e4); }
.dpd-kpi .et{ font-size:var(--dpd-t-xs); letter-spacing:.07em; text-transform:uppercase;
              color:var(--dpd-muted-fg); font-weight:600; }
.dpd-kpi .val{ font-size:var(--dpd-t-2xl); font-weight:700; margin-top:2px;
               font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.dpd-kpi .nota{ font-size:var(--dpd-t-xs); color:var(--dpd-muted-fg); margin-top:2px; }
.dpd-kpi.bien .val{ color:var(--dpd-ok); }
.dpd-kpi.ojo  .val{ color:var(--dpd-warn); }
.dpd-kpi.mal  .val{ color:var(--dpd-bad); }

/* El color NO lleva el mensaje solo: cada estado tiene además su palabra.
   Uno de cada doce hombres no distingue rojo de verde. */
.dpd-chip{ display:inline-flex; align-items:center; gap:5px;
           font-size:var(--dpd-t-xs); font-weight:600; padding:3px 10px;
           border-radius:var(--dpd-r-full); }
.dpd-chip.ok{ background:var(--dpd-ok-soft); color:var(--dpd-ok); }
.dpd-chip.ojo{ background:var(--dpd-warn-soft); color:var(--dpd-warn); }
.dpd-chip.mal{ background:var(--dpd-bad-soft); color:var(--dpd-bad); }
.dpd-chip.info{ background:var(--dpd-primary-soft); color:var(--dpd-primary); }
.dpd-chip.gris{ background:var(--dpd-muted); color:var(--dpd-muted-fg); }

/* ═══════════════════════════════════════════════════════════════════
 *  TABLAS — donde vive la mitad de esta plataforma
 * ═══════════════════════════════════════════════════════════════════ */
.dpd-tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dpd-tabla{ width:100%; border-collapse:collapse; font-size:var(--dpd-t-sm); }
.dpd-tabla th{
  position:sticky; top:0; z-index:1;
  background:var(--dpd-muted); color:var(--dpd-muted-fg);
  font-size:var(--dpd-t-xs); letter-spacing:.05em; text-transform:uppercase;
  font-weight:600; text-align:left; padding:10px 14px; white-space:nowrap;
}
.dpd-tabla td{ padding:11px 14px; border-top:1px solid var(--dpd-border); }
.dpd-tabla .n{ text-align:right; font-variant-numeric:tabular-nums; }
.dpd-tabla tbody tr{ transition:background var(--dpd-rapido) var(--dpd-curva); }
@media (hover:hover) and (pointer:fine){
  .dpd-tabla tbody tr:hover{ background:var(--dpd-primary-soft); }
}

/* ═══════════════════════════════════════════════════════════════════
 *  FORMULARIOS
 * ═══════════════════════════════════════════════════════════════════ */
.dpd-campo{ display:block; margin-bottom:var(--dpd-e3); }
.dpd-campo > span{ display:block; font-size:var(--dpd-t-xs); font-weight:600;
                   color:var(--dpd-muted-fg); margin-bottom:4px; }
.dpd-input, .dpd-select{
  width:100%; min-height:44px; padding:10px 12px;
  background:var(--dpd-card); color:var(--dpd-fg);
  border:1px solid var(--dpd-border-fuerte); border-radius:var(--dpd-r-sm);
  /* 16px o más: por debajo de eso Safari hace zoom solo al tocar el campo */
  font-size:16px; font-family:inherit;
  transition:border-color var(--dpd-rapido) var(--dpd-curva);
}
.dpd-input:focus, .dpd-select:focus{ outline:none; border-color:var(--dpd-primary); }
/* El error va PEGADO al campo, no en un resumen arriba que nadie relaciona. */
.dpd-error{ font-size:var(--dpd-t-xs); color:var(--dpd-bad); margin-top:4px; }

/* ═══════════════════════════════════════════════════════════════════
 *  ESTADOS
 * ═══════════════════════════════════════════════════════════════════ */
.dpd-vacio{ padding:var(--dpd-e6) var(--dpd-e4); text-align:center;
            color:var(--dpd-muted-fg); font-size:var(--dpd-t-sm); }
/* Se reserva el alto del contenido que viene: si no, la página salta cuando
   llegan los datos y uno termina tocando lo que no era. */
.dpd-esqueleto{
  background:linear-gradient(90deg,var(--dpd-muted) 25%,var(--dpd-border) 37%,var(--dpd-muted) 63%);
  background-size:400% 100%; border-radius:var(--dpd-r-sm);
  animation:dpd-brilla 1.4s ease-in-out infinite; min-height:1em;
}
@keyframes dpd-brilla{ 0%{background-position:100% 0} 100%{background-position:0 0} }

.dpd-aviso{ padding:var(--dpd-e3) var(--dpd-e4); border-radius:var(--dpd-r-sm);
            font-size:var(--dpd-t-sm); border:1px solid transparent; }
.dpd-aviso.info{ background:var(--dpd-primary-soft); color:var(--dpd-primary);
                 border-color:var(--dpd-border-fuerte); }
.dpd-aviso.bien{ background:var(--dpd-ok-soft); color:var(--dpd-ok); }
.dpd-aviso.ojo{ background:var(--dpd-warn-soft); color:var(--dpd-warn); }
.dpd-aviso.mal{ background:var(--dpd-bad-soft); color:var(--dpd-bad); }

/* ═══════════════════════════════════════════════════════════════════
 *  ICONOS
 * ═══════════════════════════════════════════════════════════════════ */
.dpd-ic{ width:20px; height:20px; flex:0 0 auto; stroke:currentColor;
         fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.dpd-ic.grande{ width:26px; height:26px; }

@media (prefers-reduced-motion:reduce){
  .dpd-esqueleto{ animation:none; }
  .dpd *{ transition-duration:.01ms !important; }
}