/* ============================================================================
   custom.css — overrides propios del proyecto, cargado último (después de
   themes.css) para no tener que tocar plugins.css/main.css (de terceros).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Foto de docente en las tablas (Listado de Docentes, etc.). Antes usaba
   width/height inline + "img-thumbnail" de Bootstrap, que le suma padding+
   borde por fuera del tamaño declarado (inflaba la altura real de la fila) y
   no forzaba recorte -- una foto que no era cuadrada quedaba estirada en vez
   de recortada. object-fit:cover soluciona las dos cosas: tamaño fijo real,
   sin importar el formato/proporción de la foto original.
   --------------------------------------------------------------------------- */
.avatar-circulo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    border: 1px solid #e0e3e8;
    display: inline-block;
}

/* Puntito de presencia (2026-09): verde si el docente tiene clase ahora mismo
   según su horario, rojo si no -- mismo criterio que la tarjeta "Presentes
   Ahora" del dashboard (Docente_model::getIdsPresentesAhora). */
.avatar-wrap { position: relative; display: inline-block; line-height: 0; }
.presencia-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.presencia-dot.presente { background: #27ae60; }
.presencia-dot.ausente  { background: #c0392b; }

/* ---------------------------------------------------------------------------
   Layout de la "barra de herramientas" de los DataTable (arriba: mostrar +
   botones + buscador — abajo: info + paginador). Antes cada pantalla tenía un
   "sDom" distinto (ver app.js) y quedaba desalineado entre sí; ahora todas
   comparten el mismo sDom con estas clases, y acá se ordena todo con flexbox
   para que quede siempre en una sola línea (con wrap como respaldo en
   pantallas angostas), sin depender de cuánto ancho ocupe cada elemento.
   --------------------------------------------------------------------------- */
.dt-toolbar,
.dt-toolbar-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
}

/* 2026-09-12: el gris ocupa TODA la línea de arriba (Mostrar + botones +
   buscador), no solo detrás de cada grupo por separado -- una sola franja,
   como en gremiales. */
.dt-toolbar {
    background-color: #f2f3f5;
    border-radius: 4px;
    padding: 8px 12px;
}

.dt-toolbar-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto; /* empuja a la derecha */
}

/* 2026-09-12: length/info NO llevan margin-right:auto -- un flex item sin
   margen ya queda pegado al principio por default. Ponérselo (como estaba
   antes) hacía que compitiera con el margin-left:auto del buscador/pager y
   el espacio del medio quedara repartido en partes iguales, CENTRANDO los
   botones en vez de pegarlos a "Mostrar" (que es lo que se pidió). */

/* 2026-09-12: Botones (Copy/Excel/PDF/Columnas) pegados a "Mostrar", a la
   izquierda -- tienen que ver con qué se ve de la tabla, no con el buscador.
   El buscador es lo único que queda empujado a la derecha, con el mismo
   "chip" gris que los botones (mismo lenguaje visual en toda la línea). */
.dt-toolbar-search {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.dt-toolbar-search .dataTables_filter {
    padding-left: 10px;
}

/* Neutraliza floats propios de DataTables/plugins.css que peleaban con el flex */
.dt-toolbar .dataTables_filter,
.dt-toolbar .dataTables_length,
.dt-toolbar-bottom .dataTables_paginate {
    float: none;
    margin: 0;
}

.dt-toolbar .dataTables_filter label {
    float: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.dt-toolbar .dataTables_filter input {
    width: auto;
}

.dt-toolbar-bottom .dataTables_info {
    padding-top: 0;
}

/* ---------------------------------------------------------------------------
   Botones de exportación de los DataTable (Copy / Excel / PDF / Column
   visibility). Antes eran verdes y grandes (regla hardcodeada en plugins.css,
   sacada de ahí en 2026-09), después blancos con borde individual cada uno.
   2026-09-12: "píldora" gris agrupando los 4, sin borde individual -- mismo
   estilo que ya se usaba en el proyecto de gremiales (Petro J).
   --------------------------------------------------------------------------- */
.dt-buttons {
    display: inline-flex;
    gap: 4px;
}

.dt-buttons .dt-button {
    background-color: #fff;
    color: #5a6472;
    border: 1px solid #dde1e7;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 400;
    margin: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}

.dt-buttons .dt-button:hover,
.dt-buttons .dt-button:focus {
    background-color: #f4f6f8;
    color: #333;
}

.dt-buttons .dt-button.buttons-collection {
    /* "Column visibility" abre un submenú con flechita, no necesita más ancho */
}

/* 2026-09-12: el panel que abre "Column visibility" (dt-button-collection)
   trae de la extensión selectores tipo
   "div.dt-button-collection button.dt-button" (con "div."/"button." de más)
   que le ganan en especificidad a cualquier combinación de clases sola --
   confirmado con 3 propiedades distintas que la extensión fuerza ahí
   (display:block en vez de flex, gradiente+borde en :hover, gradiente+
   box-shadow inset en .active). En vez de perseguir selector por selector,
   !important en las 4 reglas de esta sección — es un caso legítimo para
   anular defaults de un CSS de terceros que además cambian de versión en
   versión. Estilo lista simple: check a la DERECHA, sin negrita, plano
   (sin degradados/sombras) tanto en reposo como en hover/activo -- lo único
   que distingue mostrada de oculta es el check mismo. */
.dt-button-collection .dt-button {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    text-align: left;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #eee;
    border-radius: 0 !important;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 400;
    color: #444;
    background: #fff !important;
    box-shadow: none !important;
}
.dt-button-collection .dt-button:last-child { border-bottom: none; }
.dt-button-collection .dt-button:hover {
    background-color: #eaf6fb !important;
    border-bottom-color: #eaf6fb;
}
.dt-button-collection .dt-button.active::after {
    content: "\f00c";
    font-family: FontAwesome;
    color: #888;
    margin-left: 12px;
}

/* ---------------------------------------------------------------------------
   Paginación (sPaginationType: "full_numbers" — ver app.js). El tipo
   "bootstrap" que se usaba antes nunca soportó Primera/Última página; este
   estilo imita la pastilla redondeada del tema para que no se note el cambio.
   --------------------------------------------------------------------------- */
.dataTables_paginate .paginate_button {
    display: inline-block;
    min-width: 30px;
    padding: 5px 10px;
    margin-left: 3px;
    text-align: center;
    font-size: 12px;
    color: #666 !important;
    background: #fff;
    border: 1px solid #e0e3e8;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none !important;
}

.dataTables_paginate .paginate_button:hover {
    background: #f4f6f8;
    border-color: #c3c9d2;
    color: #333 !important;
}

.dataTables_paginate .paginate_button.current {
    background: #1bbae1;
    border-color: #1bbae1;
    color: #fff !important;
    font-weight: 600;
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    color: #ccc !important;
    background: #fff;
    border-color: #eceef1;
    cursor: default;
}

.dataTables_paginate .ellipsis {
    padding: 5px 4px;
    color: #aaa;
}