/* =====================================================================
   Ncalma Group - hoja de estilo unica, sin dependencias ni compilacion.

   El lenguaje visual es el de NCalma Hotels (ncalmahotels.web.app): fondo
   casi negro, superficies translucidas con desenfoque, titulos en mayusculas
   con degradado de texto y el mismo semaforo de color. Se replican sus
   valores exactos para que las dos aplicaciones parezcan lo que son: dos
   modulos del mismo grupo.

   Tema oscuro unico, como el original. No hay variante clara.
   ===================================================================== */

:root {
  color-scheme: light;

  /* Fondo arena y superficies blancas: el aire de una aplicación de trabajo */
  --fondo: #f6f3ee;
  --fondo-suave: #efeae2;
  --superficie: #ffffff;
  --superficie-alta: #ffffff;

  /* Bordes cálidos, visibles pero sin pesar */
  --borde: #ebe5dc;
  --borde-medio: #ddd5c9;
  --borde-fuerte: #c9bfb1;

  /* Texto: tinta cálida, de más a menos presencia */
  --texto: #2b2621;
  --texto-2: #4a433b;
  --texto-3: #6b6258;
  --texto-4: #8a8075;
  --texto-5: #a39a8f;

  /* Acento terracota (decisión de Alberto, 04/10/2026). Se llama --dorado por
     historia: es el color de lo activo y lo seleccionado en toda la app. */
  --dorado: #c0643d;
  --acento: #c0643d;
  --acento-hover: #a8532f;
  --acento-suave: #f7e9e1;

  /* El semáforo, en tonos que se leen sobre blanco */
  --verde: #2e844a;
  --amarillo: #b7791f;
  --rojo: #c23934;
  --naranja: #d9772b;
  --indigo: #5867e8;
  --rojo-texto: #b4382c;
  --ambar-texto: #9a5b13;
  --verde-texto: #2e7d46;

  --sombra: 0 1px 2px rgba(43, 38, 33, 0.06), 0 4px 14px rgba(43, 38, 33, 0.05);
  --sombra-alta: 0 4px 10px rgba(43, 38, 33, 0.08), 0 12px 32px rgba(43, 38, 33, 0.08);

  --radio: 12px;
  --radio-s: 8px;
  --radio-l: 16px;
  --transicion: all 0.2s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Una regla de `display` propia gana al `[hidden]` del navegador. Sin esto,
   ocultar .acceso no hace nada y el formulario se queda sobre la aplicacion. */
[hidden] {
  display: none !important;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Titulo con degradado recortado al texto: la firma visual de NCalma */
.titulo-marca {
  font-weight: 650;
  letter-spacing: -0.2px;
  color: var(--texto);
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==================== ACCESO ==================== */
.acceso {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo);
  z-index: 9999;
}

.tarjeta-acceso {
  width: 90%;
  max-width: 450px;
  padding: 60px;
  text-align: center;
  background: var(--superficie-alta);
  border: 1px solid var(--borde-medio);
  border-radius: var(--radio-l);
  backdrop-filter: blur(20px);
}

.tarjeta-acceso h1 {
  margin-bottom: 10px;
  font-size: 1.8em;
}

.tarjeta-acceso .sub {
  margin-bottom: 40px;
  color: var(--texto-4);
  font-size: 0.9em;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Boton de Google: identico al de NCalma Hotels */
.boton-google {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding: 14px 32px;
  background: #fff;
  color: #333;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transicion);
}

.boton-google:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(60, 45, 30, 0.15);
}

.boton-google:disabled {
  opacity: 0.5;
  cursor: progress;
}

.boton-google svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Otras formas de entrar (11/10/2026): Microsoft, Apple y correo con contraseña */
.metodos-acceso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.metodos-acceso .boton-google {
  justify-content: center;
  border: 1px solid var(--borde-medio);
}
.separador-acceso {
  margin: 22px 0 14px;
  color: var(--texto-3);
  font-size: 0.8em;
}
.form-acceso,
.verifica-acceso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.form-acceso input {
  padding: 12px 14px;
  border: 1px solid var(--borde-medio);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: #333;
}
.form-acceso .enlace,
.verifica-acceso .enlace {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--texto-3);
  font: inherit;
  font-size: 0.85em;
  text-decoration: underline;
  cursor: pointer;
}
.info-acceso {
  margin-top: 18px;
  font-size: 0.85em;
  color: var(--texto-3);
  text-align: left;
}
.tarjeta-acceso { box-sizing: border-box; }
@media (max-width: 520px) {
  .tarjeta-acceso { padding: 36px 22px; width: calc(100% - 32px); }
  .tarjeta-acceso .sub { margin-bottom: 26px; }
}

:focus-visible {
  outline: 2px solid rgba(60, 45, 30, 0.5);
  outline-offset: 2px;
}

.error {
  margin-top: 24px;
  padding: 12px 14px;
  background: rgba(250, 2, 2, 0.12);
  color: var(--rojo-texto);
  border: 1px solid rgba(250, 2, 2, 0.3);
  border-radius: var(--radio-s);
  font-size: 0.8em;
  text-align: left;
}

/* ==================== CABECERA ==================== */
.cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  border-bottom: 1px solid var(--borde);
  animation: fadeInDown 0.6s ease;
}

/* La barra de pestañas del módulo. Fija arriba al desplazarse, y de lado en
   el móvil cuando no caben: Legal tiene doce. */
.subnav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 30px;
  background: rgba(246, 243, 238, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }

.subnav-pestana {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--texto-3);
  font: inherit;
  font-size: 0.85em;
  white-space: nowrap;
  cursor: pointer;
}
.subnav-pestana:hover { color: var(--texto); }
.subnav-pestana.activa {
  color: var(--dorado);
  background: rgba(192, 100, 61, 0.12);
}
.subnav-n {
  color: var(--texto-4);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}
.subnav-pestana.activa .subnav-n { color: inherit; opacity: 0.7; }

@media (max-width: 640px) {
  .subnav { padding: 8px 16px; }
}

.cabecera h1 {
  margin-bottom: 2px;
  font-size: 1.4em;
}

.cabecera .sub {
  color: var(--texto-4);
  font-size: 0.75em;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.identidad {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-left: auto;
  color: var(--texto-3);
  font-size: 0.8em;
}

.pastilla {
  padding: 4px 12px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--indigo);
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.enlace {
  padding: 0;
  background: none;
  color: var(--texto-4);
  border: 0;
  font: inherit;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transicion);
}

.enlace:hover {
  color: var(--texto);
}

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px;
  animation: fadeIn 0.8s ease;
}

.aviso {
  margin-bottom: 25px;
  padding: 14px 18px;
  background: rgba(255, 152, 0, 0.1);
  color: var(--naranja);
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-radius: var(--radio);
  font-size: 0.85em;
}

/* ==================== TARJETAS KPI ==================== */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 35px;
}

.kpi {
  position: relative;
  padding: 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  overflow: hidden;
  transition: all 0.25s ease;
}

.kpi:hover {
  border-color: rgba(60, 45, 30, 0.12);
  transform: translateY(-2px);
}

/* Franja superior de 3px con el color del indicador */
.kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kpi-color, var(--indigo));
  border-radius: 14px 14px 0 0;
  opacity: 0.8;
}

.kpi-top {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.kpi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kpi-color, var(--indigo));
}

.kpi-label {
  color: var(--texto-4);
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.kpi-value {
  margin-bottom: 6px;
  color: var(--texto);
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-sub {
  color: var(--texto-5);
  font-size: 0.7em;
}

.kpi-bar {
  width: 100%;
  height: 4px;
  margin-top: 10px;
  background: rgba(60, 45, 30, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.kpi-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--kpi-color, var(--indigo));
  transition: width 0.4s ease;
}

/* ==================== SECCIONES ==================== */
.seccion {
  margin-bottom: 40px;
}

.titulo-seccion {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.titulo-seccion h2 {
  color: var(--texto-2);
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nota {
  margin-bottom: 16px;
  color: var(--texto-4);
  font-size: 0.8em;
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.7em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.leyenda span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--texto-4);
  font-weight: 500;
}

.leyenda i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ==================== REJILLA DE UNIDADES ==================== */
.scroll-x {
  overflow-x: auto;
  padding-bottom: 6px;
}

.scroll-x::-webkit-scrollbar {
  height: 6px;
}

.scroll-x::-webkit-scrollbar-thumb {
  background: rgba(60, 45, 30, 0.12);
  border-radius: 3px;
}

.rejilla {
  display: grid;
  gap: 8px;
  /* Ancho minimo para que quepan las ocho viviendas de una planta sin que el
     detalle parta en dos lineas. Por debajo, la seccion scrollea en horizontal. */
  min-width: 1000px;
}

.fila {
  display: grid;
  grid-template-columns: 56px repeat(8, 1fr);
  gap: 8px;
}

.etiqueta-planta {
  display: grid;
  place-items: center;
  color: var(--texto-4);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 1px;
}

.cabecera-escalera {
  display: grid;
  place-items: center;
  padding-bottom: 6px;
  color: var(--texto-5);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.celda {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--superficie);
  color: inherit;
  text-align: left;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  backdrop-filter: blur(20px);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* La misma franja de 3px que la tarjeta KPI: un solo recurso para decir estado */
.celda::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--estado-color, var(--texto-5));
  opacity: 0.8;
}

.celda:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-2px);
}

.celda .codigo {
  font-size: 0.95em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.celda .detalle {
  color: var(--texto-5);
  font-size: 0.7em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.celda .precio {
  margin-top: 5px;
  color: var(--texto-2);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.celda .sin-precio {
  color: var(--texto-5);
  font-weight: 400;
}

.celda.vacia {
  background: none;
  border: 1px dashed rgba(60, 45, 30, 0.04);
  cursor: default;
}

.celda.vacia::before {
  display: none;
}

/* Un tinte muy leve para que disponible y pre-reserva salten a la vista sin
   que las otras 28 se conviertan en ruido de color */
.e-disponible {
  background: rgba(34, 197, 94, 0.07);
}

.e-pre_reserva {
  background: rgba(250, 205, 2, 0.07);
}

.e-bloqueada,
.e-fuera_de_venta {
  background: rgba(250, 2, 2, 0.07);
}

.vacio {
  padding: 40px;
  background: var(--superficie);
  border: 1px dashed var(--borde-medio);
  border-radius: var(--radio);
  color: var(--texto-4);
  font-size: 0.85em;
  text-align: center;
}

/* ==================== INCIDENCIAS ==================== */
.incidencias {
  list-style: none;
}

.incidencias li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 8px;
  padding: 13px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  backdrop-filter: blur(20px);
  color: var(--texto-2);
  font-size: 0.85em;
  transition: all 0.25s ease;
}

.incidencias li:hover {
  border-color: rgba(60, 45, 30, 0.12);
}

.incidencias .unidad {
  min-width: 44px;
  color: var(--texto);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.incidencias .tipo {
  padding: 2px 9px;
  background: rgba(255, 152, 0, 0.15);
  color: var(--naranja);
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==================== FICHA ==================== */
.ficha {
  width: min(540px, calc(100vw - 32px));
  padding: 40px;
  background: var(--superficie-alta);
  color: var(--texto);
  border: 1px solid var(--borde-medio);
  border-radius: var(--radio-l);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.ficha::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.cerrar {
  position: absolute;
  top: 18px;
  right: 20px;
  padding: 0;
  background: none;
  color: var(--texto-4);
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transicion);
}

.cerrar:hover {
  color: var(--texto);
}

.ficha h3 {
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

.ficha .sub {
  margin: 4px 0 28px;
  color: var(--texto-4);
  font-size: 0.75em;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.ficha dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px 20px;
  font-size: 0.85em;
}

.ficha dt {
  color: var(--texto-4);
}

.ficha dd {
  color: var(--texto-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ficha .separador {
  grid-column: 1 / -1;
  height: 1px;
  margin: 6px 0;
  background: var(--borde-medio);
}

.ficha .destacado {
  color: var(--texto);
  font-size: 1.25em;
  font-weight: 700;
}

.ficha .extras {
  margin-top: 26px;
  padding: 13px 15px;
  background: rgba(192, 100, 61, 0.1);
  border: 1px solid rgba(192, 100, 61, 0.25);
  border-radius: var(--radio-s);
  color: var(--dorado);
  font-size: 0.78em;
}

/* ==================== MOVIL ==================== */
@media (max-width: 768px) {
  .cabecera {
    padding: 16px 20px;
  }

  main {
    padding: 20px;
  }

  .tarjeta-acceso {
    padding: 40px 28px;
  }

  .kpi-value {
    font-size: 1.6em;
  }

  .ficha {
    padding: 28px;
  }
}

/* ==================== SELECTOR DE PROMOCIONES ==================== */
/* Misma idea que el selector de hoteles de NCalma Hotels: se elige primero
   la propiedad y luego se entra. Con cinco promociones, entrar directo a una
   dejaria de tener sentido. */

.marca {
  display: flex;
  gap: 14px;
  align-items: center;
}

.volver {
  padding: 4px 12px;
  background: var(--superficie);
  color: var(--texto-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  transition: var(--transicion);
}

.volver:hover {
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

.volver.navegar { padding: 4px 9px; font-size: 1.25em; }
.volver.navegar:disabled { opacity: 0.35; cursor: default; }
.volver.navegar:disabled:hover { border-color: var(--borde); color: var(--texto-2); }

.promos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.promo {
  position: relative;
  padding: 24px;
  background: var(--superficie);
  color: inherit;
  text-align: left;
  border: 1px solid var(--borde);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.25s ease;
}

.promo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--estado-color, var(--indigo));
  opacity: 0.85;
}

.promo:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-2px);
}

.promo .nombre {
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--estado-color, var(--texto));
}

.promo .estado {
  margin-top: 4px;
  color: var(--texto-4);
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.promo .cifras-promo {
  display: flex;
  gap: 20px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}

.promo .dato {
  font-variant-numeric: tabular-nums;
}

.promo .dato b {
  display: block;
  color: var(--texto);
  font-size: 1.25em;
  font-weight: 700;
}

.promo .dato span {
  color: var(--texto-5);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.promo .barra {
  width: 100%;
  height: 4px;
  margin-top: 16px;
  background: rgba(60, 45, 30, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.promo .barra i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--estado-color, var(--indigo));
}

/* Una promoción sin unidades no es un error: es suelo recién comprado. */
.promo .sin-datos {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  color: var(--texto-5);
  font-size: 0.75em;
  font-style: italic;
}

/* ==================== MENU LATERAL ====================
   Mismo patron que NCalma Hotels: tres rayitas a la izquierda y un cajon que
   entra desde el borde. Alli el acento es dorado por hotel; aqui el dorado de
   la casa, que ya usamos para el suelo recien comprado. */

.hamburguesa {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--superficie);
  color: var(--texto-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  cursor: pointer;
  transition: var(--transicion);
}

.hamburguesa:hover {
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

.hamburguesa i {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

#velo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 9998;
}

#velo.abierto {
  opacity: 1;
}

#lateral {
  position: fixed;
  top: 0;
  left: -300px;
  width: 280px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.45);
  transition: left 0.28s ease;
  overflow-y: auto;
  z-index: 9999;
}

#lateral.abierto {
  left: 0;
}

.lateral-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--borde);
  background: rgba(0, 0, 0, 0.22);
}

.lateral-cabecera strong {
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dorado);
}

.lateral-cerrar {
  padding: 0;
  background: none;
  color: var(--texto-4);
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lateral-cerrar:hover {
  color: var(--texto);
}

.grupo {
  padding: 16px 0 6px;
}

.grupo h3 {
  padding: 0 20px 8px;
  color: var(--texto-5);
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.lateral-item {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  background: none;
  color: var(--texto-2);
  border: 0;
  border-left: 2px solid transparent;
  font: inherit;
  font-size: 0.85em;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lateral-item:hover {
  background: rgba(60, 45, 30, 0.04);
  color: var(--texto);
}

.lateral-item.activo {
  background: rgba(192, 100, 61, 0.1);
  border-left-color: var(--dorado);
  color: var(--dorado);
}

/* Lo que todavía no existe se ve, pero se ve que no existe. Un menú que
   esconde lo pendiente hace creer que la aplicación está más completa. */
.lateral-item.pendiente {
  color: var(--texto-5);
}

.lateral-item .marca-pdte {
  margin-left: auto;
  padding: 1px 7px;
  background: rgba(60, 45, 30, 0.05);
  border-radius: 999px;
  font-size: 0.72em;
  letter-spacing: 0.5px;
}

/* ==================== PANTALLA PENDIENTE ==================== */
.pendiente-panel {
  max-width: 620px;
  margin: 40px auto;
  padding: 40px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  text-align: center;
}

.pendiente-panel h2 {
  margin-bottom: 10px;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto);
}

.pendiente-panel .fase {
  display: inline-block;
  margin-bottom: 18px;
  padding: 3px 12px;
  background: rgba(192, 100, 61, 0.12);
  color: var(--dorado);
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.pendiente-panel p {
  color: var(--texto-4);
  font-size: 0.88em;
  line-height: 1.7;
}

/* ==================== PANEL DE MODULO ====================
   Estructura del prototipo: titulo, pestanas y contenido. Los numeros de la
   maqueta eran inventados; aqui cada pestana dice de donde saldra el suyo. */

.modulo-cabecera {
  margin-bottom: 18px;
}

.modulo-cabecera h2 {
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.modulo-cabecera .caja {
  margin-top: 4px;
  color: var(--texto-4);
  font-size: 0.7em;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde);
}

.pestana {
  padding: 8px 16px;
  background: var(--superficie);
  color: var(--texto-4);
  border: 1px solid var(--borde);
  border-radius: 999px;
  font: inherit;
  font-size: 0.78em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pestana:hover {
  border-color: var(--borde-fuerte);
  color: var(--texto-2);
}

.pestana.on {
  background: rgba(192, 100, 61, 0.12);
  border-color: rgba(192, 100, 61, 0.35);
  color: var(--dorado);
  font-weight: 600;
}

.sin-dato {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 44px 32px;
  background: var(--superficie);
  border: 1px dashed var(--borde-medio);
  border-radius: 14px;
  text-align: center;
}

.sin-dato .titulo {
  color: var(--texto-2);
  font-size: 0.95em;
  font-weight: 600;
}

.sin-dato .fuente {
  max-width: 520px;
  color: var(--texto-4);
  font-size: 0.85em;
  line-height: 1.7;
}

.sin-dato .marca {
  padding: 3px 12px;
  background: rgba(60, 45, 30, 0.05);
  color: var(--texto-5);
  border-radius: 999px;
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ==================== CONFIGURACION · USUARIOS ==================== */
.boton {
  padding: 9px 20px;
  background: rgba(192, 100, 61, 0.12);
  color: var(--dorado);
  border: 1px solid rgba(192, 100, 61, 0.35);
  border-radius: 999px;
  font: inherit;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: var(--transicion);
}

.boton:hover:not(:disabled) {
  background: rgba(192, 100, 61, 0.2);
}

.boton:disabled {
  opacity: 0.5;
  cursor: wait;
}

.tabla-usuarios {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  backdrop-filter: blur(20px);
  font-size: 0.85em;
}

.tabla-usuarios th {
  padding: 12px 16px;
  color: var(--texto-4);
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--borde-medio);
}

.tabla-usuarios td {
  padding: 13px 16px;
  color: var(--texto-2);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla-usuarios tbody tr:last-child td {
  border-bottom: 0;
}

.tabla-usuarios tbody tr {
  cursor: pointer;
  transition: background 0.2s ease;
}

.tabla-usuarios tbody tr:hover,
.tabla-usuarios tbody tr:focus-visible {
  background: rgba(60, 45, 30, 0.03);
  outline: none;
}

.tabla-usuarios tr.inactivo td {
  color: var(--texto-5);
}

.tabla-usuarios .email {
  color: var(--texto);
}

.tabla-usuarios .rol {
  color: var(--dorado);
}

.tabla-usuarios .si {
  color: var(--verde);
}

.tabla-usuarios .no {
  color: var(--texto-4);
}

.tabla-usuarios .alta {
  font-variant-numeric: tabular-nums;
}

.tabla-usuarios .tu {
  margin-left: 8px;
  padding: 1px 8px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--indigo);
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
}

.formulario h3 {
  margin-right: 30px;
}

.formulario .campo {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.formulario .campo span {
  color: var(--texto-4);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.formulario .campo small {
  color: var(--texto-5);
  font-size: 0.72em;
}

.formulario input:not([type='checkbox']),
.formulario select {
  width: 100%;
  padding: 11px 13px;
  background: rgba(60, 45, 30, 0.04);
  color: var(--texto);
  border: 1px solid var(--borde-medio);
  border-radius: var(--radio-s);
  font: inherit;
  font-size: 0.9em;
}

.formulario input:focus,
.formulario select:focus {
  border-color: rgba(192, 100, 61, 0.5);
  outline: none;
}

.formulario select:disabled {
  opacity: 0.5;
}

.formulario option {
  background: var(--superficie);
}

.interruptor {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--texto-2);
  font-size: 0.85em;
  cursor: pointer;
}

.interruptor input {
  width: 18px;
  height: 18px;
  accent-color: var(--verde);
}

.formulario .acciones {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 28px;
}

/* En el movil la tabla se convierte en tarjetas: seis columnas no caben y el
   scroll horizontal esconde justo el estado, que es lo que se busca. */
@media (max-width: 640px) {
  .tabla-usuarios,
  .tabla-usuarios tbody,
  .tabla-usuarios tr,
  .tabla-usuarios td {
    display: block;
  }

  .tabla-usuarios {
    background: none;
    border: 0;
    backdrop-filter: none;
  }

  .tabla-usuarios thead {
    display: none;
  }

  .tabla-usuarios tbody tr {
    margin-bottom: 10px;
    padding: 12px 16px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
  }

  .tabla-usuarios td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    border: 0;
    white-space: normal;
  }

  .tabla-usuarios td::before {
    content: attr(data-t);
    color: var(--texto-4);
  }

  .tabla-usuarios td.email {
    word-break: break-all;
  }
}

/* =====================================================================
 * Decisiones · la bandeja de lo que proponen los jefes
 *
 * Usa el semaforo de NCalma Hotels, que ya es el lenguaje de la casa: rojo
 * para lo critico, ambar para el aviso, indigo para lo informativo. La franja
 * lateral de color es lo unico que distingue una tarjeta de otra, porque la
 * severidad tiene que leerse antes que el texto.
 * ================================================================== */

.decisiones {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.propuesta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--texto-5);
  border-radius: var(--radio);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.propuesta.sev-critico { border-left-color: var(--rojo); }
.propuesta.sev-aviso   { border-left-color: var(--amarillo); }
.propuesta.sev-info    { border-left-color: var(--indigo); }

.propuesta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.propuesta-meta .jefe {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.propuesta-meta .ambito {
  font-size: 12px;
  color: var(--texto-4);
}

.chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.chip.sev-critico { background: rgba(250, 2, 2, 0.14);   color: var(--rojo); }
.chip.sev-aviso   { background: rgba(250, 205, 2, 0.14); color: var(--amarillo); }
.chip.sev-info    { background: rgba(99, 102, 241, 0.16); color: var(--indigo); }

.propuesta h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--texto);
  text-wrap: balance;
}

.propuesta-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.propuesta-cuerpo p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--texto-2);
  max-width: 68ch;
}

.propuesta-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}

.propuesta-acciones button:disabled {
  opacity: 0.45;
  cursor: progress;
}

.boton-primario {
  background: var(--texto);
  color: var(--fondo);
  border: none;
  border-radius: var(--radio-s);
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transicion);
}

.boton-primario:hover:not(:disabled) { opacity: 0.85; }

/* =====================================================================
 * Documentos · el indice del archivo
 * ================================================================== */

.documentos { display: flex; flex-direction: column; gap: 18px; }

.doc-lista { display: flex; flex-direction: column; gap: 10px; }

.doc {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.doc-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.doc-cab h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--texto);
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 12px;
  color: var(--texto-4);
}

.doc-tipo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Donde esta el fichero de verdad. La diferencia se enseña a proposito:
   mientras el PDF siga en Dropbox, la aplicacion no lo custodia. */
.doc-custodia { color: var(--verde); }
.doc-fuera    { color: var(--texto-4); }

.doc-ruta {
  margin: 0;
  font-size: 11px;
  color: var(--texto-5);
  word-break: break-all;
  line-height: 1.5;
}

/* =====================================================================
 * Legal · Sociedades
 * ================================================================== */

.legal { display: flex; flex-direction: column; gap: 10px; }

.legal .rama {
  margin: 22px 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.legal .rama:first-of-type { margin-top: 8px; }

.soc-lista { display: flex; flex-direction: column; gap: 10px; }

.soc {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.soc-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.soc-cab h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto);
  line-height: 1.35;
}

.soc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--texto-4);
}

.soc-fin { display: flex; flex-wrap: wrap; gap: 6px; }

/* El papel importa tanto como la financiacion: ser garante de 80 millones no
   es lo mismo que recibirlos, y la tarjeta no debe dejar que se confundan. */
.chip.papel-obligada   { background: rgba(99, 102, 241, 0.16);  color: var(--indigo); }
.chip.papel-financiada { background: rgba(34, 197, 94, 0.14);   color: var(--verde); }
.chip.papel-garante    { background: rgba(255, 152, 0, 0.16);   color: var(--naranja); }

.chip.sev-ok { background: rgba(34, 197, 94, 0.14); color: var(--verde); }

.soc-nota {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--texto-3);
  max-width: 72ch;
}

/* =====================================================================
 * Vencimientos y plazos
 *
 * La cuenta de dias va primero y en grande: es el dato por el que se entra a
 * esta pantalla. El titulo viene despues.
 * ================================================================== */

.vencimientos { display: flex; flex-direction: column; gap: 16px; }
.venc-lista { display: flex; flex-direction: column; gap: 12px; }

.venc {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--texto-5);
  border-radius: var(--radio);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.venc.sit-vencido { border-left-color: var(--rojo); }
.venc.sit-proximo { border-left-color: var(--amarillo); }
.venc.sit-lejano  { border-left-color: var(--texto-5); }

.venc-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.venc-dias {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sit-vencido .venc-dias { color: var(--rojo); }
.sit-proximo .venc-dias { color: var(--amarillo); }
.sit-lejano  .venc-dias { color: var(--texto-4); }

.venc-cab h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--texto);
  text-wrap: balance;
}

.venc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--texto-4);
}

.venc-cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.venc-detalle {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 70ch;
}

.venc-fuente {
  margin: 0;
  font-size: 11.5px;
  color: var(--texto-5);
}
/* «Cumplido» a la izquierda, con el texto: en la columna flex se quedaba suelto en medio. */
.venc > .boton-plano { align-self: flex-start; }

.chip.sit-vencido { background: rgba(250, 2, 2, 0.14);   color: var(--rojo); }
.chip.sit-proximo { background: rgba(250, 205, 2, 0.14); color: var(--amarillo); }
.chip.sit-lejano  { background: rgba(60, 45, 30,0.06);  color: var(--texto-3); }


/* ---------------------------------------------------------------------
   Configuración · Automatismos
   --------------------------------------------------------------------- */

.resumen-automatismos { display: flex; gap: .5rem; flex-wrap: wrap; }

.chip {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .8rem;
  background: var(--fondo-suave, #f2f2f0);
  border: 1px solid var(--borde, #ddd);
}
.chip strong { font-weight: 600; }

.chip-corriendo           { background: #e6f4ea; border-color: #b7e1c4; }
.chip-listo_para_encender { background: #fff4e5; border-color: #ffd9a8; }
.chip-bloqueado           { background: #f2f2f0; color: var(--texto-4); }

/* El nivel dice quién firma, así que conviene distinguirlo de un vistazo. */
.chip-N0 { background: #f2f2f0; color: var(--texto-4); }
.chip-N1 { background: #e8f0fe; border-color: #c6dafc; }
.chip-N2 { background: #fff4e5; border-color: #ffd9a8; }
.chip-N3 { background: #fce8e6; border-color: #f5c6c2; font-weight: 600; }

.barra-acciones {
  display: flex; align-items: center; gap: .75rem;
  margin: 1rem 0; flex-wrap: wrap;
}

.fila-activa { background: #f7fcf8; }

/* Lo que le falta a un automatismo para poder encenderse. Se lee tanto como
   lo que hace: es la lista de obra pendiente del sistema. */
.bloqueo { font-size: .8rem; color: var(--ambar-texto); margin-top: .2rem; }
.listo   { font-size: .8rem; color: var(--verde-texto); margin-top: .2rem; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }

.propuesta-recomendacion {
  margin-top: .7rem;
  padding: .55rem .75rem;
  border-left: 3px solid var(--acento);
  background: var(--acento-suave);
  border-radius: 0 8px 8px 0;
}
.propuesta-recomendacion-etiqueta {
  margin: 0 0 .15rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--acento);
}
.propuesta-recomendacion-texto { margin: 0; color: var(--texto); }
.propuesta-pie { margin-top: .5rem; font-size: .85rem; color: var(--texto-4); }

/* ---------------------------------------------------------------------
   Panel de control y cuadro de mandos

   El lenguaje visual sale del panel de ncalmahotels: tarjeta oscura, borde
   muy tenue, franja de color del area arriba, y el bloque entero sube seis
   píxeles al pasar por encima. Lo que se añade es el estado: un artefacto
   que no está construido se ve, apagado, y dice qué le falta.
   --------------------------------------------------------------------- */

.panel-cabecera { margin-bottom: 1.8rem; }
.panel-titulo {
  font-size: 1.5rem; font-weight: 400; letter-spacing: 4px;
  text-transform: uppercase; margin: .4rem 0;
}

.boton-plano {
  background: none; border: 0; color: var(--texto-3); cursor: pointer;
  font-size: .85rem; letter-spacing: 1px; padding: 0;
}
.boton-plano:hover { color: var(--texto); }

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.panel-card, .panel-tile {
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(60, 45, 30, .06);
  border-radius: 16px;
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.panel-card { cursor: pointer; }
.panel-card:hover, .panel-tile.tile-activo:hover {
  transform: translateY(-6px);
  border-color: rgba(60, 45, 30, .15);
  background: rgba(22, 22, 22, .95);
}

.panel-card-franja {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 16px 16px 0 0; opacity: .8;
}
.panel-card-icono, .panel-tile-icono { font-size: 2em; margin-bottom: 14px; opacity: .85; }
.panel-card h3 {
  font-size: 1.05em; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 8px;
}
.panel-card-jefe   { font-size: .82em; color: var(--texto-3); letter-spacing: 1px; }
.panel-card-cuenta { font-size: .78em; color: var(--texto-4); letter-spacing: 1px; margin-top: 6px; }

/* Los tiles de artefacto */
.panel-tile h4 { font-size: .98em; font-weight: 600; margin-bottom: 6px; }
.panel-tile-desc  { font-size: .83em; color: var(--texto-3); margin: 0 0 .6rem; }
.panel-tile-falta { font-size: .8em; color: var(--ambar-texto); margin: 0 0 .6rem; }
.panel-tile-estado {
  display: inline-block; font-size: .7em; letter-spacing: 1.5px;
  text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid rgba(60, 45, 30, .12); color: var(--texto-3);
}

.tile-activo { cursor: pointer; border-left: 3px solid var(--card-color); }
.tile-activo .panel-tile-estado { color: var(--verde-texto); border-color: var(--verde-texto); }
.tile-desarrollo .panel-tile-estado { color: var(--ambar-texto); border-color: var(--ambar-texto); }

/* Apagado, pero visible: lo que falta es justo lo que hay que decidir. */
.tile-bloqueado { opacity: .55; }
.tile-bloqueado .panel-tile-icono { filter: grayscale(1); }

/* ---- Cuadro de mandos ---------------------------------------------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; margin-bottom: 2rem;
}
.kpi {
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(60, 45, 30, .06);
  border-left: 3px solid rgba(60, 45, 30, .12);
  border-radius: 12px; padding: 18px 20px;
}
.kpi-valor   { font-size: 1.7em; font-weight: 600; letter-spacing: -.5px; }
.kpi-etiqueta{ font-size: .78em; color: var(--texto-3); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; }
.kpi-detalle { font-size: .75em; color: var(--texto-4); margin-top: 6px; }
.kpi-rojo  { border-left-color: var(--rojo-texto); }
.kpi-rojo  .kpi-valor { color: var(--rojo-texto); }
.kpi-ambar { border-left-color: var(--ambar-texto); }
.kpi-ambar .kpi-valor { color: var(--ambar-texto); }

.graficas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px; margin-top: 2rem;
}
.grafica {
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(60, 45, 30, .06);
  border-radius: 16px; padding: 20px;
  height: 280px;
}
.grafica h4 {
  font-size: .78em; color: var(--texto-3); letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 14px;
}
.grafica canvas { max-height: 210px; }

.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.alerta { color: var(--rojo-texto); font-weight: 600; }

/* ---- Selector de ámbito --------------------------------------------- */

.ambito-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.ambito-card { padding: 34px 28px; }
/* El grupo ocupa el ancho entero cuando hay sitio: es el punto de partida,
   no una promoción más. */
.ambito-grupo { grid-column: 1 / -1; }

.ambito-cifras { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; }
.ambito-dato { display: flex; flex-direction: column; }
.ambito-dato strong { font-size: 1.35em; font-weight: 600; font-variant-numeric: tabular-nums; }
.ambito-dato span {
  font-size: .72em; color: var(--texto-4); letter-spacing: 1.5px; text-transform: uppercase;
}

.ambito-alerta {
  margin-top: 14px; font-size: .8em; color: var(--rojo-texto);
  border-top: 1px solid rgba(60, 45, 30, .06); padding-top: 10px;
}

/* La barra que dice sobre qué se está mirando */
.barra-ambito {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 1px solid rgba(60, 45, 30, .06);
}
.ambito-actual {
  font-size: .8em; letter-spacing: 2px; text-transform: uppercase; color: var(--dorado);
}

/* ---- Postventa ------------------------------------------------------ */
.vivienda {
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(60, 45, 30, .06);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 14px 18px;
}
.vivienda summary { cursor: pointer; display: flex; gap: 14px; align-items: baseline; }
.vivienda-codigo { font-weight: 600; letter-spacing: 1px; }
.vivienda-cuenta { font-size: .82em; color: var(--texto-3); }
.vivienda[open] summary { margin-bottom: 12px; }
.sin-clasificar { color: var(--ambar-texto); }

/* ---- Legal · expedientes -------------------------------------------- */
.expediente {
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(60, 45, 30, .06);
  border-radius: 12px; margin-bottom: 10px; padding: 14px 18px;
}
.expediente summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.exp-codigo { font-family: ui-monospace, Menlo, monospace; font-size: .8em; color: var(--texto-3); }
.exp-titulo { font-weight: 600; flex: 1; min-width: 200px; }
.exp-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.estado-abierto    { color: var(--rojo-texto); border-color: var(--rojo-texto); }
.estado-en_estudio { color: var(--ambar-texto); border-color: var(--ambar-texto); }
.estado-cerrado    { color: var(--texto-4); }
.riesgo-alto  { color: var(--rojo-texto); border-color: var(--rojo-texto); font-weight: 600; }
.riesgo-medio { color: var(--ambar-texto); border-color: var(--ambar-texto); }

/* La escalera del principio 3: se ve entera, con el escalón actual marcado. */
.escalera { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 10px; }
.escalon {
  font-size: .7em; letter-spacing: 1px; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 4px;
  background: rgba(60, 45, 30, .04); color: var(--texto-4);
}
.escalon.hecho  { background: rgba(60, 45, 30, .08); color: var(--texto-3); }
.escalon.actual { background: var(--dorado); color: #ffffff; font-weight: 600; }

.exp-datos {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 4px 16px; margin: 10px 0; font-size: .85em;
}
.exp-datos dt { color: var(--texto-4); }
.exp-datos dd { margin: 0; }
.exp-notas {
  font-size: .85em; border-left: 3px solid rgba(60, 45, 30, .1);
  padding-left: .7rem; margin: 10px 0 0; color: var(--texto-3);
}

.fila-alerta { background: rgba(192, 57, 43, .08); }
.tabla td.alerta { color: var(--rojo-texto); font-weight: 600; }

/* Una advertencia sobre el propio dato va arriba, no en una nota al pie. */
.aviso-dato {
  background: rgba(161, 92, 0, .12);
  border-left: 3px solid var(--ambar-texto);
  border-radius: 6px;
  padding: 12px 16px; margin: 0 0 1.5rem;
  font-size: .88em; line-height: 1.5;
}

.evento-ok    { color: var(--verde-texto); border-color: var(--verde-texto); }
.evento-aviso { color: var(--ambar-texto); border-color: var(--ambar-texto); }
.evento-mal   { color: var(--rojo-texto); border-color: var(--rojo-texto); font-weight: 600; }

/* El cuerpo que llegó, sin interpretar: cuando algo no cuadra es lo primero
   que hay que poder leer. */
.payload {
  background: rgba(0, 0, 0, .35);
  border-radius: 6px; padding: 10px 12px; margin: 10px 0 0;
  font-size: .78em; line-height: 1.4;
  max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

/* ---- Mi día ---------------------------------------------------------- */
.subtitulo-rojo  { color: var(--rojo-texto); }
.subtitulo-ambar { color: var(--ambar-texto); }

.linea-resumen {
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(60, 45, 30, .06);
  border-left: 3px solid rgba(60, 45, 30, .12);
  border-radius: 8px;
  padding: 12px 16px; margin-bottom: 8px;
}
.linea-titulo  { font-weight: 600; font-size: .95em; }
.linea-meta    { font-size: .78em; color: var(--texto-4); margin-top: 4px; letter-spacing: .5px; }
.linea-detalle { font-size: .85em; color: var(--texto-3); margin-top: 8px; line-height: 1.45; }

.linea-vencida { border-left-color: var(--rojo-texto); }
.linea-proxima { border-left-color: var(--ambar-texto); }
.linea-resumen.sev-critico { border-left-color: var(--rojo-texto); }
.linea-resumen.sev-aviso   { border-left-color: var(--ambar-texto); }
.linea-resumen.sev-info    { border-left-color: rgba(60, 45, 30, .12); }

/* =====================================================================
   Navegación de Legal
   =====================================================================
   Piezas que trae la especificación de navegación: migas de pan, chips de
   filtro que viven en la URL, y filas y tarjetas pulsables.

   No se inventa ningún color: todo sale de las variables de arriba, que son
   las del portal de hoteles. El dorado marca lo activo y nada más. */

.migas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.82em;
}

.miga {
  color: var(--texto-4);
  text-decoration: none;
  transition: var(--transicion);
}

.miga:hover { color: var(--texto); }

.miga.actual {
  color: var(--dorado);
  font-weight: 600;
}

.miga-sep { color: var(--texto-5); }

/* Chips de filtro. El activo en dorado, como el resto del portal. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.filtros .chip {
  cursor: pointer;
  border: 1px solid var(--borde-medio);
  background: transparent;
  color: var(--texto-4);
  font: inherit;
  font-size: 0.78em;
  padding: 6px 13px;
  border-radius: 999px;
  transition: var(--transicion);
}

.filtros .chip:hover {
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

.filtros .chip-activo {
  border-color: var(--dorado);
  color: var(--dorado);
  background: rgba(192, 100, 61, 0.1);
}

/* Configuración · Accesos: un desplegable por celda. */
.tabla-accesos tbody tr { cursor: default; }
.tabla-accesos tbody th {
  text-align: left;
  font-weight: 600;
  padding: 10px 14px;
  white-space: nowrap;
}
.tabla-accesos select,
.alta-excepcion select {
  background: var(--superficie-alta);
  color: var(--texto-3);
  border: 1px solid var(--borde-medio);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.85em;
}
.tabla-accesos select.con-acceso {
  color: var(--dorado);
  border-color: rgba(192, 100, 61, 0.45);
}
.doc.inactivo { opacity: 0.55; }

/* Legal · Bandeja: una tarjeta por correo, con su urgencia en el borde. */
.bandeja-reenviar-campos { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 6px; }
.bandeja-reenviar-campos input[type="email"] { flex: 1 1 220px; min-width: 0; font: inherit; padding: 6px 8px; border: 1px solid var(--borde-medio); border-radius: var(--radio-s); }
.bandeja-reenviar-campos textarea { flex: 2 1 280px; min-width: 0; font: inherit; padding: 6px 8px; border: 1px solid var(--borde-medio); border-radius: var(--radio-s); resize: vertical; }
.bandeja-correo { border-left: 3px solid var(--borde-medio); }
.bandeja-correo.urgencia-alta { border-left-color: var(--rojo); }
.bandeja-correo.urgencia-media { border-left-color: var(--amarillo); }
.bandeja-correo.revisado { opacity: 0.7; }
.bandeja-resumen { margin: 8px 0; line-height: 1.5; }
.bandeja-hallazgos { margin: 6px 0; padding-left: 18px; display: grid; gap: 6px; }
.bandeja-hallazgos .cita { font-style: italic; }
.bandeja-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.bandeja-acciones select {
  max-width: 100%;
  background: var(--superficie-alta);
  color: var(--texto);
  border: 1px solid var(--borde-medio);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.85em;
}

/* Ficha de expediente: quién lo lleva. */
.responsable-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
}
.responsable-fila select {
  background: var(--superficie-alta);
  color: var(--texto);
  border: 1px solid var(--borde-medio);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.9em;
}
@media (max-width: 640px) {
  .tabla-accesos tbody th { display: block; padding: 0 0 6px; }
}

/* Un grupo de negocios (Hoteles ▾): el chip abre una lista debajo. */
.chip-grupo { position: relative; }
.chip-grupo > summary { list-style: none; display: inline-block; }
.chip-grupo > summary::-webkit-details-marker { display: none; }
.chip-grupo > summary::after { content: ' ▾'; }
.chip-grupo[open] > summary::after { content: ' ▴'; }

.chip-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--borde-medio);
  border-radius: 12px;
  background: var(--superficie-alta);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.filtros .chip-menu .chip {
  text-align: left;
  border-color: transparent;
  border-radius: 8px;
  padding: 9px 12px;
}

/* Lo que se puede abrir se nota antes de pulsarlo, y responde al teclado:
   el criterio de accesibilidad pide foco visible y orden de tabulación. */
.fila-pulsable,
.doc-pulsable,
.kpi-pulsable { cursor: pointer; }

.fila-pulsable:hover { background: rgba(60, 45, 30, 0.03); }

.doc-pulsable:hover,
.kpi-pulsable:hover { border-color: var(--borde-fuerte); }

.fila-pulsable:focus-visible,
.doc-pulsable:focus-visible,
.kpi-pulsable:focus-visible,
.filtros .chip:focus-visible,
.miga:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
}

/* Cabecera de la ficha de expediente. */
.ficha-cabecera {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--borde);
}

.ficha-cabecera .mono {
  color: var(--texto-4);
  font-size: 0.78em;
  letter-spacing: 1.5px;
}

.ficha-cabecera .panel-titulo { margin: 4px 0 12px; }

/* En móvil la escalera se vuelve una línea: la especificación pide
   "paso 2 de 7 · requerimiento" en vez de los siete pasos. */
@media (max-width: 640px) {
  .escalera { overflow-x: auto; }
  .escalera .escalon:not(.actual):not(.hecho) { display: none; }
  .filtros { overflow-x: auto; flex-wrap: nowrap; }
}

/* El panel de la pestaña activa de la ficha. Separado de las pestañas para
   que al cambiar de una a otra no salte la maquetación. */
.ficha-panel {
  min-height: 160px;
  padding-top: 18px;
}

.ficha-panel .titulo-seccion:first-child { margin-top: 0; }

/* Lista con panel lateral. En escritorio el panel se queda a la derecha; en
   móvil baja debajo, porque una columna de 320 px en un teléfono no es una
   columna, es un estorbo. */
.lista-con-panel {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

.panel-detalle {
  position: sticky;
  top: 20px;
  padding: 18px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde-medio);
  border-radius: var(--radio);
}

.panel-detalle.oculto { display: none; }

.panel-detalle .cerrar {
  float: right;
  background: none;
  border: none;
  color: var(--texto-4);
  font-size: 1.3em;
  line-height: 1;
  cursor: pointer;
}

.panel-detalle .cerrar:hover { color: var(--texto); }
.panel-detalle h4 { margin: 6px 0 12px; }
.panel-detalle .boton { width: 100%; margin-top: 14px; }

@media (max-width: 960px) {
  .lista-con-panel { grid-template-columns: 1fr; }
  .panel-detalle { position: static; }
}

/* Entrar a una cuenta contable (ficha-cuenta.js, db/867): el panel que sube
   desde abajo a la derecha, como en ncalmahotels.web.app (presupuestos),
   «pulsa un importe y ves de qué facturas sale». Un solo elemento en toda la
   página, se reutiliza cada vez que se abre. */
.panel-cuenta {
  position: fixed; right: 0; bottom: 0; width: min(420px, 100%); z-index: 60;
  background: var(--superficie-alta); border-top: 1px solid var(--borde-medio);
  border-left: 1px solid var(--borde-medio); border-radius: var(--radio) 0 0 0;
  box-shadow: var(--sombra-alta); padding: 18px 20px 16px; max-height: 80vh; overflow-y: auto;
  transform: translateY(102%); transition: transform .18s ease;
}
.panel-cuenta.abierto { transform: none; }
@media (prefers-reduced-motion: reduce) { .panel-cuenta { transition: none; } }
.panel-cuenta h3 { margin: 0 0 3px; font-size: 1.05em; }
.panel-cuenta p { margin: 7px 0; color: var(--texto-3); font-size: .85em; }
.panel-cuenta .cerrar { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.2em; color: var(--texto-4); cursor: pointer; line-height: 1; }
.panel-cuenta .cerrar:hover { color: var(--texto); }
.panel-cuenta .cuenta-volver { display: block; width: auto; height: auto; background: none; border: none; color: var(--acento); font-size: .85em; font-weight: 600; cursor: pointer; padding: 0 0 4px; white-space: nowrap; }
ol.lista-apuntes { list-style: none; margin: 0; padding: 0; }
ol.lista-apuntes li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: .85em; }
ol.lista-apuntes li:last-child { border-bottom: none; }
ol.lista-apuntes .apunte-q { flex: 1; min-width: 0; }
ol.lista-apuntes .apunte-q b { display: block; font-weight: 600; overflow-wrap: anywhere; cursor: default; }
ol.lista-apuntes .apunte-q b.pulsable { cursor: pointer; color: var(--acento); }
ol.lista-apuntes .apunte-q b.pulsable:hover { text-decoration: underline; }
ol.lista-apuntes .cuando { font-size: .82em; color: var(--texto-4); margin-top: 2px; }
ol.lista-apuntes .apunte-fin { text-align: right; }
ol.lista-apuntes .apunte-imp { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
ol.lista-apuntes .apunte-imp.pos { color: var(--verde); }
ol.lista-apuntes .apunte-imp.neg { color: var(--rojo); }
ol.lista-apuntes .apunte-fin .boton-plano { margin-top: 3px; font-size: .92em; }
.apunte-total { display: flex; justify-content: space-between; font-weight: 700; padding: 9px 0; font-size: .85em; border-top: 1px solid var(--borde-medio); margin-top: 2px; }

/* =====================================================================
   Menú lateral por módulos
   =====================================================================
   El chevron y el nombre son dos zonas de pulsación distintas en la misma
   fila: una despliega, la otra navega. Por eso la fila es un flex con el
   chevron fuera del botón y no dentro. */

.menu-fila {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.menu-fila .lateral-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.menu-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-chevron {
  width: 22px;
  flex: 0 0 22px;
  background: none;
  border: none;
  color: var(--texto-5);
  font-size: 0.7em;
  cursor: pointer;
  border-radius: var(--radio-s);
  transition: var(--transicion);
}

.menu-chevron:hover {
  color: var(--dorado);
  background: rgba(60, 45, 30, 0.04);
}

/* El contador es lo pendiente para quien mira. Discreto: si grita, deja de
   leerse el nombre, que es lo que se busca al mirar el menú. */
.menu-contador {
  flex: 0 0 auto;
  min-width: 18px;
  text-align: right;
  color: var(--texto-4);
  font-size: 0.74em;
  font-variant-numeric: tabular-nums;
}

/* El punto rojo dice que algo de ahí ya venció, y es otra cosa que el número:
   un módulo puede tener cero pendientes y punto rojo. */
.menu-contador.rojo::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--rojo);
  vertical-align: middle;
}

.menu-hijos {
  margin: 2px 0 8px 22px;
  padding-left: 8px;
  border-left: 1px solid var(--borde);
}

.menu-hijo {
  font-size: 0.86em;
  padding-top: 6px;
  padding-bottom: 6px;
}

.menu-seccion {
  margin: 10px 0 4px;
  color: var(--texto-5);
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* Un módulo sin panel propio se ve, pero se nota que no lleva a ningún sitio:
   enseñar que existe y llevarte a una pantalla en blanco son cosas distintas. */
.lateral-item.sin-pantalla .menu-nombre { color: var(--texto-4); }

.lateral-item.con-punto .menu-nombre::before {
  content: '●';
  margin-right: 8px;
  color: var(--dorado);
  font-size: 0.6em;
  vertical-align: middle;
}

/* =====================================================================
   Panel de control de un módulo
   ===================================================================== */

/* La zona de atención: como mucho tres avisos. Si hubiera diez, no habría
   ninguno — dejarían de leerse. */
.aviso-franja {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px 16px;
  background: var(--superficie);
  border-left: 3px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  font-size: 0.88em;
  line-height: 1.5;
}

.aviso-rojo { border-left-color: var(--rojo); }
.aviso-ambar { border-left-color: var(--naranja); }
.aviso-rojo .aviso-punto { color: var(--rojo); }
.aviso-ambar .aviso-punto { color: var(--naranja); }

.aviso-punto {
  flex: 0 0 auto;
  font-size: 0.6em;
  line-height: 2.2;
}

/* Los dos a cuatro números de una tarjeta de submódulo. */
.tarjeta-numeros {
  display: flex;
  gap: 22px;
  margin: 12px 0 4px;
}

.tarjeta-valor {
  font-size: 1.45em;
  font-weight: 300;
  letter-spacing: -0.5px;
}

.tarjeta-etiqueta {
  color: var(--texto-4);
  font-size: 0.7em;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* =====================================================================
   TEMA CLARO CÁLIDO (04/10/2026)

   Decisión de Alberto: más cálido y más cerca de las aplicaciones cloud de
   trabajo (Salesforce, Notion) que del portal oscuro de hoteles. Fondo arena,
   superficies blancas con sombra suave, acento terracota, títulos en
   minúscula normal. Solo Homes; hoteles sigue oscuro hasta que se decida.

   Esta capa va al final a propósito: ajusta los componentes principales sin
   reescribir las reglas de cada pantalla, que ya leen la paleta de :root.
   ===================================================================== */

body { background: var(--fondo); color: var(--texto); }
::selection { background: var(--acento-suave); color: var(--texto); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---- Cabecera: barra blanca fija, como una app de trabajo ------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 12px 24px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 1px 2px rgba(43, 38, 33, 0.04);
  animation: none;
}
.cabecera h1 { font-size: 1.1em; }
.cabecera .sub {
  color: var(--texto-4);
  font-size: 0.82em;
  letter-spacing: 0;
  text-transform: none;
}
.pastilla {
  background: var(--acento-suave);
  color: var(--acento);
  border: 0;
  letter-spacing: 0.3px;
  text-transform: capitalize;
}
.enlace { letter-spacing: 0; text-transform: none; }
.hamburguesa {
  background: var(--superficie);
  border: 1px solid var(--borde-medio);
  border-radius: var(--radio-s);
}
.hamburguesa:hover { background: var(--fondo-suave); }

/* La barra de pestañas del módulo queda pegada bajo la cabecera. */
.subnav {
  top: 63px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--borde);
}
.subnav-pestana { color: var(--texto-3); font-weight: 500; }
.subnav-pestana:hover { background: var(--fondo-suave); color: var(--texto); }
.subnav-pestana.activa { background: var(--acento-suave); color: var(--acento); font-weight: 600; }

main { padding: 24px; animation: none; }

/* ---- Menú lateral ----------------------------------------------------- */
#velo { background: rgba(43, 38, 33, 0.28); }
#lateral { background: var(--superficie); box-shadow: var(--sombra-alta); }
.lateral-cabecera { background: var(--fondo-suave); }
.lateral-cabecera strong { color: var(--acento); letter-spacing: 0.4px; text-transform: none; font-size: 0.95em; }
.grupo h3 { color: var(--texto-4); letter-spacing: 0.6px; font-size: 0.68em; }
.lateral-item { color: var(--texto-2); font-size: 0.9em; border-radius: 0 8px 8px 0; }
.lateral-item:hover { background: var(--fondo-suave); }
.lateral-item.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }

/* ---- Superficies: tarjetas blancas con sombra suave ------------------ */
.kpi, .doc, .panel-card, .panel-tile, .tarjeta-acceso,
.tabla-usuarios, .formulario, .ficha-cabecera, .chip-menu {
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.kpi:hover, .doc-pulsable:hover, .kpi-pulsable:hover, .panel-card:hover {
  border-color: var(--borde-medio);
  box-shadow: var(--sombra-alta);
}
.kpi::before { background: var(--kpi-color, var(--acento)); opacity: 1; }
.kpi-label, .kpi-etiqueta {
  color: var(--texto-3);
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.kpi-valor, .kpi-value { color: var(--texto); }
.kpi-rojo .kpi-valor { color: var(--rojo-texto); }
.kpi-ambar .kpi-valor { color: var(--ambar-texto); }
/* Un tile pulsable que de verdad filtra la lista de abajo (comunes.js, kpi): marcado mientras su filtro está activo. */
.kpi-activo { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.kpi-activo .kpi-valor, .kpi-activo .kpi-etiqueta { color: var(--acento); }

/* ---- Títulos: tamaño y peso, no mayúsculas espaciadas ---------------- */
.panel-titulo {
  color: var(--texto);
  font-size: 1.5em;
  font-weight: 650;
  letter-spacing: -0.3px;
  text-transform: none;
}
.titulo-seccion, .titulo-seccion h2, .titulo-seccion h3 {
  color: var(--texto);
  letter-spacing: -0.1px;
  text-transform: none;
}

/* ---- Botones ---------------------------------------------------------- */
.boton, .boton-primario {
  background: var(--acento);
  color: #ffffff;
  border: 1px solid var(--acento);
  border-radius: var(--radio-s);
  letter-spacing: 0;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(168, 83, 47, 0.25);
}
.boton:hover:not(:disabled), .boton-primario:hover:not(:disabled) {
  background: var(--acento-hover);
  border-color: var(--acento-hover);
  opacity: 1;
}
.boton-plano { color: var(--acento); font-weight: 500; letter-spacing: 0; }
.boton-plano:hover { color: var(--acento-hover); text-decoration: underline; }

/* ---- Filtros y fichas ------------------------------------------------- */
.filtros .chip {
  background: var(--superficie);
  border-color: var(--borde-medio);
  color: var(--texto-2);
  letter-spacing: 0;
}
.filtros .chip:hover { border-color: var(--borde-fuerte); background: var(--fondo-suave); }
.filtros .chip-activo {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
  font-weight: 600;
}
.chip { letter-spacing: 0.2px; }

/* ---- Tablas: cabecera arena, filas blancas --------------------------- */
.tabla-usuarios th, .tabla th {
  background: var(--fondo-suave);
  color: var(--texto-3);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.tabla-usuarios tbody tr:hover, .tabla tbody tr:hover { background: #fbf9f6; }

/* ---- Campos ----------------------------------------------------------- */
input, select, textarea {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde-medio);
  border-radius: var(--radio-s);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--acento);
  outline: none;
  box-shadow: 0 0 0 3px var(--acento-suave);
}

/* ---- Navegación y avisos --------------------------------------------- */
.migas, .miga { color: var(--texto-4); }
.miga:hover { color: var(--acento); }
.miga.actual { color: var(--texto); font-weight: 600; }
.aviso, .bloqueo {
  background: #fdf3e7;
  color: var(--ambar-texto);
  border: 1px solid #f1d9b8;
  border-radius: var(--radio);
}
.alerta { color: var(--rojo-texto); }
.vacio { color: var(--texto-3); }

/* ---- Acceso ----------------------------------------------------------- */
.acceso { background: var(--fondo); }
.boton-google { border: 1px solid var(--borde-medio); box-shadow: var(--sombra); }
.boton-google:hover:not(:disabled) { box-shadow: var(--sombra-alta); }

/* ---- Tarjetas de área: rejilla, y el estado se lee en el borde ------- */
/* Una lista de tarjetas pulsables (las áreas del cuadro de mando) va en
   rejilla; una lista de lectura (la bandeja) sigue en columna. */
.doc-lista:has(> .doc-pulsable) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.doc { border-radius: var(--radio); }
.doc-tipo {
  color: var(--texto-4);
  letter-spacing: 0;
  text-transform: none;
}
/* En el tema oscuro «bloqueado» atenuaba; aquí un área con plazos vencidos
   no puede parecer desactivada: se marca en rojo y se ve entera. */
.doc.tile-bloqueado { opacity: 1; border-left: 3px solid var(--rojo); }
.doc.tile-desarrollo { border-left: 3px solid var(--amarillo); }
.doc.tile-activo { border-left: 3px solid var(--verde); }
.doc .panel-tile-falta { color: var(--texto-3); }
.bloqueo {
  margin: 16px 0;
  padding: 12px 16px;
  font-size: 0.88em;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .cabecera { padding: 10px 16px; }
  main { padding: 16px; }
}

/* =====================================================================
   NAVEGACIÓN (04/10/2026)

   El patrón de las aplicaciones de trabajo actuales: barra lateral fija en
   escritorio con iconos y lo pendiente, barra superior limpia con el título
   y la búsqueda global (Ctrl K), y las pantallas del módulo en pestañas. En
   el móvil la barra lateral es un cajón.
   ===================================================================== */

.icono { width: 18px; height: 18px; flex: none; }
kbd {
  padding: 1px 6px;
  background: var(--superficie);
  color: var(--texto-4);
  border: 1px solid var(--borde-medio);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.72em;
  font-weight: 500;
}

/* ---- Barra lateral ---------------------------------------------------- */
#lateral {
  width: 264px;
  left: -280px;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
}
#lateral.abierto { left: 0; }

.lateral-cabecera {
  gap: 10px;
  justify-content: flex-start;
  padding: 18px 16px 12px;
  background: none;
  border-bottom: 0;
}
.lateral-logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--acento);
  color: #ffffff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95em;
}
.lateral-cabecera strong {
  color: var(--texto);
  font-size: 0.98em;
  font-weight: 650;
  letter-spacing: -0.1px;
  text-transform: none;
}
.lateral-cerrar { margin-left: auto; display: grid; place-items: center; }

#menu { flex: 1; overflow-y: auto; padding-bottom: 8px; }
.grupo { padding: 10px 8px 2px; }
.grupo h3 {
  padding: 0 12px 6px;
  color: var(--texto-5);
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.6px;
}
.lateral-item {
  gap: 10px;
  margin: 1px 0;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radio-s);
  color: var(--texto-2);
  font-size: 0.9em;
  font-weight: 500;
}
.lateral-item .icono { color: var(--texto-4); }
.lateral-item:hover { background: var(--fondo-suave); color: var(--texto); }
.lateral-item.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.lateral-item.activo .icono { color: var(--acento); }

.menu-contador {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  background: var(--fondo-suave);
  color: var(--texto-3);
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.menu-contador:empty:not(.rojo) { display: none; }
.menu-contador.rojo { background: #fbe4e1; color: var(--rojo-texto); }
.menu-contador.rojo:empty { min-width: 8px; width: 8px; height: 8px; padding: 0; background: var(--rojo); }

.lateral-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--borde);
}
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  background: var(--acento-suave);
  color: var(--acento);
  border-radius: 50%;
  font-size: 0.78em;
  font-weight: 700;
}
.lateral-quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#quien { color: var(--texto); font-size: 0.86em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rol { color: var(--texto-4); font-size: 0.76em; }
.lateral-salir {
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: 6px;
  background: none;
  color: var(--texto-4);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.lateral-salir:hover { background: var(--fondo-suave); color: var(--texto); }

/* ---- Barra superior --------------------------------------------------- */
.cabecera {
  flex-wrap: nowrap;
  gap: 16px;
  min-height: 60px;
  padding: 10px 24px;
}
.cabecera .marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cabecera-titulo {
  color: var(--texto);
  font-size: 1.15em;
  font-weight: 650;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cabecera-buscar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 300px;
  margin-left: auto;
  padding: 7px 12px;
  background: var(--fondo);
  color: var(--texto-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  font: inherit;
  font-size: 0.88em;
  cursor: pointer;
}
.cabecera-buscar:hover { border-color: var(--borde-medio); color: var(--texto-3); }
.cabecera-buscar kbd { margin-left: auto; }
.subnav { top: 60px; }

/* ---- Búsqueda global ------------------------------------------------- */
.buscador-fondo {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 0;
  background: rgba(43, 38, 33, 0.3);
  backdrop-filter: blur(2px);
}
.buscador {
  width: min(640px, 100%);
  background: var(--superficie);
  border-radius: 14px;
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.buscador-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
}
.buscador-lupa { color: var(--texto-4); }
.buscador-input,
.buscador-input:focus {
  flex: 1;
  padding: 4px 0;
  background: none;
  border: 0;
  box-shadow: none;
  outline: none;
  font: inherit;
  font-size: 1em;
}
/* ---- Módulos desplegables -------------------------------------------- */
.menu-cabeza { display: flex; align-items: center; gap: 2px; }
.menu-cabeza .lateral-item { flex: 1; min-width: 0; }
.menu-chevron {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  color: var(--texto-4);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.menu-chevron:hover { background: var(--fondo-suave); color: var(--texto); }
.menu-chevron .icono { width: 16px; height: 16px; transition: transform 0.18s ease; }
.menu-modulo.abierto .menu-chevron .icono { transform: rotate(90deg); }
.menu-hijos {
  display: none;
  margin: 2px 0 6px 21px;
  padding-left: 10px;
  border-left: 1px solid var(--borde);
}
.menu-modulo.abierto .menu-hijos { display: block; }
.lateral-item.menu-hijo {
  padding: 5px 10px;
  color: var(--texto-3);
  font-size: 0.86em;
  font-weight: 450;
}
.lateral-item.menu-hijo.activo { color: var(--acento); font-weight: 600; }
.lateral-item.activo-padre { color: var(--texto); font-weight: 600; }
.lateral-item.activo-padre .icono { color: var(--acento); }
.menu-seccion {
  padding: 8px 10px 2px;
  color: var(--texto-5);
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.buscador-esc { cursor: pointer; }
.buscador-input::-webkit-search-cancel-button { display: none; }

/* Las cifras de un panel caben en una fila con la barra lateral al lado. */
.kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi-valor { white-space: nowrap; font-size: clamp(1.35em, 2.2vw, 1.7em); }
.buscador-lista { max-height: 52vh; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.buscador-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radio-s);
  cursor: pointer;
}
.buscador-item .icono { color: var(--texto-4); }
.buscador-item.sel { background: var(--acento-suave); }
.buscador-item.sel .icono { color: var(--acento); }
.buscador-texto { display: flex; flex-direction: column; min-width: 0; }
.buscador-titulo { color: var(--texto); font-size: 0.92em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador-sub { color: var(--texto-4); font-size: 0.78em; }
.buscador-vacio { padding: 18px; color: var(--texto-4); text-align: center; }

/* ---- Escritorio: la barra lateral se queda ---------------------------- */
@media (min-width: 1024px) {
  body.con-sesion #lateral {
    left: 0;
    box-shadow: none;
    z-index: 50;
  }
  body.con-sesion #app { margin-left: 264px; }
  body.con-sesion .hamburguesa,
  body.con-sesion .lateral-cerrar,
  body.con-sesion #velo { display: none; }
}

/* ---- Móvil: cajón, y la búsqueda se queda en icono ------------------ */
@media (max-width: 1023px) {
  .cabecera-buscar { min-width: 0; padding: 8px; }
  .cabecera-buscar-texto, .cabecera-buscar kbd { display: none; }
}
@media (max-width: 640px) {
  .cabecera { min-height: 56px; }
  .subnav { top: 56px; }
}

/* =====================================================================
   POSTVENTA · VISITA DE PRE-ENTREGA (web/visitas.js)
   Para el móvil del PM en la obra: botones grandes, una mano, sol de frente.
   ===================================================================== */
.pv-cabecera { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pv-cabecera .boton-plano { align-self: flex-start; }
.pv-titulo { margin: 4px 0 0; font-size: 22px; }
.pv-cuenta { margin: 0; font-weight: 600; color: var(--texto-2); }
.pv-chip-curso { background: var(--acento-suave); color: var(--acento-hover); align-self: flex-start; }
.pv-chip-cerrada { background: #e6f4ea; color: var(--verde-texto); align-self: flex-start; }

.pv-buscar {
  width: 100%; max-width: 420px; padding: 12px 14px; font-size: 16px;
  border: 1px solid var(--borde-medio); border-radius: var(--radio-s); background: var(--superficie);
}

.pv-selector { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-opcion, .pv-estancia {
  min-height: 44px; padding: 8px 14px; font-size: 15px; cursor: pointer;
  border: 1px solid var(--borde-medio); border-radius: 999px;
  background: var(--superficie); color: var(--texto-2); white-space: nowrap;
}
.pv-opcion.activo, .pv-estancia.activo {
  background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600;
}

.pv-viviendas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pv-vivienda {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.pv-vivienda-nombre strong { font-size: 16px; }
.pv-vivienda-estado { display: flex; flex-wrap: wrap; gap: 6px; }

.pv-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pv-acciones .boton, .pv-acciones .boton-primario { min-height: 44px; }

/* La tira de estancias se desplaza de lado. */
.pv-estancias {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 0;
  margin-bottom: 12px; background: var(--fondo);
  scrollbar-width: none;
}
.pv-estancias::-webkit-scrollbar { display: none; }

.pv-form {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; margin-bottom: 16px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  box-shadow: var(--sombra);
}
.pv-form-donde { font-weight: 600; color: var(--acento-hover); }
.pv-texto, .pv-gremio {
  width: 100%; padding: 12px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--borde-medio); border-radius: var(--radio-s); background: var(--superficie);
}
.pv-texto { resize: vertical; min-height: 84px; }
.pv-fila { display: flex; gap: 8px; }
.pv-fila .boton { flex: 1; min-height: 48px; font-size: 16px; }
.pv-fila .boton.activo { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.pv-etiqueta { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-4); margin-top: 4px; }
.pv-sugerencia { padding: 8px 12px; border-radius: var(--radio-s); background: var(--acento-suave); color: var(--texto-2); font-size: 14px; }
.pv-guardar { min-height: 52px; font-size: 17px; margin-top: 6px; }

.pv-fotos { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-foto { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radio-s); background: var(--fondo-suave); cursor: zoom-in; }
.pv-foto-falla { outline: 1px dashed var(--borde-fuerte); }
video.pv-foto { width: 160px; height: 120px; cursor: default; }

/* El hilo de comentarios de una incidencia (db/606): equipo, comprador e industrial. */
.pv-hilo { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); }
.pv-hilo-titulo { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-4); }
.pv-hilo-lista { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.pv-msg { padding: 8px 10px; border-radius: var(--radio-s); background: var(--fondo-suave); font-size: 14px; }
.pv-msg-mio { background: var(--acento-suave); align-self: flex-end; max-width: 90%; }

.pv-repasos { display: flex; flex-direction: column; gap: 10px; }
.pv-repaso {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.pv-repaso.pv-urgente { border-left: 4px solid var(--rojo); }
.pv-repaso.pv-hecho .pv-repaso-texto { text-decoration: line-through; color: var(--texto-4); }
.pv-repaso-texto { font-size: 15px; line-height: 1.4; }
.pv-borrar { color: var(--rojo-texto); }

.pv-pie { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 40px; }
.pv-pie .boton, .pv-pie .boton-primario { min-height: 48px; }

.pv-acta { background: #fff; padding: 24px; border-radius: var(--radio); max-width: 900px; }
.pv-acta h2 { margin-top: 0; }
.pv-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; }
.pv-firma-linea { border-bottom: 1px solid var(--texto); height: 60px; margin-bottom: 6px; }

@media print {
  #lateral, .cabecera, .subnav, .no-imprimir, #aviso { display: none !important; }
  #app { margin-left: 0 !important; }
  body { background: #fff; }
  .pv-acta { padding: 0; box-shadow: none; }
}
.boton.pv-sec { background: var(--superficie); color: var(--texto-2); border: 1px solid var(--borde-medio); box-shadow: none; font-size: 15px; }
.boton.pv-sec:hover:not(:disabled) { background: var(--fondo-suave); }
.pv-acciones .boton, .pv-pie .boton { font-size: 15px; }
.pv-acta table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.pv-acta th, .pv-acta td { padding: 8px 10px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.pv-acta td.num { width: 32px; text-align: right; color: var(--texto-4); }

/* ---- Postventa · tablero y ficha de vivienda (web/postventa.js) ---- */
.pv-filtros { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.pv-filtro-viv { max-width: 260px; }
.pv-tablero { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 12px; }
.pv-columna { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--radio); background: var(--fondo-suave); min-width: 220px; align-self: start; }
.pv-columna-cab strong { font-size: 14px; }
.pv-columna-n { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--superficie); font-size: 12px; font-weight: 600; }
.pv-tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-s); cursor: pointer; transition: var(--transicion); }
.pv-tarjeta:hover { box-shadow: var(--sombra); }
.pv-tarjeta.pv-urgente { border-left: 4px solid var(--rojo); }
.pv-tarjeta-texto { font-size: 14px; line-height: 1.35; }
.pv-tarjeta-pie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pv-sla { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borde-medio); color: var(--texto-3); }
.pv-sla-mal { border-color: var(--rojo); color: var(--rojo-texto); }
.pv-sla-aviso { border-color: var(--amarillo); color: var(--ambar-texto); }
.pv-sla-ok { border-color: transparent; background: #e6f4ea; color: var(--verde-texto); }
.pv-etq { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--fondo-suave); color: var(--texto-2); }

.pv-velo { position: fixed; inset: 0; z-index: 100; background: rgba(43, 38, 33, 0.35); display: flex; justify-content: flex-end; }
.pv-panel { width: min(440px, 100%); height: 100%; overflow-y: auto; background: var(--superficie); padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra-alta); }
.pv-panel-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pv-panel-texto { font-size: 16px; line-height: 1.45; margin: 4px 0 8px; }
.pv-campo { display: flex; flex-direction: column; gap: 4px; }

.pv-pulsable { cursor: pointer; }
.pv-pulsable:hover { box-shadow: var(--sombra-alta); }
.pv-borde-rojo { border-left: 4px solid var(--rojo); }
.pv-borde-ambar { border-left: 4px solid var(--amarillo); }

.pv-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.pv-ficha-lado, .pv-ficha-principal { display: flex; flex-direction: column; gap: 16px; }
.pv-caja { padding: 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); display: flex; flex-direction: column; gap: 10px; }
.pv-caja .titulo-seccion { margin: 0; }
.pv-garantia { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
.pv-garantia-nombre { font-weight: 600; font-size: 14px; }
.pv-form-linea { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 900px) {
  .pv-ficha { grid-template-columns: 1fr; }
  .pv-tablero { grid-template-columns: repeat(5, 82vw); scroll-snap-type: x mandatory; }
  .pv-columna { scroll-snap-align: start; }
}
.pv-garantia .kpi-bar { height: 6px; border-radius: 999px; background: var(--fondo-suave); overflow: hidden; }
.pv-garantia .kpi-bar-fill { height: 100%; border-radius: 999px; background: var(--acento); }
.pv-garantia .boton-plano { align-self: flex-start; }

/* ---- La página del industrial (web/industrial.html) ---- */
.ind { background: var(--fondo); margin: 0; }
.ind-cabecera { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.ind-main { max-width: 640px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ind-fecha { max-width: 200px; }

/* ---- Escrituración por unidad (web/escrituracion.js) ---- */
.es-conds { display: flex; flex-wrap: wrap; gap: 6px; }
.es-cond { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--borde-medio); color: var(--texto-3); }
.es-ok { background: #e6f4ea; border-color: #b7e1c4; color: var(--verde-texto); }
.es-no { background: var(--superficie); }
.pv-borde-verde { border-left: 4px solid var(--verde); }
.es-licencia { margin: 14px 0; }
.es-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.es-caja-ok { border-color: #b7e1c4; box-shadow: inset 4px 0 0 var(--verde); }
.es-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.es-cifra-valor { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.es-confirma { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--borde); }
.es-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.es-check input { width: 20px; height: 20px; accent-color: var(--acento); }

/* ---- Portal del comprador (web/portal.html) ---- */
.po-idioma { margin-left: auto; display: flex; gap: 4px; }
.po-lengua { border: 1px solid var(--borde-medio); background: var(--superficie); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.po-lengua.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.ind-main { padding-bottom: 90px; }
.po-pie { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--superficie); border-top: 1px solid var(--borde); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
.po-pestana { min-height: 48px; border: 0; background: none; font-size: 14px; color: var(--texto-3); cursor: pointer; }
.po-pestana.activo { color: var(--acento); font-weight: 600; }
.po-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.po-paso span { display: block; height: 6px; border-radius: 999px; background: var(--fondo-suave); }
.po-paso.hecho span { background: var(--acento); }
.po-paso small { font-size: 11px; color: var(--texto-4); }
.po-paso.actual small { color: var(--texto); font-weight: 600; }
.po-validar { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.po-garantia { padding: 8px 10px; border-radius: var(--radio-s); background: var(--fondo-suave); font-size: 14px; }

/* ---- Ciclo UTR (web/utr.js) ---- */
.utr-pasos { display: flex; flex-wrap: wrap; gap: 4px; }
.utr-paso { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--fondo-suave); color: var(--texto-4); }
.utr-paso.hecho { background: #e6f4ea; color: var(--verde-texto); }
.utr-paso.actual { background: var(--acento); color: #fff; font-weight: 600; }
.utr-tabla td, .utr-tabla th { white-space: nowrap; }

/* ---- Legal · lista de expedientes de un área (revisión 04/10/2026) ---- */
.exp-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 14px; }
.exp-barra .filtros { margin: 0; }
.exp-buscar { flex: 1 1 260px; min-width: 0; padding: 10px 12px; font-size: 15px; border: 1px solid var(--borde-medio); border-radius: var(--radio-s); background: var(--superficie); }
.exp-orden { padding: 10px 12px; font-size: 14px; border: 1px solid var(--borde-medio); border-radius: var(--radio-s); background: var(--superficie); }
.exp-lista { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.exp-cuenta { margin-bottom: 2px; }
.exp-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px; background: var(--superficie); border: 1px solid var(--borde);
  border-left: 4px solid var(--borde-medio); border-radius: var(--radio); cursor: pointer; transition: var(--transicion);
}
.exp-fila:hover { box-shadow: var(--sombra); }
.exp-fila.fila-activa { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.exp-fila.exp-alto { border-left-color: var(--rojo); }
.exp-fila.exp-medio { border-left-color: var(--amarillo); }
.exp-fila.exp-bajo { border-left-color: var(--verde); }
.exp-fila-cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.exp-fila-arriba { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.exp-fila-codigo { font-size: 12px; color: var(--texto-4); }
.exp-fila-titulo { font-size: 16px; font-weight: 600; line-height: 1.3; }
.exp-fila-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.exp-plazo { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--fondo-suave); white-space: nowrap; }
.exp-importe { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.exp-resumen { font-size: 14px; color: var(--texto-2); line-height: 1.45; }
@media (max-width: 900px) {
  .exp-fila { grid-template-columns: 1fr; gap: 8px; }
  .exp-fila-lado { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; }
  .exp-orden { flex: 1 1 100%; }
}
.exp-plazo.sit-vencido { background: #fdecea; color: var(--rojo-texto); }
.exp-plazo.sit-proximo { background: #fff4e5; color: var(--ambar-texto); }
.exp-plazo.sit-lejano { color: var(--texto-3); }
.chip-menu { max-height: 60vh; overflow-y: auto; }

/* ---- Legal · ficha de expediente como mesa de trabajo (revisión 04/10/2026) ---- */
.fx-cab { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; margin-bottom: 14px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra); }
.fx-linea { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fx-linea .mono { font-size: 12px; color: var(--texto-4); margin-right: 4px; }
.fx-titulo { margin: 2px 0 0; font-size: 26px; line-height: 1.2; }
.fx-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.fx-acciones .responsable-fila { margin: 0; }
.fx-acciones .boton { min-height: 40px; }
.fx-traspaso { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-traspaso[hidden] { display: none; }
.fx-editar { border-top: 1px solid var(--borde); padding-top: 12px; margin-top: 6px; }
.fx-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fx-datos .fx-ancho, .fx-datos .propuesta-acciones { grid-column: 1 / -1; }
.fx-datos textarea { width: 100%; font: inherit; padding: 10px; border: 1px solid var(--borde-medio); border-radius: var(--radio-s); }
.fx-escalera { margin-bottom: 14px; }
.fx-escalera .escalon { cursor: pointer; border: 0; font: inherit; }
.fx-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 10px; }
.fx-cifra { padding: 12px 14px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.fx-cifra-valor { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-cifra.fx-rojo .fx-cifra-valor { color: var(--rojo-texto); }
.fx-cifra.fx-ambar .fx-cifra-valor { color: var(--ambar-texto); }
.fx-falta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--radio-s); background: #fff4e5; color: var(--ambar-texto); font-size: 14px; }
.fx-mesa { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.fx-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fx-texto { white-space: pre-wrap; line-height: 1.5; margin: 0; }
.fx-apuntar .formulario { display: grid; grid-template-columns: 1fr 160px 160px; gap: 8px; align-items: end; }
.fx-apuntar .formulario .propuesta-acciones { grid-column: 1 / -1; }
.fx-cronologia { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--borde); display: flex; flex-direction: column; gap: 14px; }
.fx-cronologia li { position: relative; }
.fx-cronologia li::before { content: ''; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.fx-cro-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.fx-plazo { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.fx-plazo-fecha { font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-plazo.sit-vencido .fx-plazo-fecha { color: var(--rojo-texto); }
.fx-plazo.sit-proximo .fx-plazo-fecha { color: var(--ambar-texto); }
/* Tachado lo que ya no corre, pero sus botones (Reabrir) se leen enteros. */
.fx-plazo-hecho > :not(.fx-plazo-acc) { opacity: 0.55; text-decoration: line-through; }
/* Las acciones de un plazo o una tarea, en su propia línea: caben a 390 px. */
.fx-plazo-acc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; }
.venc .fx-plazo-acc { margin-top: 6px; }
.fx-tarea { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.fx-tarea.fx-rojo span:first-child { color: var(--rojo-texto); }
.fx-desplegable > summary { cursor: pointer; color: var(--acento-hover); font-weight: 600; list-style: none; padding: 4px 0; }
.fx-desplegable > summary::-webkit-details-marker { display: none; }
details.pv-caja.fx-desplegable > summary { color: var(--texto); }
.fx-donut-wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; padding: 10px 0 18px; }
.fx-donut-circulo { position: relative; width: 150px; height: 150px; border-radius: 50%; flex: none; }
.fx-donut-circulo::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; background: var(--fondo); }
.fx-donut-centro { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.fx-donut-centro b { font-size: 1.05em; }
.fx-donut-centro span { font-size: .7em; color: var(--texto-3); }
.fx-donut-leyenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; }
.fx-donut-leyenda li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--borde); cursor: pointer; font-size: .85em; }
.fx-donut-leyenda li:hover, .fx-donut-leyenda li:focus-visible { background: var(--fondo-suave); }
.fx-donut-sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.fx-donut-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-donut-pct { color: var(--texto-3); min-width: 38px; text-align: right; }
.fx-spark { display: block; width: 100%; height: 28px; margin-top: 6px; color: var(--acento, #2b6c8f); }
@media (max-width: 1000px) {
  .fx-mesa { grid-template-columns: 1fr; }
  .fx-apuntar .formulario { grid-template-columns: 1fr; }
  .fx-titulo { font-size: 22px; }
}
.fx-apuntar textarea { width: 100%; font: inherit; padding: 10px; border: 1px solid var(--borde-medio); border-radius: var(--radio-s); resize: vertical; }
.fx-dropbox { display: block; text-align: center; text-decoration: none; }
.fx-ruta { word-break: break-all; font-size: 12px; }
.pv-caja > a.boton { text-decoration: none; text-align: center; }

/* ---- El asesor del asunto (db/97) ---- */
.fx-fases { margin-top: -6px; }
.fx-fases .escalon { font-size: 13px; }
.fx-asesor { border-color: var(--acento-suave); background: linear-gradient(180deg, var(--acento-suave), var(--superficie) 90px); }
.fx-asesor-cab { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.fx-asesor-cab .titulo-seccion { margin: 0; }
.fx-sug { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin-top: 10px; background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte); border-radius: var(--radio-s); }
.fx-sug-alta { border-left-color: var(--rojo); }
.fx-sug-media { border-left-color: var(--amarillo); }
.fx-sug-titulo { font-weight: 600; }
.fx-sug .exp-datos { margin: 4px 0; }
.fx-sug .pv-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.fx-borrador { white-space: pre-wrap; font: 13px/1.5 ui-monospace, Consolas, monospace; background: var(--fondo-suave); padding: 10px; border-radius: var(--radio-s); max-height: 360px; overflow: auto; margin: 6px 0 0; }
.fx-sug-resuelta { padding: 4px 0; }

/* ---- Organigrama (web/organigrama.js) ---- */
.org-barra { justify-content: space-between; margin-bottom: 12px; }
.org-arbol, .org-arbol ul { list-style: none; margin: 0; padding: 0; }
.org-arbol ul { margin-left: 22px; padding-left: 18px; border-left: 2px solid var(--borde); }
.org-arbol li { position: relative; margin: 8px 0; }
.org-arbol ul > li::before { content: ''; position: absolute; left: -18px; top: 26px; width: 16px; border-top: 2px solid var(--borde); }
.org-persona {
  display: inline-flex; flex-direction: column; gap: 2px; min-width: 240px; max-width: 100%;
  padding: 10px 14px; background: var(--superficie); border: 1px solid var(--borde);
  border-left: 5px solid var(--org-color, var(--borde-fuerte)); border-radius: var(--radio);
}
.org-editable { cursor: pointer; }
.org-editable:hover { box-shadow: var(--sombra); }
.org-nombre { font-weight: 600; }
.org-usuario { align-self: flex-start; margin-top: 4px; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--fondo-suave); color: var(--texto-4); }
.org-usuario.si { background: #e6f4ea; color: var(--verde-texto); }
.org-form { margin-bottom: 16px; max-width: 560px; }
@media (max-width: 640px) { .org-persona { min-width: 0; width: 100%; } .org-arbol ul { margin-left: 8px; padding-left: 12px; } }

/* ---- Retenciones: ficha de contratista e informes (web/retenciones.js) ---- */
.exp-barra input[type="search"] { min-width: 260px; flex: 1; }
.sem { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sem-verde { background: #e6f4ea; color: var(--verde-texto); }
.sem-amarillo { background: #fff4e5; color: var(--ambar-texto); }
.sem-rojo { background: #fdecea; color: var(--rojo-texto); }
.sem-gris { background: var(--fondo-suave); color: var(--texto-4); }
.inf-desliza { overflow-x: auto; margin-bottom: 14px; }
.inf-tabla td { vertical-align: top; font-size: 14px; }
.inf-fuerte { font-weight: 600; }
.informe { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); padding: 20px 24px; margin-bottom: 24px; }
.inf-titulo { font-size: 22px; margin: 0 0 6px; }

/* Cada parte («## …») de un informe se pliega (web/informes-previos.js, pintaMarkdown). */
.inf-seccion { margin: 6px 0; }
.inf-seccion-titulo {
  cursor: pointer; list-style: none; font-size: 18px; font-weight: 600;
  padding: 10px 0 6px; margin-top: 12px; border-top: 1px solid var(--borde);
}
.inf-seccion-titulo::-webkit-details-marker { display: none; }
.inf-seccion-titulo::before {
  content: '▸'; display: inline-block; width: 1em; margin-right: 6px; color: var(--texto-4);
  transition: transform 0.15s;
}
.inf-seccion[open] > .inf-seccion-titulo::before { transform: rotate(90deg); }
.inf-seccion-barra { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 4px; }
.inf-leyenda { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inf-h3 { font-size: 18px; margin: 22px 0 8px; padding-top: 12px; border-top: 1px solid var(--borde); }
.inf-h4 { font-size: 15px; margin: 14px 0 6px; }
.inf-pregunta { margin: 6px 0; }
.inf-pregunta > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.inf-pediria, .inf-clave { background: var(--acento-suave); border-radius: var(--radio-s); padding: 12px 14px; margin: 10px 0; }
.inf-clave { background: #e6f4ea; }
.inf-lista li { margin: 6px 0; line-height: 1.5; }
.inf-tareas dd { margin-bottom: 8px; }
.inf-estado { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.chip.inf-estado-borrador { background: var(--fondo-suave); }
.chip.inf-estado-revisado { background: #fff4e5; color: var(--ambar-texto); }
.chip.inf-estado-definitivo { background: #e6f4ea; color: var(--verde-texto); }
.inf-lista-informes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.inf-item { text-decoration: none; color: var(--texto); padding: 6px 10px; border-radius: var(--radio-s); }
.inf-item.activo, .inf-item:hover { background: var(--fondo-suave); }
.inf-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; align-items: end; padding: 10px 0; }
.inf-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
@media (max-width: 640px) { .informe { padding: 14px; } .exp-barra input[type="search"] { min-width: 0; } }

/* ---- Tesorería (web/tesoreria.js) ---- */
.tes-avisos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tes-aviso { padding: 8px 12px; border-radius: var(--radio-s); font-size: 14px; }
.tes-rojo { background: #fdecea; color: var(--rojo-texto); }
.tes-ambar { background: #fff4e5; color: var(--ambar-texto); }
.tes-ambar-texto { color: var(--ambar-texto); }
.tes-sociedad summary { flex-wrap: wrap; }
.tes-sociedad .boton-plano { margin-right: 6px; }

/* ---- Sociedades: estructura y accionistas (web/sociedades.js) ---- */
.soc-arbol { margin-bottom: 18px; }
.soc-raiz { border-left-color: var(--acento); background: var(--acento-suave); }
.soc-nodo { border-left-color: var(--borde-fuerte); }
.soc-nodo.soc-validada { border-left-color: var(--verde); }
.soc-dudosa { border-style: dashed !important; border-color: var(--rojo) !important; }
.soc-ficha summary { flex-wrap: wrap; }
.soc-lista-part { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.soc-part { padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie); }
.soc-part.soc-dudosa { border-width: 1px; }
.soc-notas { color: var(--ambar-texto); }

/* ---- Controlling: coste a origen y financiaciones (web/controlling.js) ---- */
.ctl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ctl-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ctl-h { margin: 0; font-size: 17px; }
.ctl-grande { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--acento-hover); }
.ctl-barra { display: flex; height: 12px; border-radius: 4px; overflow: hidden; background: var(--fondo-suave); }
.ctl-barra span { display: block; height: 100%; }
.c-obra { background: var(--acento); }
.c-lic { background: var(--amarillo); }
.c-fin { background: var(--rojo); }
/* Checklist del mes (Finanzas, db/206) */
.ctl-ok { background: var(--verde, #2e7d4f); }
.ctl-cert { background: var(--acento); }
/* Justificantes de pago (J1) */
.jus-caja { display: grid; gap: 10px; padding: 26px; border: 2px dashed rgba(60, 45, 30, 0.2); cursor: pointer; text-align: center; }
.jus-caja.jus-encima { border-color: var(--acento); background: var(--fondo-suave); }
/* Presupuesto anual (R8) */
.pa-casilla { width: 90px; text-align: right; padding: 4px 6px; }
/* BP y Waterfall (R5) */
.bp-wf { display: grid; gap: 6px; margin: 10px 0; }
.bp-wf-fila { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; font-size: 0.88rem; }
.bp-wf-mes { font-variant-numeric: tabular-nums; color: var(--texto-3); }
.bp-wf-barra { height: 14px; background: var(--fondo-suave); border-radius: 4px; overflow: hidden; }
.bp-wf-barra span { display: block; height: 100%; background: var(--acento); }
.bp-wf-barra span.bp-pasado { background: var(--texto-4); }
.bp-wf-barra span.bp-sinfecha { background: var(--amarillo); }
.bp-wf-detalle { grid-column: 1 / -1; margin: -2px 0 6px 100px; font-size: 0.82rem; }
.chk-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.chk-filtros > select, .chk-filtros > input { width: auto; min-width: 150px; max-width: 240px; flex: 0 1 auto; }
.chk-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0 18px; }
.chk-grupo { background: #fff; border: 1px solid rgba(60, 45, 30, 0.07); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.chk-grupo-nombre { font-weight: 600; font-size: 0.9rem; }
tr.chk-amarillo > td:first-child { box-shadow: inset 3px 0 0 #f0c34a; }
.ctl-ley { display: grid; gap: 4px; font-size: 13px; }
.ctl-ley div { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; }
.ctl-ley i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.ctl-datos { margin: 4px 0; }
.ctl-fila-soc td { background: var(--fondo-suave); }

/* ---- Propuesta de pagos (web/pagos.js) ---- */
.pp-sociedad { margin: 8px 0; padding: 4px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.pp-sociedad > summary { font-size: 15px; }
.pp-fuera td { opacity: 0.5; text-decoration: line-through; }
.pp-fuera td:last-child { text-decoration: none; opacity: 1; }
.chip.pp-presentada { background: #fff4e5; color: var(--ambar-texto); }
.chip.pp-firmada, .chip.pp-lanzada { background: #e6f4ea; color: var(--verde-texto); }

/* ---- Informes previos de Legal (db/114) ---- */
.ip-nuevo > summary { list-style: none; display: inline-block; margin-bottom: 10px; }
.ip-nuevo > summary::-webkit-details-marker { display: none; }
.ip-form { display: grid; gap: 10px; max-width: 760px; margin-top: 10px; }
.ip-form textarea, .ip-editor { width: 100%; font: inherit; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio-s); box-sizing: border-box; }
.ip-editor { min-height: 60vh; font-family: ui-monospace, Consolas, monospace; font-size: 13px; margin: 8px 0; }
.ip-hoja { max-width: 860px; line-height: 1.6; padding: 18px 22px; }
.ip-hoja p { margin: 8px 0; }
.chip.ip-fuente { font-size: 11px; padding: 1px 6px; margin: 0 2px; text-decoration: none; vertical-align: 1px; }
.fila-pulsable { cursor: pointer; }
.fila-pulsable:hover td { background: var(--fondo-suave); }
@media (max-width: 600px) { .ip-hoja { padding: 12px; } }
/* Comercial › Embudo y visitas (db/142) */
.emb-bloque { padding: 14px 18px; }
.emb-bloque h3 { margin: 0 0 8px; }
.emb-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.emb-fila { display: grid; grid-template-columns: 170px 1fr 70px; align-items: center; gap: 10px; margin: 4px 0; }
.emb-etq { font-size: 13px; }
.emb-barra { height: 10px; border-radius: 5px; background: var(--acento); opacity: .75; min-width: 2px; }
td .emb-barra { height: 4px; margin-top: 3px; opacity: .5; }
.emb-nuevo, .emb-contacto { opacity: .45; }
.emb-caliente, .emb-visita { opacity: 1; }
.emb-sin_noticias { background: var(--borde); opacity: 1; }
@media (max-width: 600px) { .emb-fila { grid-template-columns: 110px 1fr 50px; } .emb-rejilla { grid-template-columns: 1fr; } }
/* CTO virtual: lista lateral de hilos (db/738) */
.tec-cto-caja { max-width: 1100px; padding: 16px 20px; }
.tec-cto-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tec-cto-cab h3 { margin: 0; }
.tec-cto-toggle { flex: none; }
.tec-cto-hilos { display: flex; gap: 16px; margin-top: 10px; align-items: flex-start; }
.tec-cto-lista { display: none; }
.tec-cto-lista-abierta .tec-cto-lista {
  display: block; position: fixed; inset: 0; z-index: 950; background: var(--superficie);
  padding: 16px; overflow-y: auto; box-sizing: border-box;
}
.tec-cto-nueva { width: 100%; margin-bottom: 10px; }
.tec-cto-lista-hilos { display: flex; flex-direction: column; gap: 4px; }
.tec-cto-hilo {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px;
  border: 1px solid transparent; background: none; font: inherit; color: inherit; cursor: pointer;
}
.tec-cto-hilo:hover { background: var(--fondo-suave); }
.tec-cto-hilo.activo { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 30%, transparent); }
.tec-cto-hilo-tit { font-weight: 600; font-size: 0.92rem; }
.tec-cto-hilo-prev { font-size: 0.82rem; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tec-cto-hilo-fecha { font-size: 0.74rem; color: var(--texto-4); margin-top: 2px; }
.tec-cto-panel { flex: 1; min-width: 0; padding: 0; border: 0; box-shadow: none; max-width: none; }
@media (min-width: 900px) {
  .tec-cto-toggle { display: none; }
  .tec-cto-lista {
    display: block; position: static; inset: auto; z-index: auto; background: none; padding: 0;
    overflow: visible; width: 260px; flex: none; border-right: 1px solid var(--borde); padding-right: 16px;
  }
}

/* Chat sobre el informe (db/141) */
.ip-chat { max-width: 860px; padding: 16px 20px; }
.ip-chat h3 { margin: 0 0 4px; }
.ip-chat-lista { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.ip-msg { padding: 10px 14px; border-radius: var(--radio-s); line-height: 1.55; max-width: 92%; }
.ip-msg p { margin: 6px 0; }
.ip-msg-usuario { align-self: flex-end; background: var(--fondo-suave); }
.ip-msg-asesor { align-self: flex-start; border: 1px solid var(--borde); border-left: 3px solid var(--acento); }
.ip-msg-quien { font-size: 12px; opacity: .7; margin-bottom: 2px; }
.ip-chat-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ip-chat-form textarea { width: 100%; font: inherit; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio-s); box-sizing: border-box; }
@media (max-width: 600px) { .ip-chat { padding: 12px; } .ip-msg { max-width: 100%; } }

/* ---- Finanzas con forma de Legal ---- */
.fx-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 8px 0 18px; }
.fx-area { display: block; text-decoration: none; color: inherit; padding: 14px 16px; }
.fx-area:hover { border-color: var(--acento, #1a73e8); }
.tes-entrada { color: var(--verde-texto); }
.tarjeta { background: var(--fondo, #fff); border: 1px solid var(--borde); border-radius: var(--radio-s, 8px); padding: 12px 14px; margin: 10px 0; }
.tarjeta > summary { cursor: pointer; }

/* ---- Postventa: fotos en el tablero, propuestas y alta ---- */
.pv-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pv-foto-caja { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pv-foto-caja img { width: 92px; height: 92px; object-fit: cover; border-radius: 6px; cursor: zoom-in; }
.pv-propuestas td { font-size: 13px; vertical-align: top; }
.pv-alta { display: grid; gap: 8px; margin: 8px 0; }

/* ---- Project Management ---- */
.pm-celda-barra { min-width: 180px; }
.pm-barra { position: relative; height: 14px; background: var(--fondo-suave); border-radius: 7px; }
.pm-marca { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; }
.pm-base { background: transparent; border: 2px solid var(--texto-4, #999); top: 0; width: 10px; height: 10px; }
.pm-prev { background: var(--acento, #1a73e8); }
.pm-tarde { background: #d93025; }
.pm-real { background: #188038; }
.pm-modificado td { font-size: 13px; background: var(--fondo-suave); }

/* Planning por hitos en tarjeta: pensado para móvil primero (18/10/2026),
   la tabla con 3 <input type=date> por fila no cabía en el teléfono. */
.pm-hitos { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.pm-hito { margin: 0; }
.pm-hito-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pm-hito-nombre { font-weight: 500; }
.pm-hito-quitar { flex: none; padding: 2px 8px; line-height: 1.4; }
.pm-hito-fechas { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 10px 0 8px; }
.pm-hito-campo { min-width: 0; }
.pm-hito-campo span { font-size: 0.72rem; }
.pm-hito-campo input { min-width: 0; padding: 7px 8px; font-size: 0.85rem; }
.pm-hito-desvio { margin-bottom: 8px; }

/* =====================================================================
   CAPA MODERNA (05/10/2026, decisión de Alberto: «profundidad y color»).
   Va al final a propósito: no cambia la estructura de ninguna pantalla,
   solo el aspecto. Cada módulo tiene su color (--modulo), que toman la
   cabecera, la pestaña activa, las cifras y los títulos. El fondo arena y el
   terracota de marca se quedan (método, regla de diseño).
   ===================================================================== */
:root {
  --modulo: var(--acento);
  --modulo-suave: rgba(192, 100, 61, 0.10);
  --sombra-tarjeta: 0 1px 2px rgba(43, 38, 33, 0.05), 0 6px 20px -6px rgba(43, 38, 33, 0.10);
  --sombra-tarjeta-alta: 0 2px 4px rgba(43, 38, 33, 0.06), 0 18px 40px -12px rgba(43, 38, 33, 0.18);
}
:root[data-modulo="finanzas"]   { --modulo: #2b6c8f; --modulo-suave: rgba(43, 108, 143, 0.10); }
:root[data-modulo="legal"]      { --modulo: #6a4c9c; --modulo-suave: rgba(106, 76, 156, 0.10); }
:root[data-modulo="obra"]       { --modulo: #c0643d; --modulo-suave: rgba(192, 100, 61, 0.10); }
:root[data-modulo="comercial"]  { --modulo: #2e7d55; --modulo-suave: rgba(46, 125, 85, 0.10); }
:root[data-modulo="postventa"]  { --modulo: #c46a1c; --modulo-suave: rgba(196, 106, 28, 0.10); }
:root[data-modulo="tramites"]   { --modulo: #4f5bd5; --modulo-suave: rgba(79, 91, 213, 0.10); }
:root[data-modulo="direccion"]  { --modulo: #3b332b; --modulo-suave: rgba(59, 51, 43, 0.08); }

body {
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--modulo-suave), transparent 60%),
    radial-gradient(900px 400px at -10% 110%, rgba(192, 100, 61, 0.06), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
}

/* Cabecera: el título con la marca de color del módulo */
.cabecera { border-bottom: 0; padding-bottom: 14px; }
.cabecera-titulo, #nombrePromocion {
  position: relative;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.4px;
  padding-left: 16px;
}
.cabecera-titulo::before, #nombrePromocion::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--modulo), color-mix(in srgb, var(--modulo) 55%, white));
}

/* Pestañas del módulo */
.subnav { background: rgba(246, 243, 238, 0.82); box-shadow: 0 1px 0 var(--borde); border-bottom: 0; }
.subnav-pestana { font-weight: 500; transition: background 0.15s ease, color 0.15s ease; }
.subnav-pestana:hover { background: rgba(43, 38, 33, 0.05); }
.subnav-pestana.activa {
  color: #fff;
  background: linear-gradient(135deg, var(--modulo), color-mix(in srgb, var(--modulo) 75%, black));
  box-shadow: 0 4px 12px -4px var(--modulo);
}
.subnav-pestana.activa .subnav-n { color: #fff; opacity: 0.85; }

/* Menú lateral: lo activo, una píldora del color del módulo */
.lateral-item { border-left: 0; border-radius: 10px; margin: 1px 8px; width: calc(100% - 16px); padding: 9px 12px; }
.lateral-item.activo {
  background: var(--modulo-suave);
  color: var(--modulo);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--modulo);
}

/* Cifras: tarjetas con relieve, valor grande, franja del módulo */
.kpis { gap: 16px; }
.kpi {
  background: linear-gradient(180deg, #fff, #fdfbf8);
  border: 1px solid rgba(60, 45, 30, 0.07);
  border-left: 0;
  border-radius: 16px;
  padding: 18px 20px 16px;
  box-shadow: var(--sombra-tarjeta);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--modulo), color-mix(in srgb, var(--modulo) 40%, white));
  opacity: 0.9;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-tarjeta-alta); }
.kpi-valor { font-size: 1.85em; font-weight: 700; letter-spacing: -0.8px; color: var(--texto); font-variant-numeric: tabular-nums; }
.kpi-etiqueta { font-size: 0.72em; font-weight: 600; color: var(--texto-3); }
.kpi-rojo::before { background: linear-gradient(90deg, var(--rojo), #f08a84); }
.kpi-ambar::before { background: linear-gradient(90deg, var(--amarillo), #f2c46d); }
.kpi-pulsable { cursor: pointer; }

/* Títulos de sección con su marca */
h3.titulo-seccion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 12px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--texto);
}
h3.titulo-seccion::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--modulo);
  box-shadow: 0 0 0 4px var(--modulo-suave);
}

/* Tarjetas y cajas */
.tarjeta, .pv-caja, .vivienda, .fx-sug, .pv-vivienda, .pv-tarjeta {
  border-radius: 14px;
  box-shadow: var(--sombra-tarjeta);
  border-color: rgba(60, 45, 30, 0.07);
}
.tarjeta { background: #fff; }
.fx-area { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.fx-area:hover { transform: translateY(-3px); box-shadow: var(--sombra-tarjeta-alta); border-color: var(--modulo); }
.fx-area .inf-fuerte { color: var(--modulo); font-size: 1.02rem; }

/* Tablas: contenedor blanco con relieve, cabecera fija, filas aireadas */
.inf-desliza {
  background: #fff;
  border: 1px solid rgba(60, 45, 30, 0.07);
  border-radius: 14px;
  box-shadow: var(--sombra-tarjeta);
  max-height: 72vh;
}
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
table.tabla thead th {
  position: sticky; top: 0; z-index: 1;
  background: #faf7f3;
  color: var(--texto-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
table.tabla tbody td { padding: 10px 14px; border-bottom: 1px solid #f2ede6; vertical-align: top; }
table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover td { background: #fcfaf7; }
table.tabla td.num, table.tabla th.num { text-align: right; }

/* Botones */
.boton-primario {
  background: linear-gradient(135deg, var(--acento), var(--acento-hover));
  border: 0;
  color: #fff;
  box-shadow: 0 6px 16px -8px var(--acento);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.boton-primario:hover:not(:disabled) { opacity: 1; transform: translateY(-1px); box-shadow: 0 10px 20px -10px var(--acento); }
.boton, .boton-plano { transition: transform 0.15s ease, background 0.15s ease; }
.boton:active, .boton-plano:active, .boton-primario:active { transform: translateY(1px); }

/* Chips y avisos */
.chip { border-radius: 999px; font-weight: 600; }
.tes-aviso { border-radius: 12px; box-shadow: 0 1px 2px rgba(43, 38, 33, 0.04); }
.fx-falta { border-radius: 12px; }

/* Foco visible y uniforme */
:focus-visible { outline: 2px solid var(--modulo); outline-offset: 2px; border-radius: 6px; }

/* Entrada suave de cada pantalla */
#pendiente > * { animation: entrada 0.28s ease both; }
@keyframes entrada { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #pendiente > *, .kpi, .fx-area { animation: none; transition: none; }
}
.lateral-item.menu-hijo.activo { color: var(--modulo); background: var(--modulo-suave); box-shadow: inset 3px 0 0 var(--modulo); }
.lateral-item.activo-padre .icono, .lateral-item.activo .icono { color: var(--modulo); }
h3.titulo-seccion { justify-content: flex-start; }

/* ---- Plan de tesorería (panel de Javi, db/126) ---- */
.pl-caja { max-height: 78vh; }
.pl-matriz td, .pl-matriz th { white-space: nowrap; padding: 6px 10px !important; font-size: 0.82rem; }
.pl-matriz .pl-fija { position: sticky; left: 0; background: #fff; z-index: 2; min-width: 260px; white-space: pre; }
.pl-matriz thead .pl-fija { background: #faf7f3; z-index: 3; }
.pl-matriz .pl-hoy { background: var(--modulo-suave); }
.pl-matriz th.pl-futuro { color: var(--modulo); }
.pl-matriz tr.pl-total td { font-weight: 700; background: #faf7f3; }
.pl-matriz tr.pl-saldo td { font-weight: 700; color: var(--modulo); }
.pl-matriz tr.pl-n0 td.pl-fija { font-weight: 600; }
.pl-matriz tr.pl-n2 td { color: var(--texto-3); }
.pl-matriz tr.pl-linea td { color: var(--texto-4); font-style: italic; }
.pl-plegable { cursor: pointer; }
.pl-editable { cursor: cell; }
.pl-editable:hover { outline: 1px dashed var(--modulo); }
.pl-manual { color: var(--modulo); font-weight: 700; }
.pl-media { color: var(--texto-4); font-style: italic; }
.pl-var { color: var(--ambar-texto); }
.exp-barra select.pv-gremio, .pv-form-linea select.pv-gremio { width: auto; min-width: 150px; max-width: 280px; }
.exp-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- Mi día, sencillo (05/10/2026) ---- */
.md-fecha { margin: -4px 0 14px; font-size: 0.9rem; }
.md-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 26px; }
.md-cifra {
  text-align: left; border: 1px solid rgba(60, 45, 30, 0.07); background: #fff; border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--sombra-tarjeta); cursor: pointer; font: inherit; position: relative; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.md-cifra::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--modulo); }
.md-cifra:hover { transform: translateY(-2px); box-shadow: var(--sombra-tarjeta-alta); }
.md-cifra.md-rojo::before { background: var(--rojo); }
.md-cifra.md-ambar::before { background: var(--amarillo); }
.md-cifra.md-ok::before { background: var(--verde); }
.md-cifra-valor { font-size: 2.1rem; font-weight: 750; letter-spacing: -1px; line-height: 1.1; }
.md-cifra.md-rojo .md-cifra-valor { color: var(--rojo-texto); }
.md-cifra.md-ambar .md-cifra-valor { color: var(--ambar-texto); }
.md-cifra-etiqueta { font-weight: 600; color: var(--texto-2); margin-top: 4px; }
.md-cifra-detalle { font-size: 0.78rem; color: var(--texto-4); margin-top: 2px; }
.md-h { font-size: 1rem; font-weight: 700; margin: 8px 0 10px; }
.md-lista { display: grid; gap: 8px; margin-bottom: 22px; }
/* Bloques plegables de «Lo urgente hoy» (Finanzas, 08/10/2026) */
.md-bloque > summary.md-h { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.md-bloque > summary.md-h::before { content: '▸'; color: var(--texto-4); transition: transform 0.15s; }
.md-bloque[open] > summary.md-h::before { transform: rotate(90deg); }
.md-bloque > .md-lista { margin-left: 4px; }
.md-tarea { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.md-tarea .md-titulo { flex: 1; }
.md-tarea.md-hecha .md-titulo { text-decoration: line-through; color: var(--texto-4); }
.md-tarea.md-novedad { flex-wrap: wrap; align-items: flex-start; }
.md-nov-texto { flex: 1; min-width: 12rem; display: grid; gap: 2px; }
.md-nov-texto p { margin: 2px 0 0; }
.md-subh { font-size: 0.78rem; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.04em; margin: 6px 0 0; }
.md-linea { background: #fff; border: 1px solid rgba(60, 45, 30, 0.07); border-radius: 12px; box-shadow: var(--sombra-tarjeta); }
.md-linea > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; }
.md-linea > summary::-webkit-details-marker { display: none; }
.md-titulo { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-linea[open] .md-titulo { white-space: normal; }
.md-cuando { font-size: 0.8rem; color: var(--texto-4); white-space: nowrap; }
.md-cuerpo { padding: 0 14px 12px 14px; display: grid; gap: 6px; }

/* Mi día › derivar una tarea (db/724, 14/10/2026) */
.md-derivar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px 12px; background: #fff; border: 1px solid rgba(60, 45, 30, 0.07); border-top: none; border-radius: 0 0 12px 12px; margin-top: -8px; }
.md-derivar select { max-width: 220px; }
.md-cuerpo p { margin: 0; color: var(--texto-2); }
.md-chip { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
.md-chip.md-rojo { background: #fdecea; color: var(--rojo-texto); }
.md-chip.md-ambar { background: #fff4e5; color: var(--ambar-texto); }
.md-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.md-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.md-area {
  text-align: left; font: inherit; cursor: pointer; background: #fff; border: 1px solid rgba(60, 45, 30, 0.07); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--sombra-tarjeta); display: grid; gap: 4px; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.md-area:hover { transform: translateY(-2px); box-shadow: var(--sombra-tarjeta-alta); }
.md-area-n { font-size: 1.6rem; font-weight: 750; color: var(--modulo); line-height: 1; }
.md-area-nombre { font-weight: 700; }
.md-area-ej { font-size: 0.8rem; color: var(--texto-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-vacio { background: #fff; border-radius: 16px; padding: 24px; box-shadow: var(--sombra-tarjeta); font-weight: 600; }
.md-pie { margin-top: 18px; }
.propuesta-resaltada { outline: 2px solid var(--modulo); outline-offset: 3px; box-shadow: var(--sombra-tarjeta-alta); }

/* Skills jurídicos (db/129) */
.sk-rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.sk-tarjeta summary { cursor: pointer; list-style: none; display: grid; gap: 4px; }
.sk-tarjeta[open] { grid-column: 1 / -1; }
.sk-inactivo { opacity: .55; }
.sk-texto { white-space: pre-wrap; font: inherit; font-size: .9rem; line-height: 1.5; margin: 12px 0; padding: 12px; border-radius: 8px; background: var(--fondo-suave, rgba(127,127,127,.08)); max-width: 100%; overflow-x: auto; }
.ip-especialidad { text-decoration: none; }
.ip-rehacer summary { cursor: pointer; list-style: none; display: inline-block; }

/* Informe previo: buzones y adjuntos (db/130) */
.ip-buzones summary { cursor: pointer; }
.ip-grupo { border: 0; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 12px; }
.ip-grupo legend { font-weight: 600; font-size: .85rem; margin-bottom: 4px; padding: 0; }
.ip-casilla { font-size: .88rem; display: flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }

/* Registro de trámites (db/132) */
.tr-buscar { flex: 1 1 260px; min-width: 0; padding: 8px 10px; }
.tr-largo { max-width: 360px; overflow-wrap: anywhere; }
.tr-vencido td { color: var(--rojo, #b42318); }
.tr-detalle > td { background: var(--fondo-suave, rgba(127,127,127,.06)); }
.tr-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 14px; }
.tr-form textarea { width: 100%; }

/* Asistente de obra (db/134) */
.pm-asistente { margin: 12px 0; border-left: 3px solid var(--acento, #b8742a); }

/* =====================================================================
   GUÍA COMÚN · campos, desplegables, barras de filtro, enlaces y menú
   (Alberto, 07/10/2026: «hay partes de la app muy toscas»). Va al final
   para mandar sobre lo antiguo. Las reglas genéricas van con :where(), que
   no suma especificidad: un componente con estilo propio
   (.tabla-accesos select…) sigue mandando. Ver docs/GUIA-ESTILO.md.
   ===================================================================== */

/* ---- Campos y desplegables, en todas las pantallas ------------------ */
:where(#app) :where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), textarea) {
  font: inherit;
  font-size: 0.86rem;
  color: var(--texto);
  background-color: var(--superficie);
  border: 1px solid var(--borde-medio);
  border-radius: var(--radio-s);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
:where(#app) :where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"])) {
  height: 34px;
  padding: 0 11px;
  box-sizing: border-box;
}
:where(#app) textarea { padding: 10px 12px; line-height: 1.5; }
:where(#app) :where(select, input, textarea):hover:not(:disabled):not(:focus) { border-color: var(--borde-fuerte); }
:where(#app) :where(select, input, textarea):focus {
  outline: none;
  border-color: var(--modulo, var(--acento));
  box-shadow: 0 0 0 3px var(--modulo-suave, var(--acento-suave));
}
:where(#app) :where(select, input, textarea):disabled { background-color: var(--fondo); color: var(--texto-4); cursor: not-allowed; }
:where(#app) ::placeholder { color: var(--texto-5); opacity: 1; }

/* El desplegable: sin la flecha del sistema, con un chevron fino y el texto que no se sale. */
:where(#app) select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8075' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
:where(#app) select option { color: var(--texto); background: var(--superficie); }
/* .pv-gremio trae 12 px de relleno vertical de cuando los campos eran altos:
   con los 34 px de la guía el texto se quedaba en 10 px y salía como puntos. */
#app select.pv-gremio { padding-top: 0; padding-bottom: 0; font-size: 0.86rem; }

/* La búsqueda, con su lupa; la fecha, con números de ancho fijo. */
:where(#app) input[type="search"] {
  padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8075' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px;
}
:where(#app) input[type="date"], :where(#app) input[type="month"] {
  font-variant-numeric: tabular-nums;
  color-scheme: light;
  min-width: 136px;
}
:where(#app) input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
:where(#app) input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 0.9; }

/* ---- Barra de filtros (.exp-barra): una tarjeta, campos del mismo alto - */
#app .exp-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px;
  padding: 10px 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 1px 2px rgba(43, 38, 33, 0.04);
}
#app .exp-barra select { width: auto; min-width: 120px; max-width: 210px; flex: 0 1 auto; }
#app .exp-barra input[type="search"], #app .exp-barra input[type="text"] { flex: 1 1 220px; min-width: 180px; }
#app .exp-barra .boton-plano, #app .exp-barra button:not(.chip) { height: 34px; }
#app .exp-barra .filtros { margin: 0; }
/* En el móvil, dos filtros por fila; la búsqueda, entera. */
@media (max-width: 640px) {
  #app .exp-barra { display: grid; grid-template-columns: 1fr 1fr; padding: 10px; }
  #app .exp-barra select, #app .exp-barra input { width: 100%; max-width: none; min-width: 0; }
  #app .exp-barra input[type="search"], #app .exp-barra input[type="text"], #app .exp-barra .filtros { grid-column: 1 / -1; }
}

/* ---- Etiqueta encima del campo (.campo) ------------------------------ */
#app label.campo > span:first-child { display: block; margin-bottom: 5px; color: var(--texto-3); font-size: 0.8rem; font-weight: 600; }
#app label.campo > :where(select, input, textarea) { width: 100%; }

/* ---- Enlaces: del color del módulo, sin el azul del navegador -------- */
:where(#app) a:where(:not(.boton):not(.chip):not(.lateral-item):not(.miga):not(.pestana):not([class*="tab"])) {
  color: var(--modulo, var(--acento));
  text-decoration: none;
  text-underline-offset: 2px;
}
:where(#app) a:where(:not(.boton):not(.chip):not(.lateral-item):not(.miga)):hover { text-decoration: underline; }
:where(#app) .tabla a { font-weight: 500; }
:where(#app) a:focus-visible { outline: 2px solid var(--modulo, var(--acento)); outline-offset: 2px; border-radius: 3px; }

/* ---- Menú lateral ------------------------------------------------------ */
@media (min-width: 1024px) {
  #lateral { width: 276px; }
  body.con-sesion #app { margin-left: 276px; }
}
#lateral .lateral-item { transition: background-color 0.15s ease, color 0.15s ease; }
#lateral .menu-cabeza { border-radius: var(--radio-s); }
/* El módulo abierto: su cabecera se marca y sus apartados entran con suavidad. */
#lateral .menu-modulo.abierto > .menu-cabeza > .lateral-item:not(.activo) { color: var(--texto); font-weight: 600; }
#lateral .menu-modulo.abierto > .menu-hijos { animation: menu-desplegar 0.18s ease; }
@keyframes menu-desplegar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#lateral .menu-hijos { margin: 2px 0 8px 22px; padding-left: 10px; border-left: 1px solid var(--borde); }
#lateral .lateral-item.menu-hijo {
  position: relative;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--texto-3);
  font-size: 0.86rem;
  font-weight: 450;
}
#lateral .lateral-item.menu-hijo:hover { color: var(--texto); background: var(--fondo-suave); }
/* El apartado activo: fondo suave y texto del color del módulo. */
#lateral .lateral-item.menu-hijo.activo { color: var(--modulo, var(--acento)); background: var(--modulo-suave, var(--acento-suave)); font-weight: 600; }
#lateral .menu-seccion { margin: 12px 0 4px; padding: 0 10px; color: var(--texto-5); font-size: 0.64rem; font-weight: 700; letter-spacing: 1.2px; }
#lateral .menu-seccion:first-child { margin-top: 4px; }
#lateral .menu-contador { font-size: 0.72rem; }
#lateral .menu-chevron .icono { transition: transform 0.18s ease; }
#lateral .grupo h3 { letter-spacing: 1px; font-weight: 700; }
#lateral #menu { scrollbar-width: thin; scrollbar-color: var(--borde-medio) transparent; }

/* Tesorería · comparativa de escenarios (tesoreria-plan.js) */
.pl-grafico { display: block; width: 100%; max-width: 720px; height: auto; margin: 12px 0 4px; color: var(--texto, #1d2433); }
#app .pl-reglas select.pv-gremio { min-width: 0; width: 100%; max-width: none; margin: 2px 0; }
#app .pl-reglas td:nth-child(2) { min-width: 200px; }
#app .pl-reglas td:nth-child(4) { min-width: 140px; }
#app .pl-reglas td:nth-child(5) { min-width: 220px; }

/* Project Management · control presupuestario (pm-control.js) */
#app .pm-control tr.pl-plegable { cursor: pointer; }
#app .pm-control tr.pm-partida td:first-child { padding-left: 28px; color: var(--texto-3, #5b6472); }
#app .pm-control tr.pm-partida td { font-size: 0.82rem; }

/* Entorno de pruebas (staging): franja fija arriba, imposible de no ver */
.franja-pruebas { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; background: repeating-linear-gradient(45deg, #b4232a, #b4232a 14px, #8f1c22 14px, #8f1c22 28px); color: #fff; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .06em; text-align: center; padding: 6px 12px; }
.entorno-pruebas body { padding-top: 24px; }

/* U2 · borrador del monitor */
.mon-texto { display: block; width: 100%; box-sizing: border-box; margin: 8px 0; font: inherit; }

/* R0 · calendario de la Agenda de Finanzas */
.fin-cal { display: grid; grid-template-columns: repeat(7, minmax(88px, 1fr)); gap: 4px; min-width: 640px; }
.fin-cal-cab { font-size: 12px; color: var(--texto-suave, #777); text-align: center; padding: 2px 0; }
.fin-cal-dia { min-height: 84px; border: 1px solid var(--borde); border-radius: 6px; padding: 4px; display: flex; flex-direction: column; gap: 2px; background: var(--fondo, #fff); }
.fin-cal-fuera { background: var(--fondo-suave, #f4f2ee); opacity: .75; }
.fin-cal-hoy { outline: 2px solid var(--acento, #2b6c8f); }
.fin-cal-num { font-size: 12px; font-weight: 600; }
.fin-cal-ev { font-size: 11px; line-height: 1.25; padding: 1px 4px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #eee; }
.fin-cal-ev.sit-vencido { background: #fbe3e1; color: var(--rojo-texto, #a1271d); }
.fin-cal-ev.sit-proximo { background: #fdf0d8; color: var(--ambar-texto, #8a5a00); }
.fin-cal-hecho { background: #e1f2e5; color: #24683a; text-decoration: line-through; }

/* ---- Project Management: migas, pestañas de la promoción y estado de la carga ---- */
.pm-cabecera { margin: -4px 0 14px; }
.pm-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.85em; color: var(--texto-4); margin-bottom: 8px; }
.pm-migas a { color: var(--texto-3); text-decoration: none; }
.pm-migas a:hover { color: var(--modulo, var(--acento)); text-decoration: underline; }
.pm-migas-actual { color: var(--texto); font-weight: 600; }
.pm-pestanas {
  position: sticky; top: var(--pm-top, 0px); z-index: 25;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 6px; margin: 0 0 6px;
  background: rgba(246, 243, 238, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--borde); border-radius: 999px;
}
.pm-pestanas::-webkit-scrollbar { display: none; }
.pm-pestana {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  color: var(--texto-3); text-decoration: none; font-size: 0.88em; font-weight: 500;
}
.pm-pestana:hover { background: rgba(43, 38, 33, 0.05); color: var(--texto); }
.pm-pestana.activa { color: #fff; background: var(--modulo, var(--acento)); font-weight: 600; }
.pm-estado { border-left: 4px solid var(--borde-fuerte); }
.pm-estado-verde { border-left-color: var(--verde); }
.pm-estado-ambar { border-left-color: var(--amarillo); }
.pm-estado-rojo { border-left-color: var(--rojo); }
.pm-estado-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.pm-semaforo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.82em; font-weight: 600; }
.pm-semaforo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pm-semaforo-verde { color: var(--verde-texto); background: #e6f4ea; }
.pm-semaforo-ambar { color: var(--ambar-texto); background: #fff4e5; }
.pm-semaforo-rojo { color: var(--rojo-texto); background: #fce8e6; }
.pm-pasos { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; }
.pm-paso { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 0.92em; }
.pm-paso-icono { flex: 0 0 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75em; font-weight: 700; }
.pm-paso-verde .pm-paso-icono { background: #e6f4ea; color: var(--verde-texto); }
.pm-paso-ambar .pm-paso-icono { background: #fff4e5; color: var(--ambar-texto); }
.pm-paso-rojo .pm-paso-icono { background: #fce8e6; color: var(--rojo-texto); }
.pm-paso-info .pm-paso-icono { background: var(--fondo-suave); color: var(--texto-3); }
.pm-paso-texto { flex: 1 1 220px; min-width: 0; }
.pm-paso-accion { padding: 4px 10px; font-size: 0.9em; }
.pm-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.pm-cifras-compactas { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.pm-cifra { background: var(--fondo-suave); border-radius: var(--radio-s); padding: 8px 10px; min-width: 0; }
.pm-cifra-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-cifra-etq { font-size: 0.78em; color: var(--texto-3); }
.pm-cifra-extra { font-size: 0.75em; color: var(--texto-3); margin-top: 2px; }
.pm-cifra-verde .pm-cifra-valor { color: var(--verde-texto); }
.pm-cifra-ambar .pm-cifra-valor { color: var(--ambar-texto); }
.pm-cifra-rojo .pm-cifra-valor { color: var(--rojo-texto); }
.pm-sin-cifras { margin: 6px 0 0; }
.pm-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 8px 0 18px; }
.pm-lista .pm-promo { display: block; color: inherit; text-decoration: none; margin: 0; cursor: pointer; }
.pm-lista .pm-promo:hover { border-color: var(--modulo, var(--acento)); }
.pm-promo-nombre { font-weight: 600; font-size: 1.05em; color: var(--modulo, var(--texto)); }
.pm-promo-sub { font-size: 0.82em; color: var(--texto-3); margin: 2px 0 6px; }
#pendiente { min-width: 0; max-width: 100%; }
.inf-desliza { max-width: 100%; }
@media (max-width: 640px) {
  .pm-pestanas { border-radius: 12px; }
  .pm-pestana { padding: 7px 11px; font-size: 0.84em; }
  .pm-lista { grid-template-columns: 1fr; }
}

/* ---- Aviso de versión nueva de la app ---- */
/* Se vuelve a crear (version.js) cada vez que se vuelve a la pestaña con una
   versión pendiente, así que esta animación de entrada se repite cada vez:
   es lo que lo hace insistente sin recargar solo (20/10/2026). */
@keyframes version-nueva-entra {
  from { transform: translateX(-50%) translateY(12px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.version-nueva {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px; border-radius: 999px;
  background: var(--texto); color: #fff; box-shadow: var(--sombra-alta); font-size: 0.9em;
  border: 2px solid var(--acento);
  animation: version-nueva-entra 0.35s ease-out;
}
.version-nueva button { border: 0; border-radius: 999px; padding: 6px 14px; background: var(--acento); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.pm-semaforo-gris { color: var(--texto-3); background: var(--fondo-suave); }

/* ---- Adjuntos del correo a Dropbox (db/235) ---- */
.adj-bloque { margin: 8px 0; }
.adj-fila { border-top: 1px solid var(--borde); padding: 8px 0; display: grid; gap: 4px; min-width: 0; }
.adj-fila:first-child { border-top: 0; }
.adj-campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px; }
.adj-campos select, .adj-campos input { min-width: 0; width: 100%; }
@media (max-width: 640px) { .adj-campos { grid-template-columns: 1fr; } }

/* ---- Selector de promoción de Project Management (09/10/2026) ---- */
.pm-selector { align-items: center; }
.pm-selector-etq { flex: 0 0 auto; padding: 0 6px 0 10px; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-4); }

/* ---- Project Management: las tablas, como tarjetas en el móvil (09/10/2026) ---- */
@media (max-width: 640px) {
  .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td { display: block; width: 100%; }
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas tr { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 8px 10px; margin: 0 0 8px; }
  /* flex-wrap (18/10/2026, Alberto, «se corta»): una celda con más de un hijo
     (un input de fecha y encima un texto largo del motivo, un botón…) los
     apretaba todos en la misma línea y el texto se cortaba contra el borde
     de la pantalla. Con wrap, el primer hijo comparte línea con la etiqueta
     si cabe; cualquier otro (texto, botón) baja entero a su propia línea. */
  .tabla-tarjetas td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; border: 0 !important; padding: 3px 0 !important; text-align: right; min-width: 0; }
  .tabla-tarjetas td::before { content: attr(data-etq); flex: 0 0 auto; max-width: 45%; text-align: left; font-size: 0.78em; font-weight: 600; color: var(--texto-3); text-transform: none; }
  .tabla-tarjetas td[data-etq=""]::before { content: none; }
  .tabla-tarjetas td[data-etq=""] { display: block; text-align: left; }
  .tabla-tarjetas td:first-child { font-weight: 600; text-align: left; }
  .tabla-tarjetas td:empty { display: none; }
  .tabla-tarjetas input, .tabla-tarjetas select { max-width: 60%; }
  .tabla-tarjetas td > :nth-child(n+2) { flex: 1 1 100%; text-align: left; white-space: normal; }
  .inf-desliza:has(.tabla-tarjetas) { overflow-x: visible; background: none; border: 0; box-shadow: none; }
}

/* ---- Modo sin conexión (web/sin-conexion.js, 09/10/2026) ---- */
.sin-conexion {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 8999; margin: 0 auto; max-width: 640px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 14px; border-radius: 12px; background: #3d3426; color: #fff; font-size: 0.88em; box-shadow: var(--sombra-alta);
}
.sin-conexion button { border: 0; border-radius: 999px; padding: 4px 12px; background: var(--rojo); color: #fff; font: inherit; cursor: pointer; }
.version-nueva ~ .sin-conexion, .sin-conexion ~ .version-nueva { bottom: 64px; }

/* =====================================================================
   LENGUAJE NCALMA LAB (09/10/2026, decisión de Alberto)

   El mismo aire que el prototipo de hoteles (ncalma-lab.web.app): fondo
   arena, superficies blancas planas con borde fino, marrón de la casa como
   único acento, títulos en EB Garamond y el resto en Inter, etiquetas de
   sección en versalitas espaciadas y pestañas subrayadas. Una familia de
   aplicaciones del mismo grupo.

   Va al final y manda sobre las capas anteriores sin tocar la estructura ni
   las clases que usa el JS. El color por módulo (data-modulo) queda en el
   marrón de la casa: el prototipo es monocromo a propósito.
   ===================================================================== */

:root {
  /* Paleta del lab */
  --lab-arena: #F4F1EC;
  --lab-beige: #EDE8E1;
  --lab-linea: #DCD7CF;
  --lab-gris: #A8A29A;
  --lab-marron: #433629;
  --lab-tinta: #1E1A16;
  --lab-oro-foco: #9C7A1E;

  --ok: #3E5134;   --ok-bg: #E2E6D8;
  --warn: #6E5410; --warn-bg: #F1E6C8;
  --bad: #8E3B26;  --bad-bg: #F6E4DC;
  --info: #2E4559; --info-bg: #E3E6EA;

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Los tokens de siempre, con los valores del lab. Todos los textos
     pasan 4,5:1 sobre blanco y sobre arena. */
  --fondo: var(--lab-arena);
  --fondo-suave: var(--lab-beige);
  --superficie: #FFFFFF;
  --superficie-alta: #FFFFFF;
  --borde: var(--lab-beige);
  --borde-medio: var(--lab-linea);
  --borde-fuerte: var(--lab-gris);

  --texto: var(--lab-tinta);
  --texto-2: #4F463D;
  --texto-3: #5E554B;
  --texto-4: #6B6157;
  --texto-5: #736A5F;

  --dorado: var(--lab-marron);
  --acento: var(--lab-marron);
  --acento-hover: var(--lab-tinta);
  --acento-suave: var(--lab-beige);

  --verde: #5A7048;
  --amarillo: #8A6A12;
  --rojo: #A8452C;
  --naranja: #8A5A14;
  --indigo: var(--info);
  --rojo-texto: var(--bad);
  --ambar-texto: var(--warn);
  --verde-texto: var(--ok);

  --sombra: none;
  --sombra-alta: 0 8px 24px rgba(30, 26, 22, 0.14);
  --sombra-tarjeta: none;
  --sombra-tarjeta-alta: none;

  --radio: 12px;
  --radio-s: 10px;
  --radio-l: 16px;
}

/* Un solo acento para todos los módulos, como en el prototipo */
:root, :root[data-modulo] {
  --modulo: var(--lab-marron);
  --modulo-suave: var(--lab-beige);
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
}
::selection { background: var(--lab-beige); color: var(--texto); }

/* Foco: el anillo dorado del lab, oscurecido para pasar 3:1 */
:focus-visible,
:where(#app) a:focus-visible,
.fila-pulsable:focus-visible, .doc-pulsable:focus-visible, .kpi-pulsable:focus-visible,
.filtros .chip:focus-visible, .miga:focus-visible {
  outline: 3px solid var(--lab-oro-foco);
  outline-offset: 2px;
}

/* ---- Tipografía: Garamond para los títulos de página ----------------- */
.titulo-marca,
.cabecera-titulo, #nombrePromocion,
.panel-titulo, .fx-titulo, .inf-titulo, .pv-titulo,
.pendiente-panel h2, .modulo-cabecera h2, .ficha h3, .ip-hoja h1, .ip-hoja h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto);
}
.titulo-marca span, .lateral-cabecera strong span { color: var(--texto-4); }
.panel-titulo { font-size: 2.1rem; line-height: 1.1; }
.fx-titulo { font-size: 2rem; line-height: 1.1; }
.inf-titulo { font-size: 1.9rem; }
.pv-titulo { font-size: 1.8rem; }
.modulo-cabecera h2 { font-size: 2.1rem; }
.pendiente-panel h2 { font-size: 1.8rem; }
.ficha h3 { font-size: 1.9rem; }

/* Etiquetas de sección: versalitas espaciadas, como .eyebrow del lab */
h3.titulo-seccion,
.titulo-seccion h2,
.titulo-seccion h3,
.legal .rama,
.grafica h4 {
  margin: 28px 0 10px;
  color: var(--texto-4);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.titulo-seccion h2, .titulo-seccion h3 { margin: 0; }
h3.titulo-seccion::before { display: none; }
h3.titulo-seccion.subtitulo-rojo, .subtitulo-rojo { color: var(--bad); }
h3.titulo-seccion.subtitulo-ambar, .subtitulo-ambar { color: var(--warn); }
.pv-caja h3.titulo-seccion:first-child, .ctl-tarjeta h3.titulo-seccion:first-child { margin-top: 0; }

/* ---- Barra superior ---------------------------------------------------- */
.cabecera {
  min-height: 60px;
  padding: 8px 24px;
  background: var(--superficie);
  border-bottom: 1px solid var(--lab-linea);
  box-shadow: none;
}
.cabecera-titulo, #nombrePromocion {
  padding-left: 0;
  font-size: 1.9rem;
  line-height: 1.15;
}
.cabecera-titulo::before, #nombrePromocion::before { display: none; }
.cabecera-buscar {
  height: 40px;
  padding: 0 12px;
  background: var(--fondo);
  color: var(--texto-4);
  border: 1px solid var(--lab-linea);
  border-radius: 10px;
  font-size: 0.9rem;
}
.cabecera-buscar:hover { border-color: var(--lab-gris); color: var(--texto-2); }
.cabecera-buscar { max-width: 340px; }
kbd {
  padding: 1px 6px;
  background: var(--superficie);
  color: var(--texto-2);
  border: 1px solid var(--lab-linea);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}
.hamburguesa, .volver {
  width: 40px;
  height: 40px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--lab-linea);
  border-radius: 10px;
}
.hamburguesa:hover, .volver:hover { background: var(--fondo); border-color: var(--lab-gris); }

/* Pestañas del módulo: subrayadas, como .tabs del lab */
.subnav {
  gap: 2px;
  padding: 0 24px;
  background: var(--fondo);
  border-bottom: 1px solid var(--lab-linea);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.subnav-pestana {
  min-height: 46px;
  margin-bottom: -1px;
  padding: 0 14px;
  background: none;
  color: var(--texto-4);
  border-bottom: 3px solid transparent;
  border-radius: 0;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: none;
}
.subnav-pestana:hover { background: none; color: var(--texto); }
.subnav-pestana.activa {
  background: none;
  color: var(--texto);
  border-bottom-color: var(--lab-marron);
  font-weight: 700;
  box-shadow: none;
}
.subnav-n, .subnav-pestana.activa .subnav-n { color: var(--bad); font-weight: 700; opacity: 1; }

/* Segunda barra y selectores: el control segmentado (.seg) del lab */
.pm-pestanas {
  gap: 3px;
  padding: 3px;
  background: var(--lab-beige);
  border: 0;
  border-radius: 12px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: fit-content;
  max-width: 100%;
}
.pm-pestana {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 9px;
  color: var(--texto-2);
  font-size: 0.9rem;
  font-weight: 600;
}
.pm-pestana:hover { background: rgba(255, 255, 255, 0.6); color: var(--texto); text-decoration: none; }
.pm-pestana.activa { background: var(--lab-marron); color: #FFFFFF; }
.pm-selector-etq { color: var(--texto-4); font-weight: 700; letter-spacing: 0.1em; }

.pestanas { border-bottom-color: var(--lab-linea); }
.pestana {
  min-height: 36px;
  padding: 0 14px;
  background: var(--superficie);
  color: var(--texto-2);
  border: 1px solid var(--lab-linea);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.pestana:hover { border-color: var(--lab-gris); color: var(--texto); }
.pestana.on { background: var(--lab-marron); border-color: var(--lab-marron); color: #FFFFFF; }

main { padding: 24px 28px 64px; }

/* ---- Menú lateral ------------------------------------------------------ */
#lateral {
  background: var(--fondo);
  border-right: 1px solid var(--lab-linea);
}
.lateral-cabecera {
  min-height: 60px;
  padding: 10px 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--lab-linea);
}
.lateral-logo {
  width: 30px;
  height: 30px;
  background: var(--lab-marron);
  color: var(--lab-arena);
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
}
.lateral-cabecera strong {
  color: var(--texto);
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#lateral .grupo { padding: 14px 14px 4px; }
#lateral .grupo + .grupo { border-top: 1px solid var(--lab-linea); margin: 6px 6px 0; padding: 14px 8px 4px; }
#lateral .grupo h3 {
  padding: 0 10px 6px;
  color: var(--texto-4);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
#lateral .lateral-item {
  width: 100%;
  min-height: 40px;
  margin: 1px 0;
  padding: 0 12px;
  color: var(--texto);
  border-radius: 10px;
  font-size: 0.94rem;
  font-weight: 500;
  box-shadow: none;
}
#lateral .lateral-item .icono { color: var(--texto-4); }
#lateral .lateral-item:hover { background: var(--lab-beige); color: var(--texto); }
#lateral .lateral-item.activo,
#lateral .lateral-item.activo-padre {
  background: var(--lab-beige);
  color: var(--texto);
  font-weight: 700;
  box-shadow: none;
}
#lateral .lateral-item.activo .icono, #lateral .lateral-item.activo-padre .icono { color: var(--texto); }
#lateral .menu-modulo.abierto > .menu-cabeza > .lateral-item:not(.activo) { font-weight: 700; }
#lateral .menu-hijos { margin: 2px 0 6px 18px; padding-left: 10px; border-left: 1px solid var(--lab-linea); }
#lateral .lateral-item.menu-hijo {
  min-height: 34px;
  padding: 0 10px;
  color: var(--texto-2);
  font-size: 0.88rem;
  font-weight: 500;
}
#lateral .lateral-item.menu-hijo.activo {
  background: var(--superficie);
  color: var(--texto);
  font-weight: 700;
  box-shadow: none;
}
#lateral .menu-seccion { color: var(--texto-4); font-size: 0.66rem; letter-spacing: 0.12em; }
#lateral .menu-chevron { width: 32px; height: 32px; color: var(--texto-4); border-radius: 8px; }
#lateral .menu-chevron:hover { background: var(--lab-beige); color: var(--texto); }
#lateral .menu-contador {
  min-width: 0;
  padding: 0;
  background: none;
  color: var(--texto-4);
  font-size: 0.78rem;
  font-weight: 700;
}
#lateral .menu-contador.rojo { background: none; color: var(--bad); }
#lateral .menu-contador.rojo:empty { width: 8px; height: 8px; background: var(--bad); }
.lateral-pie { background: var(--fondo); border-top: 1px solid var(--lab-linea); }
.avatar { background: var(--lab-marron); color: #FFFFFF; }
.lateral-salir:hover { background: var(--lab-beige); }
#velo { background: rgba(30, 26, 22, 0.4); backdrop-filter: none; }

/* ---- Tarjetas: blancas, planas, borde fino, radio 16 ----------------- */
.kpi, .doc, .pv-caja, .tarjeta, .md-cifra, .md-area, .md-linea, .md-vacio,
.ctl-tarjeta, .informe, .fx-cab, .fx-cifra, .fx-sug, .exp-fila, .propuesta, .venc, .soc,
.pv-vivienda, .pv-tarjeta, .pv-repaso, .pv-form, .vivienda, .expediente, .linea-resumen,
.panel-card, .panel-tile, .chk-grupo, .pp-sociedad, .org-persona, .promo,
.pendiente-panel, .sin-dato, .panel-detalle, .grafica, .emb-bloque, .ip-chat, .soc-part {
  background: var(--superficie);
  border-top-color: var(--lab-linea);
  border-right-color: var(--lab-linea);
  border-bottom-color: var(--lab-linea);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.kpi, .doc, .pv-caja, .tarjeta, .md-cifra, .md-area, .md-vacio, .ctl-tarjeta, .informe,
.fx-cab, .propuesta, .panel-card, .panel-tile, .promo, .pendiente-panel, .sin-dato,
.panel-detalle, .grafica, .pv-vivienda, .pv-form {
  border-radius: var(--radio-l);
}
.md-linea, .exp-fila, .venc, .soc, .vivienda, .expediente, .linea-resumen, .fx-cifra, .fx-sug,
.pv-tarjeta, .pv-repaso, .chk-grupo, .pp-sociedad, .org-persona { border-radius: var(--radio); }
.kpi, .doc, .md-cifra, .md-area, .md-vacio, .tarjeta, .promo { border-left-color: var(--lab-linea); }
.pv-columna { background: var(--lab-beige); }

/* Lo pulsable: el borde se vuelve marrón, sin saltos */
.kpi:hover, .kpi-pulsable:hover, .doc-pulsable:hover, .md-cifra:hover, .md-area:hover,
.fx-area:hover, .panel-card:hover, .exp-fila:hover, .pv-tarjeta:hover, .pv-pulsable:hover,
.org-editable:hover, .promo:hover, .celda:hover, .pm-lista .pm-promo:hover {
  transform: none;
  border-top-color: var(--lab-marron);
  border-right-color: var(--lab-marron);
  border-bottom-color: var(--lab-marron);
  box-shadow: none;
  background: var(--superficie);
}
.kpi-pulsable:hover, .md-cifra:hover, .md-area:hover, .doc-pulsable:not([class*="tile-"]):hover,
.panel-card:hover, .promo:hover { border-left-color: var(--lab-marron); }
.exp-fila.fila-activa { border-color: var(--lab-marron); box-shadow: 0 0 0 1px var(--lab-marron); }

/* Cifras: etiqueta pequeña encima, número grande en Inter */
.kpis { gap: 12px; }
.kpi {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-left-width: 1px;
  border-left-style: solid;
  border-radius: 14px;
}
.kpi::before, .md-cifra::before, .promo::before { display: none; }
.kpi-etiqueta, .kpi-label {
  order: -1;
  margin: 0 0 2px;
  color: var(--texto-4);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.kpi-valor, .kpi-value {
  color: var(--texto);
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}
.kpi-detalle, .kpi-sub { color: var(--texto-4); font-size: 0.8rem; }
.kpi-rojo .kpi-valor { color: var(--bad); }
.kpi-ambar .kpi-valor { color: var(--warn); }

.md-cifra { padding: 14px 16px; }
.md-cifra-valor { font-size: 1.9rem; font-weight: 700; letter-spacing: 0; }
.md-cifra.md-ok .md-cifra-valor { color: var(--ok); }
.md-cifra.md-rojo .md-cifra-valor { color: var(--bad); }
.md-cifra.md-ambar .md-cifra-valor { color: var(--warn); }
.md-area-n { color: var(--texto); font-weight: 700; }
.md-h { color: var(--texto); }

/* Tarjetas de submódulo: el estado sigue en el borde izquierdo */
.doc.tile-activo { border-left: 3px solid var(--verde); }
.doc.tile-desarrollo { border-left: 3px solid var(--amarillo); }
.doc.tile-bloqueado { border-left: 3px solid var(--rojo); }
.doc-cab strong, .doc-cab h3 { font-size: 1.05rem; font-weight: 700; color: var(--texto); }
.tarjeta-valor { font-size: 1.6rem; font-weight: 700; letter-spacing: 0; color: var(--texto); }
.tarjeta-etiqueta { color: var(--texto-4); font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
.panel-tile-falta, .doc .panel-tile-falta {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 10px;
  font-size: 0.85rem;
}
.fx-area .inf-fuerte, .pm-promo-nombre { color: var(--texto); }

/* ---- Avisos: el .note del lab ----------------------------------------- */
.aviso-franja {
  gap: 8px;
  padding: 10px 12px;
  background: var(--warn-bg);
  color: var(--warn);
  border-left: 0;
  border-radius: 10px;
  font-size: 0.9rem;
}
.aviso-rojo { background: var(--bad-bg); color: var(--bad); }
.aviso-ambar { background: var(--warn-bg); color: var(--warn); }
.aviso-rojo .aviso-punto, .aviso-ambar .aviso-punto { color: currentColor; }
.aviso, .bloqueo, .aviso-dato, .fx-falta, .tes-ambar {
  background: var(--warn-bg);
  color: var(--warn);
  border: 0;
  border-radius: 10px;
}
.tes-rojo { background: var(--bad-bg); color: var(--bad); }
.error { background: var(--bad-bg); color: var(--bad); border: 0; border-radius: 10px; }
.vacio, .sin-dato {
  background: var(--lab-beige);
  color: var(--texto-2);
  border: 0;
  border-radius: 14px;
  font-weight: 600;
}
.vacio .nota { margin: 4px 0 0; color: var(--texto-3); font-weight: 400; }
.md-vacio { background: var(--ok-bg); color: var(--ok); border: 0; }

/* ---- Botones: el .btn del lab --------------------------------------- */
.boton, .boton-primario {
  min-height: 40px;
  padding: 8px 16px;
  background: var(--lab-marron);
  color: #FFFFFF;
  border: 1px solid var(--lab-marron);
  border-radius: 12px;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}
.boton:hover:not(:disabled), .boton-primario:hover:not(:disabled) {
  background: var(--lab-tinta);
  border-color: var(--lab-tinta);
  color: #FFFFFF;
  box-shadow: none;
  transform: none;
}
.boton:disabled, .boton-primario:disabled { background: var(--lab-gris); border-color: var(--lab-gris); color: #FFFFFF; opacity: 1; }
.boton.pv-sec {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--lab-gris);
  font-weight: 600;
}
.boton.pv-sec:hover:not(:disabled) { background: var(--fondo); color: var(--texto); border-color: var(--lab-gris); }
.boton-plano { color: var(--lab-marron); font-weight: 600; letter-spacing: 0; }
.boton-plano:hover { color: var(--texto); text-decoration: underline; }
.propuesta-acciones, .pv-acciones, .fx-acciones { flex-wrap: wrap; }
.boton-google {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--lab-gris);
  border-radius: 12px;
  box-shadow: none;
  color: var(--texto);
  font-weight: 600;
}
.boton-google:hover:not(:disabled) { transform: none; background: var(--fondo); box-shadow: none; }
.version-nueva { background: var(--lab-tinta); }
.version-nueva button { background: var(--lab-beige); color: var(--lab-marron); }
.sin-conexion { background: var(--lab-tinta); }

/* ---- Chips ----------------------------------------------------------- */
.chip {
  padding: 4px 10px;
  background: var(--lab-beige);
  color: var(--texto-2);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
}
.chip.sev-critico { background: var(--bad); color: #FFFFFF; }
.chip.sev-aviso, .chip.sit-proximo, .chip.papel-garante, .chip.inf-estado-revisado, .chip.pp-presentada,
.chip-listo_para_encender, .chip-N2 { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.chip.sev-info, .chip.papel-obligada, .chip-N1 { background: var(--info-bg); color: var(--info); border-color: transparent; }
.chip.sev-ok, .chip.papel-financiada, .chip.inf-estado-definitivo, .chip.pp-firmada, .chip.pp-lanzada,
.chip-corriendo { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.chip.sit-vencido, .chip-N3 { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.chip.sit-lejano, .chip-bloqueado, .chip-N0 { background: var(--lab-beige); color: var(--texto-3); }

.filtros .chip {
  min-height: 34px;
  padding: 0 14px;
  background: var(--superficie);
  color: var(--texto-2);
  border: 1px solid var(--lab-linea);
  font-size: 0.85rem;
  font-weight: 600;
}
.filtros .chip:hover { background: var(--fondo); border-color: var(--lab-gris); color: var(--texto); }
.filtros .chip-activo, .filtros .chip-activo:hover { background: var(--lab-marron); border-color: var(--lab-marron); color: #FFFFFF; }

.sem, .pm-semaforo, .md-chip, .exp-plazo, .pv-sla, .es-cond, .utr-paso, .pv-etq, .org-usuario {
  font-weight: 700;
  border-radius: 999px;
}
.sem-verde, .pm-semaforo-verde, .pm-paso-verde .pm-paso-icono, .utr-paso.hecho, .org-usuario.si,
.pv-sla-ok, .es-ok, .pv-chip-cerrada, .inf-clave, .fin-cal-hecho { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.sem-amarillo, .pm-semaforo-ambar, .pm-paso-ambar .pm-paso-icono, .md-chip.md-ambar,
.exp-plazo.sit-proximo, .fin-cal-ev.sit-proximo { background: var(--warn-bg); color: var(--warn); }
.sem-rojo, .pm-semaforo-rojo, .pm-paso-rojo .pm-paso-icono, .md-chip.md-rojo,
.exp-plazo.sit-vencido, .fin-cal-ev.sit-vencido { background: var(--bad-bg); color: var(--bad); }
.sem-gris, .pm-semaforo-gris { background: var(--lab-beige); color: var(--texto-3); }
.utr-paso.actual, .escalon.actual { background: var(--lab-marron); color: #FFFFFF; }
.pv-chip-curso { background: var(--lab-beige); color: var(--lab-marron); }

/* ---- Tablas ------------------------------------------------------------ */
.inf-desliza {
  background: var(--superficie);
  border: 1px solid var(--lab-linea);
  border-radius: var(--radio-l);
  box-shadow: none;
}
table.tabla thead th, .tabla-usuarios th {
  background: var(--fondo);
  color: var(--texto-4);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--lab-linea);
}
table.tabla tbody td, .tabla-usuarios td { border-bottom: 1px solid var(--lab-beige); color: var(--texto-2); }
table.tabla tbody tr:hover td, .fila-pulsable:hover td,
.tabla-usuarios tbody tr:hover { background: #FAF8F5; }
.fila-alerta, .fila-alerta td { background: var(--bad-bg); }
.tabla td.alerta, table.tabla td.alerta { color: var(--bad); }
.pl-matriz thead .pl-fija, .pl-matriz tr.pl-total td { background: var(--fondo); }
.ctl-fila-soc td, .tr-detalle > td, .pm-modificado td { background: var(--fondo); }
.tabla-usuarios { border-color: var(--lab-linea); border-radius: var(--radio-l); box-shadow: none; }
.tabla-usuarios .rol { color: var(--lab-marron); }
.tabla-usuarios .tu { background: var(--info-bg); color: var(--info); }
@media (max-width: 640px) {
  .tabla-tarjetas tr, .tabla-usuarios tbody tr {
    border: 1px solid var(--lab-linea);
    border-radius: var(--radio);
    padding: 10px 14px;
  }
  .tabla-tarjetas td::before { color: var(--texto-4); }
  .tabla-tarjetas tr:hover td { background: none; }
}

/* ---- Campos ------------------------------------------------------------ */
:where(#app) :where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"])) {
  height: 40px;
  padding: 0 12px;
}
:where(#app) :where(select, input, textarea) {
  font-size: 0.92rem;
  border-color: var(--lab-linea);
  border-radius: 10px;
}
:where(#app) select:not([multiple]) { padding-right: 34px; }
:where(#app) input[type="search"] { padding-left: 34px; }
:where(#app) :where(select, input, textarea):hover:not(:disabled):not(:focus) { border-color: var(--lab-gris); }
:where(#app) :where(select, input, textarea):focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--lab-marron);
  box-shadow: 0 0 0 3px rgba(67, 54, 41, 0.18);
}
#app .formulario input:not([type='checkbox']):not([type='radio']), #app .formulario select {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--superficie);
}
.formulario .campo span, #app label.campo > span:first-child {
  color: var(--texto-3);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.formulario { border: 0; box-shadow: none; background: none; }
#app .exp-barra { border: 1px solid var(--lab-linea); border-radius: 14px; box-shadow: none; }
#app .exp-barra .boton-plano, #app .exp-barra button:not(.chip) { height: 40px; }
/* Las vistas sin elegir de las bandejas («Sin contestar», «Todos»): con su
   hueco, como botones, y no como dos palabras pegadas. */
#app .exp-barra .boton-plano { padding: 0 12px; border-radius: 10px; }
#app .exp-barra .boton-plano:hover { background: var(--fondo); text-decoration: none; }
.tabla-accesos select.con-acceso { color: var(--lab-marron); border-color: var(--lab-marron); }
.interruptor input, .es-check input { accent-color: var(--lab-marron); }

/* ---- Migas ------------------------------------------------------------- */
.migas, .pm-migas { font-size: 0.9rem; color: var(--texto-4); }
.miga, .pm-migas a { color: var(--texto-4); }
.miga:hover, .pm-migas a:hover { color: var(--texto); text-decoration: underline; }
.miga.actual, .pm-migas-actual { color: var(--texto); font-weight: 600; }
.miga-sep { color: var(--lab-gris); }
.ambito-actual { color: var(--lab-marron); font-weight: 700; letter-spacing: 0.12em; }

/* ---- Restos del terracota en reglas antiguas ------------------------- */
.ficha .extras { background: var(--lab-beige); border: 0; color: var(--lab-marron); }
.pendiente-panel .fase { background: var(--lab-beige); color: var(--lab-marron); }
.pastilla { background: var(--lab-beige); color: var(--lab-marron); }
.incidencias .tipo { background: var(--warn-bg); color: var(--warn); }
.buscador-item.sel { background: var(--lab-beige); }
.buscador-item.sel .icono { color: var(--texto); }
.buscador { border: 1px solid var(--lab-linea); border-radius: 18px; }
.buscador-fondo { background: rgba(30, 26, 22, 0.4); backdrop-filter: none; }
.fx-asesor { background: var(--superficie); border-color: var(--lab-linea); }
.fx-cronologia li::before { background: var(--lab-marron); }
.ip-msg-asesor { border-left-color: var(--lab-marron); }

/* ---- Ficha (diálogo) ------------------------------------------------- */
.ficha {
  background: var(--superficie);
  border: 1px solid var(--lab-linea);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(30, 26, 22, 0.25);
}
.ficha::backdrop { background: rgba(30, 26, 22, 0.4); backdrop-filter: none; }
.ficha .sub { letter-spacing: 0.12em; font-weight: 700; }

/* ---- Acceso ------------------------------------------------------------ */
.acceso { background: var(--fondo); }
.tarjeta-acceso {
  background: var(--superficie);
  border: 1px solid var(--lab-linea);
  border-radius: 20px;
  box-shadow: none;
}
.tarjeta-acceso h1 { font-size: clamp(2.4rem, 8vw, 3.2rem); line-height: 1.05; margin-bottom: 32px; }
.tarjeta-acceso .sub {
  margin-bottom: 32px;
  color: var(--texto-4);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ---- Página del industrial y portal ---------------------------------- */
.ind-cabecera { border-bottom-color: var(--lab-linea); }
.ind-cabecera strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }

/* ---- Móvil ------------------------------------------------------------- */
@media (max-width: 1023px) {
  .cabecera-buscar { width: 40px; justify-content: center; padding: 0; }
}
@media (max-width: 640px) {
  .cabecera { min-height: 56px; padding: 8px 16px; }
  .cabecera-titulo, #nombrePromocion { font-size: 1.55rem; }
  .subnav { padding: 0 12px; }
  .subnav-pestana { min-height: 44px; padding: 0 12px; }
  main { padding: 16px 16px 64px; }
  .panel-titulo, .modulo-cabecera h2, .fx-titulo { font-size: 1.75rem; }
  .tarjeta-acceso { padding: 40px 24px; }
  .pm-pestanas { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kpi, .doc, .md-cifra, .md-area, .exp-fila, .boton, .boton-primario { transition: none; }
}

/* Enlaces dentro de tablas y textos: marrón y subrayado fino, que no se
   confundan con el texto en negrita. */
:where(#app) :where(.tabla, .doc, .pv-caja, .fx-cab, .informe) a:where(:not(.boton):not(.chip):not(.pm-pestana)) {
  text-decoration: underline;
  text-decoration-color: var(--lab-gris);
  text-underline-offset: 3px;
}

/* ---- Project Management · Documentación y portal del proyectista (db/241) ---- */
.pmd-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 8px 0 16px; }
.pmd-seccion { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; color: inherit; }
.pmd-seccion.activa { outline: 2px solid var(--acento); outline-offset: -2px; }
.pmd-seccion.pmd-vacia { opacity: 0.7; }
.pmd-detalle { margin-bottom: 24px; scroll-margin-top: 90px; }
.pmd-titulo { margin: 8px 0; }
.pmd-lista { list-style: none; padding: 0; margin: 8px 0 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.pmd-fichero { padding: 10px 14px; border-top: 1px solid var(--borde); overflow-wrap: anywhere; }
.pmd-fichero:first-child { border-top: 0; }
.pmd-fichero .nota { margin-top: 2px; }
.pmd-enlace { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.pmd-enlace .nota { grid-column: 1; }
.pmd-enlace button { grid-column: 2; grid-row: 1 / span 2; }
.pmd-carpetas { list-style: none; padding: 0; margin: 8px 0; }
.pmd-carpetas li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding: 4px 0; overflow-wrap: anywhere; }
.pmd-pliegue { margin: 4px 0 12px; }
.pmd-pliegue summary { cursor: pointer; }
.pmd-nueva, .pmd-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.pmd-nueva input, .pmd-fila input, .pmd-fila select { flex: 1 1 220px; min-width: 0; }
.pmd-form { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 24px; }
.pmd-form > input { width: 100%; }
.pmd-marcas { border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pmd-marca { display: inline-flex; gap: 6px; align-items: center; }
.pmd-url { flex-wrap: wrap; gap: 8px; align-items: center; }
.pmd-url input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, monospace; font-size: 0.85em; }
.pmd-subida { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.pry-main { max-width: 960px; }
@media (max-width: 600px) {
  .pmd-secciones { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pmd-enlace { grid-template-columns: 1fr; }
  .pmd-enlace button { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Mi día: una línea larga no ensancha la lista (el título se corta con …) */
.md-lista { min-width: 0; }
.md-lista > *, .md-linea, .md-linea > summary { min-width: 0; max-width: 100%; }

/* Control presupuestario: el selector de fase (db/248) no se queda fijo como el de promoción */
.pm-fases { position: static; margin: 4px 0 12px; }

/* =====================================================================
   NAVEGACIÓN LAB · PRUEBA (?nav=lab, web/nav-lab.js)

   El modelo de navegación del prototipo de hoteles: pocas áreas, las mismas
   pestañas en cada módulo, barra de abajo en el móvil e Inicio por perfil.
   Todo cuelga de body.nav-lab, que solo pone nav-lab.js cuando el
   interruptor está encendido: apagado, nada de esto aplica.
   ===================================================================== */

/* Lo clásico que la sustituye: el árbol del menú y las dos barras de pestañas */
body.nav-lab #menu,
body.nav-lab #subnav,
body.nav-lab #areanav { display: none !important; }

/* ---- Barra lateral: el .side del lab --------------------------------- */
body.nav-lab #menuLab { flex: 1; overflow-y: auto; padding: 10px 14px 24px; scrollbar-width: thin; }
body.nav-lab .navlab-lado { display: flex; flex-direction: column; gap: 2px; }
body.nav-lab .navlab-area + .navlab-area { margin-top: 2px; }
body.nav-lab .navlab-a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: none;
  color: var(--texto);
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body.nav-lab .navlab-a:hover { background: var(--lab-beige); color: var(--texto); text-decoration: none; }
body.nav-lab .navlab-a .icono { color: var(--texto-4); }
body.nav-lab .navlab-a.activa,
body.nav-lab .navlab-a[aria-current="page"] { background: var(--lab-beige); font-weight: 700; }
body.nav-lab .navlab-a.activa .icono { color: var(--texto); }
body.nav-lab .navlab-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.nav-lab .navlab-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 8px 21px;
  padding-left: 10px;
  border-left: 1px solid var(--lab-linea);
}
body.nav-lab .navlab-sub .navlab-a { min-height: 36px; font-size: 0.88rem; color: var(--texto-2); }
body.nav-lab .navlab-sub .navlab-a[aria-current="page"] { background: var(--superficie); color: var(--texto); }
body.nav-lab .navlab-n { color: var(--texto-4); font-size: 0.78rem; font-weight: 700; }
body.nav-lab .navlab-n.rojo { color: var(--bad); }
body.nav-lab .navlab-n.rojo:empty { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }

/* ---- Contexto: migas, módulos, pestañas y pantallas ------------------ */
body.nav-lab .navlab-ctx { margin: 0 0 20px; min-width: 0; }
body.nav-lab .navlab-ctx[hidden] { display: none; }
body.nav-lab .navlab-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--texto-4); font-size: 0.9rem; }
body.nav-lab .navlab-miga { padding: 2px 0; background: none; border: 0; color: var(--texto-4); font: inherit; text-decoration: none; cursor: pointer; }
body.nav-lab a.navlab-miga:hover,
body.nav-lab button.navlab-miga:hover { color: var(--texto); text-decoration: underline; }
body.nav-lab .navlab-miga.actual { color: var(--texto); font-weight: 600; cursor: default; }
body.nav-lab .navlab-sep { color: var(--lab-gris); }

/* Las pestañas del módulo: subrayadas, como .tabs del lab */
body.nav-lab .navlab-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--lab-linea);
  scrollbar-width: none;
}
body.nav-lab .navlab-tabs::-webkit-scrollbar { display: none; }
body.nav-lab .navlab-tab {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0 16px;
  background: none;
  color: var(--texto-4);
  border: 0;
  border-bottom: 3px solid transparent;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
body.nav-lab .navlab-tab:hover { color: var(--texto); text-decoration: none; }
body.nav-lab .navlab-tab[aria-current="page"] { color: var(--texto); font-weight: 700; border-bottom-color: var(--lab-marron); }

/* Una pestaña por pantalla (11/10/2026): lo que no cabe, en «Más» */
body.nav-lab .navlab-tabs-fila { display: flex; align-items: flex-end; margin-bottom: 14px; border-bottom: 1px solid var(--lab-linea); }
body.nav-lab .navlab-tabs-fila .navlab-tabs { flex: 1; min-width: 0; margin-bottom: 0; border-bottom: 0; }
body.nav-lab .navlab-mas { position: relative; flex: none; }
body.nav-lab .navlab-mas > summary { list-style: none; }
body.nav-lab .navlab-mas > summary::-webkit-details-marker { display: none; }
body.nav-lab .navlab-mas > summary::after { content: ' ▾'; margin-left: 4px; }
body.nav-lab .navlab-mas[open] > summary { color: var(--texto); }
body.nav-lab .navlab-mas-lista {
  position: absolute; right: 0; top: 100%; z-index: 60;
  display: flex; flex-direction: column; min-width: 220px; max-height: 60vh; overflow-y: auto;
  padding: 6px; background: var(--superficie); border: 1px solid var(--lab-linea); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
body.nav-lab .navlab-mas-item { padding: 9px 12px; border-radius: 6px; color: var(--texto); text-decoration: none; white-space: nowrap; }
body.nav-lab .navlab-mas-item:hover, body.nav-lab .navlab-mas-item:focus-visible { background: var(--fondo-suave); text-decoration: none; }

/* Las pantallas de una pestaña, y los módulos del área en el móvil: el .seg del lab */
body.nav-lab .navlab-pills,
body.nav-lab .navlab-modulos {
  display: flex;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 3px;
  overflow-x: auto;
  background: var(--lab-beige);
  border-radius: 12px;
  scrollbar-width: none;
}
body.nav-lab .navlab-pills::-webkit-scrollbar,
body.nav-lab .navlab-modulos::-webkit-scrollbar { display: none; }
body.nav-lab .navlab-pill,
body.nav-lab .navlab-modulo {
  /* El texto .oculto («, 3 asuntos vivos») es absoluto: sin esto se salía de
     la fila deslizable y ensanchaba la página del móvil. */
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  background: none;
  color: var(--texto-2);
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
body.nav-lab .navlab-pill:hover,
body.nav-lab .navlab-modulo:hover { background: rgba(255, 255, 255, 0.6); color: var(--texto); text-decoration: none; }
body.nav-lab .navlab-pill[aria-current="page"],
body.nav-lab .navlab-modulo[aria-current="page"] { background: var(--lab-marron); color: #FFFFFF; }
body.nav-lab .navlab-pill[aria-current="page"] .navlab-n { color: #FFFFFF; }
/* En escritorio los módulos ya están en la barra lateral */
body.nav-lab .navlab-modulos { display: none; }

/* ---- Barra de abajo (móvil): el .bottom del lab ---------------------- */
.navlab-abajo { display: none; }

@media (max-width: 1023px) {
  body.nav-lab.con-sesion .navlab-abajo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 6px 2px calc(8px + env(safe-area-inset-bottom));
    background: var(--superficie);
    border-top: 1px solid var(--lab-linea);
  }
  body.nav-lab .navlab-abajo::-webkit-scrollbar { display: none; }
  body.nav-lab .navlab-abajo-item {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 76px;
    min-height: 58px;
    padding: 0 4px;
    background: none;
    color: var(--texto-4);
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    scroll-snap-align: start;
  }
  body.nav-lab .navlab-abajo-item:hover { color: var(--texto); text-decoration: none; }
  body.nav-lab .navlab-abajo-icono { width: 27px; height: 27px; }
  body.nav-lab .navlab-abajo-texto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.nav-lab .navlab-abajo-item[aria-current="page"] { color: var(--lab-marron); }
  body.nav-lab .navlab-abajo-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: -6px;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--lab-marron);
  }
  body.nav-lab .navlab-nb {
    position: absolute;
    top: 2px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--texto-4);
    color: #FFFFFF;
    border-radius: 9px;
    font-size: 0.68rem;
  }
  body.nav-lab .navlab-nb.rojo { background: var(--bad); }
  body.nav-lab .navlab-nb:empty { min-width: 10px; width: 10px; height: 10px; padding: 0; }
  /* Cada casilla mide 76 px fijos siempre (Alberto, 18/10): con muchas áreas
     ya no se encogen para caber todas, se desliza horizontalmente (scroll
     con inercia y snap). Los nombres largos («Compliance», «Subvenciones»)
     bajan un punto de letra para no elipsarse; el resto queda a tamaño
     cómodo siempre, haya las áreas que haya. */
  body.nav-lab .navlab-abajo-item.navlab-abajo-largo .navlab-abajo-texto { font-size: 0.62rem; letter-spacing: -0.02em; }

  body.nav-lab.con-sesion main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.nav-lab.con-sesion .version-nueva,
  body.nav-lab.con-sesion .sin-conexion { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.nav-lab.con-sesion .version-nueva ~ .sin-conexion,
  body.nav-lab.con-sesion .sin-conexion ~ .version-nueva { bottom: calc(136px + env(safe-area-inset-bottom)); }
  body.nav-lab .navlab-modulos { display: flex; }

  /* Nada de la pantalla puede ensanchar la página. Un enlace largo en
     Decisiones (2.500 px) o una tabla del embudo ensanchaban el viewport del
     móvil y la barra de abajo, que va fija a él, se quedaba fuera de la
     pantalla o debajo del contenido: no se podía cambiar de área. Las tablas
     anchas se deslizan en su sitio y las palabras largas se parten. */
  body.nav-lab.con-sesion #app { overflow-x: clip; }
  body.nav-lab #pendiente table.tabla:not(.tabla-tarjetas):not(.inf-desliza > table) { display: block; max-width: 100%; overflow-x: auto; }
  body.nav-lab #pendiente :is(p, li, h2, h3, .propuesta) { overflow-wrap: break-word; }
}

/* ---- Inicio por perfil ---------------------------------------------- */
body.nav-lab .navlab-inicio { display: flex; flex-direction: column; gap: 24px; max-width: 1100px; }
body.nav-lab .navlab-fecha { margin: 0; color: var(--texto-4); font-size: 0.85rem; }
body.nav-lab .navlab-saludo { margin: 0; font-family: var(--serif); font-size: 2.4rem; font-weight: 400; line-height: 1.1; color: var(--texto); }
body.nav-lab .navlab-kboxes,
body.nav-lab .navlab-semaforos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
body.nav-lab .navlab-kbox,
body.nav-lab .navlab-semaforo,
body.nav-lab .navlab-atajo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--lab-linea);
  border-radius: 14px;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
body.nav-lab a.navlab-kbox, body.nav-lab button.navlab-kbox,
body.nav-lab .navlab-semaforo, body.nav-lab .navlab-atajo { cursor: pointer; }
body.nav-lab a.navlab-kbox:hover, body.nav-lab button.navlab-kbox:hover,
body.nav-lab .navlab-semaforo:hover, body.nav-lab .navlab-atajo:hover { border-color: var(--lab-marron); color: var(--texto); text-decoration: none; }
body.nav-lab .navlab-kbox small,
body.nav-lab .navlab-semaforo small,
body.nav-lab .navlab-atajo small { color: var(--texto-4); font-size: 0.82rem; }
body.nav-lab .navlab-kbox b { font-size: 1.7rem; line-height: 1.2; }
body.nav-lab .navlab-kbox b.tono-bad { color: var(--bad); }
body.nav-lab .navlab-kbox b.tono-ok { color: var(--ok); }
body.nav-lab .navlab-semaforo { gap: 6px; }
body.nav-lab .navlab-semaforo-nombre { font-weight: 700; }
body.nav-lab .navlab-semaforo b { font-size: 1.4rem; line-height: 1.2; }
body.nav-lab .navlab-semaforo .chip { align-self: flex-start; }
body.nav-lab .navlab-semaforo small { margin-top: -6px; }
body.nav-lab .chip.navlab-chip-ok { background: var(--ok-bg); color: var(--ok); }
body.nav-lab .chip.navlab-chip-warn { background: var(--warn-bg); color: var(--warn); }
body.nav-lab .chip.navlab-chip-bad { background: var(--bad-bg); color: var(--bad); }
body.nav-lab .navlab-seccion { display: flex; flex-direction: column; }
body.nav-lab .navlab-eyebrow {
  margin: 0 0 10px;
  color: var(--texto-4);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.nav-lab .navlab-atajos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
body.nav-lab .navlab-atajo b { font-weight: 600; }
body.nav-lab .navlab-pie { margin: 0; color: var(--texto-4); font-size: 0.85rem; }
body.nav-lab .navlab-pie a { color: var(--lab-marron); }
@media (max-width: 640px) {
  body.nav-lab .navlab-saludo { font-size: 2rem; }
  body.nav-lab .navlab-tab { padding: 0 10px; }
}

/* Desplegable de promoción/negocio (Marketing y demás): al abrirlo, por encima de todo y sin recortes (Alberto, 10/10/2026) */
.filtros:has(details[open]) { position: relative; z-index: 500; overflow: visible; flex-wrap: wrap; }
/* Cada hijo de #pendiente es su propia capa (animación de entrada): el que lleva un desplegable abierto sube por encima de los de debajo. */
#pendiente > :has(details[open]) { position: relative; z-index: 500; }
.chip-grupo { position: relative; }
.chip-menu { z-index: 500; background: var(--superficie, #fff); box-shadow: 0 8px 24px rgba(30, 26, 22, 0.16); }
/* El chip que abre (summary) centrado como los botones de al lado: con
   min-height y padding 0, un inline-block deja el texto arriba. */
.filtros .chip-grupo > summary.chip { display: inline-flex; align-items: center; gap: 4px; }
.filtros .chip-grupo > summary.chip::after { content: '▾'; }
.filtros .chip-grupo[open] > summary.chip::after { content: '▴'; }

/* ---- Lateral: grupos plegables ---- */
/* nav-lab.js: cada área de más de un módulo lleva su flecha (▸/▾) y el
   lateral, arriba, «Plegar todo / Desplegar todo». El área de la pantalla
   actual va siempre abierta (su flecha, apagada). No toca la barra de abajo
   del móvil, que pinta otra función. */
body.nav-lab .navlab-cabeza { display: flex; align-items: center; gap: 2px; }
body.nav-lab .navlab-cabeza > .navlab-a { flex: 1; min-width: 0; }
body.nav-lab .navlab-pliega {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  color: var(--texto-4);
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
body.nav-lab .navlab-pliega:hover { background: var(--lab-beige); color: var(--texto); }
body.nav-lab .navlab-pliega:disabled { opacity: 0.35; cursor: default; background: none; }
body.nav-lab .navlab-pliega .icono { width: 16px; height: 16px; transition: transform 0.18s ease; }
body.nav-lab .navlab-pliega[aria-expanded="true"] .icono { transform: rotate(90deg); }
body.nav-lab .navlab-sub.entra { animation: navlab-desplegar 0.18s ease; }
@keyframes navlab-desplegar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* .navlab-sub es flex: sin esto, `hidden` no la escondería */
body.nav-lab .navlab-sub[hidden] { display: none; }
body.nav-lab .navlab-todo {
  align-self: flex-end;
  margin: 0 0 4px;
  padding: 4px 8px;
  background: none;
  color: var(--texto-4);
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
body.nav-lab .navlab-todo:hover { background: var(--lab-beige); color: var(--texto); }
/* ---- Tablas (Alberto, 10/10/2026: «muy básicas y rudimentarias») --------
   Aspecto de producto financiero para todas las table.tabla: cifras con
   dígitos del mismo ancho, alineadas a la derecha y sin partirse nunca
   («251.836 €» en una línea), filas compactas, cabecera fija y la primera
   columna fija al desplazar en horizontal, con fondo opaco para que no se
   vea nada por debajo. Lo que necesita JS (ordenar, la misma escala en la
   columna, negativos, rayas, ocultar sin saldo, totales y las sombras al
   desplazar) lo pone web/tablas.js en las tablas que lo usan (.tabla-pro).
   Las tablas en tarjetas del móvil (.tabla-tarjetas) quedan como estaban. */
table.tabla { font-size: 0.875rem; line-height: 1.4; }
table.tabla thead th { padding: 9px 12px; font-size: 0.68rem; letter-spacing: 0.08em; vertical-align: bottom; }
table.tabla tbody td { padding: 8px 12px; }
table.tabla :is(td, th).num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* La primera columna, fija al desplazar en horizontal (fondo opaco por fila). */
.inf-desliza > table.tabla:not(.tabla-tarjetas) > :is(thead, tbody) > tr > :first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--superficie);
}
.inf-desliza > table.tabla:not(.tabla-tarjetas) > thead > tr > th { z-index: 2; }
.inf-desliza > table.tabla:not(.tabla-tarjetas) > thead > tr > th:first-child { z-index: 3; background: var(--fondo); }
.inf-desliza > table.tabla > tbody > tr:is(.ctl-fila-soc, .pm-modificado, .tp-grupo, .pl-total, .tr-detalle) > :first-child { background: var(--fondo); }
.inf-desliza > table.tabla > tbody > tr.fila-alerta > :first-child { background: var(--bad-bg); }
.inf-desliza > table.tabla:not(.tabla-tarjetas) > tbody > tr:hover > * { background: #FAF8F5; }

/* ---- Lo que añade web/tablas.js ---- */
.tp { margin: 0 0 14px; min-width: 0; }
.tp .inf-desliza { margin-bottom: 0; }
.tp-barra {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 14px;
  margin: 0 0 6px; font-size: 0.8rem; color: var(--texto-4);
}
.tp-interruptor { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.tp-interruptor input { margin: 0; accent-color: var(--lab-marron); }
.tp-marco { position: relative; }
/* El degradado del borde derecho: hay más columnas a la derecha. */
.tp-marco::after {
  content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 28px; z-index: 4;
  border-radius: 0 var(--radio-l) var(--radio-l) 0; pointer-events: none;
  background: linear-gradient(to right, rgba(67, 54, 41, 0), rgba(67, 54, 41, 0.11));
  opacity: 0; transition: opacity 0.15s ease;
}
.tp-marco.tp-mas::after { opacity: 1; }

table.tabla-pro tbody td { vertical-align: middle; }
table.tabla-pro > :is(thead, tbody, tfoot) > tr > :first-child { transition: box-shadow 0.15s ease; }
.tp-marco.tp-izq table.tabla-pro > :is(thead, tbody, tfoot) > tr > :first-child {
  box-shadow: inset -1px 0 0 var(--lab-linea), 8px 0 10px -8px rgba(30, 26, 22, 0.22);
}
.tp-etq { display: block; max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tabla-pro tr.tp-oculta { display: none; }
table.tabla-pro tr.tp-grupo > * { background: var(--fondo); color: var(--texto); font-weight: 600; }
table.tabla-pro tr > td.tp-vacia { color: var(--lab-gris); font-weight: 400; }
table.tabla-pro tr > td.tp-neg { color: var(--bad); }

/* Ordenar: la cabecera se pulsa; ▲▼ en la columna activa, tenue al pasar. */
table.tabla-pro th.tp-ordenable { cursor: pointer; user-select: none; }
table.tabla-pro th.tp-ordenable:hover, table.tabla-pro th[aria-sort="ascending"], table.tabla-pro th[aria-sort="descending"] { color: var(--texto); }
table.tabla-pro th.tp-ordenable:focus-visible { outline: 2px solid var(--lab-marron); outline-offset: -2px; }
.tp-flecha { display: inline-block; width: 1.1em; text-align: right; font-size: 0.85em; letter-spacing: 0; opacity: 0; }
.tp-flecha::after { content: '▼'; }
th.tp-ordenable:hover .tp-flecha { opacity: 0.35; }
th[aria-sort="ascending"] .tp-flecha, th[aria-sort="descending"] .tp-flecha { opacity: 1; }
th[aria-sort="ascending"] .tp-flecha::after { content: '▲'; }

/* La fila de totales, fija abajo. */
table.tabla-pro > tfoot > tr > td {
  position: sticky; bottom: 0; z-index: 2;
  padding: 9px 12px;
  background: var(--lab-beige);
  border-top: 1px solid var(--lab-linea);
  color: var(--texto); font-weight: 700; white-space: nowrap;
}
table.tabla-pro > tfoot > tr > td:first-child { left: 0; z-index: 3; }
table.tabla-pro > tfoot > tr + tr > td { border-top: 0; }

@media (max-width: 640px) {
  table.tabla:not(.tabla-tarjetas) { font-size: 0.8125rem; }
  table.tabla:not(.tabla-tarjetas) thead th { padding: 8px 10px; font-size: 0.64rem; letter-spacing: 0.06em; }
  table.tabla:not(.tabla-tarjetas) tbody td, table.tabla-pro > tfoot > tr > td { padding: 7px 10px; }
  /* La primera columna, más estrecha: el nombre entero va en el title. */
  table.tabla-pro:not(.tabla-tarjetas) .tp-etq { max-width: 38vw; }
  table.tabla-pro:not(.tabla-tarjetas) th:first-child { max-width: 38vw; white-space: normal; }
  /* En tarjetas (Project Management), el nombre entero y el total como una tarjeta más. */
  .tabla-tarjetas .tp-etq { max-width: none; white-space: normal; }
  .tabla-tarjetas tfoot { display: block; }
  table.tabla-pro.tabla-tarjetas > tfoot > tr > td { position: static; background: none; border-top: 0; }
}

/* ---- Sugerencias y Pregunta a la IA ---- */
/* db/263, asistente.js: la bombilla y «Pregunta a la IA» junto a la búsqueda,
   el diálogo de sugerencia, el panel lateral del chat y el bloque de
   Decisiones. En el móvil, dos iconos de 40 px y paneles a pantalla completa. */
.cabecera-icono, .cabecera-ia {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background: var(--fondo);
  color: var(--texto-3);
  border: 1px solid var(--lab-linea);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.cabecera-icono { width: 40px; padding: 0; }
.cabecera-icono .icono, .cabecera-ia .icono { width: 18px; height: 18px; }
.cabecera-ia { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 35%, var(--lab-linea)); }
.cabecera-icono:hover, .cabecera-ia:hover { border-color: var(--lab-gris); color: var(--texto-2); }
.cabecera-ia:hover { color: var(--acento-hover); }
.cabecera-icono:focus-visible, .cabecera-ia:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.cabecera-ia-texto { white-space: nowrap; }
.cabecera:has(#btnSugerencia) .cabecera-buscar { margin-left: auto; }
/* Campana de novedades (campana.js) */
#btnNovedades { position: relative; color: var(--acento); }
#btnNovedades[hidden] { display: none; }
.campana-num {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #d93025; color: #fff; font-size: 0.7rem; font-weight: 600;
  line-height: 18px; text-align: center;
}
.campana-fondo { position: fixed; inset: 0; z-index: 900; }
.campana-fondo[hidden] { display: none; }
.campana-panel {
  position: absolute; top: 64px; right: 16px; width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 96px); overflow: auto; padding: 8px;
  background: var(--fondo); border: 1px solid var(--lab-linea); border-radius: 12px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
}
@media (max-width: 1023px) {
  .cabecera-ia { width: 40px; padding: 0; }
  .cabecera-ia-texto { display: none; }
  .cabecera:has(#btnSugerencia) { gap: 8px; }
}

/* Fondo y panel comunes */
.asis-fondo {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh 16px 16px;
  background: rgba(30, 26, 22, 0.4);
}
.asis-fondo[hidden] { display: none; }
body.asis-abierto { overflow: hidden; }
.asis-panel {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: 80vh;
  background: var(--superficie);
  border: 1px solid var(--lab-linea);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(30, 26, 22, 0.25);
  overflow: hidden;
}
.asis-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--lab-linea);
}
.asis-cab h2 { margin: 0; font-size: 1.05rem; }
.asis-cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  color: var(--texto-3);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.asis-cerrar:hover { background: var(--fondo-suave); }
.asis-cerrar .icono { width: 18px; height: 18px; }
.asis-cuerpo { padding: 14px 18px 18px; overflow-y: auto; }

/* La IA: panel lateral a la derecha */
.asis-ia-fondo { justify-content: flex-end; align-items: stretch; padding: 0; }
.asis-ia { width: min(520px, 100%); max-height: none; height: 100%; border-radius: 0; border-width: 0 0 0 1px; }
.asis-ia .ip-chat { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.asis-ia .ip-chat-lista { max-height: none; }
.asis-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.asis-gasto { margin: 0; color: var(--texto-4); font-size: 0.85rem; }
.asis-gasto-alto { color: var(--bad); font-weight: 600; }

/* La sugerencia */
.asis-form { display: flex; flex-direction: column; gap: 10px; }
.asis-form p { margin: 0; }
.asis-form textarea, .asis-nota-campo {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
}
.asis-desde { overflow-wrap: anywhere; }
.asis-captura { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.asis-captura input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.asis-captura input[type="file"]:focus-visible + label { outline: 2px solid var(--acento); outline-offset: 2px; }
.asis-captura label { cursor: pointer; }
.asis-captura-vista { flex-basis: 100%; }
.asis-captura-vista img, .asis-captura-grande {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border: 1px solid var(--lab-linea);
  border-radius: var(--radio-s);
}
.asis-captura-grande { max-height: 480px; margin: 8px 0; }
.asis-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.asis-mias h3 { margin: 18px 0 8px; font-size: 0.95rem; }
.asis-lista { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.asis-item { padding: 10px 12px; border: 1px solid var(--lab-linea); border-radius: var(--radio-s); }
.asis-item p { margin: 6px 0 0; overflow-wrap: anywhere; }
.asis-item-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.asis-nota { color: var(--texto-2); font-style: italic; }
.chip.asis-chip-pendiente { background: var(--warn-bg); color: var(--warn); }
.chip.asis-chip-hecha { background: var(--ok-bg); color: var(--ok); }
.chip.asis-chip-descartada { background: var(--fondo-suave); color: var(--texto-3); }
/* db/782: qué es (sugerencia general no lleva chip, solo incidencia y funcionalidad). */
.chip.asis-chip-tipo-incidencia { background: rgba(250, 205, 2, 0.14); color: var(--amarillo); }
.chip.asis-chip-tipo-funcionalidad { background: rgba(99, 102, 241, 0.16); color: var(--indigo); }

/* db/782: el selector de tipo en el formulario de sugerencia, un grupo de botones. */
.asis-tipo { display: flex; flex-wrap: wrap; gap: 8px; }
.asis-tipo-btn {
  padding: 6px 14px; border: 1px solid var(--lab-linea); border-radius: 999px;
  background: var(--superficie); color: var(--texto-2); font-size: 0.85rem; cursor: pointer;
}
.asis-tipo-btn:hover { border-color: var(--borde-fuerte); }
.asis-tipo-btn.asis-tipo-activo { background: var(--acento); border-color: var(--acento); color: #fff; }

/* En Decisiones */
.asis-decisiones { margin-top: 28px; }
.asis-decisiones .titulo-seccion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.asis-tarjeta .propuesta-cuerpo p { overflow-wrap: anywhere; }
.asis-tarjeta .propuesta-acciones { flex-wrap: wrap; align-items: center; }
.asis-tarjeta .asis-nota-campo { flex: 1 1 240px; min-width: 0; }
.asis-resueltas { margin-top: 12px; }
.asis-resueltas > summary { cursor: pointer; color: var(--texto-3); }
.asis-tarjeta.asis-hecha, .asis-tarjeta.asis-descartada { opacity: 0.85; }

@media (max-width: 640px) {
  .asis-fondo { padding: 0; align-items: stretch; }
  .asis-panel { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .asis-cab { padding: 12px 16px; }
  .asis-cuerpo { padding: 12px 16px 16px; }
}
/* ---- Opciones sin datos (gris), bandejas y filtros ---- */
/* Una opción sin datos en esta pantalla se ve, en gris, y no se puede elegir (Alberto, 10/10/2026) */
.chip.chip-sin-datos,
.chip.chip-sin-datos:hover { background: rgba(60, 45, 30, 0.04); border-color: transparent; color: var(--texto-4); cursor: not-allowed; opacity: 0.6; box-shadow: none; }
.chip-menu .chip.chip-sin-datos { text-decoration: none; }
a.pm-pestana.chip-sin-datos,
a.pm-pestana.chip-sin-datos:hover { color: var(--texto-4); opacity: 0.55; cursor: not-allowed; background: none; }
select option:disabled { color: var(--texto-4); }
/* La barra de promoción u hotel encima de cada bandeja */
.bandeja-filtro { margin: 0 0 10px; }

/* ---- Tecnología (db/264): el semáforo de sistemas ---------------------- */
.tec-punto { font-size: 1.5rem; line-height: 1; }
.tec-ok { color: #1f9d55; }
.tec-aviso { color: #f2a100; }
.tec-caido { color: #e02f2f; }
.tec-sin_dato { color: #5b6b82; }
.tec-vacio { color: #b9b1a6; }
.tec-casilla { min-width: 2.5rem; min-height: 2.25rem; padding: .25rem .5rem; }
.tec-enlaces { margin: .25rem 0 .75rem 1.1rem; line-height: 1.7; }
.tec-ficha { display: grid; gap: .5rem; max-width: 34rem; }
.tec-ficha textarea { min-height: 4.5rem; }

/* RRHH (db/267): las casillas del presupuesto mensual */
#app input.rrhh-pres { width: 6.5em; min-width: 0; text-align: right; padding: 2px 4px; }
#app input.rrhh-pres.guardado { border-color: var(--verde, #3f8f5a); }

/* ---- Tecnología · incidencias de IT (db/268) ---------------------------- */
#btnIncidenciaIT, #btnAsistenciaRemota { font-size: 1.05rem; line-height: 1; }
.tec-etq { font-size: .85rem; color: var(--texto-3, #6b625a); }
.tec-adjuntos { display: grid; gap: .4rem; }
.tec-adj-lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.tec-adj { display: grid; gap: .2rem; max-width: 14rem; }
.tec-adj img, .tec-adj video { max-width: 14rem; max-height: 9rem; border-radius: 6px; border: 1px solid var(--borde, #e6e0d8); background: #000; }
.tec-adj-grande { max-width: 100% !important; max-height: 70vh !important; }
.tec-grabando { position: fixed; z-index: 9999; right: 1rem; bottom: 1rem; background: var(--rojo); color: #fff; border: 0; border-radius: 999px; padding: .7rem 1.1rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; }
.tec-inc { background: var(--superficie, #fff); border: 1px solid var(--borde, #e6e0d8); border-radius: 10px; padding: .8rem 1rem; margin: .6rem 0; display: grid; gap: .45rem; }
.tec-inc textarea { min-height: 3.5rem; }
.tec-inc-cab { display: flex; gap: .5rem; align-items: center; }
.tec-prio { font-size: .75rem; font-weight: 700; border-radius: 4px; padding: .1rem .4rem; color: #fff; }
.tec-prio-P1 { background: var(--rojo); }
.tec-prio-P2 { background: var(--amarillo); }
.tec-prio-P3 { background: var(--texto-5, #b9b1a6); }
.tec-inc-corta { border-top: 1px solid var(--borde, #e6e0d8); padding: .45rem 0; }
.tec-ok-msg { background: #eaf5ee; color: var(--verde-texto, #2e7d46); border-radius: 8px; padding: .5rem .75rem; }

/* Marketing · Captación: las facturas reales de Sage de un proveedor (db/862). */
.facturas-panel { padding: .75rem 0; }
.facturas-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.facturas-lista { display: grid; gap: .5rem; }
.facturas-fila { background: var(--superficie, #fff); border: 1px solid var(--borde, #e6e0d8); border-radius: 10px; padding: .6rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.facturas-info { display: flex; align-items: center; gap: .65rem; }
.facturas-info .icono { color: var(--texto-5, #b9b1a6); flex-shrink: 0; }
.facturas-accion { display: flex; align-items: center; gap: .65rem; }

/* ---- Tecnología · ciberseguridad (db/273): matriz de riesgos ------------ */
.tec-matriz { border-collapse: separate; border-spacing: 3px; margin: .3rem 0; }
.tec-matriz th { font-size: .75rem; font-weight: 600; color: var(--texto-3, #6b625a); padding: .15rem .35rem; }
.tec-celda { width: 2.6rem; height: 2.3rem; text-align: center; font-weight: 700; border-radius: 6px; color: #fff; cursor: default; }
.tec-celda[tabindex] { cursor: pointer; }
.tec-celda-sel { outline: 3px solid var(--tinta, #2b2621); }
.tec-bajo { background: #9cc5a8; }
.tec-medio { background: #e3c16f; }
.tec-alto { background: #d98c4e; }
.tec-critico { background: var(--rojo); }
.tec-nivel { font-size: .75rem; font-weight: 700; border-radius: 4px; padding: .1rem .45rem; color: #fff; white-space: nowrap; }
/* ---- Compliance (db/275): el semáforo de obligaciones ------------------- */
.cmp-punto { font-size: 1.15rem; line-height: 1; }
.cmp-rojo { color: var(--rojo); }
.cmp-ambar { color: var(--amarillo); }
.cmp-verde { color: var(--verde); }
.cmp-gris { color: var(--texto-5, #b9b1a6); }
.cmp-acciones { display: flex; flex-wrap: wrap; gap: .25rem .75rem; white-space: nowrap; }
.cmp-busca { display: grid; gap: .25rem; }
.cmp-lote { border: 1px solid var(--borde, #ddd); border-radius: 6px; padding: .5rem .75rem; margin: .4rem 0; }
.cmp-lote > summary { cursor: pointer; }
.cmp-lote-destinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .15rem .75rem; margin: .5rem 0; }
.cmp-busca-res { display: grid; gap: .15rem; max-height: 14rem; overflow-y: auto; }
.cmp-busca-op { text-align: left; overflow-wrap: anywhere; }

/* ---- Tecnología · mejoras y notas (db/295) ---------------------------- */
.tec-mejora { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .2rem; border-bottom: 1px solid var(--borde, #e6e0d8); cursor: pointer; }
.tec-mejora input[type=checkbox] { margin-top: .25rem; width: 1.1rem; height: 1.1rem; }
.tec-mejora-titulo { font-weight: 600; }
.tec-mejora-hecha .tec-mejora-titulo, .tec-mejora-descartada .tec-mejora-titulo { text-decoration: line-through; color: var(--texto-3, #6b625a); }
.tec-mejora-nueva input { flex: 1; min-width: 12rem; }
.tec-hilo { display: grid; gap: .5rem; }
.tec-hilo-lista { display: grid; gap: .4rem; max-height: 50vh; overflow-y: auto; padding: .2rem; }
.tec-nota { background: var(--superficie, #fff); border: 1px solid var(--borde, #e6e0d8); border-radius: 10px; padding: .45rem .65rem; max-width: 85%; }
.tec-nota-mia { justify-self: end; background: #f3ece4; }
.tec-nota-cab { font-size: .75rem; color: var(--texto-3, #6b625a); margin-bottom: .15rem; }
.tec-nota-txt { white-space: pre-wrap; }
.tec-hilo-form { display: flex; gap: .4rem; align-items: flex-end; }
.tec-hilo-form textarea { flex: 1; min-height: 2.6rem; }

/* ---- Tecnología · proveedores (db/302) --------------------------------- */
.tec-contacto { display: flex; flex-wrap: wrap; gap: .4rem; }
.tec-contacto a { text-decoration: none; }
.tec-casillas { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.tec-casilla-op { font-size: .9rem; white-space: nowrap; }
.tec-de-baja { opacity: .55; }

/* Marketing › SEM y SEO (db/305, web/sem.js) */
.sem .sem-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sem .sem-bloque { margin: 14px 0; padding: 14px 16px; }
.sem .sem-bloque h4 { margin: 14px 0 6px; font-size: 0.95rem; color: var(--texto-2); }
.sem .sem-acceso { margin: 6px 0; }
.sem .sem-acceso ul { margin: 4px 0 0 18px; }
.sem .sem-ok { color: var(--verde); }
.sem .sem-mal { color: var(--rojo); }
.sem .sem-tope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sem .sem-tope input { width: 140px; }
.sem .sem-lista { margin: 0; padding-left: 18px; }
.sem .sem-lista li { margin: 4px 0; }
.sem .sem-lista .sem-alta b { color: var(--rojo-texto); }
.sem .sem-lista .sem-media b { color: var(--ambar-texto); }
.sem .sem-grupo { margin: 8px 0; }
.sem .sem-grupo > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.sem .sem-cambio { border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 10px 12px; margin: 8px 0; background: var(--superficie); }
.sem .sem-cambio.sem-fallido { border-color: var(--rojo); }
.sem .sem-cambio.sem-aplicado { border-left: 4px solid var(--verde); }
.sem .sem-cambio.sem-propuesto { border-left: 4px solid var(--acento); }
.sem .sem-cambio-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.sem .sem-etq { font-size: 0.8rem; color: var(--texto-3); }
.sem .sem-antes-despues { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; font-size: 0.9rem; }
.sem .sem-antes { background: var(--fondo-suave); padding: 6px 8px; border-radius: var(--radio-s); overflow-wrap: anywhere; }
.sem .sem-despues { background: var(--acento-suave); padding: 6px 8px; border-radius: var(--radio-s); overflow-wrap: anywhere; }
.sem .sem-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sem .sem-detalle summary { cursor: pointer; color: var(--acento); font-size: 0.9rem; margin-top: 6px; }
.sem .sem-diff, .sem .sem-json { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; max-height: 360px; overflow: auto; background: var(--fondo-suave); padding: 8px; border-radius: var(--radio-s); }
@media (max-width: 640px) { .sem .sem-antes-despues { grid-template-columns: 1fr; } }
/* Tablas como resumen y ficha de detalle (11/10/2026, web/tablas.js activaResumenes) */
table.tabla .celda-recorte {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; max-width: 34ch; white-space: normal;
}
table.tabla-resumen tr.fila-detalle { cursor: pointer; }
table.tabla-resumen tr.fila-detalle:hover > td { background: var(--fondo-suave); }
table.tabla-resumen tr.fila-detalle > td:last-child { position: relative; padding-right: 22px; }
table.tabla-resumen tr.fila-detalle > td:last-child::after {
  content: '›'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--texto-4); font-size: 1.1em;
}
table.tabla-resumen tr.fila-abierta > td { background: var(--fondo-suave); }
dialog.detalle-fila {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; margin: auto;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--texto);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
dialog.detalle-fila::backdrop { background: rgba(20, 16, 12, .45); }
.detalle-fila-cab {
  position: sticky; top: 0; display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
  padding: 16px 20px 12px; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.detalle-fila-cab h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.detalle-fila-cerrar { flex: none; min-width: 36px; min-height: 36px; }
.detalle-fila-campos { margin: 0; padding: 12px 20px 20px; display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 10px 16px; }
.detalle-fila-campos dt { color: var(--texto-4); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding-top: 2px; }
.detalle-fila-campos dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.detalle-fila-campos dd select, .detalle-fila-campos dd button { margin: 2px 6px 2px 0; }
@media (max-width: 560px) {
  .detalle-fila-campos { grid-template-columns: 1fr; gap: 2px; }
  .detalle-fila-campos dd { margin-bottom: 10px; }
}

/* ---- Tecnología · resumen del CTO (db/307) --------------------------- */
.tec-bloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.tec-bloque { background: var(--superficie, #fff); border: 1px solid var(--borde, #e6e0d8); border-left: 4px solid var(--texto-5, #b9b1a6); border-radius: 10px; padding: .6rem .75rem; display: grid; gap: .2rem; }
.tec-bloque-rojo { border-left-color: var(--rojo); }
.tec-bloque-ambar { border-left-color: var(--amarillo); }
.tec-bloque-tit { font-weight: 700; }
.tec-bloque-lin { font-size: .88rem; color: var(--texto-2, #4a423a); }
a.tec-bloque-lin { text-decoration: none; }

/* ---- Tecnología · avisar a IT, pensado para cualquiera ------------------ */
.tec-avisar { display: grid; gap: .55rem; max-width: 40rem; }
.tec-aviso-paso { font-weight: 700; font-size: 1.02rem; margin-top: .5rem; }
.tec-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.tec-chip { border: 1px solid var(--borde, #e6e0d8); background: var(--superficie, #fff); color: inherit; border-radius: 999px; padding: .5rem .9rem; font: inherit; cursor: pointer; min-height: 2.6rem; }
.tec-chip:hover { border-color: var(--texto-4, #8a8178); }
.tec-chip-on { background: var(--texto, #2b2520); color: var(--superficie, #fff); border-color: var(--texto, #2b2520); }
.tec-chips-grandes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.tec-chips-grandes .tec-chip { border-radius: 12px; padding: .75rem .6rem; display: grid; justify-items: center; gap: .25rem; text-align: center; min-height: 4.6rem; }
.tec-chips-columna { flex-direction: column; }
.tec-chips-columna .tec-chip { border-radius: 12px; text-align: left; }
.tec-aviso-frase { font-size: 1.05rem; padding: .7rem .8rem; }
.tec-aviso-detalle summary { cursor: pointer; color: var(--texto-3, #6b625a); font-size: .92rem; }
.tec-aviso-detalle textarea { width: 100%; margin-top: .4rem; }
.tec-boton-foto { justify-self: start; }
.tec-aviso-enviar { font-size: 1.05rem; padding: .75rem 1.4rem; justify-self: start; }

/* ---- Tecnología · CTO virtual (db/309) -------------------------------- */
.tec-cto-ideas { margin: .2rem 0 .5rem; }
.tec-cto-ideas .tec-chip { min-height: 2.1rem; padding: .3rem .75rem; font-size: .9rem; }
.tec-cto-red h4 { margin: 1rem 0 .4rem; }

/* ---- Interruptor «Promotora · Hoteles» (lado.js, Alberto 11/10/2026) ------
   Arriba del lateral: dos mitades, la activa rellena. Separa los dos negocios
   en el menú y en el filtro de las pantallas compartidas. */
body.nav-lab .navlab-interruptor {
  display: flex;
  gap: 2px;
  margin: 0 0 10px;
  padding: 3px;
  background: var(--lab-beige, #f3eee7);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
body.nav-lab .navlab-int {
  flex: 1;
  padding: 7px 8px;
  background: none;
  color: var(--texto-4, #6b625a);
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
body.nav-lab .navlab-int:hover { color: var(--texto); }
body.nav-lab .navlab-int.activa { background: var(--acento); color: #fff; }
body.nav-lab .navlab-int:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* ---- Tecnología · Administrador de sistemas (db/310) -------------------- */
.tec-accion { margin-bottom: .6rem; }
.tec-proponer { margin: .6rem 0; }
.tec-proponer summary { cursor: pointer; font-weight: 600; }
.tec-paso { display: block; padding: .15rem 0; }
.tec-config { max-height: 28rem; overflow: auto; background: var(--superficie, #fff); border: 1px solid var(--borde, #e6e0d8); border-radius: 8px; padding: .6rem; font-size: .78rem; white-space: pre; }
/* ---- Tecnología · Workspace, grupos (db/781) ---------------------------- */
.tec-grupo-miembros { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .85em; color: var(--texto-3); }
.tec-grupo-miembros li { padding: .1rem 0; }

/* ---- Revenue (db/311) ---------------------------------------------------- */
.rev-sube { color: var(--verde); font-weight: 600; }
.rev-baja { color: var(--rojo); font-weight: 600; }
.rev-analisis { margin: .4rem 0 .8rem; }

/* ---- Tecnología · hilo con fotos (db/295) ------------------------------- */
.tec-hilo-form { display: grid; gap: .4rem; align-items: stretch; }
.tec-hilo-form textarea { min-height: 3.2rem; }
.tec-nota .tec-adj { margin-top: .3rem; }

/* ---- Tecnología · incidencias con IA (db/314) ---------------------------- */
.tec-probar { background: var(--superficie, #fff); border: 1px solid var(--borde, #e6e0d8); border-left: 4px solid var(--verde); border-radius: 10px; padding: .6rem .8rem; margin: .4rem 0 .8rem; }
.tec-probar ol { margin: .3rem 0 .2rem 1.2rem; padding: 0; }
.tec-ia { margin: .4rem 0; padding: .4rem .6rem; border-radius: 8px; background: var(--superficie-2, #f6f2ec); }
.tec-ia summary { cursor: pointer; font-weight: 600; }

/* ---- Tecnología · Equipos (db/271) --------------------------------------- */
.tec-campo { display: grid; gap: .2rem; }
.tec-equipo-form input, .tec-equipo-form select, .tec-equipo-form textarea { font-size: 1rem; padding: .55rem .6rem; }

/* ---- Plan de tesorería cómodo (Alberto, 11/10/2026: «en el móvil, demasiado
   ancha y con demasiadas filas»): Resumen, tabla y tarjetas por periodo. ---- */
.pl-mas { display: inline-block; }
.pl-mas[open] > .filtros { margin-top: 8px; }
.pl-tarjetas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pl-tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; }
.pl-tarjeta h4 { margin: 0 0 6px; font-size: 0.95rem; }
.pl-tarjeta.pl-t-hoy { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.pl-tarjeta.pl-t-alerta { border-color: #c0392b; }
.pl-t-fila { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 0.88rem; }
.pl-t-fila .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-t-in .num { color: #2e7d4f; }
.pl-t-out .num { color: #b04a2f; }
.pl-t-neto, .pl-t-saldo { font-weight: 700; }
.pl-t-saldo { border-top: 1px solid var(--borde); margin-top: 2px; padding-top: 4px; }
.pl-t-saldo.alerta .num { color: #c0392b; }
.pl-t-teo { color: var(--texto-4, #6b625a); font-style: italic; }
.pl-t-cats { margin-top: 6px; }
.pl-t-cats summary { cursor: pointer; font-size: 0.85rem; color: var(--texto-4, #6b625a); }
@media (max-width: 760px) {
  .pl-matriz .pl-fija { min-width: 130px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-matriz td, .pl-matriz th { padding: 5px 7px !important; font-size: 0.78rem; }
}

/* ---- Ventas hoteles (db/530, web/ventas-hoteles.js) ------------------------ */
.vh-pulsable { cursor: pointer; }
.vh-filtros, .vh-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.vh-filtros input { flex: 1; min-width: 180px; }
.vh-estado { font-weight: 600; }
.vh-cabecera h2 { margin: 0 8px 0 0; display: inline-block; }
.vh-kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.vh-columna { background: var(--fondo-suave, #f6f3ee); border-radius: 10px; padding: 8px; min-height: 80px; }
.vh-col-cab { margin-bottom: 6px; }
.vh-tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font-size: .86rem; }
.vh-tarjeta:hover { border-color: var(--modulo, #c0643d); }
.vh-dialogo { width: min(760px, 94vw); max-height: 90vh; overflow: auto; }
.vh-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 14px; }
.vh-form .vh-ancho { grid-column: 1 / -1; }
.vh-form textarea { width: 100%; }
.vh-fila-ed { display: grid; gap: 4px; margin-bottom: 4px; }
.vh-tarea { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.vh-vencida strong { color: var(--rojo-texto, #b42318); }
.vh-act { font-size: .84rem; padding: 4px 0; border-bottom: 1px dashed var(--borde); }
.vh-texto { white-space: pre-wrap; }
.vh-sel { outline: 2px solid var(--modulo, #c0643d); }
@media (max-width: 760px) { .vh-kanban { grid-template-columns: repeat(5, 78vw); } }

/* Tecnología › Gasto IA (13/10/2026) */
.gia-barras { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 8px 0; border-bottom: 1px solid var(--lab-linea, #ddd); }
.gia-barra { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 4px; }
.gia-relleno { width: 100%; background: var(--texto-3, #8a7f72); border-radius: 2px 2px 0 0; }
.gia-pie { display: flex; justify-content: space-between; margin: 4px 0 18px; }
.gia-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.gia-pre { white-space: pre-wrap; font-size: 0.8rem; background: var(--superficie, #faf8f5); padding: 10px; border-radius: 8px; overflow-x: auto; }

/* Tesorería › Real 4, fase 1 (14/10/2026) */
.tabla tr.real4-fuerte td { font-weight: 700; background: var(--superficie, #faf8f5); }
.real4-validar { margin-top: 16px; }
.real4-validar-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.real4-validar-botones .boton { padding: 4px 10px; font-size: 0.82rem; }

/* Tablero de tareas (db/741, 18/10/2026): mover de columna es un <select>, no
   arrastrar (ver tablero.js) — las columnas solo necesitan apilarse bien en
   el móvil, no aceptar soltar nada.
   Rediseño del 18/10 (Alberto: «no llega ni a Google Keep»): tarjeta propia
   (no la genérica .propuesta de Decisiones), checklist siempre visible,
   adjuntos, y un «+ añadir» de pie de columna como un Trello de verdad. */
.tablero-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; align-items: start; margin-top: 10px; }
.tablero-col { background: var(--fondo-suave, #f6f3ee); border-radius: 10px; padding: 8px; min-height: 60px; }
.tablero-col-titulo { margin: 2px 6px 8px; font-size: .86rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }

.tablero-tarjeta {
  background: var(--superficie, #fff);
  border-radius: 10px;
  border-left: 3px solid var(--acento);
  box-shadow: 0 1px 2px rgba(30, 26, 22, .08);
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: box-shadow .15s ease;
}
.tablero-tarjeta:hover { box-shadow: 0 2px 8px rgba(30, 26, 22, .14); }
.tablero-tarjeta.tec-mejora-hecha { border-left-color: var(--verde, #4a7c59); opacity: .8; }
.tablero-tarjeta.tec-mejora-anulada { border-left-color: var(--texto-4); opacity: .6; }
/* Arrastrar y soltar (19/10/2026): además del <select>, que sigue siendo lo fiable en móvil. */
.tablero-tarjeta[draggable="true"] { cursor: grab; }
.tablero-tarjeta-arrastrando { opacity: .4; }
.tablero-col-sobre { outline: 2px dashed var(--acento); outline-offset: -2px; }
.tablero-tarjeta-titulo { cursor: pointer; margin: 4px 0; font-weight: 500; }
.tablero-tarjeta-titulo:hover { text-decoration: underline; }

.tablero-checklist { margin: 6px 0; display: grid; gap: 3px; }
.tablero-checklist-progreso { font-size: .78rem; color: var(--texto-3); margin: 0 0 2px; font-weight: 600; }
.tablero-checklist-hecha { text-decoration: line-through; color: var(--texto-4); }
.tablero-checklist .md-tarea { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; }
.tablero-checklist input[type="text"], .tablero-checklist .asis-nota-campo { font-size: .85rem; margin-top: 2px; }

.tablero-alta { margin-top: 2px; }
.tablero-alta input {
  width: 100%; border: 1px dashed var(--borde); background: transparent;
  border-radius: 8px; padding: 6px 8px; font-size: .88rem;
}
.tablero-alta input:focus { border-style: solid; border-color: var(--acento); }

.tablero-detalle { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde); display: grid; gap: 8px; }
.campo-check { display: flex; align-items: center; gap: 6px; font-size: .9rem; }

.tablero-adjuntos { display: flex; flex-wrap: wrap; gap: 6px; }
.tablero-adjunto {
  display: flex; align-items: center; gap: 4px; background: var(--fondo-suave, #f6f3ee);
  border-radius: 8px; padding: 4px 6px; font-size: .82rem;
}
.tablero-adjunto-nombre { background: none; border: none; cursor: pointer; color: var(--acento); padding: 0; font: inherit; text-decoration: underline; }
.tablero-adjunto-quitar { background: none; border: none; cursor: pointer; color: var(--texto-4); padding: 0 2px; font-size: .9rem; }
.tablero-adjunto-quitar:hover { color: var(--rojo, #b4432e); }
.tablero-adjunto-campo { font-size: .82rem; }

/* Decisiones: posponer (db/753) y deshacer (19/10/2026) */
.aviso-accion { background: none; border: none; cursor: pointer; color: inherit; font-weight: 600; text-decoration: underline; padding: 0; font-size: inherit; }
.propuesta-posponer { font-size: .85rem; }

.tablero-correo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: .85rem; }
.tablero-correos-resultados { display: grid; gap: 2px; }

/* Colaboradores (19/10/2026): varios por tarjeta, de cualquier departamento. */
.tablero-colaboradores { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.tablero-colaborador { display: inline-flex; align-items: center; gap: 2px; }

/* Vista de lista (19/10/2026, Alberto: «para poder decidir» con 100+ pendientes) */
.tablero-vista { display: flex; gap: 2px; margin-left: auto; }
.tablero-vista-activa { font-weight: 700; color: var(--texto); text-decoration: none; }
.tablero-lista td { vertical-align: middle; }
.tablero-lista-fila { cursor: pointer; }
.tablero-lista-fila select { font-size: .85rem; }
.tablero-lista-detalle > td { cursor: default; background: var(--fondo-suave, #f6f3ee); }
.tablero-lista-detalle .tablero-detalle { border-top: 0; margin-top: 0; }

/* ---- Explorador de Dropbox en un campo de ruta (20/10/2026) ---- */
.campo-ruta-fila { display: flex; gap: 8px; }
.campo-ruta-fila input { flex: 1; }
/* El panel flota bajo el propio botón, para que botonExplorarDropbox() valga
   igual dentro de una fila flex, de una celda de tabla o suelto. */
.campo-ruta-explorador { position: relative; display: inline-block; }
.campo-ruta-panel { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 280px; max-width: min(420px, 90vw);
  background: var(--fondo, #fff); border: 1px solid var(--borde); border-radius: var(--radio-s, 8px);
  padding: 8px 10px; margin-top: 4px; max-height: 240px; overflow-y: auto; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.campo-ruta-panel.oculto { display: none; }
.campo-ruta-lista { list-style: none; margin: 4px 0 0; padding: 0; }
.campo-ruta-lista li { padding: 2px 0; }
.campo-ruta-lista button { text-align: left; width: 100%; }

/* Estudios de inversión (web/estudios-inversion.js): formulario, documentos y propuesta de la IA. */
.estudio-form { display: block; }
.estudio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin: 6px 0; }
.estudio-form .campo { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; min-width: 0; }
.estudio-form .campo-etiqueta { color: var(--texto-3); font-size: 0.82rem; }
.estudio-filas { margin: 8px 0; }
.estudio-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 6px 0; border-bottom: 1px dashed var(--borde); }
.estudio-subtitulo { margin: 14px 0 6px; font-size: 1rem; }
.estudio-botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.estudio-avisos { color: var(--texto-2); padding-left: 1.2em; }
.estudio-docs { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
.estudio-docs li { display: flex; gap: 10px; align-items: center; }
.estudio-ia, .estudio-propuesta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 12px 14px; margin: 10px 0; }
.estudio-fuentes { color: var(--texto-2); font-size: 0.9rem; padding-left: 1.2em; }
.estudio-notas { width: 100%; }
.estudio-resultados { margin-top: 14px; }

/* ---- Móvil: la barra superior se desliza de lado con el dedo ------------
   Con los botones de novedades, tarea, IT, sugerencia e IA ya no caben: en
   vez de aplastar el título, la barra entera se desplaza a izquierda y derecha. */
@media (max-width: 1023px) {
  .cabecera {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cabecera::-webkit-scrollbar { display: none; }
  .cabecera > * { flex-shrink: 0; }
  .cabecera .marca { min-width: auto; }
  .cabecera-titulo, #nombrePromocion { overflow: visible; text-overflow: clip; }
}