/* =============================================================================
   tema.css — tema visual de Cero Trastero
   Único CSS propio del proyecto. Se carga DESPUÉS de Bootstrap 5.3 y lo
   retematiza vía variables CSS (sin Sass ni build). Paleta verificada WCAG:
   todos los pares texto/fondo ≥ 4.5:1 y los elementos no textuales ≥ 3:1.

   Índice:
     1. Tokens de marca y remapeo de variables de Bootstrap
     2. Base tipográfica y utilidades pequeñas
     3. Overrides de componentes Bootstrap (botones, tarjetas, formularios…)
     4. Layout de gestión (sidebar marina, topbar, contenido)
     5. Componentes propios (badges de estado, KPI, mapa de trasteros,
        estados vacíos, gráficas, WhatsApp)
     6. Parte pública (cabecera, hero, catálogo, contacto, pie)
     7. Página de login
     8. Accesibilidad, movimiento reducido e impresión
   ========================================================================== */

/* =============================================================================
   1. TOKENS DE MARCA Y REMAPEO DE VARIABLES DE BOOTSTRAP
   ========================================================================== */
:root {
  /* Colores de marca */
  --ct-marino: #123B5C;        /* primario: sidebar, hero, títulos, footer */
  --ct-azul: #1F66B0;          /* interactivo: enlaces, botón primario, foco */
  --ct-azul-oscuro: #18528F;   /* hover del interactivo */
  --ct-ambar: #F5A623;         /* acento / CTA público */
  --ct-ambar-oscuro: #E0940F;  /* hover del CTA */
  --ct-ambar-texto: #3D2C00;   /* texto sobre ámbar (6.65:1) */

  /* Neutros */
  --ct-fondo: #F5F7FA;         /* fondo de página */
  --ct-superficie: #FFFFFF;    /* tarjetas, tablas, formularios */
  --ct-borde: #E3E8EF;         /* bordes finos y separadores */
  --ct-tinta: #1C2B39;         /* texto principal (~13:1) */
  --ct-tinta-2: #5A6472;       /* texto secundario, labels, ejes (6:1) */

  /* Paleta de series para gráficas (orden fijo; el color sigue a la entidad) */
  --ct-serie-1: #2A78D6;
  --ct-serie-2: #1BAF7A;
  --ct-serie-3: #EDA100;
  --ct-serie-4: #4A3AA7;
  --ct-serie-5: #E34948;
  --ct-serie-6: #EB6834;
  /* Variante clara de la serie 1: barras PROYECTADAS (meses futuros
     estimados «como el mes actual») frente a las reales en serie-1 */
  --ct-serie-1-suave: #BBD5F2;

  /* WhatsApp accesible (el verde oficial no contrasta con blanco) */
  --ct-whatsapp: #0E7C41;
  --ct-whatsapp-oscuro: #0B6535;

  /* Estados de trastero: fondo tintado / texto oscuro / punto sólido */
  --ct-disponible-fondo: #DCF3E4;
  --ct-disponible-texto: #0F6A33;
  --ct-disponible-punto: #2F9E44;
  --ct-ocupado-fondo: #FBE4E6;
  --ct-ocupado-texto: #9E2B33;
  --ct-ocupado-punto: #D64545;
  --ct-reservado-fondo: #FCEFD3;
  --ct-reservado-texto: #7A5200;
  --ct-reservado-punto: #F5A623;
  --ct-no-disponible-fondo: #E9ECEF;
  --ct-no-disponible-texto: #4A5158;
  --ct-no-disponible-punto: #868E96;

  /* Tipografía, radios y sombra de marca */
  --ct-fuente-titulos: 'Sora', 'Inter', system-ui, sans-serif;
  --ct-fuente-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ct-radio-tarjeta: 12px;
  --ct-radio-control: 8px;
  --ct-sombra: 0 1px 2px rgba(18, 59, 92, .06), 0 4px 12px rgba(18, 59, 92, .08);
  --ct-sombra-alta: 0 4px 14px rgba(18, 59, 92, .22);

  /* Patrón sutil de cajas para fondos marinos (hero público y login) */
  --ct-patron-cajas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.05' stroke-width='2'%3E%3Crect x='14' y='44' width='36' height='30' rx='3'/%3E%3Cpath d='M14 54h36M32 44v10'/%3E%3Crect x='70' y='18' width='30' height='24' rx='3'/%3E%3Cpath d='M70 26h30M85 18v8'/%3E%3Crect x='66' y='74' width='34' height='28' rx='3'/%3E%3Cpath d='M66 84h34M83 74v10'/%3E%3C/g%3E%3C/svg%3E");

  /* Remapeo de Bootstrap: a partir de aquí Bootstrap deja de parecer Bootstrap */
  --bs-body-bg: var(--ct-fondo);
  --bs-body-color: var(--ct-tinta);
  --bs-body-font-family: var(--ct-fuente-cuerpo);
  --bs-border-radius: var(--ct-radio-control);
  --bs-border-color: var(--ct-borde);
  --bs-link-color: var(--ct-azul);
  --bs-link-color-rgb: 31, 102, 176;
  --bs-link-hover-color: var(--ct-azul-oscuro);
  --bs-link-hover-color-rgb: 24, 82, 143;
  --bs-secondary-color: var(--ct-tinta-2);
}

/* =============================================================================
   2. BASE TIPOGRÁFICA Y UTILIDADES PEQUEÑAS
   ========================================================================== */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--ct-fuente-titulos);
  font-weight: 700;
  color: var(--ct-marino);
}

h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.375rem; }
h3, .h3 { font-size: 1.125rem; }

/* Cifras tabulares: importes y m² alineados en columnas y ejes */
.num { font-variant-numeric: tabular-nums; }

/* Filas de tabla clicables (JS progresivo de gestion.js sobre tr[data-href]) */
.fila-clicable { cursor: pointer; }

/* =============================================================================
   3. OVERRIDES DE COMPONENTES BOOTSTRAP
   ========================================================================== */

/* --- Botones ------------------------------------------------------------- */
.btn { --bs-btn-font-weight: 500; }

/* Primario de gestión: azul interactivo */
.btn-primary {
  --bs-btn-bg: var(--ct-azul);
  --bs-btn-border-color: var(--ct-azul);
  --bs-btn-hover-bg: var(--ct-azul-oscuro);
  --bs-btn-hover-border-color: var(--ct-azul-oscuro);
  --bs-btn-active-bg: #144677;
  --bs-btn-active-border-color: #144677;
  --bs-btn-disabled-bg: var(--ct-azul);
  --bs-btn-disabled-border-color: var(--ct-azul);
  --bs-btn-focus-shadow-rgb: 31, 102, 176;
}

/* Secundario suave: blanco con borde, sustituye al gris de Bootstrap */
.btn-outline-secondary {
  --bs-btn-color: var(--ct-tinta);
  --bs-btn-bg: var(--ct-superficie);
  --bs-btn-border-color: #C6CFDA;
  --bs-btn-hover-color: var(--ct-tinta);
  --bs-btn-hover-bg: #EFF3F8;
  --bs-btn-hover-border-color: #B3BFCC;
  --bs-btn-active-color: var(--ct-tinta);
  --bs-btn-active-bg: #E4EAF1;
  --bs-btn-active-border-color: #B3BFCC;
  --bs-btn-focus-shadow-rgb: 31, 102, 176;
}

/* CTA público ámbar (texto oscuro: 6.65:1) */
.btn-cta {
  --bs-btn-color: var(--ct-ambar-texto);
  --bs-btn-bg: var(--ct-ambar);
  --bs-btn-border-color: var(--ct-ambar);
  --bs-btn-hover-color: var(--ct-ambar-texto);
  --bs-btn-hover-bg: var(--ct-ambar-oscuro);
  --bs-btn-hover-border-color: var(--ct-ambar-oscuro);
  --bs-btn-active-color: var(--ct-ambar-texto);
  --bs-btn-active-bg: var(--ct-ambar-oscuro);
  --bs-btn-active-border-color: var(--ct-ambar-oscuro);
  --bs-btn-font-weight: 600;
  --bs-btn-focus-shadow-rgb: 245, 166, 35;
}

/* Botón WhatsApp (verde accesible 5.28:1 con blanco) */
.btn-whatsapp {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ct-whatsapp);
  --bs-btn-border-color: var(--ct-whatsapp);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ct-whatsapp-oscuro);
  --bs-btn-hover-border-color: var(--ct-whatsapp-oscuro);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ct-whatsapp-oscuro);
  --bs-btn-active-border-color: var(--ct-whatsapp-oscuro);
  --bs-btn-font-weight: 600;
  --bs-btn-focus-shadow-rgb: 14, 124, 65;
}

/* Botón de solo icono (hamburguesa de la topbar) */
.btn-icono {
  border: 0;
  background: transparent;
  color: var(--ct-tinta);
  font-size: 1.5rem;
  line-height: 1;
  padding: .25rem .5rem;
  border-radius: var(--ct-radio-control);
}
.btn-icono:hover { background: var(--ct-fondo); }

/* --- Tarjetas ------------------------------------------------------------ */
.card {
  --bs-card-border-color: var(--ct-borde);
  --bs-card-border-radius: var(--ct-radio-tarjeta);
  --bs-card-inner-border-radius: calc(var(--ct-radio-tarjeta) - 1px);
  --bs-card-cap-bg: transparent;
  box-shadow: 0 1px 2px rgba(18, 59, 92, .05);
}

/* --- Formularios ---------------------------------------------------------- */
.form-control, .form-select {
  border-color: #C6CFDA;
  border-radius: var(--ct-radio-control);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ct-azul);
  box-shadow: 0 0 0 .25rem rgba(31, 102, 176, .2);
}
.form-label { font-weight: 500; margin-bottom: .375rem; }
.form-text { color: var(--ct-tinta-2); }

/* --- Tablas --------------------------------------------------------------- */
.table {
  --bs-table-hover-bg: #F0F4F9;
  --bs-table-striped-bg: #F8FAFC;
}
.table thead th {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ct-tinta-2);
  border-bottom-color: var(--ct-borde);
}
.table > :not(caption) > * > * { padding: .625rem .75rem; }
.table tbody td { vertical-align: middle; }

/* --- Cabeceras de tabla ordenables ------------------------------------------
   Server-side: parciales/_th_ordenable.html pinta un enlace dentro de un
   th.th-orden. Client-side: gestion.js activa th[data-orden] directamente.
   Ambos casos: cursor de acción, indicador caret y fondo sutil en la columna
   ordenada (th[aria-sort]), con área táctil suficiente (≥40px) en móvil. */
.th-orden,
.table thead th[data-orden] { cursor: pointer; white-space: nowrap; }
.th-orden { padding: 0 !important; }
.th-orden a {
  display: flex;
  align-items: center;
  gap: .3rem;
  min-height: 40px;                 /* área táctil */
  padding: .625rem .75rem;          /* recupera el padding cedido por el th */
  color: inherit;                   /* hereda el gris de cabecera */
  text-decoration: none;
}
.th-orden.text-end a { justify-content: flex-end; }
.th-orden a:hover,
.th-orden a:focus-visible { color: var(--ct-azul); }
.table thead th[data-orden] { padding-top: .7rem; padding-bottom: .7rem; }
/* Indicador de dirección (bi-caret-up-fill / bi-caret-down-fill) */
.th-orden .bi-caret-up-fill,
.th-orden .bi-caret-down-fill,
th[data-orden] .bi-caret-up-fill,
th[data-orden] .bi-caret-down-fill {
  font-size: .75em;
  color: var(--ct-azul);
}
/* Columna ordenada ahora mismo: fondo sutil */
.table thead th[aria-sort] { background-color: #EDF2F8; }

/* --- Migas, paginación, dropdown ------------------------------------------ */
.breadcrumb {
  --bs-breadcrumb-divider: '/';
  font-size: .875rem;
  margin-bottom: 0;
}
.breadcrumb .breadcrumb-item.active { color: var(--ct-tinta-2); }

.pagination {
  --bs-pagination-color: var(--ct-azul);
  --bs-pagination-hover-color: var(--ct-azul-oscuro);
  --bs-pagination-focus-color: var(--ct-azul-oscuro);
  --bs-pagination-active-bg: var(--ct-azul);
  --bs-pagination-active-border-color: var(--ct-azul);
  --bs-pagination-border-color: var(--ct-borde);
  /* Con muchas páginas, en móvil los números saltan de línea en vez de desbordar */
  flex-wrap: wrap;
  row-gap: .25rem;
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--ct-borde);
  --bs-dropdown-link-active-bg: var(--ct-azul);
  box-shadow: var(--ct-sombra);
}

/* =============================================================================
   4. LAYOUT DE GESTIÓN (sidebar marina, topbar, contenido)
   ========================================================================== */

/* Colores del panel lateral también en modo offcanvas (móvil) */
.sidebar {
  --bs-offcanvas-width: 280px;
  --bs-offcanvas-bg: var(--ct-marino);
  --bs-offcanvas-color: rgba(255, 255, 255, .85);
}

/* En escritorio (≥992px) el offcanvas-lg se vuelve un panel fijo en columna.
   Bootstrap fuerza ahí background transparente con !important: lo recuperamos. */
@media (min-width: 992px) {
  .layout-gestion { display: flex; align-items: stretch; min-height: 100vh; }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex: 0 0 260px;
    width: 260px;
    overflow-y: auto;
    background-color: var(--ct-marino) !important;
  }
  .sidebar .offcanvas-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    padding: 1rem .75rem;
    overflow-y: auto;
  }
  .zona-principal { flex: 1 1 auto; min-width: 0; }
}

.sidebar__logo { padding: .5rem .75rem 1.25rem; }

.sidebar__nav { display: flex; flex-direction: column; gap: .125rem; }

.sidebar__enlace {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .75rem;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--ct-radio-control);
  border-left: 3px solid transparent;
}
.sidebar__enlace .bi { font-size: 1.1rem; }
.sidebar__enlace:hover,
.sidebar__enlace:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}
/* Ítem activo: borde izquierdo ámbar + fondo sutil + texto blanco */
.sidebar__enlace.activo {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-left-color: var(--ct-ambar);
}

.sidebar__separador {
  border-color: rgba(255, 255, 255, .18);
  opacity: 1;
  margin: .75rem .5rem;
}

/* --- Topbar ---------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding: .5rem 1rem;
  background: var(--ct-superficie);
  border-bottom: 1px solid var(--ct-borde);
  position: sticky;
  top: 0;
  z-index: 1020;
}
.topbar__migas { min-width: 0; overflow-x: auto; }
/* En móvil las migas largas (nombres de cliente…) se desplazan en horizontal
   dentro de su franja en vez de partir la topbar en varias líneas. */
.topbar__migas .breadcrumb { flex-wrap: nowrap; white-space: nowrap; }
.topbar__usuario {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  background: transparent;
  color: var(--ct-tinta);
  font-weight: 500;
  padding: .375rem .5rem;
  border-radius: var(--ct-radio-control);
}
.topbar__usuario:hover { background: var(--ct-fondo); }
.topbar__usuario .bi-person-circle { font-size: 1.35rem; color: var(--ct-tinta-2); }

/* --- Contenido -------------------------------------------------------------- */
.contenido {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding: 1.25rem 1rem 3rem;
}
@media (min-width: 992px) {
  .contenido { padding: 2rem 2rem 4rem; }
}

.cabecera-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: 1.25rem;
}
.cabecera-pagina__titulo { margin-bottom: 0; }
.cabecera-pagina__acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* =============================================================================
   5. COMPONENTES PROPIOS
   ========================================================================== */

/* --- Badge de estado: pill tintada + punto + texto ------------------------ */
.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .25em .7em;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--estado-fondo, var(--ct-no-disponible-fondo));
  color: var(--estado-texto, var(--ct-no-disponible-texto));
}
/* Punto de color (decorativo: el texto siempre acompaña al color) */
.badge-estado::before {
  content: '';
  width: .55em;
  height: .55em;
  border-radius: 50%;
  flex: none;
  background: var(--estado-punto, var(--ct-no-disponible-punto));
}
.badge-estado--disponible {
  --estado-fondo: var(--ct-disponible-fondo);
  --estado-texto: var(--ct-disponible-texto);
  --estado-punto: var(--ct-disponible-punto);
}
.badge-estado--ocupado {
  --estado-fondo: var(--ct-ocupado-fondo);
  --estado-texto: var(--ct-ocupado-texto);
  --estado-punto: var(--ct-ocupado-punto);
}
.badge-estado--reservado {
  --estado-fondo: var(--ct-reservado-fondo);
  --estado-texto: var(--ct-reservado-texto);
  --estado-punto: var(--ct-reservado-punto);
}
.badge-estado--no_disponible {
  --estado-fondo: var(--ct-no-disponible-fondo);
  --estado-texto: var(--ct-no-disponible-texto);
  --estado-punto: var(--ct-no-disponible-punto);
}

/* --- Tarjeta KPI ------------------------------------------------------------ */
.tarjeta-kpi {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem;
  background: var(--ct-superficie);
  border: 1px solid var(--ct-borde);
  border-radius: var(--ct-radio-tarjeta);
  box-shadow: 0 1px 2px rgba(18, 59, 92, .05);
}
.tarjeta-kpi__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #E3EEFA;               /* azul tintado */
  color: var(--ct-azul);
  font-size: 1.25rem;
}
.tarjeta-kpi__texto { min-width: 0; }
.tarjeta-kpi__valor {
  font-family: var(--ct-fuente-titulos);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--ct-tinta);
}
.tarjeta-kpi__sufijo { font-size: 1rem; font-weight: 600; color: var(--ct-tinta-2); }
.tarjeta-kpi__etiqueta { color: var(--ct-tinta-2); font-size: .875rem; }
.tarjeta-kpi__nota { color: var(--ct-tinta-2); font-size: .75rem; margin-top: .25rem; }

/* KPI en móvil (col-6 a 360px): el icono pasa arriba y el valor baja de
   cuerpo para que importes como «7.540,40 €» quepan sin desbordar la
   tarjeta; overflow-wrap como red de seguridad para valores aún más largos. */
@media (max-width: 575.98px) {
  .tarjeta-kpi {
    flex-direction: column;
    align-items: stretch;
    gap: .625rem;
    padding: 1rem;
  }
  .tarjeta-kpi__icono { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }
  .tarjeta-kpi__valor { font-size: 1.25rem; overflow-wrap: anywhere; }
  .tarjeta-kpi__sufijo { font-size: .875rem; }
}

/* Tarjeta KPI enlazada: toda la tarjeta es clicable */
.tarjeta-kpi-enlace { display: block; height: 100%; text-decoration: none; color: inherit; }
.tarjeta-kpi-enlace:hover .tarjeta-kpi,
.tarjeta-kpi-enlace:focus-visible .tarjeta-kpi {
  box-shadow: var(--ct-sombra);
  border-color: #C9D6E4;
}

/* --- Mini-tarjeta de trastero (mapa de ocupación del dashboard) ------------ */
.tarjeta-trastero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .125rem;
  min-height: 84px;
  padding: .5rem .375rem;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid var(--trastero-borde, var(--ct-borde));
  background: var(--trastero-fondo, var(--ct-superficie));
  color: var(--trastero-texto, var(--ct-tinta));
  transition: box-shadow .15s ease, transform .15s ease;
}
.tarjeta-trastero:hover,
.tarjeta-trastero:focus-visible {
  color: var(--trastero-texto, var(--ct-tinta));
  box-shadow: var(--ct-sombra);
  transform: translateY(-1px);
}
.tarjeta-trastero__numero {
  font-family: var(--ct-fuente-titulos);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
}
.tarjeta-trastero__superficie { font-size: .75rem; opacity: .85; }

/* Tinte de fondo + borde del color sólido según el estado efectivo */
.tarjeta-trastero--disponible {
  --trastero-fondo: var(--ct-disponible-fondo);
  --trastero-borde: var(--ct-disponible-punto);
  --trastero-texto: var(--ct-disponible-texto);
}
.tarjeta-trastero--ocupado {
  --trastero-fondo: var(--ct-ocupado-fondo);
  --trastero-borde: var(--ct-ocupado-punto);
  --trastero-texto: var(--ct-ocupado-texto);
}
.tarjeta-trastero--reservado {
  --trastero-fondo: var(--ct-reservado-fondo);
  --trastero-borde: var(--ct-reservado-punto);
  --trastero-texto: var(--ct-reservado-texto);
}
.tarjeta-trastero--no_disponible {
  --trastero-fondo: var(--ct-no-disponible-fondo);
  --trastero-borde: var(--ct-no-disponible-punto);
  --trastero-texto: var(--ct-no-disponible-texto);
}

/* --- Estado vacío ------------------------------------------------------------ */
.estado-vacio {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--ct-tinta-2);
}
.estado-vacio > .bi {
  display: block;
  font-size: 2.5rem;
  color: #C6CFDA;
  margin-bottom: .75rem;
}
.estado-vacio__titulo { color: var(--ct-tinta); font-size: 1.125rem; }
.estado-vacio__texto { max-width: 46ch; margin: 0 auto .25rem; }
.estado-vacio .btn { margin-top: .75rem; }

/* Variante para sustituir a un canvas de gráfica con pocos datos */
.estado-vacio--grafica {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
}

/* --- Gráficas ----------------------------------------------------------------- */
/* Altura fija (incluye la banda del eje X) para que Chart.js con
   maintainAspectRatio:false no provoque saltos ni scroll interno. */
.grafica-contenedor { position: relative; height: 300px; }

/* Tabla de datos desplegable bajo cada gráfica (alternativa accesible) */
.tabla-datos { margin-top: .75rem; font-size: .875rem; }
.tabla-datos summary {
  cursor: pointer;
  color: var(--ct-azul);
  font-weight: 500;
  width: fit-content;
  border-radius: 4px;
}
.tabla-datos summary:hover { color: var(--ct-azul-oscuro); text-decoration: underline; }
.tabla-datos[open] summary { margin-bottom: .5rem; }

/* --- WhatsApp flotante (web pública) ----------------------------------------- */
.btn-whatsapp-flotante {
  position: fixed;
  right: 16px;
  /* Respeta la barra de gestos/home de los móviles con notch */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 28px;
  color: #fff;
  background: var(--ct-whatsapp);
  box-shadow: var(--ct-sombra-alta);
  text-decoration: none;
}
.btn-whatsapp-flotante:hover,
.btn-whatsapp-flotante:focus-visible {
  color: #fff;
  background: var(--ct-whatsapp-oscuro);
}
/* En móvil el botón flotante no debe tapar la última línea del pie
   («Acceso gestión»): se reserva su hueco al final de la página. */
@media (max-width: 767.98px) {
  .pie-publico .container { padding-bottom: 76px; }
}

/* =============================================================================
   6. PARTE PÚBLICA
   ========================================================================== */

/* --- Cabecera sticky blanca --------------------------------------------------- */
.cabecera-publica {
  background: var(--ct-superficie);
  border-bottom: 1px solid var(--ct-borde);
}
.cabecera-publica__telefono {
  color: var(--ct-marino);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cabecera-publica__telefono:hover { color: var(--ct-azul); }

/* --- Hero marino con patrón sutil de cajas ------------------------------------ */
.hero-publico {
  background-color: var(--ct-marino);
  background-image: var(--ct-patron-cajas);
  color: #fff;
  padding: 3.5rem 0 4rem;
}
.hero-publico h1 {
  color: #fff;
  font-size: clamp(1.875rem, 4.5vw, 2.625rem);
  letter-spacing: -.01em;
}
.hero-publico .hero-publico__subtitulo {
  color: rgba(255, 255, 255, .88);
  font-size: 1.125rem;
  max-width: 56ch;
}

/* --- Tarjeta de catálogo -------------------------------------------------------- */
.tarjeta-catalogo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  padding: 1.25rem;
  background: var(--ct-superficie);
  border: 1px solid var(--ct-borde);
  border-radius: var(--ct-radio-tarjeta);
  box-shadow: 0 1px 2px rgba(18, 59, 92, .05);
}
.tarjeta-catalogo__icono { font-size: 1.5rem; color: #C6CFDA; }
.tarjeta-catalogo__superficie {
  font-family: var(--ct-fuente-titulos);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ct-marino);
  line-height: 1.2;
}
.tarjeta-catalogo__precio {
  font-family: var(--ct-fuente-titulos);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ct-tinta);
}
.tarjeta-catalogo__mes { font-size: .875rem; color: var(--ct-tinta-2); font-weight: 600; }
.tarjeta-catalogo__iva {
  display: block;
  font-family: var(--ct-fuente-cuerpo);
  font-size: .75rem;
  font-weight: 400;
  color: var(--ct-tinta-2);
}
.tarjeta-catalogo__sede { color: var(--ct-tinta-2); font-size: .875rem; }
.tarjeta-catalogo .btn { margin-top: auto; }

/* --- Botones de contacto (WhatsApp + teléfono + email) --------------------------
   Los emails y teléfonos largos no tienen espacios: en pantallas de 360px el
   botón debe poder partir el texto antes que desbordar su contenedor. */
.contacto-botones .btn { max-width: 100%; overflow-wrap: anywhere; }

/* --- Sección de contacto destacada (borde ámbar) -------------------------------- */
.seccion-contacto {
  background: var(--ct-superficie);
  border: 1px solid var(--ct-borde);
  border-left: 4px solid var(--ct-ambar);
  border-radius: var(--ct-radio-tarjeta);
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(18, 59, 92, .05);
}

/* --- Pie marino ------------------------------------------------------------------ */
.pie-publico {
  background: var(--ct-marino);
  color: rgba(255, 255, 255, .8);
  margin-top: 3rem;
}
.pie-publico a {
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
}
.pie-publico a:hover { color: #fff; text-decoration: underline; }
.pie-publico__titulo {
  color: #fff;
  font-size: 1rem;
  margin-bottom: .75rem;
}
.pie-publico__claim { color: rgba(255, 255, 255, .85); }
.pie-publico__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pie-publico__linea-final {
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .875rem;
}

/* =============================================================================
   7. PÁGINA DE LOGIN
   ========================================================================== */
.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: var(--ct-marino);
  background-image: var(--ct-patron-cajas);
}
.pagina-login__columna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 400px;
}
.tarjeta-login {
  width: 100%;
  border: 0;
  box-shadow: var(--ct-sombra-alta);
}
.pagina-login__subtitulo { color: var(--ct-tinta-2); }
.pagina-login__volver {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}
.pagina-login__volver:hover,
.pagina-login__volver:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* =============================================================================
   8. ACCESIBILIDAD, MOVIMIENTO REDUCIDO E IMPRESIÓN
   ========================================================================== */

/* Anillo de foco visible y consistente en toda la app */
:focus-visible {
  outline: 2px solid var(--ct-azul);
  outline-offset: 2px;
}
/* Sobre fondos marinos el anillo azul no contrasta: se usa blanco */
.sidebar :focus-visible,
.pie-publico :focus-visible,
.hero-publico :focus-visible,
.pagina-login :focus-visible {
  outline-color: #fff;
}

/* Movimiento reducido: sin transiciones ni animaciones (Chart.js desactiva
   las suyas desde graficas.js con la misma media query) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Impresión básica: solo el contenido, sin navegación ni flotantes */
@media print {
  .sidebar,
  .topbar,
  .cabecera-publica,
  .pie-publico,
  .btn-whatsapp-flotante,
  .cabecera-pagina__acciones,
  .no-imprimir {
    display: none !important;
  }
  body { background: #fff; }
  .contenido { max-width: none; padding: 0; }
  .card, .tarjeta-kpi, .tarjeta-catalogo { box-shadow: none; }
}