/*
    CheckBoar — Bootstrap 5 custom styles + tema rojo original
    Color principal: #d9230f  Border: #a91b0c  Links inactivos navbar: #fac0ba
*/

/* ── Mapeo Glyphicons → Bootstrap Icons (fileinput 4.x con BS5) ── */
.glyphicon { font-family:"bootstrap-icons" !important; font-style:normal; speak:none;
             -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.glyphicon-folder-open::before  { content:"\f3d8"; }
.glyphicon-trash::before        { content:"\f5dd"; }
.glyphicon-upload::before       { content:"\f603"; }
.glyphicon-ban-circle::before   { content:"\f6a3"; }
.glyphicon-zoom-in::before      { content:"\f62c"; }
.glyphicon-asterisk::before     { content:"\f151"; }
.glyphicon-ok-circle::before    { content:"\f26a"; }
.glyphicon-check::before        { content:"\f26a"; }
.glyphicon-hand-up::before      { content:"\f14e"; }
.glyphicon-hourglass::before    { content:"\f41f"; }

/* ═══════════════════════════════════════════
   PALETA DE COLORES ORIGINAL (Bootstrap 3 tema rojo)
   ═══════════════════════════════════════════ */
:root {
    --brand-red:        #d9230f;
    --brand-red-dark:   #a91b0c;
    --brand-red-darker: #621007;
    --brand-link:       #fac0ba;
}

/* ── Bootstrap 5 custom properties: links en rojo ── */
:root {
    --bs-link-color:       #d9230f;
    --bs-link-color-rgb:   217, 35, 15;
    --bs-link-hover-color: #a91b0c;

    /* Paginación activa en rojo */
    --bs-pagination-active-bg:           #d9230f;
    --bs-pagination-active-border-color: #a91b0c;
    --bs-pagination-color:               #d9230f;
    --bs-pagination-hover-color:         #a91b0c;
    --bs-pagination-focus-box-shadow:    0 0 0 0.25rem rgba(217,35,15,.25);
}
/* Reglas directas para links — sin subrayado (comportamiento Bootstrap 3) */
a         { color: #d9230f; text-decoration: none; }
a:hover   { color: #a91b0c; text-decoration: none; }

/* ── Body padding para navbar fixed-top ── */
body { padding-top: 40px; padding-bottom: 40px; }

/* ═══════════════════════════════════════════
   NAVBAR — color rojo original, compacta
   ═══════════════════════════════════════════ */
.navbar {
    background-color: #d9230f !important;
    border-color: #a91b0c;
    min-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
}
.navbar .container { min-height: 38px; align-items: stretch; }
.navbar-brand { padding-top: 8px; padding-bottom: 8px; font-size: 16px; line-height: 22px; }
.navbar-nav .nav-link { padding-top: 9px; padding-bottom: 9px; font-size: 13px; line-height: 20px; }
.navbar-toggler { padding: 2px 8px; font-size: 13px; }
.navbar .dropdown-menu { font-size: 13px; }

/* Marca */
.navbar-brand            { color: #fac0ba; }
.navbar-brand:hover,
.navbar-brand:focus      { color: #fff; background-color: transparent; }

/* Links de navegación */
.navbar-nav .nav-link             { color: #fac0ba; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus       { color: #fff; background-color: transparent; }

/* Item activo (el JS añade 'active' al <li class="nav-item">) */
.navbar .nav-item.active > .nav-link,
.navbar .nav-item.active > .nav-link:hover { color: #fff !important; font-weight: 600; }

/* Botón hamburguesa */
.navbar-toggler           { border-color: #a91b0c; }
.navbar-toggler:hover,
.navbar-toggler:focus     { background-color: #a91b0c; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown en navbar — fondo blanco, item activo en rojo del tema */
.navbar .dropdown-menu {
    background-color: #fff !important;
    border-color: rgba(0,0,0,.15) !important;
    min-width: 200px;
}
.navbar .dropdown-menu .dropdown-item               { color: #333; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus         { color: #262626; background-color: #f5f5f5; }
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu li.active > .dropdown-item   { color: #fff; font-weight: 600; background-color: #d9230f; }
.navbar .dropdown-menu .dropdown-item.active:hover,
.navbar .dropdown-menu li.active > .dropdown-item:hover { color: #fff; background-color: #a91b0c; }
.navbar .dropdown-divider                           { border-color: rgba(0,0,0,.1); }

/* ═══════════════════════════════════════════
   btn-primary en rojo
   ═══════════════════════════════════════════ */
.btn-primary {
    --bs-btn-color:              #fff;
    --bs-btn-bg:                 #d9230f;
    --bs-btn-border-color:       #d9230f;
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           #a91b0c;
    --bs-btn-hover-border-color: #a01a0b;
    --bs-btn-active-bg:          #a91b0c;
    --bs-btn-active-border-color:#a01a0b;
    --bs-btn-disabled-bg:        #d9230f;
    --bs-btn-disabled-border-color: #d9230f;
    background-color: #d9230f !important;
    border-color:     #d9230f !important;
    color:            #fff    !important;
}
.btn-primary:hover,
.btn-primary:focus  { background-color: #a91b0c !important; border-color: #a91b0c !important; }
.btn-primary:active { background-color: #871508 !important; border-color: #871508 !important; }

/* ═══════════════════════════════════════════
   Bootstrap 3 → 5 compat: form layout
   ═══════════════════════════════════════════ */
.form-group { margin-bottom: 1rem; }

/* form-horizontal: form-group actúa como .row */
.form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left:  calc(-0.5 * var(--bs-gutter-x));
    margin-bottom: 0.75rem;
}
.form-horizontal .form-group > label,
.form-horizontal .form-group > div {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left:  calc(var(--bs-gutter-x) * .5);
    box-sizing: border-box;
}

/* Labels en formularios horizontales */
.control-label { font-weight: bold; }
@media (min-width: 768px) {
    .control-label { text-align: right; padding-top: 7px; }
}

/* ── BS3 compat: form-control tamaño y borde ── */
input.form-control,
select.form-control {
    height: 34px;
}
input.form-control,
select.form-control,
textarea.form-control {
    font-size: 14px;
    padding: 6px 12px;
    border-color: #ccc;
    border-radius: 4px;
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    outline: 0;
}

/* ═══════════════════════════════════════════
   Bootstrap 3 → 5 compat: panels
   ═══════════════════════════════════════════ */
.panel {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.panel-default                  { border-color: #ddd; }
.panel-default > .panel-heading { color: #333; background-color: #eee; border-color: #ddd; }
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-radius: 3px 3px 0 0;
    background-color: #eee;
}
.panel-title { margin: 0; font-size: 16px; color: #444; }
.panel-body  { padding: 15px; }
.panel-group { margin-bottom: 20px; }
.panel-group .panel             { margin-bottom: 0; border-radius: 4px; }
.panel-group .panel + .panel   { margin-top: 5px; }

.acollap            { text-decoration: none; display: block; color: #444; }
.acollap:hover,
.acollap:focus      { text-decoration: none; color: #222; }

/* ═══════════════════════════════════════════
   Bootstrap 3 → 5 compat: misc
   ═══════════════════════════════════════════ */
.pull-right  { float: right !important; }
.pull-left   { float: left !important; }
.page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee; }

/* table-condensed */
.table-condensed > * > tr > th,
.table-condensed > * > tr > td { padding: 4px 5px !important; }

/* btn-group-xs */
.btn-group-xs > .btn { padding: .25rem .4rem; font-size: .75rem; border-radius: .2rem; }

/* ═══════════════════════════════════════════
   Bootstrap 3 → 5: fix .row aplicando width:100% a hijos directos
   BS5 usa .row > * { width:100% } — anula para botones y btn-group
   ═══════════════════════════════════════════ */

/* Botones puestos directamente dentro de un .row (sin columna wrapper) */
.row > .btn,
.row > button {
    width: auto !important;
    flex: 0 0 auto;
}

/* Patrón <div class="row btn-group"> del backup BS3:
   En BS3 los botones quedaban centrados (block container + text-align:center heredado de .starter-template).
   En BS5: usar flex con justify-content:center, ocupar 100% del row padre, botones a su ancho natural.
   Soporta botones directos o envueltos en <div class="col-md-* btn-group">. */
.row.btn-group {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap;
    width: 100% !important;
    flex-basis: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Botones directos dentro de row.btn-group: tamaño natural, no estirar */
.row.btn-group > .btn {
    flex: 0 0 auto !important;
    width: auto !important;
}
/* Wrapper <div class="col-* btn-group"> dentro de row.btn-group:
   anular ancho fijo del col-* y el padding, para que se vea como btn-group natural */
.row.btn-group > [class*="col-"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Botones dentro de col-*.btn-group dentro de row.btn-group: tamaño natural
   (anula el flex:1 1 auto de Bootstrap 5 que hace que un único botón llene todo el contenedor) */
.row.btn-group > [class*="col-"] > .btn {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Patrón <div class="col-md-X btn-group"> dentro de un form-group (no envuelto por row.btn-group):
   usado en infoequipo.php, editrevis.php, revisiones.php para los botones Crear/Editar/Eliminar
   de documentos anexos. En BS3 los botones tenían su ancho natural; en BS5 el flex:1 1 auto
   los estira para llenar el ancho del col-md-8. Restaurar comportamiento BS3. */
[class*="col-"].btn-group > .btn {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* ═══════════════════════════════════════════
   Bootstrap 3 → 5 compat: .well (eliminado en BS5)
   ═══════════════════════════════════════════ */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    overflow: hidden;
    /* Flex container para que .col-* hijos se comporten como en BS3 (floats) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.well-sm { padding: 9px; border-radius: 3px; }
.well-lg { padding: 27px; border-radius: 6px; }

/* Bootstrap 3 → 5 compat: .input-sm */
.input-sm,
.form-control.input-sm {
    height: calc(1.5em + .5rem + 2px) !important;
    padding: .25rem .5rem !important;
    font-size: .875rem !important;
    border-radius: .2rem !important;
}

/* ═══════════════════════════════════════════
   DataTables layout
   ═══════════════════════════════════════════ */
.derecha  { text-align: right; }
.izquierda { text-align: left; }
.options  { text-align: center; white-space: nowrap; }
.tabla_datos { margin-top: 15px; }

/* BS5 añade text-decoration:underline a todos los <a>; en tablas no se quiere subrayado */
.table td a,
.table td a:hover { text-decoration: none; }

/* Hover en filas de tabla: sombreado rojo suave */
.table tbody tr {
    transition: background .12s, box-shadow .12s;
}
.table tbody tr:hover td {
    background-color: #fde8e5 !important;
}

/* btn-secondary: gris oscuro (#474949) igual que btn-default del backup */
.btn-secondary {
    --bs-btn-color:              #fff;
    --bs-btn-bg:                 #474949;
    --bs-btn-border-color:       #474949;
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           #2e2f2f;
    --bs-btn-hover-border-color: #292a2a;
    --bs-btn-active-bg:          #2e2f2f;
    --bs-btn-active-border-color:#292a2a;
    --bs-btn-active-color:       #fff;
    --bs-btn-disabled-bg:        #474949;
    --bs-btn-disabled-border-color: #474949;
    color: #fff !important;
    background-color: #474949 !important;
    border-color: #474949 !important;
}
.btn-secondary:hover,
.btn-secondary:focus  { background-color: #2e2f2f !important; border-color: #292a2a !important; }
.btn-secondary:active { background-color: #1e1f1f !important; border-color: #111 !important; }

/* DataTables: botones de acción — tamaño compacto */
.dt-buttons .btn-secondary {
    font-size: 12px;
    padding: 5px 10px;
    line-height: 1.5;
    border-radius: 4px;
}

/* DataTables: alineación del contenedor de botones.
   div.dt-buttons es block-level; hereda text-align:center de .starter-template.
   Forzar left por defecto y right cuando el contenedor padre tiene .derecha.
   Añadimos justify-content por si DT/plugins ponen display:flex en algún momento. */
div.dt-buttons { text-align: left; }
.derecha,
.derecha > div.dt-buttons,
.derecha div.dt-buttons {
    text-align: right !important;
}
.derecha > div.dt-buttons,
.derecha div.dt-buttons {
    justify-content: flex-end;
}


/* DataTables: menú desplegable del botón Columnas (colvis) — estilo BS3 dropdown */
.dt-button-collection.dropdown-menu {
    --bs-dropdown-link-color:        #333;
    --bs-dropdown-link-hover-color:  #262626;
    --bs-dropdown-link-hover-bg:     #f5f5f5;
    --bs-dropdown-link-active-color: #333;
    --bs-dropdown-link-active-bg:    transparent;
    --bs-dropdown-item-padding-x:    20px;
    --bs-dropdown-item-padding-y:    3px;
    font-size: 13px;
    min-width: 160px;
    border-color: rgba(0,0,0,.15);
    border-radius: 4px;
}
/* Colvis items NO activos: fondo blanco, texto oscuro.
   Resetear el estilo btn-secondary (con !important) que aplica buttons.bootstrap5. */
.dt-button-collection .dt-button {
    background-color: #fff         !important;
    border-color:     transparent  !important;
    color:            #333         !important;
    font-weight:      400          !important;
    text-align:       left         !important;
    position:         relative;
    display:          block;
    width:            100%;
    padding:          3px 20px     !important;
}
.dt-button-collection .dt-button:hover {
    background-color: #f5f5f5      !important;
    color:            #262626      !important;
    border-color:     transparent  !important;
}
/* Columnas visibles (activas): fondo rojo del tema + texto blanco.
   El check lo añade buttons.bootstrap5.min.css via ::after. */
.dt-button-collection .dt-button.dt-button-active {
    background-color: #d9230f      !important;
    color:            #fff         !important;
    font-weight:      600          !important;
    padding-right:    3em          !important;
}
.dt-button-collection .dt-button.dt-button-active:hover {
    background-color: #a91b0c      !important;
    color:            #fff         !important;
}

/* DataTables: select "Mostrar" compacto (BS3 style).
   BS5 aplica .form-select que añade una flecha SVG como background-image en la derecha;
   el padding-right debe dejar espacio suficiente para que no pise el texto del número. */
.dataTables_length select {
    height: 28px;
    font-size: 13px;
    padding: 2px 18px 2px 8px;
    border-color: #ccc;
    border-radius: 4px;
    display: inline-block;
    width: auto;
    background-position: right 4px center;
    background-size: 10px 8px;
}

/* DataTables: paginación — Anterior/Siguiente con apariencia de botón */
.dataTables_paginate .paginate_button.page-item.disabled > .page-link {
    background-color: #fff;
    border-color: #ddd;
    color: #777 !important;
}
.dataTables_paginate .paginate_button.page-item > .page-link {
    border-color: #ddd;
    color: #d9230f !important;
}
.dataTables_paginate .paginate_button.page-item.active > .page-link {
    background-color: #d9230f !important;
    border-color: #a91b0c !important;
    color: #fff !important;
}
.dataTables_paginate .paginate_button.page-item > .page-link:hover {
    background-color: #eee;
    border-color: #ddd;
    color: #a91b0c !important;
}

/* ═══════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════ */
#footer                 { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; }
#footer .navbar         { background-color: #f5f5f5 !important; padding: 4px 0; border-top: 1px solid #ddd; }
#footer .text-muted     { font-size: 13px; margin: 0; }

/* ═══════════════════════════════════════════
   Botones de verificación (B/AV/AR/D/NP)
   ═══════════════════════════════════════════ */
/* Bootstrap 3 → 5 compat: .btn-default → mismos estilos que .btn-secondary */
.btn-default {
    --bs-btn-color:              #fff;
    --bs-btn-bg:                 #474949;
    --bs-btn-border-color:       #474949;
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           #2e2f2f;
    --bs-btn-hover-border-color: #292a2a;
    --bs-btn-active-bg:          #2e2f2f;
    --bs-btn-active-border-color:#292a2a;
    color: #fff !important; background-color: #474949 !important; border-color: #474949 !important;
}
.btn-default:hover  { background-color: #2e2f2f !important; border-color: #292a2a !important; }
.btn-default:active { background-color: #1e1f1f !important; border-color: #111 !important; }

.btnB.active,  .btnB:active  { background-color: #006600 !important; color: #fff !important; border-color: #004d00 !important; }
.btnAV.active, .btnAV:active { background-color: #b38600 !important; color: #fff !important; border-color: #8a6800 !important; }
.btnAR.active, .btnAR:active { background-color: #cc6600 !important; color: #fff !important; border-color: #994d00 !important; }
.btnD.active,  .btnD:active  { background-color: #b32400 !important; color: #fff !important; border-color: #801a00 !important; }
.btnNP.active, .btnNP:active { background-color: #555 !important;    color: #fff !important; border-color: #333 !important; }

/* BS3→BS5 compat: en BS3, <input type="radio"> dentro de <label class="btn"> era ocultado
   automáticamente por el CSS de Bootstrap. En BS5 esa regla desapareció (ahora usa .btn-check).
   Restablecer el ocultado para el patrón antiguo (inputs dentro del label, no btn-check externo). */
.btn-group .btn input[type="radio"],
.btn-group .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
    width: 0;
    height: 0;
    opacity: 0;
}

/* ═══════════════════════════════════════════
   Bootstrap-datetimepicker (Eonasdan): asegurar visibilidad y look compacto del widget.
   En BS5 .dropdown-menu tiene display:none por defecto. El plugin usa jQuery .show()/.hide()
   y elimina el widget del DOM al cerrar — cuando existe debe ser visible.
   El CSS original del plugin (BS3) usa celdas de 54px que aquí quedan enormes; las reducimos.
   ═══════════════════════════════════════════ */
.bootstrap-datetimepicker-widget.dropdown-menu {
    display: block !important;
    z-index: 1500;
    width: 18em;
    padding: 2px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    font-size: 14px;
}
.bootstrap-datetimepicker-widget table {
    margin: 0;
}
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td {
    text-align: center;
    border-radius: 3px;
    padding: 0;
    margin: 0;
}
.bootstrap-datetimepicker-widget table th {
    height: 26px;
    line-height: 26px;
    font-weight: 600;
    color: #444;
}
.bootstrap-datetimepicker-widget table th.picker-switch {
    width: auto;
}
.bootstrap-datetimepicker-widget table th.prev,
.bootstrap-datetimepicker-widget table th.next {
    cursor: pointer;
}
.bootstrap-datetimepicker-widget table th:hover {
    background: #fde8e5;
}
.bootstrap-datetimepicker-widget table td {
    height: 30px;
    line-height: 30px;
    width: 30px;
}
.bootstrap-datetimepicker-widget table td.day {
    height: 30px;
    line-height: 30px;
    width: 30px;
    cursor: pointer;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
    background: #fde8e5;
}
/* Months / years / decades: rejilla 3 columnas × 4 filas */
.bootstrap-datetimepicker-widget .datepicker-months td,
.bootstrap-datetimepicker-widget .datepicker-years td,
.bootstrap-datetimepicker-widget .datepicker-decades td {
    padding: 4px 0;
}
.bootstrap-datetimepicker-widget .datepicker-months td span,
.bootstrap-datetimepicker-widget .datepicker-years td span,
.bootstrap-datetimepicker-widget .datepicker-decades td span {
    display: inline-block;
    box-sizing: border-box;
    width: 31%;
    aspect-ratio: 1 / 1;
    line-height: 1;
    padding: 0;
    margin: 1%;
    cursor: pointer;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bootstrap-datetimepicker-widget table td span:hover {
    background: #fde8e5;
}
/* Activos en rojo del tema */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active,
.bootstrap-datetimepicker-widget table td span.active:hover {
    background-color: #d9230f !important;
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: #d9230f !important;
}
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
    background: none;
    color: #ccc;
    cursor: not-allowed;
}
.bootstrap-datetimepicker-widget .picker-switch td span {
    line-height: 1.8em;
    height: 1.8em;
    width: 100%;
    margin: 0;
}
.bootstrap-datetimepicker-widget a[data-action] {
    padding: 2px 0;
}
.bootstrap-datetimepicker-widget .list-unstyled {
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════
   Bootstrap-toggle (data-toggle="toggle"): colores exactos APTO/NO APTO
   El plugin añade .btn-success/.btn-danger al wrapper y a las labels .toggle-on/.toggle-off.
   Limitamos la regla al contexto del widget toggle para no afectar otros botones. */
.toggle.btn-success,
.toggle .btn-success,
.toggle-on.btn-success {
    background-color: #469408 !important;
    border-color: #469408 !important;
    color: #fff !important;
}
.toggle.btn-danger,
.toggle .btn-danger,
.toggle-off.btn-danger {
    background-color: #b32400 !important;
    border-color: #b32400 !important;
    color: #fff !important;
}