/* Estilos de la plataforma. Colores y tipografías de MadriCristal (CLAUDE.md).
   Sistema visual según docs/maqueta/ficha-usuario-propuesta.html (14/10/2026):
   menú lateral azul oscuro, superficies blancas finas sobre fondo azul pálido,
   un solo color de acento y rojo solo para lo destructivo. Sin framework.
   Regla: ningún color literal fuera de :root (hay prueba automática). */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fuentes/oswald-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fuentes/lato-700.woff2') format('woff2');
}

:root {
  --fondo: #f3f7fa;
  --superficie: #ffffff;
  --superficie-2: #f7fafc;
  --borde: #e0e8ef;
  --borde-fuerte: #c9d6e0;
  --texto: #202020;
  --texto-2: #5d6b76;
  --texto-3: #8f8f8f;
  /* Flecha de los desplegables (chevron de 12 px): normal, con foco o ratón encima, y desactivada. */
  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235d6b76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  --flecha-select-activa: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231a6e9b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  --flecha-select-apagada: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238f8f8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  --principal: #2592cc;
  --principal-hover: #1f82b8;
  --principal-suave: #e5f2fa;
  --principal-texto: #1a6e9b;
  --espacio-seccion: 20px;
  --fondo-modal: rgba(0, 20, 34, 0.68);
  --sombra-modal: 0 20px 60px rgba(0, 0, 0, 0.25);
  /* Columna fija de una tabla que se desplaza en horizontal (Excel en /c/): sombra suave a la derecha. */
  --sombra-columna-fija: 6px 0 6px -4px rgba(0, 30, 50, 0.18);
  --borde-columna-fija: #c9d3dc;
  --fila-alterna: #f3f6f9;
  /* Colores de obra (siete tonos): borde y cabecera del tablero. El texto va siempre en --texto sobre el tono suave. */
  --obra-1: #2592cc; --obra-1-suave: #e5f2fa;
  --obra-2: #2e8b57; --obra-2-suave: #e3f3ea;
  --obra-3: #a8452f; --obra-3-suave: #f7e4df;
  --proveedor: #b45309;
  --carpeta: #3f566b;
  --carpeta-suave: #e9eff4;
  --obra-4: #7b5cc4; --obra-4-suave: #eee9fa;
  --obra-5: #c2417f; --obra-5-suave: #fae6f0;
  --obra-6: #1a9aa0; --obra-6-suave: #dff3f4;
  --obra-7: #8a7a1b; --obra-7-suave: #f4f0d3;
  /* Personas: familia azul (libre claro, asignado algo más fuerte, no disponible en ámbar apagado).
     Vehículos: gris cálido neutro. Ni verde ni naranja: el naranja es solo de proveedor. */
  --persona-libre-fondo: #edf6fc; --persona-libre-borde: #c5dfef; --persona-libre-texto: #004c7a;
  --persona-asignada-fondo: #cde5f4; --persona-asignada-borde: #8dbfdd; --persona-asignada-texto: #00395c;
  --estado-baja: #6b5217; --estado-baja-fondo: #f6efd5; --estado-baja-borde: #e0d3a0;
  --vehiculo-fondo: #ece9e4;
  --vehiculo-texto: #3b362f;
  --vehiculo-borde: #cdc7bd;
  /* Tonos de los módulos (Inicio y Ajustes): icono fuerte sobre cuadrito suave, contraste ≥ 4,5:1. */
  --tono-violeta: #5b3fa8; --tono-violeta-suave: #ece8f8;
  --tono-turquesa: #0b727a; --tono-turquesa-suave: #def3f4;
  --tono-teja: #9a4630; --tono-teja-suave: #f6e6df;
  --tono-azul: #1a6e9b; --tono-azul-suave: #e5f2fa;
  --tono-calido: #5a5247; --tono-calido-suave: #ece9e4;
  --tono-naranja: #b45309; --tono-naranja-suave: #fff5ea;
  --tono-ambar: #8a5200; --tono-ambar-suave: #fff3df;
  --tono-rojo: #b3261e; --tono-rojo-suave: #fdf0ef;
  --tono-verde: #1e7b3a; --tono-verde-suave: #e6f4ea;
  --tono-pizarra: #3f566b; --tono-pizarra-suave: #e9eff4;
  --oscuro: #004c7a;
  --sobre-principal: #ffffff;
  --lateral: #004c7a;
  --lateral-texto: #e8f3fa;
  --lateral-texto-2: #9fc7df;
  --lateral-hover: rgba(255, 255, 255, 0.08);
  --lateral-activo: rgba(255, 255, 255, 0.13);
  --lateral-linea: rgba(255, 255, 255, 0.14);
  --lateral-indicador: #7cc9f2;
  --sombra-activo: rgba(0, 20, 34, 0.35);
  --peligro: #b3261e;
  --peligro-fondo: #fdf0ef;
  --peligro-borde: #f0c2be;
  --foco-peligro: rgba(179, 38, 30, 0.25);
  --ok: #1e7b3a;
  --ok-fondo: #e6f4ea;
  --aviso: #8a5200;
  --aviso-fondo: #fff3df;
  --ambar: #f5b800;
  --ambar-hover: #e0a700;
  --sobre-ambar: #202020;
  --ambar-borde: #e0a700;
  --ambar-suave: #fff4c2;
  --fila-gris: #e4e7ea;
  --sombra-banda: 0 6px 12px -2px rgba(0, 0, 0, 0.22);
  --sombra-tarjeta: 0 2px 4px rgba(0, 60, 100, 0.08), 0 8px 20px rgba(0, 60, 100, 0.08);
  --sombra: 0 1px 2px rgba(0, 60, 100, 0.05), 0 4px 16px rgba(0, 60, 100, 0.05);
  --sombra-interruptor: 0 1px 3px rgba(0, 0, 0, 0.3);
  --foco: rgba(37, 146, 204, 0.45);
  --titulos: 'Oswald', 'Arial Narrow', sans-serif;
  --cuerpo: 'Lato', system-ui, sans-serif;
  --r-pequeno: 8px;
  --r-medio: 12px;
  --r-grande: 18px;
  --ancho-lateral: 236px;
}

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--cuerpo);
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.5;
}

button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

h1, h2, h3, h4 {
  font-family: var(--titulos);
  font-weight: 500;
  /* Segundo acento de la paleta: el azul oscuro de las cabeceras del menú, para los títulos. */
  color: var(--oscuro);
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.2;
}
h1 { font-size: 1.85rem; }
h2 { font-size: 1.2rem; }

a { color: var(--principal); }
p { margin: 0; }
p + p { margin-top: 10px; }

.ayuda, .secundario { color: var(--texto-2); font-size: 0.95rem; max-width: 62ch; }
.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.icono {
  width: 20px; height: 20px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Disposición ---------- */

.contenido {
  /* Casi todo el ancho disponible (menos el menú lateral): un listado no tiene por qué ir encajonado. */
  max-width: 1680px;
  margin: 0 auto;
  padding: 18px 16px calc(84px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

body.sin-sesion .contenido {
  padding: 20px 16px 40px;
  justify-content: center;
  min-height: 100vh;
}

/* Cabecera móvil: logo sobre blanco con línea azul */
.cab-movil {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--superficie);
  border-bottom: 3px solid var(--principal);
}
.cab-movil img { height: 44px; width: auto; }

/* Barra lateral (ordenador): oculta en móvil */
.lateral { display: none; }

/* Barra inferior (móvil) */
.inferior {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-around;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
}
.inferior a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: var(--r-medio);
  text-decoration: none;
  color: var(--texto-2);
  font-family: var(--titulos);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s;
}
.inferior a[aria-current="page"] { color: var(--oscuro); background: var(--principal-suave); }

@media (min-width: 800px) {
  body.con-sesion { padding-left: var(--ancho-lateral); }
  .inferior, .cab-movil { display: none; }
  .contenido { padding: 28px 28px 44px; }

  .lateral {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--ancho-lateral);
    display: flex;
    flex-direction: column;
    background: var(--lateral);
    color: var(--lateral-texto);
  }
  .lateral .logo {
    display: block;
    background: var(--superficie);
    padding: 14px 12px 12px;
    border-bottom: 3px solid var(--principal);
  }
  .lateral .logo img { display: block; width: 100%; max-width: 212px; height: auto; margin: 0 auto; }
  .lateral ul {
    list-style: none;
    margin: 14px 0;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }
  .lateral li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--lateral-texto);
    text-decoration: none;
    font-family: var(--titulos);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.04em;
    transition: background 0.15s;
  }
  .lateral li a:hover { background: var(--lateral-hover); }
  .lateral li a:active { transform: translateY(1px); }
  /* Elemento activo: relleno claro, texto oscuro y letra en negrita (no solo color). */
  .lateral li a { color: var(--lateral-texto-2); }
  .lateral li a:hover { color: var(--sobre-principal); }
  .lateral li a[aria-current="page"] { background: var(--superficie); color: var(--oscuro); font-weight: 700; box-shadow: 0 1px 4px var(--sombra-activo); }
  .lateral li a[aria-current="page"]:hover { color: var(--oscuro); background: var(--superficie); }
  .lateral li a[aria-current="page"] .icono { opacity: 1; }
  /* Una línea fina separa "Inicio" del grupo de módulos; Ajustes va abajo, sobre el usuario. */
  .lateral li.tras-inicio { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--lateral-linea); }
  .lateral ul.lateral-pie { flex: none; padding-top: 8px; border-top: 1px solid var(--lateral-linea); }
  .lateral li a[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: -12px; top: 4px; bottom: 4px;
    width: 8px;
    border-radius: 0 6px 6px 0;
    background: var(--lateral-indicador);
  }
  /* Icono bajado medio píxel para centrarlo ópticamente con las mayúsculas de
     Oswald, cuyo centro visual queda por debajo del centro de la caja de línea.
     El desplazamiento SIEMPRE es hacia abajo (positivo); hay una prueba que
     falla si vuelve a ser negativo. Medidas en docs/16 (14/10/2026). */
  .lateral .icono { opacity: 0.9; transform: translateY(0.5px); }
  .lateral .quien {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--lateral-linea);
  }
  .lateral .quien small { display: block; color: var(--lateral-texto-2); font-size: 0.85rem; }
  .lateral .quien strong { display: block; font-weight: 700; line-height: 1.2; }
  .lateral .quien .texto { min-width: 0; }
  .lateral .quien .texto strong { overflow-wrap: anywhere; }
  .lateral .quien form { margin-left: auto; }
  .lateral .quien button {
    background: transparent; border: 0; color: var(--lateral-texto-2);
    cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center;
    transition: background 0.15s, color 0.15s;
  }
  .lateral .quien button:hover { color: var(--sobre-principal); background: var(--lateral-hover); }
}
@media (min-width: 1500px) {
  .contenido { padding: 28px 40px 44px; }
}

/* ---------- Avatar, migas, cabecera de ficha ---------- */

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--principal);
  color: var(--sobre-principal);
  font-family: var(--titulos);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.avatar.grande {
  width: 60px; height: 60px;
  border-radius: var(--r-grande);
  font-size: 1.35rem;
  background: linear-gradient(140deg, var(--principal), var(--oscuro));
}

.migas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--texto-3);
  font-size: 0.9rem;
}
.migas a { color: var(--texto-2); text-decoration: none; }
.migas a:hover { color: var(--principal); }

.titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.titulo .correo { color: var(--texto-2); margin: 2px 0 0; overflow-wrap: anywhere; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.titulo .acciones-titulo { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  min-height: 26px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--cuerpo);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  background: var(--principal-suave);
  color: var(--oscuro);
}
.etiqueta.ok { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.etiqueta.gris { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }
.etiqueta.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta.peligro { background: var(--peligro-fondo); color: var(--peligro); border: 1px solid var(--peligro-borde); }

/* ---------- Superficies ---------- */

.superficie {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-medio);
  box-shadow: var(--sombra);
}
.bloque { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cabecera-bloque {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.cabecera-bloque .botones { display: flex; gap: 8px; flex-wrap: wrap; }
.bloque .ayuda { margin-top: 4px; }
.lista-estados { margin: 4px 0 0; padding-left: 18px; }
.lista-estados li { margin: 2px 0; }

.entrada {
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 26px 26px;
  border-radius: var(--r-grande);
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}
.entrada .logo-grande { width: 100%; max-width: 320px; height: auto; margin: 0 auto 4px; }
.entrada .formulario { text-align: left; }
.entrada h1 { font-size: 1.6rem; }

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 700;
  font-family: var(--cuerpo);
  /* 1.1rem = 18,7 px en negrita: "texto grande" para WCAG, que admite 3:1.
     El blanco sobre el azul de marca (#2592cc) da 3,46:1. */
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s;
}
.boton:active { transform: scale(0.98); }
/* Jerarquía por función:
   primario = acción principal (azul lleno) · secundario = contorno azul ·
   discreto = solo texto · proveedor = azul oscuro (lleno o `contorno`) ·
   peligro = rojo suave (`pleno` solo al confirmar) · neutro = gris (Cancelar, Ir). */
.boton.primario { background: var(--principal); color: var(--sobre-principal); }
.boton.primario:hover { background: var(--principal-hover); }
.boton.secundario { background: var(--superficie); border-color: var(--principal); color: var(--principal-texto); }
.boton.secundario:hover { background: var(--principal-suave); }
.boton.discreto { background: transparent; color: var(--principal-texto); padding: 0 10px; }
.boton.discreto:hover { background: var(--principal-suave); }
.boton.proveedor { background: var(--oscuro); color: var(--sobre-principal); }
.boton.proveedor:hover { filter: brightness(1.18); }
.boton.proveedor.contorno { background: var(--superficie); border-color: var(--oscuro); color: var(--oscuro); }
.boton.proveedor.contorno:hover { background: var(--principal-suave); filter: none; }
.boton.neutro { background: var(--superficie); border-color: var(--borde-fuerte); color: var(--texto-2); }
.boton.neutro:hover { background: var(--fondo); color: var(--texto); }
.boton.ambar { background: var(--ambar); border-color: var(--ambar-borde); color: var(--sobre-ambar); font-weight: 700; }
.boton.ambar:hover { background: var(--ambar-hover); }
.boton.exito { background: var(--ok); color: var(--sobre-principal); }
.boton.exito:hover { filter: brightness(0.92); }
.boton.peligro { background: var(--peligro-fondo); border-color: var(--peligro-borde); color: var(--peligro); }
.boton.peligro:hover:not(:disabled) { background: var(--peligro); border-color: var(--peligro); color: var(--sobre-principal); }
.boton.peligro.pleno { background: var(--peligro); border-color: var(--peligro); color: var(--sobre-principal); }
.boton.peligro.pleno:hover:not(:disabled) { filter: brightness(0.92); }
.boton.discreto.peligro { background: transparent; border-color: transparent; color: var(--peligro); }
.boton.discreto.peligro:hover:not(:disabled) { background: var(--peligro-fondo); color: var(--peligro); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.boton .icono { width: 18px; height: 18px; }
.boton.ancho { width: 100%; min-height: 50px; font-size: 1.05rem; }
.boton-fila { display: flex; flex-wrap: wrap; gap: 10px; }

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

.formulario { display: flex; flex-direction: column; gap: 16px; }
.sugerencias { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; color: var(--texto-2); }
.sugerencias li { padding: 3px 8px; border-radius: var(--r-pequeno); background: var(--superficie-2); margin-top: 2px; }
.cat-nueva input[type="text"] { height: 36px; flex: 1 1 220px; }
.cat-nueva .boton { min-height: 36px; padding: 0 14px; }
.cat-nombre input { height: 30px; width: 200px; max-width: 100%; padding: 0 8px; font-size: 0.95rem; font-family: var(--cuerpo); border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background: var(--superficie); }
.boton-icono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background: var(--superficie); color: var(--texto); font-family: var(--cuerpo); font-size: 1rem; cursor: pointer; }
.boton-icono:hover { border-color: var(--principal); background: var(--principal-suave); }
.pildora-mas { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 12px; border: 1px dashed var(--borde-fuerte); border-radius: var(--r-pequeno); background: transparent; color: var(--texto-2); font-family: var(--cuerpo); font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.pildora-mas:hover { border-color: var(--principal); color: var(--principal); background: var(--principal-suave); }
.boton-mini { width: 28px; height: 28px; font-size: 0.9rem; }
/* Interruptor con estado: verde si está activo, gris claro si no. */
.estado-interruptor { color: var(--texto); display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.estado-interruptor .interruptor { background: var(--borde-fuerte); }
.estado-interruptor .interruptor:checked { background: var(--ok); }
.estado-interruptor .interruptor:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.estado-interruptor .interruptor:checked ~ .no, .estado-interruptor .interruptor:not(:checked) ~ .si { display: none; }
/* Categorías: una tabla compacta (filas ≤ 38 px), cabecera de columnas una vez, asa para ordenar. */
.cat-fila { display: grid; grid-template-columns: 30px minmax(0, 1fr) 92px 92px 70px 32px; align-items: center; gap: 0 8px; min-height: 36px; padding: 1px 0; border-bottom: 1px solid var(--borde); }
.cat-cabecera { min-height: 28px; font-size: 0.82rem; font-weight: 700; color: var(--texto-2); border-bottom-color: var(--borde-fuerte); }
.cat-cabecera .info { cursor: help; font-weight: 400; }
.cat-lista { list-style: none; margin: 0; padding: 0; }
.cat-fila form { margin: 0; }
.cat-celda, .cat-personas { display: flex; align-items: center; }
.cat-personas { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.cat-nombre-celda { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cat-texto { overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.cat-nombre-celda .cat-nombre { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.cat-nombre-celda .cat-nombre input { height: 30px; width: 100%; flex: 1 1 auto; min-width: 0; padding: 0 8px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); font: inherit; }
.cat-nombre-celda .cat-nombre[hidden], .cat-texto[hidden], .lapiz[hidden] { display: none; }
.cat-editar { display: flex; justify-content: center; }
.cat-cabecera .solo-estrecho { display: none; }
.asa { display: none; width: 26px; height: 28px; padding: 0; border: 0; background: none; color: var(--texto-2); font-weight: 700; letter-spacing: -2px; cursor: grab; }
.con-js .asa { display: inline-flex; align-items: center; justify-content: center; }
.con-js .cat-flechas { display: none; }
.cat-flechas { display: inline-flex; gap: 2px; }
.cat-fila.arrastrando { opacity: 0.5; }
.cat-fila.sobre { box-shadow: inset 0 2px 0 var(--principal); }
.cat-deshabilitadas { margin-top: 10px; }
.cat-deshabilitadas > summary { cursor: pointer; font-weight: 700; color: var(--texto-2); min-height: 32px; display: flex; align-items: center; }
.cat-deshabilitadas .cat-texto { color: var(--texto-2); }
.cat-deshabilitadas > summary::before { content: '▸'; margin-right: 6px; }
.cat-deshabilitadas[open] > summary::before { content: '▾'; }
@media (max-width: 600px) {
  /* En el móvil no se arrastra (el táctil no lo admite): sin asa, todo el ancho para el nombre. */
  .cat-fila { grid-template-columns: minmax(0, 1fr) 46px 46px 34px 26px; gap: 0 4px; }
  .cat-asa, .cat-cabecera > span:first-child { display: none; }
  .cat-cabecera .solo-ancho { display: none; }
  .cat-cabecera .solo-estrecho { display: inline; }
  .cat-nombre-celda .cat-nombre .boton-mini { width: 26px; height: 26px; flex: none; }
  .cat-cabecera { font-size: 0.66rem; line-height: 1.2; }
  .cat-nombre-celda { font-size: 0.92rem; gap: 4px; }
}
.cabecera-lista { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabecera-lista h2 { margin: 0; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
select { min-height: 40px; padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background-color: var(--superficie); color: var(--texto); font: inherit; }
.campo label, .formulario > label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--texto-2); }
.campo label span, .formulario > label span { font-weight: 400; }
.campo input, .formulario input[type="text"], .formulario input[type="email"],
.formulario input[type="password"], .formulario input[type="tel"], .formulario input[type="date"] {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 6px;
  padding: 0 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-pequeno);
  background: var(--superficie);
  font-weight: 400;
  color: var(--texto);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.formulario input:hover:not(:disabled) { border-color: var(--principal); }
.formulario input:focus { outline: none; border-color: var(--principal); box-shadow: 0 0 0 3px var(--foco); }
.formulario input:disabled { background: var(--superficie-2); color: var(--texto-3); }
.campo select, .campo textarea, .formulario select, .formulario textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 0 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-pequeno);
  background: var(--superficie);
  font: inherit;
  font-weight: 400;
  color: var(--texto);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.campo select, .formulario select { height: 46px; }
.campo textarea, .formulario textarea { padding: 10px 14px; min-height: 96px; resize: vertical; line-height: 1.4; }
.formulario select:hover:not(:disabled), .formulario textarea:hover:not(:disabled) { border-color: var(--principal); }
.formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--principal); box-shadow: 0 0 0 3px var(--foco); }
.formulario select:disabled, .formulario textarea:disabled { background: var(--superficie-2); color: var(--texto-3); }
.campo input[type="number"] { display: block; width: 100%; height: 46px; margin-top: 6px; padding: 0 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background: var(--superficie); }
.campo .ayuda-campo { margin-top: 4px; color: var(--texto-2); font-size: 0.85rem; }
.campo.completo { grid-column: 1 / -1; }

/* Opciones seleccionables (categorías): un recuadro con borde como los campos y
   los botones. Seleccionada: azul principal, texto blanco y una marca de verificación. */
.grupo-casillas { border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo-casillas legend { padding: 0; font-size: 0.85rem; font-weight: 700; color: var(--texto-2); }
.grupo-casillas .opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pildora { position: relative; display: inline-flex; }
.pildora input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pildora span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background: var(--superficie);
  font-family: var(--cuerpo); font-size: 1rem; font-weight: 700; color: var(--texto);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.pildora input:hover + span { border-color: var(--principal); background: var(--principal-suave); }
.pildora input:checked + span { background: var(--principal); border-color: var(--principal); color: var(--sobre-principal); }
.pildora input:checked + span::before { content: '✓'; font-weight: 700; }
.pildora input:checked:hover + span { background: var(--principal-hover); border-color: var(--principal-hover); }
.pildora input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.pildora input:disabled + span { background: var(--superficie-2); border-color: var(--borde); color: var(--texto-3); cursor: not-allowed; }
.pildora input:disabled:checked + span { background: var(--texto-3); border-color: var(--texto-3); color: var(--sobre-principal); }
.pildora input:disabled { cursor: not-allowed; }
.dato { font-size: 0.95rem; }
.dato strong { font-weight: 700; }

.mensaje-error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--peligro-fondo);
  color: var(--peligro);
  border: 1px solid var(--peligro-borde);
  font-weight: 700;
  text-align: left;
}
.mensaje-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--aviso-fondo);
  color: var(--aviso);
  border: 1px solid var(--ambar-borde);
  font-weight: 700;
  text-align: left;
}
.mensaje-error[hidden], .mensaje-aviso[hidden], .sugerencias[hidden], .cat-nueva-campos[hidden] { display: none; }
/* Fichas (obra, operario, vehículo): pestañas de ARCHIVADOR. Pegadas sobre una línea base; la activa
   se une al panel (mismo blanco, sin borde inferior); las inactivas, más tenues. */
.pestanas { display: flex; align-items: flex-end; gap: 2px; margin: 12px 0 0; padding: 0 4px; border-bottom: 1px solid var(--borde-fuerte); }
.pestana { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; margin-bottom: -1px; border: 1px solid var(--borde); border-bottom-color: var(--borde-fuerte); border-radius: var(--r-pequeno) var(--r-pequeno) 0 0; background: var(--superficie-2); color: var(--texto-2); font-weight: 700; font-size: 0.93rem; text-decoration: none; white-space: nowrap; }
.pestana:hover { color: var(--texto); background: var(--principal-suave); }
.pestana[aria-selected="true"] { z-index: 1; background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); border-bottom-color: var(--superficie); }
.pestana .cuenta { font-weight: 400; font-size: 0.82rem; color: var(--texto-2); }
.pestana:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.panel-pestana { background: var(--superficie); border: 1px solid var(--borde-fuerte); border-top: 0; border-radius: 0 0 var(--r-medio) var(--r-medio); padding: 12px; margin-bottom: 16px; }
.panel-pestana[hidden] { display: none; }
/* Unido a su pestaña: anula el hueco (gap) de .contenido entre la fila de pestañas y el panel. */
.contenido > .panel-pestana { margin-top: -24px; }
/* Dentro del panel, las secciones no llevan su propia caja ni su cabecera plegable. */
.panel-pestana > .ficha { margin: 0; border: 0; background: transparent; box-shadow: none; }
.panel-pestana > .ficha > summary { display: none; }
.panel-pestana > .ficha > .superficie.panel, .panel-pestana > section.superficie { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }

/* Planificación de la obra: un elemento blanco por día, sin color de obra; pasados tenues. */
.dias-obra { display: flex; flex-direction: column; gap: 8px; }
.dia-obra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-pequeno); padding: 6px 12px 8px; }
.dia-obra.hoy { border-color: var(--principal); box-shadow: 0 0 0 1px var(--principal); }
.dia-obra.pasado { opacity: 0.55; }
.dia-obra-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 36px; }
.dia-obra-cabecera .boton { margin-left: auto; }
.dia-obra-cabecera .boton.editar-dia { gap: 0.3em; }
.dia-obra-lineas { list-style: none; margin: 2px 0 0; padding: 0; font-size: 0.93rem; line-height: 1.45; }
.dia-obra-lineas .acceso-carpeta { margin-left: 4px; }
.dias-anteriores { margin-top: 10px; }
/* Móvil: las pestañas en UNA línea que se desliza; el botón de cada día, corto y en la misma línea. */
@media (max-width: 600px) {
  .pestanas { overflow-x: auto; scrollbar-width: none; }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestana { flex: none; min-height: 34px; padding: 0 10px; font-size: 0.88rem; }
  .panel-pestana { padding: 10px 8px; }
  .dia-obra-cabecera .solo-ancho { display: none; }
  .dia-obra-cabecera .boton.editar-dia { min-height: 30px; padding: 0 10px; }
}
.dias-anteriores > summary { cursor: pointer; font-weight: 700; color: var(--principal-texto); min-height: 36px; display: flex; align-items: center; }
.dias-anteriores > .dias-obra { margin-top: 6px; }

/* Planificación de hoy pasado el horario de envío: banda fina. */
.banda-no-laborable { margin: 0 0 10px; padding: 6px 12px; border-radius: var(--r-pequeno); background: var(--superficie-2); border: 1px solid var(--borde-fuerte); color: var(--texto); font-size: 0.9rem; font-weight: 700; }
.banda-fuera-horario { margin: 0 0 10px; padding: 6px 12px; border-radius: var(--r-pequeno); background: var(--aviso-fondo); color: var(--aviso); font-size: 0.9rem; font-weight: 700; }

/* Página pública de la carpeta del día (/c/): móvil primero, botones grandes. */
.carpeta-publica .publica { width: calc(100% - 24px); max-width: 560px; margin: 16px auto; padding: 20px 16px; box-sizing: border-box; }
/* Excel en /c/: tabla con la primera fila y la primera columna fijas; se desplaza dentro de su caja. */
.carpeta-publica .publica-ancha { max-width: 1100px; }
.volver-publico { margin: 0 0 8px; font-size: 0.9rem; }
.titulo-excel { display: flex; align-items: center; gap: 6px; font-size: 1.2rem; overflow-wrap: anywhere; }
.hojas-excel { display: flex; gap: 4px; overflow-x: auto; margin: 10px 0 0; border-bottom: 1px solid var(--borde-fuerte); }
.hojas-excel a { flex: none; padding: 6px 12px; border: 1px solid var(--borde); border-bottom: 0; border-radius: var(--r-pequeno) var(--r-pequeno) 0 0; background: var(--superficie-2); color: var(--texto-2); text-decoration: none; font-size: 0.9rem; }
.hojas-excel a[aria-current="page"] { background: var(--superficie); color: var(--texto); font-weight: 700; border-color: var(--borde-fuerte); }
.tabla-excel-caja { overflow: auto; max-height: 72vh; margin-top: 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); -webkit-overflow-scrolling: touch; }
.hojas-excel + .tabla-excel-caja { margin-top: 0; border-top-left-radius: 0; }
.titulo-hoja-excel { margin: 10px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.tabla-excel { width: max-content; border-collapse: separate; border-spacing: 0; font-size: 0.85rem; }
.tabla-excel th, .tabla-excel td { padding: 4px 8px; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: var(--superficie); text-align: left; vertical-align: top; max-width: 16em; overflow-wrap: normal; word-break: normal; }
/* Una cabecera combinada que ocupa varias columnas no se queda en 16em. */
.tabla-excel [colspan] { max-width: none; }
.tabla-excel .num { text-align: right; white-space: nowrap; }
.tabla-excel tr:first-child > * { position: sticky; top: 0; z-index: 2; background: var(--superficie-2); font-weight: 700; }
.tabla-excel tr > :first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--borde-columna-fija); box-shadow: var(--sombra-columna-fija); }
.tabla-excel tr:first-child > :first-child { z-index: 3; }
.logo-publico { display: block; margin: 0 auto 16px; height: auto; max-width: 170px; }
.archivos-publicos { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.archivo-publico { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-medio); background: var(--superficie); color: var(--texto); text-decoration: none; font-weight: 700; }
.archivo-publico:active, .archivo-publico:hover { border-color: var(--principal); background: var(--principal-suave); }
.archivo-publico .emoji { font-size: 1.5rem; }
/* Un espacio fino entre cualquier emoji y su texto (en vez de espacios en el texto). */
.emoji { margin-inline-end: 0.3em; }
.archivo-publico .emoji { margin-inline-end: 0; }
.archivo-nombre { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.archivo-tamano { color: var(--texto-2); font-weight: 400; font-size: 0.9rem; white-space: nowrap; }
.acceso-carpeta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-left: 8px; font-size: 0.85rem; }
.acceso-carpeta form { margin: 0; display: inline; }
/* «Cortar acceso» / «Dar enlace nuevo»: enlace pequeño en la misma línea, sin caja de botón. */
.enlace-accion { min-height: 0; padding: 0; border: 0; background: none; color: var(--principal-texto); font: inherit; font-size: 0.85rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.acceso-corto { display: none; }
@media (max-width: 600px) {
  .acceso-carpeta { gap: 2px 8px; margin-left: 0; }
  .acceso-carpeta > .secundario:not(.acceso-corto) { display: none; }
  .acceso-corto { display: inline; }
}
.lista-accesos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-accesos li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.nota-admin, .nota {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-size: 0.92rem;
}
.nota-admin[hidden], .nota[hidden] { display: none; }

/* Aviso tras guardar, abajo y centrado. Sin JavaScript queda visible. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 0);
  background: var(--oscuro);
  color: var(--sobre-principal);
  padding: 12px 18px;
  border-radius: var(--r-medio);
  font-weight: 700;
  box-shadow: var(--sombra);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 30;
  max-width: calc(100% - 32px);
}
.toast.oculto-toast { opacity: 0; transform: translate(-50%, 24px); pointer-events: none; }
body.con-sesion .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 800px) { body.con-sesion .toast { bottom: 24px; left: calc(50% + var(--ancho-lateral) / 2); } }

/* ---------- Permisos: interruptores ---------- */

.permisos {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-medio);
  overflow: hidden;
}
.permisos .cab, .permisos li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 92px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.permisos .cab {
  background: var(--superficie-2);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--texto-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--borde);
}
.permisos .cab span:not(:first-child) { text-align: center; }
.permisos li + li { border-top: 1px solid var(--borde); }
.permisos li { transition: background 0.15s; }
.permisos li:hover { background: var(--superficie-2); }
.modulo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.modulo .ico-caja {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--principal-suave); color: var(--oscuro);
}
.modulo strong { display: block; line-height: 1.2; }
.modulo small { display: block; color: var(--texto-2); }
.modulo small.aviso { color: var(--aviso); }
.celda { display: flex; justify-content: center; align-items: center; }
.celda .sin { color: var(--texto-3); }

.interruptor {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px; height: 26px;
  margin: 0;
  border-radius: 999px;
  border: 0;
  background: var(--borde-fuerte);
  cursor: pointer;
  transition: background 0.18s;
  flex: none;
}
.interruptor::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: var(--sombra-interruptor);
  transition: transform 0.18s;
}
.interruptor:checked { background: var(--principal); }
.interruptor:checked::after { transform: translateX(18px); }
.interruptor:disabled { opacity: 0.5; cursor: not-allowed; }

.barra-cambios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-weight: 700;
}
.barra-cambios .botones { display: flex; gap: 8px; margin-left: auto; }
.barra-cambios[hidden], .solo-sin-js[hidden], .solo-con-js[hidden] { display: none; }

/* ---------- Fichas plegables (Acciones, Historial) ---------- */

.ficha { align-self: flex-start; width: 100%; max-width: 100%; }
.ficha > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
  padding: 0 16px 0 12px;
  border-radius: var(--r-medio);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.ficha > summary::-webkit-details-marker { display: none; }
.ficha > summary::marker { content: ''; }
.ficha > summary:hover { border-color: var(--principal); background: var(--principal-suave); }
.ficha > summary:active { transform: scale(0.98); }
.ficha > summary .flecha { width: 18px; height: 18px; color: var(--principal); transition: transform 0.18s; }
.ficha[open] > summary .flecha { transform: rotate(90deg); }
.ficha > summary .cuenta { color: var(--texto-2); font-weight: 400; }
.panel { margin-top: 12px; padding: 6px 18px; display: flex; flex-direction: column; }
.accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 0;
}
.accion + .accion, .accion + .accion-desplegada { border-top: 1px solid var(--borde); }
.accion .texto { min-width: 0; flex: 1 1 260px; }
.accion strong { display: block; }
.accion p { margin: 2px 0 0; color: var(--texto-2); font-size: 0.93rem; }
.accion form { margin: 0; }
/* Acción con formulario que se despliega (restablecer contraseña) */
.accion-desplegada { padding: 0 0 16px; }
.accion-desplegada > summary { list-style: none; cursor: pointer; }
.accion-desplegada > summary::-webkit-details-marker { display: none; }
.accion-desplegada > summary::marker { content: ''; }
.accion-desplegada > summary .accion { padding-bottom: 0; }
.accion-desplegada .formulario {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-2);
  max-width: 520px;
}

.zona-peligro {
  margin: 6px 0 14px;
  padding: 18px;
  border: 1px solid var(--peligro-borde);
  background: var(--peligro-fondo);
  border-radius: var(--r-medio);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.zona-peligro h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--peligro);
  font-size: 1.1rem;
}
.zona-peligro p { color: var(--texto); font-size: 0.95rem; }
.zona-peligro .fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.zona-peligro .campo { flex: 1 1 240px; }
.zona-peligro .campo input { border-color: var(--peligro-borde); }
.zona-peligro .campo input:focus { border-color: var(--peligro); box-shadow: 0 0 0 3px var(--foco-peligro); }

.linea-tiempo { list-style: none; margin: 0; padding: 14px 4px 14px 8px; display: flex; flex-direction: column; }
.linea-tiempo li { position: relative; padding: 0 0 18px 28px; }
.linea-tiempo li::before {
  content: '';
  position: absolute;
  left: 4px; top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--principal);
  box-shadow: 0 0 0 4px var(--principal-suave);
}
.linea-tiempo li::after {
  content: '';
  position: absolute;
  left: 8px; top: 22px; bottom: 0;
  width: 2px;
  background: var(--borde);
}
.linea-tiempo li:last-child::after { display: none; }
.linea-tiempo li:last-child { padding-bottom: 4px; }
.linea-tiempo time { display: block; color: var(--texto-3); font-size: 0.85rem; }

/* ---------- Listados ---------- */

.listado { width: 100%; border-collapse: collapse; }
.listado th, .listado td { padding: 8px 8px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; white-space: nowrap; }
.listado thead th {
  background: var(--superficie);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--texto-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 8px;
  border-bottom: 1px solid var(--borde-fuerte);
}
.listado th:first-child, .listado td:first-child { padding-left: 14px; }
.listado th:last-child, .listado td:last-child { padding-right: 14px; }
/* Una fila por elemento: teléfonos, etiquetas y fechas no se parten. Solo el
   nombre y los textos largos pueden ocupar varias líneas. */
.listado td:first-child, .listado td[data-etiqueta="Cliente"], .listado td[data-etiqueta="Dirección"],
.listado td[data-etiqueta="Contacto"], .listado td[data-etiqueta="Nombre"], .listado td[data-etiqueta="Parada del día"] { white-space: normal; }
.listado td.codigo-obra { white-space: nowrap; width: 1%; color: var(--texto-3); font-family: var(--cuerpo); font-weight: 400; font-variant-numeric: tabular-nums; }
.listado td[data-etiqueta="Parada del día"] { min-width: 120px; max-width: 320px; }
.listado .etiqueta { padding: 2px 8px; font-size: 0.8rem; white-space: nowrap; }
.listado tbody tr:last-child td { border-bottom: 0; }
.listado tbody tr { transition: background 0.15s; }
.listado tbody tr:hover { background: var(--principal-suave); }
.listado tr.archivado td { color: var(--texto-3); }
.listado a { font-weight: 700; text-decoration: none; }
.listado a:hover { text-decoration: underline; }
.superficie.tabla { overflow-x: auto; padding: 0; }
.persona { display: flex; align-items: center; gap: 12px; }
.persona .avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 0.8rem; }
/* El nombre va en una línea: la columna toma lo que necesite y las demás cedan. */
.listado .persona a { white-space: nowrap; }

@media (max-width: 640px) {
  .listado thead { display: none; }
  .listado tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
  .listado tbody tr:last-child { border-bottom: 0; }
  .listado td { display: block; border: none; padding: 2px 0; white-space: normal; }
  .listado td[data-etiqueta]::before { content: attr(data-etiqueta) ': '; color: var(--texto-3); font-size: 0.85rem; }
}

/* ---------- Selector de día ---------- */

.selector-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.selector-dia input[type="date"] {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
  background: var(--superficie);
}
.selector-dia .boton { min-width: 52px; min-height: 44px; padding: 0 16px; line-height: 1; }
/* Flechas de día: botón cuadrado de 44 px con el icono de 20 px centrado. */
.boton.flecha-dia { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
.boton.flecha-dia .icono { width: 20px; height: 20px; }
@media (max-width: 480px) {
  /* Flecha, fecha, "Ir" y flecha caben en una sola línea a 375 px. */
  .selector-dia { flex-wrap: wrap; gap: 6px; }
  .selector-dia .boton:not(.flecha-dia) { min-width: 44px; padding: 0 12px; }
  .selector-dia label { flex: 1 1 0; min-width: 0; }
  .selector-dia input[type="date"] { width: 100%; min-width: 0; }
}
.dia-texto { font-family: var(--titulos); font-size: 1.15rem; color: var(--oscuro); }

/* ---------- Móvil ---------- */

@media (max-width: 799px) {
  .bloque { padding: 16px; }
  .etiquetas { margin-left: 0; }
  .titulo h1 { font-size: 1.5rem; }
  .permisos .cab { display: none; }
  .permisos li { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 12px; }
  .permisos li .celda { flex-direction: column; }
  .permisos li .celda::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: 0.7rem;
    color: var(--texto-3);
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .modulo small { display: none; }
  .modulo small.aviso { display: block; }
  .panel { padding: 6px 14px; }
}

/* ---------- Módulos (obras, operarios, vehículos) ---------- */

/* Página "Más" del móvil */
.menu-mas { padding: 6px 0; }
.menu-mas ul { list-style: none; margin: 0; padding: 0; }
.menu-mas li + li { border-top: 1px solid var(--borde); }
.menu-mas a, .menu-mas button {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 18px;
  background: transparent; border: 0; text-align: left; cursor: pointer;
  color: var(--texto); font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
.menu-mas a:hover, .menu-mas button:hover { background: var(--superficie-2); }
.menu-mas .ico-caja {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--principal-suave); color: var(--oscuro);
}

/* Búsqueda y filtros de los listados */
.filtros { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtros .campo { flex: 1 1 200px; }
.filtros .campo.buscar { flex: 2 1 260px; }
.filtros .casilla {
  /* `.formulario > label` la dejaba en bloque: casilla y texto en líneas distintas. */
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  font-weight: 700;
  color: var(--texto-2);
  font-size: 0.85rem;
  line-height: 1.2;
}
.filtros .casilla input { margin: 0; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pequeno);
  border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-2);
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
}
.chip:hover { border-color: var(--principal); }
.chip[aria-current="true"] { background: var(--principal-suave); border-color: var(--principal); color: var(--oscuro); }

.vacio { padding: 32px 24px; text-align: center; color: var(--texto-2); }
.vacio .icono-vacio {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 12px;
  border-radius: var(--r-medio); background: var(--principal-suave); color: var(--principal);
}
.vacio .icono-vacio .icono { width: 24px; height: 24px; }
.vacio strong { display: block; color: var(--texto); margin-bottom: 4px; }

/* Datos de una ficha en pares etiqueta/valor */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; margin: 0; }
.datos dt { font-size: 0.8rem; font-weight: 700; color: var(--texto-2); letter-spacing: 0.04em; text-transform: uppercase; }
.datos dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* Filas con acciones (materiales, observaciones, vencimientos, periodos) */
/* Lista compacta (documentos, bajas y vacaciones): una línea por elemento, ≤ 40 px; acciones con iconos a la derecha. */
/* Cuadro «¿Quién conduce…?»: una opción por persona del equipo; sin carnet, deshabilitada. */
.lista-conductor { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.opcion-conductor { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px; border-radius: var(--r-pequeno); cursor: pointer; }
.opcion-conductor:hover { background: var(--superficie-2); }
.opcion-conductor.sin-carnet { color: var(--texto-3); cursor: not-allowed; }
.aviso-reparto { margin: 4px 0 0; }
a.chip.vehiculo { text-decoration: none; color: inherit; }
.lista-compacta { list-style: none; margin: 0; padding: 0; }
.lista-compacta > li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 36px; padding: 2px 0; border-bottom: 1px solid var(--borde); }
.lista-compacta > li:last-of-type { border-bottom: 0; }
.lista-compacta .texto { flex: 1 1 220px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }
.lista-compacta .texto small { color: var(--texto-2); font-size: 0.82rem; }
.lista-compacta .etiqueta { font-size: 0.78rem; padding: 1px 8px; }
.acciones-fila { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.acciones-fila form { display: inline; margin: 0; }
.acciones-venc .icono-accion { font-size: 0.95rem; }
.lista-filas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-filas > li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; }
.lista-filas > li + li { border-top: 1px solid var(--borde); }
.lista-filas .texto { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.lista-filas .texto small { display: block; color: var(--texto-2); }
.lista-filas .hecho { text-decoration: line-through; color: var(--texto-3); }
.lista-filas .botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lista-filas form { margin: 0; }
.boton.pequeno { min-height: 40px; padding: 0 12px; font-size: 1rem; }
.alta-rapida { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--borde); }
.alta-rapida .campo { flex: 1 1 200px; }
.alta-rapida .campo.corto { flex: 0 1 120px; }
.alta-rapida .campo.largo { flex: 3 1 280px; }
.lista-filas + .alta-rapida { margin-top: 4px; }

/* Edición en línea dentro de una fila */
.edicion { flex: 1 1 100%; }
.edicion > summary { list-style: none; cursor: pointer; width: fit-content; }
.edicion > summary::-webkit-details-marker { display: none; }
.edicion > summary::marker { content: ''; }
.edicion > .formulario {
  margin-top: 12px; padding: 16px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie-2); max-width: 640px;
}
.resueltas { margin-top: 12px; }
.resueltas > summary { cursor: pointer; font-weight: 700; color: var(--texto-2); min-height: 40px; display: flex; align-items: center; }
.formulario.resolver { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.formulario.resolver input[type="text"] { margin-top: 0; width: 220px; max-width: 100%; }
.casilla { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--texto); font-size: 0.95rem; }
.casilla input { width: 20px; height: 20px; margin: 0; flex: none; }
.codigo-obra { font-family: var(--titulos); font-size: 1.15rem; letter-spacing: 0.04em; color: var(--oscuro); margin: 0 0 2px; }
a.etiqueta { text-decoration: none; }

@media (max-width: 799px) {
  .filtros .campo, .filtros .campo.buscar { flex: 1 1 100%; }
}

/* Carnets de conducir en el formulario de operario */
/* Cada carnet es una caja: su interruptor y, debajo, su fecha. Anchos iguales. */
.carnets-bloque { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 560px; margin-top: 8px; }
.carnet-caja { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: var(--r-medio); background: var(--superficie-2); }
.carnet-caja .campo input { height: 44px; margin-top: 6px; }
.carnet-caja .campo label { font-size: 0.85rem; }

/* Interruptor de sí o no (maqueta: ficha-usuario-propuesta). Es una casilla real
   de formulario, con aspecto de interruptor; no necesita JavaScript. */
.interruptor-etiqueta { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--texto); }
.interruptor-entrada { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-pista { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--borde-fuerte); transition: background 0.18s; }
.interruptor-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--superficie); box-shadow: var(--sombra-interruptor); transition: transform 0.18s; }
.interruptor-entrada:checked + .interruptor-pista { background: var(--principal); }
.interruptor-entrada:checked + .interruptor-pista::after { transform: translateX(18px); }
.interruptor-etiqueta:hover .interruptor-pista { box-shadow: 0 0 0 3px var(--foco); }
.interruptor-entrada:focus-visible + .interruptor-pista { outline: 3px solid var(--foco); outline-offset: 2px; }
.interruptor-entrada:disabled + .interruptor-pista { opacity: 0.5; }
.interruptor-etiqueta:has(.interruptor-entrada:disabled) { cursor: not-allowed; color: var(--texto-3); }

/* ---------- Tablero del día (N3) ---------- */

.tablero { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 18px; align-items: start; }
.tablero .paradas { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tablero h3 { font-size: 1rem; margin: 10px 0 0; color: var(--texto-2); }
.tablero .cuenta { font-weight: 400; color: var(--texto-2); }
.tablero .secundario { color: var(--texto-2); }
.libres-plegable > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; }
.libres-plegable > summary::-webkit-details-marker { display: none; }
.titulo-libres { font-family: var(--titulos); font-size: 1.25rem; }
.libres-plegable[open] > summary { margin-bottom: 12px; }
.anadir-parada > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; }
.anadir-parada > summary::-webkit-details-marker { display: none; }
.anadir-parada[open] > summary { margin-bottom: 8px; }
.tarjetas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tarjeta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-pequeno);
}
.tarjeta[draggable="true"] { cursor: grab; }
.tarjeta.arrastrando { opacity: 0.5; }
.parada.recien-cambiada { animation: recien-cambiada 2.5s ease-out; }
@keyframes recien-cambiada { 0%, 40% { box-shadow: 0 0 0 3px var(--principal); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .parada.recien-cambiada { animation: none; box-shadow: 0 0 0 3px var(--principal); } }
.tarjeta .nombre { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.en-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.en-linea select, .en-linea input[type="text"] { flex: 1 1 180px; height: 48px; min-width: 0; max-width: 100%; font-size: 1rem; padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background: var(--superficie); font-family: var(--cuerpo); }
.en-linea .casilla { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; }
.en-linea .casilla input { width: 22px; height: 22px; }
.en-linea .boton { min-height: 48px; }
.acciones-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acciones-fila form { margin: 0; }
.acciones-fila .boton.discreto { min-height: 44px; min-width: 44px; }
.parada.zona-activa, .columna-libres.zona-activa { border-color: var(--principal); background: var(--principal-suave); }
.ya-asignados summary { cursor: pointer; font-weight: 700; color: var(--principal); min-height: 44px; display: flex; align-items: center; }
.form-parada [hidden] { display: none; }
.form-parada .casilla { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; }
.form-parada .casilla input { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .tablero { grid-template-columns: 1fr; }
  .en-linea select, .en-linea input[type="text"] { flex-basis: 100%; }
  .en-linea .boton { flex: 1 1 100%; }
  .acciones-fila { width: 100%; }
}

/* ---------- Calendario de obras (N3b) ---------- */

.barra-calendario { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.barra-calendario .boton-fila { align-items: center; }
.titulo-rango { font-family: var(--titulos); min-width: 12ch; padding: 0 10px; text-align: center; line-height: 1.2; }
.calendario-tabla { overflow-x: auto; padding: 0; }
.calendario { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; }
.calendario th, .calendario td { padding: 0; border-bottom: 1px solid var(--borde); text-align: center; }
.calendario thead th { background: var(--superficie-2); font-size: 0.8rem; color: var(--texto-2); padding: 6px 0; }
.calendario thead th.hoy { background: var(--principal-suave); color: var(--oscuro); }
.calendario thead th.finde { color: var(--texto-3); }
.calendario thead a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; min-height: 44px; justify-content: center; }
.calendario .dia-semana { text-transform: capitalize; }
.calendario .dia-numero { font-weight: 700; font-size: 1rem; }
.calendario .col-obra { width: 170px; text-align: left; padding: 8px 12px; position: sticky; left: 0; background: var(--superficie); z-index: 1; font-weight: 400; }
.calendario-mes .col-obra { width: 200px; }
.calendario .col-obra a { text-decoration: none; color: var(--texto); overflow-wrap: anywhere; }
.calendario .dia-celda { height: 48px; position: relative; }
.calendario .dia-celda.hoy { background: var(--principal-suave); }
.calendario .dia-celda a { display: flex; align-items: center; justify-content: center; gap: 4px; height: 100%; text-decoration: none; color: var(--texto); }
.calendario .dia-celda.barra a { margin: 10px 0; height: 28px; border: 2px solid var(--principal); border-left-width: 0; border-right-width: 0; background: var(--superficie); }
.calendario .dia-celda.barra.inicio a { border-left-width: 2px; border-radius: 14px 0 0 14px; margin-left: 4px; }
.calendario .dia-celda.barra.fin a { border-right-width: 2px; border-radius: 0 14px 14px 0; margin-right: 4px; }
.calendario .dia-celda.barra.abierta a { border-right-style: dashed; border-right-width: 2px; border-radius: 0; }
.calendario .estado-en_marcha .celda.barra a { background: var(--principal); color: var(--sobre-principal); }
.calendario .estado-terminada .celda.barra a { background: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--texto-2); }
.calendario .personas { font-weight: 700; font-size: 0.85rem; }
.punto-naranja { width: 9px; height: 9px; border-radius: 50%; background: var(--aviso); display: inline-block; }
.calendario-lista { display: none; flex-direction: column; gap: 12px; }
.calendario-lista .dia-lista h2 { font-size: 1.05rem; }
.calendario-lista .dia-lista.hoy { border-color: var(--principal); }
.leyenda { margin-top: 4px; }
@media (max-width: 760px) {
  .calendario-tabla { display: none; }
  .calendario-lista { display: flex; }
}

/* ---------- Importar desde Excel ---------- */

.revision-seccion { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.revision-seccion h3, .revision-seccion h4 { margin: 0; }
.revision-seccion h4 { font-size: 1rem; color: var(--texto-2); }

/* Cuadrícula del mes (N3b, ajuste del calendario) */
table.mes { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.mes th { background: var(--superficie-2); color: var(--texto-2); font-size: 0.8rem; text-transform: capitalize; padding: 8px 4px; border-bottom: 1px solid var(--borde); }
.dia-mes { vertical-align: top; height: 118px; padding: 6px 6px 8px; border: 1px solid var(--borde); text-align: left; }
/* Festivo o cierre de empresa: día sombreado con su nombre. */
.dia-mes.no-laborable { background: repeating-linear-gradient(135deg, var(--superficie-2) 0 7px, var(--borde) 7px 8px); }
.nombre-no-laborable { display: block; margin: 2px 0 4px; font-size: 0.75rem; font-weight: 700; color: var(--texto-2); line-height: 1.2; }
.dia-mes.fuera { background: var(--superficie-2); }
.dia-mes.fuera .numero { color: var(--texto-3); }
.dia-mes.hoy { background: var(--principal-suave); }
.dia-mes.pasado .paradas-dia a { color: var(--texto-2); }
.dia-mes .cabeza-dia { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 28px; }
.dia-mes .numero { font-weight: 700; text-decoration: none; color: var(--texto); padding: 2px 6px; border-radius: 6px; }
.dia-mes .numero:hover { background: var(--principal-suave); }
.anadir-dia { font-size: 0.78rem; font-weight: 700; color: var(--principal); text-decoration: none; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.anadir-dia:hover { background: var(--principal-suave); }
.paradas-dia { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.paradas-dia li a { display: block; font-size: 0.8rem; line-height: 1.25; padding: 2px 6px; border-radius: 6px; text-decoration: none; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--superficie-2); border-left: 3px solid var(--principal); }
.paradas-dia li.parada-proveedor a { border-left-color: var(--aviso); }
.paradas-dia li.mas a { background: transparent; border-left: 0; color: var(--texto-2); font-weight: 700; }
.paradas-dia .n { color: var(--texto-2); font-weight: 700; }
.calendario thead th .anadir-dia { display: block; margin-top: 2px; }

/* Enlaces bajo el formulario de entrada y de recuperación */
.entrada .aparte { text-align: center; margin: 14px 0 0; font-size: 0.95rem; }

/* La semana es una sola fila de celdas altas. */
.mes-semana .dia-mes { height: 240px; }
.banda-obras { margin-bottom: 0; }
@media (max-width: 760px) { .barra-calendario .titulo-rango { flex: 1 1 100%; order: -1; } }
/* La columna de nombres de la banda de obras se repite vacía en la cuadrícula para que los días queden alineados. */
.mes .col-obra { width: 170px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); }
.mes .col-obra-vacia { width: 170px; border: 1px solid var(--borde); background: var(--superficie-2); }

/* Campo de archivo: misma letra, relleno y botón que el resto de controles */
input[type="file"] {
  display: block;
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-pequeno);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 1rem;
  line-height: 1.2;
  box-sizing: border-box;
}
input[type="file"]::file-selector-button {
  min-height: 36px;
  margin: 0 12px 0 0;
  padding: 0 16px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
}
input[type="file"]::file-selector-button:hover { border-color: var(--principal); background: var(--principal-suave); }
input[type="file"]:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

@media (max-width: 480px) {
  input[type="file"] { font-size: 0.9rem; }
  input[type="file"]::file-selector-button { padding: 0 12px; margin-right: 8px; font-size: 0.9rem; }
}
.codigo-obra-pequeno { margin: 2px 0 0; font-size: 0.8rem; color: var(--texto-2); letter-spacing: 0.04em; }

/* Tablero: "+ Añadir obra" y "+ Añadir proveedor" y los menús de cada tarjeta */
.anadir-destinos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.anadir-menu > summary, .accion-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: 1.05rem; }
.anadir-menu > summary::-webkit-details-marker, .accion-menu > summary::-webkit-details-marker { display: none; }
.anadir-menu > summary.primario { background: var(--principal); color: var(--sobre-principal); }
.anadir-menu > summary.proveedor { background: var(--oscuro); color: var(--sobre-principal); }
.anadir-menu > summary.secundario, .accion-menu > summary.secundario { background: var(--superficie); border: 1px solid var(--principal); color: var(--principal-texto); }
.anadir-menu[open] { flex: 1 1 100%; }
.anadir-menu[open] > summary { margin-bottom: 12px; }
.anadir-menu > form { max-width: 760px; }
.accion-menu { margin-top: 4px; }
.accion-menu > summary { min-height: 40px; font-size: 1rem; }
.accion-menu[open] > summary { margin-bottom: 8px; }


/* Comprobar datos */
.totales dd { margin: 0; }
.nombres { margin: 6px 0 0; padding: 0 0 0 18px; color: var(--texto); font-size: 0.95rem; }
.nombres li { margin: 2px 0; }
.resumen-texto { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; line-height: 1.45; padding: 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background: var(--superficie-2); color: var(--texto); resize: vertical; }

/* ---------- Chips del tablero (persona, vehículo) ---------- */
.tarjetas.chips { gap: 8px; }
.tarjeta.tarjeta-chip, .tarjeta-chip { padding: 0; border: 0; background: transparent; box-shadow: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; }
.chip-detalle { flex: 1 1 100%; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; font-size: 1rem; max-width: 100%; }
.chip .icono { width: 18px; height: 18px; flex: none; }
.chip.persona { background: var(--persona-asignada-fondo); color: var(--persona-asignada-texto); border-color: var(--persona-asignada-borde); }
.chip.vehiculo { background: var(--vehiculo-fondo); color: var(--vehiculo-texto); border-color: var(--vehiculo-borde); }
.chip .nombre { font-weight: 700; }
.chip .volante { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; }
.chip .plazas { font-weight: 700; }
summary.chip { list-style: none; cursor: pointer; }
summary.chip::-webkit-details-marker { display: none; }
.tarjeta[draggable="true"] summary.chip { cursor: grab; }
.chip-detalle[open] > summary.chip { box-shadow: 0 0 0 2px var(--foco); }
.chip-detalle > .en-linea, .chip-detalle > .chip-acciones { margin-top: 8px; }
.chip-notas { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.contadores { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; color: var(--texto-2); }
.contador { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 1rem; }
.contador .icono { width: 18px; height: 18px; }
.libres-plegable > summary { gap: 12px; }
.titulo-vehiculos-libres { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
.cabecera-bloque > .contadores { align-self: flex-start; }
.franja-libres { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-pequeno); background: var(--principal-suave); color: var(--oscuro); font-size: 0.98rem; }
.franja-libres .icono { width: 18px; height: 18px; margin-top: 2px; flex: none; }

/* ---------- Paradas lado a lado ---------- */
.tablero .paradas { gap: 16px; }
.rotulo-grupo { margin: 8px 0 -2px; font-size: 1.15rem; color: var(--oscuro); }
.rejilla-paradas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.rejilla-paradas > .parada { min-width: 0; }
.parada .cabecera-bloque { align-items: flex-start; gap: 10px; }
.parada .cabecera-bloque h2 { font-size: 1.15rem; overflow-wrap: anywhere; }
.botones-parada { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; align-items: flex-start; }
.botones-parada form { margin: 0; }
.botones-parada .boton { min-height: 40px; font-size: 1rem; padding: 0 14px; }
.botones-parada .accion-menu { margin: 0; }
.botones-parada .accion-menu[open] { flex: 1 1 100%; }
.instrucciones-linea { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 0.92rem; color: var(--texto-2); }
.instrucciones-linea .icono-nota { display: inline-flex; flex: none; color: var(--texto-3); }
.instrucciones-linea .icono { width: 18px; height: 18px; }
.instrucciones-linea input[type="text"] { height: 40px; font-size: 0.95rem; }
.instrucciones-linea .boton { min-height: 40px; flex: none; }
.pie-parada { margin-top: 8px; display: flex; justify-content: flex-end; }
.pie-parada form { margin: 0; }
@media (max-width: 900px) and (min-width: 601px) {
  .rejilla-paradas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .rejilla-paradas > .parada { flex: 0 0 min(320px, 85%); scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .rejilla-paradas { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
  .columna-libres { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}

/* ---------- Vencimientos: tabla de la ficha y columnas del listado ---------- */
.tabla-envoltorio { overflow-x: auto; margin: 8px 0 12px; }
.tabla-vencimientos td, .tabla-vencimientos th { white-space: normal; vertical-align: middle; }
.tabla-vencimientos td[data-etiqueta="Faltan"], .tabla-vencimientos td[data-etiqueta="Próximo vencimiento"] { white-space: nowrap; }
.tabla-vencimientos td.nombre-venc { white-space: normal; min-width: 160px; }
.tabla-vencimientos td.nombre-venc small { display: block; color: var(--texto-2); }
.tabla-vencimientos td.acciones-venc .boton { margin: 2px 6px 2px 0; }
.tabla-vencimientos .fila-edicion > td { white-space: normal; background: var(--fondo); }
.tabla-vencimientos .fila-edicion[hidden] { display: none; }
.tabla-vencimientos .fila-edicion form + form { margin-top: 12px; }
.listado td.celda-venc { white-space: nowrap; }

/* ---------- Chips: radio pequeño, emoji como icono, una sola línea ---------- */
.tarjetas.chips { gap: 8px; }
.chip { border-radius: 8px; flex-wrap: nowrap; min-width: 0; }
.chip .emoji { font-size: 1.25rem; line-height: 1; flex: none; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.chip .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip .secundario, .chip .plazas { white-space: nowrap; flex: none; }
.chip.vehiculo .secundario::before, .chip.vehiculo .plazas::before { content: "·"; margin: 0 6px 0 0; color: var(--texto-3); }
.chip.vehiculo .volante { white-space: nowrap; flex: none; }
.contador .emoji { font-size: 1.1rem; line-height: 1; }
.franja-libres .emoji { font-size: 1.1rem; line-height: 1.3; flex: none; }

/* ---------- Espaciado entre secciones del tablero ---------- */
.columna-libres .titulo-vehiculos-libres,
.columna-libres h3,
.columna-libres .ya-asignados { margin-top: var(--espacio-seccion); margin-bottom: 10px; }
.columna-libres .tarjetas + h3, .columna-libres .tarjetas + .titulo-vehiculos-libres { margin-top: var(--espacio-seccion); }
.columna-libres .ayuda { margin: 4px 0 0; }
.parada h3 { margin-top: var(--espacio-seccion); margin-bottom: 10px; }
.parada .botones-parada { margin: 16px 0 4px; }
.parada .instrucciones-linea { margin-top: var(--espacio-seccion); }
.parada .pie-parada { margin-top: 16px; }

/* ---------- Tarjeta en dos columnas: Vehículos | Personas ---------- */
.tablero { grid-template-columns: minmax(240px, 280px) 1fr; }
.rejilla-paradas { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.parada { container-type: inline-size; }
.columnas-parada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.columna-parada { min-width: 0; }
.columna-parada h3 { margin-top: 16px; }
.columna-parada .accion-menu { margin: 0 0 10px; }
.columna-parada .accion-menu[open] { margin-bottom: 12px; }
.columna-parada .chip.vehiculo { flex-wrap: wrap; row-gap: 2px; }
.columna-parada .chip { width: 100%; }
@container (max-width: 440px) {
  .columnas-parada { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .rejilla-paradas { grid-template-columns: minmax(0, 1fr); }
}

.tarjeta-chip, .chip-detalle { min-width: 0; max-width: 100%; }
.columna-libres .chip { max-width: 100%; }
.plegar-pista { margin-left: 4px; color: var(--texto-3); font-size: 1.3rem; line-height: 1; }
@media (min-width: 901px) {
  /* "Sin asignar" plegado: queda una tira estrecha y las tarjetas ganan ancho. */
  .tablero:has(.libres-plegable:not([open])) { grid-template-columns: 76px 1fr; }
  .tablero:has(.libres-plegable:not([open])) .columna-libres { padding-left: 8px; padding-right: 8px; }
  .tablero:has(.libres-plegable:not([open])) .titulo-libres { display: none; }
  .tablero:has(.libres-plegable:not([open])) .libres-plegable > summary { flex-direction: column; justify-content: center; gap: 4px; }
  .tablero:has(.libres-plegable:not([open])) .plegar-pista { transform: rotate(180deg); }
}

/* ---------- Notas de la parada ---------- */
.notas-parada { margin-top: var(--espacio-seccion); border-top: 1px solid var(--borde); padding-top: 4px; }
.notas-parada h3 { display: flex; align-items: center; gap: 6px; margin: 12px 0 8px; }
.notas-parada h3 .icono { width: 18px; height: 18px; color: var(--texto-3); }
/* «Notas»: título pequeño sobre un separador fino. */
.notas-parada .titulo-notas { margin: 0 0 2px; padding-top: 6px; border-top: 1px solid var(--borde); font-size: 0.82rem; font-weight: 700; color: var(--texto-2); text-transform: none; }
/* Notas de una parada: texto negro sobre blanco, sin bordes ni fondos de color; quién la ve y las acciones, en gris a la derecha. */
.lista-notas { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; }
.nota-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 5px 0; color: var(--texto); border-bottom: 1px solid var(--borde); }
.nota-fila:last-child { border-bottom: 0; }
.nota-fila .nota-texto { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.nota-archivo { display: inline-flex; align-items: baseline; gap: 2px; margin-left: 8px; white-space: nowrap; font-size: 0.9rem; }
.nota-meta { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--texto-2); font-size: 0.82rem; white-space: nowrap; }
.nota-fila form { display: inline; margin: 0; }
.icono-accion { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px; border: 0; border-radius: var(--r-pequeno); background: none; color: var(--texto-2); font: inherit; font-size: 0.85rem; text-decoration: none; cursor: pointer; opacity: 0.75; }
.icono-accion:hover, .icono-accion:focus-visible { opacity: 1; background: var(--superficie-2); }
/* Quitar: en el rojo de peligro (como «Quitar de este día»), pequeño pero bien visible. */
.icono-accion.peligro { color: var(--peligro); font-weight: 700; opacity: 1; border: 1px solid var(--peligro); background: var(--superficie); }
.botones-parada .quitar-obra { width: 30px; height: 30px; }
.icono-accion.peligro:hover, .icono-accion.peligro:focus-visible { background: var(--peligro-fondo); }
.nota-nueva select { flex: 0 1 190px; }

/* ---------- Banda de obras abiertas ---------- */
.banda-obras { margin-bottom: 16px; }
.banda-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 10px; }
.banda-cabecera h2 { margin: 0; font-size: 1.1rem; }
.banda-filtro { flex: 0 1 260px; height: 40px; padding: 0 12px; font-size: 1rem; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background: var(--superficie); font-family: var(--cuerpo); }
.banda-lista { list-style: none; margin: 0; padding: 2px 0 8px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; }
.obra-ficha { flex: 0 0 auto; width: 210px; scroll-snap-align: start; border: 1px solid var(--borde-fuerte); border-left: 4px solid var(--principal); border-radius: 8px; background: var(--superficie); }
.obra-ficha[hidden] { display: none; }
.obra-ficha[draggable="true"] { cursor: grab; }
.obra-ficha.arrastrando { opacity: 0.5; }
.obra-ficha form { margin: 0; }
.obra-boton { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; cursor: pointer; min-height: 62px; }
.obra-boton:focus-visible { outline: 3px solid var(--foco); border-radius: 6px; }
.obra-boton:disabled { cursor: default; }
.obra-ficha.anadida { background: var(--fondo); border-color: var(--borde); }
.obra-nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obra-cliente { color: var(--texto-2); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obra-marca { color: var(--ok); font-size: 0.85rem; font-weight: 700; }
.banda-selector { display: none; margin-top: 8px; }
@media (max-width: 900px) { .banda-selector { display: flex; } }
.paradas.zona-activa { outline: 2px dashed var(--principal); outline-offset: 6px; border-radius: var(--r-medio); }

/* ---------- Proveedor dentro de la obra ---------- */
.anidadas { margin-top: var(--espacio-seccion); padding: 4px 12px 12px; border-radius: var(--r-pequeno); background: var(--fondo); border-left: 4px solid var(--oscuro); }
.anidadas > h3 { margin-top: 12px; color: var(--oscuro); }
.anidadas-lista { display: flex; flex-direction: column; gap: 12px; }
.parada.parada-anidada { box-shadow: none; border: 1px solid var(--borde); border-left: 4px solid var(--oscuro); background: var(--superficie); }
.parada-anidada .columnas-parada { grid-template-columns: minmax(0, 1fr); }
.anadir-ruta { margin-top: 8px; }
.anadir-ruta > summary { cursor: pointer; color: var(--texto-2); font-size: 0.92rem; list-style: none; padding: 6px 0; }
.anadir-ruta > summary::-webkit-details-marker { display: none; }
.anadir-ruta > summary::before { content: "+ "; }
.anadir-ruta[open] > summary { margin-bottom: 8px; }

/* ---------- Color por obra y estados ---------- */
.color-obra[data-color="1"], .parada[data-color="1"], .obra-ficha[data-color="1"], .sugerida[data-color="1"] { --c: var(--obra-1); --c-suave: var(--obra-1-suave); }
.color-obra[data-color="2"], .parada[data-color="2"], .obra-ficha[data-color="2"], .sugerida[data-color="2"] { --c: var(--obra-2); --c-suave: var(--obra-2-suave); }
.color-obra[data-color="3"], .parada[data-color="3"], .obra-ficha[data-color="3"], .sugerida[data-color="3"] { --c: var(--obra-3); --c-suave: var(--obra-3-suave); }
.color-obra[data-color="4"], .parada[data-color="4"], .obra-ficha[data-color="4"], .sugerida[data-color="4"] { --c: var(--obra-4); --c-suave: var(--obra-4-suave); }
.color-obra[data-color="5"], .parada[data-color="5"], .obra-ficha[data-color="5"], .sugerida[data-color="5"] { --c: var(--obra-5); --c-suave: var(--obra-5-suave); }
.color-obra[data-color="6"], .parada[data-color="6"], .obra-ficha[data-color="6"], .sugerida[data-color="6"] { --c: var(--obra-6); --c-suave: var(--obra-6-suave); }
.color-obra[data-color="7"], .parada[data-color="7"], .obra-ficha[data-color="7"], .sugerida[data-color="7"] { --c: var(--obra-7); --c-suave: var(--obra-7-suave); }
.muestra-color { display: inline-block; width: 22px; height: 22px; border-radius: 6px; background: var(--c); vertical-align: middle; }
.parada[data-color] { border-left: 6px solid var(--c); }
.parada[data-color] > .cabecera-bloque { background: var(--c-suave); margin: -24px -24px 0; padding: 14px 24px; border-radius: var(--r-medio) var(--r-medio) 0 0; }
.obra-ficha[data-color] { border-left-color: var(--c); }
.obra-ficha[data-color]:not(.anadida) { background: var(--c-suave); }
.parada[data-proveedor] { border-left: 6px solid var(--oscuro); }
.parada[data-proveedor] > .cabecera-bloque { background: var(--principal-suave); margin: -24px -24px 0; padding: 14px 24px; border-radius: var(--r-medio) var(--r-medio) 0 0; }
.parada.parada-anidada[data-proveedor] > .cabecera-bloque { margin: -24px -24px 0; }
/* Personas: libre (verde), asignado (azul, el de siempre) y no disponible (ámbar). */
.chip.persona.libre { background: var(--persona-libre-fondo); color: var(--persona-libre-texto); border-color: var(--persona-libre-borde); }
.chip.persona.baja { background: var(--estado-baja-fondo); border-color: var(--estado-baja-borde); color: var(--estado-baja); }

/* ---------- "+ Añadir parada" con tipo de destino ---------- */
.formulario-parada { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.opciones-destino { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.opcion-destino { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie); font-weight: 700; cursor: pointer; }
.opcion-destino input { width: 20px; height: 20px; }
.formulario-parada:has(input[value="obra"]:checked) .campos-proveedor { display: none; }

/* Destino resaltado al arrastrar: dice qué pasará al soltar. */
.parada { position: relative; }
.parada.zona-activa::after {
  content: attr(data-destino);
  position: absolute; right: 12px; top: 10px; z-index: 2;
  padding: 4px 10px; border-radius: 6px;
  background: var(--principal); color: var(--sobre-principal);
  font-weight: 700; font-size: 0.9rem; pointer-events: none;
}
.parada-anidada.zona-activa { outline: 2px dashed var(--principal); outline-offset: 2px; }

/* ---------- Ronda 4: nombres enteros, emoji a 1em, notas plegadas ---------- */
.tablero { grid-template-columns: minmax(280px, 320px) 1fr; }
.chip { min-height: 34px; padding: 3px 10px; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 0.95rem; }
.chip .emoji { font-size: 1em; }
.chip .nombre { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
.chip.vehiculo .linea2 { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; padding-left: 1.6em; font-size: 0.9rem; }
.chip.vehiculo .secundario::before, .chip.vehiculo .plazas::before { content: none; }
.chip.vehiculo .plazas + .volante::before { content: none; }
.contador .emoji, .franja-libres .emoji { font-size: 1em; }
.columna-parada .chip { width: 100%; }
.mas-nota { margin-top: 8px; }
.mas-nota > summary { list-style: none; cursor: pointer; display: inline-flex; width: auto; }
.mas-nota > summary::-webkit-details-marker { display: none; }
.mas-nota[open] > summary { margin-bottom: 8px; }
.notas-parada { margin-top: 14px; padding-top: 0; border-top: 0; }
.chip.persona { flex-wrap: nowrap; align-items: flex-start; }
.chip.persona .emoji, .chip.persona .volante { flex: none; margin-top: 1px; }
.chip.persona .nombre { flex: 1 1 0; }
.chip.persona .secundario { flex: none; }

/* ---------- Una tarjeta por obra, con sus paradas dentro ---------- */
.obra-tarjeta[data-color] { border-left: 6px solid var(--c); }
.tablero section.obra-tarjeta { box-shadow: var(--sombra-tarjeta); }
.visita { position: relative; container-type: inline-size; padding: 14px 0 0; border-top: 1px solid var(--borde); margin-top: 6px; }
.obra-tarjeta > .visita:first-of-type { border-top: 0; margin-top: 0; }
.visita-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.visita-titulo h3 { margin: 0; font-size: 1.05rem; color: var(--oscuro); }
.visita.zona-activa { outline: 2px dashed var(--principal); outline-offset: 4px; border-radius: var(--r-pequeno); }
.visita.zona-activa::after { content: attr(data-destino); position: absolute; right: 0; top: 10px; z-index: 2; padding: 4px 10px; border-radius: 6px; background: var(--principal); color: var(--sobre-principal); font-weight: 700; font-size: 0.9rem; pointer-events: none; }

/* ---------- Inicio: alertas y módulos ---------- */
.panel-alertas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.alerta { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-medio); border: 1px solid var(--borde); background: var(--superficie); text-decoration: none; color: var(--texto); box-shadow: var(--sombra); border-left: 6px solid var(--aviso); }
.alerta-peligro { border-left-color: var(--peligro); }
.alerta:hover { background: var(--fondo); }
.alerta-icono { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; align-items: center; justify-content: center; background: var(--aviso-fondo); color: var(--aviso); flex: none; }
.alerta-peligro .alerta-icono { background: var(--peligro-fondo); color: var(--peligro); }
.alerta-icono .icono { width: 20px; height: 20px; }
.alerta-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.alerta-texto small { color: var(--texto-2); overflow-wrap: anywhere; }
.alerta-flecha { font-size: 1.6rem; color: var(--texto-3); }
.panel-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.modulo-tarjeta { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-medio); border: 1px solid var(--borde); background: var(--superficie); box-shadow: var(--sombra); text-decoration: none; color: var(--texto); min-height: 82px; }
.modulo-tarjeta:hover { border-color: var(--principal); }
.modulo-icono { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; background: var(--principal-suave); color: var(--oscuro); flex: none; }
.modulo-icono .icono { width: 24px; height: 24px; }
.modulo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.modulo-texto strong { font-size: 1.1rem; }
.modulo-texto small { color: var(--texto-2); }
.modulo-numero { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.modulo-numero strong { font-size: 1.5rem; line-height: 1; color: var(--oscuro); }
.modulo-numero small { color: var(--texto-2); font-size: 0.8rem; }

/* ---------- Obras en marcha sin parada este día (sugeridas) ---------- */
.sugeridas { margin-bottom: 8px; }
.sugerida { border-left: 6px solid var(--c); border-style: dashed; border-left-style: solid; gap: 10px; }
.sugerida h3 { margin: 0; font-size: 1.1rem; }

/* ---------- Cuadros emergentes (patrón: alta y edición = modal) ---------- */
dialog.modal { border: 0; padding: 0; border-radius: var(--r-grande); width: min(620px, 92vw); max-height: 90vh; overflow: auto; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-modal); }
dialog.modal::backdrop { background: var(--fondo-modal); }
/* Sin JavaScript: el ancla (#id) o un error de formulario lo enseñan igualmente. */
/* Solo SIN JavaScript: con él, el cuadro se abre y se cierra con showModal()/close(); si esta regla
   valiera también, un cuadro abierto desde el servidor (data-abierto o #id) no se podría cerrar. */
html:not(.con-js) dialog.modal:target, html:not(.con-js) dialog.modal[data-abierto]:not([open]) { display: block; position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 70; }
.modal-cuerpo { padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 14px; }
.modal-cuerpo h2 { margin: 0; font-size: 1.3rem; }
.modal-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.modal-quitar { padding: 0 24px 18px; display: flex; justify-content: flex-start; }
.modal-quitar form, .modal-quitar { margin: 0; }
.panel-cabecera { display: flex; justify-content: flex-end; margin-bottom: 6px; }
/* Fichas: cada documento en una fila (texto a la izquierda, acciones juntas a la derecha). */
.lista-filas > li > .botones { margin-left: auto; flex-wrap: nowrap; }
/* Vencimientos del vehículo: filas limpias, sin resaltado ni relleno bajo la tabla. */
.tabla-vencimientos tbody tr:hover { background: transparent; }
.tabla-envoltorio { margin: 8px 0 0; }
.tabla-vencimientos tbody tr:last-child td { border-bottom: 0; }
.tabla-vencimientos td.acciones-venc { white-space: nowrap; }

/* ---------- Itinerario de una persona: "1 · Obra A", "2 · Proveedor B" ---------- */
.itinerario { list-style: none; margin: 0 0 0 4px; padding: 0 0 0 10px; border-left: 2px solid var(--borde-fuerte); flex: 1 1 100%; display: flex; flex-direction: column; gap: 1px; font-size: 0.875rem; color: var(--texto-2); }
.itinerario a { color: inherit; text-decoration: none; }
.itinerario a:hover { text-decoration: underline; }
.itinerario .n { font-weight: 700; color: var(--oscuro); }
.itinerario li.aqui a { font-weight: 700; color: var(--texto); }

/* ---------- Compacto: menos relleno y letra un punto menor (sin bajar de 14 px) ---------- */
.bloque { padding: 16px; gap: 10px; }
.parada[data-color] > .cabecera-bloque, .parada[data-proveedor] > .cabecera-bloque { margin: -16px -16px 0; padding: 10px 16px; }
.parada.parada-anidada[data-proveedor] > .cabecera-bloque { margin: -16px -16px 0; }
.parada .cabecera-bloque h2 { font-size: 1.05rem; }
.parada h3, .visita-titulo h3, .columna-parada h3 { font-size: 0.95rem; margin: 10px 0 6px; }
.visita { padding-top: 8px; margin-top: 4px; }
.botones-parada { margin: 8px 0 2px; gap: 6px; }
.botones-parada .boton, .columna-parada .accion-menu > summary { min-height: 36px; font-size: 0.95rem; padding: 0 12px; }
.columna-parada .accion-menu { margin: 0 0 6px; }
.chip { min-height: 28px; padding: 2px 8px; font-size: 0.9rem; gap: 5px; }
.columna-parada .chip { width: auto; max-width: 100%; }
.columna-parada .chip.vehiculo { width: 100%; }
.tarjetas.chips { gap: 5px; }
.tarjeta-chip { gap: 3px 6px; }
.chip-notas, .chip-notas .secundario { font-size: 0.85rem; }
.notas-parada { margin-top: 8px; }
.pie-parada { margin-top: 4px; }
.pie-parada .boton { min-height: 36px; }
.anidadas { margin-top: 10px; padding: 2px 10px 10px; }
.mas-nota > summary, .columna-parada .boton.discreto.pequeno { min-height: 36px; }
.contador, .contadores { font-size: 0.9rem; }
.franja-libres { padding: 8px 12px; margin-bottom: 10px; }
.banda-obras { margin-bottom: 10px; }

/* ---------- Compacto, segunda pasada: botones en la fila del título ---------- */
.columna-parada { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.columna-parada > h3 { flex: 1 1 auto; margin: 8px 0 4px; }
.columna-parada > .accion-menu { flex: 0 0 auto; margin: 6px 0 0; }
.columna-parada > .accion-menu[open] { flex: 1 1 100%; }
.columna-parada > :not(h3):not(.accion-menu) { flex: 1 1 100%; }
.columna-parada .accion-menu > summary { min-height: 30px; font-size: 0.9rem; padding: 0 10px; }
.obra-tarjeta > .cabecera-bloque { align-items: center; }
.obra-tarjeta > .cabecera-bloque > .botones-parada { margin: 0; flex: 0 0 auto; }
.obra-tarjeta > .cabecera-bloque > .botones-parada:has(details[open]) { flex: 1 1 100%; }
.obra-tarjeta > .cabecera-bloque .accion-menu > summary { min-height: 32px; font-size: 0.9rem; padding: 0 10px; }
.pie-parada { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.pie-parada form { margin: 0; }
.pie-parada .boton { min-height: 32px; }
.chip.vehiculo .linea2 { flex: 0 1 auto; padding-left: 0; }
.chip.vehiculo { column-gap: 8px; }
.columna-parada > .tarjetas.chips { flex-direction: row; flex-wrap: wrap; }
.columna-parada > .tarjetas.chips > li { flex: 0 1 auto; max-width: 100%; }
.columna-parada > .tarjetas.chips { flex-direction: column; flex-wrap: nowrap; }
.columna-parada > .tarjetas.chips > li { flex: 0 0 auto; width: 100%; }

/* ---------- Formularios en cuadro: campo obligatorio y destino ---------- */
.obligatorio { color: var(--peligro); font-weight: 700; }
.campo-leyenda { font-weight: 700; padding: 0; margin-bottom: 6px; }
.modal-cuerpo select, .modal-cuerpo input[type="text"] { width: 100%; }
.modal-cuerpo .campos-proveedor { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Itinerario de la parada: puntos unidos por una línea ---------- */
.itinerario-parada h3 { font-size: 0.95rem; margin: 10px 0 6px; }
.ruta { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; }
.punto { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 4px 0 8px 22px; }
.punto::before { content: ""; position: absolute; left: 4px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--principal); box-shadow: 0 0 0 3px var(--principal-suave); z-index: 1; }
.punto::after { content: ""; position: absolute; left: 8px; top: 19px; bottom: -9px; width: 2px; background: var(--borde-fuerte); }
.punto:last-child::after { display: none; }
.punto-nombre { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.punto-nombre strong { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.marca { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.marca .icono { width: 12px; height: 12px; }
.marca-p { background: var(--proveedor); color: var(--sobre-principal); font-weight: 800; font-size: 0.78rem; line-height: 1; border-radius: 5px; }
.marca-obra { background: var(--c, var(--oscuro)); color: var(--sobre-principal); }
.marca-sitio { background: var(--principal-suave); color: var(--oscuro); box-shadow: inset 0 0 0 1px var(--borde-fuerte); }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.marca-texto { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; height: 1.35em; padding: 0 0.25em; margin-right: 4px; border-radius: 5px; background: var(--proveedor); color: var(--sobre-principal); font-weight: 800; font-size: 0.78em; line-height: 1; }
.punto-texto { display: flex; flex-direction: column; min-width: 0; font-size: 0.95rem; }
.punto-texto small { color: var(--texto-2); font-size: 0.85rem; }
.punto-nota { color: var(--texto-2); font-size: 0.9rem; }
.punto-nota::before { content: "📝"; font-size: 0.85em; margin-inline-end: 0.3em; }
.punto-acciones { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.punto-acciones form { margin: 0; }
.punto-acciones .boton { min-height: 32px; padding: 0 8px; }
.punto[draggable="true"] { cursor: grab; }
.punto.arrastrando { opacity: 0.5; }
.punto.arrastre-sobre { box-shadow: inset 0 3px 0 var(--principal); }
.campos-punto { display: flex; flex-direction: column; gap: 12px; }
.formulario-parada:has(input[value="obra"]:checked) .campo-proveedor,
.formulario-parada:has(input[value="obra"]:checked) .campo-texto,
.formulario-parada:has(input[value="proveedor"]:checked) .campo-texto,
.formulario-parada:has(input[value="texto"]:checked) .campo-proveedor { display: none; }
.columna-parada > a.boton { flex: 0 0 auto; margin: 6px 0 0; min-height: 30px; font-size: 0.9rem; padding: 0 10px; display: inline-flex; align-items: center; }

/* ---------- Carpeta del día ---------- */
.carpeta-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.enlace-carpeta { font-weight: 700; }
.grupo-ficheros { border: 1px solid var(--borde); border-radius: var(--r-pequeno); margin: 0 0 12px; padding: 8px 12px; }
.grupo-ficheros legend { font-weight: 700; padding: 0 6px; color: var(--oscuro); }
.opcion-fichero { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.opcion-fichero input { width: 20px; height: 20px; flex: none; }
.opcion-fichero small { color: var(--texto-2); margin-left: auto; }

/* ---------- Archivos de un punto del itinerario ---------- */
.punto-archivo { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; }
.punto-archivo a { overflow-wrap: anywhere; }
.punto-archivo form, .en-linea-form { display: inline; margin: 0; }
.punto-archivo .boton { min-height: 24px; padding: 0 6px; }
.punto-anadir-archivo { font-size: 0.85rem; color: var(--principal-texto); }

/* ---------- Ficha de obra: carpeta en una fila y espacio entre Tipo y Nombre ---------- */
.cabecera-datos { flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.fila-carpeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; margin-left: auto; }
@media (max-width: 640px) { .fila-carpeta { margin-left: 0; justify-content: flex-start; flex-basis: 100%; } }
.fila-carpeta form { margin: 0; }
/* Color en el tablero: línea compacta bajo la carpeta (muestras que guardan al pulsar y personalizado). */
.fila-color { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; flex-basis: 100%; }
@media (max-width: 640px) { .fila-color { justify-content: flex-start; } }
.fila-color form { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.muestra-boton { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--superficie); outline: 1px solid var(--borde-fuerte); background: var(--c); cursor: pointer; }
.muestra-boton[aria-pressed="true"] { outline: 2px solid var(--texto); }
.muestra-boton[role="img"] { display: inline-block; cursor: default; }
.muestra-boton.elegida { outline: 2px solid var(--texto); }
/* «+» para un color personalizado: círculo como las muestras; el selector de color va encima, invisible. */
.muestra-mas { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--superficie); color: var(--texto-2); font-weight: 700; line-height: 1; border-style: dashed; outline-style: dashed; }
.muestra-mas:hover, .muestra-mas:focus-within { color: var(--principal); outline-color: var(--principal); }
.muestra-mas input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.fila-color .boton-mini { width: 24px; height: 24px; font-size: 0.75rem; }
.fila-color .boton-mini .emoji { margin: 0; }
.con-js .solo-sin-js { display: none; }
.fila-carpeta-nombre small { color: var(--texto-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.fila-carpeta-error { display: inline-flex; align-items: center; gap: 6px; color: var(--peligro); font-size: 0.95rem; }
.fila-carpeta-error .icono { width: 18px; height: 18px; }
[data-obra-campos] > .grupo-casillas { margin-bottom: 18px; }


/* Avisos: lista de pendientes y contador del menú */
.lista-avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aviso-fila { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-medio); border: 1px solid var(--borde); background: var(--superficie); border-left: 6px solid var(--aviso); }
.aviso-fila.aviso-peligro { border-left-color: var(--peligro); }
.aviso-fila.aviso-peligro .alerta-icono { background: var(--peligro-fondo); color: var(--peligro); }
.aviso-fila.aviso-visto { opacity: 0.65; border-left-color: var(--borde-fuerte); }
.aviso-fila .alerta-icono { background: var(--aviso-fondo); color: var(--aviso); display: inline-flex; width: 38px; height: 38px; border-radius: 10px; align-items: center; justify-content: center; flex: none; }
.aviso-fila form { margin: 0; flex: none; }
.aviso-fila .alerta-texto { flex: 1; min-width: 0; }
/* En el móvil, «Marcar como visto» baja a su propia línea y el texto usa todo el ancho. */
@media (max-width: 640px) {
  .aviso-fila { flex-wrap: wrap; align-items: flex-start; }
  .aviso-fila .alerta-texto { flex-basis: calc(100% - 50px); }
  .aviso-fila form { margin-left: 50px; }
}
.contador-menu { margin-left: auto; min-width: 1.4em; padding: 0 0.4em; border-radius: 999px; background: var(--aviso); color: var(--sobre-principal); font-size: 0.8rem; font-weight: 700; text-align: center; line-height: 1.5; }
.contador-menu.contador-peligro { background: var(--peligro); }

/* Botón de carpeta de OneDrive: tono propio (azul pizarra), distinto de las acciones, del naranja de proveedor y de los colores de obra */
.boton.carpeta { background: var(--carpeta-suave); border-color: var(--carpeta); color: var(--carpeta); gap: 6px; }
.boton.carpeta:hover { background: var(--carpeta); color: var(--sobre-principal); }
.boton.carpeta .icono { width: 16px; height: 16px; flex: none; }
.boton.carpeta .icono:last-child { width: 13px; height: 13px; opacity: 0.75; }
.fila-carpeta-nombre { display: inline-flex; align-items: center; gap: 6px; color: var(--carpeta); }
.fila-carpeta-nombre .icono { width: 18px; height: 18px; flex: none; }
.enlace-carpeta { display: inline-flex; align-items: center; gap: 4px; }
.enlace-carpeta .icono { width: 15px; height: 15px; }
.carpeta-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* Mensajes del día */
.selector-mensajes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; }
/* Vista previa: nombre a la izquierda (hasta dos líneas) y el icono de enviar SIEMPRE a la derecha, en la misma línea. */
.nombre-mensaje { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.nombre-mensaje h2 { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nombre-mensaje form { flex: none; margin: 0; width: auto; }
.nombre-mensaje > .enviar-icono { flex: none; margin: 0; }
.enviar-icono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: var(--ok); color: var(--sobre-principal); cursor: pointer; }
.enviar-icono:hover { background: var(--ok); filter: brightness(0.85); }
.enviar-icono:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.enviar-icono .icono { width: 16px; height: 16px; margin-left: -1px; }
/* Atenuado: gris medio con el avión blanco; sigue pareciendo un botón y al pulsarlo dice por qué. */
.enviar-icono.atenuado { background: var(--texto-2); color: var(--sobre-principal); opacity: 1; cursor: help; }
.enviar-icono.atenuado:hover { filter: none; }
/* «Copiar» y «Abrir en WhatsApp», compactos y en la línea de «N paradas». */
.mensaje .cabecera-bloque { align-items: center; margin-top: 2px; }
.mensaje .cabecera-bloque .ayuda { margin: 0; }
.mensaje .botones .boton { min-height: 28px; padding: 0 10px; font-size: 13px; }
/* Verde de la plataforma (y no el de la marca WhatsApp): con texto blanco se lee mejor. */
.boton.secundario.boton-whatsapp:hover, .boton.secundario.boton-whatsapp:focus-visible { background: var(--ok); border-color: var(--ok); color: var(--sobre-principal); }
.lista-mensajes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); margin-bottom: 18px; }
.texto-mensaje { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.45; padding: 10px 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background: var(--fondo); color: var(--texto); resize: vertical; }

/* Importar vacaciones: tabla ancha que se desplaza; campos de persona nueva compactos. */
.tabla-importar { overflow-x: auto; }
.tabla-importar td { vertical-align: top; white-space: normal; }
.tabla-importar td:nth-child(4) { min-width: 136px; max-width: 220px; }
.tabla-importar .nueva-persona.apagada > * { visibility: hidden; }
.tabla-importar .nueva-persona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4px; min-width: 256px; }
.tabla-importar td:last-child .boton { white-space: nowrap; }
.tabla-importar .nueva-persona input, .tabla-importar .nueva-persona select, .tabla-importar select { height: 32px; margin-top: 0; font-size: 0.9rem; }
.tabla-importar .etiqueta { display: inline-block; margin: 0 4px 4px 0; }

/* Selector con el disquete al lado (cuadro «Nueva categoría» al volver a habilitar). */
.con-guardar select, .formulario .con-guardar select { margin-top: 0; flex: 1 1 auto; min-width: 0; }

/* Valor del trabajador: desplegable corto. */
.campo-valor select { width: auto; min-width: 140px; }

@media (max-width: 640px) { .tabla-importar select { width: 100%; } }

/* Ajustes → Mensajes de WhatsApp: tarjetas plegables de colores (tono por data-tono). */
.tarjetas-ws { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--espacio-seccion); }
.tarjeta-ws { --m: var(--texto-2); --m-suave: var(--fondo); border: 1px solid var(--borde); border-left: 6px solid var(--m); border-radius: var(--r-medio); background: var(--superficie); }
.tarjeta-ws[data-tono="verde"] { --m: var(--tono-verde); --m-suave: var(--tono-verde-suave); }
.tarjeta-ws[data-tono="rojo"] { --m: var(--tono-rojo); --m-suave: var(--tono-rojo-suave); }
.tarjeta-ws[data-tono="azul"] { --m: var(--tono-azul); --m-suave: var(--tono-azul-suave); }
.tarjeta-ws[data-tono="turquesa"] { --m: var(--tono-turquesa); --m-suave: var(--tono-turquesa-suave); }
.tarjeta-ws[data-tono="violeta"] { --m: var(--tono-violeta); --m-suave: var(--tono-violeta-suave); }
.tarjeta-ws[data-tono="pizarra"] { --m: var(--tono-pizarra); --m-suave: var(--tono-pizarra-suave); }
.tarjeta-ws > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--m-suave); border-radius: var(--r-medio); cursor: pointer; list-style: none; user-select: none; }
.tarjeta-ws[open] > summary { border-radius: var(--r-medio) var(--r-medio) 0 0; }
.tarjeta-ws > summary::-webkit-details-marker { display: none; }
.tarjeta-ws > summary::marker { content: ''; }
.tarjeta-ws > summary .icono { flex: none; width: 18px; height: 18px; color: var(--m); transition: transform 0.18s; }
.tarjeta-ws[open] > summary .icono { transform: rotate(90deg); }
.tarjeta-ws > summary > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarjeta-ws > summary > .chips-ws { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-left: auto; justify-content: flex-end; }
.chips-ws .etiqueta { background: var(--superficie); border: 1px solid currentColor; }
.tarjeta-ws .titulo-ws { font-family: var(--titulos); font-size: 1.15rem; color: var(--m); }
.tarjeta-ws > summary small { color: var(--texto-2); font-size: 0.9rem; }
.cuerpo-ws { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.cuerpo-ws > p, .cuerpo-ws .formulario { margin: 0; }
.estado-ws { margin: 0; padding: 8px 12px; border-radius: var(--r-pequeno); }
.estado-ws.conectado { background: var(--tono-verde-suave); color: var(--tono-verde); }
.estado-ws.desconectado { background: var(--tono-rojo-suave); color: var(--tono-rojo); }
.fila-ws { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sub-ws { margin: 8px 0 0; font-size: 1rem; font-weight: 700; }
.estado-interruptor.grande { font-size: 1rem; }
.atenuado { opacity: 0.6; }
.avanzadas-ws > summary { cursor: pointer; font-weight: 700; color: var(--texto-2); min-height: 32px; display: flex; align-items: center; }
.avanzadas-ws > summary::before { content: '▸'; margin-right: 6px; }
.avanzadas-ws[open] > summary::before { content: '▾'; }

/* ---------- Desplegables y fechas: UNA regla para todos (al final, para ganar a las locales) ---------- */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--flecha-select);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  padding-right: 38px;
  text-overflow: ellipsis;
  cursor: pointer;
}
select:not([multiple]):not([size]):hover:not(:disabled), select:not([multiple]):not([size]):focus { background-image: var(--flecha-select-activa); }
select:not([multiple]):not([size]):disabled { background-image: var(--flecha-select-apagada); cursor: not-allowed; }
select::-ms-expand { display: none; }
input[type="date"] { padding-right: 12px; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 8px; margin-right: 0; cursor: pointer; opacity: 0.7; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Avisos: 12 px entre tarjetas y 16 px entre bloques */
.bloque-avisos { margin: 0 0 16px; }
.bloque-avisos > .rotulo-grupo { margin: 0 0 8px; }
.bloque-avisos > .ayuda { margin: 0 0 8px; }
.alertas { display: flex; flex-direction: column; gap: 12px; }
.panel-alertas { gap: 12px; }

/* ---------- Casillas: siempre en una fila, casilla y texto alineados (8 px) ---------- */
label.casilla, .formulario > label.casilla, .campo label.casilla, label.opcion-fichero {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--texto);
}
label.casilla input[type="checkbox"], label.opcion-fichero input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; }
label.casilla > span, label.opcion-fichero > span { min-width: 0; }
.campo > label.casilla + label.casilla, .formulario > label.casilla { margin-top: 8px; }
label.opcion-fichero { padding: 4px 0; }
label.opcion-fichero small { color: var(--texto-2); }

/* Iconos de módulo: un tono por módulo */
.modulo-tarjeta .modulo-icono { background: var(--m-suave, var(--principal-suave)); color: var(--m, var(--oscuro)); }
.modulo-tarjeta[data-tono="violeta"] { --m: var(--tono-violeta); --m-suave: var(--tono-violeta-suave); }
.modulo-tarjeta[data-tono="turquesa"] { --m: var(--tono-turquesa); --m-suave: var(--tono-turquesa-suave); }
.modulo-tarjeta[data-tono="teja"] { --m: var(--tono-teja); --m-suave: var(--tono-teja-suave); }
.modulo-tarjeta[data-tono="azul"] { --m: var(--tono-azul); --m-suave: var(--tono-azul-suave); }
.modulo-tarjeta[data-tono="calido"] { --m: var(--tono-calido); --m-suave: var(--tono-calido-suave); }
.modulo-tarjeta[data-tono="naranja"] { --m: var(--tono-naranja); --m-suave: var(--tono-naranja-suave); }
.modulo-tarjeta[data-tono="ambar"] { --m: var(--tono-ambar); --m-suave: var(--tono-ambar-suave); }
.modulo-tarjeta[data-tono="rojo"] { --m: var(--tono-rojo); --m-suave: var(--tono-rojo-suave); }
.modulo-tarjeta[data-tono="verde"] { --m: var(--tono-verde); --m-suave: var(--tono-verde-suave); }
.modulo-tarjeta[data-tono="pizarra"] { --m: var(--tono-pizarra); --m-suave: var(--tono-pizarra-suave); }
.modulo-tarjeta:hover { border-color: var(--m, var(--principal)); }
.modulo-estado { flex: none; max-width: 40%; text-align: right; font-size: 0.85rem; font-weight: 700; color: var(--texto-2); }
.modulo-estado.aviso { color: var(--aviso); }
.modulo-estado.peligro { color: var(--peligro); }
.modulo-estado.ok { color: var(--ok); }
.panel-modulos .modulo-grande { grid-column: 1 / -1; min-height: 104px; }
.panel-modulos .modulo-grande .modulo-icono { width: 58px; height: 58px; }
.panel-modulos .modulo-grande .modulo-icono .icono { width: 30px; height: 30px; }

/* Móvil (navegador o app instalada): botón «Volver» arriba a la izquierda, de 44 px */
.volver-app { display: none; }
@media (max-width: 800px) {
  .volver-app { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 0 16px 0 12px; margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--principal-texto); background: var(--principal-suave); border-radius: var(--r-pequeno); text-decoration: none; }
  .volver-app:active { background: var(--borde); }
}
/* App instalada: no hay barra del navegador, se respeta la muesca */
@media (display-mode: standalone) and (max-width: 800px) {
  body { padding-top: env(safe-area-inset-top, 0px); }
}
}

/* Simulador del agente */
.chat-simulador { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chat-simulador li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--r-medio); max-width: 85%; }
.chat-operario { align-self: flex-end; background: var(--persona-asignada-fondo); color: var(--persona-asignada-texto); }
.chat-agente { align-self: flex-start; background: var(--superficie-2, var(--fondo)); border: 1px solid var(--borde); }
.chat-quien { font-size: 0.75rem; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.04em; }
.chat-texto { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Casilla debajo de un desplegable o campo: 12 px de aire */
.campo > label.casilla:not(:first-child) { margin-top: 12px; }

/* ---------- Tablero (16/10/2026): banda de libres fija y tarjeta compacta ---------- */
.tablero { display: block; }
.banda-libres { position: relative; z-index: 25; margin: 0 0 18px; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r-medio); box-shadow: var(--sombra); padding: 2px 14px 8px; }
@media (min-width: 801px) { .banda-libres { position: sticky; top: 0; } }
/* Sombra solo cuando la página se ha desplazado y la banda va pegada arriba (escritorio). */
@media (min-width: 801px) {
  .banda-libres.pegada { box-shadow: var(--sombra-banda); }
}
.banda-libres.zona-activa { border-color: var(--principal); background: var(--principal-suave); }
.banda-libres.zona-activa::after { content: attr(data-destino); position: absolute; right: 14px; top: 8px; font-weight: 700; color: var(--principal-texto); }
.libres-banda > summary { cursor: pointer; list-style: none; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.libres-banda > summary::-webkit-details-marker { display: none; }
.libres-banda .plegar-pista::after { content: 'Plegar ▲'; font-size: 0.85rem; font-weight: 700; color: var(--principal-texto); }
.libres-banda:not([open]) .plegar-pista::after { content: 'Desplegar ▼'; }
.libres-banda .titulo-libres { font-size: 1.05rem; }
.fila-libres { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.fila-libres + .fila-libres { border-top: 1px solid var(--borde); }
.fila-libres .rotulo { flex: none; width: 112px; padding-top: 8px; font-weight: 700; font-size: 0.9rem; color: var(--texto-2); }
.fila-libres .tarjetas.chips { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.fila-libres .tarjetas.chips > li { flex: 0 1 auto; width: auto; max-width: 100%; }
.banda-libres .chip { min-height: 34px; padding: 2px 12px; font-size: 0.95rem; }
.banda-filtro { height: 36px; margin: 4px 0 2px; width: min(260px, 100%); padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background: var(--superficie); font: inherit; }
@media (max-width: 800px) {
  .fila-libres { flex-direction: column; gap: 2px; }
  .fila-libres .rotulo { width: auto; padding-top: 0; }
}
/* Chips que abren un formulario: ventana flotante bajo el chip, para no deformar las filas */
.fila-libres .chip-detalle, .fila-equipo .chip-detalle { position: relative; flex: 0 1 auto; }
.fila-libres .chip-detalle[open] > form, .fila-libres .chip-detalle[open] > .chip-acciones,
.fila-equipo .chip-detalle[open] > form, .fila-equipo .chip-detalle[open] > .chip-acciones {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 280px; margin: 0; padding: 10px;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r-medio); box-shadow: var(--sombra-modal);
}
.fila-libres .chip-detalle[open] > form + .chip-acciones, .fila-equipo .chip-detalle[open] > form + .chip-acciones { top: auto; position: static; box-shadow: none; border: 0; padding: 6px 0 0; }
.equipo-parada { margin: 8px 0 2px; }
.fila-equipo { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fila-equipo > li { flex: 0 1 auto; width: auto; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.fila-equipo .chip { min-height: 32px; padding: 2px 10px; font-size: 0.92rem; width: auto; max-width: 100%; }
.fila-equipo .chip.vehiculo { width: auto; }
.fila-equipo .chip-notas { font-size: 0.8rem; }
.boton-mas { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--borde-fuerte); background: var(--superficie); color: var(--principal-texto); font-weight: 700; font-size: 1.2rem; line-height: 1; text-decoration: none; }
.boton-mas:hover { border-color: var(--principal); background: var(--principal-suave); }
.sin-equipo { font-size: 0.9rem; }
.pie-parada .boton { white-space: nowrap; }
.fila-equipo > li { flex-wrap: nowrap; }
.fila-equipo .chip-notas { white-space: nowrap; }

/* Cabecera de la tarjeta de obra: «+ Añadir parada» pequeño y la ✕ roja de quitarla del día al lado. */
.obra-tarjeta .botones-parada { align-items: center; }
.obra-tarjeta .botones-parada .boton.pequeno { min-height: 30px; font-size: 0.85rem; padding: 0 10px; }
.obra-tarjeta .botones-parada form { display: inline-flex; }
.aviso-no-visible { color: var(--aviso); }
.nota-archivos { display: flex; flex-direction: column; gap: 6px; }
.nota-archivos-lista { max-height: 40vh; overflow-y: auto; border: 1px solid var(--borde); border-radius: var(--r-pequeno); padding: 6px 8px; }

.nota-archivos [data-cargar-archivos][hidden] { display: none; }
/* Guardar en línea (junto a un campo), elegido por Andrea: cuadrado de la altura del campo,
   radio 8 px, disquete de 18 px. En reposo (sin cambios): blanco con borde y disquete azul.
   Con cambios pendientes: fondo oscuro y disquete blanco. Sin JavaScript va siempre «con cambios». */
.boton-icono.boton-guardar { border: 1.5px solid var(--principal); border-radius: 8px; background: var(--superficie); color: var(--principal); }
.boton-icono.boton-guardar:hover { background: var(--principal-suave); color: var(--principal); }
.boton-icono.boton-guardar.con-cambios, .boton-icono.boton-guardar.con-cambios:hover { border-color: var(--oscuro); background: var(--oscuro); color: var(--superficie); }
.boton-icono.boton-guardar:disabled { border-color: var(--borde-fuerte); background: var(--superficie-2); color: var(--texto-3); cursor: not-allowed; }
.boton-guardar .icono { width: 18px; height: 18px; }
.con-guardar { display: flex; align-items: stretch; gap: 6px; margin-top: 6px; }
.con-guardar input, .formulario .con-guardar input[type="text"] { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.con-guardar .boton-guardar { width: 46px; height: 46px; flex: none; }
.cat-nombre-celda .cat-nombre .boton-guardar { width: 30px; height: 30px; flex: none; }
.fila-color .boton-guardar { width: 26px; height: 26px; }
.fila-color .boton-guardar .icono { width: 16px; height: 16px; }

/* Un botón con el atributo hidden no se ve (las clases .boton fijan display y lo anulaban). */
.boton[hidden], .boton-icono[hidden] { display: none; }
/* Cuadro «Nueva categoría»: mismo aire entre sus piezas (selector, nombre, interruptor). */
.cat-nueva-campos { display: flex; flex-direction: column; gap: 14px; }
.cat-nueva-campos .sugerencias:empty, .cat-nueva-campos [hidden] { display: none; }
/* La edición del nombre no se pega a los interruptores de la columna siguiente. */
.cat-nombre-celda { padding-right: 10px; }
.tabla-importar td.num { white-space: nowrap; }

/* ---------- Calendario de ausencias ---------- */
.barra-ausencias { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.selector-mes { display: flex; align-items: center; gap: 8px; }
.titulo-mes { min-width: 150px; text-align: center; font-family: var(--titulos); font-size: 1.05rem; }
.leyenda-ausencias { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--texto-2); }
.leyenda-ausencias li { display: inline-flex; align-items: center; gap: 5px; }
.muestra-ausencia { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; border: 1px solid var(--borde-fuerte); }
.ayuda-ausencias { margin: 0 0 8px; }
.tabla-ausencias-caja { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid var(--borde-fuerte); border-radius: var(--r-pequeno); background: var(--superficie); }
/* Llena el ancho: la columna de la persona es fija y los días se reparten lo que queda (nunca menos de 26px). */
.tabla-ausencias { --ancho-persona: 170px; width: 100%; min-width: calc(var(--ancho-persona) + 46px + 31 * 26px); table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
.tabla-ausencias th, .tabla-ausencias td { height: 28px; padding: 0; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: var(--superficie); }
.tabla-ausencias thead th { position: sticky; top: 0; z-index: 2; min-width: 26px; height: 34px; background: var(--superficie-2); font-weight: 400; color: var(--texto-2); text-align: center; vertical-align: middle; }
.tabla-ausencias .inicial-dia { display: block; font-size: 0.65rem; line-height: 1; }
.tabla-ausencias .numero-dia { display: block; font-weight: 700; color: var(--texto); line-height: 1.2; }
.tabla-ausencias .col-persona { position: sticky; left: 0; z-index: 1; width: var(--ancho-persona); padding: 0 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.tabla-ausencias thead .col-persona { z-index: 3; font-weight: 700; color: var(--texto); }
.tabla-ausencias .col-persona a { color: var(--texto); text-decoration: none; }
.tabla-ausencias .col-persona a:hover { text-decoration: underline; }
.tabla-ausencias .finde, .muestra-ausencia.finde { background: var(--superficie-2); }
.tabla-ausencias .no-laborable, .muestra-ausencia.no-laborable { background: repeating-linear-gradient(135deg, var(--superficie-2) 0 5px, var(--borde) 5px 6px); }
.tabla-ausencias thead th.hoy { box-shadow: inset 0 -3px 0 var(--principal); }
.tabla-ausencias .hueco, .tabla-ausencias .tramo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 27px; text-decoration: none; }
.tabla-ausencias .hueco:hover, .tabla-ausencias .hueco.marcado, .tabla-ausencias .hueco.en-rango { background: var(--principal-suave); }
.tabla-ausencias .hueco.marcado { box-shadow: inset 0 0 0 2px var(--principal); }
/* Colores sólidos con la letra en blanco (contraste suficiente): se distinguen de un vistazo. */
.tramo, .muestra-ausencia { color: var(--texto); font-weight: 700; }
.tramo.tipo-vacaciones, .tramo.tipo-baja, .tramo.tipo-libre, .muestra-ausencia.tipo-vacaciones, .muestra-ausencia.tipo-baja, .muestra-ausencia.tipo-libre { color: var(--superficie); border-color: transparent; }
.tipo-vacaciones { background: var(--principal-texto); }
.tipo-baja { background: var(--peligro); }
.tipo-libre { background: var(--ok); }
.tabla-ausencias .tramo.inicio { border-top-left-radius: 6px; border-bottom-left-radius: 6px; margin-left: 2px; width: calc(100% - 2px); }
.tabla-ausencias .tramo.fin { border-top-right-radius: 6px; border-bottom-right-radius: 6px; margin-right: 2px; width: calc(100% - 2px); }
.tabla-ausencias .tramo.inicio.fin { width: calc(100% - 4px); }
@media (max-width: 640px) {
  .tabla-ausencias { --ancho-persona: 120px; }
  .barra-ausencias { flex-direction: column; align-items: flex-start; }
}
/* Quitar una ausencia: la confirmación se despliega dentro del cuadro. */
.quitar-ausencia > summary { list-style: none; display: inline-flex; cursor: pointer; }
.quitar-ausencia > summary::-webkit-details-marker { display: none; }
.quitar-ausencia[open] > summary { display: none; }
.confirmar-quitar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; color: var(--peligro); font-weight: 700; }
/* Importar vacaciones: fila ya cargada, tenue y sin controles. */
.tabla-importar tr.fila-cargada td { background: var(--superficie-2); color: var(--texto-2); }
.tabla-importar tr.fila-cargada .nueva-persona { display: table-cell; min-width: 0; } /* vacía: sin la rejilla de los campos */
.tabla-importar .mensaje-error.en-fila { margin: 6px 0 0; padding: 6px 8px; font-size: 0.85rem; }
/* Valor del trabajador: desplegable corto y la sugerencia de la categoría al lado. */
.campo-valor .valor-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Instrucciones: «Para quién», casillas en línea y compactas. */
.para-instrucciones { border: 0; margin: 4px 0 0; padding: 0; }
.para-instrucciones legend { font-weight: 700; margin-bottom: 2px; padding: 0; }
.para-instrucciones .para-titulo { margin: 8px 0 2px; color: var(--texto-2); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.para-instrucciones .para-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.para-instrucciones .para-solo-yo { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--borde); }
.para-instrucciones .casilla { margin: 0; font-size: 0.95rem; }
.para-instrucciones .casilla.fija { color: var(--texto-2); }
/* Chip de persona: ✓ si ya recibió su mensaje de WhatsApp. */
.chip .recibido { color: var(--ok); font-weight: 700; font-size: 0.85em; margin-left: 2px; }
/* Vista previa de mensajes: «Enviar ahora» a la derecha del selector de día. */
.selector-mensajes .enviar-ahora { margin: 0 0 0 auto; }
.campo[data-solo-obra][hidden] { display: none; }
.campo-posponer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.campo-posponer .ayuda-campo { margin: 0; }
/* Tarjeta: operarios y valor necesarios del día («3/5 operarios · valor 18/27»). */
.necesarios { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 0.9rem; color: var(--texto-2); }
.necesarios.corto { color: var(--texto); font-weight: 700; }
/* Ausencias: filas en dos tonos (los fines de semana y festivos conservan su sombreado). */
.tabla-ausencias tbody tr:nth-child(even) > th,
.tabla-ausencias tbody tr:nth-child(even) > td:not(.finde):not(.no-laborable) { background: var(--fila-alterna); }
/* Objetivo del día, debajo de las instrucciones. */
.objetivo-parada { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 0.95rem; }
/* Logo de la plataforma (el nombre «GEODA madriCRISTAL» va en el título y en el texto alternativo). */
.nombre-plataforma { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }


.lateral .logo.nombre-plataforma { display: flex; }
/* Instrucciones: aviso de un jefe marcado que no va a esa obra ese día. */
.aviso-jefe-fuera { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--aviso); font-weight: 700; }
/* Importar vacaciones: leyenda de tipos y saldo pasado («1 de más»). */
.leyenda-importar { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.9rem; color: var(--texto-2); margin: 6px 0 0; padding: 0; }
.leyenda-importar li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-importar .etiqueta { margin: 0; }
.tabla-importar .de-mas { color: var(--peligro); }
/* Ajustes agrupados: un título pequeño por grupo. */
.grupo-ajustes + .grupo-ajustes { margin-top: 18px; }
.titulo-grupo { margin: 0 0 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-2); font-family: var(--cuerpo); font-weight: 700; }
/* Contraseña con ojo para enseñarla. */
.con-ojo { position: relative; margin-top: 6px; }
.campo .con-ojo input { margin-top: 0; padding-right: 46px; }
.ver-contrasena { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-pequeno); background: transparent; color: var(--texto-2); cursor: pointer; }
.ver-contrasena:hover, .ver-contrasena:focus-visible { color: var(--principal); background: var(--principal-suave); }
.ver-contrasena[hidden] { display: none; }
@media (max-width: 640px) {
  /* Importar vacaciones en el móvil: sin el hueco de «Si es nueva» en quien ya tiene ficha. */
  .tabla-importar .nueva-persona.apagada { display: none; }
  /* Cada persona es una tarjeta: sin las anchuras mínimas del ordenador y con saltos de línea. */
  .tabla-importar table { width: 100%; }
  .tabla-importar td, .tabla-importar td:nth-child(4), .tabla-importar .nueva-persona { min-width: 0; max-width: none; }
  .tabla-importar td.num { white-space: normal; }
  .tabla-importar input { width: 100%; }
}

/* Importar vacaciones: la cabecera del saldo se parte en líneas (si no, empuja la tabla). */
.tabla-importar th.num { white-space: normal; max-width: 92px; line-height: 1.25; }
.tabla-importar th:last-child, .tabla-importar td:last-child { padding-right: 6px; padding-left: 4px; }
/* Al final de «Datos» del operario: dejar la empresa, discreto. */
.accion-discreta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; margin: 12px 0 0; }
.accion-discreta form { margin: 0; }
/* Saldo de vacaciones en la ficha y en Ausencias. */
.saldo-vacaciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; font-size: 0.95rem; }
.saldo-vacaciones .de-mas, .tabla-ausencias .de-mas { color: var(--peligro); }
/* Ausencias: columna compacta con los días de vacaciones que le quedan. */
.tabla-ausencias .col-quedan { width: 46px; text-align: center; font-weight: 700; font-size: 0.8rem; }
.tabla-ausencias thead .col-quedan { font-weight: 400; font-size: 0.7rem; color: var(--texto-2); }
.cabecera-saldo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; }
.cabecera-saldo .saldo-vacaciones { margin: 0; }