html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(255,107,0,0.25);
}

html {
  position: relative;
  min-height: 100%;
}

:root {
  --site-footer-bg: #ffffff;

  /* Brand palette (provided) */
  --brand-blue:   #02023F; /* AZUL OSCURO */
  --brand-orange: #F65A15; /* NARANJA */
  --brand-gray:   #D9DFDF; /* GRIS (texto base) */
  --brand-white:  #FFFFFF;
  --text-dark:    #2b2b2b; /* darker text for readability */
}

/* Base typography and colors */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f8f9fa;
  color: var(--brand-gray); /* texto base en tono gris según petición */
}

/* Headings use Poppins Bold */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  color: var(--brand-blue);
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
  background: var(--site-footer-bg);
}

/* Custom styles */
.card {
  border: none;
  border-radius: 10px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.navbar-brand {
  font-weight: 600;
}

/* Improve contrast of the brand logo/text on the colored navbar */
.navbar-brand img {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
/* .navbar-brand {
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
} */

/* Brand-specific components */
/* Headers for cards and modals should use brand blue */
.brand-header,
.modal-header,
.card-header {
  background-color: var(--brand-blue) !important;
  color: var(--brand-white) !important;
}

/* Ensure headings and modal titles inside brand headers stay white (override global h1..h6 color) */
.brand-header h1, .brand-header h2, .brand-header h3, .brand-header h4, .brand-header h5, .brand-header h6,
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6,
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
.brand-header .modal-title, .modal-header .modal-title, .card-header .modal-title {
  color: var(--brand-white) !important;
}

/* Primary buttons use the brand orange */
.btn-primary {
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(0.95);
}

/* Outline primary buttons use brand orange (for icons like pencils and admin panel CTA) */
.btn-outline-primary {
  color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-orange) !important;
  color: #fff !important;
  border-color: var(--brand-orange) !important;
}

/* Navbar: white background and dark-blue links/title */
.navbar {
  background-color: var(--brand-white) !important;
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--brand-blue) !important;
  font-weight: 600;
}
.navbar .nav-link:hover {
  color: var(--brand-orange) !important;
}

/* Links default accent */
a { color: var(--brand-blue); }
a:hover { color: var(--brand-orange); }

/* Footer color */
.footer {
  background: var(--brand-white);
  color: var(--brand-blue);
}

/* List-group selected / hover styles: use brand blue for selection and ensure contrast */
.list-group-item {
  /* Default list items should be darker for better contrast against white */
  color: var(--text-dark);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(2,2,63,0.04); /* subtle blue tint on hover */
  color: var(--brand-blue);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: var(--brand-white) !important;
}
/* If badges are inside active list items, keep them readable (use orange accent) */
.list-group-item.active .badge {
  background-color: var(--brand-orange) !important;
  color: #fff !important;
}

/* Profile-specific styles */
.brand-avatar {
  background: linear-gradient(180deg, rgba(2,2,63,0.95), rgba(2,2,63,0.85));
  color: var(--brand-white);
}

/* Badge to show created tests in profile (distinct from generic .bg-primary) */
.badge-created-tests,
.badge.bg-brand-orange {
  background-color: var(--brand-orange) !important;
  color: #fff !important;
}

/* Ensure profile card titles use correct contrast */
.card .card-body h3,
.card .card-header h5 {
  color: var(--brand-blue);
}

.btn {
  border-radius: 6px;
  font-weight: 500;
}

.form-control {
  border-radius: 6px;
}

.alert {
  border-radius: 8px;
}

/* Dashboard cards */
.dashboard-card {
  background: linear-gradient(135deg, var(--brand-orange) 0%, #D14A10 100%);
  color: white;
  border-radius: 15px;
}

/* Buttons */
.btn-primary {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

/* Links */
a {
  color: var(--brand-primary);
}
a:hover {
  color: var(--brand-dark);
}

/* Footer styling */
.footer {
  background: var(--brand-muted);
  color: #fff;
}

/* Login form */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Landing page helpers */
.landing-hero { min-height: 80vh; }

/* Ensure landing fills full width: remove container padding inside landing */
.container:has(.landing-hero) {
  padding-left: 0;
  padding-right: 0;
}
.container-fluid:has(.landing-hero) {
  padding-left: 0;
  padding-right: 0;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .card-body {
    padding: 1rem;
  }
}

/* When footer is positioned absolute we need bottom spacing so content isn't
   hidden behind it. Apply this class to pages that require extra room. */
.with-footer-space {
  padding-bottom: 90px; /* default space for footer */
}
@media (max-width: 576px) {
  .with-footer-space {
    padding-bottom: 140px; /* more space on small screens where footer may overlap more */
  }
}

/* Privacy page specific styles */
.privacy-content {
  max-width: 980px;
  margin: 1.5rem auto;
  padding: 2rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  color: var(--text-dark);
  line-height: 1.7;
}
.privacy-content h2 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--brand-blue);
}
.privacy-content h3 {
  font-size: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--brand-blue);
}
.privacy-content p {
  margin: 0.6rem 0;
  color: var(--text-dark);
}
.privacy-content ul {
  margin: 0.6rem 0 0.6rem 1.2rem;
}
.privacy-content li {
  margin-bottom: 0.45rem;
}

/* Ensure footer has comfortable spacing and visual separation */
.footer {
  padding: 18px 0;
}

/* Dropdown and pagination active states: use brand orange to match primary button hover */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--brand-orange) !important;
  color: var(--brand-white) !important;
}

/* Pagination: active page should use brand orange */
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover {
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: var(--brand-white) !important;
}

/* Ensure pagination links by default use brand blue as accent, hover to orange */
.page-link { color: var(--brand-blue); }
.page-link:hover { color: var(--brand-orange); }