/* ============================================================
   ACOPIOL · ADMINISTRACIÓN
   La misma piel que el CRM, y ahora de verdad: los mismos tokens, la misma
   escala tipográfica, las mismas tres tipografías —titulares, texto y datos—
   y los mismos gestos. Antes era un parecido de lejos; ahora es el mismo
   sistema escrito dos veces.

   Es a propósito: quien administra Acopiol y quien la usa tienen que sentir
   que están en el mismo producto, y a quien la construye le ahorra decidir
   dos veces cómo se ve un botón.

   Todo lo de aquí está copiado de `index.html`. Si allá cambia algo, aquí
   hay que traerlo: son dos programas distintos y no comparten hoja.
   ============================================================ */
:root{
  --tile:#F1F3F2;
  --paper:#FFFFFF;
  --ink:#101918;
  --ash:#6E7B79;
  --faint:#9AA6A4;
  --line:#E3E7E6;
  --line-soft:#EDF0EF;
  --teal:#009EBD;
  --teal-deep:#00758C;
  --teal-wash:#E6F6F9;
  --brass:#C08829;
  --brass-wash:#FBF2E1;
  --mint:#2FB98A;
  --mint-wash:#E4F6EF;
  --mint-deep:#1B7F5E;
  /* Los dos colores del logotipo. Se declaran aparte de --mint y --teal
     porque son la marca, no la interfaz: si algún día la paleta se mueve,
     el logo no se mueve con ella. Mismo criterio que en el CRM. */
  --acop-verde:#2FB98A;
  --acop-azul:#009EBD;
  --pos:#1F8A62;
  --alerta:#E8A317;
  --neg:#C0483C;
  --neg-wash:#FCEDEB;
  --naranja:#D9822B;
  --naranja-wash:#FCF2E4;
  --naranja-deep:#9C5510;
  --slate:#4A5A67;
  --slate-wash:#EEF1F4;

  --r:8px;
  --r-sm:5px;
  /* Dos curvas y cada una hace algo distinto: la de la casa sale disparada y
     frena al final —es la de los gestos, lo que se mueve—, y la suave es para
     lo que sólo cambia de color. Tener una sola era lo que hacía que aquí
     nada se sintiera como en el CRM. */
  --ease:cubic-bezier(.19,.9,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --shadow-float:0 1px 2px rgba(16,25,24,.05), 0 12px 32px -8px rgba(16,25,24,.16);

  /* El riel mide lo mismo que el del CRM. Su etiqueta más larga —«Equipo
     Acopiol»— cabe de sobra. */
  --riel:240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--tile);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  font-size:16.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}
::selection{background:var(--teal);color:#fff}
a{color:var(--teal-deep)}

/* ---------- tipografía ----------
   Tres familias, cada una con su oficio: Bricolage para lo que se anuncia,
   Instrument para lo que se lee y Azeret Mono para lo que se compara —cifras,
   horas, versalitas—. La monoespaciada faltaba y era la mitad del carácter
   del CRM: sin ella, un rótulo de columna y una frase cualquiera pesan igual. */
h1{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-variation-settings:"wght" 600;
   font-size:40px;letter-spacing:-.045em;line-height:1.04}
h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-variation-settings:"wght" 600;
   font-size:19px;letter-spacing:-.035em;line-height:1.15}
h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-variation-settings:"wght" 560;
   font-size:15.5px;letter-spacing:-.03em}
.mono{font-family:"Azeret Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-variant-numeric:tabular-nums}
.num{font-family:"Bricolage Grotesque",sans-serif;font-variation-settings:"wght" 550;
     letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.kick{
  font-family:"Azeret Mono",monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}

/* ============================================================
   EL ARMAZÓN
   ============================================================ */
.app{display:grid;grid-template-columns:var(--riel) 1fr;min-height:100%}
.riel{
  background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:22px 0 14px;
  position:sticky;top:0;height:100vh;min-height:0;
}
.marca{display:flex;align-items:center;gap:9px;padding:0 20px 20px}
.marca b{font-family:"Bricolage Grotesque",sans-serif;font-variation-settings:"wght" 620;
         font-size:22.5px;letter-spacing:-.045em;line-height:1.1}
.marca span{
  display:block;margin-top:-1px;
  font-family:"Azeret Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
/* 28 px es el suelo del logotipo: por debajo, los dientes del engranaje y el
   hueco del mango de la lupa dejan de leerse y el disco parece sucio. */
.logo{width:28px;height:28px;flex:none;display:block}
/* En la caja de la puerta el logotipo es lo primero que se ve, no un adorno
   del riel. Va atado a `.puerta-caja` y no a `.puerta`: la pantalla del
   negocio usa la misma envoltura para centrar su hoja, y ahí el logotipo es
   un rótulo de cabecera como el del riel. */
.puerta-caja .logo{width:38px;height:38px}

.nav{display:flex;flex-direction:column;gap:1px;padding:0 10px;flex:1;min-height:0;overflow:auto}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--r-sm);
  color:var(--ash);font-weight:500;font-size:16px;
  width:100%;text-align:left;position:relative;
  transition:background .18s var(--ease-soft), color .18s var(--ease-soft);
}
.nav-item svg{
  width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85;
  transition:transform .2s var(--ease);
}
.nav-item:hover{background:var(--line-soft);color:var(--ink)}
/* La sección en la que se está va en tinta, no en un lavado de turquesa: es
   la misma decisión del CRM y es lo que hace que el riel tenga un ancla. */
.nav-item.is-on{background:var(--ink);color:#fff}
.nav-item.is-on svg{opacity:1}
/* El filete turquesa al borde del riel crece al entrar en la sección: dice
   dónde se está sin repetir el nombre, y la altura anima desde cero. */
.nav-item::before{
  content:"";position:absolute;left:-10px;top:50%;width:3px;height:0;
  border-radius:0 3px 3px 0;background:var(--teal);transform:translateY(-50%);
  transition:height .24s var(--ease);
}
.nav-item.is-on::before{height:56%}
/* El icono se adelanta un pelo al pasar por encima. */
.nav-item:hover:not(.is-on) svg{transform:translateX(2px)}
.nav-item .tag{
  margin-left:auto;font-family:"Azeret Mono",monospace;font-size:12px;font-weight:500;
  background:var(--line-soft);color:var(--ash);padding:1px 6px;border-radius:20px;
  font-variant-numeric:tabular-nums;
}
.nav-item.is-on .tag{background:rgba(255,255,255,.16);color:#fff}

.yo{
  margin:10px 10px 0;padding:11px 12px 0;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--faint);
}
.yo b{display:block;color:var(--ink);font-size:14.5px;font-weight:600;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* El relleno del botón se descuenta para que su rótulo caiga en la misma
   vertical que el nombre y el correo de arriba. */
.yo button{margin:8px 0 0 -9px}

.hoja{padding:26px 34px 60px;max-width:1320px}
.cabecera{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line);
}
.cabecera .kick{margin-bottom:4px}
.cabecera h1{margin-top:6px}
.sub{color:var(--ash);font-size:15px;line-height:1.55;margin-top:6px;max-width:74ch}

/* ============================================================
   PIEZAS
   ============================================================ */
.tarjeta{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.tarjeta+.tarjeta{margin-top:16px}
.rejilla{display:grid;gap:14px}
/* Dentro de una rejilla las tarjetas son hermanas pero no van una debajo de
   otra: el `margin-top` de arriba las bajaba a todas menos a la primera, y
   los cuatro indicadores del panel salían escalonados como una escalera. El
   aire entre ellas lo pone el `gap`. */
.rejilla>.tarjeta+.tarjeta{margin-top:0}
/* 210 y no 190: la cifra de un KPI va en cuerpo 39 y «$12.400.000» necesita
   ese ancho para no partirse en dos renglones. */
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.kpi{padding:15px 16px 14px}
.kpi-val{font-family:"Bricolage Grotesque",sans-serif;font-variation-settings:"wght" 550;
         font-size:39px;letter-spacing:-.045em;line-height:1.1;margin:7px 0 3px}
.kpi-pie{font-size:14px;color:var(--ash)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;position:relative;
  padding:8px 13px;border-radius:var(--r-sm);
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;
  transition:background .16s var(--ease-soft),border-color .16s var(--ease-soft),transform .16s var(--ease);
}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{background:var(--line-soft);border-color:#D5DAD9}

/* ---------- cómo responde un botón ----------
   Tres respuestas encadenadas, de menos a más compromiso: al pasar por encima
   se levanta un pelo, al pulsar se hunde, y al soltar suelta un aro. La
   secuencia es lo que hace que se sienta una tecla y no una calcomanía.

   El aro va en un pseudoelemento y no en el propio botón: si animara su
   `transform` pelearía con el hundido de `:active` y uno de los dos se
   perdería. La clase `tap` la pone `comun.js` al pulsar. */
.btn:active:not(:disabled){transform:scale(.965)}
.btn::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  border:1.5px solid currentColor;opacity:0;pointer-events:none;
}
.btn.tap::after{animation:tapAro .44s var(--ease) 1}
/* El punto de en medio es para que se vea: con la curva de la casa, sin él
   el aro se apagaba en el primer tercio y el golpe no llegaba a leerse. */
@keyframes tapAro{
  0%{opacity:.5;transform:scale(1)}
  45%{opacity:.34}
  100%{opacity:0;transform:scale(1.2)}
}
/* Los primarios se levantan al pasar por encima: son la acción que se propone
   y conviene que se noten antes de tocarlos. */
.btn--go:hover:not(:disabled),
.btn--teal:hover:not(:disabled){transform:translateY(-1px)}
.btn--go{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--go:hover{background:#1D2C2A;border-color:#1D2C2A}
.btn--teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
/* Lo que destruye va en rojo pero hueco: se ve que es la salida peligrosa sin
   competir con el primario de la pantalla. Mismo criterio que «No asistió»
   en la ficha de una cita. */
.btn--mal{color:var(--neg);border-color:rgba(192,72,60,.45)}
.btn--mal:hover{background:var(--neg-wash);border-color:var(--neg);color:var(--neg)}
.btn--sm{padding:5px 9px;font-size:14px;border-radius:4px}
.btn--ghost{border-color:transparent;background:transparent;color:var(--ash)}
.btn--ghost:hover{background:var(--line-soft);color:var(--ink);border-color:transparent}
.btn:disabled{color:var(--faint);background:var(--line-soft);border-color:transparent;cursor:default;transform:none}
.btn:disabled:hover{transform:none;background:var(--line-soft);color:var(--faint)}
/* Apagado pero vivo: sigue recibiendo el clic para poder contestar por qué
   no hace nada. Misma lección que en el CRM — `disabled` es un botón mudo. */
.btn.is-off{color:var(--faint);background:var(--line-soft);border-color:transparent;cursor:help}
.btn.is-off:hover{transform:none;background:var(--line-soft);color:var(--faint)}

/* ---------- campos ---------- */
.inp{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);font-size:16px;color:var(--ink);
  transition:border-color .16s var(--ease-soft),box-shadow .16s var(--ease-soft);
}
.inp:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,158,189,.13)}
.inp::placeholder{color:var(--faint)}
select.inp{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5 6 8l3-3.5' fill='none' stroke='%236E7B79' stroke-width='1.3' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 9px center;background-size:11px 11px;padding-right:28px}
textarea.inp{min-height:76px;resize:vertical}
.campo{display:block}
.campo>span{display:block;font-size:13.5px;font-weight:600;color:var(--ash);margin-bottom:5px;letter-spacing:-.005em}
.campo+.campo{margin-top:12px}
.pareja{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pareja .campo+.campo{margin-top:0}
/* Un campo suelto detrás de una pareja necesita el mismo aire que si viniera
   detrás de otro campo: sin esto, «Nota» quedaba pegada a la fila de arriba. */
.pareja+.campo{margin-top:12px}

/* ---------- tablas ----------
   La envoltura desplaza en horizontal siempre, no sólo en móvil: la tabla de
   negocios lleva siete columnas y en una ventana estrecha la última —la del
   precio— quedaría cortada sin que nada lo anunciara. */
.tabla-caja{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-family:"Azeret Mono",monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .16s var(--ease-soft)}
tbody tr:hover{background:#FAFBFB}
tbody tr.clic{cursor:pointer}
tbody tr.clic:hover{background:var(--line-soft)}
.nowrap{white-space:nowrap}
.der{text-align:right}

/* ---------- distintivos ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:"Azeret Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.03em;
  padding:2.5px 7px;border-radius:20px;text-transform:uppercase;
  background:var(--line-soft);color:var(--ash);white-space:nowrap;
}
.chip i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.chip--ok{background:#E7F4EF;color:var(--pos)}
.chip--prueba{background:var(--teal-wash);color:var(--teal-deep)}
/* Lo que avisa va en latón, que es el color de «ojo con esto» en toda la
   casa. El naranja está reservado para «canceló» y el ámbar para el triángulo
   del aviso: si se usan para más cosas, dejan de avisar de nada. */
.chip--avisa{background:var(--brass-wash);color:#8A5F14}
.chip--mal{background:var(--neg-wash);color:var(--neg)}
/* Gris con cuerpo, para distinguirlo del distintivo por defecto: «Dueño» y
   «Empleado» salen uno al lado del otro y tienen que verse distintos. */
.chip--gris{background:var(--slate-wash);color:var(--slate)}

/* ---------- ventana ---------- */
.velo{
  position:fixed;inset:0;background:rgba(16,25,24,.28);display:none;z-index:85;
  align-items:center;justify-content:center;padding:24px;
}
.velo.is-on{display:flex;animation:veloIn .22s var(--ease-soft) both}
.modal{
  background:var(--paper);border-radius:var(--r);max-height:calc(100dvh - 48px);overflow-y:auto;
  box-shadow:var(--shadow-float);
}
/* Se anima al aparecer y no con una transición: la ventana se crea ya
   encendida, así que no hay estado previo desde el que transitar. */
.velo.is-on .modal{animation:modalIn .34s var(--ease) both}
@keyframes veloIn{0%{opacity:0}100%{opacity:1}}
@keyframes modalIn{0%{opacity:0;transform:translateY(14px) scale(.98)}100%{opacity:1;transform:none}}
.modal-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.modal-cue{padding:20px 22px}
.modal-pie{display:flex;gap:9px;align-items:center;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line)}
.cerrar{color:var(--faint);font-size:17px;line-height:1;padding:6px;border-radius:50%;
        transition:background .16s var(--ease-soft),color .16s var(--ease-soft)}
.cerrar:hover{background:var(--line-soft);color:var(--ink)}

/* ---------- aviso ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:90;
  display:flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;padding:11px 15px;border-radius:var(--r);
  box-shadow:var(--shadow-float);font-size:15px;font-weight:500;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  transition:transform .34s var(--ease),opacity .24s var(--ease-soft);
  max-width:min(560px,92vw);
}
.toast.is-on{transform:translate(-50%,0);opacity:1}
.toast.mal{background:var(--neg)}

.aviso{padding:11px 13px;border-radius:var(--r-sm);font-size:14.5px;line-height:1.55;margin-bottom:14px}
.aviso--mal{background:var(--neg-wash);color:#8A3227}
.aviso--ok{background:var(--mint-wash);color:var(--mint-deep)}
.aviso--nota{background:var(--brass-wash);color:#7A5510}
.vacio{padding:32px 16px;text-align:center;color:var(--ash);font-size:15px}

/* ---------- entrada ---------- */
.puerta{min-height:100%;display:grid;place-items:center;padding:24px}
/* 14 px de radio, como las tarjetas de plan del CRM: a este tamaño los 8 del
   sistema se ven apretados. */
.puerta-caja{width:min(400px,100%);background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:28px}
/* Centrado, cuerpo pequeño y ancho completo: **todo dentro de la caja**. La
   pantalla del negocio reutiliza `.puerta` sólo para centrar su hoja de
   760 px, y con estas reglas colgadas de `.puerta` se le centraban el nombre
   del plan y todos sus párrafos, y el titular le bajaba a cuerpo de tarjeta.
   Nada de esto es de la envoltura: es de la caja. */
.puerta-caja .marca{justify-content:center;padding:0 0 18px}
.puerta-caja h1{font-size:26px;text-align:center;letter-spacing:-.04em}
.puerta-caja .sub{text-align:center;margin:8px auto 20px}
/* Ancho completo sólo dentro de la caja de la puerta —entrar, poner la clave,
   volver de la pasarela—, donde hay un único botón y es el que se pulsa.
   Sin acotarlo, la pantalla del negocio heredaba la regla y sus tres botones
   salían apilados a lo ancho, como si los tres fueran la acción principal. */
.puerta-caja .btn{width:100%;justify-content:center;margin-top:16px}
.puerta-pie{text-align:center;margin-top:16px;font-size:14px;color:var(--ash)}
.puerta-pie a{cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ---------- barra de fuerza ---------- */
.fuerza{display:flex;gap:4px;margin-top:7px}
.fuerza i{flex:1;height:4px;border-radius:20px;background:var(--line-soft);transition:background .24s var(--ease-soft)}
.fuerza i.on{background:var(--mint)}
.fuerza i.on.flojo{background:var(--alerta)}

/* ============================================================
   MOVIMIENTO
   Lo mismo que hace el CRM al cambiar de sección: el riel entra escalonado y
   el contenido sube. Es medio segundo y es lo que separa una pantalla que
   aparece de una que se dibuja.
   ============================================================ */
@keyframes rise{0%{opacity:0;transform:translateY(11px)}100%{opacity:1;transform:none}}
@keyframes railIn{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:none}}
.marca{animation:rise .5s var(--ease) both}
.nav-item{animation:railIn .5s var(--ease) both}
.nav-item:nth-child(2){animation-delay:40ms}
.nav-item:nth-child(3){animation-delay:80ms}
.nav-item:nth-child(4){animation-delay:120ms}
.nav-item:nth-child(5){animation-delay:160ms}
.hoja > *{animation:rise .5s var(--ease) both}
.hoja > *:nth-child(2){animation-delay:45ms}
.hoja > *:nth-child(3){animation-delay:90ms}
.hoja > *:nth-child(n+4){animation-delay:135ms}

@media (max-width:980px){
  .hoja{padding:22px 20px 60px}
  h1{font-size:34px}
}
@media (max-width:860px){
  /* El riel se acuesta arriba en vez de encogerse a iconos: aquí las cinco
     secciones se llaman por su nombre («Bitácora», «Equipo Acopiol») y un
     icono solo no dice cuál es cuál. */
  .app{grid-template-columns:1fr}
  .riel{position:static;height:auto;flex-direction:row;align-items:center;gap:10px;overflow-x:auto;padding:10px 12px}
  .marca{padding:0 10px 0 0;flex:none}
  /* Sólo en el riel: ahí el rótulo se vuelve horizontal y no cabe el
     subtítulo. En la puerta hay sitio de sobra y el subtítulo es lo que
     dice a qué se está entrando, así que ahí se queda. */
  .riel .marca span{display:none}
  .nav{flex-direction:row;gap:4px;padding:0;overflow:visible}
  .nav-item{white-space:nowrap;padding:7px 11px;width:auto}
  /* Acostado, el filete quedaría suelto a la izquierda de cada sección. La
     tinta del fondo ya dice dónde se está. */
  .nav-item::before{display:none}
  .yo{margin:0 0 0 auto;border:0;padding:0;white-space:nowrap;flex:none}
  .yo b{display:inline;margin-right:8px}
  .yo button{margin:0}
  .pareja{grid-template-columns:1fr}
}
@media (max-width:680px){
  h1{font-size:30px}
  .kpi-val{font-size:33px}
  .hoja{padding:18px 16px 50px}
  .cabecera{gap:12px}
  table{min-width:560px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;transition-duration:.001ms !important}
}