/* ===========================================================================
   BELLORA - estilos
   ---------------------------------------------------------------------------
   Sin marcos de terceros y sin CDN a proposito: el salon trabaja en red local
   y puede quedarse sin internet. Todo vive en el disco del servidor.

   Tipografia: la del sistema. En Windows sale Segoe UI, que es la que la
   recepcionista ya ve todo el dia. No se descarga nada.
   =========================================================================== */

:root {
  --tinta:        #2b2430;
  --tinta-suave:  #6b6270;
  /* [DEFECTO 80] Era #9b93a3, que sobre blanco da 2.9:1 — por debajo del
     4.5:1 que hace falta para leer texto normal. Se veia bien en la
     pantalla buena de un portatil y se perdia en el computador de
     recepcion a las siete de la noche. Ahora da 5.35:1 y sigue siendo
     gris: «tenue» era la intencion, ilegible no. */
  --tenue:        #6f6878;
  --linea:        #e6e1ea;
  --fondo:        #f7f5f9;
  --papel:        #ffffff;

  /* -------------------------------------------------------------------
     EL ACENTO                                                  [OLA 32]
     -------------------------------------------------------------------
     Antes esto se llamaba `--ciruela` y era el color de BELLORA, punto.
     Desde que hay temas (Juan: «que permitiera cambiarle el tema al
     sitio») el color de marca es una VARIABLE, y el nombre tenia que
     dejar de ser el de un color concreto: un tema esmeralda con una
     variable llamada `--ciruela` es una trampa para el que venga.

     Los tres alias de abajo existen para NO tener que reescribir las
     doscientas reglas que ya dicen `var(--ciruela)`. Reescribirlas todas
     habria sido un cambio enorme, imposible de revisar, y con una sola
     que se escapara el tema saldria a medio pintar. Asi el cambio es de
     tres lineas y no puede fallar a medias.

     Los temas (css/temas.css) pisan `--acento*`; los alias los siguen
     solos. Lo NUEVO se escribe con `--acento`. -------------------- */
  --acento:       #7c3f6a;
  --acento-osc:   #5f2f51;
  --acento-luz:   #f3e8f0;

  --ciruela:      var(--acento);
  --ciruela-osc:  var(--acento-osc);
  --ciruela-luz:  var(--acento-luz);

  --verde:        #2f7d5c;
  /* [DEFECTO 80] Era #b5721a: 3.5:1 sobre blanco. Es el color de los
     PRECIOS. Un precio que no se lee es el peor sitio donde ahorrarse
     contraste. Ahora 6.14:1. */
  --ambar:        #8a5610;
  --rojo:         #b3352f;
  --rojo-luz:     #fdecea;
  /* [DEFECTO 89] Los fondos claros de las etiquetas estaban ESCRITOS a mano
     —`#fbf0dd`, `#e4f2ea`— dentro de las reglas. En los cinco temas claros se
     veian bien; en `noche` quedaba letra CLARA sobre fondo CLARO, a 1.7:1: no
     se leia. Y la prueba de contraste no lo cazaba porque solo mide las
     variables, y esos dos colores no eran variables. Ahora si lo son, y cada
     tema pone los suyos. */
  --ambar-luz:    #fbf0dd;
  --verde-luz:    #edf8f2;

  /* [DEFECTO 91] Y eran DOS de veinticuatro.
     -------------------------------------------------------------------------
     Al arreglar el 89 se cambiaron los dos fondos de las etiquetas y se dijo
     «los seis temas pasan». Era verdad de lo que la prueba mira, no del
     archivo: quedaban VEINTIDOS fondos mas escritos a mano en este mismo
     archivo, varios de ellos con `color: var(--ambar)` o `var(--verde)`
     encima — o sea, letra que cambia con el tema sobre un fondo que no.

     El peor era `.vuelto`: el VUELTO de la caja, verde claro fijo. En el tema
     `noche` la letra verde se aclara y el fondo se queda claro: una
     recepcionista no habria podido leer cuanto devolver.

     Estas siete son las que faltaban. Todas viven en `temas.css`, y ninguna
     regla de aqui vuelve a escribir un color de fondo a mano. La unica
     excepcion declarada esta abajo, en la tirilla y la firma, y dice por que.
     ------------------------------------------------------------------------- */
  --realce:       #faf8fb;   /* el fondo al pasar el raton por encima */
  --rayado:       #f0edf3;   /* relleno neutro un punto mas fuerte */
  --linea-fuerte: #d6cfdc;   /* el borde cuando algo esta sobre-volado */
  --ambar-linea:  #ecd9b4;   /* el borde que acompana a --ambar-luz */
  --rojo-linea:   #eccbc9;   /* el borde que acompana a --rojo-luz */
  --aviso-fondo:  #322a37;   /* el globito de avisos: oscuro sobre claro… */
  --aviso-tinta:  #ffffff;   /* …y al reves en `noche` */
  --sobre-acento: #ffffff;   /* la letra encima del acento */

  --alto-hora:    96px;   /* 1 hora = 96 px  ->  1 minuto = 1.6 px */
  --ancho-horas:  62px;
  --radio:        10px;
  /* Alto real de la barra superior. En pantallas angostas la barra se parte
     en dos filas y crece; quien se cuelgue de ella (el panel de detalle a
     pantalla completa) lee esta medida en vez de suponer 56. */
  --alto-barra:   56px;
  --sombra:       0 1px 2px rgba(43,36,48,.06), 0 8px 24px rgba(43,36,48,.07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  /* RED DE SEGURIDAD DEL ENCUADRE  [DEFECTO 22]
     Si algo dentro de la pagina se pasa de ancho, el celular no se lleva
     la pagina entera de paseo hacia la derecha dejando la pantalla en
     blanco: se queda quieta y el desbordamiento se resuelve adentro, en
     la zona que si sabe desplazarse. Es un cinturon, no un arreglo: el
     arreglo de verdad esta abajo, en la barra. */
  max-width: 100%;
  overflow-x: hidden;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.oculto { display: none !important; }

/* --- Botones -------------------------------------------------------------- */

.boton {
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--tinta);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  transition: background .12s, border-color .12s;
}
.boton:hover { background: var(--realce); border-color: var(--linea-fuerte); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

.boton.principal {
  background: var(--ciruela);
  border-color: var(--ciruela);
  color: var(--sobre-acento);
}
.boton.principal:hover { background: var(--ciruela-osc); border-color: var(--ciruela-osc); }

.boton.peligro { color: var(--rojo); border-color: var(--rojo-linea); background: var(--rojo-luz); }
.boton.peligro:hover { background: var(--rojo-luz); border-color: var(--rojo); }

.boton.chico { padding: 5px 10px; font-size: 13px; }

/* --- Campos --------------------------------------------------------------- */

.campo { display: block; margin-bottom: 14px; }
.campo > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tinta-suave);
  margin-bottom: 5px;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--papel);
  outline: none;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--ciruela);
  box-shadow: 0 0 0 3px var(--ciruela-luz);
}
.pareja { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* [DEFECTO 29] El margen negativo servia para acercar la ayuda al campo que
   tiene encima: un .campo trae 14 px de margen abajo y la ayuda le pertenece.
   Pero .ayuda tambien se usa despues de listas y de casillas, y ahi ese -8px
   la montaba ENCIMA del texto anterior — se veia en Categorias, sobre el
   "Por ejemplo: Cuidado del cabello...". El acercamiento ahora solo pasa
   cuando de verdad viene detras de un campo. */
.ayuda { font-size: 12px; color: var(--tenue); margin: 10px 0 14px; }
.campo + .ayuda,
.pareja + .ayuda { margin-top: -8px; }

/* ===========================================================================
   INGRESO
   =========================================================================== */

#pantallaIngreso {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -10%, #f0e3ee 0%, rgba(240,227,238,0) 60%),
    radial-gradient(700px 400px at 100% 110%, #e7e9f3 0%, rgba(231,233,243,0) 60%),
    var(--fondo);
}

/* --- Bienvenida ------------------------------------------------------------
   La misma luz de la pantalla de ingreso, sin pedir nada todavia. */
#pantallaBienvenida {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -10%, #f0e3ee 0%, rgba(240,227,238,0) 60%),
    radial-gradient(700px 400px at 100% 110%, #e7e9f3 0%, rgba(231,233,243,0) 60%),
    var(--fondo);
}
.tarjetaBienvenida {
  width: 100%;
  max-width: 420px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 38px 32px 26px;
  box-shadow: var(--sombra);
  text-align: center;
}
.tarjetaBienvenida .marca { margin-bottom: 30px; }
.tarjetaBienvenida .marca::after {
  content: "";
  display: block;
  width: 34px; height: 1px;
  margin: 22px auto 0;
  background: var(--linea);
}
.saludoBienvenida {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ciruela-osc);
}
.textoBienvenida {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta-suave);
}
.pieBienvenida { margin-top: 18px; font-size: 12.5px; }
.pieBienvenida a { color: var(--tenue); text-decoration: none; border-bottom: 1px solid var(--linea); }
.pieBienvenida a:hover { color: var(--ciruela); }

.tarjeta-ingreso {
  width: 100%;
  max-width: 380px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 34px 30px 26px;
  box-shadow: var(--sombra);
}

.marca { text-align: center; margin-bottom: 26px; }
.marca h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: .34em;
  text-indent: .34em;       /* compensa el espaciado de la ultima letra */
  color: var(--ciruela);
}
.marca p { margin: 6px 0 0; font-size: 12.5px; color: var(--tenue); }

/* ===========================================================================
   ARMAZON
   =========================================================================== */

#pantallaApp { display: flex; flex-direction: column; height: 100%; min-width: 0; max-width: 100%; }

.barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  height: var(--alto-barra);
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  flex-shrink: 0;
  /* Sin esto, los diez botones de navegacion empujan a "Mi clave" y
     "Salir" fuera de la pantalla y arrastran la pagina entera. */
  min-width: 0;
}
.barra .logo {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .22em;
  color: var(--ciruela);
  white-space: nowrap;
}
.barra .negocio { font-size: 12.5px; color: var(--tenue); border-left: 1px solid var(--linea);
                  padding-left: 14px; white-space: nowrap; }
.barra .separador { flex: 1; }
.barra .quien { font-size: 13px; color: var(--tinta-suave); white-space: nowrap; }
/* Los botones de la barra no se encogen ni parten su texto en dos renglones:
   antes de eso se deslizan las pestanas, que para eso saben hacerlo. */
.barra .boton { flex: none; white-space: nowrap; }

.subbarra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* first-letter y no capitalize: capitalize convierte "de agosto de 2026" en
   "De Agosto De 2026", que no es como se escribe una fecha en espanol. */
#tituloFecha { font-weight: 600; min-width: 210px; }
#tituloFecha::first-letter { text-transform: uppercase; }
.subbarra select { padding: 6px 9px; border: 1px solid var(--linea); border-radius: 8px; background: var(--papel); }

/* ===========================================================================
   AGENDA
   =========================================================================== */

#zonaAgenda { flex: 1; overflow: auto; position: relative; }

/* Las columnas se reparten el ancho disponible pero nunca bajan de 190 px.
   Con cuatro profesionales la agenda llena la pantalla; con doce aparece la
   barra de desplazamiento horizontal en vez de aplastar las columnas. */
.rejilla {
  display: grid;
  width: 100%;
  position: relative;
}

/* Encabezado pegajoso con el nombre de cada trabajadora */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  padding: 9px 10px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  border-left: 1px solid var(--linea);
}
.cabecera .marcaColor {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: baseline;
}
.cabecera small { display: block; font-weight: 400; color: var(--tenue); font-size: 11.5px; }

.esquina {
  position: sticky;
  top: 0; left: 0;
  z-index: 6;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}

/* Columna de horas */
.horas {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--fondo);
  border-right: 1px solid var(--linea);
  width: var(--ancho-horas);
}
.marcaHora {
  height: var(--alto-hora);
  position: relative;
  font-size: 11.5px;
  color: var(--tenue);
  text-align: right;
  padding-right: 8px;
}
.marcaHora span { position: relative; top: -7px; }

/* Columna de una trabajadora */
.columna {
  position: relative;
  border-left: 1px solid var(--linea);
  background: var(--papel);
  min-width: 0;
}
.franja {
  height: var(--alto-hora);
  border-bottom: 1px solid var(--linea);
  position: relative;
}
.franja::after {          /* linea punteada de la media hora */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--alto-hora) / 2);
  border-top: 1px dotted var(--linea);
}
.franja.fuera { background: repeating-linear-gradient(45deg, var(--realce), var(--realce) 6px, var(--rayado) 6px, var(--rayado) 12px); }
.franja:hover { background: var(--realce); }

/* Linea de "ahora" */
#lineaAhora {
  position: absolute;
  left: var(--ancho-horas);
  right: 0;
  height: 0;
  border-top: 2px solid var(--rojo);
  z-index: 3;
  pointer-events: none;
}
#lineaAhora::before {
  content: "";
  position: absolute;
  left: -5px; top: -5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rojo);
}

/* --- Bloques de cita ------------------------------------------------------ */

.cita {
  position: absolute;
  left: 4px; right: 6px;
  border-radius: var(--radio);
  padding: 6px 8px;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.28;
  color: #fff;
  cursor: grab;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(43,36,48,.18);
  border-left: 4px solid rgba(255,255,255,.55);
  user-select: none;
  touch-action: none;
}
.cita:hover { filter: brightness(1.06); }
.cita.arrastrando { opacity: .55; cursor: grabbing; z-index: 20; box-shadow: 0 10px 26px rgba(43,36,48,.3); }
.cita .hora { font-weight: 700; }
.cita .quien { font-weight: 600; }
/* [OLA 15] El trabajo que se va a hacer. Puede ser largo ("Balayage + Corte
   dama + Peinado"): se deja crecer hasta donde alcance la tarjeta y se corta
   con puntos suspensivos, nunca desbordando. */
.cita .que {
  opacity: .92;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.32;
}
/* El tipo de cita, cuando no es una cita corriente, va como sello delante */
.cita .que .tipoCita {
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(255,255,255,.26);
  border-radius: 5px;
  padding: 0 5px;
}
/* [OLA 37] El hilo de la clienta: tratamiento en curso o propuesta
   pendiente. Va sobre el color de la profesional, asi que los fondos son
   translucidos y el texto hereda el contraste ya calculado. El ambar de
   «paso la mitad» usa el PAR de variables del tema (--ambar-luz de fondo,
   --ambar de letra): cada tema garantiza que esas dos contrastan entre si
   (defecto 89), y como el fondo es opaco, da igual que color de
   profesional haya debajo. La primera version llevaba un ambar escrito a
   mano; el revisor lo cazo. */
.cita .hilo {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(255,255,255,.22);
}
.cita .hilo.pendiente { background: rgba(255,255,255,.34); }
.cita .hilo.pendienteTarde { background: var(--ambar-luz); color: var(--ambar); }
.cita.corta .hilo { display: none; }
.citaSemana .queSemana { display: block; opacity: .9; }
.cita .insignia {
  position: absolute; top: 5px; right: 6px;
  font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,.26);
  border-radius: 5px; padding: 1px 5px;
}
.cita.cancelada { opacity: .42; text-decoration: line-through; cursor: default; }
.cita.atendida  { opacity: .75; }

/* Una cita de 30 minutos no tiene sitio para tres renglones. Antes que
   mostrar un texto cortado por la mitad, se muestra menos. */
.cita.corta { padding: 4px 8px; font-size: 12px; }
.cita.corta .que { display: none; }
.cita.corta .hora { display: inline; margin-right: 6px; }
.cita.corta .quien { display: inline; }

/* La ocupacion posterior: la silla sigue ocupada aunque la clienta ya se fue */
.ocupacion {
  position: absolute;
  left: 4px; right: 6px;
  border-radius: 0 0 var(--radio) var(--radio);
  background: repeating-linear-gradient(45deg, rgba(43,36,48,.13), rgba(43,36,48,.13) 4px, transparent 4px, transparent 8px);
  border: 1px dashed rgba(43,36,48,.2);
  border-top: none;
  z-index: 1;
  pointer-events: none;
}

/* Vista previa mientras se arrastra */
#fantasma {
  position: absolute;
  left: 4px; right: 6px;
  border: 2px dashed var(--ciruela);
  background: var(--ciruela-luz);
  border-radius: var(--radio);
  z-index: 19;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px; color: var(--ciruela-osc);
}

/* ===========================================================================
   DIALOGOS
   =========================================================================== */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(43,36,48,.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.dialogo {
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow: auto;
  background: var(--papel);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(43,36,48,.3);
}
.dialogo header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 10px;
}
.dialogo header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.dialogo header .cerrar {
  margin-left: auto;
  border: none; background: none;
  font-size: 20px; line-height: 1;
  color: var(--tenue); padding: 2px 6px;
}
.dialogo .cuerpo { padding: 18px 20px; }
.dialogo .pie {
  padding: 14px 20px;
  border-top: 1px solid var(--linea);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--realce);
  border-radius: 0 0 14px 14px;
  flex-wrap: wrap;
}
.dialogo .pie .izquierda { margin-right: auto; }

/* Buscador de clientas */
.buscador { position: relative; }
.resultados {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  box-shadow: var(--sombra);
  max-height: 220px;
  overflow: auto;
  z-index: 10;
  margin-top: 4px;
}
.resultados button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 9px 12px;
  border-bottom: 1px solid var(--linea);
}
.resultados button:hover { background: var(--ciruela-luz); }
.resultados small { color: var(--tenue); }
.resultados .vacio { padding: 11px 12px; color: var(--tenue); font-size: 13px; }

/* Ficha de la cita.
   El selector es "> div" a proposito: con ".ficha div" el estilo caia tambien
   sobre .r y .v, que son divs hijos, y cada fila salia con la linea partida
   en dos y el doble de espacio. */
.ficha { border-top: 1px solid var(--linea); }
.ficha > div { display: flex; padding: 9px 0; border-bottom: 1px solid #f4f1f6; gap: 12px; }
.ficha .r { color: var(--tenue); width: 104px; flex-shrink: 0; font-size: 12.5px; padding-top: 1px; }
.ficha .v { font-weight: 500; flex: 1; }

.etiquetaEstado {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: var(--ciruela-luz);
  color: var(--ciruela-osc);
}
.etiquetaEstado.verde { background: var(--verde-luz); color: var(--verde); }
.etiquetaEstado.ambar { background: var(--ambar-luz); color: var(--ambar); }
.etiquetaEstado.rojo  { background: var(--rojo-luz); color: var(--rojo); }
/* [OLA 31/33] `gris` la usan la cola de mensajes y el estado de la app:
   es «ni bien ni mal», que es un estado de verdad y no un fallo. */
.etiquetaEstado.gris  { background: var(--fondo); color: var(--tenue); }

/* ===========================================================================
   WHATSAPP Y LOS MENSAJES  [OLA 31]
   =========================================================================== */

.tarjetaConfig {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 14px;
}

.filaPlantilla {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
}
.filaPlantilla:last-child { border-bottom: none; }
.filaPlantilla .quien { flex: 1 1 220px; min-width: 0; }
.filaPlantilla .quien small { display: block; color: var(--tenue); font-size: 12.5px; }
.filaPlantilla input {
  flex: 1 1 200px; min-width: 0; padding: 9px;
  border: 1px solid var(--linea); border-radius: 8px;
  font-size: 14px; font-family: inherit;
}

/* [DEFECTO 79] La casilla de «esta plantilla es de autenticación».
   Ocupa el renglón entero —`flex-basis: 100%` CON el `flex-wrap` que ya
   tiene `.filaPlantilla` arriba, que es la lección del defecto 77: sin el
   wrap del contenedor, el 100% no salta de línea, se aplasta—. Y la casilla
   se saca de la regla de arriba a mano: sin esto heredaría `flex: 1 1 200px`
   y saldría un cuadradito de 200px de ancho. */
.filaPlantilla .casillaAuth {
  flex: 0 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.filaPlantilla .casillaAuth input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 2px;
  padding: 0;
  border-radius: 4px;
}
.filaPlantilla .casillaAuth small {
  display: block;
  color: var(--tenue);
  font-size: 12.5px;
  margin-top: 3px;
}

/* Un mensaje de la cola. Mismo salto de línea que `.filaUsuario` y por la
   misma razón (defecto 77): el cuerpo del mensaje pide el ancho entero y
   sin `flex-wrap` se quedaría aplastado contra el nombre. */
.filaMensaje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.filaMensaje .quien { flex: 1 1 220px; min-width: 0; }
.filaMensaje .quien small { display: block; color: var(--tenue); font-size: 12.5px; }
.filaMensaje .cuerpoMensaje {
  flex: 1 1 100%;
  font-size: 13.5px;
  color: var(--tinta-suave);
  background: var(--fondo);
  border-radius: 8px;
  padding: 8px 10px;
  overflow-wrap: anywhere;
}
.filaMensaje .avisoMensaje {
  flex: 1 1 100%;
  font-size: 12.5px;
  color: var(--ambar);
  overflow-wrap: anywhere;
}
.filaMensaje .accionesMensaje { display: flex; gap: 8px; flex-wrap: wrap; }

.pruebaWa {
  margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  font-size: 13px; overflow-wrap: anywhere;
  background: var(--fondo); color: var(--tinta-suave);
}
.pruebaWa.bien { background: var(--verde-luz); color: var(--verde); }
.pruebaWa.mal  { background: var(--rojo-luz); color: var(--rojo); }

/* Las redes del salón, en el panel de la clienta y en el portal. */
.redesSalon { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.redesSalon a {
  display: inline-block; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--papel);
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ciruela-osc);
}

/* [OLA 30] Mercancía que ya salió y todavía nadie cobró. Se ve desde lejos
   a propósito: es lo único de la pantalla de pedidos que cuesta plata. */
.etiquetaEstado.sinCobrar { border: 1px solid var(--rojo); }

/* ===========================================================================
   LOS BILLETES Y EL VUELTO  [OLA 30]
   ---------------------------------------------------------------------------
   Botones grandes: se tocan con el dedo y de afán, con la clienta enfrente.
   =========================================================================== */

.billetes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.billetes button {
  padding: 10px 4px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: var(--papel);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  color: var(--tinta);
}
.billetes button:hover { background: var(--ciruela-luz); border-color: var(--ciruela); }
.billetes button.limpiar { font-weight: 500; color: var(--tenue); }

.vuelto {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--verde-luz);
  color: var(--verde);
  font-weight: 700;
  font-size: 16px;
}
.vuelto.corto { background: var(--rojo-luz); color: var(--rojo); font-size: 13.5px; }

/* ===========================================================================
   AVISOS
   =========================================================================== */

#avisos {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 380px;
}
.aviso {
  background: var(--aviso-fondo);
  color: var(--aviso-tinta);
  padding: 12px 15px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(43,36,48,.32);
  font-size: 13.5px;
  line-height: 1.4;
  animation: entra .16s ease-out;
}
.aviso.malo  { background: var(--rojo); }
.aviso.bueno { background: var(--verde); }
.aviso strong { display: block; margin-bottom: 2px; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

.errorCampo {
  background: var(--rojo-luz);
  border: 1px solid #eccbc9;
  color: var(--rojo);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

.vacioAgenda {
  padding: 60px 20px;
  text-align: center;
  color: var(--tenue);
}

/* ===========================================================================
   PANTALLAS ANGOSTAS
   =========================================================================== */

/* ---------------------------------------------------------------------------
   [DEFECTO 22] EL ENCUADRE, EN TRES ESCALONES

   El sintoma que reporto Juan: en el computador se perdian el logo y los
   botones de la derecha; en el iPhone la pagina salia casi en blanco. La
   causa era una sola: la barra superior media 1050 px dentro de un telefono
   de 390. Como nada de lo que hay en ella podia encogerse, empujaba el
   documento a lo ancho y lo que uno veia era el vacio de la derecha.

   Escalon 1 (hasta 1180): las pestanas se deslizan dentro de su tira.
   Escalon 2 (hasta 980):  la barra se parte en dos filas.
   Escalon 3 (hasta 560):  se retira lo que no es indispensable en un movil.
   --------------------------------------------------------------------------- */

/* --- Escalon 2: la barra en dos filas ------------------------------------- */
@media (max-width: 980px) {
  :root { --alto-barra: 98px; }

  .barra {
    flex-wrap: wrap;
    align-content: center;
    padding: 0 12px;
    column-gap: 10px;
    row-gap: 0;
  }
  /* Primera fila: quien soy y como salgo. Segunda fila: a donde voy. */
  .barra > * { height: 46px; display: flex; align-items: center; }
  .barra .separador { height: auto; }
  .barra .pestanas {
    order: 10;
    flex: 1 0 100%;
    margin-left: 0;
    margin-bottom: 6px;
    height: 40px;
  }
  .barra .pestanas button { height: 32px; }
}

/* --- Escalon 3: el telefono ----------------------------------------------- */
@media (max-width: 560px) {
  .barra { padding: 0 10px; column-gap: 8px; }
  .barra .logo { font-size: 15px; letter-spacing: .16em; }
  /* El nombre del usuario ya sale en el Tablero; aqui solo estorba. */
  .barra .quien { display: none; }
  #selectorSede { max-width: 118px; font-size: 12.5px; padding: 5px 6px; }
  .barra .boton.chico { padding: 6px 9px; font-size: 12.5px; }
  .subbarra { padding: 8px 10px; gap: 8px; }
}

/* --- La agenda en pantallas angostas -------------------------------------- */
@media (max-width: 700px) {
  :root { --alto-hora: 76px; --ancho-horas: 48px; --ancho-col: 152px; }
  .barra .negocio { display: none; }
  #tituloFecha { min-width: 0; font-size: 13.5px; }
}

/* ===========================================================================
   PESTANAS DE NAVEGACION
   =========================================================================== */

/* Diez pestanas no caben en un portatil de 1280 y menos en un celular.
   En vez de empujar el resto de la barra fuera de la pantalla, la tira de
   pestanas se encoge y se desliza sola, con el dedo o con la rueda.
   [DEFECTO 22] */
.pestanas {
  display: flex;
  gap: 2px;
  margin-left: 6px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 3px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;                 /* Firefox: sin barra a la vista */
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;     /* iPhone: deslizamiento con inercia */
  overscroll-behavior-x: contain;        /* no arrastra la pagina de atras */
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  border: none;
  background: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--tinta-suave);
  white-space: nowrap;
  flex: none;                            /* que no se aplasten al encogerse */
}
.pestanas button:hover { color: var(--tinta); }
.pestanas button.activa {
  background: var(--papel);
  color: var(--ciruela-osc);
  box-shadow: 0 1px 2px rgba(43,36,48,.08);
}

/* ===========================================================================
   VISTAS DE ADMINISTRACION
   =========================================================================== */

.vistaAdmin { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.dosColumnas {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  overflow: hidden;
}
.panelLista {
  overflow-y: auto;
  border-right: 1px solid var(--linea);
  background: var(--papel);
}
.panelDetalle { overflow-y: auto; padding: 22px 26px; }
.panelAncho { flex: 1; overflow-y: auto; padding: 18px 22px; }

/* --- Lista de clientas ----------------------------------------------------- */

.filaClienta {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
}
.filaClienta:hover { background: var(--realce); }
.filaClienta.activa { background: var(--ciruela-luz); }
.filaClienta .n { font-weight: 600; }
.filaClienta small { color: var(--tenue); display: block; margin-top: 1px; }

/* --- Catalogo --------------------------------------------------------------- */

.grupoCategoria { margin-bottom: 22px; }
.grupoCategoria h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  display: flex; align-items: center; gap: 8px;
}
.grupoCategoria h3 .punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.filaServicio {
  display: grid;
  grid-template-columns: 1fr 110px 130px 90px;
  gap: 12px;
  align-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 11px 16px;
  margin-bottom: 8px;
}
.filaServicio .nom { font-weight: 600; }
.filaServicio .nom small { display: block; font-weight: 400; color: var(--tenue); }
.filaServicio .dur, .filaServicio .pre { font-size: 13.5px; }
.filaServicio .pre { font-weight: 700; text-align: right; }
.filaServicio.inactivo { opacity: .5; }
.insigniaInactivo {
  font-size: 11px; font-weight: 700; color: var(--rojo);
  background: var(--rojo-luz); border-radius: 5px; padding: 1px 7px; margin-left: 8px;
}

/* --- Equipo ----------------------------------------------------------------- */

.tarjetasEquipo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.tarjetaTrab {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 16px 18px;
  border-top: 4px solid var(--ciruela);
}
.tarjetaTrab .nom { font-weight: 700; font-size: 15px; }
.tarjetaTrab .datos { color: var(--tenue); font-size: 12.5px; margin: 3px 0 10px; }
.tarjetaTrab .horarioResumen {
  font-size: 12.5px; line-height: 1.55; color: var(--tinta-suave);
  border-top: 1px dashed var(--linea); padding-top: 9px; margin-bottom: 12px;
  min-height: 40px;
}
.tarjetaTrab .acciones { display: flex; gap: 8px; }

/* --- Editor de horario ------------------------------------------------------ */

.filaDia {
  display: grid;
  grid-template-columns: 108px 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--linea);
}
.filaDia .franja2 { opacity: .85; }
.filaDia input[type="time"] {
  padding: 6px 8px; border: 1px solid var(--linea); border-radius: 7px; width: 100%;
}
.filaDia .parFranja { display: flex; gap: 6px; align-items: center; }
.filaDia .parFranja span { color: var(--tenue); }
.filaDia.apagado input[type="time"] { opacity: .35; pointer-events: none; }

.casilla {
  display: flex; gap: 9px; align-items: flex-start;
  margin-bottom: 12px; font-size: 13.5px; cursor: pointer;
}
.casilla input { margin-top: 2px; }

/* --- Bloqueos --------------------------------------------------------------- */

.filaBloqueo {
  display: flex; gap: 14px; align-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--ambar);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 8px;
}
.filaBloqueo .cuando { font-weight: 600; white-space: nowrap; }
.filaBloqueo .quien { color: var(--tenue); font-size: 13px; }
.filaBloqueo .mot { flex: 1; }

.avisoCitasDentro {
  background: var(--ambar-luz); border: 1px solid var(--ambar-linea); color: var(--ambar);
  border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-top: 4px;
}

@media (max-width: 900px) {
  .pestanas button { padding: 6px 9px; font-size: 12px; }
  .dosColumnas { grid-template-columns: 1fr; }
  .panelDetalle { display: none; }
  /* inset lee el alto real de la barra: en dos filas ya no son 56 px. */
  .panelDetalle.enfocado { display: block; position: fixed; inset: var(--alto-barra) 0 0;
                           overflow-y: auto; background: var(--fondo); z-index: 30; }
  .filaServicio { grid-template-columns: 1fr 90px; }
  .filaServicio .dur { display: none; }
}

/* La vista de la agenda quedo envuelta en una <section> al aparecer las
   pestanas; sin esta regla, la seccion rompe la cadena de flex y la zona
   de agenda pierde su alto (la pagina entera se vuelve el scroll). */
#vistaAgenda { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ===========================================================================
   CAJA
   =========================================================================== */

.resumenCaja {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.resumenCaja .celda {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 12px 16px;
}
.resumenCaja .celda .v { font-size: 20px; font-weight: 700; }
.resumenCaja .celda .e { font-size: 12px; color: var(--tenue); }

.filaVenta, .filaBono {
  display: flex; gap: 14px; align-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 8px;
}
.filaVenta.anulada, .filaBono.anulada { border-left-color: var(--rojo); opacity: .6; }
.filaVenta .num, .filaBono .num { font-weight: 700; min-width: 46px; }
.filaVenta .det, .filaBono .det { flex: 1; min-width: 0; }
.filaVenta .det small, .filaBono .det small { color: var(--tenue); display: block; }
.filaVenta .tot, .filaBono .tot { font-weight: 700; white-space: nowrap; }

.lineaCobrar {
  display: grid;
  grid-template-columns: 1fr 58px 96px 122px 26px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.lineaCobrar input, .lineaCobrar select {
  padding: 7px 9px; border: 1px solid var(--linea); border-radius: 7px; width: 100%;
}
.lineaCobrar .quitar {
  border: none; background: none; color: var(--tenue); font-size: 17px; padding: 2px;
}
.lineaCobrar .quitar:hover { color: var(--rojo); }

/* [OLA 16] El pago vive ahora en la columna estrecha de la cuenta, asi que
   se acuesta en dos renglones: medio y monto arriba, referencia debajo.
   Antes era una sola fila de 460 px que se salia del panel. */
.pagoCobrar {
  display: grid;
  grid-template-columns: 1fr 92px 46px;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--linea);
}
/* Cada pieza en su sitio, sin depender del orden del HTML:
   fila 1  [ medio ][ monto ][ x ]
   fila 2  [   referencia   ][Resto] */
.pagoCobrar .medio  { grid-area: 1 / 1; }
.pagoCobrar .monto  { grid-area: 1 / 2; }
.pagoCobrar .quitar { grid-area: 1 / 3;
  border: none; background: none; color: var(--tenue); font-size: 17px; padding: 2px; }
.pagoCobrar .quitar:hover { color: var(--rojo); }
.pagoCobrar .ref    { grid-area: 2 / 1 / 3 / 3; }
.pagoCobrar .boton  { grid-area: 2 / 3; padding: 5px 4px; font-size: 11px;
                      justify-self: stretch; text-align: center; }
.pagoCobrar input, .pagoCobrar select {
  padding: 7px 9px; border: 1px solid var(--linea); border-radius: 7px; width: 100%;
}

.totalCobrar {
  text-align: right;
  font-size: 19px;
  font-weight: 700;
  color: var(--ciruela-osc);
  padding: 8px 2px;
  border-top: 1px solid var(--linea);
}

.tablaComisiones {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.tablaComisiones th, .tablaComisiones td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  font-size: 13.5px;
}
.tablaComisiones th { font-size: 12px; color: var(--tinta-suave); letter-spacing: .03em; }
.tablaComisiones td.n, .tablaComisiones th.n { text-align: right; }
.tablaComisiones input {
  width: 70px; padding: 5px 7px; border: 1px solid var(--linea); border-radius: 6px; text-align: right;
}

/* --- Vista semana (hito 3) ------------------------------------------------- */

.alternadorVista { display: flex; gap: 0; }
.alternadorVista .boton { border-radius: 8px 0 0 8px; }
.alternadorVista .boton + .boton { border-radius: 0 8px 8px 0; border-left: none; }
.alternadorVista .boton.activo {
  background: var(--ciruela);
  border-color: var(--ciruela);
  color: var(--sobre-acento);
}

.semanaRejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px 18px;
  align-items: start;
}

.diaSemana {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  min-height: 130px;
}
.diaSemana.hoy { border-color: var(--ciruela); box-shadow: 0 0 0 1px var(--ciruela); }

.diaSemana .cabDia {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  border: none;
  background: var(--ciruela-luz);
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ciruela-osc);
  text-align: left;
}
.diaSemana .cabDia small { font-weight: 600; color: var(--tinta-suave); }
.diaSemana.hoy .cabDia { background: var(--ciruela); color: #fff; }
.diaSemana.hoy .cabDia small { color: rgba(255,255,255,.85); }

.citaSemana {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-left: 4px solid var(--ciruela);
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  padding: 7px 9px;
  font-size: 12.5px;
  line-height: 1.35;
}
.citaSemana:hover { background: var(--ciruela-luz); }
.citaSemana small { display: block; color: var(--tenue); }
.citaSemana .insignia {
  font-size: 9.5px;
  font-weight: 700;
  background: rgba(124,63,106,.12);
  color: var(--ciruela-osc);
  border-radius: 4px;
  padding: 1px 4px;
  vertical-align: middle;
}
.citaSemana.cancelada { opacity: .45; text-decoration: line-through; }

@media (max-width: 900px) {
  .semanaRejilla { grid-template-columns: repeat(2, 1fr); }
}

/* --- Historias clinicas (hito 4) ------------------------------------------- */

.tarjetaPaquete {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.tarjetaPaquete.anulado { opacity: .55; }
.tarjetaPaquete .enc { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tarjetaPaquete .barra {
  height: 8px;
  background: var(--ciruela-luz);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.tarjetaPaquete .barra .lleno { height: 100%; background: var(--ciruela); border-radius: 4px; }
.tarjetaPaquete small { color: var(--tenue); }

.sesionHistoria {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--ciruela);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.sesionHistoria.anulada { opacity: .55; border-left-color: var(--rojo); }
.sesionHistoria .enc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sesionHistoria .chip {
  font-size: 11.5px;
  font-weight: 600;
  background: var(--ciruela-luz);
  color: var(--ciruela-osc);
  border-radius: 6px;
  padding: 2px 8px;
}
.sesionHistoria .det { font-size: 13.5px; line-height: 1.45; }
.sesionHistoria .det > div { margin-bottom: 4px; }
.sesionHistoria .det .r {
  display: inline-block;
  min-width: 110px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tinta-suave);
  letter-spacing: .02em;
}
.sesionHistoria small { color: var(--tenue); display: block; margin-top: 6px; }
.sesionHistoria .zonaFirmaImg { margin-top: 8px; }
.sesionHistoria .zonaFirmaImg img {
  display: block;
  max-width: 340px;
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--papel);
}
.sesionHistoria .zonaFirmaImg small { margin-top: 3px; }

.lienzoFirma {
  display: block;
  width: 100%;
  height: 160px;
  border: 2px dashed var(--linea);
  border-radius: 10px;
  /* PAPEL DE VERDAD · [DEFECTO 91] Este blanco NO es un descuido y no se
     cambia por `--papel`. La firma se dibuja en tinta negra y se guarda como
     IMAGEN dentro de la historia clinica: si el lienzo fuera oscuro en el
     tema `noche`, la firma quedaria guardada negro sobre negro y no se veria
     nunca mas, ni al imprimirla. Lo que se archiva no lleva tema. */
  background: #fff;
  cursor: crosshair;
  touch-action: none;   /* el dedo dibuja, no desplaza la pagina */
}

/* --- Usuarios (hito 5) ------------------------------------------------------ */

.filaUsuario {
  display: flex;
  align-items: center;
  /* [DEFECTO 77] SIN ESTO, EL CODIGO SE METE EN LA MISMA LINEA.
     Juan: "al presionar el botón de entregar código aparecen los valores
     dispersos".

     `.codigoDictado` ya pedía `flex: 1 1 100%` —ancho completo— pero un hijo
     de un contenedor flex NO baja de línea si el contenedor no lo permite:
     se quedaba peleando el mismo renglón con el nombre y los botones, y los
     tres salían aplastados.

     No se vio antes porque el salto SÍ estaba puesto debajo de 560 px
     (defecto 22), que es justo el ancho al que mide la suite de encuadre.
     En el celular se veía bien; en el computador de recepción, no. */
  flex-wrap: wrap;
  gap: 16px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.filaUsuario.inactivo { opacity: .55; }
.filaUsuario .quien { flex: 1; min-width: 0; }
.filaUsuario .quien small { display: block; color: var(--tenue); }
.filaUsuario .quien .chip {
  font-size: 11px; font-weight: 700;
  background: var(--ciruela-luz); color: var(--ciruela-osc);
  border-radius: 6px; padding: 1px 7px; margin-left: 6px;
}
.filaUsuario .rol { min-width: 130px; font-weight: 600; font-size: 13px; }
.filaUsuario .estado { min-width: 170px; }
.filaUsuario .estado small { display: block; color: var(--tenue); font-size: 11.5px; margin-top: 2px; }
.filaUsuario .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
/* [DEFECTO 22] En un celular, 130 + 170 px de anchos minimos no caben al
   lado del nombre: la fila se salia de la pantalla. Ahi la fila se acuesta
   en varios renglones, que es como se lee bien en un telefono. */
@media (max-width: 560px) {
  .filaUsuario { flex-wrap: wrap; gap: 8px 12px; }
  .filaUsuario .quien { flex: 1 0 100%; }
  .filaUsuario .quien small { overflow-wrap: anywhere; }
  .filaUsuario .rol,
  .filaUsuario .estado { min-width: 0; }
  .filaUsuario .acciones { margin-left: auto; }
}

.claveTemporal {
  font-family: Consolas, Menlo, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  background: var(--ciruela-luz);
  color: var(--ciruela-osc);
  border-radius: 10px;
  padding: 16px 10px;
  user-select: all;
}

/* --- Impresion de la historia clinica (hito 5) ------------------------------ */

#zonaImpresion { display: none; }

@media print {
  body > *:not(#zonaImpresion) { display: none !important; }
  #zonaImpresion { display: block !important; color: #000; font-size: 12pt; }

  .impEncabezado { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
  .impMarca { font-size: 16pt; font-weight: 700; letter-spacing: .25em; }
  .impTitulo { font-size: 13pt; margin-top: 2px; }
  .impDatos { margin-top: 6px; }

  .impSeccion { font-weight: 700; letter-spacing: .05em; font-size: 10.5pt;
                margin: 14px 0 6px; border-bottom: 1px solid #999; }
  .impPaquete { margin-bottom: 4px; }

  .impSesion { border: 1px solid #bbb; border-radius: 6px; padding: 8px 10px;
               margin-bottom: 10px; page-break-inside: avoid; }
  .impSesion.anulada { opacity: .6; }
  .impSesion .impFecha { margin-bottom: 4px; }
  .impFirma { margin-top: 6px; border-top: 1px dashed #999; padding-top: 6px; }
  .impFirma img { max-width: 220px; display: block; }

  .impPie { margin-top: 16px; font-size: 9pt; color: #444; }
}

/* --- Inventario (hito 6) ---------------------------------------------------- */

.filaProducto {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.filaProducto.inactivo { opacity: .55; }
/* [OLA 15] El titulo de cada categoria dentro de la lista de inventario */
.tituloCategoriaInv {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ciruela);
  background: var(--fondo);
  padding: 9px 16px 6px;
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 2;
}
.filaProducto .nom { flex: 1; min-width: 0; }
.filaProducto .nom small { display: block; color: var(--tenue); }
.filaProducto .precio { min-width: 90px; font-weight: 700; text-align: right; }
.filaProducto .stock { min-width: 150px; }
.filaProducto .stock small { display: block; color: var(--tenue); font-size: 11.5px; margin-top: 2px; }
.filaProducto .acciones { display: flex; gap: 8px; }

/* --- Tablero de inteligencia (hito 7) --------------------------------------- */

/* ===========================================================================
   EL INICIO: LAS CUATRO TARJETAS Y LOS AVISOS                       [OLA 34]
   ---------------------------------------------------------------------------
   Juan mandó un boceto —cuatro números grandes arriba, y debajo lo que
   necesita atención— «para que el panel piense por el administrador».

   Todo lo de aquí usa `var(...)`: ni un color escrito. Es lo que hace que los
   seis temas sigan sirviendo, y que la prueba de contraste siga midiendo algo
   de verdad.
   =========================================================================== */

.tarjetasInicio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.tarjetaKpi {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 15px 17px 13px;
  min-width: 0;
}

/* El rótulo va ARRIBA y pequeño; la cifra debajo y grande. Al revés —cifra
   arriba, rótulo debajo— hay que leer el número antes de saber de qué es, y
   en cuatro tarjetas seguidas eso son cuatro relecturas. */
.tarjetaKpi .cabeza {
  display: flex; align-items: center; gap: 7px;
  color: var(--tinta-suave);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 7px;
}
.tarjetaKpi .ico { width: 17px; height: 17px; flex: 0 0 auto; color: var(--acento); }

.tarjetaKpi .cifra {
  font-size: 26px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
/* El «de 5» de la experiencia: es unidad, no cifra. Con el mismo tamaño se
   leería «4,7 de 5» como un número raro de cuatro partes. */
.tarjetaKpi .cifra .de { font-size: 14px; font-weight: 600; color: var(--tenue); }

.tarjetaKpi .apunte {
  margin-top: 5px;
  font-size: 12px; color: var(--tenue); line-height: 1.4;
}

/* Los dos que perdieron su tarjeta. Bajan de tamaño, no desaparecen. */
.pieKpis {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  padding: 2px 4px 0;
  font-size: 12.5px; color: var(--tenue);
}
.pieKpis strong { color: var(--tinta-suave); }

/* --- El encabezado de los avisos ------------------------------------------ */
.tituloAtencion {
  display: flex; align-items: center; gap: 9px;
  margin: 20px 0 10px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--tinta-suave);
}
/* El contador. Redondo y discreto: informa cuántas son sin gritarlo — la
   mayoría de los días son oportunidades, no incendios. */
.tituloAtencion em {
  font-style: normal; font-size: 11.5px; font-weight: 700;
  min-width: 20px; padding: 2px 7px;
  border-radius: 999px;
  background: var(--acento-luz); color: var(--acento-osc);
  letter-spacing: 0;
}

.alertasTablero { display: flex; flex-direction: column; gap: 8px; }

.alertaTablero {
  /* [OLA 34] Tres columnas: la PALABRA, lo que dice, y la flecha de que
     lleva a alguna parte. Con `flex-wrap` desde el principio — la lección del
     defecto 77: en un teléfono la explicación necesita el renglón entero. */
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 12px;
  text-align: left;
  width: 100%;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--tenue);
  border-radius: var(--radio);
  padding: 11px 14px;
  cursor: pointer;
  transition: background .12s;
}
.alertaTablero:hover { background: var(--acento-luz); }
.alertaTablero .dice { flex: 1 1 240px; min-width: 0; }
.alertaTablero strong { display: block; font-size: 14px; margin-bottom: 2px; }
.alertaTablero .dice span { display: block; font-size: 12.5px; color: var(--tinta-suave); line-height: 1.4; }

/* LA PALABRA. No es decoración: es lo que hace que la urgencia se entienda
   sin distinguir colores. Uno de cada doce hombres no separa el rojo del
   verde, y en el tema `noche` los tres se apagan. El color acompaña; la
   palabra informa. */
.alertaTablero .marca {
  flex: 0 0 auto;
  align-self: center;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
}
.alertaTablero .lleva {
  flex: 0 0 auto; align-self: center;
  font-size: 20px; color: var(--tenue); line-height: 1;
}

.alertaTablero.roja  { border-left-color: var(--rojo); }
.alertaTablero.ambar { border-left-color: var(--ambar); }
.alertaTablero.verde { border-left-color: var(--verde); }
.alertaTablero.info  { border-left-color: var(--acento); }

/* Las etiquetas van con el color de TEXTO de cada estado sobre un fondo muy
   claro del mismo — nunca texto claro sobre color saturado, que es donde el
   contraste se pierde. */
.alertaTablero.roja  .marca { background: var(--rojo-luz);   color: var(--rojo); }
.alertaTablero.ambar .marca { background: var(--ambar-luz); color: var(--ambar); }
.alertaTablero.verde .marca { background: var(--verde-luz); color: var(--verde); }
.alertaTablero.info  .marca { background: var(--acento-luz); color: var(--acento-osc); }

/* El foco del teclado tiene que verse: son botones, y se recorren con Tab. */
.alertaTablero:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* --- Fotos antes/despues (hito 9) ------------------------------------------- */

.tiraFotos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.marcoFoto {
  position: relative;
  width: 118px; height: 118px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  overflow: hidden;
  background: var(--fondo);
}
.marcoFoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marcoFoto .cargando { text-align: center; line-height: 118px; color: var(--tenue); }
.marcoFoto .tipoFoto {
  position: absolute; left: 4px; bottom: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  background: rgba(43,36,48,.72); color: #fff;
  border-radius: 5px; padding: 1px 6px;
}
.marcoFoto .quitarFoto {
  position: absolute; right: 4px; top: 4px;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(43,36,48,.72); color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer;
}

@media print {
  .impFotos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  .impFotos figure { margin: 0; }
  .impFotos img { width: 130px; height: 130px; object-fit: cover;
                  border: 1px solid #999; border-radius: 4px; }
  .impFotos figcaption { font-size: 8pt; text-align: center; color: #444; }
}

/* ===========================================================================
   HITO 10 - editor de roles: las casillas de permisos agrupadas por modulo
   =========================================================================== */

.rolPermisos {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.grupoPermisos { margin-bottom: 10px; }
.grupoPermisos .tituloModulo {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-suave);
  margin: 4px 0 4px;
}
.casillaPermiso {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px; font-size: 13.5px; cursor: pointer;
}
.casillaPermiso input { width: 16px; height: 16px; accent-color: var(--ciruela); }

/* ===========================================================================
   HITO 11 - receta de insumos y recordatorios de cita
   =========================================================================== */

.lineaInsumo {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.lineaInsumo .queInsumo { flex: 1; min-width: 0; padding: 7px 9px;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--papel); }
.lineaInsumo .cuanto { width: 82px; padding: 7px 9px;
  border: 1px solid var(--linea); border-radius: 8px; }
.lineaInsumo .quitar {
  width: 28px; height: 28px; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel); color: var(--tinta-suave); font-size: 15px;
  line-height: 1; cursor: pointer; flex: none;
}

.filaRecordatorio {
  display: flex; gap: 14px; align-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--ambar);
  border-radius: 10px;
  padding: 9px 14px;
  margin-bottom: 8px;
}
.filaRecordatorio.avisada { border-left-color: var(--verde); opacity: .68; }
.filaRecordatorio .num { font-weight: 700; min-width: 52px; }
.filaRecordatorio .det { flex: 1; min-width: 0; }
.filaRecordatorio .det small { color: var(--tenue); display: block; }

/* ===========================================================================
   HITO 12 - selector de sede en la barra superior
   =========================================================================== */

#selectorSede {
  padding: 5px 10px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
  max-width: 150px;
  flex: none;
}

/* ===========================================================================
   HITO 13 - cinta de licencia
   Ambar cuando falta poco; rojo cuando ya detiene el trabajo nuevo.
   =========================================================================== */

.cintaLicencia {
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--ambar-luz);
  color: var(--ambar);
  border-bottom: 1px solid var(--ambar-linea);
}
.cintaLicencia.grave {
  background: var(--rojo-luz);
  color: var(--rojo);
  border-bottom-color: var(--rojo-linea);
}

/* ===========================================================================
   OLA 16 · LA PANTALLA DE COBRO Y LA TIRILLA
   =========================================================================== */

/* --- La pistola ---------------------------------------------------------- */
.zonaPistola {
  background: var(--ciruela-luz);
  border: 1px solid #e3d3de;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.zonaPistola > span { color: var(--ciruela-osc); font-weight: 700; }
.zonaPistola input {
  font-size: 15px;
  font-family: Consolas, Menlo, monospace;
  letter-spacing: .02em;
}
.zonaPistola input:focus {
  outline: 2px solid var(--ciruela);
  outline-offset: 1px;
}

/* --- Cobro en dos columnas: lo que se vende | la cuenta ------------------- */
.cobroDos {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  align-items: start;
}
.cobroCuenta {
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px 14px;
}
.tituloCobro {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  color: var(--tinta-suave); margin-bottom: 8px;
}
/* En una tableta de mostrador o un celular, una sola columna. */
@media (max-width: 760px) {
  .cobroDos { grid-template-columns: 1fr; }
}

/* --- La previa de la tirilla, a tamaño real ------------------------------- */
.previaTirilla {
  background: var(--rayado);
  border-radius: 10px;
  padding: 14px;
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  justify-content: center;
}
.tirilla {
  /* 80 mm de rollo menos los márgenes que la impresora no alcanza: 72 mm
     es el ancho imprimible real de una Epson TM-T20. */
  width: 72mm;
  /* PAPEL DE VERDAD · [DEFECTO 91] Igual que la firma: esto es la PREVIA de
     lo que va a salir por la impresora termica, y el rollo es blanco con
     tinta negra en los seis temas. Pintarla del tema seria ensenar una
     tirilla que no existe. */
  background: #fff;
  padding: 4mm 3mm;
  color: #000;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10.5pt;
  line-height: 1.35;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.tirilla .centro { text-align: center; }
.tirilla .marca {
  font-weight: 700; font-size: 13pt; letter-spacing: .18em;
  margin-bottom: 2mm;
}
.tirilla .regla { border-top: 1px dashed #000; margin: 2mm 0; }
.tirilla .fila { display: flex; gap: 2mm; }
.tirilla .fila .izq { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tirilla .fila .der { white-space: nowrap; text-align: right; }
.tirilla .grande { font-size: 13pt; font-weight: 700; }
.tirilla .pie { margin-top: 3mm; font-size: 8.5pt; text-align: center; }
/* [OLA 44] Lo que pide la DIAN: la denominación «sistema POS» que se lea de
   lejos, el número en negrita, y la letra chica para la resolución y el
   «1 x $50.000» de cada línea. */
.tirilla .denominacion { font-weight: 700; letter-spacing: .08em; margin: 1mm 0; }
.tirilla .numero { font-weight: 700; }
.tirilla .chica { font-size: 8.5pt; }
.tirilla .sangria { padding-left: 2mm; }
.tirilla .anulada {
  border: 2px solid #000; text-align: center; font-weight: 700;
  padding: 1mm; margin: 2mm 0;
}

/* Al imprimir la tirilla: solo la tirilla, sin el diálogo alrededor. La
   regla de @page (80 mm) NO se puede escribir aquí, porque @page es de
   toda la página y este mismo archivo también imprime historias en A4.
   Se inyecta y se retira al vuelo — ver Caja.imprimirTirilla en caja.js. */
@media print {
  body.imprimiendoTirilla > *:not(#veloTirilla) { display: none !important; }
  body.imprimiendoTirilla #veloTirilla {
    display: block !important;
    position: static; background: none; padding: 0;
  }
  body.imprimiendoTirilla #veloTirilla .dialogo {
    box-shadow: none; border: none; max-width: none; background: none;
  }
  body.imprimiendoTirilla #veloTirilla header,
  body.imprimiendoTirilla #veloTirilla .pie,
  body.imprimiendoTirilla #veloTirilla .ayuda,
  body.imprimiendoTirilla #veloTirilla .casillaPermiso,
  body.imprimiendoTirilla #veloTirilla .avisoFalta,
  body.imprimiendoTirilla #veloTirilla .errorCampo { display: none !important; }
  body.imprimiendoTirilla .previaTirilla {
    background: none; padding: 0; max-height: none; overflow: visible; display: block;
  }
  body.imprimiendoTirilla .tirilla {
    width: auto; box-shadow: none; padding: 0 1mm;
  }
}

/* La linea que acaba de entrar por la pistola parpadea un momento: sin eso,
   pitando rapido uno no sabe si el aparato leyo o no. */
@keyframes entroPorLaPistola {
  from { background: var(--ciruela-luz); }
  to   { background: transparent; }
}
.lineaCobrar.reciencita { animation: entroPorLaPistola .7s ease-out; }

.codigoBarras {
  font-family: Consolas, Menlo, monospace;
  font-size: 11.5px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 0 5px;
}

/* ===========================================================================
   [DEFECTO 22 · seguimiento] LOS DIALOGOS EN UN TELEFONO
   ---------------------------------------------------------------------------
   El arreglo del encuadre cubrio las pantallas, pero no los dialogos: viven
   fuera de #pantallaApp y la prueba de encuadre no los miraba. En un celular
   la fila de una linea de cobro pedia 330 px de anchos fijos y se salia del
   dialogo. Aqui se acuestan en dos renglones, que es como caben.
   =========================================================================== */
@media (max-width: 560px) {
  .velo { padding: 10px; }
  .dialogo { max-height: 94vh; }
  .dialogo .cuerpo { padding: 14px; }
  .dialogo header, .dialogo .pie { padding: 12px 14px; }

  /* Dos campos lado a lado no caben: uno debajo del otro. */
  .pareja { grid-template-columns: 1fr; }

  /* La linea de cobro:
     fila 1  [ que se vende ][cant][ x ]
     fila 2  [ precio ][ quien lo hizo ] */
  .lineaCobrar {
    grid-template-columns: 1fr 56px 26px;
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--linea);
  }
  .lineaCobrar .que    { grid-area: 1 / 1; }
  .lineaCobrar .cant   { grid-area: 1 / 2; }
  .lineaCobrar .quitar { grid-area: 1 / 3; }
  .lineaCobrar .precio { grid-area: 2 / 1; }
  .lineaCobrar .quien  { grid-area: 2 / 2 / 3 / 4; }

  /* La misma idea en las lineas de una receta de insumos. */
  .lineaInsumo { flex-wrap: wrap; }
}

/* ===========================================================================
   OLA 17 · EXISTENCIAS POR SEDE Y TRASLADOS
   =========================================================================== */

/* Cuánto hay del producto en cada sede, en el kardex */
.existenciaSedes {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.existenciaSedes .unaSede {
  flex: 1 1 90px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.existenciaSedes .unaSede strong { display: block; font-size: 20px; color: var(--ciruela-osc); }
.existenciaSedes .unaSede small { color: var(--tenue); }

/* Una línea del traslado: qué, cuántos, y cuánto queda */
.lineaTraslado {
  display: grid;
  grid-template-columns: 1fr 78px 110px 26px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.lineaTraslado select, .lineaTraslado input {
  padding: 7px 9px; border: 1px solid var(--linea); border-radius: 7px; width: 100%;
}
.lineaTraslado .disponible { font-size: 12.5px; color: var(--tenue); }
.lineaTraslado .disponible.pasado { color: var(--rojo); font-weight: 600; }
.lineaTraslado .quitar {
  border: none; background: none; color: var(--tenue); font-size: 17px; padding: 2px;
}
.lineaTraslado .quitar:hover { color: var(--rojo); }

@media (max-width: 560px) {
  .lineaTraslado {
    grid-template-columns: 1fr 70px 26px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--linea);
  }
  .lineaTraslado .que         { grid-area: 1 / 1; }
  .lineaTraslado .cuantos     { grid-area: 1 / 2; }
  .lineaTraslado .quitar      { grid-area: 1 / 3; }
  .lineaTraslado .disponible  { grid-area: 2 / 1 / 3 / 4; }
}


/* ===========================================================================
   MODULOS Y SUS FICHEROS  [OLA 19]
   ---------------------------------------------------------------------------
   Juan: "los menus estan muy dispersos... modulos al estilo de ICG MANAGER y
   que desde ahi se vayan expandiendo los ficheros de cada menu".

   Los siete modulos usan la misma tira que las diez pestañas de antes (clase
   .pestanas), asi que heredan entero el arreglo del defecto 22: se encogen,
   se deslizan con el dedo y no empujan la barra. Lo nuevo es el desplegable.
   =========================================================================== */

.modulos button .flecha {
  display: inline-block;
  margin-left: 5px;
  font-size: 9px;
  opacity: .55;
  transform: translateY(-1px);
}
.modulos button.abierto .flecha { opacity: 1; }

/* El desplegable cuelga de la barra. Position fixed y no absolute: la barra
   es sticky y en un celular se parte en dos filas, asi que la unica medida
   fiable de donde termina es --alto-barra. */
.ficheros {
  position: fixed;
  top: var(--alto-barra);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 10px 24px rgba(43,36,48,.10);
  padding: 12px 18px 14px;
  max-height: calc(100vh - var(--alto-barra));
  overflow-y: auto;
}
.ficheros .tituloModulo {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: 10px;
}
.ficheros .rejillaFicheros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
}
.ficheros .fichero {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: none;
  border-radius: 9px;
  padding: 9px 11px;
  cursor: pointer;
  min-width: 0;
}
.ficheros .fichero:hover { background: var(--fondo); border-color: var(--linea); }
.ficheros .fichero .nom {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--tinta);
  /* Un nombre largo se corta con puntos, nunca ensancha la rejilla */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ficheros .fichero .que {
  font-size: 12px;
  color: var(--tenue);
  margin-top: 1px;
  overflow-wrap: anywhere;
}
.ficheros .fichero.activo { background: var(--ciruela-luz); border-color: transparent; }
.ficheros .fichero.activo .nom { color: var(--ciruela-osc); }

@media (max-width: 560px) {
  .ficheros { padding: 10px 12px 12px; }
  .ficheros .rejillaFicheros { grid-template-columns: 1fr; }
}

/* ===========================================================================
   INICIO: el lobby  [OLA 19]
   =========================================================================== */

.bienvenidaInicio {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.bienvenidaInicio > div:first-child { min-width: 0; flex: 1; }
.bienvenidaInicio .saludo { font-size: 13px; color: var(--tenue); }
.bienvenidaInicio h1 {
  margin: 2px 0 3px;
  font-size: 24px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.bienvenidaInicio .donde { font-size: 13px; color: var(--tinta-suave); overflow-wrap: anywhere; }

.accesosInicio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.accesosInicio button {
  border: 1px solid var(--linea);
  background: var(--papel);
  border-radius: 10px;
  padding: 9px 13px;
  font-weight: 600;
  font-size: 13px;
  color: var(--tinta);
  cursor: pointer;
}
.accesosInicio button:hover { border-color: var(--ciruela); color: var(--ciruela-osc); }

/* ===========================================================================
   EXISTENCIAS EN NEGATIVO  [OLA 19]
   ---------------------------------------------------------------------------
   Un negativo no es un numero mas pequeño: es una deuda del inventario con
   la realidad. Se pinta como lo que es, y no como "poquito stock".
   =========================================================================== */

.enNegativo { color: var(--rojo); font-weight: 700; }
.insigniaDebe {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--rojo-luz);
  color: var(--rojo);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.avisoAjuste {
  border-left: 3px solid var(--ambar);
  padding-left: 10px;
}
.ajuste { margin-bottom: 16px; }


/* ===========================================================================
   PEDIDOS DEL PANEL  [OLA 20]
   ---------------------------------------------------------------------------
   Un pedido se lee de un vistazo mientras se alista, con una caja en la mano:
   quién, qué, cuánto hay de eso en ESTA sede, y qué falta.
   =========================================================================== */

.tarjetaPedido {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 12px;
  overflow: hidden;
}
.cabezaPedido {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--linea);
}
.cabezaPedido strong { display: block; font-size: 14.5px; }
.cabezaPedido small { display: block; font-size: 12px; color: var(--tenue); }
.cabezaPedido .separador { flex: 1; }
.plataPedido { font-weight: 700; white-space: nowrap; }

.cuerpoPedido { padding: 10px 14px; }
.lineaPedido {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13.5px; padding: 3px 0;
}
.lineaPedido .hayPedido { color: var(--tenue); white-space: nowrap; }
.lineaPedido .faltaPedido { color: var(--rojo); font-weight: 700; white-space: nowrap; }

.avisoPedido {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: var(--rojo-luz); color: var(--rojo);
  font-size: 12.5px; line-height: 1.45;
}
.pieCard {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--fondo); border-top: 1px solid var(--linea);
}

@media (max-width: 560px) {
  .cabezaPedido { gap: 6px; }
  .cabezaPedido .separador { flex: 1 0 100%; height: 0; }
}


/* ===========================================================================
   CATALOGO DE TRATAMIENTOS  [OLA 21]
   ---------------------------------------------------------------------------
   La lista se agrupa por NECESIDAD, no alfabeticamente, porque asi es como se
   arma y como se vende: uno mira "grasa localizada" y quiere ver si ya tiene
   sus tres opciones o le falta alguna.
   =========================================================================== */

.grupoNecesidad { margin-bottom: 22px; }
.grupoNecesidad > h3 {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: 15px; margin: 0 0 8px;
}
.grupoNecesidad > h3 small { font-weight: 400; font-size: 12.5px; color: var(--tenue); }

.filaTratamiento {
  display: grid;
  grid-template-columns: 74px 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.filaTratamiento.inactivo { opacity: .55; }
.filaTratamiento .nivel {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  text-align: center; padding: 4px 6px; border-radius: 7px;
  background: var(--fondo); color: var(--tinta-suave); white-space: nowrap;
}
.filaTratamiento .nivel.completo { background: var(--ciruela-luz); color: var(--ciruela-osc); }
.filaTratamiento .nom { min-width: 0; }
.filaTratamiento .nom strong { display: block; font-size: 14.5px; overflow-wrap: anywhere; }
.filaTratamiento .nom small { display: block; font-size: 12.5px; color: var(--tenue); margin-top: 2px; }
.filaTratamiento .plata { text-align: right; white-space: nowrap; }
.filaTratamiento .plata b { font-size: 15px; }
.filaTratamiento .plata .antes {
  display: block; font-size: 12px; color: var(--tenue); text-decoration: line-through;
}
.filaTratamiento .plata .promo {
  display: block; font-size: 11px; font-weight: 700; color: var(--verde);
}

.sinOpciones {
  font-size: 12.5px; color: var(--ambar); background: var(--ambar-luz);
  border-radius: 8px; padding: 7px 10px; margin-bottom: 8px;
}

.lineaPara, .lineaIncluye {
  display: grid; gap: 8px; align-items: center; margin-bottom: 8px;
}
.lineaPara   { grid-template-columns: 1fr 1fr 30px; }
.lineaIncluye{ grid-template-columns: 1fr 130px 66px 30px; }
.lineaPara select, .lineaIncluye input, .lineaIncluye select {
  padding: 8px; border: 1px solid var(--linea); border-radius: 8px; width: 100%;
}
.lineaPara .quitar, .lineaIncluye .quitar {
  border: none; background: none; color: var(--tenue); font-size: 17px; padding: 2px;
}
.lineaPara .quitar:hover, .lineaIncluye .quitar:hover { color: var(--rojo); }

.dosListas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 14px 0; }

@media (max-width: 620px) {
  .filaTratamiento { grid-template-columns: 1fr auto; row-gap: 8px; }
  .filaTratamiento .nivel { grid-area: 1 / 1; justify-self: start; }
  .filaTratamiento .plata { grid-area: 1 / 2; }
  .filaTratamiento .nom   { grid-area: 2 / 1 / 3 / 3; }
  .filaTratamiento .acciones { grid-area: 3 / 1 / 4 / 3; }
  .dosListas { grid-template-columns: 1fr; }
  .lineaIncluye { grid-template-columns: 1fr 66px 30px; }
  .lineaIncluye .queEs { grid-area: 2 / 1 / 3 / 4; }
}

/* ===========================================================================
   LA HOJA DE VALORACION  [OLA 22]
   ---------------------------------------------------------------------------
   La hoja es el dialogo mas largo de BELLORA: interrogatorio, medidas y
   hallazgos en una sola pantalla. Por eso todo lo de aqui se apoya en grid
   con columnas que se colapsan a una sola en el celular — la cosmetologa
   valora con el telefono en la mano, no sentada frente a un escritorio.
   =========================================================================== */

.tituloSeccion {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--linea);
}

/* --- Los hallazgos: zona + necesidad + grado + medida + nota ------------- */
.filaHallazgo {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr .9fr 70px 1.3fr 34px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.filaHallazgo select,
.filaHallazgo input {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--papel);
  font: inherit;
  font-size: 13px;
  color: var(--tinta);
}
.filaHallazgo .quitar {
  padding: 6px 0;
  color: var(--rojo);
}

/* --- El interrogatorio --------------------------------------------------- */
.filaPregunta {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 8px 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--linea);
}
.textoPregunta { font-size: 13.5px; color: var(--tinta); }
.ayudaPregunta {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--tenue);
  margin-top: -2px;
}
.obligatoria { color: var(--ciruela); font-weight: 700; font-size: 12px; }
.filaPregunta .respuesta { display: flex; align-items: center; gap: 10px; }
.filaPregunta .respuesta input[type="text"],
.filaPregunta .respuesta input[type="number"],
.filaPregunta .respuesta select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--papel);
  font: inherit;
  font-size: 13px;
  color: var(--tinta);
}
.filaPregunta .respuesta .casilla { margin: 0; white-space: nowrap; }
.filaPregunta .unidad { font-size: 12px; color: var(--tenue); white-space: nowrap; }

/* --- Que ofrecerle: el momento comercial --------------------------------- */
.bloqueRecomendado { margin-bottom: 18px; }
.opcionRecomendada {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}
.nombreOpcion { font-weight: 600; color: var(--tinta); }
.nombreOpcion .nivel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ciruela-osc);
  background: var(--ciruela-luz);
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
}
.precioOpcion { font-weight: 700; color: var(--ciruela); text-align: right; white-space: nowrap; }
.precioOpcion s { color: var(--tenue); font-weight: 400; font-size: 12px; }
.detalleOpcion { grid-column: 1 / -1; font-size: 12.5px; color: var(--tinta-suave); }

/* --- La lista de preguntas configuradas ---------------------------------- */
.filaLista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linea);
}
.filaLista small { color: var(--tenue); font-size: 12px; }

/* --- En el celular todo se apila ----------------------------------------- */
@media (max-width: 640px) {
  .filaHallazgo { grid-template-columns: 1fr 1fr; }
  .filaHallazgo .hNota { grid-column: 1 / -1; }
  .filaHallazgo .quitar { grid-column: 2; justify-self: end; }
  .filaPregunta { grid-template-columns: 1fr; }
  .opcionRecomendada { grid-template-columns: 1fr; }
  .precioOpcion { text-align: left; }
  .filaLista { flex-direction: column; align-items: flex-start; }
}

/* [DEFECTO 45] Lo que le falta a una pantalla para poder trabajar.
   -------------------------------------------------------------------------
   No es un error rojo —nada se rompió— pero tampoco es una ayuda gris que se
   lee como decoración: es una instrucción. Ámbar, con borde a la izquierda,
   para que se vea sin asustar. */
.avisoFalta {
  background: var(--ambar-luz);
  border-left: 3px solid var(--ambar);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta);
}
.avisoFalta div + div { margin-top: 6px; }
.avisoFalta strong { color: var(--ambar); }

/* [OLA 23] La cinta de "el servidor y las pantallas no son de la misma
   entrega". Va arriba del todo y no se puede cerrar a proposito: mientras
   esten desparejos, cualquier cosa rara que pase tiene una explicacion, y
   hay que tenerla a la vista. */
.cintaVersion {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ambar-luz);
  border-bottom: 1px solid var(--ambar);
  color: var(--tinta);
  padding: 9px 16px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.cintaVersion strong { color: var(--ambar); }
/* [CORRECCION 90] Cuando falto un ARCHIVO no es lo mismo que "el servidor va
   una ola atras": lo primero deja media pantalla sin abrir. Se pinta en rojo
   para que no se lea como el aviso de siempre. */
.cintaVersion.grave {
  background: var(--rojo-luz);
  border-bottom-color: var(--rojo);
  color: var(--tinta);
}
.cintaVersion.grave strong { color: var(--rojo); }
.cintaVersion code {
  background: rgba(0, 0, 0, .05);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

/* [DEFECTO 52] LAS CASILLAS DE SEDE, DENTRO DE UN .campo
   -------------------------------------------------------------------------
   `.campo input { width: 100% }` esta pensado para los campos de texto, y le
   daba ancho COMPLETO tambien a la casilla de verificacion: el cuadrito
   quedaba centrado en mitad de la fila y el nombre de la sede empujado al
   otro extremo. Se veia como si la lista estuviera rota, porque lo estaba.

   Una casilla no es un campo de texto. Se le devuelve su tamano y se
   ordenan en columnas, que es como se lee una lista de sedes. */
.campoSedes .listaSedes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 16px;
  margin-top: 2px;
}
.campoSedes .casilla {
  margin-bottom: 4px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 8px;
}
.campoSedes .casilla:hover { background: var(--ciruela-luz); }
.campoSedes .casilla input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
.campoSedes .casilla span { line-height: 1.25; }

/* ===========================================================================
   LA BANDEJA DE RECEPCION  [OLA 24]
   =========================================================================== */

.tarjetasPropuesta { display: flex; flex-direction: column; gap: 10px; }

/* [OLA 37] Trazabilidad: la lista de las que no vinieron, y el hilo. Los
   colores son las variables del tema, siempre en su par (fondo-luz + letra). */
.tarjetaPropuesta.traz-no { border-left: 4px solid var(--rojo); }
.tarjetaPropuesta.traz-abierta { border-left: 4px solid var(--ambar); }
.pastilla.no_asistio { background: var(--rojo-luz); color: var(--rojo); }
.pastilla.sin_cerrar { background: var(--ambar-luz); color: var(--ambar); }
.hiloProp { font-size: 12.5px; font-weight: 600; color: var(--ciruela-osc);
            background: var(--ciruela-luz); border-radius: 8px; padding: 5px 9px; margin: 6px 0; }
.hiloProp.tarde { background: var(--ambar-luz); color: var(--ambar); }
.hilo { display: flex; flex-direction: column; gap: 0; }
.hiloEvento { display: grid; grid-template-columns: 118px 1fr; gap: 10px;
              padding: 8px 0 8px 12px; border-left: 3px solid var(--linea); font-size: 13px; }
.hiloEvento.bien { border-left-color: var(--verde); }
.hiloEvento.malo { border-left-color: var(--rojo); }
.hiloEvento.ambar { border-left-color: var(--ambar); }
.hiloCuando { color: var(--tenue); font-size: 12px; padding-top: 1px; }
.hiloQue em { color: var(--tenue); }
.vacio { padding: 18px 14px; color: var(--tenue); font-size: 13.5px; line-height: 1.5; }

.tarjetaPropuesta {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--tarjeta, var(--papel));
}

/* La que ya venció se ve distinta SIN dejar de leerse. Un rojo de fondo la
   escondería justo cuando hay que mirarla. */
.tarjetaPropuesta.vencida { border-left: 4px solid var(--malo, #c0392b); }

.filaPropuesta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.numPropuesta {
  font-weight: 700; color: var(--tenue); min-width: 44px;
}
.quienPropuesta { flex: 1 1 180px; min-width: 0; }
.nombreClienta { font-weight: 600; }
.plataPropuesta { font-weight: 700; white-space: nowrap; }
.estadoPropuesta { white-space: nowrap; }

.ofrecidoPropuesta {
  margin-top: 6px; font-size: 13px; color: var(--tenue);
  /* Se corta con puntos y no se envuelve en cinco renglones: la bandeja se
     mira de reojo entre clienta y clienta, y el detalle está a un clic. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.motivoPropuesta { margin-top: 6px; }

.botonesPropuesta {
  margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
}

/* Una línea marcada como comprada, y una descartada. Las dos se leen: en el
   detalle importa tanto lo que se llevó como lo que dejó. */
.opcionRecomendada.elegida { border-left: 3px solid var(--bueno, #27ae60); }
.opcionRecomendada.descartada { opacity: 0.62; }

/* [DEFECTO 52] La casilla NO puede heredar el width:100% de .campo input.
   Aquí van dentro de listas, igual que las de sede. */
.lineaElegible input[type="checkbox"],
.marcarProponer input[type="checkbox"] {
  width: auto; flex: 0 0 auto; margin: 0; padding: 0;
}
.lineaElegible { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.marcarProponer { display: inline-flex; gap: 6px; align-items: center; margin: 0 0 4px; font-size: 12.5px; }

/* ===========================================================================
   LAS COMISIONES GUARDADAS  [OLA 25]
   =========================================================================== */

/* Un acta deshecha se ve deshecha, y se sigue leyendo: lo que pasó importa
   tanto como lo que quedó. */
.tabla tr.anulada td { opacity: 0.6; text-decoration: line-through; }
.tabla tr.anulada td .ayuda { text-decoration: none; }

/* La línea del ticket que sale de una propuesta: se marca para que en el
   cobro se vea de un vistazo cuál lleva comisión de quien valoró. */
.lineaCobrar.deLaPropuesta { border-left: 3px solid var(--acento, #7c3f6a); padding-left: 6px; }

/* [OLA 27] La clienta levantó la mano desde su panel: se ve sin buscarlo. */
.tarjetaPropuesta .interesada {
  background: var(--acento-luz, #f6eef4);
  border-left: 3px solid var(--acento, #7c3f6a);
  padding: 6px 10px; border-radius: 6px;
}

/* =========================================================================
   NIVELES Y CONTINUIDAD                                          [OLA 28]
   ========================================================================= */

/* LA PASTILLA DEL MOTIVO. Cuatro razones, cuatro colores, y el orden del
   color es el de la urgencia: lo pagado en verde porque el salón ya tiene
   esa plata y es la llamada más fácil; lo que se enfría en gris porque es
   la que menos apura. Un rojo para todo no ordenaría nada. */
.pastilla {
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--linea); color: var(--tinta-suave);
}
.pastilla.pago_no_vino { background: var(--verde-luz); color: var(--verde); }
.pastilla.propuesta    { background: var(--ambar-luz); color: var(--ambar); }
.pastilla.sin_venir    { background: var(--linea); color: var(--tinta-suave); }
.pastilla.termino      { background: var(--ciruela-luz); color: var(--ciruela); }

.tarjetaPropuesta.motivo-pago_no_vino { border-left: 4px solid var(--verde); }
.tarjetaPropuesta.motivo-propuesta    { border-left: 4px solid var(--ambar); }
.tarjetaPropuesta.motivo-termino      { border-left: 4px solid var(--ciruela); }

/* EL PORQUÉ. Va en su propio renglón y no de subtítulo: es lo que quien
   marca el teléfono tiene que leer antes de que le contesten. */
.porQue {
  margin: 8px 0 10px;
  padding: 7px 10px;
  background: var(--fondo);
  border-radius: 7px;
}

/* Lo retirado se ve, tachado y en gris. Esconderlo haría imposible
   entender por qué no se puede volver a usar ese nombre. */
.tarjetaPropuesta.retirado { opacity: .62; }
.listaBeneficios { margin: 4px 0 10px; padding-left: 18px; font-size: 13.5px; }
.listaBeneficios li { margin: 3px 0; }
.listaBeneficios li.retirado { text-decoration: line-through; color: var(--tenue); }

.comoEnlace {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--ciruela); text-decoration: underline; text-underline-offset: 2px;
}

/* EL NIVEL EN LA FICHA. Discreto: la ficha es de la clienta, no de su
   nivel — pero la insignia tiene que leerse de un vistazo, porque es lo
   que recepción mira mientras la tiene delante. */
.bloqueNivel {
  border: 1px solid var(--ciruela-luz);
  background: var(--ciruela-luz);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.bloqueNivel.sinNivel { background: var(--fondo); border-color: var(--linea); }
.insigniaNivel {
  display: inline-block; font-weight: 700; font-size: 14px;
  color: #fff; background: var(--ciruela);
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}
.bloqueNivel .listaBeneficios { margin-bottom: 0; }

/* =========================================================================
   LA SEGUNDA FILA DE LA BARRA                                    [OLA 29]
   =========================================================================
   Más discreta que la de arriba a propósito: lo de arriba es lo que se hace
   ahora (cobrar, cerrar); esto es lo que se consulta de vez en cuando. Si
   las dos filas pesaran igual, no habría servido de nada partirlas. */
.subbarra.segundaFila {
  background: var(--fondo);
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 13px;
  color: var(--tinta-suave);
}

/* El código que recepción le dicta por teléfono            [OLA 29]
   Grande porque se lee en voz alta mientras se sostiene el teléfono con el
   hombro, y con el fondo de la marca para que se distinga del resto de la
   fila a la primera. */
.codigoDictado {
  flex: 1 1 100%;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--ciruela-luz);
  border-radius: 10px;
}
.numeroCodigo {
  font-size: 30px; font-weight: 800; letter-spacing: 4px;
  color: var(--ciruela); font-variant-numeric: tabular-nums;
}

/* La clienta de otra sede                                   [OLA 29]
   Ámbar y no rojo: no es un error ni un impedimento, es un dato que hay que
   saber antes de hablarle. Rojo diría «no la atienda». */
.deOtraSede {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px;
  background: var(--ambar-luz); color: var(--ambar);
  vertical-align: middle;
}

/* Los históricos de informes                                [OLA 29] */
.tablaComisiones .der { text-align: right; }
.tablaComisiones tr.anulada { opacity: .55; text-decoration: line-through; }
.tablaComisiones tr.anulada small { text-decoration: none; }
.tablaComisiones td.malo { color: var(--rojo); font-weight: 700; }
.tablaComisiones td.ambar { color: var(--ambar); font-weight: 700; }
.subbarra .boton.activo {
  background: var(--ciruela); color: #fff; border-color: var(--ciruela);
}

/* ===========================================================================
   LOS CUADRITOS PARA ELEGIR TEMA                                    [OLA 32]
   ---------------------------------------------------------------------------
   Cada botón se pinta CON EL TEMA QUE OFRECE (ver css/temas.css): lleva su
   propio `data-tema` y hereda de ahí las variables. Por eso aquí no hay ni
   un color escrito — solo `var(...)`. Escribir los colores aquí sería una
   segunda lista que un día diría otra cosa que el archivo que de verdad
   pinta, y Juan elegiría un cuadrito y le saldría otro sistema.
   =========================================================================== */
.temas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.tema {
  display: block;
  text-align: left;
  cursor: pointer;
  font: inherit;
  padding: 11px 12px;
  border-radius: var(--radio);
  border: 2px solid var(--linea);
  background: var(--papel);
  color: var(--tinta);
}
.tema.elegido { border-color: var(--acento); }
.tema strong { display: block; font-size: 14px; margin-top: 8px; }
.tema small  { display: block; font-size: 12px; color: var(--tenue); line-height: 1.35; }

/* Tres franjas: el fondo, el acento y la tinta. Son las tres decisiones que
   de verdad cambian de un tema a otro; enseñar doce cuadritos de color no
   ayudaría a elegir, solo llenaría la pantalla. */
.tema .muestra { display: flex; height: 22px; border-radius: 6px; overflow: hidden;
                 border: 1px solid var(--linea); }
.tema .muestra i { flex: 1; display: block; }
.tema .muestra .mFondo  { background: var(--fondo); }
.tema .muestra .mAcento { background: var(--acento); flex: 2; }
.tema .muestra .mTinta  { background: var(--tinta); }

/* El foco del teclado tiene que verse: quien elige con Tab no puede quedarse
   sin saber dónde está. */
.tema:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ===========================================================================
   LAS CASILLAS DE LOS FICHEROS DEL NEGOCIO                          [OLA 32]
   ---------------------------------------------------------------------------
   Juan: "una barbería no necesita valoraciones ni notas de valoración".
   Lo esencial sale en gris y sin casilla: se ve que existe y se entiende que
   no se toca. Esconderlo dejaría a alguien buscando por qué faltan cuatro.
   =========================================================================== */
/* [DEFECTO 84] Se llamaba `.modulos`, y ESE NOMBRE YA EXISTIA: la barra de
   navegacion de arriba es `<nav class="pestanas modulos" id="modulos">`. Al
   declarar `.modulos { display: grid }` la barra entera se volvio una
   columna vertical y se comio la pantalla — los botones seguian ahi,
   visibles y pulsables para el navegador, pero tapados por el panel de
   Inicio. La suite se quedo treinta segundos intentando pulsar «Almacén».
   Un nombre de clase nuevo hay que buscarlo antes de escribirlo. */
.listaModulos { display: grid; gap: 2px; }
.filaModulo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--linea);
}
.filaModulo:last-child { border-bottom: none; }
.filaModulo input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; }
.filaModulo .queEs { flex: 1; min-width: 0; }
.filaModulo .queEs strong { display: block; font-size: 14px; }
.filaModulo .queEs small { display: block; color: var(--tenue); font-size: 12.5px; line-height: 1.4; }
.filaModulo.fijo { opacity: .72; }
.filaModulo .siempre {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tenue); white-space: nowrap; margin-top: 2px;
}

/* [OLA 33] Los dos botones de la app, uno al lado del otro y con salto de
   línea en pantalla angosta. `flex-wrap` desde el principio: es la lección
   del defecto 77, que costó que el código del panel saliera aplastado. */
.filaBotones { display: flex; flex-wrap: wrap; gap: 8px; }


/* ===========================================================================
   CONSULTA DE VENTAS  [OLA 39]
   =========================================================================== */
.cvResumen { margin: 4px 0 12px; font-size: 14px; color: var(--tinta-suave); }
.cvResumen strong { color: var(--tinta); font-size: 16px; }
.cvResumen .cvAnuladas { color: var(--rojo); font-size: 12.5px; }
.tablaConsulta td.cvQue { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-suave); }
.tablaConsulta td, .tablaConsulta th { white-space: nowrap; }
.cvPaginas { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 4px 0 18px; color: var(--tinta-suave); font-size: 13.5px; }
@media (max-width: 560px) {
  .tablaConsulta td.cvQue { max-width: 160px; }
}


/* ===========================================================================
   INDICADORES Y GRÁFICAS  [OLA 40]
   ---------------------------------------------------------------------------
   Todo con variables del tema (decisión 91). Las gráficas son SVG que se
   estira al ancho de su tarjeta; el texto de adentro es del tamaño del
   viewBox, y por eso la tarjeta tiene un ancho mínimo.
   =========================================================================== */
.indCifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.indCifra { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.indCifra .e { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); font-weight: 700; }
.indCifra .v { font-size: 22px; font-weight: 700; color: var(--tinta); margin: 4px 0 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.indCifra .d { font-size: 12.5px; color: var(--tinta-suave); }
.indVar { display: block; font-size: 12px; margin-top: 6px; color: var(--tenue); }
.indVar.sube { color: var(--verde); }
.indVar.baja { color: var(--rojo); }
.indRejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.indTarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px 10px; min-width: 0; }
.indTitulo { font-size: 13px; font-weight: 700; color: var(--tinta); margin-bottom: 8px; }
.indTitulo small { display: block; font-weight: 500; color: var(--tenue); font-size: 12px; margin-top: 1px; }
.indGrafica { min-height: 120px; }

.graf { width: 100%; height: auto; display: block; }
.grafRejilla { stroke: var(--linea); stroke-width: 1; }
.grafEje { font-size: 11px; fill: var(--tenue); font-family: inherit; }
.grafEje.grafActual { fill: var(--tinta); font-weight: 700; }
.grafLeyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--tinta-suave); margin-top: 6px; }
.grafLeyenda.vertical { flex-direction: column; gap: 5px; }
.grafLeyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.grafLeyenda b { color: var(--tinta); }
.grafVacia { color: var(--tenue); font-size: 13px; padding: 22px 6px; text-align: center; }
.grafRanking { display: grid; gap: 7px; }
.grafFila { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr auto; gap: 10px; align-items: center; font-size: 13px; }
.grafNombre { color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafNombre small { display: block; color: var(--tenue); font-size: 11.5px; }
.grafBarra { background: var(--fondo); border-radius: 6px; height: 14px; overflow: hidden; }
.grafBarra i { display: block; height: 100%; border-radius: 6px; }
.grafValor { color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafDonaCaja { display: flex; align-items: center; gap: 16px; }
.grafDona { width: 150px; height: 150px; flex: 0 0 auto; }
.grafCentro { font-size: 11px; fill: var(--tinta-suave); font-family: inherit; }
@media (max-width: 560px) {
  .indRejilla { grid-template-columns: 1fr; }
  .grafFila { grid-template-columns: minmax(90px, 1fr) 1.4fr auto; }
}

/* =========================================================================
   [OLA 43] IMPUESTOS
   ========================================================================= */
.tarjetaImpuestos { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px 10px; }
.tarjetaImpuestos .pareja { align-items: start; }
.tablaImpuestos { display: grid; gap: 6px; }
.tablaImpuestos .rol.tarifa { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tinta); min-width: 90px; text-align: right; }
.tablaImpuestos .rol.tarifa small { display: block; font-weight: 500; font-size: 11px; }
.bloqueFiscal { border-left: 3px solid var(--acento); padding: 6px 0 2px 12px; margin: 4px 0 12px; }
.listaImpuestos { display: grid; gap: 4px; margin-top: 4px; }
.casillaImpuesto { display: grid; grid-template-columns: 1fr 110px; gap: 10px; align-items: center; }
.casillaImpuesto .casilla { margin: 0; }
.casillaImpuesto .casilla small { color: var(--tenue); }
.casillaImpuesto .tarifaPropia { padding: 5px 8px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; width: 100%; text-align: right; background: var(--papel); color: var(--tinta); }
.casillaImpuesto .tarifaPropia:disabled { opacity: .5; }
.fiscalCobro { margin-top: 8px; padding: 8px 10px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; font-size: 13px; }
.fiscalCobro .filaFiscal { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.fiscalCobro .filaFiscal small { color: var(--tenue); }
.fiscalCobro .filaFiscal.retencion { color: var(--ambar); }
.fiscalCobro .filaFiscal.neto { font-weight: 700; font-size: 15px; border-top: 1px solid var(--linea); margin-top: 4px; padding-top: 6px; }
@media (max-width: 560px) {
  .casillaImpuesto { grid-template-columns: 1fr 90px; }
}