/**
 * MEDUCA — Overrides globales del template Kubayar
 * Se carga en TODAS las páginas (via config/dz.php → global.css.bottom).
 * Aquí van los ajustes que queremos aplicar uniformemente al sistema completo.
 */

/* ─────────────────────────────────────────────────────────────────────
 *  KPI WIDGETS — usamos el patrón NATIVO del template `.widget-stat`
 *  con bg-primary / bg-success / bg-warning / bg-danger / bg-info.
 *  Ver `widget-basic.php` del template como referencia. Aquí solo
 *  ajustamos detalles para que el ícono se vea bien centrado y
 *  los números no se rompan a pequeñas resoluciones.
 * ───────────────────────────────────────────────────────────────────── */
.widget-stat .media > span:first-child {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(255,255,255,0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.widget-stat .media > span:first-child i {
    color: #fff;
    font-size: 26px;
    line-height: 1;
}
.widget-stat .media-body p {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.9;
}
.widget-stat .media-body h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.widget-stat .media-body small {
    font-size: 0.78rem;
    opacity: 0.95;
}
.widget-stat .progress {
    height: 5px;
    border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────────
 *  TEXTO DE TABLAS — 12px uniforme
 *  En MEDUCA todo lo que no es título cuenta como texto secundario y
 *  debe ser legible a 12px (no menos). Los `<small>` dentro de td se
 *  fuerzan al mismo tamaño para neutralizar páginas viejas que aún los
 *  usaban. La regla a futuro es NO poner <small> dentro de <td> cuando
 *  el td muestra UN solo dato — usar texto plano.
 * ───────────────────────────────────────────────────────────────────── */
.table td, .table th,
table.dataTable td, table.dataTable th {
    font-size: 12px !important;
}
.table td small, .table th small,
table.dataTable td small, table.dataTable th small,
.table td .small, table.dataTable td .small {
    font-size: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 *  ENCABEZADOS DE TABLA — fondo lavanda suave + bold global.
 *  Aplica a todas las tablas: .table, DataTables, y cualquier <thead>
 *  dentro de un .card-body. El usuario validó este estilo (2026-05-31).
 *  Se cubren las variantes con !important porque DataTables y algunos
 *  temas del shell sobreescriben.
 * ───────────────────────────────────────────────────────────────────── */
.table thead th,
.table > thead > tr > th,
table.dataTable thead th,
table.dataTable thead td,
table.display thead th,
.card-body table thead th {
    background: #eae9ee !important;
    font-weight: 700 !important;
    color: #1f1f3a !important;
}

/* ─────────────────────────────────────────────────────────────────────
 *  SCROLLBAR — más oscuro y delgado, para que destaque sobre fondos
 *  blancos sin invadir el contenido. Aplica a TODAS las páginas.
 * ───────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
    background: #ececf3;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 6px;
    border: 2px solid #ececf3;
}
::-webkit-scrollbar-thumb:hover { background: #6b7280; }
::-webkit-scrollbar-thumb:active { background: #4b5563; }
::-webkit-scrollbar-corner { background: #ececf3; }
/* Firefox */
* {
    scrollbar-color: #9ca3af #ececf3;
    scrollbar-width: thin;
}

/* ─────────────────────────────────────────────────────────────────────
 *  FOCUS RING UNIFORME — todos los inputs muestran borde violeta +
 *  halo translúcido al recibir foco. El usuario lo pidió específica-
 *  mente porque mejora la orientación visual ("dónde estoy escribiendo").
 *  Antes solo lo tenían los modales de estudiantes/padres/empleados
 *  hardcoded. Ahora aplica globalmente.
 * ───────────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: #5A45AA !important;
    box-shadow: 0 0 0 3px rgba(90, 69, 170, 0.15) !important;
    outline: none !important;
}
/* Bootstrap-select activado (botón dropdown) cuando está abierto */
.bootstrap-select.show .dropdown-toggle,
.bootstrap-select .dropdown-toggle:focus {
    border-color: #5A45AA !important;
    box-shadow: 0 0 0 3px rgba(90, 69, 170, 0.15) !important;
    outline: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
 *  ERRADICAR el gris claro `#888` / `rgb(136,136,136)` que Kubayar
 *  expone via la variable `--text`. Es demasiado tenue, casi ilegible
 *  contra fondos blancos. Lo reemplazamos por el gris oficial MEDUCA.
 * ───────────────────────────────────────────────────────────────────── */
:root {
    --text: #434343 !important;
}
/* Catch-all defensivo: cualquier elemento que herede color #888888
   en línea (no via variable) también se sobrescribe. */
[style*="color: #888"],
[style*="color:#888"],
[style*="color: rgb(136"] {
    color: #434343 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 *  COLOR ESTÁNDAR DE TEXTO SECUNDARIO
 *  El template usa `.text-muted` con un gris muy claro (≈ #717579) que
 *  resulta ilegible. Lo fijamos al gris oficial MEDUCA #434343.
 * ───────────────────────────────────────────────────────────────────── */
.text-muted,
small.text-muted,
.fs-12.text-muted,
.fs-13.text-muted,
.fs-14.text-muted,
.welcome-text span,
.breadcrumb-item a,
.breadcrumb-item.active {
    color: #434343 !important;
}

/* Excepción: dentro de cards con color sólido (widget-stat), el texto
   secundario es blanco translúcido — NO debe heredar el #434343. */
.widget-stat .media-body p,
.widget-stat .media-body small,
.widget-stat .media-body .text-white,
.widget-stat.bg-primary *,
.widget-stat.bg-success *,
.widget-stat.bg-danger *,
.widget-stat.bg-warning *,
.widget-stat.bg-info *,
.widget-stat.bg-secondary *,
.widget-stat.bg-dark * {
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────
 *  DATATABLES — info, length, filter, paginación y CONTENIDO DE TABLA
 *  Por defecto el template usa gris claro. Forzamos #434343 en TODO.
 * ───────────────────────────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_filter label {
    color: #434343 !important;
}

/* Length selector ("Mostrar 10 ▼"): sin margen inferior para que quede
   pegado a la fila siguiente (info "Mostrando X de Y registros"). */
.dataTables_wrapper .dataTables_length {
    margin-bottom: 0 !important;
}

/* Info "Mostrando X a Y de Z registros": pegado al length por arriba,
   con espacio cómodo abajo respecto al borde del card. */
.dataTables_wrapper .dataTables_info {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

/* Selector de cantidad de registros (Mostrar 10 / 25 / 50 …) */
.dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    margin-bottom: 0;
}
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 5px 28px 5px 12px;
    background-color: #fff;
    color: #434343;
    font-size: 0.85rem;
    min-width: 80px;
    cursor: pointer;
}
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: #5a45aa;
    box-shadow: 0 0 0 2px rgba(90, 69, 170, 0.15);
}

/* Encabezados y celdas de tabla — toda la jerarquía */
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tbody th,
table.dataTable tbody td,
.dataTables_wrapper table thead th,
.dataTables_wrapper table thead td,
.dataTables_wrapper table tbody th,
.dataTables_wrapper table tbody td,
.dataTables_wrapper table tfoot th,
.dataTables_wrapper table tfoot td {
    color: #434343 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 *  TABLAS REGULARES (sin DataTables) — mismo color para uniformidad
 * ───────────────────────────────────────────────────────────────────── */
.table thead th,
.table tbody th,
.table tbody td,
.table tfoot th,
.table tfoot td,
table.table th,
table.table td {
    color: #434343 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 *  PAGINACIÓN — respetamos el look nativo del template (no tocamos
 *  width/padding del `.page-link`). Solo fijamos el color del número
 *  inactivo. El template ya maneja:
 *    - círculos del mismo tamaño con borde violeta del tema
 *    - botón activo en violeta sólido + texto blanco
 *  Las flechas «/» se ponen vía el config de DataTables (language.paginate).
 * ───────────────────────────────────────────────────────────────────── */
.dataTables_wrapper .pagination .page-link {
    color: #434343;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────
 *  DT-BUTTONS — grupo de botones (Copiar/Imprimir/Excel/CSV/Registros)
 *  Estilo "btn-group" sólido en el COLOR PRIMARIO del tema (violeta).
 *  Usa las variables nativas de Kubayar (--bs-primary / --primary-hover),
 *  así si en el futuro se cambia el tema, estos botones lo siguen.
 *  NO usar overflow: hidden — cortaría el dropdown del colvis (Registros).
 * ───────────────────────────────────────────────────────────────────── */
.dt-buttons {
    margin-bottom: 6px;
    display: inline-flex;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    border-radius: 6px;
}
.dt-buttons .btn,
.dt-buttons .dt-button {
    background: #6b7280 !important;          /* gris oscuro CRM */
    color: #fff !important;
    border: 1px solid #5b6270 !important;
    border-right-width: 0 !important;
    border-radius: 0 !important;
    font-size: 0.82rem !important;
    padding: 7px 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dt-buttons .btn:first-child,
.dt-buttons .dt-button:first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}
.dt-buttons .btn:last-child,
.dt-buttons .dt-button:last-child {
    border-right-width: 1px !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover {
    background: #4b5563 !important;
    color: #fff !important;
}
.dt-buttons .btn.active,
.dt-buttons .dt-button.active {
    background: #374151 !important;
    color: #fff !important;
}
/* Dropdown de "Registros" (colvis) */
.dt-button-collection {
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    padding: 6px 0;
    background: #fff;
    border: 1px solid #e5e7eb;
}
.dt-button-collection .dt-button {
    color: #434343 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 16px !important;
}
.dt-button-collection .dt-button:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}
.dt-button-collection .dt-button.active {
    background: #f9fafb !important;
    color: #111827 !important;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
 *  SIDEBAR — submenu items: fuente un poco más pequeña que el grupo
 *  para crear jerarquía visual clara entre padre e hijos.
 *  Aplica solo a los `<li>` dentro de un `<ul>` anidado del metismenu.
 * ───────────────────────────────────────────────────────────────────── */
.deznav .metismenu > li > ul li a {
    font-size: 0.84rem;
    padding-top: 8px;
    padding-bottom: 8px;
}
.deznav .metismenu > li > ul li a i {
    font-size: 0.92rem;
    width: 16px;
    text-align: center;
    opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────
 *  SIDEBAR — líneas conectoras del template Kubayar
 *  Las reglas viven en style.css pero algo en el shell de MEDUCA las
 *  deja invisibles. Aquí las re-forzamos con la paleta violeta:
 *
 *    1. Línea VERTICAL del `<ul>` del submenú (eje principal del árbol)
 *    2. Línea HORIZONTAL del `<a>` de cada item (rama hacia el item)
 *
 *  Color: lavanda suave (#ddd6fe) — combina con el fondo claro del
 *  sidebar sin quitarle protagonismo a los textos.
 * ───────────────────────────────────────────────────────────────────── */
.deznav .metismenu ul {
    position: relative;
}
.deznav .metismenu ul:before {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 18px);
    background: #ddd6fe;
    top: 6px;
    left: 35px;
    z-index: 1;
}
/* Conector horizontal de cada item del submenú (pequeño "punto-raya"
   que sale de la línea vertical y se acerca al texto). */
.deznav .metismenu ul li a {
    position: relative;
}
.deznav .metismenu ul li a:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 1px;
    background: #ddd6fe;
    top: 50%;
    left: 35px;
    transform: translateY(-50%);
    z-index: 1;
}
/* Item activo / con hover → la línea horizontal se pone violeta sólida */
.deznav .metismenu ul li a:hover:before,
.deznav .metismenu ul li.mm-active > a:before,
.deznav .metismenu ul li a.mm-active:before {
    background: #5a45aa;
    width: 12px;
}
/* En pantallas medias el sidebar es más estrecho — corrige el `left` */
@media only screen and (max-width: 1600px) {
    .deznav .metismenu ul:before { left: 31px; height: calc(100% - 14px); }
    .deznav .metismenu ul li a:before { left: 31px; }
}

/* ─────────────────────────────────────────────────────────────────────
 *  SIDEBAR — scrollbar custom violeta MEDUCA
 *
 *  Por defecto el sidebar oculta su scroll y depende del scroll del mouse.
 *  Para usuarios con mouse roto o táctiles, hacemos visible un scroll
 *  fino, elegante y permanente, con paleta violeta de la marca.
 *
 *  Diseño:
 *    - Width:  7px (fino pero arrastrabable)
 *    - Track:  transparente — solo se ve el thumb sobre el fondo del sidebar
 *    - Thumb:  violeta lavanda (#c4b5fd) con border-radius pleno
 *    - Hover:  violeta más saturado (#7663bf) — feedback claro al usuario
 *    - Active: violeta MEDUCA (#5a45aa) — arrastrando ahora
 *
 *  Compatible: Webkit (Chrome/Edge/Safari) + Firefox.
 * ───────────────────────────────────────────────────────────────────── */

/* Forzamos overflow auto para que el scroll exista incluso si simplebar
   no inicializó (algunos viewports pequeños). */
.deznav .deznav-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

/* ── Webkit (Chrome/Edge/Safari) ── */
.deznav .deznav-scroll::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.deznav .deznav-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}
.deznav .deznav-scroll::-webkit-scrollbar-thumb {
    background: #c4b5fd;
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
}
.deznav .deznav-scroll::-webkit-scrollbar-thumb:hover {
    background: #7663bf;
    background-clip: padding-box;
}
.deznav .deznav-scroll::-webkit-scrollbar-thumb:active {
    background: #5a45aa;
    background-clip: padding-box;
}
.deznav .deznav-scroll::-webkit-scrollbar-corner { background: transparent; }

/* ── Firefox ── */
.deznav .deznav-scroll {
    scrollbar-color: #c4b5fd transparent;
    scrollbar-width: thin;
}

/* ─────────────────────────────────────────────────────────────────────
 *  INPUTS readonly / disabled — fondo gris suave global.
 *  Aplica a TODO el proyecto: form-control, form-select, default-select.
 *  El usuario validó este estilo (2026-06-02).
 *  Es importante para que el usuario sepa visualmente qué campo NO puede
 *  modificar (configuraciones del sistema, campos calculados, etc.).
 * ───────────────────────────────────────────────────────────────────── */
.form-control[readonly],
.form-control:disabled,
.form-select[readonly],
.form-select:disabled,
input[readonly]:not([type="checkbox"]):not([type="radio"]),
input:disabled:not([type="checkbox"]):not([type="radio"]),
textarea[readonly],
textarea:disabled,
select[readonly],
select:disabled {
    background-color: #eae9ee !important;
    color: #4b5563 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Bootstrap-select (la clase default-select de Kubayar) renderiza un
 * <button> en lugar de <select> nativo cuando está deshabilitado. */
.bootstrap-select.disabled > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.disabled,
.bootstrap-select .btn:disabled {
    background-color: #eae9ee !important;
    color: #4b5563 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* No queremos que el cursor pointer del checkbox/radio se vea bloqueado;
 * los toggles tipo .form-check-input mantienen su comportamiento. */
input[type="checkbox"][readonly],
input[type="radio"][readonly],
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}


/* ─────────────────────────────────────────────────────────────────────
 *  CODE / PRE — contraste legible en todo el sistema
 *  Kubayar default deja el <code> con color casi invisible sobre bg-light.
 *  Usamos fondo claro + texto oscuro para máxima legibilidad.
 *  ───────────────────────────────────────────────────────────────── */
code {
    background: #ede9fe !important;
    color: #20193d !important;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    border: 1px solid #ddd6fe;
}
pre {
    background: #f1edff !important;
    color: #20193d !important;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #ddd6fe;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    overflow-x: auto;
}
pre code,
pre > code {
    background: transparent !important;
    color: #20193d !important;
    border: 0 !important;
    padding: 0;
    font-size: 0.88em;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
 *  DATATABLES — overflow horizontal cuando la tabla excede el card
 *  Si la tabla tiene class="nowrap" (típico en MEDUCA para que los
 *  números no se rompan), el wrapper se desborda lateralmente del card.
 *  Forzamos auto-scroll horizontal en el wrapper para que se mantenga
 *  dentro de los límites visuales del card.
 * ───────────────────────────────────────────────────────────────────── */
.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* El wrapper interno (tabla en sí) puede ser ancho, pero el wrapper externo
   absorbe el scroll. */
.dataTables_wrapper > .table-responsive {
    overflow-x: visible;
}
/* Header de DataTables (length + filter + buttons) — wrap suave en mobile */
.dataTables_wrapper .row:first-child {
    align-items: center;
}
.dataTables_wrapper .dt-buttons {
    margin-bottom: 6px;
}

/* ─────────────────────────────────────────────────────────────────────
 *  MODALES — estándar de botones del footer
 *
 *  Aplica a TODO modal con clase `.modal` del sistema:
 *
 *    ┌──────────────────────── modal-footer ────────────────────────┐
 *    │   [ × Cancelar  rojo outline pill ]   [ 💾 Guardar  verde gradient pill ]   │
 *    └──────────────────────────────────────────────────────────────┘
 *
 *  Patrón confirmado por el usuario (2026-06-06) en grupo_competencias.php
 *  — aplicar este look a TODOS los modales del sistema.
 *
 *  Convención HTML mínima en cada modal:
 *    <button class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">
 *        <i class="fas fa-times me-1"></i>Cancelar
 *    </button>
 *    <button class="btn btn-success rounded-pill" type="submit">
 *        <i class="fas fa-save me-1"></i>Guardar X
 *    </button>
 *
 *  No requiere cambiar markup viejo: las reglas pisan estilos por contexto
 *  (selector `.modal-footer .btn-X.rounded-pill`).
 * ───────────────────────────────────────────────────────────────────── */

/* Botón Cancelar — outline rojo suave + pill */
.modal-footer .btn-outline-secondary.rounded-pill,
.modal-footer .btn.btn-outline-secondary[data-bs-dismiss="modal"] {
    color: #dc2626 !important;
    border: 1.5px solid #fca5a5 !important;
    background: #fff !important;
    font-weight: 600;
    transition: all 0.2s ease;
}
.modal-footer .btn-outline-secondary.rounded-pill:hover,
.modal-footer .btn.btn-outline-secondary[data-bs-dismiss="modal"]:hover {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #f87171 !important;
}
.modal-footer .btn-outline-secondary.rounded-pill:focus,
.modal-footer .btn-outline-secondary.rounded-pill:active {
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.18) !important;
}
.modal-footer .btn-outline-secondary.rounded-pill i {
    color: inherit;
}

/* Botón Guardar / Confirmar — verde sólido pill con sombra */
.modal-footer .btn-success.rounded-pill {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.40);
    transition: all 0.22s ease;
}
.modal-footer .btn-success.rounded-pill:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px rgba(16, 185, 129, 0.55);
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}
.modal-footer .btn-success.rounded-pill:focus,
.modal-footer .btn-success.rounded-pill:active {
    box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25) !important;
}
.modal-footer .btn-success.rounded-pill i {
    color: #fff;
}


/* ════════════════════════════════════════════════════════════════════════
   "No hay datos disponibles" CENTRADO en DataTables — fix global.
   Sin esto, la celda hereda el text-align de la última columna (Acciones)
   y queda pegada a la derecha. Aplica a cualquier tabla del proyecto.
   ════════════════════════════════════════════════════════════════════════ */
table.dataTable td.dataTables_empty {
    text-align: center !important;
    padding: 18px 12px !important;
    color: #64748b;
    font-style: italic;
}