:root {
  --tinta: #1c1b19; --suave: #5d5850; --linea: #e3ded5; --fondo: #faf8f5;
  --papel: #ffffff; --acento: #16564a; --aviso: #a3341f; --oro: #8a6410;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%; }
a { color: var(--acento); }
.envoltura { max-width: 46rem; margin: 0 auto; padding: 0 1rem 4rem; }

header.barra { background: var(--tinta); color: #f6f2ec; position: sticky; top: 0;
  z-index: 10; }
header.barra .envoltura { display: flex; align-items: center; gap: 1rem;
  padding-top: .6rem; padding-bottom: .6rem; }
header.barra a { color: #f6f2ec; text-decoration: none; }
.marca { font-weight: 700; letter-spacing: .02em; margin-right: auto; }
.marca small { display: block; font-weight: 400; font-size: .68rem; opacity: .6;
  letter-spacing: .08em; text-transform: uppercase; }
nav.barra { display: flex; gap: .1rem; overflow-x: auto; }
nav.barra a { padding: .45rem .7rem; border-radius: 999px; font-size: .92rem;
  white-space: nowrap; }
nav.barra a.aqui { background: rgba(255,255,255,.16); }
.quien { font-size: .8rem; opacity: .65; white-space: nowrap; }

h1 { font-size: 1.6rem; line-height: 1.2; margin: 1.4rem 0 .3rem; }
h2 { font-size: 1.05rem; margin: 2rem 0 .6rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--suave); }
h3 { font-size: 1.05rem; margin: 0 0 .2rem; }
p { margin: .5rem 0; }
.sub { color: var(--suave); margin-top: 0; }

.tarjeta { background: var(--papel); border: 1px solid var(--linea);
  border-radius: 10px; padding: 1rem 1.1rem; margin: .7rem 0; }
.tarjeta.destaca { border-left: 4px solid var(--aviso); }
a.tarjeta { display: block; text-decoration: none; color: inherit; }
a.tarjeta:hover { border-color: var(--acento); }

.chip { display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; padding: .18rem .5rem; border-radius: 4px;
  margin: .15rem .25rem .15rem 0; text-transform: uppercase; }
.chip.neutro { background: #efeae2; color: var(--suave); }
.chip.verde  { background: #dcece6; color: var(--acento); }
.chip.oro    { background: #f6ecd2; color: var(--oro); }
.chip.aviso  { background: #f7dfd8; color: var(--aviso); }
.chip.azul   { background: #dee6f2; color: #274a77; }
.chip.fiesta { background: #f2e2ef; color: #6d2a63; }

.cifras { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: .9rem 0; }
.cifra b { display: block; font-size: 1.5rem; line-height: 1.1; }
.cifra span { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--suave); }

.relato p { margin: .35rem 0; }
.relato .accion { font-weight: 600; color: var(--acento); }
.relato .peligro { color: var(--aviso); font-weight: 600; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .72rem; letter-spacing: .07em; color: var(--suave);
  text-transform: uppercase; border-bottom: 1px solid var(--linea); padding: .4rem .3rem; }
td { padding: .5rem .3rem; border-bottom: 1px solid var(--linea);
  vertical-align: top; }
td.n { text-align: right; white-space: nowrap; }
.evento { display: block; font-size: .8rem; color: var(--oro); }

form.buscador { display: flex; gap: .5rem; margin: 1rem 0; }
input[type=text], input[type=password] { flex: 1; font: inherit; padding: .7rem .8rem;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--papel);
  color: inherit; min-width: 0; }
input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
button { font: inherit; font-weight: 600; padding: .7rem 1.2rem; border: 0;
  border-radius: 8px; background: var(--acento); color: #fff; cursor: pointer; }
label { display: block; font-size: .8rem; letter-spacing: .05em; color: var(--suave);
  text-transform: uppercase; margin: .9rem 0 .25rem; }

.nota { background: #fbf6e9; border: 1px solid #ecdcb8; border-radius: 8px;
  padding: .7rem .9rem; font-size: .9rem; color: #6b5314; margin: 1rem 0; }
.nota.mal { background: #fdefec; border-color: #f0cabe; color: var(--aviso); }
.vacio { color: var(--suave); font-style: italic; }
.pie { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linea);
  font-size: .8rem; color: var(--suave); }

.entrar { max-width: 22rem; margin: 5rem auto; }
.entrar form { background: var(--papel); border: 1px solid var(--linea);
  border-radius: 10px; padding: 1.2rem; }
.entrar button { width: 100%; margin-top: 1.2rem; }

/* El panel: barras sin estilos en línea (la CSP los prohíbe: el ancho va en
   clases b0..b20, de 5 en 5 puntos) y la acción de cada oportunidad. */
.fila-barra { display: flex; align-items: center; gap: .6rem; margin: .25rem 0; }
.fila-barra .eti { width: 4.2rem; font-size: .78rem; color: var(--suave);
  text-align: right; white-space: nowrap; }
.fila-barra .pista { flex: 1; height: .95rem; background: #efeae2;
  border-radius: 4px; overflow: hidden; }
.fila-barra .lleno { display: block; height: 100%; background: var(--acento);
  border-radius: 4px; }
.fila-barra .dato { width: 7.5rem; font-size: .8rem; white-space: nowrap; }
.b0{width:0}.b1{width:5%}.b2{width:10%}.b3{width:15%}.b4{width:20%}
.b5{width:25%}.b6{width:30%}.b7{width:35%}.b8{width:40%}.b9{width:45%}
.b10{width:50%}.b11{width:55%}.b12{width:60%}.b13{width:65%}.b14{width:70%}
.b15{width:75%}.b16{width:80%}.b17{width:85%}.b18{width:90%}.b19{width:95%}
.b20{width:100%}
.accion { font-weight: 600; color: var(--acento); }
.respuesta.doc { margin: 1rem 0; }
.respuesta.doc table { margin: .6rem 0 1rem; }

/* El cuadro de mandos: la variación contra el año pasado, con su flecha. */
.delta { display: block; font-size: .78rem; color: var(--suave); margin-top: .1rem; }
.delta.sube { color: var(--acento); }
.delta.baja { color: var(--aviso); }
td .delta, th .delta { display: inline; }

/* El chat de consultas: la pregunta a la derecha con el acento, la respuesta
   como texto normal, y el SQL plegado para quien quiera mirarlo. */
.pregunta { background: #eaf2ef; border: 1px solid #cfe0da; border-radius: 10px;
  padding: .8rem 1rem; margin: 1.2rem 0 .6rem 15%; }
.respuesta { margin: .6rem 15% 1.2rem 0; }
.respuesta ul { margin: .4rem 0; padding-left: 1.3rem; }
details.sql { margin: .4rem 15% .4rem 0; font-size: .85rem; }
details.sql summary { cursor: pointer; color: var(--suave); }
details.sql pre, .respuesta pre { background: var(--papel); border: 1px solid var(--linea);
  border-radius: 8px; padding: .7rem .9rem; overflow-x: auto; margin: .4rem 0;
  font-size: .8rem; line-height: 1.4; }
form.chat textarea { width: 100%; font: inherit; padding: .7rem .8rem; border:
  1px solid var(--linea); border-radius: 8px; background: var(--papel);
  min-height: 4.5rem; resize: vertical; }
form.chat { margin: 1.5rem 0 .5rem; }
form.chat .botones { display: flex; gap: .5rem; margin-top: .5rem;
  align-items: center; }
button.suave { background: transparent; color: var(--suave); border: 1px solid
  var(--linea); font-weight: 400; }
.gasto { margin-left: auto; font-size: .78rem; color: var(--suave); }

/* Campañas: guardar una lista del chat y apuntar cada contacto. El apunte
   tiene que caber en un móvil y salir en menos de veinte segundos. */
form.guardar { display: flex; gap: .5rem; margin: .2rem 15% .9rem 0; }
form.apunte { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
form.apunte select, form.apunte input[type=date] { font: inherit;
  padding: .45rem .6rem; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel); color: inherit; }
form.apunte input[type=text] { padding: .45rem .6rem; min-width: 8rem; }
p.peligro { color: var(--aviso); font-weight: 600; }
form.apunte button, form.guardar button { padding: .45rem .9rem; }
ul.acciones { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; }
ul.acciones li { margin: .15rem 0; }
.tarjeta.huerfana { opacity: .75; }

.llamada { border-left: 4px solid var(--acento); }
.llamada .numero { font-size: 1.3rem; font-weight: 700; }
.espera { text-align: center; color: var(--suave); padding: 3rem 1rem; }
.espera .punto { display: inline-block; width: .6rem; height: .6rem;
  border-radius: 50%; background: var(--acento); margin-right: .4rem;
  animation: latido 1.6s infinite; }
@keyframes latido { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

/* En un móvil de pie en recepción no caben marca, tres pestañas y el nombre en
   la misma línea: la última pestaña queda escondida y es justo la de llamadas. */
@media (max-width: 32rem) {
  header.barra .envoltura { flex-wrap: wrap; gap: .3rem 1rem; }
  nav.barra { order: 3; width: 100%; padding-bottom: .1rem; }
}

@media print { header.barra, form.buscador, .pie { display: none } }