/* ==========================================================================
   Vigilancia Epidemiológica Aviar — sistema visual institucional
   Implementa el diseño aprobado (ver docs/ux-designs/DISENO.md).
   Reemplaza el naranja saturado original por una base azul pizarra con
   acento verde agro. Formas suavizadas, sin esquinas rectas.
   ========================================================================== */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root{
  --ink:oklch(0.26 0.035 250);
  --ink-2:oklch(0.44 0.022 250);
  --ink-3:oklch(0.58 0.016 250);
  --paper:oklch(0.977 0.004 250);
  --surface:oklch(1 0 0);
  --line:oklch(0.912 0.008 250);

  --verde:oklch(0.52 0.085 158);
  --verde-2:oklch(0.66 0.075 158);
  --verde-bg:oklch(0.962 0.02 158);

  --ambar:oklch(0.62 0.10 70);
  --ambar-bg:oklch(0.967 0.03 80);
  --rojo:oklch(0.55 0.115 25);
  --rojo-bg:oklch(0.963 0.025 25);

  /* Telegram — vía de acceso de primera clase, junto a web y Lia */
  --tg:oklch(0.60 0.125 237);
  --tg-bg:oklch(0.958 0.028 237);

  --azul-bg:oklch(0.958 0.014 250);

  --r-lg:18px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  --sh:0 1px 2px oklch(0.26 0.035 250 / .05), 0 6px 18px oklch(0.26 0.035 250 / .06);

  --fuente:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --fuente-t:"Source Serif 4",Georgia,serif;
  --fuente-m:"IBM Plex Mono","Cascadia Mono",Consolas,monospace;
}

*{box-sizing:border-box;}

body{
  font-family:var(--fuente);
  background:var(--paper);
  color:var(--ink);
  margin:0;
  line-height:1.55;
}

a{color:var(--verde);text-decoration:none;}
a:hover{color:var(--ink);}

/* ── Encabezado y navegación ────────────────────────────────────────────── */

.inst-header{background:var(--ink);color:var(--surface);padding:24px 34px;}
.inst-header-fila{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;}
.inst-header h1{font-family:var(--fuente-t);font-size:25px;font-weight:600;
  margin:0;letter-spacing:-.01em;}
.inst-header .sub{font-size:13px;color:oklch(1 0 0 / .62);margin-top:5px;}
.inst-meta{font-size:12px;color:oklch(1 0 0 / .58);line-height:1.75;text-align:right;}

.inst-nav{background:var(--ink);display:flex;gap:6px;padding:14px 28px 14px;
  flex-wrap:wrap;}
.inst-nav a{font-size:13px;font-weight:500;color:oklch(1 0 0 / .66);
  padding:8px 16px;border-radius:var(--r-pill);}
.inst-nav a:hover{color:var(--surface);background:oklch(1 0 0 / .1);}
.inst-nav a.activo{color:var(--ink);background:var(--surface);font-weight:600;}

/* ── Contenedores ───────────────────────────────────────────────────────── */

.inst-page{max-width:1180px;margin:0 auto;padding:26px 18px 40px;}
.inst-page.angosta{max-width:860px;}

.inst-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh);padding:20px 22px;}

.inst-titulo{font-size:11.5px;font-weight:600;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.09em;display:flex;align-items:center;
  gap:9px;margin:26px 0 14px;}
.inst-titulo::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--verde);display:block;flex-shrink:0;}
.inst-titulo:first-child{margin-top:0;}

/* ── Botones ────────────────────────────────────────────────────────────── */

.inst-btn{display:inline-block;padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid transparent;font-size:12.5px;font-weight:600;
  font-family:var(--fuente);text-decoration:none;cursor:pointer;}
.inst-btn-primario{background:var(--verde);color:var(--surface);border-color:var(--verde);}
.inst-btn-primario:hover{background:oklch(0.46 0.085 158);color:var(--surface);}
.inst-btn-secundario{background:var(--surface);color:var(--ink);border-color:var(--line);}
.inst-btn-secundario:hover{background:var(--azul-bg);}
.inst-btn-tg{background:var(--tg);color:var(--surface);border-color:var(--tg);}
.inst-btn:disabled{opacity:.55;cursor:not-allowed;}

/* ── Indicadores ────────────────────────────────────────────────────────── */

.inst-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;}
.inst-kpi{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh);padding:18px 20px;}
.inst-kpi .valor{font-family:var(--fuente-t);font-size:34px;font-weight:600;
  color:var(--ink);line-height:1;}
.inst-kpi .etiqueta{font-size:12.5px;color:var(--ink-3);margin-top:7px;}
.inst-kpi .spark{height:3px;border-radius:var(--r-pill);background:var(--verde);
  width:0;margin-top:13px;animation:inst-crecer 1.1s cubic-bezier(.22,1,.36,1) forwards;}

@keyframes inst-crecer{to{width:var(--w);}}

.inst-aviso{border-radius:var(--r-md);padding:13px 16px;font-size:13px;
  display:flex;gap:11px;align-items:flex-start;}
.inst-aviso::before{content:"";width:8px;height:8px;border-radius:50%;
  flex-shrink:0;margin-top:6px;background:currentColor;}
.inst-aviso-info{background:var(--azul-bg);color:var(--ink-2);}
.inst-aviso-ok{background:var(--verde-bg);color:var(--verde);}
.inst-aviso-alerta{background:var(--ambar-bg);color:oklch(0.42 0.06 70);}
.inst-aviso-error{background:var(--rojo-bg);color:var(--rojo);}

code,.inst-cmd{font-family:var(--fuente-m);background:var(--azul-bg);
  color:var(--ink);padding:2px 8px;border-radius:6px;font-size:12.5px;}

.inst-pill{display:inline-block;padding:3px 11px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:600;}
.inst-pill-ok{background:var(--verde-bg);color:var(--verde);}
.inst-pill-warn{background:var(--ambar-bg);color:oklch(0.45 0.08 70);}
.inst-pill-tg{background:var(--tg-bg);color:oklch(0.42 0.10 237);}

/* ── Progreso: la descarga de WAHIS puede tardar horas ──────────────────── */

.inst-prog{background:oklch(0.31 0.03 250);padding:14px 30px;}
.inst-prog-fila{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:9px;}
.inst-prog-txt{font-size:12.5px;color:oklch(1 0 0 / .88);font-weight:500;}
.inst-prog-eta{font-family:var(--fuente-m);font-size:12px;color:oklch(1 0 0 / .62);}
.inst-track{height:7px;background:oklch(1 0 0 / .16);border-radius:var(--r-pill);
  overflow:hidden;}
.inst-fill{height:7px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--verde),var(--verde-2));
  transition:width .6s cubic-bezier(.22,1,.36,1);}

/* ── Tablas ─────────────────────────────────────────────────────────────── */

.inst-tabla{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
.inst-tabla th{background:var(--azul-bg);color:var(--ink-2);text-align:left;
  font-weight:600;padding:11px 14px;font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;}
.inst-tabla th:first-child{border-top-left-radius:var(--r-sm);}
.inst-tabla th:last-child{border-top-right-radius:var(--r-sm);}
.inst-tabla td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);}

/* Contenido ancho: scrollea en su caja, la página nunca scrollea en X */
.inst-scroll-x{overflow-x:auto;}

/* ── Créditos ───────────────────────────────────────────────────────────── */

.inst-creditos{background:var(--ink);color:oklch(1 0 0 / .5);padding:16px 34px;
  font-size:11.5px;line-height:1.7;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;}
.inst-creditos strong{color:oklch(1 0 0 / .72);font-weight:600;}
.inst-creditos a{color:oklch(1 0 0 / .6);text-decoration:underline;}
.inst-creditos a:hover{color:var(--surface);}

@media (max-width:640px){
  .inst-header-fila{flex-direction:column;align-items:flex-start;}
  .inst-meta{text-align:left;}
  .inst-creditos{flex-direction:column;gap:6px;}
}

@media (prefers-reduced-motion: reduce){
  .inst-kpi .spark{animation:none;width:var(--w);}
  .inst-fill{transition:none;}
}