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 #258cfb;
}

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

body {
  margin-bottom: 60px;
}

/* ---------------------------------------------------------------------
   Mejoras de responsividad / usabilidad aplicadas a toda la aplicación.
   Con esto no hace falta retocar cada una de las vistas: cualquier tabla,
   formulario o tarjeta se adapta automáticamente en pantallas pequeñas.
   --------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* Cualquier tabla que no esté ya envuelta en .table-responsive obtiene
   scroll horizontal en pantallas angostas en vez de desbordar/romper el layout. */
.table {
  width: 100%;
}

.table:not(.table-responsive *) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
  .table:not(.table-responsive *) {
    display: table;
    overflow-x: visible;
  }
}

/* Contenedores tipo "tarjeta" (border + fondo blanco) usados en las vistas de
   administración: se ven mejor y más ordenados en pantallas chicas. */
.backgroundWhite {
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
}

@media (min-width: 768px) {
  .backgroundWhite {
    padding: 1.5rem;
  }
}

/* Los botones de acciones (editar/borrar/etc.) se apilan y ocupan el ancho
   completo en móvil en vez de quedar apretados unos contra otros. */
@media (max-width: 575.98px) {
  td .btn, td form, td a.btn {
    display: block;
    width: 100%;
    margin: 0.15rem 0 !important;
  }

  .navbar-brand {
    font-size: 1rem;
  }
}

/* Formularios: que los grupos de botones de acción (Guardar/Cancelar, etc.)
   se apilen en vertical en pantallas pequeñas. */
@media (max-width: 575.98px) {
  .form-group.row > .col,
  .form-group.row > [class*="col-"] {
    margin-bottom: 0.5rem;
  }
}

/* Barra de navegación: separa un poco los ítems entre sí cuando el menú
   colapsado se despliega en móvil. */
@media (max-width: 991.98px) {
  .navbar-nav .nav-item {
    margin-bottom: 0.25rem;
  }
}

/* Formularios de Crear/Editar (patrón label col-4 + input col-8 usado en las vistas de
   Admin): en pantallas angostas se apilan verticalmente en vez de quedar apretados. */
@media (max-width: 767.98px) {
  .form-group.row > .col-4,
  .form-group.row > .col-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .form-group.row > .col-4 {
    margin-bottom: 0.25rem;
  }
}

/* DataTables: que los controles (buscador, paginación) también se adapten. */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  width: 100%;
}

@media (min-width: 768px) {
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length {
    width: auto;
  }
}

/* ==========================================================================
   Sistema de diseño — Colegios Diaconales
   Paleta institucional extraída del logo oficial (#004890 / #3B71B9 / #F9A61A).
   Se mantiene Bootstrap 5 como base (grid, componentes, accesibilidad) y se
   retinta reasignando las variables --bs-* que Bootstrap 5.3 usa internamente,
   de forma que .text-primary, .btn-primary, los links, etc. en TODAS las
   vistas existentes adopten el color institucional sin tener que tocar cada
   vista una por una. Encima de eso se agrega el layout de sidebar para las
   pantallas de administración (body.dc-app).
   ========================================================================== */

:root {
  --dc-blue-dark: #004890;
  --dc-blue: #3B71B9;
  --dc-orange: #F9A61A;
  --dc-bg: #F2F5F9;
  --dc-text-muted: #64748B;
  --dc-border: #E2E8F0;
  --dc-radius: 0.75rem;
  --dc-radius-sm: 0.5rem;
  --dc-shadow: 0 2px 12px rgba(0, 32, 66, 0.08);
  --dc-shadow-lg: 0 10px 32px rgba(0, 32, 66, 0.18);
  --dc-sidebar-width: 264px;
  --dc-topbar-height: 64px;

  --bs-primary: var(--dc-blue-dark);
  --bs-primary-rgb: 0, 72, 144;
  --bs-link-color: var(--dc-blue-dark);
  --bs-link-color-rgb: 0, 72, 144;
  --bs-link-hover-color: #00335f;
  --bs-link-hover-color-rgb: 0, 51, 95;
}

/* ---------------------------------------------------------------------
   Layout de aplicación (sidebar) — activo cuando el usuario está
   autenticado (body.dc-app). Los visitantes anónimos (home pública,
   login) conservan la barra superior clásica.
   --------------------------------------------------------------------- */

body.dc-app {
  background-color: var(--dc-bg);
  margin-bottom: 0;
}

.dc-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.dc-sidebar {
  width: var(--dc-sidebar-width);
  flex: 0 0 var(--dc-sidebar-width);
  background: linear-gradient(180deg, var(--dc-blue-dark) 0%, #00305c 100%);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 1045;
  transition: transform 0.25s ease;
}

.dc-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.dc-sidebar-logo {
  width: 40px;
  height: 40px;
  min-width: 40px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 3px;
}

.dc-brand-title {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  color: #fff;
}

.dc-brand-subtitle {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}

.dc-sidebar-nav {
  padding: 0.6rem 0 2rem;
}

.dc-nav-section-title {
  padding: 1rem 1.25rem 0.3rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.48);
}

.dc-nav-link,
.dc-nav-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 1.25rem;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 0.92rem;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dc-nav-link i,
.dc-nav-toggle i {
  width: 1.1rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--dc-orange);
}

.dc-nav-link:hover,
.dc-nav-toggle:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

.dc-nav-link.active {
  background-color: rgba(255, 255, 255, 0.14);
  border-left-color: var(--dc-orange);
  color: #fff;
  font-weight: 600;
}

.dc-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 0.2s ease;
}

.dc-nav-toggle[aria-expanded="true"] .dc-chevron {
  transform: rotate(90deg);
}

.dc-nav-submenu .dc-nav-link {
  padding-left: 2.85rem;
  font-size: 0.85rem;
}

.dc-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 18, 38, 0.5);
  z-index: 1040;
}

.dc-content {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--dc-sidebar-width);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.2s ease;
}

.dc-topbar {
  height: var(--dc-topbar-height);
  min-height: var(--dc-topbar-height);
  background: #fff;
  border-bottom: 1px solid var(--dc-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 4px rgba(0, 32, 66, 0.06);
}

.dc-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  font-size: 1.3rem;
  color: var(--dc-blue-dark);
  padding: 0.25rem 0.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.dc-topbar-title {
  font-weight: 600;
  color: var(--dc-blue-dark);
  flex: 1 1 auto;
  font-size: 1.05rem;
}

/* Insignia de colegio/ambiente en el topbar (ver _Layout.cshtml, 2026-08-29).
   Estado normal: discreta. Estado "TEST": roja y notoria a propósito, para
   que nunca se confunda un ambiente de pruebas con producción real. */
.dc-badge-colegio {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  margin-right: 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--dc-blue-light, #eef3fb);
  color: var(--dc-blue-dark, #14365d);
}

.dc-badge-colegio-test {
  background: #dc3545;
  color: #fff;
  animation: dcPulseTest 2s ease-in-out infinite;
}

/* Nombre real de la base de datos conectada (2026-08-29), mostrado junto al
   nombre "amigable" del colegio cuando difieren. Sirve como chequeo rápido:
   si esto no coincide con lo esperado, la cadena de conexión de este
   ambiente apunta a la base equivocada (ver caso OrientacionSND). */
.dc-badge-colegio-db {
  font-weight: 400;
  opacity: 0.85;
  font-size: 0.72rem;
}

@keyframes dcPulseTest {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* Indicador global de "cargando" para peticiones AJAX (ver site.js, 2026-08-29).
   Barra fina animada arriba de todo + una píldora que dice explícitamente
   "Cargando datos…" — el usuario pidió que se note claramente que algo está
   pasando en vez de quedar la pantalla quieta sin explicación. */
#dcAjaxLoader {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#dcAjaxLoader.dc-ajax-loader-visible {
  opacity: 1;
}

.dc-ajax-loader-bar {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--dc-blue-dark, #14365d), transparent);
  background-size: 50% 100%;
  animation: dcAjaxLoaderSweep 1.1s ease-in-out infinite;
}

@keyframes dcAjaxLoaderSweep {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}

/* v2 (2026-08-29): se mueve del rincón inferior derecho al CENTRO de la
   pantalla — reporte del usuario: la píldora en la esquina pasaba
   desapercibida ("imperceptible"), así que ahora es un aviso grande, centrado
   y con una leve animación de entrada, imposible de no ver mientras carga. */
.dc-ajax-loader-pill {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  background: var(--dc-blue-dark, #14365d);
  color: #fff;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.15s ease;
}

#dcAjaxLoader.dc-ajax-loader-visible .dc-ajax-loader-pill {
  transform: translate(-50%, -50%) scale(1);
}

.dc-topbar-user {
  background: var(--dc-blue-dark);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  flex-shrink: 0;
}

/* Selector de colegio (solo Super_admin): acceso directo a los otros sitios de ALMA, ver
   _Layout.cshtml — es un simple link a la URL del otro colegio, no cambia de sesión. */
.dc-topbar-colegio {
  flex-shrink: 0;
  margin-right: 0.6rem;
}

.dc-topbar-user .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

/* "Hola: usuario@correo" y "Salir" venían con el mismo estilo (texto blanco plano dentro del
   mismo pill azul), así que no se notaba cuál de los dos era el que realmente se podía
   presionar. Se le da a "Salir" apariencia de botón (borde + fondo al pasar el mouse) y se
   atenúa un poco el saludo para que quede claro que es solo informativo. */
.dc-topbar-user .nav-item > span.nav-link {
  opacity: 0.8;
  font-weight: 400;
  padding-right: 0.35rem !important;
}

.dc-topbar-user .nav-item form button.nav-link {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 0.15rem 0.85rem !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dc-topbar-user .nav-item form button.nav-link:hover,
.dc-topbar-user .nav-item form button.nav-link:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  color: #fff;
}

.dc-main {
  flex: 1 1 auto;
  padding: 1.5rem;
  width: 100%;
}

.dc-footer {
  padding: 1rem 1.5rem;
  color: var(--dc-text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--dc-border);
  background: #fff;
}

@media (max-width: 991.98px) {
  .dc-sidebar {
    transform: translateX(-100%);
  }

  .dc-sidebar.show {
    transform: translateX(0);
    box-shadow: var(--dc-shadow-lg);
  }

  .dc-sidebar-backdrop.show {
    display: block;
  }

  .dc-content {
    margin-left: 0;
  }

  .dc-main {
    padding: 1rem;
  }
}

/* Colapsar el sidebar en escritorio: a diferencia de móvil (donde el sidebar
   arranca oculto y se despliega), en escritorio arranca visible y el mismo
   botón de hamburguesa del topbar lo oculta/muestra. El estado se recuerda
   en localStorage (ver script en _Layout.cshtml) para que no vuelva a
   aparecer expandido en cada página si el usuario lo dejó oculto. */
@media (min-width: 992px) {
  body.dc-sidebar-collapsed .dc-sidebar {
    transform: translateX(-100%);
  }

  body.dc-sidebar-collapsed .dc-content {
    margin-left: 0;
  }
}

@media (max-width: 575.98px) {
  .dc-topbar-title {
    font-size: 0.92rem;
  }

  .dc-topbar-user .nav-item .nav-link {
    padding: 0.1rem 0.3rem;
    font-size: 0.85rem;
  }
}

/* ---------------------------------------------------------------------
   Tarjetas, tablas y botones modernizados dentro de las pantallas
   autenticadas (body.dc-app). Estas reglas se aplican después de las
   de Bootstrap para poder sobreescribirlas con variables propias.
   --------------------------------------------------------------------- */

.dc-app .backgroundWhite,
.dc-app .dc-card {
  background: #fff;
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  border: 1px solid var(--dc-border);
}

.dc-app .table-responsive {
  border-radius: var(--dc-radius);
  overflow: hidden;
  box-shadow: var(--dc-shadow);
  background: #fff;
}

/* Tarjetas KPI del dashboard de Síntesis (Admin/Sintesis). */
.dc-kpi-card {
  background: #fff;
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  border: 1px solid var(--dc-border);
  border-left: 4px solid var(--dc-blue-dark);
  padding: 0.9rem 1rem;
  height: 100%;
}

.dc-kpi-valor {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dc-blue-dark);
  line-height: 1.1;
}

.dc-kpi-label {
  color: var(--dc-text-muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.dc-app .table {
  margin-bottom: 0;
}

/* En tablas con columnas de texto largo (por ejemplo "Antecedentes relevantes" o
   "Estrategias" en Alumnos/Lista), la fila se estira a la altura del texto más largo y las
   demás celdas (foto, nombre, acciones) quedaban pegadas arriba (comportamiento por defecto
   de <table>). Se centran verticalmente respecto a esa fila para que se vea más ordenado;
   esto NO es lo mismo que centrar el texto horizontalmente (eso se deja explícito con
   .text-center donde corresponda, como en la columna "N° Eventos"). */
.dc-app .table > tbody > tr > td {
  vertical-align: middle;
}

.dc-app .table thead th {
  background-color: var(--dc-blue-dark);
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: none;
  vertical-align: middle;
  white-space: nowrap;
}

.dc-app .table-bordered,
.dc-app .table-bordered th,
.dc-app .table-bordered td {
  border-color: var(--dc-border);
}

.dc-app .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: #F7FAFD;
}

.dc-app .table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(0, 72, 144, 0.06);
}

.dc-app .btn {
  border-radius: var(--dc-radius-sm);
}

.dc-app .btn-primary {
  background-color: var(--dc-blue-dark);
  border-color: var(--dc-blue-dark);
}

.dc-app .btn-primary:hover,
.dc-app .btn-primary:focus {
  background-color: #00396f;
  border-color: #00396f;
}

.dc-app .btn-outline-primary {
  color: var(--dc-blue-dark);
  border-color: var(--dc-blue-dark);
}

.dc-app .btn-outline-primary:hover {
  background-color: var(--dc-blue-dark);
  border-color: var(--dc-blue-dark);
}

/* Insignia de acento (naranja institucional) para resaltar puntualmente
   sin depender de los colores semánticos de Bootstrap (success/danger/etc). */
.dc-badge-accent {
  display: inline-block;
  background-color: var(--dc-orange);
  color: #4a3103;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Contenedor de video/iframe responsivo (usado por el embed de PowerBI
   en Admin/Sintesis) que antes tenía ancho y alto fijos en píxeles.
   --------------------------------------------------------------------- */
.dc-responsive-embed {
  position: relative;
  width: 100%;
  padding-top: 47.5%; /* proporción original 1140 x 541.25 */
  border-radius: var(--dc-radius-sm);
  overflow: hidden;
  background: #eef2f7;
}

.dc-responsive-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767.98px) {
  .dc-responsive-embed {
    padding-top: 75%;
  }
}

/* 2026-09-18: filas/elementos que responden a un clic con JS (no son <a>/<button> nativos, así
   que el navegador no les pone la manito solo). Antes se veían igual que cualquier fila estática
   y no era obvio que se podía hacer clic — ej. Alumnos/Lista (.alumnos-row), la tabla de eventos
   agrupados de Alumnos/Details (.evento-row) y cualquier otra fila que se marque con
   .dc-clickable. */
.alumnos-row,
.evento-row,
.dc-clickable,
[data-bs-toggle="collapse"] {
  cursor: pointer;
}