:root{
  --ink:#201d1a;
  --dusk:#293d47;
  --dusk-deep:#182229;
  --terracota:#c1602d;
  --terracota-deep:#9c4a20;
  --laton:#b8935a;
  --cal:#f1f4f0;
  --cal-deep:#e4e9e2;
  --verde:#4f7a5e;
  --verde-deep:#3c5f48;
  --white:#ffffff;
  --rojo:#a4432c;
  --font-display:'Fraunces', serif;
  --font-signage:'Oswald', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  font-family:var(--font-body);
  background:var(--cal);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em;}

.page{max-width:1180px; margin:0 auto;}

/* ---------- APP HEADER (hero compacto, mismo lenguaje visual) ---------- */
.app-header{
  position:relative;
  padding:2.4rem 2.5rem 2rem;
  overflow:hidden;
  background:linear-gradient(180deg, var(--dusk-deep) 0%, var(--dusk) 100%);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:1rem;
}
.app-header__content{position:relative; z-index:1;}
.badge-signage{
  display:inline-block;
  font-family:var(--font-signage);
  font-weight:700;
  letter-spacing:0.12em;
  font-size:0.72rem;
  color:var(--white);
  background:var(--terracota);
  padding:0.35rem 0.8rem;
  transform:rotate(-1.5deg);
  box-shadow:0 3px 0 rgba(0,0,0,0.2);
  margin-bottom:0.9rem;
}
.app-header h1{
  font-size:clamp(1.6rem, 3.4vw, 2.2rem);
  color:var(--white);
  margin-bottom:0.3rem;
}
.app-header__sub{
  font-size:0.92rem;
  color:#c7cfc9;
}
.app-header__actions{position:relative; z-index:1; display:flex; align-items:center; gap:0.7rem;}

/* ---------- LAYOUT ---------- */
main{padding:2.2rem 2.5rem 4rem;}
section{padding:2.2rem 0; border-bottom:1px solid var(--cal-deep);}
section:last-of-type{border-bottom:none;}
section h2{font-size:1.5rem; margin-bottom:0.4rem;}
.section-intro{color:#4b4b47; max-width:44rem; margin-bottom:1.4rem; font-size:0.94rem;}

/* ---------- BOTONES ---------- */
.btn{
  font-family:var(--font-signage);
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:0.55rem 1rem;
  border-radius:3px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary{background:var(--terracota); color:var(--white);}
.btn--primary:hover{background:var(--terracota-deep);}
.btn--ghost{background:transparent; border-color:#b9b3a4; color:#5a5a55;}
.btn--ghost:hover{background:var(--ink); color:var(--white); border-color:var(--ink);}
.btn--danger{background:transparent; border-color:var(--rojo); color:var(--rojo);}
.btn--danger:hover{background:var(--rojo); color:var(--white);}
.btn:disabled{opacity:0.5; cursor:not-allowed;}

/* ---------- LOGIN ---------- */
.login-wrap{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.login-box{
  background:var(--white);
  border-radius:6px;
  box-shadow:0 2px 12px rgba(0,0,0,0.1);
  padding:2.4rem 2.2rem;
  width:100%;
  max-width:340px;
}
.login-box h1{font-size:1.5rem; margin-bottom:0.4rem;}
.login-box p{color:#6a6a64; font-size:0.88rem; margin-bottom:1.4rem;}
.login-box input[type="password"]{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  border:1px solid var(--cal-deep);
  border-radius:4px;
  padding:0.65rem 0.8rem;
  margin-bottom:0.9rem;
}
.login-box input[type="password"]:focus{outline:none; border-color:var(--terracota);}
.login-box .btn{width:100%; padding:0.7rem;}
.login-error{color:var(--rojo); font-size:0.85rem; margin-bottom:0.8rem; min-height:1.2em;}

/* ---------- SELECTOR DE SEMANA ---------- */
.week-select{
  font-family:var(--font-signage);
  font-size:0.8rem;
  letter-spacing:0.03em;
  padding:0.5rem 0.7rem;
  border-radius:3px;
  border:1px solid var(--cal-deep);
  background:var(--white);
  color:var(--ink);
}

/* ---------- AVISOS ---------- */
.alert-sin-registro{
  background:#fbeee7;
  border:1px solid var(--terracota);
  border-radius:4px;
  padding:0.9rem 1.1rem;
  margin-bottom:1.4rem;
  font-size:0.9rem;
  color:var(--terracota-deep);
}
.alert-sin-registro strong{color:var(--ink);}
.alert-ok{
  background:#eaf2ec;
  border:1px solid var(--verde);
  border-radius:4px;
  padding:0.9rem 1.1rem;
  margin-bottom:1.4rem;
  font-size:0.9rem;
  color:var(--verde-deep);
}

/* ---------- FICHAS ---------- */
.fichas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.4rem;
  margin-bottom:2.2rem;
}
.ficha{
  background:var(--white);
  border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,0.07);
  overflow:hidden;
}
.ficha--sin-registro{box-shadow:0 0 0 2px var(--terracota), 0 1px 4px rgba(0,0,0,0.07);}
.ficha__strip{height:8px; background:linear-gradient(90deg, var(--terracota) 0%, var(--laton) 100%);}
.ficha__body{padding:1.2rem 1.3rem 1.4rem;}
.ficha__top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.7rem; gap:0.5rem;}
.ficha__ref{
  font-family:var(--font-signage);
  font-size:0.68rem;
  letter-spacing:0.06em;
  color:#8c887e;
  text-transform:uppercase;
}
.ficha__zone{
  font-family:var(--font-signage);
  font-size:0.65rem;
  letter-spacing:0.05em;
  background:var(--dusk);
  color:var(--white);
  padding:0.2rem 0.55rem;
  border-radius:2px;
}
.ficha__zone-input{
  font-family:var(--font-signage);
  font-size:0.65rem;
  letter-spacing:0.05em;
  background:var(--dusk);
  color:var(--white);
  border:none;
  padding:0.2rem 0.55rem;
  border-radius:2px;
  width:6.5rem;
  text-align:right;
}
.ficha__name{
  width:100%;
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:600;
  border:none;
  border-bottom:1px solid transparent;
  background:transparent;
  padding:0.1rem 0 0.3rem;
  margin-bottom:0.8rem;
  color:var(--ink);
}
.ficha__name:focus, .ficha__zone-input:focus{outline:none; border-bottom:1px solid var(--terracota);}
.ficha__specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.7rem 1rem;
  margin-bottom:1rem;
  padding-bottom:1rem;
  border-bottom:1px dashed var(--cal-deep);
}
.spec label{
  display:block;
  font-size:0.68rem;
  color:#8c887e;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:0.2rem;
}
.spec input{
  width:100%;
  font-family:var(--font-body);
  font-weight:600;
  font-size:1.05rem;
  border:none;
  border-bottom:1px solid var(--cal-deep);
  background:transparent;
  padding:0.15rem 0;
  color:var(--ink);
}
.spec input:focus{outline:none; border-bottom:1px solid var(--terracota);}
.ficha__ratios{display:flex; flex-direction:column; gap:0.55rem; margin-bottom:0.6rem;}
.ratio-row{display:flex; align-items:center; gap:0.6rem; font-size:0.78rem;}
.ratio-label{width:6.4rem; color:#5a5a55; flex-shrink:0;}
.ratio-bar{flex:1; height:6px; background:var(--cal-deep); border-radius:3px; overflow:hidden;}
.ratio-fill{height:100%; background:var(--verde); border-radius:3px; transition:width .4s ease;}
.ratio-val{width:2.6rem; text-align:right; font-weight:600; color:var(--ink);}
.ficha__save-state{font-size:0.72rem; color:#8c887e; height:1em;}
.ficha__save-state--ok{color:var(--verde-deep);}

/* ---------- BAR CHART (equipo / tendencia) ---------- */
.team-chart{background:var(--white); border-radius:6px; padding:1.5rem 1.7rem; box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.team-chart h3{font-family:var(--font-signage); font-size:0.88rem; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:1.1rem; color:var(--ink);}
.bar-chart{display:flex; flex-direction:column; gap:0.65rem;}
.bar-row{display:flex; align-items:center; gap:0.8rem;}
.bar-name{width:9rem; font-size:0.83rem; color:#3a3a36; flex-shrink:0;}
.bar-track{flex:1; background:var(--cal-deep); border-radius:3px; height:14px; overflow:hidden;}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--terracota) 0%, var(--laton) 100%); border-radius:3px; transition:width .5s ease;}
.bar-fill--verde{background:linear-gradient(90deg, var(--verde) 0%, var(--verde-deep) 100%);}
.bar-value{width:2rem; text-align:right; font-weight:600; font-size:0.85rem;}

/* ---------- RANKING ---------- */
.ranking-list{list-style:none; counter-reset:puesto;}
.ranking-list li{
  counter-increment:puesto;
  display:flex;
  align-items:center;
  gap:0.9rem;
  padding:0.7rem 0;
  border-top:1px solid var(--cal-deep);
}
.ranking-list li:first-child{border-top:none;}
.ranking-list li::before{
  content:counter(puesto);
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:600;
  color:var(--terracota);
  width:1.6rem;
}
.ranking-nombre{flex:1; font-size:0.92rem;}
.ranking-cierres{font-weight:600; font-family:var(--font-signage); font-size:0.85rem;}

/* ---------- FUNNEL ---------- */
.funnel{display:flex; flex-direction:column; align-items:center; gap:0.5rem; padding:1rem 0;}
.funnel-stage{
  width:100%;
  max-width:640px;
  text-align:center;
  color:var(--white);
  font-family:var(--font-signage);
  letter-spacing:0.04em;
  padding:1rem 1rem;
  border-radius:4px;
  transition:width .5s ease;
}
.funnel-stage .fs-label{font-size:0.72rem; text-transform:uppercase; opacity:0.85;}
.funnel-stage .fs-value{font-size:1.5rem; font-family:var(--font-display); font-weight:600; letter-spacing:0;}
.funnel-stage:nth-child(1){background:var(--dusk);}
.funnel-stage:nth-child(2){background:#5c7684;}
.funnel-stage:nth-child(3){background:var(--verde);}
.funnel-note{font-size:0.82rem; color:#8c887e; margin-top:0.8rem; text-align:center;}

/* ---------- GESTION DE COMERCIALES (admin) ---------- */
.gestion-form{display:flex; gap:0.7rem; flex-wrap:wrap; margin-bottom:1.4rem;}
.gestion-form input{
  font-family:var(--font-body);
  font-size:0.9rem;
  border:1px solid var(--cal-deep);
  border-radius:4px;
  padding:0.55rem 0.8rem;
}
.gestion-form input[name="nombre"]{flex:1; min-width:160px;}
.gestion-form input[name="zona"]{width:160px;}

.gestion-table{width:100%; border-collapse:collapse; font-size:0.88rem;}
.gestion-table th{
  text-align:left;
  font-family:var(--font-signage);
  font-size:0.7rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#8c887e;
  padding:0.5rem 0.6rem;
  border-bottom:1px solid var(--cal-deep);
}
.gestion-table td{padding:0.6rem; border-bottom:1px solid var(--cal-deep); vertical-align:middle;}
.gestion-table tr.inactivo td{opacity:0.5;}
.gestion-table .acciones{display:flex; gap:0.4rem; flex-wrap:wrap;}
.token-link{
  font-family:'Courier New', monospace;
  font-size:0.78rem;
  background:var(--cal);
  padding:0.2rem 0.4rem;
  border-radius:3px;
  word-break:break-all;
}
.estado-pill{
  font-family:var(--font-signage);
  font-size:0.65rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:0.2rem 0.5rem;
  border-radius:2px;
}
.estado-pill--activo{background:#eaf2ec; color:var(--verde-deep);}
.estado-pill--inactivo{background:#f0e6e1; color:var(--terracota-deep);}

/* ---------- COMERCIAL: SU FICHA + TENDENCIA ---------- */
.mi-ficha-wrap{max-width:420px; margin:0 auto 2.2rem;}
.trend-wrap{max-width:640px; margin:0 auto;}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;
  bottom:1.4rem;
  right:1.4rem;
  background:var(--ink);
  color:var(--white);
  font-size:0.85rem;
  padding:0.7rem 1.1rem;
  border-radius:4px;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  z-index:100;
}
.toast.is-visible{opacity:1; transform:translateY(0);}

@media (max-width:760px){
  .app-header{padding:1.8rem 1.2rem 1.6rem;}
  main{padding:1.6rem 1.2rem 3rem;}
  .fichas-grid{grid-template-columns:1fr;}
  .gestion-table{display:block; overflow-x:auto;}
}