/* Gestor AMZ360 — hoja de estilos del panel.
   Misma identidad que el sitio: tipografías OFL autoalojadas y los tokens de
   color de site/assets/css/styles.css. Lateral en tinta, contenido en papel. */

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/publico/fuentes/dm-sans-latin-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/publico/fuentes/fraunces-latin-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/publico/fuentes/syne-latin-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/publico/fuentes/jetbrains-mono-latin-normal-500.woff2') format('woff2'); }

:root{
  --ink:#0A1626; --navy-900:#081323; --navy:#0C1F38; --navy-700:#13263F;
  --navy-600:#1C3A5E; --navy-500:#2C5180;
  --gold:#E2A33C; --gold-soft:#F3D9A6; --orange:#F0791E; --orange-600:#DA640E;
  --paper:#F7F3EC; --paper-2:#FBF8F2; --white:#FFFFFF;
  --body:#43536A; --muted:#6E7C90; --muted-on-dark:#A7B6CC; --faint-on-dark:#7C8DA6;
  --line:rgba(10,22,38,.10); --line-2:rgba(10,22,38,.16);
  --line-dark:rgba(255,255,255,.12);
  --green:#3BA776; --green-bg:#E7F5EE; --red:#B23F2D; --red-bg:#FBE9E5;
  --amber:#D6962F; --amber-bg:#FBF0D8;
  --sans:'DM Sans', system-ui, sans-serif;
  --serif:'Fraunces', Georgia, serif;
  --display:'Syne', var(--sans);
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; }
body{ font-family:var(--sans); color:var(--body); background:var(--paper); line-height:1.55; }
a{ color:var(--navy-600); }
h1,h2,h3{ font-family:var(--serif); color:var(--ink); font-weight:400; line-height:1.2; }
code,pre,.mono{ font-family:var(--mono); font-size:.85em; }

/* ---- Estructura --------------------------------------------------------- */
.marco{ display:flex; min-height:100vh; }
.lateral{
  width:232px; flex-shrink:0; background:var(--navy-900); color:var(--muted-on-dark);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.contenido{ flex:1; min-width:0; padding:2rem 2.5rem 4rem; max-width:1200px; }

.marca{ padding:1.5rem 1.4rem 1.2rem; border-bottom:1px solid var(--line-dark); }
.marca-logo{ font-family:var(--display); font-weight:600; font-size:1.35rem; color:var(--white); letter-spacing:.02em; }
.marca-logo b{ color:var(--gold); font-weight:600; }
.marca-logo.grande{ font-size:2rem; }
.marca-sub{ display:block; font-size:.75rem; color:var(--faint-on-dark); letter-spacing:.08em; text-transform:uppercase; margin-top:.25rem; }

.menu{ padding:.9rem .7rem; display:flex; flex-direction:column; gap:2px; flex:1; }
.menu-item{
  display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem;
  color:var(--muted-on-dark); text-decoration:none; border-radius:8px; font-size:.95rem;
}
.menu-item svg{ width:17px; height:17px; fill:currentColor; opacity:.75; }
.menu-item:hover{ background:var(--navy-700); color:var(--white); }
.menu-item.activa{ background:var(--navy-700); color:var(--gold); }
.menu-item.activa svg{ opacity:1; }

.lateral-pie{ padding:1rem 1.4rem 1.3rem; border-top:1px solid var(--line-dark); display:flex; flex-direction:column; gap:.6rem; }
.enlace-sitio{ color:var(--muted-on-dark); font-size:.85rem; text-decoration:none; }
.enlace-sitio:hover{ color:var(--white); }
.salir{ background:none; border:1px solid var(--line-dark); color:var(--muted-on-dark);
  padding:.35rem .8rem; border-radius:7px; cursor:pointer; font:inherit; font-size:.82rem; }
.salir:hover{ color:var(--white); border-color:var(--faint-on-dark); }

/* ---- Cabecera de panel -------------------------------------------------- */
.cabecera-panel{ margin-bottom:1.6rem; }
.cabecera-panel h1{ font-size:1.9rem; }
.cabecera-panel .sub{ color:var(--muted); margin-top:.3rem; }

/* ---- Tarjetas y rejillas ------------------------------------------------ */
.tarjeta{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:1.3rem 1.5rem; }
.tarjeta + .tarjeta{ margin-top:1.2rem; }
.tarjeta h2{ font-size:1.15rem; margin-bottom:.9rem; }
.rejilla{ display:grid; gap:1.2rem; }
.rejilla.c2{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla.c4{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }

/* Fichas de dato (número gordo + rótulo) */
.ficha{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; }
.ficha .rotulo{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ficha .valor{ font-family:var(--serif); font-size:1.75rem; color:var(--ink); margin-top:.15rem; }
.ficha .detalle{ font-size:.82rem; color:var(--muted); margin-top:.2rem; }

/* ---- Estados ------------------------------------------------------------ */
.chip{ display:inline-block; padding:.13rem .6rem; border-radius:99px; font-size:.78rem; font-weight:600; }
.chip.ok{ background:var(--green-bg); color:var(--green); }
.chip.mal{ background:var(--red-bg); color:var(--red); }
.chip.aviso{ background:var(--amber-bg); color:var(--amber); }
.chip.neutro{ background:var(--paper); color:var(--muted); }

.aviso-error{ background:var(--red-bg); color:var(--red); padding:.6rem .9rem; border-radius:8px; margin:.8rem 0; font-size:.92rem; }
.aviso-ok{ background:var(--green-bg); color:var(--green); padding:.6rem .9rem; border-radius:8px; margin:.8rem 0; font-size:.92rem; }
.aviso-info{ background:var(--amber-bg); color:#8a5f14; padding:.6rem .9rem; border-radius:8px; margin:.8rem 0; font-size:.92rem; }

/* ---- Tablas ------------------------------------------------------------- */
.tabla-envoltura{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th{ text-align:left; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  padding:.5rem .7rem; border-bottom:2px solid var(--line-2); white-space:nowrap; }
td{ padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td{ border-bottom:none; }

/* ---- Formularios y botones ---------------------------------------------- */
label{ display:block; font-size:.85rem; color:var(--ink); font-weight:600; margin-bottom:.3rem; }
input[type=text], input[type=password], select, textarea{
  width:100%; padding:.55rem .7rem; border:1px solid var(--line-2); border-radius:8px;
  font:inherit; color:var(--ink); background:var(--white);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; }

.boton{
  display:inline-block; font:inherit; font-weight:600; font-size:.92rem; cursor:pointer;
  padding:.55rem 1.1rem; border-radius:8px; border:1px solid var(--line-2);
  background:var(--white); color:var(--ink); text-decoration:none;
}
.boton:hover{ border-color:var(--navy-500); }
.boton.primario{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.boton.primario:hover{ background:var(--navy-700); }
.boton.peligro{ background:var(--red); border-color:var(--red); color:var(--white); }
.boton.peligro:hover{ background:#9a3626; }
.boton.ancho{ width:100%; }
.boton:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- Login -------------------------------------------------------------- */
.fondo-oscuro{ background:var(--navy-900); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.tarjeta-login{ background:var(--white); border-radius:14px; padding:2.3rem 2.5rem; width:100%; max-width:390px; text-align:center; }
.tarjeta-login .marca-logo{ color:var(--ink); }
.tarjeta-login .marca-sub{ color:var(--muted); margin-bottom:1.4rem; }
.tarjeta-login form{ text-align:left; margin-top:1rem; }
.tarjeta-login .boton{ margin-top:1rem; }
.tarjeta-login .nota{ font-size:.78rem; color:var(--muted); margin-top:1.2rem; }

/* ---- Árbol de páginas y editor ------------------------------------------ */
.arbol{ list-style:none; }
.arbol > li{ margin-bottom:.15rem; }
.arbol summary{ cursor:pointer; font-weight:600; color:var(--ink); padding:.3rem 0; }
.arbol a{ display:block; padding:.22rem 0 .22rem 1.2rem; text-decoration:none; font-size:.92rem; }
.arbol a:hover{ color:var(--orange-600); }
.arbol .peso{ color:var(--muted); font-size:.78rem; }

.editor-cabecera{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.editor-cabecera .ruta{ font-family:var(--mono); font-size:.95rem; color:var(--ink); }
.editor-marco{ border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:var(--white); }
.editor-marco .cm-editor{ height:62vh; font-size:13.5px; }
.editor-acciones{ display:flex; gap:.7rem; margin-top:1rem; flex-wrap:wrap; align-items:center; }

.diff{ background:var(--navy-900); color:#D7E1EE; border-radius:10px; padding:1rem 1.2rem;
  overflow-x:auto; font-family:var(--mono); font-size:.8rem; line-height:1.5; white-space:pre; }
.diff .mas{ color:#7CD9A6; } .diff .menos{ color:#F0A090; } .diff .arroba{ color:var(--gold); }

.previsualizacion{ width:100%; height:70vh; border:1px solid var(--line-2); border-radius:10px; background:var(--white); }

/* ---- Gráficos ----------------------------------------------------------- */
.grafico{ width:100%; height:auto; display:block; }
.grafico text{ font-family:var(--sans); }
.leyenda{ display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.82rem; color:var(--muted); margin-top:.5rem; }
.leyenda .punto{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.35rem; vertical-align:-1px; }

/* ---- Detalles ----------------------------------------------------------- */
details.plegable{ border:1px solid var(--line); border-radius:10px; padding:.7rem 1rem; background:var(--white); }
details.plegable summary{ cursor:pointer; font-weight:600; color:var(--ink); }
details.plegable[open]{ padding-bottom:1rem; }

@media (max-width: 860px){
  .marco{ flex-direction:column; }
  .lateral{ width:100%; height:auto; position:static; }
  .menu{ flex-direction:row; flex-wrap:wrap; }
  .contenido{ padding:1.2rem; }
}