/* Estilos compartidos tomados de page1.html */
:root {
  --principal: #003366;
  --secundario: #00aaff;
  --fondo-claro: #f5f8fc;
}

.navbar {
  background-color: var(--principal);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.navbar-brand img {
  width: 70px;
  height: 70px;
}

.logo-text {
  font-size: 1.6rem;
  font-weight: bold;
  color: white;
  margin-left: 10px;
}

/* Two variants: full name (desktop) and short name (mobile) */
.logo-text--full { display: inline; }
.logo-text--short { display: none; }
.logo-text, .logo-text--full, .logo-text--short { background: transparent; }

/* Mejorar layout del navbar para admins */
.navbar-nav {
  gap: 0.5rem;
}

.navbar-nav .nav-item {
  flex: 0 0 auto;
}

/* En pantallas grandes, distribuir los items en dos filas si es necesario */
@media (min-width: 992px) {
  .navbar-nav {
    flex-wrap: wrap;
  }
}

/* En pantallas pequeñas, los items se apilan normalmente */
@media (max-width: 991px) {
  .navbar-nav {
    flex-wrap: nowrap;
  }
}

.hero-section {
  background: linear-gradient(rgba(0, 51, 102, 0.8), rgba(0, 51, 102, 0.8)), 
  url('https://images.unsplash.com/photo-1581091012184-7e0cdfbb6795?auto=format&fit=crop&w=1350&q=80');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 0;
}

.feature-section {
  background-color: var(--fondo-claro);
  padding: 60px 0;
}

.feature-card {
  transition: transform 0.3s;
  margin-bottom: 20px;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.cta-section {
  background-color: white;
  padding: 60px 0;
}

.btn-primary {
  background-color: var(--secundario);
  border: none;
}

.btn-outline-light:hover {
  background-color: white;
  color: var(--principal);
}

/* Mantener tweaks móviles del base.html */
@media (max-width: 576px) {
  table.table th, table.table td {
    white-space: normal !important;
    font-size: 0.95rem;
  }
  .d-flex > .btn, .d-flex .btn + .btn {
    display: block !important;
    width: 100% !important;
    margin-bottom: .5rem !important;
  }
  .container { padding-left: 0.5rem; padding-right: 0.5rem; }
  /* Mobile adjustments for the logo text to avoid awkward wrapping */
  .logo-text--full { display: none !important; }
  .logo-text--short { display: inline !important; font-size: 1.05rem; }
  .navbar-brand img { width: 48px; height: 48px; }
  .navbar { padding-top: .5rem; padding-bottom: .5rem; }
  /* Prevent half-white looking areas by avoiding wrapping in brand */
  .navbar-brand { white-space: nowrap; }
}

/* Grade badges: map grade values to colors (NR = No rindió) */
.grade-badge {
  display: inline-block;
  min-width: 40px;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  text-align: center;
  font-weight: 600;
}
.grade-NR { background-color: #ffd54f !important; color: #000 !important; border: 1px solid rgba(0,0,0,0.08); }
.grade-1  { background-color: #d32f2f !important; color: #fff !important; box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
.grade-2  { background-color: #fb8c00 !important; color: #fff !important; box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
.grade-3  { background-color: #ffb74d !important; color: #000 !important; border: 1px solid rgba(0,0,0,0.06); }
.grade-4  { background-color: #66bb6a !important; color: #fff !important; box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.grade-5  { background-color: #2e7d32 !important; color: #fff !important; box-shadow: 0 1px 0 rgba(0,0,0,0.08); }

/* Small variant for compact tables */
.grade-badge.sm { min-width: 36px; padding: 0.2rem 0.4rem; font-size: 0.95rem; }

/* Legend card to display mapping of colors -- not white background */
.grade-legend {
  background: var(--fondo-claro);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem; /* separate legend from footer */
}
.grade-legend .legend-item { display:flex; align-items:center; gap:0.4rem; color: #1f2d3d; }
.grade-legend .legend-item .text-muted { color: #334155; margin: 0; }
@media (max-width: 576px) {
  .grade-legend { padding: 0.5rem; gap: 0.4rem; }
  .grade-legend .legend-item { font-size: 0.95rem; }
}