/* =========================================================
   O2 SESIONES — hoja de estilos
   Ruta: /domains/sesiones.o2bajopresion.com/public_html/assets/app.css

   Idea: la agenda es un panel de instrumentos, no una hoja de cálculo.
   Horas y contadores en mono tabular, escala de tiempo con marcas de
   aguja, y color solo donde significa algo (pendiente de cobro,
   sesión regalada, hueco libre).
   ========================================================= */

:root {
  /* Color */
  --tinta:        #0B1E26;   /* petróleo profundo: texto y barra superior */
  --tinta-2:      #476069;   /* texto secundario */
  --linea:        #CBD8DC;
  --linea-suave:  #E3EAEC;
  --papel:        #EEF2F3;   /* fondo de la app */
  --blanco:       #FFFFFF;

  --senal:        #007F86;   /* acción y sesión confirmada */
  --senal-suave:  #E0F1F1;
  --aviso:        #A96A00;   /* queda dinero por cobrar */
  --aviso-suave:  #FBF0DC;
  --regalo:       #9C3F63;   /* sesión no facturada / contraprestación pendiente */
  --regalo-suave: #F8E7EE;
  --error:        #A62B2B;
  --error-suave:  #F8E4E4;

  /* Tipografía */
  --fuente:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Espacio y forma */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radio: 6px;
  --toque: 44px;              /* área táctil mínima */
  --sombra: 0 1px 2px rgba(11, 30, 38, .08), 0 4px 12px rgba(11, 30, 38, .06);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 var(--sp-3); line-height: 1.2; font-weight: 600; }
h1 { font-size: 1.375rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }

a { color: var(--senal); }

/* Números, horas y contadores: siempre mono y tabular, para que las
   columnas del calendario no bailen al cambiar de cifra. */
.num, .hora, time, td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

:focus-visible {
  outline: 2px solid var(--senal);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------
   Marca
   --------------------------------------------------------- */

.marca__simbolo {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: .02em;
}
.marca__simbolo sub { font-size: .6em; }
.marca__texto { font-weight: 600; }
.marca__app {
  font-family: var(--mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinta-2);
}

/* ---------------------------------------------------------
   Acceso
   --------------------------------------------------------- */

.pantalla-acceso { background: var(--tinta); }

.acceso {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom));
}

.acceso__marca {
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  color: var(--blanco);
}

/* La única licencia visual de la pantalla: una escala de aguja bajo la
   marca, como el manómetro de la cámara. */
.acceso__marca::after {
  content: "";
  width: 180px; height: 10px;
  margin-top: var(--sp-3);
  background-image: repeating-linear-gradient(
    to right,
    rgba(255,255,255,.55) 0 1px,
    transparent 1px 15px
  );
  background-position: center bottom;
}

.acceso__form { width: min(380px, 100%); }
.acceso__nota {
  margin: 0;
  font-size: .8125rem;
  color: var(--tinta-2);
  text-align: center;
}

/* ---------------------------------------------------------
   Bloques
   --------------------------------------------------------- */

.tarjeta {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.aviso {
  margin: 0;
  padding: var(--sp-3);
  border-left: 3px solid;
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: .9375rem;
}
.aviso--error  { background: var(--error-suave);  border-color: var(--error); }
.aviso--cobro  { background: var(--aviso-suave);  border-color: var(--aviso); }
.aviso--regalo { background: var(--regalo-suave); border-color: var(--regalo); }
.aviso--ok     { background: var(--senal-suave);  border-color: var(--senal); }

/* ---------------------------------------------------------
   Formularios
   --------------------------------------------------------- */

.campo { display: grid; gap: var(--sp-1); }

.campo__etiqueta {
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-2);
}

.campo__control {
  min-height: var(--toque);
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.campo__control:focus { border-color: var(--senal); }

.campo__control[type="date"],
.campo__control[type="time"],
.campo__control[type="number"] { font-family: var(--mono); }

.boton {
  min-height: var(--toque);
  padding: var(--sp-2) var(--sp-4);
  font: inherit;
  font-weight: 500;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
}
.boton:hover { border-color: var(--tinta-2); }
.boton--principal {
  color: var(--blanco);
  background: var(--senal);
  border-color: var(--senal);
}
.boton--principal:hover { background: #016A70; }
.boton--peligro { color: var(--error); border-color: var(--error); }
.boton--ancho { width: 100%; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------
   Estructura de la aplicación
   --------------------------------------------------------- */

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-4);
  padding-top: calc(var(--sp-2) + env(safe-area-inset-top));
  color: var(--blanco);
  background: var(--tinta);
}
.barra__centro {
  margin-left: auto;
  font-size: .8125rem;
  color: rgba(255,255,255,.75);
}

.contenido {
  padding: var(--sp-4);
  padding-bottom: calc(72px + env(safe-area-inset-bottom)); /* hueco de la nav inferior */
  max-width: 1400px;
  margin: 0 auto;
}

/* Navegación inferior en móvil: es la vista del operador en sala. */
.nav {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--blanco);
  border-top: 1px solid var(--linea);
}
.nav__enlace {
  flex: 1;
  display: grid; place-items: center; gap: 2px;
  min-height: 60px;
  font-size: .6875rem;
  text-decoration: none;
  color: var(--tinta-2);
}
.nav__enlace[aria-current="page"] {
  color: var(--senal);
  box-shadow: inset 0 2px 0 var(--senal);
}

@media (min-width: 1024px) {
  .nav {
    position: sticky; inset: 56px auto auto 0;
    flex-direction: column;
    width: 200px; height: calc(100dvh - 56px);
    border-top: 0; border-right: 1px solid var(--linea);
  }
  .nav__enlace {
    flex: 0 0 auto;
    grid-auto-flow: column;
    justify-content: start; gap: var(--sp-3);
    padding: 0 var(--sp-4);
    min-height: 48px;
    font-size: .9375rem;
  }
  .nav__enlace[aria-current="page"] { box-shadow: inset 3px 0 0 var(--senal); }
  .marco { display: flex; align-items: flex-start; }
  .contenido { flex: 1; padding: var(--sp-5); padding-bottom: var(--sp-5); }
}

/* ---------------------------------------------------------
   Rejilla de la agenda
   Las columnas se generan con --columnas desde PHP: tantas como
   cámaras activas tenga el centro. Nunca dos fijas.
   --------------------------------------------------------- */

.agenda {
  display: grid;
  grid-template-columns: 64px repeat(var(--columnas, 2), minmax(0, 1fr));
  gap: 1px;
  background: var(--linea-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}

.agenda__cabecera {
  position: sticky; top: 56px; z-index: 10;
  padding: var(--sp-2);
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
  background: var(--blanco);
}

/* Escala de tiempo con marca de aguja a la izquierda */
.agenda__hora {
  display: grid;
  align-content: center;
  padding: var(--sp-2) var(--sp-1);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--tinta-2);
  text-align: right;
  background: var(--blanco);
  border-right: 2px solid var(--linea);
}

.hueco {
  min-height: 64px;
  padding: var(--sp-2);
  background: var(--blanco);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hueco:hover { background: var(--senal-suave); }
.hueco--libre { color: var(--tinta-2); }
.hueco--libre::before { content: "+"; font-family: var(--mono); opacity: .5; }

.sesion {
  display: grid; gap: 2px;
  min-height: 64px;
  padding: var(--sp-2);
  background: var(--blanco);
  border-left: 3px solid var(--senal);
  text-align: left;
  cursor: pointer;
}
.sesion--cobro   { border-left-color: var(--aviso);  background: var(--aviso-suave); }
.sesion--regalo  { border-left-color: var(--regalo); background: var(--regalo-suave); }
.sesion--anulada { opacity: .45; text-decoration: line-through; }
.sesion__cliente { font-weight: 500; }
.sesion__pie {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--tinta-2);
}

/* En móvil no hay scroll horizontal: un día por pantalla y las
   cámaras apiladas. Cambiar de día se hace con los botones de la cabecera. */
@media (max-width: 767px) {
  .agenda { grid-template-columns: 56px minmax(0, 1fr); }
  .agenda--multi { grid-template-columns: 56px minmax(0, 1fr); }
}

/* ---------------------------------------------------------
   Listas que en móvil dejan de ser tabla
   --------------------------------------------------------- */

.tabla { width: 100%; border-collapse: collapse; background: var(--blanco); }
.tabla th, .tabla td {
  padding: var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--linea-suave);
}
.tabla th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-2);
}

@media (max-width: 767px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr {
    margin-bottom: var(--sp-3);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
  }
  .tabla td { border: 0; padding: var(--sp-2) var(--sp-3); }
  .tabla td::before {
    content: attr(data-etiqueta) " ";
    font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--tinta-2);
  }
}

/* ---------------------------------------------------------
   Distintivos
   --------------------------------------------------------- */

.marca-estado {
  display: inline-block;
  padding: 2px var(--sp-2);
  font-family: var(--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 3px;
  background: var(--linea-suave);
  color: var(--tinta-2);
}
.marca-estado--bono   { background: var(--senal-suave);  color: var(--senal); }
.marca-estado--cobro  { background: var(--aviso-suave);  color: var(--aviso); }
.marca-estado--regalo { background: var(--regalo-suave); color: var(--regalo); }

/* ---------------------------------------------------------
   Añadidos del bloque 2
   --------------------------------------------------------- */

.barra strong { font-weight: 600; }

.barra__salir {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .875rem;
  padding: var(--sp-2);
}
.barra__salir:hover { color: var(--blanco); }

.selector-centro {
  font: inherit;
  font-size: .8125rem;
  color: var(--blanco);
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radio);
  padding: 4px var(--sp-2);
}
.selector-centro option { color: var(--tinta); }

.bloque { margin-bottom: var(--sp-6); }
.bloque > h2 { margin-bottom: var(--sp-2); }

.texto-guia {
  margin: 0 0 var(--sp-3);
  color: var(--tinta-2);
  font-size: .9375rem;
  max-width: 62ch;
}

.formulario { max-width: 480px; }

.campo__ayuda {
  font-size: .8125rem;
  color: var(--tinta-2);
}

.boton--pequeno {
  min-height: 36px;
  padding: var(--sp-1) var(--sp-3);
  font-size: .8125rem;
}

.fila--inactiva { opacity: .55; }

.lista-franjas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0; padding: 0;
  list-style: none;
}
.lista-franjas li {
  padding: var(--sp-1) var(--sp-3);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-size: .8125rem;
}

.lista-datos {
  margin: 0; padding-left: 1.2em;
  color: var(--tinta-2);
  font-size: .9375rem;
}
.lista-datos li { margin-bottom: var(--sp-1); }
.lista-datos strong { color: var(--tinta); }

.tabla form { margin: 0; }

/* ---------------------------------------------------------
   Clientes, consentimiento y revisiones
   --------------------------------------------------------- */

/* Arregla los títulos pegados al bloque anterior */
.bloque + .bloque { margin-top: var(--sp-6); }
h2 { margin-top: var(--sp-5); }
.bloque > h2:first-child, .tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }

.barra-busqueda {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.barra-busqueda .campo__control { flex: 1; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.filtro {
  padding: var(--sp-1) var(--sp-3);
  font-size: .875rem;
  text-decoration: none;
  color: var(--tinta-2);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 999px;
}
.filtro--activo {
  color: var(--blanco);
  background: var(--senal);
  border-color: var(--senal);
}

.cabecera-ficha {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.cabecera-ficha h1, .cabecera-ficha h2 { margin: 0; }

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}

.campos-pareja {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 600px) {
  .campos-pareja { grid-template-columns: 1fr 1fr; }
}

.campo--casilla {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  cursor: pointer;
}
.campo--casilla input[type="checkbox"] {
  width: 24px; height: 24px;
  margin-top: 2px;
  accent-color: var(--senal);
  flex: none;
}
.campo--grave { color: var(--error); font-weight: 500; }
.campo--grave input[type="checkbox"] { accent-color: var(--error); }
.campo--declaracion {
  padding: var(--sp-3);
  background: var(--papel);
  border-radius: var(--radio);
  font-size: .9375rem;
}

.grupo {
  margin: 0 0 var(--sp-4);
  padding: 0 0 0 var(--sp-3);
  border: 0;
  border-left: 2px solid var(--linea);
}
.grupo legend {
  padding: 0;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-2);
}

.formulario--ancho { max-width: 780px; }
.formulario--ancho > .tarjeta { margin-bottom: var(--sp-4); }

.documento__texto {
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: var(--sp-3);
  background: var(--papel);
  border-radius: var(--radio);
  font-family: var(--fuente);
  font-size: .9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.firma { margin: var(--sp-4) 0; }
.firma__lienzo {
  display: block;
  width: 100%;
  height: 220px;
  background: var(--blanco);
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  touch-action: none;   /* que firmar no haga scroll */
}
.firma__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.desplegable > summary {
  padding: var(--sp-3);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  font-weight: 500;
}
.desplegable[open] > summary { margin-bottom: var(--sp-3); }

.plegable { margin-top: var(--sp-3); }

.caso { margin-bottom: var(--sp-4); }
.caso .formulario { max-width: none; }

/* ---------------------------------------------------------
   Documento firmado (pantalla e impresión)
   --------------------------------------------------------- */

.pagina-documento { background: var(--papel); }

.documento-impreso {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
  background: var(--blanco);
}
.documento-impreso__cabecera {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--tinta);
  font-size: .8125rem;
}
.documento-impreso__pie {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--linea);
  font-size: .75rem;
  color: var(--tinta-2);
  word-break: break-all;
}
.firma-guardada {
  display: block;
  max-width: 320px;
  border-bottom: 1px solid var(--tinta);
}

@media print {
  .no-imprimir, .barra, .nav { display: none !important; }
  body { background: #fff; }
  .documento-impreso { max-width: none; padding: 0; }
  .documento__texto { max-height: none; overflow: visible; background: transparent; }
}

.campo__control--pequeno {
  min-height: 36px;
  padding: var(--sp-1) var(--sp-2);
  font-size: .8125rem;
}
.linea-accion { display: inline-block; margin: 0; }

/* ---------------------------------------------------------
   El documento de consentimiento, con la identidad de O2
   --------------------------------------------------------- */

.documento {
  margin-bottom: var(--sp-4);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}

.documento__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  color: var(--blanco);
  /* Degradado de profundidad: de la superficie al fondo. */
  background: linear-gradient(135deg, #0B1E26 0%, #124A55 60%, #0F7C86 100%);
}
.documento__cabecera h2 { margin: 0; font-size: 1.5rem; }
.documento__cabecera p {
  margin: 0;
  font-style: italic;
  color: #7FD3D8;
}
.documento__cabecera .marca__simbolo { font-size: 2rem; }

.documento__cuerpo {
  max-height: 420px;
  overflow-y: auto;
  padding: var(--sp-5);
  -webkit-overflow-scrolling: touch;
}
.documento__cuerpo p { margin: 0 0 var(--sp-3); font-size: .9375rem; line-height: 1.6; }
.documento__cuerpo p:last-child { margin-bottom: 0; }

.doc__entrada { color: var(--tinta-2); }

.doc__seccion { margin-bottom: var(--sp-5); }

.doc__etiqueta {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--senal);
}

.doc__titulo { margin: 0 0 var(--sp-3); font-size: 1.125rem; }

.doc__destacado {
  padding: var(--sp-3);
  background: var(--senal-suave);
  border-left: 3px solid var(--senal);
  border-radius: 0 var(--radio) var(--radio) 0;
}

.doc__caja {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radio);
}
.doc__caja--aviso {
  background: var(--aviso-suave);
  border-left: 3px solid var(--aviso);
}
.doc__caja--aviso .doc__etiqueta { color: var(--aviso); }

.doc__caja--clave {
  color: var(--blanco);
  background: var(--tinta);
}
.doc__caja--clave .doc__etiqueta { color: #7FD3D8; }
.doc__caja--clave p { font-weight: 500; }

.doc__caja--privacidad {
  background: #F1EDF9;
  border-left: 3px solid #6B4FA8;
}
.doc__caja--privacidad .doc__etiqueta,
.doc__caja--privacidad .doc__titulo { color: #4A3579; }

.doc__caja--declaracion {
  background: var(--papel);
  border: 1px solid var(--linea);
}

.documento__pie {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  font-size: .75rem;
  color: var(--tinta-2);
  background: var(--papel);
  border-top: 1px solid var(--linea);
}

@media print {
  .documento__cuerpo { max-height: none; overflow: visible; }
  .documento__cabecera { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc__caja, .doc__destacado { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =========================================================
   Documento de consentimiento — acabado de marca
   Serif de display para los títulos, como el PDF impreso;
   el resto sigue en Plex para que se lea bien en pantalla.
   ========================================================= */

:root {
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --violeta: #6B4FA8;
  --violeta-suave: #F1EDF9;
  --agua: #7FD3D8;
}

.documento { box-shadow: 0 2px 4px rgba(11,30,38,.06), 0 12px 32px rgba(11,30,38,.10); }

.documento__cabecera {
  position: relative;
  display: block;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  overflow: hidden;
}

/* La marca de agua del O2, como en el original */
.documento__cabecera::after {
  content: "O₂";
  position: absolute;
  right: -10px; bottom: -40px;
  font-family: var(--serif);
  font-size: 9rem;
  line-height: 1;
  color: rgba(255,255,255,.07);
  pointer-events: none;
}

.documento__cabecera h2 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: var(--sp-2) 0 0;
}
.documento__cabecera p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--agua);
}
.documento__cabecera .marca__simbolo {
  display: block;
  font-size: 2.25rem;
  opacity: .9;
}

.documento__cabecera--claro {
  color: var(--tinta);
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.documento__cabecera--claro::after { color: rgba(11,30,38,.05); }
.documento__cabecera--claro h2 { font-size: 1.625rem; }

.doc__etiqueta--claro { color: var(--senal); }

.doc__titulo {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
}
/* El acento en cursiva del título, como "Qué sentirás en cámara" */
.doc__titulo em { color: var(--senal); }

.doc__destacado {
  background: linear-gradient(90deg, var(--senal-suave), rgba(224,241,241,.35));
  border-left-width: 4px;
  font-size: .9375rem;
}

.doc__caja--clave {
  position: relative;
  background: linear-gradient(135deg, #0B1E26, #143F4A);
  overflow: hidden;
}
.doc__caja--clave::after {
  content: "O₂";
  position: absolute;
  right: 8px; top: -18px;
  font-family: var(--serif);
  font-size: 5rem;
  color: rgba(127,211,216,.12);
}
.doc__caja--clave p { font-family: var(--serif); font-size: 1.0625rem; margin: 0; }

.doc__caja--aviso { border-left-width: 4px; }

.doc__caja--privacidad {
  background: var(--violeta-suave);
  border-left-width: 4px;
  border-left-color: var(--violeta);
}
.doc__caja--privacidad .doc__titulo { font-size: 1.125rem; color: #4A3579; }

.doc__caja--prohibido {
  background: var(--error-suave);
  border-left: 4px solid var(--error);
  margin-bottom: var(--sp-5);
}
.doc__caja--prohibido .doc__etiqueta { color: var(--error); font-weight: 600; }

/* ---------- Casillas del cuestionario ---------- */

.casilla {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: .9375rem;
  line-height: 1.45;
  cursor: pointer;
}
.casilla input[type="checkbox"] {
  width: 24px; height: 24px;
  margin: 0;
  accent-color: var(--senal);
}
.casilla--grave { font-weight: 500; color: var(--error); }
.casilla--grave input[type="checkbox"] { accent-color: var(--error); }

.casilla--declaracion {
  padding: var(--sp-4);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-size: .875rem;
  margin-bottom: var(--sp-4);
}

.grupos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin: var(--sp-4) 0;
}
@media (min-width: 720px) {
  .grupos { grid-template-columns: 1fr 1fr; }
}

.grupo {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--senal);
  border-radius: var(--radio);
  background: var(--blanco);
}
.grupo legend {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
}
.grupo__num {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--blanco);
  background: var(--senal);
  border-radius: 50%;
}

/* ---------- Bloque de firma ---------- */

.tarjeta--firma { border-top: 3px solid var(--senal); }
.tarjeta--firma h2 { font-family: var(--serif); font-size: 1.5rem; margin-top: var(--sp-1); }

.firma__lienzo {
  background:
    linear-gradient(var(--blanco), var(--blanco)) padding-box,
    repeating-linear-gradient(90deg, var(--linea) 0 6px, transparent 6px 12px) border-box;
}

.desplegable--peligro > summary {
  color: var(--error);
  border-color: var(--error);
}
.desplegable--peligro .tarjeta { border-color: var(--error); }
.desplegable--peligro h3 { margin-top: 0; }

/* ---------------------------------------------------------
   Logotipo
   --------------------------------------------------------- */

.documento__logo {
  display: block;
  width: 150px; height: auto;
  margin-bottom: var(--sp-4);
}
/* Sobre la cabecera clara del cuestionario va el logo a color */
.documento__cabecera--claro .documento__logo { filter: none; }

.acceso__logo {
  display: block;
  width: min(180px, 60vw);
  height: auto;
}

.barra__logo {
  display: flex;
  align-items: center;
  flex: none;
}
.barra__logo img { display: block; width: 34px; height: auto; }

.documento-impreso__marca {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.documento-impreso__marca img { width: 110px; height: auto; }

/* Con logo real, el "O₂" tipográfico de marca de agua sobra */
.documento__cabecera::after { content: none; }

/* =========================================================
   Agenda
   ========================================================= */

.agenda__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.agenda__nav { display: flex; gap: var(--sp-1); }
.agenda__titulo {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  text-transform: capitalize;
}
.filtros--vista { margin: 0; }

/* ---------- Rejilla semanal / diaria ----------
   Una columna por día; dentro de cada celda, una línea por cámara.
   Añadir cámaras no toca el CSS. */

.agenda-rejilla {
  display: grid;
  grid-template-columns: 58px repeat(var(--dias, 7), minmax(0, 1fr));
  gap: 1px;
  background: var(--linea-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}

.rejilla__esquina { background: var(--blanco); }

.rejilla__dia {
  padding: var(--sp-2) var(--sp-1);
  text-align: center;
  background: var(--blanco);
  position: sticky; top: 56px; z-index: 5;
}
.rejilla__dia a { text-decoration: none; color: inherit; display: block; }
.rejilla__diasem {
  display: block;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-2);
}
.rejilla__numdia { display: block; font-size: 1.125rem; font-weight: 500; }
.rejilla__dia--hoy { box-shadow: inset 0 -3px 0 var(--senal); }
.rejilla__dia--hoy .rejilla__numdia { color: var(--senal); }

.rejilla__hora {
  display: grid;
  align-content: center;
  padding: var(--sp-2) var(--sp-1);
  font-size: .75rem;
  color: var(--tinta-2);
  text-align: right;
  background: var(--blanco);
  border-right: 2px solid var(--linea);
}
.rejilla__hasta { display: block; opacity: .55; font-size: .6875rem; }

.rejilla__celda {
  display: grid;
  gap: 1px;
  padding: 2px;
  background: var(--blanco);
}

.hueco {
  display: grid;
  align-content: center;
  min-height: 34px;
  padding: 2px var(--sp-1);
  border: 1px dashed var(--linea);
  border-radius: 4px;
  text-decoration: none;
  color: var(--tinta-2);
  font-size: .6875rem;
}
.hueco:hover { background: var(--senal-suave); border-color: var(--senal); }
.hueco__camara { font-family: var(--mono); opacity: .6; }

.sesion {
  display: grid;
  gap: 1px;
  min-height: 34px;
  padding: 3px var(--sp-1);
  border-left: 3px solid var(--senal);
  border-radius: 0 4px 4px 0;
  background: var(--senal-suave);
  text-decoration: none;
  color: var(--tinta);
  font-size: .75rem;
  line-height: 1.25;
}
.sesion__cliente {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sesion__pie { font-family: var(--mono); font-size: .625rem; color: var(--tinta-2); }
.sesion--cobro  { background: var(--aviso-suave);  border-left-color: var(--aviso); }
.sesion--regalo { background: var(--regalo-suave); border-left-color: var(--regalo); }
.sesion--hecha  { opacity: .65; }
.sesion--bloqueada { border-left-color: var(--error); box-shadow: inset 0 0 0 1px var(--error-suave); }

/* En móvil la rejilla solo se usa para el día. La semana se ve como lista de
   días (.semana-movil); la regla antigua ocultaba celdas con :nth-of-type, que
   cuenta todos los div hermanos y dejaba columnas sueltas sin cabecera. */
@media (max-width: 767px) {
  .agenda-rejilla { grid-template-columns: 50px minmax(0, 1fr); }
  .agenda-rejilla--semana { display: none; }
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: .75rem;
  color: var(--tinta-2);
}
.leyenda__punto {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: baseline;
}
.leyenda__punto--senal  { background: var(--senal); }
.leyenda__punto--cobro  { background: var(--aviso); }
.leyenda__punto--regalo { background: var(--regalo); }
.leyenda__punto--error  { background: var(--error); }

/* ---------- Vista mensual ---------- */

.mes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.mes__cabecera {
  padding: var(--sp-2);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  color: var(--tinta-2);
  background: var(--blanco);
}
.mes__dia {
  display: grid;
  align-content: start;
  gap: var(--sp-1);
  min-height: 72px;
  padding: var(--sp-2);
  background: var(--blanco);
  text-decoration: none;
  color: var(--tinta);
}
.mes__dia:hover { outline: 2px solid var(--senal); outline-offset: -2px; }
.mes__dia--fuera { opacity: .4; }
.mes__dia--hoy .mes__num { color: var(--senal); font-weight: 600; }
.mes__num { font-size: .9375rem; }
.mes__carga { font-size: .6875rem; color: var(--tinta-2); }
.mes__dia--flojo { background: #F0F7F5; }
.mes__dia--medio { background: var(--aviso-suave); }
.mes__dia--lleno { background: #F6E3DC; }

/* Corrige la primera fila cortada bajo la cabecera pegajosa */
.rejilla__dia { top: 0; }
.agenda-rejilla { margin-top: var(--sp-2); }

/* Título de la agenda: sin mayúsculas automáticas, que descolocan el mes */
.agenda__titulo { text-transform: none; }
.agenda__titulo::first-letter { text-transform: uppercase; }

.hueco__camara {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .04em;
  opacity: .55;
}

/* La cita pública */
.cita__fecha {
  margin: var(--sp-1) 0 0;
  font-family: var(--serif);
  font-size: 1.75rem;
}
.cita__fecha::first-letter { text-transform: uppercase; }
.cita__hora {
  margin: 0 0 var(--sp-4);
  font-size: 1.25rem;
  color: var(--senal);
}

/* ---------------------------------------------------------
   Cifras de cabecera
   --------------------------------------------------------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.cifra {
  padding: var(--sp-4);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--senal);
  border-radius: var(--radio);
}
.cifra__num { display: block; font-size: 1.75rem; font-weight: 500; line-height: 1.1; }
.cifra__pie {
  display: block;
  margin-top: var(--sp-1);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-2);
}

.urge { color: var(--aviso); font-weight: 600; }

/* =========================================================
   Semana en móvil: una tarjeta por día
   ========================================================= */

.semana-movil { display: none; }

@media (max-width: 767px) {
  .semana-movil {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
  }
  /* La leyenda de colores es de la rejilla; aquí no aplica */
  .semana-movil + .leyenda { display: none; }
}

.diaficha {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 62px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--tinta);
}
.diaficha:active { outline: 2px solid var(--senal); outline-offset: -2px; }

.diaficha__fecha { text-align: center; }
.diaficha__diasem {
  display: block;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-2);
}
.diaficha__num {
  display: block;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.1;
}

.diaficha__estado { display: block; font-weight: 500; font-size: .9375rem; }
.diaficha__detalle {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  color: var(--tinta-2);
}
.diaficha__ocupacion { font-size: .75rem; color: var(--tinta-2); }

.diaficha--vacio .diaficha__estado { font-weight: 400; color: var(--tinta-2); }
.diaficha--flojo { border-left-color: var(--senal); background: #F0F7F5; }
.diaficha--medio { border-left-color: var(--aviso); background: var(--aviso-suave); }
.diaficha--lleno { border-left-color: var(--aviso); background: #F6E3DC; }

.diaficha--hoy { box-shadow: inset 0 0 0 1px var(--senal); }
.diaficha--hoy .diaficha__num { color: var(--senal); }
.diaficha__hoy {
  display: inline-block;
  margin-left: var(--sp-1);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--senal);
  color: #fff;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: 1px;
}

/* =========================================================
   Agenda cerrada: vacaciones, sin operador, otro uso del centro
   ========================================================= */

.rejilla__celda--cerrada {
  background: repeating-linear-gradient(
    45deg, transparent, transparent 6px,
    rgba(11, 30, 38, .045) 6px, rgba(11, 30, 38, .045) 12px);
}

.cerrado {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  color: var(--tinta-2);
  cursor: not-allowed;
}
.cerrado__motivo {
  font-size: .6875rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}