/* ==================================================================
   Farma FGP · hoja de estilos
   Sin dependencias, sin estilos en línea (la CSP los bloquea).
   Colores corporativos: bosque #1E4F33, brote #5BBF85,
   niebla #F2F5F3 y blanco. El resto se deriva de ellos.
   El elemento propio de la marca es el CAMINO de la auditoría
   (las fases): en la entrada y en el proyecto de la farmacia.
   ================================================================== */

@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --bosque: #1E4F33;
  --bosque-hondo: #153A25;
  --bosque-medio: #2A6B45;
  --brote: #5BBF85;
  --brote-claro: #DDF2E5;
  --brote-palido: #EEF7F1;
  --niebla: #F2F5F3;
  --blanco: #FFFFFF;
  --tinta: #14271C;
  --texto: #2B3A31;
  --musgo: #5C6B62;
  --linea: #E2E9E4;
  --linea-fuerte: #CBD6CF;
  --ambar: #8A5A00;
  --ambar-fondo: #FFF4DC;
  --ambar-linea: #F2D48F;
  --rojo: #B3261E;
  --rojo-fondo: #FDECEA;
  --rojo-linea: #F4B8B2;
  --gris-fondo: #EEF1EF;

  --radio-s: 8px;
  --radio: 12px;
  --radio-l: 20px;
  --sombra: 0 1px 2px rgba(20, 39, 28, .06), 0 2px 8px rgba(20, 39, 28, .04);
  --sombra-l: 0 12px 32px rgba(20, 39, 28, .14);
  --lateral: 268px;
  --barra-alto: 72px;
  --fuente: "Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--niebla);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--bosque-medio); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bosque); }
h1, h2, h3 { color: var(--tinta); margin: 0; line-height: 1.2; }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--brote); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--bosque); color: #fff; padding: 10px 14px; border-radius: var(--radio); z-index: 100; }
.saltar:focus { top: 12px; }
.ico { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------------
   Marca: el cuadrado FG y el nombre
   ------------------------------------------------------------------ */
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
a:has(> .marca), .barra-marca { text-decoration: none; }
.marca-cuadro {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--brote); color: var(--bosque-hondo);
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
}
.marca-texto { display: grid; line-height: 1.15; }
.marca-texto strong { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.marca-texto span { font-size: 12px; font-weight: 600; color: var(--brote); letter-spacing: .06em; }
.marca-clara .marca-texto strong { color: var(--tinta); }
.marca-clara .marca-texto span { color: var(--bosque-medio); }

/* ------------------------------------------------------------------
   Armazón de la aplicación
   ------------------------------------------------------------------ */
.app { min-height: 100vh; display: flex; }
.lateral {
  width: var(--lateral); flex: none;
  background: var(--bosque); color: #DCEBE2;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.lateral-cabeza { height: var(--barra-alto); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex: none; }
.cerrar-menu { display: none; color: #fff; padding: 8px; border-radius: 999px; }
.lateral-scroll { flex: 1; overflow-y: auto; padding: 8px 12px 24px; }

.nav-accion {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 4px 18px; padding: 12px 14px;
  background: var(--brote); color: var(--bosque-hondo);
  border-radius: 16px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.nav-accion:hover { color: var(--bosque-hondo); background: #6ACB92; }
.nav-accion-icono { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .45); display: grid; place-items: center; flex: none; }
.nav-accion-texto { display: grid; line-height: 1.2; }
.nav-accion-texto strong { font-size: 15px; }
.nav-accion-texto small { font-size: 12px; opacity: .8; }

.nav-grupo { font-size: 12px; font-weight: 700; color: var(--brote); padding: 14px 12px 6px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 1px 0; border-radius: var(--radio);
  color: #DCEBE2; text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brote); }
.nav-item .ico { color: var(--brote); }
.nav-pronto { color: rgba(220, 235, 226, .45); cursor: default; }
.nav-pronto:hover { background: none; color: rgba(220, 235, 226, .45); }
.nav-pronto .ico { color: rgba(91, 191, 133, .45); }
.etiqueta-pronto { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(220, 235, 226, .7); }
.nav-contador { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--brote); color: var(--bosque-hondo); font-size: 12px; font-weight: 800; display: grid; place-items: center; }

.lateral-pie { padding: 14px 16px 18px; border-top: 1px solid rgba(255, 255, 255, .1); flex: none; }
.lateral-pie form { margin: 0; }
.boton-salir { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: var(--radio); background: none; color: #F6C9C4; font: inherit; font-size: 14px; cursor: pointer; }
.boton-salir:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra {
  height: var(--barra-alto); background: var(--blanco); border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 16px; padding: 0 32px;
  position: sticky; top: 0; z-index: 20;
}
.boton-menu { display: none; color: var(--tinta); padding: 8px; margin-left: -8px; border-radius: 999px; }
.barra-marca { display: none; }
.barra-titulo { font-size: 15px; font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.saludo { font-size: 14px; color: var(--musgo); white-space: nowrap; }
.saludo strong { color: var(--bosque); }
.campana { position: relative; width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; color: var(--tinta); }
.campana:hover { background: var(--niebla); color: var(--tinta); }
.campana-numero { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.iniciales { width: 40px; height: 40px; border-radius: 999px; background: var(--bosque); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; text-decoration: none; flex: none; }
.iniciales:hover { color: #fff; background: var(--bosque-medio); }

.contenido { width: 100%; max-width: 1180px; padding: 32px; margin: 0 auto; flex: 1; }
.pie { padding: 0 32px 28px; font-size: 12.5px; color: var(--musgo); max-width: 1180px; width: 100%; margin: 0 auto; }

/* Cabecera de cada pantalla */
.cabecera-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cabecera-pagina p { color: var(--musgo); margin: 6px 0 0; max-width: 64ch; }
.cabecera-pagina .acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.volver { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; text-decoration: none; margin-bottom: 10px; color: var(--musgo); }
.volver .ico { width: 16px; height: 16px; }

/* ------------------------------------------------------------------
   Barra inferior del móvil
   ------------------------------------------------------------------ */
.barra-app { display: none; }

/* ------------------------------------------------------------------
   Tarjetas y rejillas
   ------------------------------------------------------------------ */
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra); padding: 22px; min-width: 0; }
.tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tarjeta-cabeza .ico { color: var(--bosque-medio); }
.tarjeta-cabeza .enlace-lateral { margin-left: auto; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tarjeta-nota { font-size: 13.5px; color: var(--musgo); }
.rejilla { display: grid; gap: 16px; align-content: start; }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla > .tarjeta + .tarjeta { margin-top: 0; }
.separado { margin-top: 16px; }

/* Cifras (escritorio de admin) */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cifra { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 16px 18px; text-decoration: none; color: inherit; display: grid; gap: 2px; }
a.cifra:hover { border-color: var(--brote); color: inherit; }
.cifra strong { font-size: 30px; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; line-height: 1.1; }
.cifra span { font-size: 13px; color: var(--musgo); }
.cifra em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ambar); }

/* Franja de cifras pequeñas */
.franja { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14px; }
.franja strong { color: var(--tinta); font-weight: 800; }
.franja span { color: var(--musgo); }

/* Listas de filas */
.filas { display: grid; }
.fila { display: flex; align-items: center; gap: 12px; padding: 11px 8px; margin: 0 -8px; border-radius: var(--radio); text-decoration: none; color: inherit; min-width: 0; }
.fila + .fila { border-top: 1px solid var(--linea); border-radius: 0; }
a.fila:hover { background: var(--brote-palido); color: inherit; border-radius: var(--radio); }
a.fila:hover + .fila { border-top-color: transparent; }
.fila-avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--brote-claro); color: var(--bosque); font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: none; }
.fila-texto { flex: 1; min-width: 0; display: grid; }
.fila-texto strong { font-size: 14.5px; color: var(--tinta); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-texto span { font-size: 13px; color: var(--musgo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-fin { flex: none; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--musgo); }
.fila .ico-chevron { width: 18px; height: 18px; color: var(--linea-fuerte); }

/* Chips de estado */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--gris-fondo); color: var(--musgo); }
.chip-verde { background: var(--brote-claro); color: var(--bosque); }
.chip-ambar { background: var(--ambar-fondo); color: var(--ambar); }
.chip-rojo { background: var(--rojo-fondo); color: var(--rojo); }
.chip-bosque { background: var(--bosque); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Estado vacío y "Pronto" */
.vacio { display: flex; gap: 16px; align-items: flex-start; }
.vacio-icono { width: 48px; height: 48px; border-radius: 999px; background: var(--brote-palido); color: var(--bosque-medio); display: grid; place-items: center; flex: none; }
.vacio h2 { margin-bottom: 4px; }
.vacio p { color: var(--musgo); font-size: 14px; }
.tarjeta-pronto { border-style: dashed; border-color: var(--linea-fuerte); background: rgba(255, 255, 255, .6); box-shadow: none; }
.pronto { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--gris-fondo); color: var(--musgo); }

/* Saludo del escritorio */
.hoy { margin-bottom: 22px; }
.hoy h1 { font-size: 32px; }
.hoy p { color: var(--musgo); margin-top: 4px; }

/* ------------------------------------------------------------------
   El camino de la auditoría (fases)
   ------------------------------------------------------------------ */
.camino { list-style: none; margin: 0; padding: 0; display: grid; }
.camino li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; position: relative; padding-bottom: 18px; }
.camino li:last-child { padding-bottom: 0; }
.camino li::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--linea); }
.camino li:last-child::before { display: none; }
.camino-punto { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--blanco); border: 2px solid var(--linea-fuerte); color: var(--musgo); position: relative; z-index: 1; }
.camino-punto .ico { width: 18px; height: 18px; }
.camino-texto { padding-top: 6px; }
.camino-texto strong { display: block; color: var(--tinta); font-size: 14.5px; }
.camino-texto span { display: block; font-size: 13px; color: var(--musgo); }
.camino .hecha .camino-punto { background: var(--bosque); border-color: var(--bosque); color: #fff; }
.camino .hecha::before { background: var(--bosque); }
.camino .actual .camino-punto { background: var(--brote); border-color: var(--brote); color: var(--bosque-hondo); box-shadow: 0 0 0 5px var(--brote-claro); }

/* Versión clara sobre el panel verde de la entrada */
.camino-claro li::before { background: rgba(255, 255, 255, .18); }
.camino-claro .camino-punto { background: transparent; border-color: rgba(255, 255, 255, .35); color: #DCEBE2; }
.camino-claro .camino-texto strong { color: #fff; font-weight: 600; }
.camino-claro li { padding-bottom: 10px; }
.camino-claro .camino-punto { width: 30px; height: 30px; font-size: 12px; }
.camino-claro li { grid-template-columns: 30px 1fr; }
.camino-claro li::before { left: 14px; top: 30px; }
.camino-claro .camino-texto { padding-top: 4px; }
.camino-claro .clave .camino-punto { background: var(--brote); border-color: var(--brote); color: var(--bosque-hondo); }

/* Barra de progreso: el ancho va en clases (sin estilos en línea) */
.progreso { height: 8px; border-radius: 999px; background: var(--gris-fondo); overflow: hidden; }
.progreso span { display: block; height: 100%; border-radius: 999px; background: var(--brote); }
.ancho-0 { width: 0; } .ancho-5 { width: 5%; } .ancho-10 { width: 10%; } .ancho-15 { width: 15%; } .ancho-20 { width: 20%; }
.ancho-25 { width: 25%; } .ancho-30 { width: 30%; } .ancho-35 { width: 35%; } .ancho-40 { width: 40%; } .ancho-45 { width: 45%; }
.ancho-50 { width: 50%; } .ancho-55 { width: 55%; } .ancho-60 { width: 60%; } .ancho-65 { width: 65%; } .ancho-70 { width: 70%; }
.ancho-75 { width: 75%; } .ancho-80 { width: 80%; } .ancho-85 { width: 85%; } .ancho-90 { width: 90%; } .ancho-95 { width: 95%; } .ancho-100 { width: 100%; }

/* ------------------------------------------------------------------
   Botones y enlaces
   ------------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--radio);
  border: 1px solid transparent; font: inherit; font-size: 14.5px; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--bosque); color: #fff;
}
.boton:hover { background: var(--bosque-medio); color: #fff; }
.boton .ico { width: 18px; height: 18px; }
.boton-brote { background: var(--brote); color: var(--bosque-hondo); }
.boton-brote:hover { background: #6ACB92; color: var(--bosque-hondo); }
.boton-borde { background: var(--blanco); color: var(--tinta); border-color: var(--linea-fuerte); }
.boton-borde:hover { background: var(--niebla); color: var(--tinta); }
.boton-peligro { background: var(--blanco); color: var(--rojo); border-color: var(--rojo-linea); }
.boton-peligro:hover { background: var(--rojo-fondo); color: var(--rojo); }
.boton-pequeno { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.boton-ancho { width: 100%; }
.boton-grande { min-height: 50px; font-size: 15.5px; }
.enlace { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.enlace .ico { width: 16px; height: 16px; }
.enlace-centrado { display: flex; justify-content: center; margin-top: 14px; }
.en-linea { display: inline; margin: 0; }

/* ------------------------------------------------------------------
   Formularios
   ------------------------------------------------------------------ */
.formulario { display: grid; gap: 16px; }
.formulario > .boton { justify-self: start; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 14px; font-weight: 700; color: var(--tinta); }
.campo .opcional { font-weight: 500; color: var(--musgo); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"], .campo input[type="search"],
.campo input[type="number"], .campo input[type="tel"], .campo input[type="url"], .campo select, .campo textarea, .control {
  width: 100%; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--blanco); color: var(--tinta); font: inherit; font-size: 15px;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .control:focus { outline: none; border-color: var(--bosque-medio); box-shadow: 0 0 0 4px var(--brote-claro); }
.campo-ayuda { font-size: 13px; color: var(--musgo); margin: 0; }
.campo-error { font-size: 13px; color: var(--rojo); font-weight: 600; margin: 0; }
.campo-con-error input, .campo-con-error select, .campo-con-error textarea { border-color: var(--rojo); }
.campo-casilla { grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.campo-casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--bosque); }
.campo-casilla label { font-weight: 500; color: var(--texto); }
.campo-casilla .campo-error { grid-column: 2; }
.opciones { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.opciones legend { font-size: 14px; font-weight: 700; color: var(--tinta); margin-bottom: 8px; padding: 0; }
.opcion { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); cursor: pointer; background: var(--blanco); }
.opcion:hover { border-color: var(--linea-fuerte); }
.opcion input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--bosque); flex: none; }
.opcion span { display: grid; }
.opcion strong { font-size: 14px; color: var(--tinta); }
.opcion small { font-size: 12.5px; color: var(--musgo); }
.opcion:has(input:checked) { border-color: var(--bosque-medio); background: var(--brote-palido); }
.opcion:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.fila-formulario { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fila-formulario .campo { flex: 1; min-width: 200px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros .control { width: auto; min-width: 160px; min-height: 42px; padding: 8px 12px; }
.filtros .control[type="search"] { flex: 1; min-width: 200px; }
.datos { display: grid; gap: 10px; margin: 0; }
.datos div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; font-size: 14px; }
.datos dt { color: var(--musgo); }
.datos dd { margin: 0; color: var(--tinta); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------
   Avisos (tras redirigir)
   ------------------------------------------------------------------ */
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radio); border: 1px solid; font-size: 14px; margin-bottom: 18px; }
.aviso .ico { width: 20px; height: 20px; margin-top: 1px; }
.aviso-exito { background: var(--brote-palido); border-color: #B9E3C9; color: var(--bosque); }
.aviso-info { background: var(--ambar-fondo); border-color: var(--ambar-linea); color: var(--ambar); }
.aviso-error { background: var(--rojo-fondo); border-color: var(--rojo-linea); color: var(--rojo); }
.aviso a { color: inherit; font-weight: 700; }

/* ------------------------------------------------------------------
   Tablas (en el móvil pasan a fichas)
   ------------------------------------------------------------------ */
.tabla-marco { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--musgo); padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td a { font-weight: 700; text-decoration: none; color: var(--tinta); }
.tabla td a:hover { color: var(--bosque-medio); text-decoration: underline; }
.tabla .secundario { display: block; font-size: 12.5px; color: var(--musgo); font-weight: 500; }

.paginacion { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.paginacion-estado { font-size: 13.5px; color: var(--musgo); }

/* ------------------------------------------------------------------
   Pantallas de acceso (entrar, alta, primera entrada)
   ------------------------------------------------------------------ */
.acceso { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 44%) 1fr; background: var(--blanco); }
.acceso-panel { background: var(--bosque); color: #DCEBE2; padding: 40px 48px; display: flex; flex-direction: column; gap: 36px; position: relative; overflow: hidden; }
.acceso-panel::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 999px; right: -170px; bottom: -170px; border: 64px solid rgba(91, 191, 133, .12); pointer-events: none; }
.acceso-claim { margin-top: auto; }
.acceso-claim h2 { color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; max-width: 16ch; }
.acceso-claim p { margin-top: 10px; font-size: 15px; max-width: 42ch; }
.acceso-pie { font-size: 12.5px; color: rgba(220, 235, 226, .7); position: relative; z-index: 1; }
.acceso-cuerpo { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--niebla); }
.acceso-caja { width: 100%; max-width: 420px; }
.acceso-caja-ancha { max-width: 600px; }
.acceso-movil { display: none; margin-bottom: 28px; }
.puerta { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--brote-claro); color: var(--bosque); font-size: 12.5px; font-weight: 700; margin-bottom: 16px; }
.puerta .ico { width: 16px; height: 16px; }
.acceso-caja h1 { font-size: 30px; }
.acceso-intro { color: var(--musgo); margin: 8px 0 24px; }
.acceso-tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra); padding: 24px; }
.acceso-nota { margin-top: 18px; font-size: 13.5px; color: var(--musgo); text-align: center; }

.pasos-bienvenida { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 22px; flex-wrap: wrap; }
.pasos-bienvenida li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--musgo); padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--blanco); border: 1px solid var(--linea); }
.paso-numero { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--gris-fondo); font-size: 12px; font-weight: 800; }
.paso-numero .ico { width: 14px; height: 14px; }
.pasos-bienvenida .actual { border-color: var(--bosque-medio); color: var(--tinta); }
.pasos-bienvenida .actual .paso-numero { background: var(--bosque); color: #fff; }
.pasos-bienvenida .hecho .paso-numero { background: var(--brote); color: var(--bosque-hondo); }

.instrucciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: paso; }
.instrucciones > li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; counter-increment: paso; }
.instrucciones > li::before { content: counter(paso); width: 32px; height: 32px; border-radius: 999px; background: var(--brote-claro); color: var(--bosque); font-weight: 800; display: grid; place-items: center; }
.instrucciones h2 { font-size: 15.5px; margin-bottom: 4px; }
.instrucciones p { font-size: 14px; color: var(--musgo); }
.qr-marco { width: 196px; padding: 10px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); margin: 12px 0; }
.clave-manual summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--bosque-medio); }
.clave-secreta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 16px; font-weight: 700; letter-spacing: .08em; color: var(--tinta); }
.clave-secreta span { background: var(--niebla); padding: 4px 8px; border-radius: 6px; }
.codigos-recuperacion { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.codigos-recuperacion li { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-align: center; padding: 10px; border-radius: var(--radio-s); background: var(--niebla); color: var(--tinta); }
.texto-legal { font-size: 14px; color: var(--texto); }
.texto-legal ul { padding-left: 20px; margin: 8px 0 14px; }
.texto-legal li { margin-bottom: 6px; }

/* Página suelta (errores) */
.sola { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--niebla); }
.sola-tarjeta { width: 100%; max-width: 480px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra); padding: 32px; display: grid; gap: 12px; justify-items: start; }
.sola-codigo { font-size: 13px; font-weight: 700; color: var(--musgo); margin-top: 12px; }
.sola-tarjeta p { color: var(--musgo); }
.detalle-tecnico { width: 100%; overflow: auto; font-size: 12px; background: var(--niebla); padding: 12px; border-radius: var(--radio-s); white-space: pre-wrap; }

/* Avisos de la campana */
.aviso-fila { display: flex; gap: 12px; align-items: flex-start; padding: 14px 4px; }
.aviso-fila + .aviso-fila { border-top: 1px solid var(--linea); }
.aviso-punto { width: 10px; height: 10px; border-radius: 999px; background: var(--brote); flex: none; margin-top: 7px; }
.aviso-fila.leido .aviso-punto { background: var(--linea-fuerte); }
.aviso-fila form { margin: 0; flex: 1; min-width: 0; }
.aviso-boton { all: unset; cursor: pointer; display: grid; gap: 2px; width: 100%; }
.aviso-boton:focus-visible { outline: 3px solid var(--brote); outline-offset: 2px; border-radius: 6px; }
.aviso-boton strong { color: var(--tinta); font-size: 14.5px; }
.aviso-fila.leido .aviso-boton strong { font-weight: 600; }
.aviso-boton span { font-size: 13.5px; color: var(--musgo); }
.aviso-boton small { font-size: 12px; color: var(--musgo); }


/* ------------------------------------------------------------------
   Farmacias y auditorías (lote 2)
   ------------------------------------------------------------------ */
.separado-s { margin-top: 10px; }
.rejilla-ficha { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.tarjeta-destacada { border-color: var(--ambar-linea); background: #FFFCF4; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.acciones-fila form { margin: 0; }
.acciones-formulario { display: flex; flex-wrap: wrap; gap: 10px; }

/* Avance: barra y porcentaje */
.avance { display: flex; align-items: center; gap: 10px; min-width: 120px; }
.avance .progreso { flex: 1; }
.avance strong { font-size: 13px; font-weight: 800; color: var(--tinta); min-width: 42px; text-align: right; }

/* Camino con estados reales */
.camino-estado { font-weight: 700; color: var(--bosque-medio); }
.camino .bloqueada .camino-punto { background: var(--rojo-fondo); border-color: var(--rojo-linea); color: var(--rojo); }
.camino .bloqueada .camino-estado { color: var(--rojo); }

/* Fases con su control (ficha del consultor) */
.fases-gestion { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.fases-gestion li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; }
.fases-gestion li + li { border-top: 1px solid var(--linea); }
.fases-gestion .fase-completada .camino-punto { background: var(--bosque); border-color: var(--bosque); color: #fff; }
.fases-gestion .fase-en_curso .camino-punto { background: var(--brote); border-color: var(--brote); color: var(--bosque-hondo); }
.fases-gestion .fase-bloqueada .camino-punto { background: var(--rojo-fondo); border-color: var(--rojo-linea); color: var(--rojo); }
.fase-texto { display: grid; min-width: 0; }
.fase-texto strong { font-size: 14.5px; color: var(--tinta); }
.fase-texto span { font-size: 12.5px; color: var(--musgo); }
.fase-bloqueada .fase-texto span { color: var(--rojo); font-weight: 700; }
.fase-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.control.control-pequeno { width: auto; min-height: 36px; padding: 6px 10px; font-size: 13.5px; }

/* Desplegables */
.desplegable { border-top: 1px solid var(--linea); margin-top: 16px; padding-top: 12px; }
.desplegable summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--bosque-medio); }
.desplegable[open] summary { margin-bottom: 14px; }

.datos-estrecho div { grid-template-columns: 130px 1fr; }
.opciones-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.opciones .campo-ayuda { margin: -4px 0 8px; }
.campo input[type="date"] { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--blanco); color: var(--tinta); font: inherit; font-size: 15px; }
.filtro-casilla { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); }
.filtro-casilla input { width: 18px; height: 18px; accent-color: var(--bosque); }

/* Seguimiento de la empresa colaboradora: una fila por auditoría */
.seguimiento { list-style: none; margin: 0; padding: 0; display: grid; }
.seguimiento-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(140px, 1fr); gap: 14px; align-items: center; padding: 12px 0; }
.seguimiento-fila + .seguimiento-fila { border-top: 1px solid var(--linea); }
.seguimiento-fila.apagada { opacity: .6; }
.seguimiento-texto { display: grid; min-width: 0; }
.seguimiento-texto strong { font-size: 14.5px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seguimiento-texto span { font-size: 13px; color: var(--musgo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seguimiento-fase { font-size: 14px; color: var(--tinta); }
.fase-numero { font-size: 12px; font-weight: 800; color: var(--bosque-medio); background: var(--brote-palido); padding: 2px 8px; border-radius: 999px; margin-right: 4px; }

/* Cierre que ve la farmacia */
.cierre { background: var(--brote-palido); border-radius: var(--radio); padding: 14px 16px; }
.cierre h3 { margin: 0 0 6px; }
.cierre ul { margin: 0 0 12px; padding-left: 20px; }
.cierre ul:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Pantallas medianas y móvil
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-ficha { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  .lateral {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; height: auto;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--sombra-l);
  }
  .lateral:target, .lateral.abierta { transform: none; }
  .cerrar-menu { display: block; }
  .velo { display: none; position: fixed; inset: 0; background: rgba(20, 39, 28, .45); z-index: 50; }
  .lateral:target + .velo, .lateral.abierta + .velo { display: block; }
  .boton-menu { display: block; }
  .barra { padding: 0 16px; gap: 10px; }
  .barra-titulo { display: none; }
  .barra-marca { display: flex; }
  .barra-marca .marca-cuadro { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
  .barra-marca .marca-texto strong { font-size: 15px; }
  .barra-marca .marca-texto span { font-size: 10.5px; }
  .saludo { display: none; }
  .contenido { padding: 20px 16px 110px; }
  .pie { padding: 0 16px 110px; }

  .barra-app {
    display: flex; align-items: flex-end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--blanco); border-top: 1px solid var(--linea);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .barra-app-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; color: var(--musgo); text-decoration: none; font-size: 11.5px; font-weight: 600; position: relative; min-width: 0; }
  .barra-app-item .ico { width: 24px; height: 24px; }
  .barra-app-item[aria-current="page"] { color: var(--bosque); font-weight: 800; }
  .barra-app-item[aria-current="page"] .ico { color: var(--bosque-medio); }
  .barra-app-punto { position: absolute; top: 6px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 999px; background: var(--rojo); border: 2px solid #fff; }
  .barra-app-accion { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-bottom: 8px; text-decoration: none; font-size: 11.5px; font-weight: 800; color: var(--bosque); }
  .barra-app-boton { width: 58px; height: 58px; margin-top: -24px; border-radius: 999px; background: var(--bosque); color: var(--brote); display: grid; place-items: center; border: 4px solid var(--blanco); box-shadow: 0 6px 16px rgba(20, 39, 28, .25); }
  .barra-app-boton .ico { width: 26px; height: 26px; }
}

@media (max-width: 860px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso-panel { display: none; }
  .acceso-movil { display: block; }
  .acceso-cuerpo { align-items: flex-start; padding: 28px 16px 40px; }
  .rejilla-2, .rejilla-3, .rejilla-ficha { grid-template-columns: 1fr; }
  .seguimiento-fila { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 640px) {
  h1, .hoy h1, .acceso-caja h1 { font-size: 25px; }
  .tarjeta { padding: 18px; border-radius: 18px; }
  .cifras { gap: 10px; }
  .cifra { padding: 14px; }
  .cifra strong { font-size: 26px; }
  .datos div, .datos-estrecho div { grid-template-columns: 1fr; gap: 2px; }
  .fases-gestion li { grid-template-columns: 36px 1fr; }
  .fase-form { grid-column: 2; }
  .codigos-recuperacion { grid-template-columns: 1fr; }
  .boton-movil-ancho { width: 100%; }
  .filtros .control { flex: 1 1 140px; min-width: 0; }
  .fila-fin form .boton-pequeno { padding: 6px 10px; }
  .fila-con-acciones { flex-wrap: wrap; }
  .fila-con-acciones .fila-fin { width: 100%; padding-left: 50px; }
  .tabla-fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-fichas, .tabla-fichas tbody, .tabla-fichas tr, .tabla-fichas td { display: block; width: 100%; }
  .tabla-fichas tr { padding: 12px 0; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .tabla-fichas td.celda-principal { grid-column: 1 / -1; }
  .tabla-fichas tr:last-child { border-bottom: 0; }
  .tabla-fichas td { border: 0; padding: 0; font-size: 13.5px; }
  .tabla-fichas td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: 12px; color: var(--musgo); font-weight: 600; }
  .tabla-fichas td.celda-principal::before { display: none; }
}

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

@media print {
  .lateral, .barra, .barra-app, .velo { display: none !important; }
  body { background: #fff; }
}

/* Lote 3: formulario abierto y procedencias */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.opcion-fija { background: var(--brote-palido); border-color: #B9E3C9; cursor: default; }
.opcion-fija input { opacity: .8; }
.fila-procedencia { gap: 10px; flex-wrap: wrap; }
.fila-procedencia .control { flex: 1; min-width: 160px; }
.fila-procedencia .fila-fin { min-width: 90px; }

/* Lote 4: reuniones y agenda */
.campo input[type="time"] { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--blanco); color: var(--tinta); font: inherit; font-size: 15px; }
.reunion { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; }
.reunion + .reunion { border-top: 1px solid var(--linea); }
.reunion-hora { display: grid; min-width: 56px; text-decoration: none; color: var(--tinta); }
.reunion-hora strong { font-size: 16px; font-weight: 800; }
.reunion-hora span { font-size: 12px; color: var(--musgo); font-weight: 600; }
.reunion-texto { display: grid; min-width: 0; text-decoration: none; color: inherit; }
.reunion-texto strong { font-size: 14.5px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reunion-texto span { font-size: 13px; color: var(--musgo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reunion-cancelada .reunion-texto strong, .reunion-cancelada .reunion-hora strong { text-decoration: line-through; color: var(--musgo); }
.reunion-celebrada { opacity: .7; }
.reunion-ahora .reunion-hora strong { color: var(--bosque-medio); }
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.semana .tarjeta { padding: 14px; }
.semana .tarjeta + .tarjeta { margin-top: 0; }
.semana h2 { font-size: 14.5px; }
.semana .reunion { grid-template-columns: 1fr; gap: 2px; }
.semana .reunion-fin:empty { display: none; }
.dia-hoy { border-color: var(--brote); box-shadow: 0 0 0 2px var(--brote-claro); }
.dia-vacio { background: rgba(255, 255, 255, .55); box-shadow: none; }
.proxima-reunion { display: flex; align-items: baseline; gap: 10px; font-size: 20px; color: var(--tinta); margin-bottom: 4px; }
.proxima-reunion strong { font-weight: 800; }
.proxima-reunion span { font-size: 16px; color: var(--bosque-medio); font-weight: 700; }
@media (max-width: 1100px) {
  .semana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .semana .reunion { grid-template-columns: auto 1fr auto; gap: 10px; }
}
@media (max-width: 640px) {
  .semana { grid-template-columns: 1fr; }
  .dia-vacio { display: none; }
  .dia-vacio.dia-hoy { display: block; }
}
.rejilla > .campo { align-content: start; }

/* Lote 5: lo ocupado en Cenfarte, en la agenda */
.reunion-externa { color: var(--musgo); }
.reunion-externa .reunion-hora strong, .reunion-externa .reunion-texto strong { color: var(--musgo); font-weight: 600; }
.reunion-externa .reunion-texto strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--linea-fuerte); margin-right: 6px; vertical-align: middle; }

/* ==================================================================
   Lote 6: agenda (mes / semana / día), confirmaciones, filtros con
   semáforo, filas clicables y la marca de la empresa colaboradora.
   ================================================================== */
:root {
  --azul: #1F5FAD;
  --azul-fondo: #E7F0FB;
  --violeta: #6A3FB5;
  --violeta-fondo: #F0EAFB;
  --transicion: 160ms cubic-bezier(.2, .7, .3, 1);
}

/* Barra de la agenda */
.agenda-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.agenda-navegar, .agenda-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agenda-titulo { font-size: 18px; font-weight: 800; color: var(--tinta); margin-left: 6px; letter-spacing: -.01em; }
.boton-icono { width: 44px; padding: 0; }
.boton-icono .ico { width: 20px; height: 20px; }
.segmentos { display: inline-flex; padding: 4px; gap: 2px; background: var(--gris-fondo); border-radius: 12px; border: 1px solid var(--linea); }
.segmento { padding: 8px 16px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--musgo); text-decoration: none; transition: background var(--transicion), color var(--transicion), box-shadow var(--transicion); }
.segmento:hover { color: var(--tinta); background: rgba(255, 255, 255, .6); }
.segmento.activo { background: var(--blanco); color: var(--bosque); box-shadow: var(--sombra); }

/* Rejilla de mes y semana */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.calendario-cabecera { font-size: 12px; font-weight: 700; color: var(--musgo); text-transform: uppercase; letter-spacing: .06em; padding: 0 6px 2px; }
.calendario-semana .calendario-cabecera { display: none; }
.celda {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  min-height: 128px; padding: 10px; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.calendario-semana .celda { min-height: 320px; }
.celda:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); }
.celda-fuera { background: rgba(255, 255, 255, .45); }
.celda-fuera .celda-numero { color: var(--linea-fuerte); }
.celda-pasada { background: rgba(255, 255, 255, .7); }
.celda-hoy { border-color: var(--brote); box-shadow: 0 0 0 3px var(--brote-claro); }
.celda-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.celda-numero { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 800; font-size: 15px; color: var(--tinta); text-decoration: none; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
.celda-numero:hover { background: var(--brote-palido); color: var(--bosque); }
.celda-semana { font-size: 12px; font-weight: 700; color: var(--musgo); }
.calendario-mes .celda-semana { display: none; }
.celda-hoy .celda-numero { color: var(--bosque); }
.celda-eventos { display: grid; gap: 4px; position: relative; z-index: 1; }
.celda-mas { font-size: 12.5px; font-weight: 700; color: var(--bosque-medio); text-decoration: none; padding: 2px 6px; }
.celda-mas:hover { text-decoration: underline; }

/* El «+» que aparece al pasar por un día */
.celda-anadir {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--bosque); color: #fff; box-shadow: 0 8px 18px rgba(30, 79, 51, .28);
  opacity: 0; transform: scale(.7) translateY(6px);
  transition: opacity var(--transicion), transform var(--transicion), background var(--transicion);
}
.celda-anadir .ico { width: 24px; height: 24px; }
.celda-vacia .celda-anadir { right: 50%; bottom: 50%; width: 56px; height: 56px; border-radius: 18px; margin: 0 -28px -40px 0; }
.celda-vacia .celda-anadir .ico { width: 30px; height: 30px; }
.celda:hover .celda-anadir, .celda:focus-within .celda-anadir, .celda-anadir:focus-visible { opacity: 1; transform: none; }
.celda-anadir:hover { background: var(--bosque-medio); color: #fff; transform: scale(1.06); }
@media (hover: none) {
  .celda-anadir, .celda-vacia .celda-anadir { opacity: .9; transform: none; width: 34px; height: 34px; border-radius: 11px; right: 8px; bottom: 8px; margin: 0; }
  .celda-anadir .ico, .celda-vacia .celda-anadir .ico { width: 20px; height: 20px; }
}

/* Una reunión dentro de la agenda */
.evento {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 8px; text-decoration: none; color: var(--tinta);
  background: var(--brote-palido); border-left: 3px solid var(--brote); min-width: 0;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
a.evento:hover { transform: translateY(-1px); box-shadow: var(--sombra); color: var(--tinta); }
.evento-hora { font-size: 12px; font-weight: 800; color: var(--bosque); font-variant-numeric: tabular-nums; }
.evento-texto { display: grid; min-width: 0; line-height: 1.3; }
.evento-texto strong { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evento-texto span { font-size: 12px; color: var(--musgo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evento-estado { font-size: 11px; font-weight: 700; color: var(--rojo); }
.evento-motivo-arranque { background: var(--azul-fondo); border-left-color: var(--azul); }
.evento-motivo-arranque .evento-hora { color: var(--azul); }
.evento-motivo-intermedia { background: var(--ambar-fondo); border-left-color: #E0A526; }
.evento-motivo-intermedia .evento-hora { color: var(--ambar); }
.evento-motivo-cierre { background: var(--violeta-fondo); border-left-color: var(--violeta); }
.evento-motivo-cierre .evento-hora { color: var(--violeta); }
.evento-cancelada { background: var(--gris-fondo); border-left-color: var(--linea-fuerte); }
.evento-cancelada .evento-hora, .evento-cancelada strong { text-decoration: line-through; color: var(--musgo); }
.evento-celebrada { opacity: .65; }
.evento-ahora { box-shadow: 0 0 0 2px var(--brote); }
.evento-externo { background: repeating-linear-gradient(135deg, var(--gris-fondo) 0 6px, #F7F9F8 6px 12px); border-left-color: var(--musgo); }
.evento-externo .evento-hora { color: var(--musgo); }
.calendario-semana .evento { grid-template-columns: 1fr; gap: 0; padding: 7px 9px; }
.calendario-semana .evento-texto strong { white-space: normal; }

/* Vista de día: franjas de una hora */
.agenda-dia { padding: 6px 0; }
.franja { display: grid; grid-template-columns: 72px 1fr; min-height: 58px; border-top: 1px solid var(--linea); }
.franja:first-child { border-top: 0; }
.franja-hora { padding: 10px 0 0 20px; font-size: 13px; font-weight: 700; color: var(--musgo); font-variant-numeric: tabular-nums; }
.franja-cuerpo { display: grid; gap: 6px; align-content: start; padding: 8px 16px 8px 0; }
.franja-cuerpo .evento { padding: 9px 12px; }
.franja-cuerpo .evento-texto strong { font-size: 14px; }
.franja-anadir {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1.5px dashed transparent; color: var(--musgo); font-size: 13.5px; font-weight: 700; text-decoration: none;
  opacity: 0; transition: opacity var(--transicion), border-color var(--transicion), background var(--transicion);
}
.franja-anadir .ico { width: 20px; height: 20px; }
.franja:hover .franja-anadir, .franja-anadir:focus-visible { opacity: 1; border-color: var(--linea-fuerte); }
.franja-anadir:hover { background: var(--brote-palido); border-color: var(--brote); color: var(--bosque); }
@media (hover: none) { .franja-vacia .franja-anadir { opacity: 1; border-color: var(--linea); } }

/* Ventana de confirmación */
.modal {
  width: min(440px, calc(100vw - 32px)); padding: 26px 26px 22px; border: 0; border-radius: var(--radio-l);
  background: var(--blanco); color: var(--texto); box-shadow: 0 24px 60px rgba(20, 39, 28, .28);
}
.modal::backdrop { background: rgba(20, 39, 28, .42); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-entra 180ms cubic-bezier(.2, .8, .3, 1); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-titulo { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--tinta); }
.modal-texto { margin: 0 0 22px; color: var(--musgo); }
.modal-acciones { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* Filtros con semáforo */
.pastillas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pastilla {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--blanco); border: 1px solid var(--linea); color: var(--texto); font-weight: 700; font-size: 14px; text-decoration: none;
  transition: background var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.pastilla:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); color: var(--tinta); }
.pastilla.activa { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.pastilla-cuenta { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--ambar-fondo); color: var(--ambar); font-size: 12px; text-align: center; }
.semaforo { width: 9px; height: 9px; border-radius: 50%; background: var(--linea-fuerte); flex: none; }
.pastilla-todas .semaforo { background: conic-gradient(var(--brote) 0 33%, #E0A526 0 66%, var(--linea-fuerte) 0); }
.pastilla-ambar .semaforo { background: #E0A526; box-shadow: 0 0 0 3px var(--ambar-fondo); }
.pastilla-verde .semaforo { background: var(--brote); box-shadow: 0 0 0 3px var(--brote-claro); }
.pastilla-gris .semaforo { background: #9AA8A0; box-shadow: 0 0 0 3px var(--gris-fondo); }
.pastilla.activa .semaforo { box-shadow: none; }

.estado-fase { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.fase-celda { display: block; }
.estado-fase-pendiente { background: var(--gris-fondo); color: var(--musgo); }
.estado-fase-pendiente .semaforo { background: #9AA8A0; }
.estado-fase-en_curso { background: var(--azul-fondo); color: var(--azul); }
.estado-fase-en_curso .semaforo { background: var(--azul); animation: latido 1.6s ease-in-out infinite; }
.estado-fase-completada { background: var(--brote-claro); color: var(--bosque); }
.estado-fase-completada .semaforo { background: var(--brote); }
.estado-fase-bloqueada { background: var(--rojo-fondo); color: var(--rojo); }
.estado-fase-bloqueada .semaforo { background: var(--rojo); }
@keyframes latido { 50% { box-shadow: 0 0 0 4px rgba(31, 95, 173, .18); } }

/* El desplegable del estado de cada fase, con su color */
.control-estado { font-weight: 700; border-width: 1.5px; }
.control-estado-pendiente { background-color: var(--gris-fondo); color: var(--musgo); }
.control-estado-en_curso { background-color: var(--azul-fondo); color: var(--azul); border-color: #B9D0EE; }
.control-estado-completada { background-color: var(--brote-claro); color: var(--bosque); border-color: #A9DDBF; }
.control-estado-bloqueada { background-color: var(--rojo-fondo); color: var(--rojo); border-color: var(--rojo-linea); }
.fases-gestion li.fase-en_curso .camino-punto { background: var(--azul); color: #fff; border-color: var(--azul); }
.fases-gestion li.fase-bloqueada .camino-punto { background: var(--rojo); color: #fff; border-color: var(--rojo); }

/* Filas clicables */
.fila-clicable { cursor: pointer; transition: background var(--transicion); }
.fila-clicable:hover td { background: var(--brote-palido); }
.fila-clicable:hover .celda-principal a { color: var(--bosque); }

/* Cierre de la auditoría, a la vista */
.desplegable-cierre { margin-top: 18px; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio); background: linear-gradient(135deg, var(--brote-palido), var(--blanco) 60%); overflow: hidden; }
.desplegable-cierre summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; list-style: none; color: var(--tinta); }
.desplegable-cierre summary::-webkit-details-marker { display: none; }
.desplegable-cierre summary:hover { background: rgba(91, 191, 133, .08); }
.desplegable-cierre[open] summary { margin-bottom: 0; border-bottom: 1px solid var(--linea); }
.desplegable-cierre > form { padding: 16px; }
.cierre-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bosque); color: var(--brote); flex: none; }
.cierre-icono .ico { width: 20px; height: 20px; }
.cierre-resumen { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.cierre-resumen strong { font-size: 15px; }
.cierre-resumen span { font-size: 13px; font-weight: 500; color: var(--musgo); }

/* Marca de la empresa colaboradora */
.servicio-marca {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-bottom: 18px; padding: 16px 20px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra);
}
.servicio-logos { display: flex; align-items: center; gap: 12px; }
.servicio-logo-empresa { display: grid; place-items: center; min-height: 48px; }
.servicio-logo-empresa img { max-height: 48px; max-width: 180px; width: auto; }
.servicio-logo-empresa strong { font-size: 17px; font-weight: 800; color: var(--tinta); }
.servicio-union { color: var(--linea-fuerte); }
.servicio-union .ico { width: 16px; height: 16px; }
.servicio-texto { display: grid; flex: 1; min-width: 240px; line-height: 1.45; }
.servicio-texto strong { color: var(--tinta); font-size: 15px; }
.servicio-texto span { color: var(--musgo); font-size: 13.5px; }
.marca-gestion { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 20px; align-items: start; }
.marca-muestra { display: grid; place-items: center; min-height: 120px; padding: 18px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); background: repeating-conic-gradient(#F7F9F8 0 25%, var(--blanco) 0 50%) 0 0 / 16px 16px; }
.marca-muestra img { max-height: 80px; width: auto; }
.marca-sin-logo { font-weight: 800; font-size: 18px; color: var(--musgo); }
.tarjeta-destacada { border-color: var(--brote); box-shadow: 0 0 0 3px var(--brote-claro); }

@media (max-width: 860px) {
  .calendario-semana { grid-template-columns: 1fr; }
  .calendario-semana .celda { min-height: 0; }
  .calendario-semana .celda-vacia { min-height: 72px; }
  .marca-gestion { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .calendario-mes { gap: 4px; }
  .calendario-mes .celda { min-height: 76px; padding: 6px; }
  .calendario-mes .evento { grid-template-columns: 1fr; padding: 3px 5px; }
  .calendario-mes .evento-texto { display: none; }
  .calendario-cabecera { padding: 0 2px; font-size: 11px; }
  .agenda-titulo { width: 100%; margin: 4px 0 0; }
  .franja { grid-template-columns: 58px 1fr; }
  .franja-hora { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .estado-fase-en_curso .semaforo { animation: none; }
  .modal[open] { animation: none; }
}
.modal .boton-peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.modal .boton-peligro:hover { background: #95201A; color: #fff; }
.celda-pasada .celda-numero { color: var(--musgo); }
.franja:not(.franja-vacia) .franja-anadir { display: none; }
@media (max-width: 640px) {
  .calendario-mes .celda-cabeza .chip { display: none; }
  .calendario-mes .celda-numero { font-size: 14px; }
}

/* ==================================================================
   Puerta del equipo (/agenda: admin, consultores y empresas): azul,
   para no confundirla con la de las farmacias (/consultoria), que lleva
   el verde de la marca, como los correos. Mismo diseño, otra paleta.
   ================================================================== */
.puerta-equipo {
  --bosque: #1C3D6E;
  --bosque-hondo: #132B4F;
  --bosque-medio: #285A9E;
  --brote: #5FA3EC;
  --brote-claro: #DCEBFC;
  --brote-palido: #EEF5FE;
  --niebla: #F2F5F9;
  --tinta: #13233A;
  --texto: #2A3647;
  --musgo: #5B6B80;
  --linea: #E1E7EF;
  --linea-fuerte: #C9D3E0;
  --gris-fondo: #EDF1F6;
}
.puerta-equipo .nav-accion:hover, .puerta-equipo .boton-brote:hover { background: #79B4F1; }
.puerta-equipo .nav-pronto .ico { color: rgba(95, 163, 236, .45); }
.puerta-equipo .acceso-panel::after { border-color: rgba(95, 163, 236, .14); }
.puerta-equipo .celda-anadir { box-shadow: 0 8px 18px rgba(28, 61, 110, .28); }
.puerta-equipo .control-estado-completada { border-color: #A9C9EE; }
.puerta-equipo .desplegable-cierre summary:hover { background: rgba(95, 163, 236, .08); }
/* En la agenda azul del equipo, «seguimiento» sigue en verde: que no se confunda con «arranque». */
.puerta-equipo .evento { background: #EEF7F1; border-left-color: #5BBF85; }
.puerta-equipo .evento .evento-hora { color: #1E4F33; }
.puerta-equipo .evento-motivo-arranque { background: var(--azul-fondo); border-left-color: var(--azul); }
.puerta-equipo .evento-motivo-arranque .evento-hora { color: var(--azul); }
.puerta-equipo .evento-motivo-intermedia { background: var(--ambar-fondo); border-left-color: #E0A526; }
.puerta-equipo .evento-motivo-intermedia .evento-hora { color: var(--ambar); }
.puerta-equipo .evento-motivo-cierre { background: var(--violeta-fondo); border-left-color: var(--violeta); }
.puerta-equipo .evento-motivo-cierre .evento-hora { color: var(--violeta); }
.puerta-equipo .evento-cancelada { background: var(--gris-fondo); border-left-color: var(--linea-fuerte); }
.puerta-equipo .evento-cancelada .evento-hora { color: var(--musgo); }
.puerta-equipo .evento-externo { background: repeating-linear-gradient(135deg, var(--gris-fondo) 0 6px, #F7F9FB 6px 12px); border-left-color: var(--musgo); }
.puerta-equipo .evento-externo .evento-hora { color: var(--musgo); }
/* Y los estados de las fases mantienen su semáforo (verde = completada). */
.puerta-equipo .estado-fase-completada { background: #DDF2E5; color: #1E4F33; }
.puerta-equipo .estado-fase-completada .semaforo, .puerta-equipo .pastilla-verde .semaforo { background: #5BBF85; }
.puerta-equipo .pastilla-verde .semaforo { box-shadow: 0 0 0 3px #DDF2E5; }
.puerta-equipo .control-estado-completada { background-color: #DDF2E5; color: #1E4F33; border-color: #A9DDBF; }
.puerta-equipo .chip-verde { background: #DDF2E5; color: #1E4F33; }
.puerta-equipo .celda-cabeza .chip-verde { background: var(--brote-claro); color: var(--bosque); }

/* ==================================================================
   Lote 7: avisos en Ajustes (interruptores por aviso y canal)
   ================================================================== */
.tabla-avisos th[scope="row"] { font-weight: 500; text-align: left; }
.tabla-avisos th[scope="row"] strong { display: block; font-weight: 700; color: var(--tinta); }
.tabla-avisos .secundario { display: block; font-size: 13px; color: var(--musgo); font-weight: 500; }
.celda-canal { width: 110px; text-align: center; }
.tabla-avisos .fila-fija th, .tabla-avisos .fila-fija td { background: var(--niebla); }
.interruptor { position: relative; display: inline-flex; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-pista { width: 44px; height: 26px; border-radius: 999px; background: var(--linea-fuerte); position: relative; transition: background var(--transicion); }
.interruptor-pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--transicion); }
.interruptor input:checked + .interruptor-pista { background: var(--bosque-medio); }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(18px); }
.interruptor input:focus-visible + .interruptor-pista { outline: 3px solid var(--brote); outline-offset: 2px; }
.bloque-avisos { padding-top: 18px; border-top: 1px solid var(--linea); }
.bloque-avisos h3 { margin: 0 0 4px; font-size: 16px; color: var(--tinta); }
.casilla-fase input { width: 20px; height: 20px; accent-color: var(--bosque-medio); cursor: pointer; }
.aviso-fase-num { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--brote-claro); color: var(--bosque); font-size: 12px; font-weight: 800; }
.fila-agenda { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 28px; margin-top: 12px; }
.fila-agenda .campo { min-width: 160px; }
@media (max-width: 640px) {
  .celda-canal { width: 64px; }
  .tabla-avisos th, .tabla-avisos td { padding-left: 6px; padding-right: 6px; }
}
#avisos .formulario > *, #avisos .bloque-avisos > * { min-width: 0; }
#avisos .tabla-marco { overflow-x: auto; }
.tabla-avisos { width: 100%; }
@media (max-width: 640px) {
  .tabla-avisos .celda-canal { width: 52px; }
  .tabla-fases th[scope="col"].celda-canal { font-size: 11.5px; white-space: normal; line-height: 1.2; }
  .aviso-fase-num { display: none; }
}
.tabla-avisos th, .tabla-avisos td { white-space: normal; }
/* Más aire en los bloques de Ajustes → Avisos */
.bloque-avisos { display: grid; gap: 20px; padding-top: 28px; margin-top: 8px; }
.bloque-avisos h3 { margin: 0; }
.bloque-avisos h3 + .campo-ayuda { margin-top: -14px; }
.bloque-avisos .opcion { margin: 0; }
.fila-agenda { margin-top: 0; gap: 16px 32px; align-items: flex-start; }
.fila-agenda .campo { display: grid; gap: 8px; }
#avisos .formulario { gap: 24px; }

/* Más aire en los bloques de Ajustes → Avisos */
.bloque-avisos { display: grid; gap: 20px; padding-top: 28px; margin-top: 8px; }
.bloque-avisos h3 { margin: 0; }
.bloque-avisos h3 + .campo-ayuda { margin-top: -14px; }
.bloque-avisos .opcion { margin: 0; }
.fila-agenda { margin-top: 0; gap: 16px 32px; align-items: flex-start; }
.fila-agenda .campo { display: grid; gap: 8px; }
#avisos .formulario { gap: 24px; }
.tabla-fases .celda-canal { width: 150px; }
@media (max-width: 640px) { .tabla-fases .celda-canal { width: 72px; } }
/* «Requiere atención» (lote 7): ámbar y naranja, se ve de lejos */
.chip-atencion { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(90deg, #FFE7A8, #FFD3A1); color: #8A4300; border: 1px solid #F5B66B; font-weight: 700; white-space: nowrap; }
.chip-atencion .semaforo { width: 8px; height: 8px; background: #F08A00; box-shadow: 0 0 0 3px rgba(240, 138, 0, .2); animation: latido-atencion 1.8s ease-in-out infinite; }
@keyframes latido-atencion { 50% { box-shadow: 0 0 0 5px rgba(240, 138, 0, .08); } }
.fila-fin .chip-atencion, .enlace-lateral .chip-atencion { margin-right: 8px; }
td .chip-atencion { margin-top: 6px; }
.aviso-atencion { background: #FFF4DC; border: 1px solid #F5C77E; color: #7A4300; }
@media (prefers-reduced-motion: reduce) { .chip-atencion .semaforo { animation: none; } }