/* Huecobarber — panel del fundador.
   Mismos tokens/paleta que web/css/style.css (sistema visual compartido),
   copiados aquí porque panel/ es un despliegue de Cloudflare Pages
   independiente de web/ (no puede enlazar sus archivos por ruta relativa
   entre dos proyectos distintos). Sin dependencias externas de fuentes:
   fuente de sistema, para no duplicar los .woff2 en este despliegue. */

:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --navy:#0f2236;
  --navy-light:#1c3b57;
  --cream:#f6f1e7;
  --paper:#ffffff;
  --red:#c8372d;
  --red-dark:#9c2a22;
  --ink:#15202b;
  --muted:#5a6472;
  --border:rgba(15,34,54,.14);
  --card:#ffffff;
  --shadow:0 6px 18px rgba(15,34,54,.09);

  --bg:var(--cream);
  --text:var(--ink);
  --accent:var(--red);

  --radius:14px;
  --radius-lg:18px;
  --maxw:1100px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c1c2c;
    --text:#f3efe6;
    --muted:#aab4c0;
    --border:rgba(246,241,231,.16);
    --card:#122b40;
    --shadow:0 6px 20px rgba(0,0,0,.35);
    --red:#e2473c;
    --red-dark:#b9362d;
  }
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--red-dark); text-decoration:none;}
@media (prefers-color-scheme: dark){ a{color:#ff8a7e;} }
h1,h2{ font-weight:700; }
h1{ font-size:1.4rem; margin:0 0 .3rem; }
h2{ font-size:1.05rem; margin:0 0 .6rem; }
p.muted, .muted{ color:var(--muted); font-size:.92rem; margin:.2rem 0; }
:focus-visible{ outline:3px solid var(--red); outline-offset:2px; border-radius:4px; }

/* ---------- Login ---------- */
.login-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; }
.login-card{
  max-width:360px; width:100%; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.6rem 1.4rem; box-shadow:var(--shadow); text-align:center;
}
.login-card form{ display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; text-align:left; }
.login-card label{ font-size:.85rem; font-weight:600; }

/* ---------- Botones/forms ---------- */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--red); color:#fff; font-weight:700; font-size:.85rem;
  padding:.65rem 1rem; border-radius:999px; border:2px solid var(--red);
  cursor:pointer; min-height:40px;
}
.cta.secondary{ background:transparent; color:var(--text); border-color:var(--border); }
.cta.secondary:hover{ border-color:var(--red); color:var(--red); }
.cta.small{ font-size:.78rem; padding:.45rem .8rem; min-height:34px; }
.cta.block{ width:100%; }

input, select, textarea{
  font-family:inherit; font-size:.92rem; padding:.55rem .6rem; border-radius:8px;
  border:1px solid var(--border); background:var(--card); color:var(--text); width:100%;
}
label{ display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; }
label.checkbox{ flex-direction:row; align-items:center; gap:.4rem; font-weight:500; }
label.checkbox input{ width:auto; }

.form-accion{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; margin-bottom:.9rem; }
.form-accion input, .form-accion select{ flex:1 1 140px; }

/* ---------- Nav ---------- */
#app-nav{ background:var(--navy); color:var(--cream); }
.app-nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:.7rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.app-brand{ font-weight:700; color:var(--cream); font-size:1.05rem; }
.app-links{ display:flex; gap:.9rem; flex:1; flex-wrap:wrap; }
.app-links a{ color:#c9d3dd; font-size:.88rem; font-weight:600; }
.app-links a.activo{ color:#fff; border-bottom:2px solid var(--red); }

/* ---------- Layout general de la app ---------- */
.wrap-app{ max-width:var(--maxw); margin:0 auto; padding:1.2rem 1rem 3rem; }
.volver{ display:inline-block; margin-bottom:.8rem; font-weight:600; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow); }

.filtros{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-end; margin:1rem 0; }
.filtros label{ min-width:140px; }

/* ---------- Kanban ---------- */
.kanban{
  display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem; -webkit-overflow-scrolling:touch;
}
.kanban-col{
  flex:0 0 240px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); display:flex; flex-direction:column; max-height:75vh;
}
.kanban-col header{ display:flex; justify-content:space-between; align-items:center; padding:.7rem .8rem; border-bottom:1px solid var(--border); }
.kanban-col header h2{ margin:0; font-size:.88rem; }
.kanban-count{ background:var(--border); border-radius:999px; padding:.1rem .5rem; font-size:.78rem; font-weight:700; }
.kanban-conv-linea{ padding:0 .8rem; margin:.3rem 0 0; font-size:.76rem; }
.kanban-conv{ font-weight:700; }
.kanban-col-body{ padding:.6rem; overflow-y:auto; display:flex; flex-direction:column; gap:.6rem; }
.kanban-card{
  display:block; background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:.6rem .7rem; color:var(--text);
}
.kanban-card strong{ display:block; font-size:.9rem; }
.kanban-card .muted{ display:block; font-size:.78rem; }
.badge{ display:inline-block; font-size:.68rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; margin:.3rem .3rem 0 0; }
.badge-alerta{ background:var(--red); color:#fff; }
.badge-bloqueado{ background:#e3a01c; color:#241a00; }
.badge-david{ background:var(--navy); color:var(--cream); }

@media(min-width:720px){
  .kanban{ flex-wrap:wrap; overflow-x:visible; }
  .kanban-col{ flex:1 1 200px; max-height:none; }
}

/* ---------- Ficha de lead ---------- */
.ficha-grid{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1rem; }
@media(min-width:860px){ .ficha-grid{ grid-template-columns:1fr 1fr; } }
dl{ display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; margin:.5rem 0 1rem; font-size:.9rem; }
dt{ color:var(--muted); font-weight:600; }
dd{ margin:0; }

.mensajes{ list-style:none; margin:0; padding:0; max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:.5rem; }
.mensajes li{ padding:.5rem .65rem; border-radius:10px; max-width:85%; }
.mensajes li.mensaje-cliente{ background:var(--border); align-self:flex-start; }
.mensajes li.mensaje-nosotros{ background:var(--red); color:#fff; align-self:flex-end; }
.mensajes .autor{ display:block; font-size:.68rem; text-transform:uppercase; opacity:.75; }
.mensajes time{ display:block; font-size:.68rem; opacity:.65; margin-top:.2rem; }

.timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; max-height:420px; overflow-y:auto; }
.timeline li{ border-left:3px solid var(--border); padding-left:.6rem; }
.timeline pre{ font-size:.72rem; white-space:pre-wrap; word-break:break-word; color:var(--muted); margin:.2rem 0 0; }

/* ---------- Tablas (métricas, canales) ---------- */
table{ width:100%; border-collapse:collapse; margin:.8rem 0; font-size:.88rem; }
th, td{ text-align:left; padding:.5rem .4rem; border-bottom:1px solid var(--border); vertical-align:top; }
th{ color:var(--muted); font-weight:600; }

.metric-cards{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin:1rem 0; }
.metric-cards .card{ text-align:center; }
.metric-cards .num{ font-size:1.6rem; font-weight:700; }

.canal-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:.8rem; flex-wrap:wrap; }
details > summary{ cursor:pointer; font-weight:600; margin:.8rem 0 .4rem; }
/* La tabla de campañas no se puede encoger a 375px (7 columnas + acciones): en vez de
   desbordar la página entera, solo ESTE contenedor desplaza en horizontal. */
.tabla-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabla-campanas{ font-size:.82rem; min-width:620px; }
.acciones-campana{ display:flex; gap:.4rem; flex-wrap:wrap; }
.form-nueva-campana{ margin-top:.6rem; }

.aviso{
  background:rgba(227,160,28,.15); border:1px solid #e3a01c; color:var(--text);
  border-radius:var(--radius); padding:.7rem .9rem; font-size:.88rem; margin:.8rem 0;
}

.estado-pill{ display:inline-block; font-size:.72rem; font-weight:700; padding:.15rem .55rem; border-radius:999px; }
.estado-draft{ background:var(--border); }
.estado-active{ background:#2e7d32; color:#fff; }
.estado-paused{ background:#e3a01c; color:#241a00; }
.estado-finished{ background:var(--muted); color:#fff; }