/* ===========================================================================
   Tot-Net · Supervisión de calidad
   Qvertsp digital, S.L.

   MÓVIL PRIMERO, Y ANDROID EN CONCRETO.

   El supervisor la usa de pie, con una mano, a veces con guantes y con sol de
   cara. De ahí salen casi todas las decisiones de este fichero:

     · nada que se pulse mide menos de 48 px — el mínimo de Android;
     · la navegación va abajo, donde llega el pulgar, no arriba a la derecha;
     · nada depende de pasar el ratón por encima, porque en un móvil no existe;
     · los campos de texto van a 16 px, porque por debajo el navegador hace zoom
       solo y descoloca la pantalla;
     · se respeta la barra de gestos con env(safe-area-inset-bottom), y se usa
       100dvh en lugar de 100vh para que la barra de Chrome no corte nada.

   En ordenador la misma aplicación se ensancha: la barra inferior se convierte
   en columna lateral y las listas aprovechan el ancho. Un solo código.
   =========================================================================== */

/* --------------------------------------------------------------- variables */

:root {
  /* Marca */
  --verde:        #0e9d6e;
  --verde-osc:    #0a7a55;
  --verde-claro:  #e6f6f0;
  --verde-borde:  #b5e3d1;

  /* Tinta y grises, ligeramente fríos para que el verde no se apague */
  --tinta:        #12211c;
  --tinta-media:  #3d4f49;
  --tinta-suave:  #64766f;
  --linea:        #e2e9e6;
  --linea-fuerte: #cdd8d4;
  --fondo:        #f2f6f5;
  --fondo-hueco:  #eaf0ee;
  --blanco:       #ffffff;

  /* Estados */
  --rojo:         #c0392b;
  --rojo-claro:   #fdecea;
  --rojo-borde:   #f3c9c4;
  --ambar:        #a96c0a;
  --ambar-claro:  #fdf3e3;
  --ambar-borde:  #f0d9ae;

  /* Lateral */
  --lateral:      #10241d;
  --lateral-alto: #1a3830;
  --lateral-texto:#9fbdb2;

  --radio:        12px;
  --radio-sm:     8px;
  --sombra:       0 1px 2px rgba(18,33,28,.06), 0 1px 3px rgba(18,33,28,.05);
  --sombra-alta:  0 4px 16px rgba(18,33,28,.10);

  --toque:        48px;          /* mínimo de Android */
  --lateral-ancho: 236px;
  --barra-alta:   56px;
  --inferior-alta: 62px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-osc); }
.hoja-iconos { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono { width: 22px; height: 22px; flex: 0 0 auto; }

/* ====================================================== esqueleto de la app */

.app { min-height: 100dvh; }

.principal { min-height: 100dvh; display: flex; flex-direction: column; }

.contenido {
  flex: 1;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 16px 16px calc(var(--inferior-alta) + env(safe-area-inset-bottom) + 24px);
}
.contenido.ancho { max-width: 1180px; }

/* --------------------------------------------- barra superior (solo móvil) */

.barra-superior {
  position: sticky; top: 0; z-index: 30;
  background: var(--verde);
  color: #fff;
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.barra-interior {
  height: var(--barra-alta);
  display: flex; align-items: center; gap: 10px;
  padding: 0 6px 0 16px;
}
h1.barra-titulo {
  flex: 1; min-width: 0; margin: 0; color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* El título que trae la vista ya está en la barra verde: en el móvil sobra, y
   son 60 px de una pantalla de 844. El botón que lo acompaña se queda, alineado
   a la derecha. Cada vista tiene un solo h1, así que no se pierde ninguno. */
.con-app .contenido h1 { display: none; }
/* Solo la fila del título se queda coja al esconder el h1. Las que llevan un
   h2 —«Centros de este cliente», el mes del histórico— siguen como estaban. */
.con-app .contenido .titulo-fila:has(> h1) { justify-content: flex-end; margin-bottom: 10px; }
/* Si la fila solo llevaba el título, ya no queda nada que enseñar. */
.con-app .contenido .titulo-fila:has(> h1):not(:has(> :not(h1))) { display: none; }
.barra-cuenta {
  width: var(--toque); height: var(--toque);
  display: flex; align-items: center; justify-content: center;
  color: #fff; border-radius: 50%;
}
.barra-cuenta:active { background: rgba(255,255,255,.18); }

/* Conmutador de zona en el móvil, para quien hace dos papeles.
   Va en la barra verde y no en la inferior porque la inferior ya está llena con
   las entradas de la zona. Se le pone `flex: none` para que no le robe sitio al
   título cuando el nombre del centro es largo, y el rótulo desaparece en
   pantallas muy estrechas dejando solo el icono, que sigue midiendo 44 px. */
.barra-zona {
  display: flex; align-items: center; gap: 6px; flex: none;
  height: 34px; padding: 0 11px 0 9px; margin-right: 2px;
  border: 1px solid rgba(255,255,255,.4); border-radius: 17px;
  color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 650; white-space: nowrap;
}
.barra-zona:active { background: rgba(255,255,255,.18); }
.barra-zona .icono { width: 17px; height: 17px; flex: none; }
@media (max-width: 359px) {
  .barra-zona span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .barra-zona { width: var(--toque); height: var(--toque); padding: 0; justify-content: center; border-radius: 50%; }
}

/* La campana de avisos, en la barra verde del móvil. */
.barra-cuenta.campana { position: relative; }
.chapa-campana {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 2px solid var(--verde);
  background: var(--rojo); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* ------------------------------------------ barra inferior (solo en móvil) */

.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 10px rgba(18,33,28,.06);
}
.barra-inferior a {
  flex: 1 1 0;
  min-width: 0;
  height: var(--inferior-alta);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: var(--tinta-suave); text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.barra-inferior a span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-inferior a.activa { color: var(--verde-osc); }
.barra-inferior a.activa .icono {
  background: var(--verde-claro);
  border-radius: 999px;
  padding: 2px 12px;
  width: 46px; height: 26px;
}
.barra-inferior a:active { background: var(--fondo-hueco); }

/* ------------------------------------------------ lateral (solo ordenador) */

.lateral { display: none; }

/* ================================================================ tipografía */

h1 { font-size: 22px; line-height: 1.25; margin: 2px 0 14px; letter-spacing: -.01em; }
h2 {
  font-size: 13px; font-weight: 700; margin: 26px 0 10px;
  color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .07em;
}
h3 { font-size: 16px; margin: 18px 0 8px; }

.pista { font-size: 13.5px; color: var(--tinta-suave); margin: 6px 0 14px; line-height: 1.45; }
.nota  { font-size: 14.5px; color: var(--tinta-media); margin: 0 0 16px; line-height: 1.5; }

.titulo-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.titulo-fila h1, .titulo-fila h2 { margin-bottom: 0; }

/* =================================================================== botones */

/* Sin `button.` delante: un selector de clase ya gana a los estilos del
   navegador, y al escribirlo como `button.boton-pequeno` esta regla pesaba más
   que `.boton-pequeno` de abajo. El resultado era que el borde transparente de
   aquí se imponía y todo <button> secundario salía sin borde, con pinta de
   texto suelto en vez de botón. Los <a> con la misma clase sí se veían bien,
   que es lo que hacía difícil de ver el fallo. */
.boton, .boton-pequeno {
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radio-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}

/* Principal: alto, ancho y verde. Es el que se pulsa con el pulgar. */
.boton {
  width: 100%;
  min-height: var(--toque);
  padding: 0 20px;
  font-size: 16px;
  background: var(--verde); color: #fff;
  box-shadow: 0 1px 2px rgba(10,122,85,.25);
}
.boton:active { background: var(--verde-osc); }
.boton:disabled { background: var(--linea-fuerte); color: var(--tinta-suave); box-shadow: none; cursor: default; }

/* Secundario: mismo tamaño de toque, menos peso visual. */
.boton-pequeno {
  min-height: 44px;
  padding: 0 16px;
  font-size: 14.5px;
  background: var(--blanco);
  color: var(--tinta-media);
  border-color: var(--linea-fuerte);
}
.boton-pequeno:active { background: var(--fondo-hueco); }
.boton-pequeno.primario {
  background: var(--verde); color: #fff; border-color: var(--verde);
}
.boton-pequeno.primario:active { background: var(--verde-osc); }
.boton-pequeno.aviso-borrador,
.boton-pequeno.peligro {
  color: var(--rojo); border-color: var(--rojo-borde); background: var(--blanco);
}
.boton-pequeno.aviso-borrador:active { background: var(--rojo-claro); }
.boton-pequeno:disabled { opacity: .5; cursor: default; }

.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.acciones form { margin: 0; }
.acciones-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.acciones-form form { margin: 0; }
.acciones-form .boton { width: auto; }
.acciones-form + .pista { margin-top: 10px; }

@media (min-width: 560px) {
  .boton { width: auto; }
}

/* ================================================================= tarjetas */

.lista { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }

.ficha {
  display: flex; align-items: stretch;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
/* Una fila de lista es un objetivo táctil, no un renglón: nunca por debajo de
   48 px aunque solo lleve el nombre. */
.ficha .cuerpo {
  flex: 1; padding: 13px 15px; min-width: 0;
  min-height: var(--toque);
  display: flex; flex-direction: column; justify-content: center;
}
a.cuerpo { text-decoration: none; color: inherit; display: block; }
.ficha.punto a.cuerpo:active, .ficha a.cuerpo:active { background: var(--fondo-hueco); }

.ficha .cliente { font-weight: 650; font-size: 15.5px; line-height: 1.3; }
.ficha .centro  { color: var(--tinta-media); font-size: 14px; margin-top: 2px; }
.ficha .lugar   { color: var(--tinta-suave); font-size: 13px; margin-top: 3px; }

/* Quién firmó un documento. Va debajo de la descripción y antes de las chapas:
   es el dato que se busca al abrir la pantalla, no un adorno del pie. */
.firmado-por {
  margin-top: 7px; padding-left: 9px;
  border-left: 3px solid var(--verde-borde);
  color: var(--tinta-media); font-size: 13.5px; line-height: 1.4;
}

/* El mes en curso, señalado en el histórico: ahora sale ahí además de en la
   agenda, y conviene que se entienda por qué está arriba y aún no ha acabado. */
.marca-mes {
  display: inline-block; vertical-align: middle;
  margin-left: 6px; padding: 2px 8px;
  border-radius: 10px; background: var(--verde-claro);
  border: 1px solid var(--verde-borde); color: var(--verde-osc, var(--verde));
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
}

/* ===================================== agenda · filtros y grupos por mes */

/* Los botones de arriba, en una sola fila que se desplaza.
   Medido en un XCover7 Pro (393 px): «Añadir una visita» y «Cómo se rellena»
   suman 357 px y caben 361, pero con la separación de 8 px se pasan por CUATRO
   píxeles y saltan a dos filas. Eso cuesta 52 px de pantalla —la mitad de una
   tarjeta— en la pantalla donde el supervisor viene a ver trabajo, y se rompería
   otra vez el día que alguien alargue un rótulo.
   Con scroll horizontal es una fila pase lo que pase. */
.acciones-fila {
  flex-wrap: nowrap;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.acciones-fila::-webkit-scrollbar { display: none; }
.acciones-fila > * { flex: none; scroll-snap-align: start; }

/* Fila de filtros. Se desplaza en horizontal en lugar de partirse en dos
   líneas: con cinco o seis meses de atraso, dos filas de botones empujarían la
   primera visita fuera de la pantalla, que es lo que el supervisor ha venido a
   ver. El scroll se para en cada botón para que no queden a medias. */
.filtros-mes {
  display: flex; gap: 8px;
  margin: 0 0 14px; padding-bottom: 4px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filtros-mes::-webkit-scrollbar { display: none; }

.chapa-filtro {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--linea-fuerte); border-radius: 22px;
  background: var(--blanco); color: var(--tinta);
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.chapa-filtro .cuenta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--fondo-hueco);
  font-size: 12.5px; font-weight: 700; line-height: 1;
}
.chapa-filtro.activa {
  background: var(--verde); border-color: var(--verde); color: #fff;
}
.chapa-filtro.activa .cuenta { background: rgba(255,255,255,.26); color: #fff; }

/* Un mes que no es el actual lleva la cuenta en rojo: es trabajo atrasado y se
   dice en el propio filtro, antes de pulsarlo. */
.chapa-filtro.atrasado .cuenta { background: var(--rojo); color: #fff; }
.chapa-filtro.atrasado.activa { background: var(--rojo); border-color: var(--rojo); }
.chapa-filtro.atrasado.activa .cuenta { background: rgba(255,255,255,.28); }

/* La fila nace con el atributo `hidden` y la enseña el guion al arrancar. Sin
   JavaScript los botones no podrían ocultar nada, así que directamente no
   aparecen: el supervisor ve su lista entera con los subtítulos de mes, que es
   la información completa. Más honesto que unos botones que no hacen nada. */
.filtros-mes[hidden] { display: none; }

.grupo-mes + .grupo-mes { margin-top: 22px; }
.grupo-mes[hidden] { display: none; }

.cabecera-mes {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-media);
}
.cabecera-mes.atrasado { color: var(--rojo); }
.cuenta-mes {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--fondo-hueco);
  color: var(--tinta-media);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0; line-height: 1;
}
.cabecera-mes.atrasado .cuenta-mes { background: var(--rojo); color: #fff; }

.ficha.vencida  { border-left: 4px solid var(--rojo); }
.ficha.atencion { border-left: 4px solid var(--ambar); }
.ficha.borrador { border-left: 4px solid var(--rojo); }
.ficha.hecha    { background: #fbfcfc; }
.ficha.hecha .cliente { color: var(--tinta-media); }
.ficha.e-entregado { border-left: 4px solid var(--verde); }
.ficha.e-esperando_totnet, .ficha.e-bloqueado { border-left: 4px solid var(--rojo); }
.ficha.e-en_curso { border-left: 4px solid var(--ambar); }

.ficha .acciones { margin: 12px 0 0; }

/* Reordenar la agenda: columna estrecha con dos objetivos de 48 px. */
.orden { display: flex; flex-direction: column; border-left: 1px solid var(--linea); }
.orden button {
  flex: 1; width: 52px; min-height: var(--toque);
  border: 0; background: var(--blanco); cursor: pointer;
  color: var(--tinta-suave); font-size: 17px; line-height: 1; font-family: inherit;
}
.orden button:active:not(:disabled) { background: var(--verde-claro); color: var(--verde-osc); }
.orden button:disabled { opacity: .25; cursor: default; }
.orden button + button { border-top: 1px solid var(--linea); }

/* =================================================================== chapas */

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.etiqueta {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 7px;
  background: var(--verde-claro); color: var(--verde-osc);
}
.etiqueta.roja  { background: var(--rojo-claro);  color: var(--rojo); }
.etiqueta.ambar { background: var(--ambar-claro); color: var(--ambar); }
.etiqueta.gris  { background: var(--fondo-hueco); color: var(--tinta-suave); }
.etiqueta.borrador { background: var(--rojo-claro); color: var(--rojo); text-transform: uppercase; letter-spacing: .06em; }
td .etiqueta { margin-left: 6px; vertical-align: middle; }

.cifra-aviso {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 8px;
  background: var(--tinta); color: #fff;
  font-weight: 700; font-size: 13px;
  border-radius: 999px; margin-right: 9px;
}
.ficha.vencida .cifra-aviso  { background: var(--rojo); }
.ficha.atencion .cifra-aviso { background: var(--ambar); }
.avisos .cliente { font-weight: 500; display: flex; align-items: flex-start; gap: 2px; }

/* ================================================================== avisos */

.aviso {
  padding: 20px 18px; border-radius: var(--radio);
  background: var(--blanco); border: 1px dashed var(--linea-fuerte);
  color: var(--tinta-suave); text-align: center; font-size: 14.5px;
}

.aviso-exito, .error {
  border-radius: var(--radio); padding: 13px 15px; margin-bottom: 14px;
  font-size: 14.5px; line-height: 1.45; border: 1px solid transparent;
}
.aviso-exito { background: var(--verde-claro); color: var(--verde-osc); border-color: var(--verde-borde); }
.error       { background: var(--rojo-claro);  color: var(--rojo);      border-color: var(--rojo-borde); }
.error div + div { margin-top: 4px; }

.aviso-explicativo {
  background: var(--ambar-claro); border: 1px solid var(--ambar-borde);
  border-left: 4px solid var(--ambar);
  border-radius: var(--radio); padding: 14px 16px; margin: 16px 0;
}
.aviso-explicativo p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.aviso-explicativo p:last-child { margin-bottom: 0; }

.brindis {
  position: fixed; left: 50%; bottom: calc(var(--inferior-alta) + env(safe-area-inset-bottom) + 16px);
  transform: translateX(-50%); z-index: 50;
  background: var(--tinta); color: #fff;
  padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: var(--sombra-alta);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.brindis.visible { opacity: 1; }

/* ============================================================== indicadores */

.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 6px; }

.dato {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 15px 16px; box-shadow: var(--sombra);
}
.dato .cifra { font-size: 28px; font-weight: 750; color: var(--verde-osc); line-height: 1.05; letter-spacing: -.02em; }
.dato .rotulo { font-size: 12.5px; color: var(--tinta-suave); margin-top: 5px; font-weight: 600; }
.dato.alerta .cifra { color: var(--rojo); }

.rejilla + .pista, .filtros + .pista, .tabla-envoltura + .pista { margin-top: 10px; }

.progreso { height: 10px; border-radius: 999px; background: var(--fondo-hueco); overflow: hidden; margin: 12px 0 6px; }
.progreso span { display: block; height: 100%; background: var(--verde); border-radius: 999px; }

/* ================================================================== tablas */

.tabla-envoltura {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--blanco); box-shadow: var(--sombra);
  margin: 10px 0 4px;
}
table { width: 100%; border-collapse: collapse; background: var(--blanco); }
.tabla-envoltura table { min-width: 620px; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-suave); padding: 11px 14px; background: var(--fondo-hueco);
  white-space: nowrap; font-weight: 700;
}
td { padding: 12px 14px; border-top: 1px solid var(--linea); font-size: 14.5px; vertical-align: middle; }
tbody tr:active td { background: var(--fondo-hueco); }
th.num, td.num { text-align: right; white-space: nowrap; }
tr.de-baja td { opacity: .55; }
tr.fila-rechazada td { background: var(--rojo-claro); }
tr.fila-aviso td     { background: var(--ambar-claro); }

.paginacion { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }

/* ------------------------------------------------ tabla que se hace tarjetas
   Cinco columnas no caben en 390 px, y el arrastre lateral esconde justo lo que
   se busca. Por debajo de 900 px cada fila pasa a ser una tarjeta con el rótulo
   delante del dato. El marcado es el mismo en los dos casos. */
/* El fondo blanco lo ponen las tarjetas, no la tabla: si lo pinta también el
   <table> asoma por detrás como una segunda caja. */
.tabla-adaptable { border-collapse: separate; border-spacing: 0; background: none; }
.tabla-adaptable thead { display: none; }
.tabla-adaptable tbody { display: grid; gap: 10px; }
.tabla-adaptable tr {
  display: block; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 12px 14px;
}
.tabla-adaptable td { display: flex; justify-content: space-between; gap: 14px;
  border: 0; padding: 5px 0; font-size: 14.5px; text-align: right; }
.tabla-adaptable td::before {
  content: attr(data-rotulo); color: var(--tinta-suave);
  font-size: 13px; font-weight: 600; text-align: left;
}
.tabla-adaptable td.titular {
  display: block; text-align: left; font-weight: 700; font-size: 16px;
  padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--linea);
}
/* El nombre es el objetivo grande de la tarjeta: ocupa el ancho y mide 48. */
.tabla-adaptable td.titular a {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  min-height: var(--toque);
  text-decoration: none; color: var(--verde-osc);
}
/* Cualquier otro enlace de la tarjeta también tiene que poder pulsarse. */
.tabla-adaptable td a { display: inline-flex; align-items: center; min-height: 44px; }
.tabla-adaptable td.mal { color: var(--rojo); font-weight: 700; }
.tabla-adaptable td.accion { justify-content: stretch; padding-top: 10px; }
.tabla-adaptable td.accion::before { content: none; }
.tabla-adaptable td.accion .boton-pequeno { width: 100%; }

/* Dentro del envoltorio con desplazamiento lateral, la tabla que se hace
   tarjetas no debe heredar el ancho mínimo ni el marco: ya es una lista. */
.tabla-envoltura:has(.tabla-adaptable) {
  overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.tabla-envoltura .tabla-adaptable { min-width: 0; }

/* ============================================================== formularios */

label { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 6px; color: var(--tinta-media); }

input[type=text], input[type=password], input[type=search], input[type=email],
input[type=tel], input[type=url], input[type=number], input[type=date],
input[type=time], input[type=month], input[type=datetime-local],
select, textarea, .campo-suelto {
  width: 100%;
  min-height: var(--toque);
  padding: 11px 13px;
  font-size: 16px;             /* nunca menos: por debajo, Android hace zoom */
  font-family: inherit; line-height: 1.4;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm);
  -webkit-appearance: none; appearance: none;
}
textarea { min-height: 0; resize: vertical; }

/* Las fechas conservan el aspecto del sistema: en Android el calendario se abre
   pulsando el campo, y quitarle la apariencia nativa esconde el indicador. */
input[type=date], input[type=time], input[type=month], input[type=datetime-local] {
  -webkit-appearance: none; appearance: none;
  min-height: var(--toque);
}
input[type=date]::-webkit-calendar-picker-indicator { opacity: .6; padding: 6px; }
select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364766f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px;
  padding-right: 38px;
}
input:focus, select:focus, textarea:focus, .campo-suelto:focus {
  outline: 3px solid var(--verde-claro); outline-offset: 0;
  border-color: var(--verde);
}
::placeholder { color: #9aaaa4; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.formulario fieldset[disabled] { opacity: .85; }

.campos { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.campo { min-width: 0; margin-bottom: 16px; }
.campo .pista { margin: 6px 0 0; }

/* Un dato que falta y que tiene consecuencias. No es un error —el centro es
   válido— pero tampoco puede pasar desapercibido: sin periodicidad ese centro
   no se supervisa nunca y nadie lo echaría en falta. */
.aviso-flojo { color: var(--critico, #d03b3b); }

/* La foto que no se va a guardar. Se ve, pero no se borra: el supervisor puede
   volver a la valoración anterior y la foto sigue ahí. Ver lib/regla-fotos.js. */
.foto-no-se-guarda {
  margin: 8px 0 0; padding: 8px 10px;
  border: 1px solid #f0c9c9; border-left: 3px solid #d03b3b;
  border-radius: var(--radio); background: #fdf3f3; color: #8a2222;
  font-size: 13.5px; line-height: 1.45;
}
.pregunta.foto-descartable .miniatura { opacity: 0.45; }

.marca-pendiente {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: #fdf1d6; color: #8a5a00; border: 1px solid #f0d49a;
  font-size: 12.5px; white-space: nowrap;
}

.formulario-linea {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea);
}
.formulario-linea .pista { margin: 0; flex: 1 1 240px; }

.filtros {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 12px 0 4px;
}
.filtros input[type=search] { flex: 1 1 220px; }
.filtros select { flex: 1 1 150px; }
.filtros .boton-pequeno { flex: 0 0 auto; }

.caja-subida {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); margin: 12px 0;
}
.caja-subida input[type=file] {
  display: block; width: 100%; margin: 6px 0 14px;
  font-size: 16px; font-family: inherit;
  padding: 12px; min-height: var(--toque);
  border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-sm);
  background: #fbfdfc;
}
.caja-subida input[type=file]::file-selector-button {
  font: inherit; font-weight: 650; margin-right: 12px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm);
  background: var(--blanco); color: var(--tinta); cursor: pointer;
}

/* Elegir fichero con un botón nuestro: en castellano y con altura de dedo. */
.rotulo-campo { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 6px; color: var(--tinta-media); }
.boton-archivo {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--toque); padding: 10px 14px; margin: 0 0 14px;
  border: 1.5px dashed var(--linea-fuerte); border-radius: var(--radio-sm);
  background: #fbfdfc; color: var(--tinta-media);
  font-size: 15px; font-weight: 650; cursor: pointer;
}
.boton-archivo .icono { color: var(--tinta-suave); }
.boton-archivo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-archivo input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; margin: 0; border: 0; background: none;
  min-height: 0; font-size: 16px;
}
.boton-archivo.con-fichero {
  border-style: solid; border-color: var(--verde-borde);
  background: var(--verde-claro); color: var(--verde-osc);
}
.boton-archivo.con-fichero .icono { color: var(--verde-osc); }
.boton-archivo:active { background: var(--fondo-hueco); }
.boton-archivo:has(input:focus-visible) { outline: 3px solid var(--verde-claro); }
.caja-subida .pista { margin: 10px 0 0; }

.marca-na { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px; margin: 0; min-height: var(--toque); }
.marca-na input { width: 24px; height: 24px; margin: 0; accent-color: var(--verde); flex: 0 0 auto; }

/* ================================================================ pestañas */

.pestanas {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -16px 16px; padding: 0 16px 10px;
  border-bottom: 1px solid var(--linea);
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  flex: 0 0 auto; min-height: var(--toque);
  display: inline-flex; align-items: center; padding: 0 15px;
  border-radius: 999px; text-decoration: none;
  color: var(--tinta-suave); font-size: 14.5px; font-weight: 650;
  white-space: nowrap; background: var(--blanco); border: 1px solid var(--linea);
}
.pestanas a.activa { background: var(--verde-claro); color: var(--verde-osc); border-color: var(--verde-borde); }

/* ============================================================ zona de acceso */

.pantalla-acceso {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: linear-gradient(160deg, var(--verde) 0%, #0a6f4e 100%);
}
.tarjeta-acceso {
  width: 100%; max-width: 390px;
  background: var(--blanco); border-radius: 16px;
  padding: 30px 24px 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.tarjeta-acceso .sello { display: flex; justify-content: center; margin-bottom: 14px; }
.tarjeta-acceso .sello svg { width: 56px; height: 56px; }
.tarjeta-acceso .sello rect { fill: var(--verde); }
.tarjeta-acceso .sello path { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta-acceso .marca { font-size: 21px; font-weight: 750; color: var(--verde-osc); text-align: center; margin-bottom: 4px; }
.tarjeta-acceso .sub { text-align: center; color: var(--tinta-suave); font-size: 14px; margin-bottom: 24px; }
.tarjeta-acceso label { margin-top: 14px; }
.tarjeta-acceso .boton { margin-top: 22px; width: 100%; }

.idiomas { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.idiomas button {
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--linea-fuerte); background: var(--blanco);
  border-radius: 999px; font-size: 13.5px; font-family: inherit; font-weight: 600;
  color: var(--tinta-suave); cursor: pointer;
}
.idiomas button[aria-current="true"] { background: var(--verde-claro); border-color: var(--verde-borde); color: var(--verde-osc); }

.pantalla-error { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.pantalla-error .codigo { font-size: 60px; font-weight: 750; color: var(--verde); line-height: 1; }

/* ============================================ formulario de supervisión */

.cabecera-sup { margin-bottom: 14px; }
.linea-volver { margin: 0 0 6px; }
a.volver, .cabecera-sup .volver {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--toque); margin-left: -4px; padding: 0 8px 0 4px;
  border-radius: var(--radio-sm);
  font-size: 14.5px; font-weight: 600; text-decoration: none;
}
a.volver:active, .cabecera-sup .volver:active { background: var(--fondo-hueco); }
a.volver .icono { width: 18px; height: 18px; }
.cabecera-sup h1 { margin: 2px 0 2px; }
.cabecera-sup .cliente { margin: 0; color: var(--tinta-media); font-size: 15px; }
.cabecera-sup .lugar   { margin: 3px 0 0; color: var(--tinta-suave); font-size: 13.5px; }

.bloque {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 15px 15px 17px; margin-bottom: 12px;
}
.bloque > h2 { margin-top: 0; }
.bloque > .pista { margin-top: -2px; }

.pregunta { padding: 16px 0; border-top: 1px solid var(--linea); }
.bloque .pregunta:first-of-type { border-top: 0; padding-top: 6px; }
.pregunta.falta {
  background: var(--rojo-claro); border-radius: var(--radio);
  padding: 14px 13px; margin: 8px -13px; border-top-color: transparent;
}
.pregunta .enunciado { font-weight: 650; line-height: 1.35; font-size: 15.5px; }
.pregunta .obligatoria { color: var(--rojo); margin-left: 3px; }
.pregunta .pista { margin: 5px 0 0; }

.anterior {
  margin: 8px 0 0; font-size: 13px; color: var(--tinta-media);
  background: var(--fondo-hueco); display: inline-block;
  padding: 4px 11px; border-radius: 999px;
}

.escala { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.escala.si-no { max-width: 340px; }
.escala.tres { grid-template-columns: repeat(3, 1fr); }
.escala .opcion {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 6px 8px; margin: 0;
  border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio-sm);
  background: var(--blanco); cursor: pointer;
  font-size: 14.5px; font-weight: 650; text-align: center; line-height: 1.2;
  color: var(--tinta-suave);
  -webkit-tap-highlight-color: transparent;
}
.escala .opcion input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.escala .opcion:active { background: var(--fondo-hueco); }
.escala .opcion:has(input:focus-visible) { outline: 3px solid var(--verde-claro); }

.escala .v1:has(input:checked), .escala .no:has(input:checked) {
  background: var(--rojo-claro); border-color: var(--rojo); color: var(--rojo);
}
.escala .v2:has(input:checked) {
  background: var(--ambar-claro); border-color: var(--ambar); color: var(--ambar);
}
.escala .v3:has(input:checked), .escala .v4:has(input:checked), .escala .si:has(input:checked) {
  background: var(--verde-claro); border-color: var(--verde); color: var(--verde-osc);
}

.campo-suelto { margin-top: 12px; }
.observacion {
  width: 100%; margin-top: 10px; padding: 11px 12px;
  font-size: 16px; font-family: inherit;   /* 16 exactos: por debajo Android hace zoom */
  border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-sm);
  background: #fbfdfc; color: var(--tinta);
}

.extras { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }

.boton-foto {
  position: relative; overflow: hidden; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--toque); padding: 0 16px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm); background: var(--blanco);
  font-size: 14.5px; font-weight: 650; color: var(--tinta-media); cursor: pointer;
}
/* Invisible, pero con letra de 16: al enfocarlo, Android hace zoom igual si la
   tiene más pequeña, y la pantalla se descoloca sin que se vea por qué. */
.boton-foto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.boton-foto.con-foto { border-color: var(--verde); color: var(--verde-osc); background: var(--verde-claro); }

.miniatura { display: inline-block; margin-top: 12px; }
.miniatura img { max-width: 170px; max-height: 170px; border-radius: var(--radio-sm); border: 1px solid var(--linea); display: block; }

.lista-faltan { margin: 8px 0 0; padding-left: 20px; }
.lista-faltan li { margin-bottom: 5px; }

.firma-caja { border: 1.5px dashed var(--linea-fuerte); border-radius: var(--radio); background: #fbfdfc; overflow: hidden; }
#firma-lienzo { display: block; width: 100%; height: 210px; touch-action: none; cursor: crosshair; }

/* La barra de acciones queda encima de la barra de navegación inferior. */
.barra-acciones {
  position: sticky;
  bottom: calc(var(--inferior-alta) + env(safe-area-inset-bottom));
  z-index: 25;
  display: flex; gap: 10px; align-items: center;
  background: var(--fondo); padding: 12px 0;
  border-top: 1px solid var(--linea); margin-top: 6px;
}
.barra-acciones .boton { flex: 1; width: auto; }
.barra-acciones .boton-pequeno { min-height: var(--toque); }
.barra-acciones + .pista { margin-top: 10px; }

.anadir-punto { margin-top: 14px; }
.anadir-punto summary {
  cursor: pointer; font-weight: 650; color: var(--verde-osc);
  min-height: var(--toque); display: flex; align-items: center; font-size: 15px;
}
.anadir-punto .formulario { margin-top: 10px; }

/* ========================================================== las dos notas */

/* Van siempre las dos juntas y siempre en el mismo orden. Enseñar una sola
   invita a leerla como «la nota», y son dos cosas distintas. */
.notas { display: flex; gap: 8px; margin-top: 10px; }
.nota {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 11px;
  border: 1px solid var(--linea); border-radius: var(--radio-sm);
  background: var(--blanco);
}
.nota-rotulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-suave);
}
.nota-cifra { font-size: 20px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.nota-cifra small { font-size: 12px; font-weight: 650; margin-left: 1px; }

.nota.bien { background: var(--verde-claro); border-color: var(--verde-borde); }
.nota.bien .nota-cifra, .nota.bien .nota-rotulo { color: var(--verde-osc); }
.nota.mal  { background: var(--rojo-claro); border-color: var(--rojo-borde); }
.nota.mal .nota-cifra, .nota.mal .nota-rotulo { color: var(--rojo); }
/* Sin dato es gris y con raya: nunca un cero, que se leería como un suspenso. */
.nota.sin-dato { background: var(--fondo-hueco); }
.nota.sin-dato .nota-cifra { color: var(--tinta-suave); }

/* En la cabecera del parte hay sitio y conviene que se vean de lejos. */
.notas.grandes { margin-top: 12px; }
.notas.grandes .nota { padding: 11px 14px; }
.notas.grandes .nota-cifra { font-size: 27px; }
.notas.grandes .nota-cifra small { font-size: 15px; }
.notas.grandes + .pista { margin-top: 6px; }

/* Dentro de una tarjeta de lista, sin marco propio: ya lo pone la tarjeta. */
.ficha .notas { margin-top: 9px; }

/* ================================================ pantallas del supervisor */

/* La salida alternativa del parte: existe, se ve, y no se pulsa sin querer. */
.salida-alternativa {
  margin: 22px 0 0; padding-top: 16px;
  border-top: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.salida-alternativa .pista { margin: 0; }
.boton-pequeno.peligro { color: var(--rojo); border-color: var(--rojo-borde); background: var(--blanco); }
.boton-pequeno.peligro:active { background: var(--rojo-claro); }
.boton-pequeno.peligro .icono { width: 18px; height: 18px; }

/* Los cinco motivos: tarjetas grandes, no una lista de radios diminutos. */
.motivos { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.motivo {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  margin: 0; padding: 14px 15px;
  background: var(--blanco); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); box-shadow: var(--sombra);
  font-weight: 400; cursor: pointer;
}
.motivo input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--verde); flex: 0 0 auto; }
.motivo-cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.motivo-cuerpo strong { font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.motivo-cuerpo small { font-size: 13.5px; color: var(--tinta-suave); line-height: 1.4; }
.motivo-cuerpo .etiqueta { align-self: flex-start; margin-top: 3px; }
.motivo:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); box-shadow: none; }
.motivo:has(input:focus-visible) { outline: 3px solid var(--verde-claro); }
.motivo:active { background: var(--fondo-hueco); }

/* El botón que pide confirmarse antes de hacer algo que no se deshace. */
.boton.confirmando { background: var(--rojo); box-shadow: none; }

/* Ficha del centro */
.acciones-centro { margin: 4px 0 6px; }
.acciones-centro .boton { margin-bottom: 10px; }
.acciones-centro .acciones { margin: 0; }
.acciones-centro .boton-pequeno { flex: 1 1 auto; }

.caja-acceso {
  background: var(--verde-claro); border: 1px solid var(--verde-borde);
  border-left: 4px solid var(--verde);
  border-radius: var(--radio); padding: 14px 16px; margin: 0 0 14px;
  font-size: 15.5px; line-height: 1.5; white-space: pre-wrap;
}
.dato-suelto { margin: 0 0 14px; font-size: 15px; }

.datos-contacto { list-style: none; margin: 0 0 6px; padding: 0; }
.datos-contacto li {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: var(--toque); padding: 6px 0; border-bottom: 1px solid var(--linea);
  font-size: 15px;
}
.datos-contacto li:last-child { border-bottom: 0; }
.datos-contacto .rotulo { color: var(--tinta-suave); font-size: 13.5px; font-weight: 600; flex: 0 0 auto; }
.datos-contacto a { font-weight: 650; text-align: right; word-break: break-word; }

/* Histórico agrupado por mes */
.bloque-mes { margin-bottom: 24px; }
.bloque-mes .titulo-fila { align-items: baseline; margin-bottom: 8px; }
.bloque-mes h2 { margin: 0; }
.bloque-mes .etiquetas { margin-top: 0; }

/* ==================================================================== mapa */

.mapa {
  position: relative;   /* ancla del aviso .mapa-sin-base */
  height: 320px; width: 100%;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--fondo-hueco); margin-bottom: 8px;
}
.mapa-acciones { margin-bottom: 12px; }
.leaflet-container { font: inherit; border-radius: var(--radio); }
.leaflet-top, .leaflet-bottom { z-index: 400; }

/* Los mandos de Leaflet vienen a 30 px: con el dedo se falla uno de cada tres.
   La hoja de Leaflet se carga después de esta, así que los selectores llevan
   .mapa delante para ganar por peso y no por orden. */
.mapa .leaflet-touch .leaflet-bar a,
.mapa .leaflet-bar a,
.mapa.leaflet-touch .leaflet-bar a {
  width: 44px; height: 44px; line-height: 44px; font-size: 21px;
}
.mapa .leaflet-control-attribution { font-size: 11px; padding: 2px 6px; }

/* Aviso de que el servidor de mapas no responde.
   Va por encima del mapa pero SIN capturar el dedo: el supervisor tiene que
   poder seguir moviéndolo y haciendo zoom, porque el punto y el radio siguen
   dibujándose bien aunque no haya fondo. */
.mapa-sin-base {
  position: absolute; z-index: 500; left: 8px; right: 8px; top: 8px;
  margin: 0; padding: 8px 10px;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  font-size: 13px; line-height: 1.4; pointer-events: none;
}

/* =================================================================== guías */

.guia {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 20px 20px 24px; margin-top: 14px; line-height: 1.62;
}
.guia > :first-child { margin-top: 0; }
.guia > :last-child  { margin-bottom: 0; }
.guia p  { margin: 0 0 14px; max-width: 68ch; }
.guia ul, .guia ol { margin: 0 0 16px; padding-left: 22px; max-width: 68ch; }
.guia li { margin-bottom: 7px; }
.guia h2 {
  font-size: 15px; margin: 26px 0 10px; color: var(--verde-osc);
  text-transform: none; letter-spacing: 0; font-weight: 700;
  padding-top: 16px; border-top: 1px solid var(--linea);
}
.guia > h2:first-of-type { padding-top: 0; border-top: 0; }
.guia h3 { font-size: 15px; font-weight: 700; color: var(--tinta); margin: 18px 0 6px; }
.guia .entradilla { font-size: 17px; line-height: 1.55; color: var(--tinta); margin-bottom: 18px; }
.guia .regla {
  background: var(--verde-claro); border-left: 4px solid var(--verde);
  border-radius: var(--radio); padding: 14px 16px; margin: 18px 0;
}
.guia .regla .titulo {
  font-weight: 700; color: var(--verde-osc);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.guia .regla p:last-child { margin-bottom: 0; }
.guia .regla.advertencia { background: var(--ambar-claro); border-left-color: var(--ambar); }
.guia .regla.advertencia .titulo { color: var(--ambar); }
.guia .tabla-envoltura { margin: 4px 0 18px; }
.guia code { background: var(--fondo-hueco); padding: 1px 6px; border-radius: 5px; font-size: 14px; }

/* ======================================================= zona de proyecto */

.resumen-estados { margin-bottom: 8px; }
.fila-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilla {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco);
  font-size: 13.5px; font-weight: 600; color: var(--tinta-suave); text-decoration: none;
}
.pastilla.activa { background: var(--verde-claro); border-color: var(--verde-borde); color: var(--verde-osc); }

/* Enlace a una guía cuando va suelto, sin frase alrededor: si es lo único que
   hay en la línea tiene que poderse pulsar, no leerse. */
.enlace-ayuda {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--toque); padding: 0 15px 0 12px;
  margin: 2px 0 14px;
  border: 1px solid var(--verde-borde); border-radius: 999px;
  background: var(--verde-claro); color: var(--verde-osc);
  font-size: 14.5px; font-weight: 650; text-decoration: none;
}
.enlace-ayuda .icono { width: 19px; height: 19px; }
.enlace-ayuda:active { background: #d5efe4; }
.texto-comentario { white-space: pre-wrap; line-height: 1.5; }
.historial { margin-top: 8px; }
.sublista { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--tinta-media); }
.sublista.excluye { color: var(--tinta-suave); }
.bloque-fase { margin-bottom: 18px; }

/* ========================================================= barra progreso */

.progreso .ancho-0 { width: 0%; }
.progreso .ancho-5 { width: 5%; }
.progreso .ancho-10 { width: 10%; }
.progreso .ancho-15 { width: 15%; }
.progreso .ancho-20 { width: 20%; }
.progreso .ancho-25 { width: 25%; }
.progreso .ancho-30 { width: 30%; }
.progreso .ancho-35 { width: 35%; }
.progreso .ancho-40 { width: 40%; }
.progreso .ancho-45 { width: 45%; }
.progreso .ancho-50 { width: 50%; }
.progreso .ancho-55 { width: 55%; }
.progreso .ancho-60 { width: 60%; }
.progreso .ancho-65 { width: 65%; }
.progreso .ancho-70 { width: 70%; }
.progreso .ancho-75 { width: 75%; }
.progreso .ancho-80 { width: 80%; }
.progreso .ancho-85 { width: 85%; }
.progreso .ancho-90 { width: 90%; }
.progreso .ancho-95 { width: 95%; }
.progreso .ancho-100 { width: 100%; }

/* ===========================================================================
   ORDENADOR

   A partir de 900 px la barra inferior se convierte en columna lateral. No es
   otra aplicación: es la misma, con sitio de sobra.
   =========================================================================== */

@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: var(--lateral-ancho) 1fr; }

  .barra-superior, .barra-inferior { display: none; }

  .lateral {
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100dvh;
    background: var(--lateral); color: var(--lateral-texto);
    padding: 18px 12px;
  }

  .lateral-marca {
    display: flex; align-items: center; gap: 11px;
    padding: 4px 8px 20px; text-decoration: none; color: #fff;
  }
  .marca-icono svg { width: 34px; height: 34px; display: block; }
  .marca-icono rect { fill: var(--verde); }
  .marca-icono path { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
  .marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
  .marca-texto strong { font-size: 16px; font-weight: 750; }
  .marca-texto small { font-size: 12px; color: var(--lateral-texto); }

  .lateral-menu { display: flex; flex-direction: column; gap: 3px; flex: 1; }
  .lateral-menu a {
    display: flex; align-items: center; gap: 12px;
    min-height: 46px; padding: 0 12px; border-radius: var(--radio-sm);
    color: var(--lateral-texto); text-decoration: none;
    font-size: 15px; font-weight: 600;
  }
  .lateral-menu a:hover { background: var(--lateral-alto); color: #fff; }
  .lateral-menu a.activa { background: var(--verde); color: #fff; }

  /* Conmutador de zona en el ordenador. Va pegado al menú, no al pie: pasar de
     Supervisión a Gerencia es navegar, no un ajuste de la cuenta. */
  .lateral-zonas {
    border-top: 1px solid rgba(255,255,255,.09);
    padding-top: 10px; margin-bottom: 10px;
  }
  .zona-actual {
    margin: 0 12px 6px; font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--lateral-texto); opacity: .75;
  }
  .zona-cambiar {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px; border-radius: var(--radio-sm);
    color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 600;
    background: var(--lateral-alto);
  }
  .zona-cambiar:hover { background: var(--verde); }
  .zona-cambiar .icono { width: 19px; height: 19px; flex: none; }

  .lateral-pie { border-top: 1px solid rgba(255,255,255,.09); padding-top: 12px; }
  .lateral-avisos {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px; margin-bottom: 2px;
    border-radius: var(--radio-sm);
    color: var(--lateral-texto); text-decoration: none;
    font-size: 14.5px; font-weight: 500;
  }
  .lateral-avisos:hover { background: var(--lateral-alto); color: #fff; }
  .lateral-avisos .icono { width: 20px; height: 20px; flex: none; }
  .chapa-lateral {
    margin-left: auto;
    min-width: 20px; height: 20px; padding: 0 6px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--rojo); color: #fff;
    font-size: 11.5px; font-weight: 700; font-style: normal; line-height: 1;
  }
  .lateral-usuario {
    display: flex; align-items: center; gap: 11px;
    min-height: 46px; padding: 0 12px; border-radius: var(--radio-sm);
    color: #fff; text-decoration: none;
  }
  .lateral-usuario:hover { background: var(--lateral-alto); }
  .lateral-usuario span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .lateral-usuario strong { font-size: 14.5px; font-weight: 650; }
  .lateral-usuario small { font-size: 12px; color: var(--lateral-texto); }
  .lateral-pie form { margin: 2px 0 0; }
  .lateral-salir {
    width: 100%; display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radio-sm);
    background: transparent; color: var(--lateral-texto);
    font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  }
  .lateral-salir:hover { background: var(--lateral-alto); color: #fff; }

  .contenido { padding: 26px 28px 60px; }

  /* En ordenador manda el título de la vista: la barra verde ya no está. */
  .con-app .contenido h1 { display: block; }
  .con-app .contenido .titulo-fila:has(> h1) { justify-content: space-between; margin-bottom: 4px; }
  .con-app .contenido .titulo-fila:has(> h1):not(:has(> :not(h1))) { display: flex; }

  /* Las pestañas de zona vienen primero en el marcado porque en el móvil el
     título está arriba, en la barra. Aquí el título vuelve a la página, así que
     se coloca por encima de las pestañas sin tocar el orden del marcado. */
  .contenido { display: flex; flex-direction: column; }

  /* Con todo el ancho de un monitor, dos tarjetas de nota se estiran hasta
     parecer pancartas. Se les pone techo. */
  .notas { max-width: 440px; }
  .notas.grandes { max-width: 520px; }
  .contenido > .pestanas { order: -1; }
  .contenido > .pestanas + h1,
  .contenido > .pestanas + .titulo-fila { order: -2; }

  h1 { font-size: 26px; }
  .rejilla { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .campos { grid-template-columns: 1fr 1fr; }
  .campo.ancho2 { grid-column: 1 / -1; }
  .escala { grid-template-columns: repeat(4, 1fr); }
  .pestanas { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .pestanas a { min-height: 40px; }

  /* Con sitio de sobra, la tarjeta vuelve a ser tabla. */
  .tabla-adaptable {
    border-collapse: collapse;
    border: 1px solid var(--linea); border-radius: var(--radio);
    overflow: hidden; box-shadow: var(--sombra);
  }
  .tabla-adaptable thead { display: table-header-group; }
  .tabla-adaptable tbody { display: table-row-group; }
  .tabla-adaptable tr { display: table-row; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .tabla-adaptable td {
    display: table-cell; padding: 12px 14px; border-top: 1px solid var(--linea);
    text-align: left;
  }
  .tabla-adaptable td.num { text-align: right; }
  .tabla-adaptable td::before { content: none; }
  .tabla-adaptable td.titular {
    display: table-cell; font-size: 14.5px; font-weight: 600;
    padding: 12px 14px; margin: 0; border-bottom: 0; border-top: 1px solid var(--linea);
  }
  .tabla-adaptable td a,
  .tabla-adaptable td.titular a { display: inline; min-height: 0; color: var(--verde-osc); text-decoration: none; }
  .tabla-adaptable td a:hover { text-decoration: underline; }
  .tabla-adaptable td.titular a { font-weight: 650; }
  .tabla-adaptable td.accion a { display: inline-flex; }
  .tabla-adaptable td.accion { padding: 12px 14px; }
  .tabla-adaptable td.accion .boton-pequeno { width: auto; }
  .tabla-envoltura:has(.tabla-adaptable) {
    overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--blanco); box-shadow: var(--sombra);
  }
  .tabla-envoltura .tabla-adaptable { min-width: 620px; border: 0; border-radius: 0; box-shadow: none; }
  .tabla-adaptable { background: var(--blanco); }
  .barra-acciones { bottom: 0; }
  .brindis { bottom: 24px; }

  /* En ordenador sí hay ratón: las filas y fichas responden al pasar por encima. */
  tbody tr:hover td { background: #f7faf9; }
  tbody tr.fila-rechazada:hover td { background: #fbdedb; }
  tbody tr.fila-aviso:hover td { background: #faecd6; }
  .ficha a.cuerpo:hover { background: #f9fbfa; }
  .boton:hover { background: var(--verde-osc); }
  .boton-pequeno:hover { background: var(--fondo-hueco); }
  .boton-pequeno.primario:hover { background: var(--verde-osc); }
  .boton-pequeno.aviso-borrador:hover { background: var(--rojo-claro); }
  .pestanas a:hover { border-color: var(--linea-fuerte); }
}

@media (min-width: 560px) and (max-width: 899px) {
  .campos { grid-template-columns: 1fr 1fr; }
  .campo.ancho2 { grid-column: 1 / -1; }
  .escala { grid-template-columns: repeat(4, 1fr); }
  .rejilla { grid-template-columns: repeat(4, 1fr); }
}

/* Quien prefiere menos animación no debería tener ninguna. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* La media de un mes no es la nota de una visita: se dice, y se dibuja aparte. */
.notas-rotulo {
  margin: 2px 0 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave);
}
.notas.resumen { margin: 0 0 14px; }
.notas.resumen .nota { border-style: dashed; }

/* ============================================ pantalla de instalación */

/* Es un cartel, no una pantalla de trabajo: no lleva menú ni barra, y se ve
   antes de tener cuenta. Por eso se dibuja sola. */
.pantalla-instalar {
  max-width: 520px; margin: 0 auto; padding: 12px 0 40px;
}
.sello-instalar { display: flex; justify-content: center; margin-bottom: 16px; }
.sello-instalar svg { width: 64px; height: 64px; }
.sello-instalar rect { fill: var(--verde); }
.sello-instalar path { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }

.pantalla-instalar h1 {
  display: block; text-align: center; font-size: 25px; margin: 0 0 10px;
}
.entradilla-instalar {
  text-align: center; font-size: 16px; line-height: 1.55;
  color: var(--tinta-media); margin: 0 0 24px;
}

.paso-instalar { margin-bottom: 8px; }
.paso-instalar .boton { margin-bottom: 10px; }

.instrucciones {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 4px 18px 18px; box-shadow: var(--sombra);
}
.instrucciones h2 { margin-top: 20px; }
.pasos { margin: 0; padding-left: 22px; }
.pasos li { margin-bottom: 9px; line-height: 1.5; font-size: 15px; }

.separador-instalar { border: 0; border-top: 1px solid var(--linea); margin: 28px 0 22px; }

.caja-qr {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 18px; margin: 0 0 16px; text-align: center;
}
.caja-qr svg { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; }
.direccion-qr {
  margin: 14px 0 0; font-size: 13.5px; color: var(--tinta-suave);
  word-break: break-all;
}

/* En ordenador la página no necesita ensancharse: un cartel muy ancho se lee
   peor, no mejor. */
@media (min-width: 900px) {
  .pantalla-instalar { padding-top: 32px; }
}

/* Enlace de instalación bajo el acceso: se ve, pero no compite con «Entrar». */
.pie-acceso { margin: 18px 0 0; text-align: center; }
.pie-acceso a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.pie-acceso a:active { background: var(--fondo-hueco); border-radius: var(--radio-sm); }

/* ================================================== pantalla sin conexión */

/* Se ve con el móvil en la mano, de pie, probablemente con prisa y con mala
   luz. Pocas cosas, grandes, y la acción al alcance del pulgar. */
.pagina-aviso { background: var(--fondo); }

.sin-conexion {
  max-width: 440px; margin: 0 auto;
  padding: 40px 18px calc(32px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: flex-start;
}
.sc-marca svg { width: 52px; height: 52px; display: block; margin-bottom: 22px; }
.sc-marca rect { fill: var(--verde); }
.sc-marca path {
  fill: none; stroke: #fff; stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
}

.sin-conexion h1 { margin: 0 0 12px; font-size: 27px; line-height: 1.2; }
.sc-principal { margin: 0 0 22px; font-size: 16.5px; line-height: 1.5; color: var(--tinta-media); }

.sc-pasos { margin: 0 0 28px; padding-left: 20px; }
.sc-pasos li { margin-bottom: 9px; font-size: 15.5px; line-height: 1.45; color: var(--tinta-media); }

/* El botón ocupa el ancho entero: es lo único que hay que pulsar. */
.sin-conexion .boton { width: 100%; }

.sc-estado {
  width: 100%; margin: 14px 0 0; padding: 12px 14px;
  border-radius: var(--radio-sm);
  background: var(--ambar-claro); border: 1px solid var(--ambar-borde);
  color: var(--ambar); font-size: 14.5px; line-height: 1.4;
}
.sc-estado[hidden] { display: none; }

.sc-nota {
  width: 100%; margin-top: auto; padding-top: 26px;
  border-top: 1px solid var(--linea);
}
.sc-nota p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--tinta-suave); }
.sc-nota p:last-child { margin-bottom: 0; }
.sc-nota strong { color: var(--tinta-media); }