/* ==========================================================================
   FUENTE PROPIA — Archivo (SIL Open Font License)
   Alojada en el propio servidor a propósito: pedírsela a Google agregaba
   casi 3 segundos de espera bloqueante en cada carga de página.
   ========================================================================== */
@font-face{
  font-family:"Archivo";
  src:url("../assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
  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:"Archivo";
  src:url("../assets/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
  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;
}

/* ===========================================================================
   BONET. — Panel de edición
   Misma paleta que el sitio, pero pensado para trabajar: denso y claro.
   =========================================================================== */
:root{
  --paper:#F7F5EF; --panel:#FFFFFF; --ink:#111111; --slate:#4B5563;
  --suave:#7C8694; --green:#0F5132; --green-claro:#E8EFE9; --verde-vivo:#1C8353;
  --linea:rgba(17,17,17,.10); --linea-suave:rgba(17,17,17,.06);
  --rojo:#9E3B2A; --rojo-suave:#FBEDEA;
  --r:12px; --r-chico:8px;
  --sombra:0 1px 2px rgba(17,17,17,.04), 0 12px 26px -20px rgba(17,17,17,.3);
  --ease:cubic-bezier(.22,1,.36,1);
  --fuente:"Archivo",ui-sans-serif,system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--fuente); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
h1{ font-size:clamp(26px,3vw,38px); }
h2{ font-size:20px; margin:38px 0 14px; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
code{ background:rgba(17,17,17,.06); padding:2px 6px; border-radius:5px; font-size:.9em; }
.verde{ color:var(--green); }
:focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:4px; }

/* ── Entrada ─────────────────────────────────────────────────────── */
body.entrada{ display:grid; place-items:center; min-height:100dvh; padding:24px; }
.entrada__caja{
  width:100%; max-width:380px; background:var(--panel);
  border:1px solid var(--linea-suave); border-radius:var(--r);
  padding:38px 34px 30px; box-shadow:var(--sombra);
}
.entrada__marca{ font-size:24px; font-weight:800; letter-spacing:-.045em; }
.entrada__marca span{ color:var(--green); }
.entrada__caja h1{ font-size:19px; margin:4px 0 26px; color:var(--slate); font-weight:600; letter-spacing:-.01em; }
.entrada__volver{ display:block; margin-top:22px; text-align:center; font-size:13px; color:var(--suave); }
.entrada__volver:hover{ color:var(--ink); }

/* ── Barra superior ──────────────────────────────────────────────── */
.barra{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; background:var(--ink); color:var(--paper);
}
.barra__marca{ font-size:17px; font-weight:800; letter-spacing:-.04em; }
.barra__marca span{ color:var(--verde-vivo); }
.barra__marca em{ font-style:normal; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; opacity:.5; margin-left:6px; }
.barra__acciones{ display:flex; gap:8px; }
.barra .bt--fino{ border-color:rgba(247,245,239,.24); color:var(--paper); }
.barra .bt--fino:hover{ background:rgba(247,245,239,.12); border-color:rgba(247,245,239,.4); }

/* ── Estructura ──────────────────────────────────────────────────── */
.marco{ display:grid; grid-template-columns:238px minmax(0,1fr); align-items:start; }
.lateral{
  position:sticky; top:57px; align-self:start;
  height:calc(100dvh - 57px); overflow-y:auto;
  padding:20px 14px 40px; border-right:1px solid var(--linea);
}
.lateral__titulo{
  margin:20px 10px 7px; font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--suave);
}
.lateral__item{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--r-chico);
  font-size:14px; font-weight:550; color:var(--slate);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.lateral__item i{ font-style:normal; width:18px; text-align:center; opacity:.6; font-size:13px; }
.lateral__item:hover{ background:rgba(17,17,17,.05); color:var(--ink); }
.lateral__item.es-activo{ background:var(--green-claro); color:var(--green); font-weight:650; }
.lateral__item.es-activo i{ opacity:1; }
.globo{
  margin-left:auto; background:var(--green); color:#fff;
  font-size:11px; font-weight:700; padding:1px 7px; border-radius:99px;
}
.contenido{ padding:34px clamp(20px,3.4vw,46px) 90px; max-width:1180px; }
.bajada{ margin-top:10px; color:var(--slate); max-width:74ch; }
.volver{ display:inline-block; margin-bottom:14px; font-size:13px; color:var(--suave); }
.volver:hover{ color:var(--ink); }
.titulo-fila{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.angosto{ max-width:620px; }

/* ── Avisos ──────────────────────────────────────────────────────── */
.aviso{
  margin-bottom:22px; padding:12px 16px; border-radius:var(--r-chico);
  font-size:14px; font-weight:550; border:1px solid transparent;
}
.aviso--bien{ background:var(--green-claro); border-color:rgba(15,81,50,.2); color:var(--green); }
.aviso--mal{ background:var(--rojo-suave); border-color:rgba(158,59,42,.24); color:var(--rojo); }
.vacio{ padding:34px; text-align:center; color:var(--suave);
  border:1px dashed var(--linea); border-radius:var(--r); margin-top:20px; }

/* ── Tarjetas de resumen ─────────────────────────────────────────── */
.tarjetas{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px; margin-top:28px;
}
.tarjeta{
  background:var(--panel); border:1px solid var(--linea-suave); border-radius:var(--r);
  padding:18px 20px; box-shadow:var(--sombra);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.tarjeta:hover{ transform:translateY(-3px); border-color:rgba(15,81,50,.28); }
.tarjeta i{ font-style:normal; color:var(--green); font-size:15px; }
.tarjeta b{ display:block; font-size:30px; font-weight:800; letter-spacing:-.04em; line-height:1.1; margin-top:6px; }
.tarjeta span{ display:block; font-size:13px; color:var(--slate); margin-top:2px; }

/* ── Tablas ──────────────────────────────────────────────────────── */
.tabla{
  width:100%; border-collapse:collapse; margin-top:22px;
  background:var(--panel); border:1px solid var(--linea-suave);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra);
}
.tabla th{
  text-align:left; padding:11px 16px; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--suave);
  border-bottom:1px solid var(--linea);
}
.tabla td{ padding:13px 16px; border-bottom:1px solid var(--linea-suave); vertical-align:top; font-size:14px; }
.tabla tr:last-child td{ border-bottom:0; }
.tabla tbody tr:hover{ background:rgba(17,17,17,.022); }
.tabla tr.nuevo{ background:rgba(28,131,83,.06); }
.tabla small{ display:block; color:var(--suave); font-size:12.5px; }
.tabla__accion{ text-align:right; white-space:nowrap; }
.tabla__accion a{ font-weight:650; color:var(--green); font-size:13.5px; }
.tabla__accion a:hover{ text-decoration:underline; }
.si{ color:var(--green); font-weight:650; font-size:12.5px; }
.no{ color:var(--suave); }

/* ── Formularios ─────────────────────────────────────────────────── */
fieldset{
  border:1px solid var(--linea-suave); border-radius:var(--r);
  background:var(--panel); padding:24px 26px 26px; margin:24px 0 0;
  box-shadow:var(--sombra);
}
legend{
  padding:0 10px; font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--green);
}
.rejilla{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; }
.campo{ display:grid; gap:6px; align-content:start; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{ font-size:12px; font-weight:650; letter-spacing:.04em; color:var(--slate); }
.campo label i{ color:var(--green); font-style:normal; }
.campo input[type=text],.campo input[type=url],.campo input[type=email],
.campo input[type=password],.campo input[type=number],.campo input[type=date],
.campo textarea,.campo select{
  width:100%; padding:10px 12px; font-size:14.5px;
  font-family:var(--fuente);
  border:1px solid var(--linea); border-radius:var(--r-chico);
  background:var(--paper); color:var(--ink);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.campo textarea{ resize:vertical; line-height:1.55; }
.campo .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px; }
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none; border-color:var(--green); background:#fff;
}
.ayuda{ font-size:12px; color:var(--suave); line-height:1.45; }
.check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; color:var(--ink); }
.check input{ width:17px; height:17px; accent-color:var(--green); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ cursor:pointer; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{
  display:inline-block; padding:7px 14px; border-radius:99px;
  border:1px solid var(--linea); font-size:13px; color:var(--slate);
  transition:all .35s var(--ease);
}
.chip input:checked + span{ background:var(--green); border-color:var(--green); color:#fff; }

.kpis{ display:grid; gap:9px; }
.kpis div{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:9px; }
.kpis input{
  padding:9px 12px; font-size:14px; font-family:var(--fuente); border:1px solid var(--linea);
  border-radius:var(--r-chico); background:var(--paper); width:100%;
}

.subida{ display:grid; gap:10px; }
.subida__actual{
  display:flex; align-items:center; gap:14px; padding:12px;
  border:1px solid var(--linea-suave); border-radius:var(--r-chico); background:var(--paper);
}
.subida__actual img{ width:86px; height:44px; object-fit:contain; }
.subida__doc{
  display:grid; place-items:center; width:46px; height:46px; border-radius:var(--r-chico);
  background:var(--green); color:#fff; font-size:11px; font-weight:700;
}
.subida__actual b{ display:block; font-size:13.5px; word-break:break-all; }
.subida__actual small{ display:block; color:var(--suave); font-size:12px; }
.subida input[type=file]{ font-size:13px; color:var(--slate); }

.acciones{ display:flex; gap:10px; align-items:center; margin-top:24px; flex-wrap:wrap; }
.peligro{ margin-top:44px; padding-top:22px; border-top:1px solid var(--linea); }

/* ── Botones ─────────────────────────────────────────────────────── */
.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 20px; border-radius:99px; border:1px solid transparent;
  font-family:var(--fuente); font-size:14px; font-weight:650; cursor:pointer;
  background:var(--ink); color:var(--paper);
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.bt:hover{ transform:translateY(-1px); }
.bt:active{ transform:scale(.98); }
.bt--verde{ background:var(--green); }
.bt--verde:hover{ background:var(--verde-vivo); }
.bt--full{ width:100%; margin-top:8px; padding:12px; }
.bt--fino{ background:transparent; color:var(--slate); border-color:var(--linea); font-weight:600; padding:8px 15px; font-size:13.5px; }
.bt--fino:hover{ background:rgba(17,17,17,.05); color:var(--ink); }
.bt--peligro{ background:transparent; color:var(--rojo); border-color:rgba(158,59,42,.34); }
.bt--peligro:hover{ background:var(--rojo-suave); }

/* ── Mensajes recibidos ──────────────────────────────────────────── */
.mensaje{
  background:var(--panel); border:1px solid var(--linea-suave); border-radius:var(--r);
  padding:20px 22px; margin-top:14px; box-shadow:var(--sombra);
}
.mensaje.nuevo{ border-left:3px solid var(--green); }
.mensaje header{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.mensaje header b{ font-size:15px; }
.mensaje header small{ display:block; color:var(--suave); font-size:12.5px; margin-top:2px; }
.mensaje__acciones{ display:flex; gap:8px; }
.mensaje__acciones form{ margin:0; }
.mensaje p{ margin-top:14px; color:var(--slate); line-height:1.6; }
.mensaje footer{ margin-top:14px; padding-top:12px; border-top:1px solid var(--linea-suave); font-size:13px; }
.mensaje footer a{ color:var(--green); font-weight:600; }

/* ── Pantalla chica ──────────────────────────────────────────────── */
@media (max-width:860px){
  .marco{ grid-template-columns:minmax(0,1fr); }
  .lateral{
    position:static; height:auto; border-right:0; border-bottom:1px solid var(--linea);
    display:flex; gap:6px; overflow-x:auto; padding:12px;
  }
  .lateral__titulo{ display:none; }
  .lateral__item{ white-space:nowrap; }
  .rejilla{ grid-template-columns:minmax(0,1fr); }
  .kpis div{ grid-template-columns:minmax(0,1fr); }
}