/* ═══════════════════════════════════════════════════════════
   CORDEL — Panel de gestión (admin.html)
   ═══════════════════════════════════════════════════════════ */

:root{
  --brand:#1FA9BE; --brand-500:#34B7CD; --brand-300:#7BE0EE; --brand-100:#D6F5FA;
  --brand-700:#0E7A8C; --brand-800:#0B6B7D; --brand-900:#063A45;
  --ink:#08262C; --ink-2:#3B5A61; --ink-3:#6F8B92;
  --line:#E2EEF1; --bg:#F3FAFC; --surface:#FFFFFF;
  --ok:#16A34A; --warn:#B45309; --bad:#D9481F;
  --radius:16px;
  --shadow:0 2px 10px rgba(8,38,44,.07);
  --shadow-lg:0 24px 60px -24px rgba(8,38,44,.35);
  --font-d:"Outfit","Segoe UI",system-ui,sans-serif;
  --font-b:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  /* Marca de gráficas: contraste validado >= 3:1 sobre superficie clara */
  --mark:#0E7A8C; --mark-soft:#D6F5FA; --grid:#EDF6F8;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-b); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-d); margin:0; line-height:1.15; letter-spacing:-.02em; }
button{ font:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; }
a{ color:var(--brand-700); }
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:6px; }

/* ── Acceso ─────────────────────────────────────────────── */
.acceso{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1.5rem;
  background:linear-gradient(160deg,var(--brand-900),var(--brand-800) 60%,var(--brand-700));
}
/* Menos aire abajo: el hueco del mensaje de error ya está reservado */
.acceso__caja{
  width:min(100%,420px); background:var(--surface); border-radius:24px; padding:2rem 2rem 1.3rem;
  box-shadow:var(--shadow-lg); text-align:center;
}
.acceso__caja img{ width:64px; height:64px; border-radius:18px; margin:0 auto 1rem; display:block; }
.acceso__caja h1{ font-size:1.4rem; margin-bottom:.3rem; }
.acceso__caja p{ color:var(--ink-3); font-size:.9rem; margin:0 0 1.3rem; }
.acceso__caja input{
  width:100%; padding:.9rem 1rem; border:2px solid var(--line); border-radius:12px; margin-bottom:.8rem;
  text-align:center; letter-spacing:.1em;
}
.acceso__caja input:focus{ outline:0; border-color:var(--brand); }
.acceso__error{ color:var(--bad); font-size:.86rem; min-height:1.3em; margin:.6rem 0 0; font-weight:600; }

/* ── Estructura ─────────────────────────────────────────── */
.app{ display:none; min-height:100vh; grid-template-rows:auto 1fr; }
.app.is-on{ display:grid; }

.barra{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:1rem;
  padding:.7rem 1.2rem; background:var(--surface); border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.barra__marca{ display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.barra__marca img{ width:38px; height:38px; border-radius:12px; }
.barra__marca strong{ font-family:var(--font-d); font-size:.98rem; letter-spacing:.1em; display:block; }
.barra__marca small{ font-size:.72rem; color:var(--ink-3); }
.tabs{ display:flex; gap:.3rem; background:var(--bg); padding:.3rem; border-radius:100px; }
.tab{
  border:0; background:transparent; padding:.5rem 1.1rem; border-radius:100px;
  font-family:var(--font-d); font-weight:600; font-size:.9rem; color:var(--ink-2);
  transition:background .25s, color .25s;
}
.tab.is-on{ background:var(--brand-700); color:#fff; }
.tab:hover:not(.is-on){ background:var(--brand-100); color:var(--brand-800); }

/* min-width:0 — .contenido es ítem de grid de .app; con min-width:auto
   el ancho intrínseco de los SVG la estiraba y desbordaba la página */
.contenido{ padding:1.4rem; max-width:1180px; margin-inline:auto; width:100%; min-width:0; }
.panel{ display:none; }
.panel.is-on{ display:block; animation:entra .35s cubic-bezier(.16,1,.3,1); }
@keyframes entra{ from{ opacity:0; transform:translateY(10px); } }

.btn{
  display:inline-flex; align-items:center; gap:.45rem; border:0; border-radius:100px;
  padding:.7rem 1.3rem; background:var(--brand-700); color:#fff;
  font-family:var(--font-d); font-weight:600; font-size:.92rem;
  transition:transform .25s, box-shadow .25s, background .25s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(14,122,140,.8); }
.btn--fantasma{ background:transparent; color:var(--brand-800); box-shadow:inset 0 0 0 2px var(--line); }
.btn--fantasma:hover{ box-shadow:inset 0 0 0 2px var(--brand-300); background:var(--brand-100); }
.btn--peligro{ background:var(--bad); }
.btn--sm{ padding:.45rem .9rem; font-size:.84rem; }

/* ── Tarjetas ───────────────────────────────────────────── */
.caja{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem; margin-bottom:1rem; box-shadow:var(--shadow);
}
.caja > h2{ font-size:1.1rem; margin-bottom:.25rem; }
.caja > .ayuda{ color:var(--ink-3); font-size:.86rem; margin:0 0 1.1rem; }

.rejilla{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.campo{ display:grid; gap:.3rem; }
.campo > label{ font-size:.82rem; font-weight:600; color:var(--ink-2); }
.campo input,.campo select,.campo textarea{
  padding:.65rem .8rem; border:2px solid var(--line); border-radius:10px; background:var(--surface);
  color:var(--ink); width:100%; resize:vertical;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:0; border-color:var(--brand); }
.campo--ancho{ grid-column:1/-1; }

/* Servicios */
.serv{
  display:grid; grid-template-columns:150px 1fr; gap:1rem; padding:1rem 0;
  border-top:1px dashed var(--line);
}
.serv:first-of-type{ border-top:0; padding-top:.3rem; }
.serv__foto{ position:relative; }
.serv__foto img{
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px;
  background:var(--brand-100); display:block;
}
.serv__foto small{ display:block; margin-top:.35rem; font-size:.72rem; color:var(--ink-3); word-break:break-all; }
.serv__campos{ display:grid; gap:.7rem; grid-template-columns:1fr 1fr; }
/* Fila de precios de la agenda: nombre fijo, precio ancho, duración corta */
.serv--precio{ grid-template-columns:1fr; }
.serv__campos--precio{ grid-template-columns:1.4fr 2fr 1fr; }

/* Listas editables */
.item{
  position:relative; padding:1rem; border:1px solid var(--line); border-radius:12px;
  margin-bottom:.7rem; background:var(--bg);
}
.item__quitar{
  position:absolute; top:.6rem; right:.6rem; width:28px; height:28px; border:0; border-radius:8px;
  background:#FFECE7; color:var(--bad); font-weight:700; line-height:1;
}
.item__quitar:hover{ background:var(--bad); color:#fff; }

/* Barra de guardado */
.guardar{
  position:sticky; bottom:0; z-index:15; display:flex; align-items:center; gap:.8rem;
  padding:.9rem 1.2rem; margin:1.2rem -1.4rem -1.4rem; flex-wrap:wrap;
  background:var(--surface); border-top:1px solid var(--line);
}
.guardar__estado{ margin-right:auto; font-size:.86rem; color:var(--ink-3); }
.guardar__estado.ok{ color:var(--ok); font-weight:600; }
.guardar__estado.err{ color:var(--bad); font-weight:600; }

/* ── Avisos ─────────────────────────────────────────────── */
.aviso{
  display:flex; gap:.7rem; padding:.9rem 1.1rem; border-radius:12px; font-size:.87rem;
  margin-bottom:1rem; line-height:1.55;
}
.aviso b{ display:block; margin-bottom:.15rem; }
.aviso--info{ background:var(--brand-100); color:var(--brand-900); }
.aviso--ojo{ background:#FFF7ED; color:#7C2D12; }
.aviso__ico{ flex:none; font-size:1.1rem; }

/* ── Métricas: tarjetas de cifra ────────────────────────── */
.kpis{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin-bottom:1rem; }
.kpi{
  min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.2rem; box-shadow:var(--shadow);
}
.kpi__etq{ font-size:.78rem; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.kpi__num{ font-family:var(--font-d); font-size:2.1rem; font-weight:800; line-height:1.1; margin:.35rem 0 .1rem; }
.kpi__pie{ font-size:.8rem; color:var(--ink-3); }
.kpi--destaca .kpi__num{ color:var(--brand-700); }

/* Filtros en una fila arriba de las gráficas */
.filtros{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.filtros__etq{ font-size:.84rem; color:var(--ink-2); font-weight:600; margin-right:.2rem; }
.chip{
  border:1px solid var(--line); background:var(--surface); padding:.45rem .9rem; border-radius:100px;
  font-size:.85rem; font-weight:600; color:var(--ink-2); transition:all .2s;
}
.chip.is-on{ background:var(--brand-700); border-color:var(--brand-700); color:#fff; }
.chip:hover:not(.is-on){ border-color:var(--brand-300); }

/* ── Gráficas ───────────────────────────────────────────── */
.graficas{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
/* min-width:0 — sin esto el SVG ancho estira la columna del grid
   (min-width:auto es el valor por defecto) y desborda la página */
.gr{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); min-width:0; }
.gr__cab{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.2rem; }
.gr__cab h3{ font-size:1rem; }
.gr__sub{ font-size:.82rem; color:var(--ink-3); margin:0 0 1rem; }
.gr__lienzo{ position:relative; overflow-x:auto; min-width:0; }
.gr svg{ display:block; width:100%; height:auto; overflow:visible; }
.gr__vacio{ padding:2rem 1rem; text-align:center; color:var(--ink-3); font-size:.88rem; }

.eje{ fill:var(--ink-3); font-size:11px; font-family:var(--font-b); }
.valor{ fill:var(--ink); font-size:11.5px; font-weight:700; font-family:var(--font-d); }
.malla{ stroke:var(--grid); stroke-width:1; }
.marca{ fill:var(--mark); transition:opacity .2s; }
.marca-suave{ fill:var(--mark-soft); }
.gr:hover .marca{ opacity:.82; }
.marca:hover{ opacity:1 !important; }

.pista{
  position:absolute; pointer-events:none; z-index:5; padding:.5rem .7rem; border-radius:10px;
  background:var(--brand-900); color:#fff; font-size:.8rem; line-height:1.4; white-space:nowrap;
  opacity:0; transform:translate(-50%,-115%); transition:opacity .15s;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
.pista.is-on{ opacity:1; }
.pista b{ font-family:var(--font-d); }

/* Vista de tabla — con scroll propio: en móvil 5 columnas no caben
   y sin esto desbordaban la página entera */
#tablaCitas{ overflow-x:auto; }
#tablaCitas .tabla{ min-width:520px; }
.tabla{ width:100%; border-collapse:collapse; font-size:.86rem; margin-top:.3rem; }
.tabla th,.tabla td{ text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); }
.tabla th{ font-family:var(--font-d); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.tabla td:last-child,.tabla th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
[hidden]{ display:none !important; }

/* ── Ayuda ──────────────────────────────────────────────── */
.pasos{ counter-reset:p; list-style:none; padding:0; margin:0; }
.pasos li{ position:relative; padding:0 0 1.1rem 2.4rem; counter-increment:p; }
.pasos li::before{
  content:counter(p); position:absolute; left:0; top:.05rem; width:26px; height:26px;
  border-radius:50%; background:var(--brand-700); color:#fff; display:grid; place-items:center;
  font-family:var(--font-d); font-weight:700; font-size:.82rem;
}
.pasos strong{ display:block; }
.pasos span{ color:var(--ink-2); font-size:.9rem; }
code{ background:var(--brand-100); color:var(--brand-900); padding:.1rem .4rem; border-radius:6px; font-size:.88em; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:760px){
  .barra{ padding:.6rem .9rem; }
  .barra__marca small{ display:none; }
  .tabs{ order:3; width:100%; justify-content:center; }
  .contenido{ padding:1rem .9rem; }
  .serv{ grid-template-columns:1fr; }
  .serv__campos,.serv__campos--precio{ grid-template-columns:1fr; }
  .guardar{ margin:1.2rem -.9rem -1rem; }
  .kpi__num{ font-size:1.8rem; }
}