:root {
  /* Tipografía */
  --font-family-base: 'Open Sans', sans-serif;

  /* Layout */
  --login-max-width: 420px;

  /* FAB */
  --fab-size: 56px;
  --fab-offset: 1.5rem;

  /* ====== Tema claro (default) ======
     Patrón:
     - Fondo principal: claro (casi blanco)
     - Card: blanco puro o casi
     - Footer: claro distinto (ligeramente más gris) */
  --bg-main: #f5f7fb;
  --bg-card: #ffffff;
  --bg-footer: #eef2f7;

  --shadow-card: 0 18px 45px rgba(16, 24, 40, 0.18);
  --shadow-fab: 0 10px 25px rgba(16, 24, 40, 0.18);

  --text-hero: #0f172a;        /* casi negro */
  --text-hero-muted: #475569;  /* gris azulado */

  --footer-border: rgba(15, 23, 42, 0.08);

  --fab-bg: rgba(255, 255, 255, 0.9);
  --fab-border: rgba(15, 23, 42, 0.12);
}

html[data-bs-theme="dark"] {
  /* ====== Tema oscuro ======
     Patrón:
     - Fondo principal: oscuro
     - Card: oscuro distinto al principal
     - Footer: oscuro distinto a ambos */
  --bg-main: #0b1220;   /* oscuro principal */
  --bg-card: #111b2e;   /* oscuro secundario (formulario) */
  --bg-footer: #0e1728; /* footer oscuro diferenciado */

  --shadow-card: 0 18px 55px rgba(0, 0, 0, 0.45);
  --shadow-fab: 0 12px 30px rgba(0, 0, 0, 0.45);

  --text-hero: #e5e7eb;        /* gris muy claro */
  --text-hero-muted: #aab4c2;  /* gris claro */

  --footer-border: rgba(255, 255, 255, 0.08);

  --fab-bg: rgba(17, 27, 46, 0.9);
  --fab-border: rgba(255, 255, 255, 0.14);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  background: var(--bg-main);
}

/* =========================
   Login
   ========================= */

.login-hero {
  padding-top: 3.5rem !important;
  padding-bottom: 2rem !important;
}

.login-hero h1 {
  color: var(--text-hero) !important;
}

.login-hero p {
  color: var(--text-hero-muted) !important;
}

.login-shell {
  width: 100%;
  max-width: var(--login-max-width);
}

/* =========================
   Theme FAB
   ========================= */

.theme-fab {
  position: fixed;
  left: var(--fab-offset);
  top: var(--fab-offset);
  z-index: 1080;
}

.theme-fab-btn {
  width: var(--fab-size);
  height: var(--fab-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1.25rem;
  background: var(--fab-bg);
  border-color: var(--fab-border);
  box-shadow: var(--shadow-fab);
}

/* =========================
   Card (formulario)
   ========================= */

.login-card {
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  border-radius: 0.6rem;
}

/* En oscuro, ajusta sutilmente inputs para que se integren con el card oscuro */
html[data-bs-theme="dark"] .login-card .form-control {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
}

html[data-bs-theme="dark"] .login-card .form-floating > label {
  color: rgba(229, 231, 235, 0.75);
}

html[data-bs-theme="dark"] .login-card .form-control:focus {
  border-color: rgba(59, 130, 246, 0.55); /* azul Bootstrap */
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.18);
}

/* =========================
   Footer bar
   ========================= */

.page-footer {
  width: 100%;
  padding: 0.85rem 0;
  background: var(--bg-footer);
  border-top: 1px solid var(--footer-border);
}

.page-footer .logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

/* Tamaño base (fallback) */
.page-footer .logo-footer {
  width: auto;
  object-fit: contain;
  display: block;
  opacity: 0.95;
}

/* Ingartek → 200% */
.page-footer img[alt*="Ingartek"] {
  height: 80px;        /* 40px × 2 */
  max-width: 420px;
}

/* Gobierno Vasco → 300% */
.page-footer img[alt*="Gobierno Vasco"] {
  height: 120px;       /* 40px × 3 */
  max-width: 520px;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 576px) {
  :root {
    --fab-offset: 1rem;
    --fab-size: 52px;
  }

  .page-footer .logo-container {
    gap: 1.5rem;
  }

  .page-footer img[alt*="Ingartek"] {
    height: 60px;      /* reducción proporcional */
    max-width: 320px;
  }

  .page-footer img[alt*="Gobierno Vasco"] {
    height: 90px;
    max-width: 380px;
  }
}

/* =========================
   Informe (iframe full + navbar)
   ========================= */

.report-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-family-base, 'Open Sans', sans-serif);
  background: var(--bg-main);
}

/* Navbar coherente con paleta por tema */
.report-navbar {
  flex: 0 0 auto;
  background: var(--bg-footer); /* mismo “panel” que el footer del login */
  border-bottom: 1px solid var(--footer-border);
}

.report-title {
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--text-hero);
}

/* Botón redondo de tema dentro de la navbar */
.report-theme-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: var(--fab-bg);
  border-color: var(--fab-border);
}

/* Área principal que ocupa todo el resto */
.report-main {
  flex: 1 1 auto;
  min-height: 0; /* clave para que el iframe pueda crecer dentro de flex */
}

/* Iframe a pantalla completa (resto del viewport) */
.report-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}