/* SIGAEP — hoja de estilos
   Paleta tomada del entorno del politécnico: verde monte (vocación agropecuaria y técnica),
   papel claro para lectura prolongada y ámbar como único acento. */
:root {
  --monte: #17402f;
  --hoja: #2f6b4f;
  --hoja-oscura: #245740;
  --brote: #e6efe9;
  --papel: #f6f7f5;
  --tinta: #1c2420;
  --tenue: #5b6660;
  --linea: #d8ddd8;
  --ambar: #a86b12;
  --ambar-claro: #fbf1df;
  --peligro: #a3372b;

  --bs-body-font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--tinta);
  --bs-body-bg: var(--papel);
  --bs-border-color: var(--linea);
  --bs-link-color: var(--hoja);
  --bs-link-color-rgb: 47, 107, 79;
  --bs-link-hover-color: var(--monte);
  --bs-primary: var(--hoja);
  --bs-primary-rgb: 47, 107, 79;
  --sidebar-ancho: 15.5rem;
}

body { font-size: 0.95rem; line-height: 1.5; }

h1, .h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
h2, .h2 { font-size: 1.2rem; font-weight: 700; }
h3, .h3 { font-size: 1.02rem; font-weight: 700; }

:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

/* ---------- Botones ---------- */
.btn-primary {
  --bs-btn-bg: var(--hoja); --bs-btn-border-color: var(--hoja);
  --bs-btn-hover-bg: var(--hoja-oscura); --bs-btn-hover-border-color: var(--hoja-oscura);
  --bs-btn-active-bg: var(--monte); --bs-btn-active-border-color: var(--monte);
  --bs-btn-disabled-bg: var(--hoja); --bs-btn-disabled-border-color: var(--hoja);
}
.btn-outline-primary {
  --bs-btn-color: var(--hoja); --bs-btn-border-color: var(--hoja);
  --bs-btn-hover-bg: var(--hoja); --bs-btn-hover-border-color: var(--hoja);
  --bs-btn-active-bg: var(--monte); --bs-btn-active-border-color: var(--monte);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--hoja);
  box-shadow: 0 0 0 0.2rem rgba(47, 107, 79, 0.2);
}
.form-check-input:checked { background-color: var(--hoja); border-color: var(--hoja); }
.form-label { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.3rem; }

/* ---------- Estructura ---------- */
/* Bootstrap fuerza fondo transparente en .offcanvas-lg; el color va en el contenedor interior. */
.app-sidebar { --bs-offcanvas-width: 16rem; --bs-offcanvas-bg: var(--monte); }
.sidebar-interior { background: var(--monte); color: #dfe9e3; height: 100%; width: 100%; overflow-y: auto; }
@media (min-width: 992px) {
  .app-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-ancho);
  }
  .app-main { margin-left: var(--sidebar-ancho); }
}

.marca {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 1.25rem 1.25rem 1rem;
  color: #fff; text-decoration: none;
}
.marca-sello {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 2px solid var(--ambar); display: grid; place-items: center;
  font-weight: 700; font-size: 0.85rem; color: #fff; flex-shrink: 0;
}
.marca-texto { line-height: 1.15; }
.marca-texto strong { display: block; font-size: 1.05rem; letter-spacing: 0.02em; }
.marca-texto small { color: #a9c2b5; font-size: 0.74rem; }

.nav-grupo { padding: 0.9rem 1.25rem 0.3rem; font-size: 0.75rem; color: #8fb09f; font-weight: 600; }
.sidebar-interior .nav-link {
  color: #dfe9e3; padding: 0.45rem 1.25rem; border-left: 3px solid transparent;
  display: flex; align-items: center; gap: 0.6rem;
}
.sidebar-interior .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.sidebar-interior .nav-link.active { border-left-color: var(--ambar); background: rgba(255, 255, 255, 0.09); color: #fff; font-weight: 600; }
.sidebar-interior .nav-link i { opacity: 0.85; }

.barra-superior {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1.5rem; background: #fff; border-bottom: 1px solid var(--linea);
}
.barra-superior .usuario { font-size: 0.88rem; color: var(--tenue); }
.barra-superior .usuario strong { color: var(--tinta); }
.contenido { padding: 1.5rem; max-width: 82rem; }

/* ---------- Encabezado de página ---------- */
.encabezado {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 1.25rem;
}
.encabezado p { color: var(--tenue); margin: 0.2rem 0 0; }

/* ---------- Paneles y tablas ---------- */
.panel { background: #fff; border: 1px solid var(--linea); border-radius: 0.5rem; }
.panel-cuerpo { padding: 1.25rem; }
.panel > .table-responsive { border-radius: 0.5rem; }

.tabla { margin: 0; --bs-table-bg: transparent; }
.tabla thead th {
  background: var(--brote); color: var(--monte); font-weight: 600; font-size: 0.82rem;
  border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tabla td { vertical-align: middle; }
.tabla tbody tr:hover { background: #fafbfa; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.acciones { white-space: nowrap; text-align: right; }

.vacio { padding: 2.5rem 1rem; text-align: center; color: var(--tenue); }
.vacio i { font-size: 1.8rem; display: block; margin-bottom: 0.5rem; color: var(--hoja); }

.estado { font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 1rem; display: inline-block; }
.estado-ok { background: var(--brote); color: var(--monte); }
.estado-mal { background: #f7e3e0; color: var(--peligro); }
.estado-neutro { background: #eceeec; color: var(--tenue); }
.estado-aviso { background: var(--ambar-claro); color: var(--ambar); }

/* ---------- Inicio ---------- */
.periodo-actual { border-left: 4px solid var(--ambar); padding: 0.2rem 0 0.2rem 0.9rem; margin-bottom: 1.5rem; }
.periodo-actual span { color: var(--tenue); font-size: 0.85rem; }
.periodo-actual strong { display: block; font-size: 1.35rem; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 0.5rem; overflow: hidden; }
.cifra { background: #fff; padding: 1rem 1.2rem; text-decoration: none; color: var(--tinta); }
.cifra:hover { background: #fafbfa; color: var(--tinta); }
.cifra b { display: block; font-size: 1.9rem; font-weight: 700; color: var(--monte); font-variant-numeric: tabular-nums; }
.cifra span { color: var(--tenue); font-size: 0.86rem; }
.atajos a { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--tinta); }
.atajos a:last-child { border-bottom: 0; }
.atajos a:hover { background: var(--brote); }
.atajos i { color: var(--hoja); font-size: 1.15rem; }

/* ---------- Planilla de calificaciones ---------- */
.planilla input[type=number] { width: 5rem; text-align: right; margin-left: auto; font-variant-numeric: tabular-nums; }
.planilla .final { font-weight: 700; }
.planilla .reprobada { color: var(--peligro); }
.planilla input.is-invalid { background-image: none; padding-right: 0.5rem; }

/* ---------- Acceso ---------- */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .acceso { grid-template-columns: 1.1fr 1fr; } }
.acceso-identidad {
  background: var(--monte); color: #e3ece7; padding: 3rem 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
.acceso-identidad h1 { color: #fff; font-size: 2.6rem; letter-spacing: 0.04em; margin: 0; }
.acceso-identidad .lema { color: var(--ambar); font-weight: 600; }
.acceso-identidad p { max-width: 30rem; color: #b9cfc3; }
.acceso-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.acceso-form form { width: 100%; max-width: 22rem; }

/* ---------- Récord académico (documento) ---------- */
.documento { background: #fff; border: 1px solid var(--linea); padding: 2rem 2.25rem; max-width: 60rem; }
.documento-cabecera { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--monte); padding-bottom: 1rem; margin-bottom: 1.25rem; }
.documento-cabecera .institucion strong { display: block; font-size: 1.05rem; color: var(--monte); }
.documento-cabecera .institucion span { color: var(--tenue); font-size: 0.85rem; }
.documento dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 1.5rem; }
.documento dt { color: var(--tenue); font-weight: 400; }
.documento dd { margin: 0; font-weight: 600; }
.bloque-periodo { margin-bottom: 1.75rem; }
.bloque-periodo h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--linea); padding-bottom: 0.35rem; }
.bloque-periodo h2 small { font-weight: 400; color: var(--tenue); font-size: 0.85rem; }
.firma { margin-top: 3rem; display: flex; justify-content: flex-end; }
.firma div { border-top: 1px solid var(--tinta); padding-top: 0.3rem; min-width: 16rem; text-align: center; font-size: 0.85rem; }

@media print {
  .app-sidebar, .barra-superior, .no-imprimir, .alert { display: none !important; }
  .app-main { margin: 0 !important; }
  .contenido { padding: 0; max-width: none; }
  body { background: #fff; font-size: 10.5pt; }
  .documento, .panel { border: 0; padding: 0; }
  .tabla thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}