/* ===========================================================================
   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;
  --tenue:        #9b93a3;
  --linea:        #e6e1ea;
  --fondo:        #f7f5f9;
  --papel:        #ffffff;

  --ciruela:      #7c3f6a;
  --ciruela-osc:  #5f2f51;
  --ciruela-luz:  #f3e8f0;

  --verde:        #2f7d5c;
  --ambar:        #b5721a;
  --rojo:         #b3352f;
  --rojo-luz:     #fdecea;

  --alto-hora:    96px;   /* 1 hora = 96 px  ->  1 minuto = 1.6 px */
  --ancho-horas:  62px;
  --radio:        10px;
  --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%;
  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: #faf8fb; border-color: #d6cfdc; }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

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

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

.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; }

.ayuda { font-size: 12px; color: var(--tenue); margin: -8px 0 14px; }

/* ===========================================================================
   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);
}

.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%; }

.barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  height: 56px;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  flex-shrink: 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; }

.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 #efebf2;
}
.franja.fuera { background: repeating-linear-gradient(45deg, #fbfafc, #fbfafc 6px, #f4f2f6 6px, #f4f2f6 12px); }
.franja:hover { background: #fcfbfd; }

/* 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; }
.cita .que { opacity: .92; }
.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: #fcfbfd;
  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 #f2eff5;
}
.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: #e4f2ea; color: var(--verde); }
.etiquetaEstado.ambar { background: #fbf0dd; color: var(--ambar); }
.etiquetaEstado.rojo  { background: var(--rojo-luz); color: var(--rojo); }

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

#avisos {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 380px;
}
.aviso {
  background: #322a37;
  color: #fff;
  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
   =========================================================================== */

@media (max-width: 700px) {
  :root { --alto-hora: 76px; --ancho-horas: 48px; }
  .columna { width: 150px; }
  .barra .negocio { display: none; }
  #tituloFecha { min-width: 0; font-size: 13.5px; }
}

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

.pestanas {
  display: flex;
  gap: 2px;
  margin-left: 6px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 3px;
}
.pestanas button {
  border: none;
  background: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--tinta-suave);
}
.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 #f2eff5;
  cursor: pointer;
}
.filaClienta:hover { background: #faf8fb; }
.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 #f2eff5;
}
.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: #fbf0dd; border: 1px solid #ecd9b4; 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; }
  .panelDetalle.enfocado { display: block; position: fixed; inset: 56px 0 0; 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 64px 110px 130px 30px;
  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); }

.pagoCobrar {
  display: grid;
  grid-template-columns: 150px 1fr 110px 70px 30px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.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 #f2eff5;
  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: #fff;
}

.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 #f2eff5;
  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: #fff;
}
.sesionHistoria .zonaFirmaImg small { margin-top: 3px; }

.lienzoFirma {
  display: block;
  width: 100%;
  height: 160px;
  border: 2px dashed var(--linea);
  border-radius: 10px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;   /* el dedo dibuja, no desplaza la pagina */
}

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

.filaUsuario {
  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;
}
.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; }

.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; }
.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) --------------------------------------- */

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

.alertaTablero {
  display: block;
  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(--ciruela-luz); }
.alertaTablero strong { display: block; font-size: 14px; margin-bottom: 2px; }
.alertaTablero span { display: block; font-size: 12.5px; color: var(--tinta-suave); line-height: 1.4; }
.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: #2f6f8f; }

/* --- 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: #fdf4e3;
  color: var(--ambar);
  border-bottom: 1px solid #f0e2c8;
}
.cintaLicencia.grave {
  background: var(--rojo-luz);
  color: var(--rojo);
  border-bottom-color: #f5cfcc;
}