/* ══════════════════════════════════════════════════════════════════
   SIDO · estilos comunes
   Una sola definicion para todo el sistema: cambiar un color aca lo
   cambia en todas las pantallas.
   Identidad: verde azulado, composicion aireada, fondo con formas.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* marca */
  --marca:#00A3A3; --marca-2:#2FC4B2; --marca-oscura:#00918F;
  --marca-suave:#DEF5F2; --marca-fondo:#F4FAF9;
  /* segundo color, para acentos y para el fondo */
  --calido:#FF9654; --calido-suave:#FFF0E6;
  /* superficies */
  --fondo:#F4FAF9; --papel:#FFFFFF; --papel-tr:rgba(255,255,255,.88);
  /* texto */
  --ink:#0C2429; --ink-soft:#4A6B70; --ink-muted:#6E8A8D;
  /* estados */
  --ok:#12A150; --ok-suave:#DFF5E7;
  --alerta:#C77700; --alerta-suave:#FFF3DC;
  --error:#E04A3C; --error-suave:#FEE9E6;
  /* lineas */
  --linea:#E4F0EE; --linea-suave:#F0F8F6;
  /* profundidad: la sombra cae abajo y a la derecha */
  --sombra-1:0 1px 3px rgba(12,36,41,.06);
  --sombra-2:0 2px 6px rgba(12,36,41,.08), 0 6px 18px rgba(12,36,41,.06);
  --sombra-3:0 8px 30px rgba(12,36,41,.11);
  --sombra-marca:0 2px 8px rgba(0,145,143,.25);
  /* radios */
  --r-sm:11px; --r:15px; --r-lg:18px;
  /* tipografias */
  --display:'Fraunces',Georgia,serif;
  --sans:'Archivo','Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',Consolas,monospace;
}

*, *::before, *::after{ box-sizing:border-box }
html, body{ margin:0; padding:0 }
body{
  font-family:var(--sans); background:var(--fondo); color:var(--ink);
  font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}

/* ── Fondo con formas ───────────────────────────────────────────── */
/* Se pone <div class="fondo-formas"></div> como primer hijo del contenedor.
   El contenedor necesita position:relative y overflow:hidden. */
.fondo-formas{ position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden }
.fondo-formas::before, .fondo-formas::after{ content:''; position:absolute;
  border-radius:50% }
.fondo-formas::before{ width:520px; height:520px; top:-260px; right:-140px;
  background:radial-gradient(circle,rgba(0,163,163,.20),transparent 66%) }
.fondo-formas::after{ width:400px; height:400px; bottom:-220px; left:-120px;
  background:radial-gradient(circle,rgba(255,150,84,.17),transparent 66%) }
.fondo-formas i{ position:absolute; width:300px; height:300px; bottom:-150px;
  right:18%; border-radius:50%;
  background:radial-gradient(circle,rgba(47,196,178,.14),transparent 66%) }
.sobre-fondo{ position:relative; z-index:1 }


/* ── Fondo con formas en todas las pantallas ─────────────────────── */
body::before, body::after{
  content:''; position:fixed; border-radius:50%; z-index:0; pointer-events:none;
}
body::before{ width:560px; height:560px; top:-280px; right:-150px;
  background:radial-gradient(circle,rgba(0,163,163,.16),transparent 66%) }
body::after{ width:440px; height:440px; bottom:-240px; left:180px;
  background:radial-gradient(circle,rgba(255,150,84,.13),transparent 66%) }
/* el contenido queda por encima */
body > *{ position:relative; z-index:1 }

/* ── Titulos ────────────────────────────────────────────────────── */
h1,h2,h3{ margin:0 0 .35em; color:var(--ink); letter-spacing:-.028em }
h1{ font-family:var(--display); font-size:33px; font-weight:600; line-height:1.15 }
h2{ font-size:28px; font-weight:700 }
h3{ font-size:17.5px; font-weight:700 }
.sup{ font-size:13px; font-weight:600; color:var(--marca) }
.baj{ font-size:15.5px; color:var(--ink-muted); margin:0 0 22px }

/* ── Superficies ────────────────────────────────────────────────── */
.card, .caja, .panel{
  background:var(--papel-tr); backdrop-filter:blur(8px);
  border-radius:var(--r); padding:18px 20px; box-shadow:var(--sombra-1);
}
.card:hover{ box-shadow:var(--sombra-2) }

/* ── Metricas ───────────────────────────────────────────────────── */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin-bottom:22px }
.kpi{ border-radius:var(--r); padding:18px 19px; background:var(--papel-tr);
  backdrop-filter:blur(8px); box-shadow:var(--sombra-1) }
.kpi .l{ font-size:12.5px; font-weight:600; color:var(--ink-muted); margin-bottom:9px }
.kpi .n{ font-size:33px; font-weight:700; letter-spacing:-.035em; line-height:1 }
.kpi .d{ font-size:12.5px; font-weight:600; color:var(--ok); margin-top:8px }
.kpi.dest{ background:linear-gradient(135deg,var(--marca),var(--marca-2));
  color:#fff; box-shadow:0 4px 14px rgba(0,145,143,.28) }
.kpi.dest .l, .kpi.dest .d{ color:rgba(255,255,255,.92) }
.kpi.alerta .n, .kpi.alerta .d{ color:var(--error) }

/* ── Botones ────────────────────────────────────────────────────── */
.btn{
  font-family:inherit; font-size:14px; font-weight:600; padding:10px 18px;
  border-radius:var(--r-sm); border:none; cursor:pointer;
  background:var(--papel); color:var(--ink); box-shadow:var(--sombra-1);
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
  display:inline-flex; align-items:center; gap:7px;
}
.btn:hover{ box-shadow:var(--sombra-2); transform:translateY(-1px) }
.btn:active{ transform:translateY(1px); box-shadow:var(--sombra-1) }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none }
.btn-primary, .btn.pri{ background:var(--marca); color:#fff; box-shadow:var(--sombra-marca) }
.btn-primary:hover, .btn.pri:hover{ background:var(--marca-oscura) }
.btn-suave{ background:var(--marca-suave); color:var(--marca-oscura) }
.btn-danger{ background:var(--error); color:#fff }
.btn-sm{ font-size:13px; padding:7px 14px }

/* ── Etiquetas ──────────────────────────────────────────────────── */
.badge{ font-size:12px; font-weight:600; padding:4px 11px; border-radius:20px;
  white-space:nowrap; display:inline-block }
.badge-ok{ background:var(--ok-suave); color:var(--ok) }
.badge-alerta{ background:var(--alerta-suave); color:var(--alerta) }
.badge-error{ background:var(--error-suave); color:var(--error) }
.badge-marca{ background:var(--marca-suave); color:var(--marca-oscura) }
.badge-neutro{ background:var(--linea); color:var(--ink-muted) }

/* ── Iniciales ──────────────────────────────────────────────────── */
.av{ width:36px; height:36px; border-radius:var(--r-sm); display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700;
  background:var(--marca-suave); color:var(--marca-oscura); margin-right:11px;
  vertical-align:middle }

/* ── Campos ─────────────────────────────────────────────────────── */
input[type=text],input[type=number],input[type=date],input[type=email],
input[type=search],input[type=password],select,textarea{
  font-family:inherit; font-size:14.5px; padding:10px 13px;
  border:1px solid var(--linea); border-radius:var(--r-sm);
  background:var(--papel); color:var(--ink); width:100%;
  transition:border-color .12s, box-shadow .12s;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--marca);
  box-shadow:0 0 0 3px var(--marca-suave) }
label{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin:0 0 5px }

/* ── Tablas ─────────────────────────────────────────────────────── */
table{ width:100%; border-collapse:collapse; font-size:14.5px }
thead th{ text-align:left; font-size:12px; font-weight:600; color:var(--ink-muted);
  padding:13px 18px; background:rgba(249,253,252,.7); border-bottom:1px solid var(--linea) }
tbody td{ padding:14px 18px; border-bottom:1px solid var(--linea-suave) }
tbody tr:last-child td{ border-bottom:none }
tbody tr:hover{ background:var(--marca-fondo) }
.nom{ font-weight:600 }

/* ── Utilidades ─────────────────────────────────────────────────── */
.dim,.muted{ color:var(--ink-muted) }
.soft{ color:var(--ink-soft) }
.mono{ font-family:var(--mono); font-size:13.5px }
.vacio{ text-align:center; color:var(--ink-muted); padding:28px 0 }

/* ══════════════════════════════════════════════════════════════════
   PUENTE con los nombres viejos
   Las 30 pantallas fueron escritas con --cobalt, --cream, --ink...
   En vez de reescribirlas una por una, esos nombres pasan a apuntar
   aca. Asi cambiar --marca arriba cambia TODO el sistema de una vez.
   A medida que cada pantalla se rehaga, su bloque propio se borra y
   esta seccion se va achicando.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --cobalt:var(--marca);
  --cobalt-dark:var(--marca-oscura);
  --cobalt-soft:var(--marca-suave);
  --cream:var(--fondo);
  --cream-2:var(--linea);
  --border:var(--linea);
  --border-soft:var(--linea-suave);
  --sage:var(--ok);
  --sage-soft:var(--ok-suave);
  --amber:var(--alerta);
  --amber-soft:var(--alerta-suave);
  --coral:var(--error);
  --coral-soft:var(--error-suave);
  /* los de calidad.html, informes.html y reversible.html */
  --acento:var(--marca);
  --tinta:var(--ink);
  --gris:var(--ink-muted);
  --papel-viejo:var(--papel);
  --naranja:var(--marca);
  --crema:var(--fondo);
  --rojo:var(--error);
  --verde:var(--ok);
  --ambar:var(--alerta);
}