/* ============================================================
   Estilos corporativos CES Don Bosco para el portal de contactos
   Paleta:
     - Magenta principal #E50050
     - Negro corporativo #1C1C1B
     - Blanco #FFFFFF
     - Grises de apoyo #F2F2F2 / #D9D9D9
   Aplicado en: ContactosPracticas, ContactosCesConnect, ContactosInstitucionales
   ============================================================ */

:root {
    --ces-magenta: #E50050;
    --ces-magenta-dark: #B7003F;
    --ces-magenta-soft: #FFF0F5;
    --ces-negro: #1C1C1B;
    --ces-gris: #F2F2F2;
    --ces-gris-borde: #D9D9D9;
}

body,
.table,
.form-control,
.form-select,
.btn,
.card {
    color: var(--ces-negro);
}

/* ----------------- Cabecera ----------------- */
.ces-title {
    color: var(--ces-negro);
}

.ces-subtitle {
    color: #555;
}

.ces-text-magenta,
.ces-icon {
    color: var(--ces-magenta);
}

/* ----------------- Botones ----------------- */
.btn-ces {
    background-color: var(--ces-magenta);
    border-color: var(--ces-magenta);
    color: #fff;
}

    .btn-ces:hover,
    .btn-ces:focus {
        background-color: var(--ces-magenta-dark);
        border-color: var(--ces-magenta-dark);
        color: #fff;
    }

    .btn-ces:disabled,
    .btn-ces.disabled {
        background-color: var(--ces-magenta);
        border-color: var(--ces-magenta);
        color: #fff;
        opacity: .5;
    }

.btn-outline-ces {
    color: var(--ces-magenta);
    border-color: var(--ces-magenta);
    background-color: transparent;
}

    .btn-outline-ces:hover,
    .btn-outline-ces:focus {
        background-color: var(--ces-magenta);
        border-color: var(--ces-magenta);
        color: #fff;
    }

    .btn-outline-ces:disabled,
    .btn-outline-ces.disabled {
        opacity: .5;
    }

/* ----------------- Badges ----------------- */
.badge-ces {
    background-color: var(--ces-magenta);
    color: #fff;
}

.badge-ces-soft {
    background-color: var(--ces-magenta-soft);
    color: var(--ces-magenta-dark);
    border: 1px solid var(--ces-magenta);
}

/* ----------------- Tabla ----------------- */
.ces-table thead.table-light th {
    background-color: var(--ces-gris);
    color: var(--ces-negro);
    border-bottom: 2px solid var(--ces-magenta);
}

.ces-table tbody tr:nth-child(even) {
    background-color: #FAFAFA;
}

.ces-table tbody tr:hover {
    background-color: var(--ces-magenta-soft);
}

/* Bootstrap pinta el fondo de cada celda con un box-shadow inset de 9999px.
   Esos recuadros gigantes hacen que el navegador invalide mal la zona al
   hacer scroll y deje casillas pintadas en su posicion anterior. Los fondos
   de estas tablas ya se aplican con background-color, asi que sobra. */
.ces-table > :not(caption) > * > * {
    box-shadow: none;
}

/* Casillas de seleccion centradas en su celda: por defecto .form-check-input
   lleva margin-top y vertical-align:top, que la descuadra respecto al texto */
.ces-table th > .form-check-input,
.ces-table td > .form-check-input {
    margin-top: 0;
    vertical-align: middle;
}

/* Cabecera fija en tablas con scroll vertical propio.
   El sticky va en los TH y NO en el THEAD: sobre el THEAD el navegador deja
   las casillas de las filas en una capa que no acompana al scroll. */
.ces-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--ces-gris);
    /* El borde inferior va como box-shadow porque los bordes de una celda
       sticky no se pintan al desplazar el contenido. */
    box-shadow: inset 0 -2px 0 var(--ces-magenta);
    border-bottom: 0;
}

/* ----------------- Paginación ----------------- */
.pagination .page-item .page-link {
    color: var(--ces-magenta);
}

.pagination .page-item.active .page-link {
    background-color: var(--ces-magenta);
    border-color: var(--ces-magenta);
    color: #fff;
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 .15rem rgba(229,0,80,.25);
}

/* ----------------- Accordion ----------------- */
.accordion-button:not(.collapsed) {
    background-color: var(--ces-magenta-soft);
    color: var(--ces-negro);
    box-shadow: inset 0 -1px 0 var(--ces-gris-borde);
}

.accordion-button:focus {
    border-color: var(--ces-magenta);
    box-shadow: 0 0 0 .15rem rgba(229,0,80,.25);
}

/* ----------------- Forms ----------------- */
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--ces-magenta);
    border-color: var(--ces-magenta);
}

.form-check-input:checked {
    background-color: var(--ces-magenta);
    border-color: var(--ces-magenta);
}

.form-check-input:focus {
    border-color: var(--ces-magenta);
    box-shadow: 0 0 0 .15rem rgba(229,0,80,.25);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ces-magenta);
    box-shadow: 0 0 0 .15rem rgba(229,0,80,.15);
}

/* ----------------- Modales ----------------- */
.modal-title.ces-text-magenta,
.modal-header .ces-text-magenta {
    color: var(--ces-magenta);
}

/* ----------------- Específicos: ContactosPracticas ----------------- */
.ces-centro-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    width: 100%;
}

    .ces-centro-header .ces-centro-nombre {
        font-weight: 600;
        color: var(--ces-negro);
    }

.ces-curso-header {
    background-color: var(--ces-negro);
    color: #fff;
    padding: .35rem .75rem;
    border-radius: .25rem;
    font-weight: 600;
    font-size: .9rem;
    display: inline-block;
    margin: 1rem 0 .5rem 0;
}

.ces-contacto-row {
    font-size: .85rem;
    color: #444;
}

    .ces-contacto-row strong {
        color: var(--ces-negro);
    }

.ces-texto-largo {
    font-size: .85rem;
    white-space: pre-wrap;
    background-color: var(--ces-gris);
    border-left: 3px solid var(--ces-magenta);
    padding: .5rem .75rem;
    margin-top: .5rem;
    border-radius: .25rem;
}

.ces-selected-count {
    background-color: var(--ces-magenta);
    color: #fff;
    padding: .25rem .6rem;
    border-radius: 1rem;
    font-size: .8rem;
}

/* ==== Ficha de contacto del estudiante (Scripts/modules/fichaContacto.js) ==== */
/* Modal ancho: la tabla de practicas tiene 7 columnas y necesita sitio */
.ces-modal-ficha {
    max-width: min(95vw, 1500px);
}

/* La ultima tarjeta no arrastra su margen contra el pie del modal */
.ces-modal-ficha .modal-body .card:last-child {
    margin-bottom: 0 !important;
}

/* Icono de estudio finalizado en el historial */
.icono-finalizado {
    color: var(--ces-magenta);
}

/* ==== Bajas de matricula (Matriculas.Fecha_Baja) ==== */
/* Icono de baja en el estudio: columna Estado de matriculados/abandonos,
   historial de la ficha y alumno en plazas de practicas */
.icono-baja {
    color: #6c757d;
}

/* Badge "N bajas": neutro con borde, distinto de los badges magenta */
.badge-ces-baja {
    background-color: #fff;
    color: var(--ces-negro);
    border: 1px solid var(--ces-negro);
}

/* Fila de un estudiante que ha causado baja: atenuada salvo la celda de estado */
.ces-table tbody tr.fila-baja > td {
    opacity: .55;
}

.ces-table tbody tr.fila-baja > td.celda-estado {
    opacity: 1;
}