/*
 * Marca Gi Group Holding para la interfaz de reservas («Reservas Gi»). Receta: docs/receta-marca.md.
 *
 * La inyecta el include de nginx al final de <head>, después del CSS de la app y de los del kit:
 * marca/css/holding.css (los tokens) y marca/css/tipografias-holding.css (Lato).
 * Colores: solo la capa semántica (--gi-color-*). Radios, sombras y tipografía: la capa ui.
 * Solo tema claro: el script que el include pone después de <head> fija el tema antes de que la app
 * lo lea (superficie 7), así que aquí no hay reglas para [data-bs-theme=dark].
 * G5 comprueba que cada clase de este archivo exista en la imagen fijada: si upstream la renombra, la
 * regla dejaría de aplicar sin aviso.
 */

/* ── 1 · Variables raíz de Bootstrap 5.3 → tokens del kit ───────────────────────────────────── */
:root,
[data-bs-theme=light] {
  --bs-primary: var(--gi-color-action-primary-bg);
  --bs-body-font-family: var(--gi-ui-font-base);
  --bs-body-color: var(--gi-color-text-body);
  --bs-body-bg: var(--gi-color-bg-surface);
  --bs-emphasis-color: var(--gi-color-text-primary);
  --bs-heading-color: var(--gi-color-text-primary);
  --bs-secondary-color: var(--gi-color-text-secondary);
  --bs-tertiary-color: var(--gi-color-text-muted);
  --bs-secondary-bg: var(--gi-color-bg-muted);
  --bs-tertiary-bg: var(--gi-color-bg-page);
  --bs-link-color: var(--gi-color-text-link);
  --bs-link-hover-color: var(--gi-color-text-link-hover);
  --bs-border-color: var(--gi-color-border-default);
  --bs-border-color-translucent: var(--gi-color-border-subtle);
  --bs-border-radius: var(--gi-ui-radius-md);
  --bs-border-radius-sm: var(--gi-ui-radius-sm);
  --bs-border-radius-lg: var(--gi-ui-radius-lg);
  --bs-border-radius-xl: var(--gi-ui-radius-xl);
  --bs-border-radius-xxl: var(--gi-ui-radius-2xl);
  --bs-box-shadow: var(--gi-ui-shadow-md);
  --bs-box-shadow-sm: var(--gi-ui-shadow-sm);
  --bs-box-shadow-lg: var(--gi-ui-shadow-lg);
  --bs-primary-text-emphasis: var(--gi-color-text-brand);
  --bs-primary-bg-subtle: var(--gi-color-bg-surface);
  --bs-primary-border-subtle: var(--gi-color-border-default);
  --bs-success-text-emphasis: var(--gi-color-status-success-text);
  --bs-success-bg-subtle: var(--gi-color-status-success-bg);
  --bs-success-border-subtle: var(--gi-color-status-success-border);
  --bs-warning-text-emphasis: var(--gi-color-status-warning-text);
  --bs-warning-bg-subtle: var(--gi-color-status-warning-bg);
  --bs-warning-border-subtle: var(--gi-color-status-warning-border);
  --bs-danger-text-emphasis: var(--gi-color-status-error-text);
  --bs-danger-bg-subtle: var(--gi-color-status-error-bg);
  --bs-danger-border-subtle: var(--gi-color-status-error-border);
  --bs-info-text-emphasis: var(--gi-color-status-info-text);
  --bs-info-bg-subtle: var(--gi-color-status-info-bg);
  --bs-info-border-subtle: var(--gi-color-status-info-border);
  --bs-form-valid-color: var(--gi-color-status-success-text);
  --bs-form-valid-border-color: var(--gi-color-border-success);
  --bs-form-invalid-color: var(--gi-color-status-error-text);
  --bs-form-invalid-border-color: var(--gi-color-border-error);
}

/* El fondo de la página; las tarjetas, los campos y los modales quedan en bg-surface. La fuente va
 * también aquí: un CSS de la app fija la del body sin pasar por la variable de Bootstrap. */
body {
  background-color: var(--gi-color-bg-page);
  font-family: var(--gi-ui-font-base);
}

/* Los títulos, con un peso de la escala del Holding (400 y 700): Bootstrap usa 500. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--gi-text-heading-md-weight);
}

/* Bootstrap pinta los enlaces con un triplete RGB que no se puede derivar de un token. */
a {
  color: var(--gi-color-text-link);
}

a:hover {
  color: var(--gi-color-text-link-hover);
}

.link-primary {
  color: var(--gi-color-text-link) !important;
}

.bg-primary {
  background-color: var(--gi-color-action-primary-bg) !important;
}

/* ── 2 · Botones ────────────────────────────────────────────────────────────────────────────── */
.btn {
  --bs-btn-focus-box-shadow: var(--gi-ui-shadow-focus);
}

.btn-primary {
  --bs-btn-color: var(--gi-color-action-primary-text);
  --bs-btn-bg: var(--gi-color-action-primary-bg);
  --bs-btn-border-color: var(--gi-color-action-primary-bg);
  --bs-btn-hover-color: var(--gi-color-action-primary-text);
  --bs-btn-hover-bg: var(--gi-color-action-primary-bg-hover);
  --bs-btn-hover-border-color: var(--gi-color-action-primary-bg-hover);
  --bs-btn-active-color: var(--gi-color-action-primary-text);
  --bs-btn-active-bg: var(--gi-color-action-primary-bg-active);
  --bs-btn-active-border-color: var(--gi-color-action-primary-bg-active);
  --bs-btn-disabled-color: var(--gi-color-action-primary-text);
  --bs-btn-disabled-bg: var(--gi-color-action-primary-bg-disabled);
  --bs-btn-disabled-border-color: var(--gi-color-action-primary-bg-disabled);
}

.btn-outline-primary {
  --bs-btn-color: var(--gi-color-text-brand);
  --bs-btn-border-color: var(--gi-color-action-primary-bg);
  --bs-btn-hover-color: var(--gi-color-action-primary-text);
  --bs-btn-hover-bg: var(--gi-color-action-primary-bg);
  --bs-btn-hover-border-color: var(--gi-color-action-primary-bg);
  --bs-btn-active-color: var(--gi-color-action-primary-text);
  --bs-btn-active-bg: var(--gi-color-action-primary-bg-active);
  --bs-btn-active-border-color: var(--gi-color-action-primary-bg-active);
  --bs-btn-disabled-color: var(--gi-color-text-disabled);
  --bs-btn-disabled-border-color: var(--gi-color-border-default);
}

.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--gi-color-action-secondary-text);
  --bs-btn-bg: var(--gi-color-action-secondary-bg);
  --bs-btn-border-color: var(--gi-color-action-secondary-border);
  --bs-btn-hover-color: var(--gi-color-action-secondary-text);
  --bs-btn-hover-bg: var(--gi-color-action-secondary-bg-hover);
  --bs-btn-hover-border-color: var(--gi-color-border-strong);
  --bs-btn-active-color: var(--gi-color-action-secondary-text);
  --bs-btn-active-bg: var(--gi-color-action-secondary-bg-hover);
  --bs-btn-active-border-color: var(--gi-color-border-strong);
  --bs-btn-disabled-color: var(--gi-color-text-disabled);
  --bs-btn-disabled-bg: var(--gi-color-action-secondary-bg);
  --bs-btn-disabled-border-color: var(--gi-color-border-subtle);
}

.btn-danger {
  --bs-btn-color: var(--gi-color-action-destructive-text);
  --bs-btn-bg: var(--gi-color-action-destructive-bg);
  --bs-btn-border-color: var(--gi-color-action-destructive-bg);
  --bs-btn-hover-color: var(--gi-color-action-destructive-text);
  --bs-btn-hover-bg: var(--gi-color-action-destructive-bg-hover);
  --bs-btn-hover-border-color: var(--gi-color-action-destructive-bg-hover);
  --bs-btn-active-color: var(--gi-color-action-destructive-text);
  --bs-btn-active-bg: var(--gi-color-action-destructive-bg-hover);
  --bs-btn-active-border-color: var(--gi-color-action-destructive-bg-hover);
}

/* ── 3 · Formularios y foco ─────────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--gi-color-border-focus);
  box-shadow: var(--gi-ui-shadow-focus);
}

.form-check-input:checked {
  background-color: var(--gi-color-action-primary-bg);
  border-color: var(--gi-color-action-primary-bg);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--gi-color-action-primary-bg);
}

.form-range::-moz-range-thumb {
  background-color: var(--gi-color-action-primary-bg);
}

.nav-link:focus-visible {
  box-shadow: var(--gi-ui-shadow-focus);
}

/* ── 4 · Componentes con el primario fijo en Bootstrap ──────────────────────────────────────── */
.dropdown-menu {
  --bs-dropdown-link-active-color: var(--gi-color-action-primary-text);
  --bs-dropdown-link-active-bg: var(--gi-color-action-primary-bg);
}

.pagination {
  --bs-pagination-active-color: var(--gi-color-action-primary-text);
  --bs-pagination-active-bg: var(--gi-color-action-primary-bg);
  --bs-pagination-active-border-color: var(--gi-color-action-primary-bg);
  --bs-pagination-focus-box-shadow: var(--gi-ui-shadow-focus);
}

.progress {
  --bs-progress-bar-bg: var(--gi-color-action-primary-bg);
}

.list-group {
  --bs-list-group-active-color: var(--gi-color-action-primary-text);
  --bs-list-group-active-bg: var(--gi-color-action-primary-bg);
  --bs-list-group-active-border-color: var(--gi-color-action-primary-bg);
}

/* ── 5 · Barras ─────────────────────────────────────────────────────────────────────────────── */
/* Barra principal: el logo positivo va sobre bg-surface (reglas/logos-y-favicons.md). */
.navbar.bg-body-tertiary {
  background-color: var(--gi-color-bg-surface) !important;
  border-bottom: 1px solid var(--gi-color-border-subtle);
  --bs-navbar-color: var(--gi-color-text-secondary);
  --bs-navbar-hover-color: var(--gi-color-text-primary);
  --bs-navbar-active-color: var(--gi-color-text-brand);
  --bs-navbar-brand-color: var(--gi-color-text-primary);
  --bs-navbar-brand-hover-color: var(--gi-color-text-primary);
}

/* Barra del admin: los logos blancos solo van sobre bg-brand o bg-brand-alt. */
.admin-navbar.bg-dark {
  background-color: var(--gi-color-bg-brand) !important;
}

.admin-navbar.navbar-dark {
  --bs-navbar-color: var(--gi-color-sidebar-item);
  --bs-navbar-hover-color: var(--gi-color-text-inverse);
  --bs-navbar-active-color: var(--gi-color-text-inverse);
  --bs-navbar-brand-color: var(--gi-color-text-inverse);
  --bs-navbar-brand-hover-color: var(--gi-color-text-inverse);
}

/* Menú lateral del admin. */
.sidebar .nav-link {
  color: var(--gi-color-text-body);
}

.sidebar .nav-link .feather {
  color: var(--gi-color-text-muted);
}

/* ── 6 · Pantalla de carga ──────────────────────────────────────────────────────────────────── */
.loading-overlay .loader {
  color: var(--gi-color-text-brand);
}

/* ── 7 · Lo que se oculta ───────────────────────────────────────────────────────────────────── */
/* Los selectores de tema: el kit solo tiene tema claro y el script ya lo fija (superficie 7).
 * El del pie tiene clase propia; el de la barra principal no, y es el desplegable de la derecha
 * que no es el de idioma. */
.theme-selector,
.navbar-nav.ms-auto > .dropdown:not(:has(.iconLanguage_nlXk)) {
  display: none !important;
}

/* El aviso de origen del pie del inicio de sesión y de la reserva pública (hueco 5, decisión de
 * Hugo). Se oculta solo el texto y su enlace: el selector de idioma sigue visible. */
.copyright-footer {
  visibility: hidden;
}

.copyright-footer .footer-selectors {
  visibility: visible;
}

/* ── 8 · Pantallas de acceso: el panel de marca ────────────────────────────────────────────── */
/* El include pone el panel justo después de <body>, fuera de la app, en todas las páginas; aquí se
 * muestra solo en las pantallas de acceso (decisión de Hugo, 08-oct):
 *   - el inicio de sesión: el contenedor que lleva el pie con los selectores (Mis reservas, Búsqueda
 *     y Compañeros usan el mismo contenedor, pero sin ese pie);
 *   - restablecer y crear la contraseña, la reserva pública (confirmar y detalle) y la 404: el
 *     contenedor centrado cuyo primer elemento es el logo (la reserva pública grande y Preferencias
 *     usan otros contenedores).
 * Degradado profundo con el halo encima (excepción a reglas/degradados.md, con su razón en la receta)
 * y las curvas del pathline, que se dibujan solas (con reducir
 * movimiento se ven ya dibujadas: lo resuelve holding.css). El logo nunca va sobre el degradado:
 * queda en la tarjeta blanca. */
.marca-acceso {
  display: none;
}

body:has(.container-signin > .copyright-footer) .marca-acceso,
body:has(.container-center > .container-center-inner > img:first-child) .marca-acceso {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--gi-gradient-brand-halo), var(--gi-gradient-brand-deep);
}

.marca-acceso .gi-pathline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.container-signin:has(> .copyright-footer),
.container-center:has(> .container-center-inner > img:first-child) {
  z-index: 1;
  justify-content: center;
  background: transparent;
}

/* La tarjeta: el formulario y el logo positivo sobre bg-surface. */
.container-signin:has(> .copyright-footer) .form-signin,
.container-center:has(> .container-center-inner > img:first-child) > .container-center-inner {
  max-width: 380px;
  padding: 32px;
  background: var(--gi-color-bg-surface);
  border-radius: var(--gi-ui-radius-xl);
  box-shadow: var(--gi-ui-shadow-xl);
}

/* El logo de la tarjeta, más chico que los 330 px de upstream (el único <img> directo del formulario,
 * o el primer elemento del contenedor centrado). */
.container-signin:has(> .copyright-footer) .form-signin > img,
.container-center > .container-center-inner > img:first-child {
  max-width: 240px;
  margin-bottom: 32px;
}

/* El selector de idioma queda sobre el degradado: texto blanco (text-inverse sobre brand-deep es un
 * par declarado en el kit). */
.container-signin:has(> .copyright-footer) .lng-selector > .btn {
  --bs-btn-color: var(--gi-color-text-inverse);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--gi-color-text-inverse);
  --bs-btn-hover-color: var(--gi-color-text-inverse);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--gi-color-text-inverse);
  --bs-btn-active-color: var(--gi-color-text-inverse);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--gi-color-text-inverse);
  --bs-btn-disabled-bg: transparent;
}