/* ============================================================
   SURF · Components layer
   Usa SOLO la paleta original del sistema:
   navy #192a48, blue #006DAA, beige #ebd0b2, orange #f87500,
   grises SUPINA existentes.
   NO se introducen colores nuevos.
   ============================================================ */

/* ---- Page box / cards -------------------------------------- */
.page-box {
    background-color: #fff !important;
    border-radius: var(--surf-radius-lg) !important;
    box-shadow: var(--surf-shadow-md);
    border: 1px solid rgba(25,42,72,.06);
    margin-top: 24px !important;
    /* overflow:hidden eliminado — cortaba dropdowns dentro de tablas.
       El border-radius se respeta vía background-clip en page-title. */
}

.page-box > .page-title:first-child {
    border-top-left-radius: var(--surf-radius-lg);
    border-top-right-radius: var(--surf-radius-lg);
}

.page-box h3.page-title {
    font-family: var(--surf-font-ui) !important;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.005em;
    color: var(--surf-ink);
    padding: 18px 24px;
    margin: 0 !important;
    background: #fff;
    border-bottom: 1px solid var(--surf-gray-200);
}

.content-box {
    background: #fff !important;
    padding: 24px !important;
}

.button-pane {
    padding: 14px 24px !important;
    border-top: 1px solid var(--surf-gray-200);
    background: var(--surf-gray-50);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.button-pane.button-pane-top {
    border-top: none;
    border-bottom: 1px solid var(--surf-gray-200);
}

/* ---- Buttons ----------------------------------------------- */
.btn {
    font-family: var(--surf-font-ui);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .01em;
    line-height: 1.4;
    border-radius: var(--surf-radius-sm);
    padding: 8px 16px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition:
        transform var(--surf-dur) var(--surf-ease),
        box-shadow var(--surf-dur) var(--surf-ease),
        background-color var(--surf-dur) var(--surf-ease),
        border-color var(--surf-dur) var(--surf-ease),
        filter var(--surf-dur) var(--surf-ease);
    text-shadow: none;
    box-shadow: var(--surf-shadow-sm);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: none;
    box-shadow: var(--surf-shadow-ring), var(--surf-shadow-sm);
}

.btn:disabled, .btn.disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
}

/* .btn-primary hereda el #006DAA de _Layout.cshtml (no tocamos color) */
.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: var(--surf-shadow-md);
    filter: brightness(1.08);
}

.btn-primary:active,
.btn-primary.active {
    transform: translateY(0);
    box-shadow: var(--surf-shadow-sm);
    filter: brightness(.92);
}

.btn-default {
    background: #fff;
    border-color: var(--surf-gray-200);
    color: var(--surf-gray-700);
}

.btn-default:hover,
.btn-default:focus {
    background: var(--surf-gray-50);
    border-color: var(--surf-gray-400);
    color: var(--surf-ink);
    transform: translateY(-1px);
    box-shadow: var(--surf-shadow-md);
}

.btn-default.danger:hover,
.btn-default.danger:focus {
    transform: translateY(-1px);
    filter: brightness(.95);
    box-shadow: var(--surf-shadow-md);
}

.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: var(--surf-shadow-md);
}

.btn-group-xs > .btn,
.btn-xs {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 14px;
    letter-spacing: .03em;
    font-weight: 600;
}

.btn-block {
    display: flex;
}

.btn-block + .btn-block {
    margin-top: 10px;
}

.btn-group {
    box-shadow: var(--surf-shadow-sm);
    border-radius: var(--surf-radius-sm);
}

.btn-group > .btn {
    box-shadow: none;
    border-radius: 0;
}

.btn-group > .btn:first-child { border-top-left-radius: var(--surf-radius-sm); border-bottom-left-radius: var(--surf-radius-sm); }
.btn-group > .btn:last-child  { border-top-right-radius: var(--surf-radius-sm); border-bottom-right-radius: var(--surf-radius-sm); }

/* Iconos dentro de botones — centrado robusto + color heredado */
.btn > .glyph-icon,
.btn > .fa,
.btn > i {
    font-size: 13px;
    line-height: 1;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit !important;
}

/* mrg5R en iconos dentro de botones: respetar separación icon→texto */
.btn > .glyph-icon.mrg5R,
.btn > .fa.mrg5R,
.btn > i.mrg5R {
    margin-right: 6px !important;
}

/* Iconos dentro de botones COLOREADOS deben ser BLANCOS sí o sí.
   Cubre el caso del botón Calificar y similares donde el icon-pencil
   se veía azul oscuro sobre fondo azul. */
.btn-primary > .glyph-icon,
.btn-primary > .fa,
.btn-primary > i,
.btn-primary > .glyph-icon::before,
.btn-success > .glyph-icon,
.btn-success > .fa,
.btn-success > i,
.btn-danger > .glyph-icon,
.btn-danger > .fa,
.btn-danger > i,
.btn-warning > .glyph-icon,
.btn-warning > .fa,
.btn-warning > i,
.btn-info > .glyph-icon,
.btn-info > .fa,
.btn-info > i,
.bg-facebook > .glyph-icon,
.bg-facebook > .fa,
.bg-facebook > i,
.btn-accent > .glyph-icon,
.btn-accent > .fa,
.btn-accent > i {
    color: #fff !important;
}

/* Botones coloreados: forzar el text color a blanco */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-success,
.btn-success:link,
.btn-success:visited,
.btn-danger,
.btn-danger:link,
.btn-danger:visited,
.btn-warning,
.btn-warning:link,
.btn-warning:visited,
.btn-info,
.btn-info:link,
.btn-info:visited,
.bg-facebook,
.bg-facebook:link,
.bg-facebook:visited,
.btn-accent,
.btn-accent:link,
.btn-accent:visited {
    color: #fff !important;
}

.btn-xs > .glyph-icon,
.btn-xs > .fa,
.btn-xs > i { font-size: 12px !important; }

.btn-lg > .glyph-icon,
.btn-lg > .fa,
.btn-lg > i { font-size: 15px !important; }

/* Botón cuadrado solo-icono: opt-in con .btn-icon */
.btn.btn-icon,
.btn-icon-only {
    padding: 0 !important;
    min-width: 32px;
    height: 32px;
    line-height: 1;
}

/* Columna ACCIONES: contenido SIEMPRE en una sola línea horizontal.
   La columna se ensancha para acomodar todos los botones. */
.table > tbody > tr > td:first-child,
.table .actions-cell,
.table td.sorting_1 {
    white-space: nowrap !important;
    min-width: max-content;
    width: 1%;
}

.table > thead > tr > th:first-child {
    white-space: nowrap !important;
    width: 1%;
    min-width: max-content;
}

/* Botones de acción dentro de tablas (Editar/Eliminar de DataTables).
   Cada btn-group queda inline-flex y no se rompe a 2da línea. */
.table td .btn-group,
.table td .btn-group-xs {
    display: inline-flex !important;
    vertical-align: middle;
    margin: 0;
}

.table .btn-group-xs > .btn,
.table .btn-group-xs > .btn.tooltip-button,
.table td .btn.tooltip-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    padding: 0 !important;
    gap: 0;
    font-size: 0;
    border-radius: var(--surf-radius-sm);
    background: #fff !important;
    border: 1px solid var(--surf-gray-200) !important;
    color: var(--surf-gray-700) !important;
    box-shadow: var(--surf-shadow-sm);
    transition: all var(--surf-dur) var(--surf-ease);
    flex: none;
}

.table .btn-group-xs > .btn:hover,
.table td .btn.tooltip-button:hover {
    background: var(--surf-gray-50) !important;
    border-color: var(--surf-blue) !important;
    color: var(--surf-blue) !important;
    transform: translateY(-1px);
    box-shadow: var(--surf-shadow-md);
}

/* Variante danger: borde rojo y color rojo en hover */
.table .btn-group-xs > .btn.danger,
.table td .btn.danger.tooltip-button {
    border-color: var(--surf-gray-200) !important;
    color: #a94442 !important;
    background: #fff !important;
}

.table .btn-group-xs > .btn.danger:hover,
.table td .btn.danger.tooltip-button:hover {
    background: #a94442 !important;
    border-color: #a94442 !important;
    color: #fff !important;
}

/* Icono dentro del botón de acción: tamaño correcto, sin padding inline */
.table .btn-group-xs > .btn > .glyph-icon,
.table .btn-group-xs > .btn > .fa,
.table .btn-group-xs > .btn > i,
.table td .btn.tooltip-button > .glyph-icon,
.table td .btn.tooltip-button > .fa,
.table td .btn.tooltip-button > i {
    font-size: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Margen entre botones de acción consecutivos (mrg5R sin solapamiento) */
.table .btn-group-xs + .btn-group-xs,
.table td .mrg5R {
    margin-left: 6px !important;
}

/* Botones de acción en vistas EnCurso / RevisarEnCurso — el render JS
   emite `<a class="btn btn-sm btn-primary tooltip-button">` SIN wrapper
   btn-group, así que las reglas `.btn-group-xs > .btn` de arriba no
   aplican. Sin dimensiones mínimas el botón colapsa al tamaño del
   <i> vacío y aparece como un cuadradito diminuto. */
.table td > a.btn.tooltip-button,
.table td > a.btn.btn-sm.tooltip-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 32px !important;
    min-width: 36px;
    padding: 0 !important;
    margin-right: 4px;
    vertical-align: middle;
    /* IMPORTANTE: NO usar font-size: 0 acá. El ::before del glyph-icon
       hereda el tamaño del botón; con 0 el glifo renderiza a 0px aunque
       tenga font-family FontAwesome aplicada. Si hay que ocultar texto
       sibling, hacerlo con otra técnica (ej. text-indent). */
    font-size: 14px;
}

.table td > a.btn.tooltip-button > .glyph-icon,
.table td > a.btn.tooltip-button > i,
.table td > a.btn.btn-sm.tooltip-button > .glyph-icon,
.table td > a.btn.btn-sm.tooltip-button > i {
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Defensa final: el ::before del glyph-icon/icon-X SIEMPRE con font-size
   heredado-o-14px. Si algún contenedor con font-size:0 (ej: .btn-group-xs
   línea 310 o el inline-flex con gap:0) se cuela, acá lo compensamos. */
.glyph-icon::before,
i[class*="icon-"]::before {
    font-size: inherit;
}

.table td .glyph-icon::before,
.table td i[class*="icon-"]::before,
.btn > .glyph-icon::before,
.btn > i[class*="icon-"]::before {
    font-size: 14px !important;
}

/* Neutraliza style="padding:Xpx" inline en iconos dentro de botones
   (descentraban el icono) */
.btn .glyph-icon[style*="padding"],
.btn .fa[style*="padding"],
.btn i[style*="padding"] {
    padding: 0 !important;
}

/* Tamaños de iconos dentro de botones — no agrandar más que el btn */
.btn .glyph-icon.font-size-20,
.btn .glyph-icon.font-size-24 {
    font-size: 15px !important;
}

/* ---- Forms ------------------------------------------------- */
.form-control {
    height: 40px;
    padding: 8px 12px;
    font-family: var(--surf-font-ui);
    font-size: 14px;
    color: var(--surf-ink);
    background: #fff;
    border: 1px solid var(--surf-gray-200);
    border-radius: var(--surf-radius-sm);
    box-shadow: none;
    transition:
        border-color var(--surf-dur) var(--surf-ease),
        box-shadow var(--surf-dur) var(--surf-ease);
}

.form-control:hover {
    border-color: var(--surf-gray-400);
}

.form-control:focus {
    border-color: var(--surf-blue);
    background: #fff;
    box-shadow: var(--surf-shadow-ring);
    outline: none;
}

textarea.form-control {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    line-height: 1.5;
}

/* Select global — cubre tanto .form-control como selects sueltos
   (DataTables usa <select> sin clase form-control en dataTables_length).
   Flecha hecha con SVG inline (un solo path, sin línea blanca al medio). */
select.form-control,
div.dataTables_length select,
div.dataTables_filter select,
.button-pane select,
.content-box select:not([multiple]) {
    padding: 6px 36px 6px 12px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%237e7e7e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-position: right 12px center;
    background-size: 12px 8px;
    background-repeat: no-repeat;
    border: 1px solid var(--surf-gray-200);
    border-radius: var(--surf-radius-sm);
    color: var(--surf-ink);
    font-family: var(--surf-font-ui);
    font-size: 13px;
    font-weight: 500;
    height: 36px;
    line-height: 1.4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

select.form-control:focus,
div.dataTables_length select:focus,
div.dataTables_filter select:focus {
    border-color: var(--surf-blue);
    box-shadow: var(--surf-shadow-ring);
    outline: none;
}

/* Las options dentro del dropdown nativo. NO forzamos color en :checked
   porque algunos navegadores lo replican en el display del select cerrado
   y dejan el texto seleccionado invisible. */
select option {
    color: var(--surf-ink) !important;
    background: #fff !important;
    font-family: var(--surf-font-ui);
    padding: 6px 12px;
}

.control-label {
    font-family: var(--surf-font-ui);
    font-weight: 600;
    color: var(--surf-gray-700);
    font-size: 12px;
    letter-spacing: .04em;
}

.form-group {
    margin-bottom: 18px;
}

.form-horizontal .control-label {
    padding-top: 11px;
}

.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(169,68,66,.12);
}

.help-block {
    color: var(--surf-gray-500);
    font-size: 12px;
    margin-top: 6px;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--surf-blue);
}

/* ---- Tables ------------------------------------------------ */
.table {
    background: #fff;
    font-family: var(--surf-font-ui);
}

.table.table-striped,
.table.table-bordered,
.table.table-striped.table-bordered {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0;
}

.table > thead > tr > th {
    background: var(--surf-gray-50) !important;
    color: var(--surf-gray-700) !important;
    font-family: var(--surf-font-ui);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: none !important;
    border-bottom: 1px solid var(--surf-gray-200) !important;
    padding: 14px 32px 14px 18px !important;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* DataTables sorting arrows: SIEMPRE inline en el th, jamás a 2da línea */
.table > thead > tr > th.sorting,
.table > thead > tr > th.sorting_asc,
.table > thead > tr > th.sorting_desc,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 28px !important;
    background-image: none;
}

.table > thead > tr > th.sorting::after,
.table > thead > tr > th.sorting_asc::after,
.table > thead > tr > th.sorting_desc::after,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    border-style: solid;
    border-color: var(--surf-gray-500);
    border-width: 0 1.5px 1.5px 0;
    pointer-events: none;
    opacity: .6;
    transition: opacity var(--surf-dur) var(--surf-ease), transform var(--surf-dur) var(--surf-ease);
}

.table > thead > tr > th.sorting::after,
table.dataTable thead .sorting::after {
    transform: translateY(-65%) rotate(45deg);
    opacity: .35;
}

.table > thead > tr > th.sorting_asc::after,
table.dataTable thead .sorting_asc::after {
    transform: translateY(-30%) rotate(-135deg);
    border-color: var(--surf-blue);
    opacity: 1;
}

.table > thead > tr > th.sorting_desc::after,
table.dataTable thead .sorting_desc::after {
    transform: translateY(-65%) rotate(45deg);
    border-color: var(--surf-blue);
    opacity: 1;
}

/* Si el SUPINA datatable.css inserta un .glyph-icon dentro del th, ocultarlo
   en favor del pseudo-elemento (evita doble flecha y wrap) */
.table > thead > tr > th > .glyph-icon,
table.dataTable thead th > .glyph-icon {
    display: none !important;
}

.table > tbody > tr > td {
    padding: 14px 18px !important;
    border-top: 1px solid var(--surf-gray-100) !important;
    border-bottom: none !important;
    vertical-align: middle;
    color: var(--surf-ink);
    font-size: 13.5px;
    white-space: nowrap;
    transition: background-color var(--surf-dur) var(--surf-ease);
}

/* Permitir wrap explícito con .wrap-cell en celdas que lo necesiten
   (ej. notas largas, descripciones). */
.table > tbody > tr > td.wrap-cell,
.table > tbody > tr > td.u-wrap {
    white-space: normal;
    word-break: break-word;
}

.table > tbody > tr:first-child > td {
    border-top: none !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--surf-gray-50) !important;
}

.table.table-striped > tbody > tr:hover,
.table > tbody > tr:hover {
    background-color: var(--surf-gray-100) !important;
}

.table > tbody > tr > td .btn-group-xs,
.table > tbody > tr > td .btn-xs {
    vertical-align: middle;
}

.table > tbody > tr > td a:not(.btn) {
    color: var(--surf-blue);
    font-weight: 500;
}

.table > tbody > tr > td a:not(.btn):hover {
    color: var(--surf-navy);
    text-decoration: underline;
}

/* table-responsive: scroll horizontal SIEMPRE para que tablas anchas no
   desborden el card. overflow-x:auto fuerza overflow-y a auto en CSS;
   la solución para no cortar dropdowns es darles position:fixed o usar
   un wrapper interior. Aquí elegimos: scroll horizontal real + permitir
   que dropdowns se posicionen relative al body via .dropdown-menu fixed
   variant cuando esté dentro de table. */
.table-responsive {
    border: none !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    border-radius: var(--surf-radius-md);
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-track { background: var(--surf-gray-50); }
.table-responsive::-webkit-scrollbar-thumb { background: var(--surf-gray-400); border-radius: 999px; }

/* La tabla nunca debe ser más angosta que su contenedor */
.table-responsive > .table {
    min-width: 100%;
    width: auto;
    margin-bottom: 0;
}

/* ---- DataTables wrapper (length / filter / info / paginate) ---- */
div.dataTables_wrapper {
    font-family: var(--surf-font-ui);
    font-size: 13px;
    color: var(--surf-ink);
    overflow: visible;
}

div.dataTables_length,
div.dataTables_filter,
div.dataTables_info,
div.dataTables_paginate {
    font-family: var(--surf-font-ui) !important;
    color: var(--surf-gray-700);
    font-size: 13px;
    margin-bottom: 12px;
}

div.dataTables_length label,
div.dataTables_filter label {
    font-family: var(--surf-font-ui) !important;
    font-weight: 500;
    color: var(--surf-gray-700);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

div.dataTables_length select {
    width: auto !important;
    min-width: 70px;
    margin: 0 !important;
    float: none !important;
}

div.dataTables_filter input {
    width: 220px !important;
    height: 36px;
    margin-left: 8px !important;
    padding: 6px 12px;
    border: 1px solid var(--surf-gray-200);
    border-radius: var(--surf-radius-sm);
    background: #fff;
    color: var(--surf-ink);
    font-family: var(--surf-font-ui);
    font-size: 13px;
    transition: border-color var(--surf-dur) var(--surf-ease), box-shadow var(--surf-dur) var(--surf-ease);
}

div.dataTables_filter input:focus {
    border-color: var(--surf-blue);
    box-shadow: var(--surf-shadow-ring);
    outline: none;
}

div.dataTables_info {
    padding-top: 12px;
    color: var(--surf-gray-500);
    font-size: 12px;
}

div.dataTables_paginate ul.pagination {
    margin: 0;
}

div.dataTables_paginate ul.pagination > li > a,
div.dataTables_paginate ul.pagination > li > span {
    padding: 6px 12px;
    font-family: var(--surf-font-ui);
    font-weight: 500;
    color: var(--surf-gray-700);
    border-color: var(--surf-gray-200);
    background: #fff;
    transition: background-color var(--surf-dur) var(--surf-ease), color var(--surf-dur) var(--surf-ease);
}

div.dataTables_paginate ul.pagination > li > a:hover {
    background: var(--surf-gray-50);
    color: var(--surf-ink);
}

div.dataTables_paginate ul.pagination > li.active > a,
div.dataTables_paginate ul.pagination > li.active > span,
div.dataTables_paginate ul.pagination > li.active > a:hover {
    background: var(--surf-blue) !important;
    border-color: var(--surf-blue) !important;
    color: #fff !important;
}

div.dataTables_paginate ul.pagination > li.disabled > a {
    color: var(--surf-gray-400);
    cursor: not-allowed;
}

/* ---- Modals ------------------------------------------------ */
.modal-content {
    border-radius: var(--surf-radius-lg);
    border: none;
    box-shadow: var(--surf-shadow-lg);
    overflow: hidden;
    background: #fff;
}

.modal-header {
    background: #192a48;
    color: #fff;
    padding: 16px 22px;
    border: none;
}

.modal-header .modal-title {
    font-family: var(--surf-font-ui) !important;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.005em;
    color: #fff;
}

.modal-header .close {
    color: #fff !important;
    opacity: .8;
    text-shadow: none !important;
    font-size: 0 !important;  /* oculta el text node "×" si existe */
    font-weight: 300;
    line-height: 1;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--surf-radius-sm);
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--surf-dur) var(--surf-ease), opacity var(--surf-dur) var(--surf-ease);
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    float: none !important;
}

/* X dibujada como pseudo-elemento — funciona aun si el botón está vacío */
.modal-header .close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-header .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-header .close:hover,
.modal-header .close:focus {
    opacity: 1;
    background: rgba(255,255,255,.18) !important;
    outline: none;
}

.modal-header .close:active {
    background: rgba(255,255,255,.28) !important;
}

/* Asegurar que el header tenga padding-right reservado para la X */
.modal-header {
    padding-right: 56px !important;
    position: relative;
}

.modal-body {
    padding: 22px;
    background: #fff;
}

.modal-footer {
    background: var(--surf-gray-50);
    border-top: 1px solid var(--surf-gray-200);
    padding: 14px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.modal-footer .btn + .btn {
    margin-left: 0;
}

.modal-backdrop.in {
    opacity: .55;
    background: #192a48;
}

.modal.fade .modal-dialog {
    transform: translateY(-12px) scale(.98);
    transition: transform var(--surf-dur-lg) var(--surf-ease), opacity var(--surf-dur-lg) var(--surf-ease);
}

.modal.in .modal-dialog {
    transform: translateY(0) scale(1);
}

/* ---- Sidebar (navy #192a48 definido en _Layout inline) ----- */
#page-sidebar ul,
#page-sidebar ol {
    list-style: none;
    padding-left: 0;
}

#page-sidebar li a {
    font-family: var(--surf-font-ui);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .01em;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition:
        background-color var(--surf-dur) var(--surf-ease),
        color var(--surf-dur) var(--surf-ease),
        padding-left var(--surf-dur) var(--surf-ease);
    border-left: 3px solid transparent;
    position: relative;
}

#page-sidebar li a > .glyph-icon,
#page-sidebar li a > .fa,
#page-sidebar li a > i {
    font-size: 15px;
    width: 18px;
    text-align: center;
    opacity: .85;
    flex-shrink: 0;
}

#page-sidebar li a > span {
    flex: 1;
    min-width: 0;
}

#page-sidebar li a:hover,
#page-sidebar li a:focus {
    background: rgba(255,255,255,.06) !important;
    padding-left: 21px;
}

#page-sidebar li a:hover > .glyph-icon,
#page-sidebar li a:hover > .fa,
#page-sidebar li a:hover > i {
    opacity: 1;
}

#page-sidebar li.active > a,
#page-sidebar li.active > a:hover,
#page-sidebar li.active > a:focus {
    border-left-color: #f87500;
}

#page-sidebar li.active > a > .glyph-icon,
#page-sidebar li.active > a > .fa,
#page-sidebar li.active > a > i {
    opacity: 1;
}

/* Submenús */
#page-sidebar li > ul {
    background: rgba(0,0,0,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.2);
}

#page-sidebar li > ul li a {
    font-size: 12.5px;
    font-weight: 400;
    padding: 9px 18px 9px 46px;
    color: rgba(255,255,255,.72) !important;
}

#page-sidebar li > ul li a:hover {
    color: #fff !important;
    padding-left: 49px;
}

#page-sidebar li > ul li.active a {
    color: #fff !important;
    background: rgba(0,109,170,.18) !important;
    border-left-color: transparent;
}

/* Badges dentro del sidebar */
#page-sidebar li a .bs-label,
#page-sidebar li a .label,
#page-sidebar li a .badge {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 7px;
}

#page-sidebar .sidebar-title {
    color: rgba(255,255,255,.5) !important;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 18px 18px 8px;
}

/* Toggle collapse button */
#collapse-sidebar {
    opacity: .6;
    transition: opacity var(--surf-dur) var(--surf-ease);
}

#collapse-sidebar:hover {
    opacity: 1;
}

/* ---- Header & logo ---------------------------------------- */
#page-header {
    background: #fff !important;
    border-bottom: 1px solid var(--surf-gray-200);
    box-shadow: 0 1px 0 rgba(25,42,72,.02), 0 4px 14px -10px rgba(25,42,72,.15);
}

#header-logo {
    letter-spacing: .14em;
    font-family: var(--surf-font-ui) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: uppercase;
}

#header-logo span {
    font-family: var(--surf-font-ui) !important;
    font-weight: 700;
    letter-spacing: .14em;
}

#header-logo a,
#header-logo a:hover {
    color: #fff !important;
}

#sidebar-search {
    border-right: 1px solid var(--surf-gray-200);
}

#header-right {
    display: flex;
    align-items: center;
    height: 100%;
    padding-right: 8px;
}

/* ---- User profile dropdown (header derecho) -------------- */
.user-profile {
    position: relative;
    height: 100%;
}

.user-profile > a.user-ico {
    font-family: var(--surf-font-ui);
    font-weight: 500;
    color: var(--surf-ink) !important;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px solid var(--surf-gray-200);
    transition: background-color var(--surf-dur) var(--surf-ease);
    text-decoration: none;
}

.user-profile > a.user-ico:hover,
.user-profile.open > a.user-ico {
    background: var(--surf-gray-50);
}

.user-profile > a.user-ico .glyph-icon.icon-user {
    font-size: 16px !important;
    padding: 7px !important;
    background: #192a48;
    color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-profile > a.user-ico .glyph-icon.icon-chevron-down {
    font-size: 11px !important;
    color: var(--surf-gray-500);
    transition: transform var(--surf-dur) var(--surf-ease);
}

.user-profile.open > a.user-ico .glyph-icon.icon-chevron-down {
    transform: rotate(180deg);
}

.user-profile .dropdown-menu {
    min-width: 240px;
    padding: 8px;
    margin-top: 6px;
    border: 1px solid var(--surf-gray-200);
    border-radius: var(--surf-radius-md);
    box-shadow: var(--surf-shadow-lg);
    right: 0;
    left: auto;
}

.user-profile .dropdown-menu .box-sm {
    padding: 0;
}

.user-profile .dropdown-menu .nav.navbar-nav {
    margin: 0;
    float: none !important;
    width: 100%;
    display: block;
}

.user-profile .dropdown-menu .nav.navbar-nav > li {
    display: block;
    float: none;
    width: 100%;
}

.user-profile .dropdown-menu .nav.navbar-nav > li > a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-family: var(--surf-font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--surf-ink);
    border-radius: var(--surf-radius-sm);
    transition: background-color var(--surf-dur) var(--surf-ease);
}

.user-profile .dropdown-menu .nav.navbar-nav > li > a:hover,
.user-profile .dropdown-menu .nav.navbar-nav > li > a:focus {
    background: var(--surf-gray-50);
    color: var(--surf-navy);
}

.user-profile .dropdown-menu .nav.navbar-nav > li:first-child > a {
    color: var(--surf-ink);
    border-bottom: 1px solid var(--surf-gray-100);
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-radius: 0;
}

.user-profile .dropdown-menu .nav.navbar-nav > li:last-child > a {
    color: #a94442;
}

.user-profile .dropdown-menu .nav.navbar-nav > li:last-child > a:hover {
    background: rgba(169,68,66,.08);
}

/* ---- Badges / labels (respetan colores de SUPINA) ---------- */
.bs-label,
.label {
    font-family: var(--surf-font-ui);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: var(--surf-radius-pill);
    display: inline-block;
    line-height: 1.4;
}

.badge {
    font-family: var(--surf-font-ui);
    font-weight: 600;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--surf-radius-pill);
}

/* ---- Alerts (solo forma, colores los hereda de Bootstrap) -- */
.alert {
    border-radius: var(--surf-radius-md);
    padding: 14px 18px;
    font-size: 14px;
}

/* ---- Tooltips ---------------------------------------------- */
.tooltip-inner {
    background: #192a48;
    color: #fff;
    font-family: var(--surf-font-ui);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--surf-radius-sm);
    box-shadow: var(--surf-shadow-md);
}

.tooltip.top .tooltip-arrow    { border-top-color: #192a48; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #192a48; }
.tooltip.left .tooltip-arrow   { border-left-color: #192a48; }
.tooltip.right .tooltip-arrow  { border-right-color: #192a48; }

/* ---- Dropdown menu ---------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--surf-gray-200);
    border-radius: var(--surf-radius-md);
    box-shadow: var(--surf-shadow-lg);
    padding: 6px;
    font-family: var(--surf-font-ui);
    z-index: 1050;
    min-width: 180px;
}

/* Dropdown teleportado al <body> por team-custom.js "Dropdown escape"
   para escapar del overflow de .table-responsive. Position:fixed. */
.dropdown-menu.surf-escaped-dropdown {
    display: block !important;
    z-index: 2000 !important;
}

/* .table-allow-dropdown: para tablas que tienen dropdowns y necesitan
   que el menu desborde visible. Elimina el clipping del .table-responsive.
   Costo: si la tabla es más ancha que el card, scrollea la página entera
   en vez del card — aceptable para tablas de pocas columnas. */
.table-responsive.table-allow-dropdown {
    overflow: visible !important;
}

.table-responsive.table-allow-dropdown > .table {
    width: 100%;
    min-width: 0;
}

/* Dropdowns dentro de tablas — asegurar que floten por encima */
.table .dropdown-menu,
.table-responsive .dropdown-menu,
table .dropdown-menu {
    z-index: 1060;
    position: absolute;
}

/* Dentro de una tabla, el .btn-group.open debe crear stacking context
   por encima de las filas siguientes para que el dropdown las tape. */
.table .btn-group.open,
.table-responsive .btn-group.open,
table .btn-group.open {
    position: relative;
    z-index: 1060;
}

.table-responsive.table-allow-dropdown .btn-group.open {
    z-index: 1060;
}

/* btn-group abierto: el contenedor debe permitir overflow visible */
.btn-group.open,
.btn-group.open > .dropdown-toggle {
    overflow: visible !important;
}

.dropdown-menu > li > a {
    padding: 8px 12px;
    border-radius: var(--surf-radius-sm);
    color: var(--surf-ink);
    font-size: 13px;
    font-weight: 500;
    transition: background-color var(--surf-dur) var(--surf-ease);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--surf-gray-50);
    color: var(--surf-ink);
}

.dropdown-menu .divider {
    background: var(--surf-gray-200);
    margin: 6px 0;
}

/* ---- Pagination (hereda #006DAA del override en Layout) ----- */
.pagination > li > a,
.pagination > li > span {
    color: var(--surf-gray-700);
    border-color: var(--surf-gray-200);
    font-weight: 500;
}

/* ---- Datepicker (jQuery UI) -------------------------------- */
.ui-datepicker {
    border: 1px solid var(--surf-gray-200) !important;
    border-radius: var(--surf-radius-md) !important;
    box-shadow: var(--surf-shadow-lg) !important;
    font-family: var(--surf-font-ui) !important;
    background: #fff;
    padding: 12px !important;
    min-width: 280px !important;
}

/* Header del datepicker — RESPETAR el position:relative de jQuery UI.
   El header es relative; prev/next son absolute a izquierda/derecha;
   title queda al medio con padding lateral para no chocarlos. */
.ui-datepicker .ui-datepicker-header {
    background: var(--surf-gray-50) !important;
    color: var(--surf-ink) !important;
    border: 1px solid var(--surf-gray-200) !important;
    border-radius: var(--surf-radius-sm) !important;
    padding: 8px 48px !important;
    margin: 0 0 8px 0 !important;
    position: relative !important;
    display: block !important;
    min-height: 46px;
    box-sizing: border-box;
}

/* Title centrado, contiene los dos selects */
.ui-datepicker .ui-datepicker-title {
    color: var(--surf-ink);
    font-weight: 600;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    min-width: 0;
    line-height: 1;
    height: 30px;
}

/* Selects de mes/año — anchos predecibles, sin flex-grow */
.ui-datepicker .ui-datepicker-title select {
    height: 30px !important;
    padding: 2px 24px 2px 8px !important;
    font-size: 12px;
    font-weight: 500;
    color: var(--surf-ink) !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%237e7e7e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-position: right 6px center !important;
    background-size: 10px 6px !important;
    background-repeat: no-repeat !important;
    border: 1px solid var(--surf-gray-200) !important;
    border-radius: var(--surf-radius-sm) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    margin: 0 !important;
    flex: 0 0 auto !important;
    min-width: 0;
    width: auto !important;
    max-width: none;
    line-height: 1.2;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-month {
    flex: 1 1 0 !important;
    min-width: 80px;
    max-width: 110px;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
    flex: 0 0 auto !important;
    min-width: 64px;
    max-width: 80px;
}

.ui-datepicker .ui-datepicker-title select:focus {
    border-color: var(--surf-blue) !important;
    box-shadow: var(--surf-shadow-ring) !important;
    outline: none;
}

/* Botones prev/next — position:absolute como los pone jQuery UI,
   pero con valores propios para que queden bien alineados verticalmente
   con el title. */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute !important;
    top: 8px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    background: var(--surf-blue) !important;
    color: #fff !important;
    border: 1px solid var(--surf-blue) !important;
    border-radius: var(--surf-radius-sm) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color var(--surf-dur) var(--surf-ease);
    padding: 0 !important;
    box-sizing: border-box;
}

.ui-datepicker .ui-datepicker-prev { left: 8px !important; right: auto !important; }
.ui-datepicker .ui-datepicker-next { right: 8px !important; left: auto !important; }

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    background: var(--surf-navy) !important;
    border-color: var(--surf-navy) !important;
    top: 8px !important;
}

.ui-datepicker .ui-datepicker-prev-hover { left: 8px !important; right: auto !important; }
.ui-datepicker .ui-datepicker-next-hover { right: 8px !important; left: auto !important; }

/* Las flechas internas (span con texto/icono) */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    position: static !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
    color: #fff !important;
    background: none !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

.ui-datepicker .ui-datepicker-prev span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: #fff;
    border-width: 0 0 1.5px 1.5px;
    transform: rotate(45deg);
    margin-left: 3px;
}

.ui-datepicker .ui-datepicker-next span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: #fff;
    border-width: 1.5px 1.5px 0 0;
    transform: rotate(45deg);
    margin-right: 3px;
}

/* Tabla de días */
.ui-datepicker table {
    width: 100%;
    margin: 0;
    font-size: 13px;
    border-collapse: separate;
    border-spacing: 2px;
}

.ui-datepicker th {
    padding: 6px 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--surf-gray-500) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: none !important;
    background: transparent !important;
}

.ui-datepicker td {
    padding: 0 !important;
    text-align: center;
    border: none !important;
    background: transparent !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: var(--surf-radius-sm) !important;
    color: var(--surf-ink) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    text-align: center !important;
    font-size: 13px;
    font-weight: 500;
    transition: background-color var(--surf-dur) var(--surf-ease), color var(--surf-dur) var(--surf-ease);
    cursor: pointer;
}

.ui-datepicker td a:hover {
    background: var(--surf-gray-100) !important;
    color: var(--surf-ink) !important;
}

.ui-datepicker td.ui-datepicker-today a,
.ui-datepicker td .ui-state-highlight {
    background: var(--surf-gray-50) !important;
    color: var(--surf-blue) !important;
    border-color: var(--surf-blue) !important;
    font-weight: 600;
}

.ui-datepicker td.ui-datepicker-current-day a,
.ui-datepicker td .ui-state-active {
    background: var(--surf-blue) !important;
    color: #fff !important;
    border-color: var(--surf-blue) !important;
}

.ui-datepicker td.ui-datepicker-other-month a,
.ui-datepicker td.ui-datepicker-other-month span {
    color: var(--surf-gray-400) !important;
    opacity: .6;
}

.ui-datepicker td.ui-datepicker-unselectable span {
    color: var(--surf-gray-400) !important;
    cursor: default;
}

/* ---- Fix iconos glyph-icon / FontAwesome global --------------
   fontawesome.css define @font-face y .icon-X:before con content,
   pero NO aplica font-family: FontAwesome a .glyph-icon globalmente
   (solo a selectores específicos del theme: sidebar, breadcrumb, etc).
   Fuera de esos contextos (ej: botones en vistas EnCurso/RevisarEnCurso)
   el pseudo-element no tiene font → el icono sale invisible (el
   botón se ve como rectángulo blanco).

   Fix: aplicar font-family + properties base a todas las .glyph-icon
   y sus ::before. Esto es lo que SUPINA original hacía implícito en
   su layout.css pero quedó limitado a selectores específicos.
   -------------------------------------------------------------- */
.glyph-icon,
.glyph-icon::before,
i[class*="icon-"],
i[class*="icon-"]::before {
    font-family: 'FontAwesome', sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* LineIcons (linecons) — mismo tratamiento. El CSS define .lc antes
   de los content: "\e6XX", pero depende del theme para el font-family.
   Si otros selectores lo omiten, caen igual que FontAwesome. */
.lc,
.lc::before {
    font-family: 'Linecons', sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}