/* Aspecto de la aplicación (panel, reportes, administración y examen).
 *
 * Comparte la paleta con la portada pública (tokens.css) para que el producto se
 * vea como uno solo. En vez de reescribir cada pantalla, se redefinen las
 * variables de Bootstrap 5.3: así las clases que ya usan las páginas —card,
 * table, badge, form-control— quedan alineadas sin tocarlas una por una.
 */

/* ---------- Bootstrap sobre la paleta propia ---------- */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--fondo);
  --bs-body-color: var(--texto);
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--texto-2);
  --bs-tertiary-color: var(--texto-3);

  --bs-body-bg-rgb: 8, 11, 18;
  --bs-secondary-bg: var(--superficie);
  --bs-tertiary-bg: var(--fondo-2);

  --bs-border-color: var(--borde);
  --bs-border-color-translucent: var(--borde);
  --bs-border-radius: var(--radio);

  --bs-primary: var(--acento);
  --bs-primary-rgb: 77, 141, 255;
  --bs-link-color: var(--acento);
  --bs-link-color-rgb: 77, 141, 255;
  --bs-link-hover-color: var(--acento-fuerte);

  --bs-success: var(--limpio);
  --bs-warning: var(--dudoso);
  --bs-danger: var(--sospechoso);

  --bs-font-sans-serif: var(--sans);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
}

html { position: relative; min-height: 100%; font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  margin-bottom: 60px;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

/* Titulares en serif, igual que la portada: es lo que le da peso institucional
   a las pantallas del docente sin recargarlas. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.015em;
}
h1, .h1 { font-size: clamp(1.7rem, 3vw, 2.1rem); }
h3, .h3 { font-size: 1.5rem; }
h5, .h5 { font-weight: 650; letter-spacing: -.005em; }

/* ---------- barra superior ---------- */
.navbar-py {
  background-color: var(--fondo-2) !important;
  border-bottom: 1px solid var(--borde);
}
.navbar-py .navbar-brand { font-family: var(--serif); letter-spacing: -.02em; }
.marca-py { color: var(--acento); }
.navbar-py .nav-link { color: var(--texto-2) !important; font-size: .95rem; }
.navbar-py .nav-link:hover, .navbar-py .nav-link:focus { color: var(--texto) !important; }
.box-shadow { box-shadow: none; }

/* ---------- botones ---------- */
.btn { font-weight: 600; }
.btn-py {
  background-color: var(--acento);
  border-color: var(--acento);
  color: #04070d;
}
.btn-py:hover, .btn-py:focus {
  background-color: var(--acento-fuerte);
  border-color: var(--acento-fuerte);
  color: #04070d;
}
.btn-outline-primary { color: var(--acento); border-color: var(--borde-fuerte); }
.btn-outline-primary:hover { background-color: var(--acento); border-color: var(--acento); color: #04070d; }
.btn-outline-secondary { color: var(--texto-2); border-color: var(--borde-fuerte); }
.btn-outline-secondary:hover { background-color: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--texto); }

/* El foco visible no es decorativo: es cómo se navega la aplicación con teclado. */
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus,
a:focus-visible, summary:focus-visible {
  box-shadow: 0 0 0 .2rem var(--acento-suave);
  border-color: var(--acento);
  outline: none;
}

/* ---------- superficies ---------- */
.card, .list-group-item, .accordion-item {
  background-color: var(--fondo-2);
  border-color: var(--borde);
}
.card-header { background-color: var(--superficie); border-bottom-color: var(--borde); }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--borde) !important; }
.bg-light { background-color: var(--superficie) !important; color: var(--texto); }
.bg-white { background-color: var(--fondo-2) !important; }
.text-muted { color: var(--texto-2) !important; }

/* ---------- tablas ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--texto);
  --bs-table-border-color: var(--borde);
  --bs-table-hover-bg: var(--superficie);
  --bs-table-hover-color: var(--texto);
}
.table > thead th {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 700;
  border-bottom-color: var(--borde);
}
/* Los números en columna se leen mal si cada dígito tiene un ancho distinto. */
.table td { font-variant-numeric: tabular-nums; }

/* ---------- formularios ---------- */
.form-control, .form-select {
  background-color: var(--fondo);
  border-color: var(--borde-fuerte);
  color: var(--texto);
}
.form-control:focus, .form-select:focus { background-color: var(--fondo); color: var(--texto); }
.form-control::placeholder { color: var(--texto-3); }
.form-label { font-size: .9rem; font-weight: 600; }
.form-text { color: var(--texto-3) !important; }
.form-control[readonly] { background-color: var(--superficie); color: var(--texto-2); }

/* ---------- estados de una sesión ---------- */
.badge { font-family: var(--mono); font-weight: 700; letter-spacing: .04em; }
.badge.bg-success { background-color: var(--limpio-suave) !important; color: var(--limpio); }
.badge.bg-warning { background-color: var(--dudoso-suave) !important; color: var(--dudoso); }
.badge.bg-danger  { background-color: var(--sospechoso-suave) !important; color: var(--sospechoso); }
.badge.bg-secondary { background-color: var(--superficie-2) !important; color: var(--texto-2); }
.badge.bg-info { background-color: var(--acento-suave) !important; color: var(--acento); }
.text-success { color: var(--limpio) !important; }
.text-warning { color: var(--dudoso) !important; }
.text-danger  { color: var(--sospechoso) !important; }

/* ---------- avisos ---------- */
.alert { border-radius: var(--radio); border-width: 1px; border-left-width: 3px; }
.alert-success { background-color: var(--limpio-suave); border-color: var(--limpio); color: var(--texto); }
.alert-warning { background-color: var(--dudoso-suave); border-color: var(--dudoso); color: var(--texto); }
.alert-danger  { background-color: var(--sospechoso-suave); border-color: var(--sospechoso); color: var(--texto); }
.alert-info, .alert-secondary { background-color: var(--superficie); border-color: var(--acento-borde); color: var(--texto); }

/* ---------- tablero del negocio ---------- */
.tablero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin: 1.5rem 0 .8rem;
}
.tablero .dato { background: var(--fondo-2); padding: 1.1rem 1.2rem; }
.tablero .rotulo {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: .45rem;
}
.tablero .cifra {
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* El primer dato es el que se busca al abrir la pantalla. */
.tablero .dato:first-child .cifra { color: var(--limpio); }

/* ---------- soporte dentro de una institución ---------- */
/* Ámbar y no el acento: tiene que leerse como "atención, no estás en tu vista",
   no como un elemento más de la interfaz. */
.barra-soporte {
  background: var(--dudoso-suave);
  border-bottom: 1px solid var(--dudoso);
  color: var(--texto);
  padding: .6rem 0;
  font-size: .9rem;
  margin-bottom: 1rem;
}
.barra-soporte strong { color: var(--dudoso); }

/* ---------- pie ---------- */
.footer {
  background-color: var(--fondo-2);
  border-top: 1px solid var(--borde) !important;
  color: var(--texto-3) !important;
  padding: 1.1rem 0;
}
.footer a { color: var(--texto-2); }

/* ---------- detalles heredados de la plantilla ---------- */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: var(--texto-3); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }