/** 
 * @file cabeceraInicio.css
 * @brief Cabecera pública (inicio) + ajustes de fondo y modo oscuro.
 */

/* =========================================================
   Variables y altura de navbar
   ========================================================= */
:root {
  --navbar-height: 56px;
  --blue: #00BDFF;

  /* Paleta modo oscuro (solo colores) */
  --dark-bg: #0f1b2d;   /* fondo global modo oscuro */
  --card-bg: #121a2b;   /* tarjetas en oscuro */
  --card-brd:#2b3d57;
  --input-bg:#121a2b;
  --input-brd:#2b3d57;
  --text-light:#e6edf7;
}

/* =========================================================
   Fondo de la página (inicio)
   ========================================================= */
html, body { min-height: 100%; }
body {
  /* degradado suave tipo “papel” para la portada */
  background: radial-gradient(1200px 600px at 50% -10%, #e8f9ff 0%, #d3efff 35%, #c9e8ff 60%, #c3e3ff 100%) fixed;
}

/* Modo oscuro: mismo tono que el dashboard */
body.modo-oscuro {
  background: var(--dark-bg) !important;
  color: var(--text-light);
}

/* ===========================
   MODO DALTONISMO (BEIGE)
   =========================== */
body.daltonismo{
  /* Beige suave, alto confort visual */
  background: linear-gradient(180deg, #fffaf0 0%, #fff1cc 100%) fixed !important;
  color:#222; /* texto oscuro para buen contraste */
}

/* =========================================================
   NAVBAR (pública)
   ========================================================= */
.navbar-login{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  background: var(--blue);
  color:#fff;
  display:flex; justify-content:space-between; align-items:center;
  min-height:var(--navbar-height);
  padding:0 2rem;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.navbar-login-left{ font-weight:700; }
.navbar-login-left .brand,
.navbar-login-left .brand .logo-text{
  font-size:1.25rem; line-height:1; letter-spacing:.2px;
  color:inherit; text-decoration:none;
}

/* Menú derecho */
.navbar-login-right{ display:block; }
.navbar-login-right > a,
.navbar-login-right > .dropdown-login{
  position:relative; display:inline-block;
  margin-left:24px; cursor:pointer;
  font-size:1rem; color:inherit; text-decoration:none; vertical-align:middle;
}
.navbar-login-right i{ margin-right:6px; }

/* Botón del dropdown */
.dropbtn-login{
  background:transparent; border:0; color:inherit; font:inherit;
  padding:0; margin:0; cursor:pointer;
}

/* Panel del dropdown */
.dropdown-content-login{
  display:none; position:absolute; top:100%; right:0; left:auto;
  min-width:240px; background:#fff; color:#000;
  border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.18);
  padding:6px 0; z-index:1000; overflow:hidden;
}
.dropdown-login:hover .dropdown-content-login{
  display:flex; flex-direction:column;
}
.dropdown-content-login a,
.dropdown-content-login button,
.dropdown-content-login .submenu-row{
  display:flex; align-items:center; gap:10px;
  padding:.6rem 1rem; white-space:nowrap; cursor:pointer;
  transition:background-color .2s ease;
  justify-content:flex-start; text-align:left;
  background:transparent; border:0; color:inherit; font:inherit; text-decoration:none;
}
.dropdown-content-login a:hover,
.dropdown-content-login button:hover,
.dropdown-content-login .submenu-row:hover{ background:#f5f7fb; }

/* Filas con controles a la derecha (Preferencias) */
.dropdown-content-login .submenu-row.pref-row{ justify-content:space-between; }

/* Interruptor */
.switch{ position:relative; display:inline-block; width:48px; height:24px; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.slider{ position:absolute; inset:0; cursor:pointer; background:#ccc; border-radius:24px; transition:.25s; }
.slider:before{ content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.25s; }
.switch input:checked + .slider{ background:var(--blue); }
.switch input:checked + .slider:before{ transform:translateX(24px); }

/* Tamaño de letra */
.ajuste-letra{ user-select:none; }
.ajuste-letra .letra-controls{ display:inline-flex; align-items:center; gap:10px; }
.btn-letra-circular{
  background:var(--blue); color:#fff; border:none; width:28px; height:28px; border-radius:50%;
  font:700 18px/28px inherit; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s;
}
.btn-letra-circular:hover{ background:#009fcc; }
.letra-visor{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 6px; border-radius:999px;
  background:var(--blue); color:#fff; font-weight:700; font-size:14px;
}

/* =========================================================
   Modo oscuro / daltonismo (solo colores)
   ========================================================= */
/* Cabecera: mismo tono que footer para separarla del fondo */
body.modo-oscuro .navbar-login{
  background: rgba(255,255,255,.06);
  color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}
body.modo-oscuro .dropdown-content-login{ background:#122236; color:var(--text-light); }
body.modo-oscuro .dropdown-content-login a:hover,
body.modo-oscuro .dropdown-content-login button:hover,
body.modo-oscuro .dropdown-content-login .submenu-row:hover{ background:#1a2a46; }
body.modo-oscuro .btn-letra-circular,
body.modo-oscuro .letra-visor{ background:var(--blue); color:#fff; }

body.daltonismo .navbar-login{ background:#0000FF; } 
body.daltonismo .dropdown-content-login{
  background:#fff6dc;  
  color:#222;          
}
body.daltonismo .dropdown-content-login a,
body.daltonismo .dropdown-content-login button,
body.daltonismo .dropdown-content-login .submenu-row{
  color:#222 !important;      
  font-weight:600;           
}
body.daltonismo .dropdown-content-login a:hover,
body.daltonismo .dropdown-content-login button:hover,
body.daltonismo .dropdown-content-login .submenu-row:hover{
  background:#f3e7c2;         
}

/* Accesibilidad: foco */
.navbar-login-right > a:focus,
.dropbtn-login:focus,
.dropdown-content-login a:focus,
.dropdown-content-login button:focus{
  outline:2px solid rgba(255,255,255,.7);
  outline-offset:2px; border-radius:6px;
}


/* Tarjeta/box del formulario (solo colores) */
body.modo-oscuro .login-card,
body.modo-oscuro .auth-card,
body.modo-oscuro .card,
body.modo-oscuro .panel{
  background:var(--card-bg) !important;
  color:var(--text-light) !important;
  border:1px solid var(--card-brd) !important;
  box-shadow:none !important;
}

/* Inputs y selects dentro de la tarjeta (solo colores) */
body.modo-oscuro input[type="text"],
body.modo-oscuro input[type="email"],
body.modo-oscuro input[type="password"],
body.modo-oscuro select,
body.modo-oscuro textarea{
  background:var(--input-bg) !important;
  color:var(--text-light) !important;
  border:1px solid var(--input-brd) !important;
}
body.modo-oscuro input::placeholder,
body.modo-oscuro textarea::placeholder{ color:#b8c4d6 !important; }
body.modo-oscuro input:focus,
body.modo-oscuro select:focus,
body.modo-oscuro textarea:focus{
  outline:none !important; border:2px solid var(--blue) !important;
}

/* Botones principales en oscuro */
body.modo-oscuro .btn-primary,
body.modo-oscuro .btn,
body.modo-oscuro button[type="submit"]{
  background:var(--blue) !important; color:#fff !important; border:0 !important;
}

/* Enlaces auxiliares bajo el formulario */
body .auth-links a{ color:#0b63ce; text-decoration:none; }
body .auth-links a:hover{ text-decoration:underline; }
body.modo-oscuro .auth-links a{ color:#a8d3ff; }

footer a, .footer a, .legal a, a.legal-link{
  color:#0b63ce; text-decoration:none;
}
footer a:hover, .footer a:hover, .legal a:hover, a.legal-link:hover{
  text-decoration:underline;
}
body.modo-oscuro footer, body.modo-oscuro .footer{
  background:rgba(255,255,255,.06);
}
body.modo-oscuro footer a,
body.modo-oscuro .footer a,
body.modo-oscuro .legal a,
body.modo-oscuro a.legal-link{
  color:#a8d3ff;
}


body.modo-oscuro .info,
body.modo-oscuro .informacion,
body.modo-oscuro .informacion-web,
body.modo-oscuro .info-card,
body.modo-oscuro .info-panel,
body.modo-oscuro .public-card,
body.modo-oscuro .public-panel,
body.modo-oscuro .content,
body.modo-oscuro .container,
body.modo-oscuro .contenido {
  background: var(--card-bg) !important;
  color: var(--text-light) !important;
  border-color: var(--card-brd) !important;
}

/* Títulos y textos dentro de esas cajas (solo color) */
body.modo-oscuro .info h1,
body.modo-oscuro .info h2,
body.modo-oscuro .info h3,
body.modo-oscuro .informacion h1,
body.modo-oscuro .informacion h2,
body.modo-oscuro .informacion h3{ color:#ffffff !important; }

body.modo-oscuro .info p,
body.modo-oscuro .info li,
body.modo-oscuro .informacion p,
body.modo-oscuro .informacion li{ color:#dce6f5 !important; }

body.modo-oscuro .info a,
body.modo-oscuro .informacion a{ color:#a8d3ff !important; }
body.modo-oscuro .info a:hover,
body.modo-oscuro .informacion a:hover{ text-decoration:underline; }

body.modo-oscuro .info small,
body.modo-oscuro .informacion small,
body.modo-oscuro .informacion-web small,
body.modo-oscuro .info .form-text,
body.modo-oscuro .informacion .form-text{
  color:#ffffff !important;
  opacity:1 !important;
}