/*
 * us-componentes.css · Aspecto común de la aplicación (identidad US).
 *
 * Da el mismo estilo a títulos, tarjetas, tablas, formularios y botones de TODAS las
 * páginas, sin tocarlas una a una. Se carga la última, después de custom.css.
 * Colores: variables --us-* y --eip-* definidas en custom.css. Criterios: skill
 * us-identidad-corporativa (referencias 2 y 3).
 *
 * Índice
 *   1. Tipografía
 *   2. Títulos de página (incluye los títulos antiguos con estilo en línea)
 *   3. Tarjetas
 *   4. Tablas
 *   5. Formularios
 *   6. Botones, insignias y avisos
 */

/* 1. Tipografía -------------------------------------------------------------------- */
:root {
    --us-fuente-texto: "Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --us-fuente-titulos: "Raleway", "Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body,
.tooltip,
.popover {
    font-family: var(--us-fuente-texto);
}
body {
    color: var(--us-gris-oscuro);
    font-size: .9375rem; /* 15 px, como SEVIUS */
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.page-heading__title,
.main-header .cabecera-titulo {
    font-family: var(--us-fuente-titulos);
    font-weight: 600;
}

/* 2. Títulos de página --------------------------------------------------------------
 * Un único modelo para todas las páginas: .page-heading (definido en custom.css):
 *   <div class="page-heading"><h1 class="page-heading__title">Título</h1>
 *     <p class="page-heading__description">Subtítulo opcional</p></div>
 * Las páginas hechas con content-header de AdminLTE se igualan al final de esta hoja.
 * (Las 127 cabeceras antiguas con estilo en línea se convirtieron el 20/10/2026.)
 */

/* 3. Tarjetas ------------------------------------------------------------------------
 * Todas las tarjetas con cabecera blanca y el color (si lo tiene) en una línea superior.
 * Antes cada sección pintaba su cabecera entera de un color distinto (azul, cian, amarillo,
 * gris, negro...).
 */
.card {
    border-radius: .5rem;
    box-shadow: 0 .125rem .35rem rgba(33, 37, 41, .08);
}
.card > .card-header {
    border-bottom: 1px solid var(--eip-borde);
    background-color: #fff;
    color: var(--us-gris-oscuro);
}
.card > .card-header .card-title {
    font-size: 1.1rem;
}
.card[class*="card-"]:not(.card-outline) > .card-header {
    background-color: #fff;
    color: var(--us-gris-oscuro);
}
.card[class*="card-"]:not(.card-outline):not(.card-tabs) > .card-header a:not(.btn),
.card[class*="card-"]:not(.card-outline) > .card-header .btn-tool {
    color: #666;
}
.card.card-primary, .card.card-danger { border-top: 3px solid var(--us-rojo); }
.card.card-info, .card.card-secondary, .card.card-dark, .card.card-light { border-top: 3px solid var(--us-gris-oscuro); }
.card.card-warning { border-top: 3px solid var(--us-amarillo); }
.card.card-success { border-top: 3px solid #1e7e34; }
.card > .card-header[class*="bg-"]:not(.bg-white):not(.bg-light) {
    background-color: #fff !important;
    color: var(--us-gris-oscuro) !important;
}
/* Si la cabecera pintaba el texto en blanco (text-white), sobre el fondo blanco no se vería. */
.card > .card-header[class*="bg-"]:not(.bg-white):not(.bg-light) .text-white,
.card > .card-header.text-white,
.card > .card-header.text-white .card-title {
    color: var(--us-gris-oscuro) !important;
}

/* Pestañas (card-tabs y nav-tabs): fondo blanco, texto gris oscuro y la activa en rojo US
   con línea inferior. !important solo para anular fondos de color en línea antiguos. */
.card.card-tabs > .card-header {
    border-bottom: 1px solid var(--eip-borde);
    background-color: #fff !important;
}
.card-tabs .nav-tabs,
.nav-tabs {
    border-bottom: 0;
}
.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--us-gris-oscuro) !important;
    font-weight: 600;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-bottom-color: var(--us-gris-claro);
    color: var(--us-rojo) !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-bottom-color: var(--us-rojo);
    background-color: #fff !important;
    color: var(--us-rojo) !important;
}

/* 4. Tablas --------------------------------------------------------------------------
 * Una sola apariencia: cabecera en franja roja con texto blanco (como SEVIUS), filas
 * separadas por líneas finas, sin bordes verticales y con resaltado al pasar el ratón.
 * Se aplica igual a las tablas «bordered», «striped», «dark» o «light».
 */
.table {
    color: var(--us-gris-oscuro);
    font-size: .9rem;
}
.table th,
.table td,
.table-bordered th,
.table-bordered td {
    padding: .6rem .75rem;
    border-right: 0;
    border-left: 0;
    border-color: var(--eip-borde);
    vertical-align: middle;
}
.table-sm th,
.table-sm td {
    padding: .35rem .5rem;
}
.table-bordered {
    border: 1px solid var(--eip-borde);
}
.table thead th,
.table thead td,
.table .thead-dark th,
.table .thead-light th,
.table.table-dark thead th,
.table thead.table-dark th {
    border-color: var(--us-rojo-oscuro);
    border-bottom: 0;
    background-color: var(--us-rojo);
    color: #fff;
    font-family: var(--us-fuente-titulos);
    font-size: .85rem;
    font-weight: 600;
    vertical-align: middle;
}
.table thead th a {
    color: #fff;
    text-decoration: underline;
}
.table.table-dark {
    background-color: #fff;
    color: var(--us-gris-oscuro);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--eip-fondo-suave);
}
.table-hover tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: var(--us-rojo-suave);
    color: inherit;
}
/* El calendario del diario (Anexo II) conserva una cabecera clara: son días de la semana. */
.table.a2-mes thead th {
    border-color: var(--eip-borde);
    background-color: var(--eip-fondo-suave);
    color: var(--us-gris-oscuro);
}
/* DataTables: flechas de ordenación visibles sobre rojo y controles alineados. */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    color: #fff;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    color: #666;
    font-size: .875rem;
}
.dataTables_wrapper .dataTables_filter input {
    min-width: 14rem;
}

/* 5. Formularios ---------------------------------------------------------------------
 * Etiquetas en seminegrita encima del campo; campos con borde visible (contraste 3:1),
 * foco en rojo US; iconos de los grupos antiguos en gris claro y discreto.
 */
label,
.col-form-label {
    margin-bottom: .3rem;
    color: var(--us-gris-oscuro);
    font-family: inherit;
    font-weight: 600;
}
.form-check-label,
.custom-control-label {
    font-weight: 400;
}
.form-control,
.custom-select,
.custom-file-label,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap4 .select2-selection {
    border-color: #8f8f8f;
    border-radius: .375rem;
    color: var(--us-gris-oscuro);
}
.form-control::placeholder {
    color: #6c757d;
}
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--us-rojo);
    box-shadow: 0 0 0 .2rem rgba(190, 15, 46, .2);
}
.form-control:disabled,
.form-control[readonly] {
    border-color: var(--us-gris-claro);
    background-color: #f2f2f2;
}
.input-group-prepend > .input-group-text:only-child {
    width: 2.75rem; /* iconos de los formularios antiguos: todos del mismo ancho */
}
.input-group-text {
    min-width: 2.5rem;
    justify-content: center;
    border-color: #8f8f8f;
    background-color: #f4f4f4;
    color: #666;
}
.input-group > .input-group-prepend > .input-group-text {
    border-radius: .375rem 0 0 .375rem;
}
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
    border-radius: 0 .375rem .375rem 0;
}
.form-group {
    margin-bottom: 1.1rem;
}
.form-text,
small.text-muted {
    color: #666 !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--us-rojo);
    background-color: var(--us-rojo);
}

/* 6. Botones, insignias y avisos -----------------------------------------------------
 * Criterio: rojo = acción principal; blanco con borde = acciones secundarias; verde
 * oscuro = confirmar o exportar; rojo claro de Bootstrap = borrar. El cian y el verde
 * originales de Bootstrap con texto blanco no llegaban al contraste mínimo (3,0 y 3,1).
 */
.btn {
    border-radius: .375rem;
    font-weight: 600;
}
.btn-info,
.btn-default {
    border-color: var(--us-rojo);
    background-color: #fff;
    color: var(--us-rojo);
}
.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active,
.btn-default:hover,
.btn-default:focus {
    border-color: var(--us-rojo);
    background-color: var(--us-rojo);
    color: #fff;
}
.btn-outline-info {
    border-color: var(--us-rojo);
    color: var(--us-rojo);
}
.btn-outline-info:hover,
.btn-outline-info:focus {
    border-color: var(--us-rojo);
    background-color: var(--us-rojo);
    color: #fff;
}
.btn-success {
    border-color: #1e7e34;
    background-color: #1e7e34;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    border-color: #155724;
    background-color: #155724;
}
.btn-outline-success {
    border-color: #1e7e34;
    color: #1e7e34;
}
.btn-outline-success:hover {
    background-color: #1e7e34;
    color: #fff;
}
.badge {
    font-weight: 600;
}
.badge-success,
.bg-success {
    background-color: #1e7e34 !important;
}
.badge-info,
.bg-info {
    background-color: #047a72 !important; /* verde azulado US oscurecido para texto blanco */
}
.text-info {
    color: #047a72 !important;
}
.alert {
    border-radius: .5rem;
}
.alert-info {
    border-color: #b6dedb;
    background-color: #e8f5f4;
    color: #034f4a;
}

/* Campos de archivo de Bootstrap: el botón viene en inglés («Browse») desde el CSS. */
.custom-file-label::after {
    content: "Examinar";
}
/* Editor de texto (CKEditor 5): altura cómoda y foco en rojo US. */
.ck-editor__editable_inline {
    min-height: 12rem;
}
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
    border-color: var(--us-rojo) !important;
    box-shadow: 0 0 0 .2rem rgba(190, 15, 46, .2) !important;
}

/* Títulos de las páginas hechas con la estructura de AdminLTE (content-header con h1,
   subtítulo y botones): mismo aspecto que .page-heading. Si cuelgan directamente de la
   fila, ocupan todo el ancho con el margen de una columna. */
.content-wrapper .content-header {
    position: relative;
    width: calc(100% - 15px);
    flex: 0 0 calc(100% - 15px);
    margin: .5rem 7.5px .75rem;
    padding: .6rem 1rem .6rem 1.25rem !important;
    overflow: hidden;
    border: 1px solid var(--eip-borde);
    border-radius: .375rem;
    background: #fff;
}
.content-wrapper .content-header::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: .3rem;
    content: "";
    background: var(--us-rojo);
}
.content-wrapper .content-header .container-fluid {
    padding: 0;
}
.content-wrapper .content-header h1 {
    margin: 0;
    color: #212529;
    font-size: 1.3rem;
    line-height: 1.25;
}
.content-wrapper .content-header h1 i {
    color: var(--us-rojo);
    font-size: .9em;
}
.content-wrapper .content-header .text-muted {
    font-size: .875rem;
}
.content-wrapper > .row > section.content {
    width: 100%;
    flex: 0 0 100%;
}

/* Pantallas de acceso externo (recuperación y activación): tarjeta centrada con la marca US
   y el nombre del centro (pages/main/acceso_marca.php). */
.acceso-tarjeta {
    max-width: 620px;
}
.acceso-marca {
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--eip-borde);
    text-align: center;
}
.acceso-marca img {
    width: 180px;
    max-width: 60%;
    height: auto;
}
.acceso-marca p {
    margin: .4rem 0 0;
    color: var(--us-gris-oscuro);
    font-family: var(--us-fuente-titulos);
    font-weight: 600;
}