/* =====================================================================================================
   Diseño estandar de las pantallas de consulta (referencia: Solicitudes de Prepago, 14-oct-2026).
   Un solo aspecto para: barras de filtros, tarjetas-resumen y tablas. Lo cargan todas las pantallas desde index.html.
   Cada modulo conserva su distribucion (grid, columnas); aqui solo se igualan colores, bordes, tipografia y espacios.
   Para agregar un modulo nuevo basta usar las clases .uvm-filtros / .uvm-resumen (o agregar su clase a estas listas).
   ":not(#_)" sube la especificidad para ganarle a los estilos propios de cada modulo sin tocar sus archivos.
   ===================================================================================================== */

/* ---------- 0) Encabezado de pantalla: titulo a la izquierda, botones a la derecha (Limpiar filtros, acciones propias, Exportar, Actualizar, Ayuda) ---------- */
.uvm-heading { display: grid; grid-template-columns: minmax(250px, 1fr) auto; column-gap: 20px; align-items: end; min-height: 82px; }
.uvm-heading .uvm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; align-self: end; }
@media (max-width: 1000px) { .uvm-heading { grid-template-columns: 1fr; } .uvm-heading .uvm-actions { justify-content: flex-start; margin-top: 12px; } }

/* ---------- 1) Barras de filtros ---------- */
body .uvm-filtros:not(#_),
body .solprepago-filter:not(#_), body .solcancel-filter:not(#_), body .pagpend-filter:not(#_), body .fondeos-filter:not(#_),
body .fondeo-filtros:not(#_), body .fondeo-filtros-saldos:not(#_), body .cc-search:not(#_), body .cc-filters:not(#_), body .cc-history-filters:not(#_),
body .gps-filtros:not(#_), body .gps-cambios-filtros:not(#_), body .msa-filters:not(#_), body .consulta-filtros:not(#_), body .credito-filters:not(#_),
body .gd-filters:not(#_), body .stp-filtros-dia:not(#_) {
    background: #f7f8fa !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 5px !important;
    padding: 12px !important;
    margin-top: 0;
    margin-bottom: 15px;
    box-shadow: none !important;
}
body .uvm-filtros:not(#_) label,
body .solprepago-filter:not(#_) label, body .solcancel-filter:not(#_) label, body .pagpend-filter:not(#_) label, body .fondeos-filter:not(#_) label,
body .fondeo-filtros:not(#_) label, body .fondeo-filtros-saldos:not(#_) label, body .cc-search:not(#_) label, body .cc-filters:not(#_) label, body .cc-history-filters:not(#_) label,
body .gps-filtros:not(#_) label, body .gps-cambios-filtros:not(#_) label, body .msa-filters:not(#_) label, body .consulta-filtros:not(#_) label, body .credito-filters:not(#_) label,
body .gd-filters:not(#_) label, body .stp-filtros-dia:not(#_) label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #444 !important;
    line-height: 20px;
    margin: 0 0 6px;
    display: block;
}
body .uvm-filtros:not(#_) .form-control,
body .solprepago-filter:not(#_) .form-control, body .solcancel-filter:not(#_) .form-control, body .pagpend-filter:not(#_) .form-control, body .fondeos-filter:not(#_) .form-control,
body .fondeo-filtros:not(#_) .form-control, body .fondeo-filtros-saldos:not(#_) .form-control, body .cc-search:not(#_) .form-control, body .cc-filters:not(#_) .form-control, body .cc-history-filters:not(#_) .form-control,
body .gps-filtros:not(#_) .form-control, body .gps-cambios-filtros:not(#_) .form-control, body .msa-filters:not(#_) .form-control, body .consulta-filtros:not(#_) .form-control, body .credito-filters:not(#_) .form-control,
body .gd-filters:not(#_) .form-control, body .stp-filtros-dia:not(#_) .form-control {
    height: 38px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #c8d1dc;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    line-height: 20px;
    box-sizing: border-box;
}

/* ---------- 2) Tarjetas-resumen ---------- */
.uvm-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 15px; }
body .uvm-resumen > *:not(#_),
body .solprepago-summary button:not(#_), body .solcancel-summary button:not(#_), body .pagpend-summary > div:not(#_), body .gps-summary > div:not(#_),
body .gd-summary button:not(#_), body .fondeos-summary > div:not(#_), body .cc-summary button:not(#_), body .consulta-card:not(#_), body .credito-kpi:not(#_) {
    background: #fff;
    border: 1px solid #ddd !important;
    border-left: 4px solid #286ba9 !important;
    border-radius: 5px !important;
    padding: 12px 15px !important;
    color: #333;
    font-size: 12px;
    text-align: left;
    box-shadow: none;
}
body .uvm-resumen > *:not(#_) strong,
body .solprepago-summary button:not(#_) strong, body .solcancel-summary button:not(#_) strong, body .pagpend-summary > div:not(#_) strong, body .gps-summary > div:not(#_) strong,
body .gd-summary button:not(#_) strong, body .fondeos-summary > div:not(#_) strong, body .cc-summary button:not(#_) strong, body .consulta-card:not(#_) strong, body .credito-kpi:not(#_) strong {
    display: block;
    font-size: 24px !important;
    line-height: 30px !important;
    margin: 0 0 2px !important;
    color: #333 !important;
}
/* Estados: atencion (ambar), correcto (verde), error (rojo). Van despues de la regla base para ganarle en igualdad de especificidad. */
body .uvm-resumen > .resumen-atencion:not(#_), body .solprepago-summary button.summary-warning:not(#_), body .solcancel-summary button.summary-warning:not(#_),
body .fondeos-summary > .summary-warning:not(#_), body .gps-summary > .gps-warning:not(#_), body .gps-summary > .gps-card-warning:not(#_), body .gps-summary > .gps-card-alerta:not(#_),
body .gd-summary button.gd-summary-warning:not(#_), body .cc-summary button.summary-warning:not(#_), body .cc-summary button.cc-contabilidad:not(#_) { border-left-color: #a76500 !important; }
body .uvm-resumen > .resumen-ok:not(#_), body .pagpend-summary > div.ok:not(#_), body .cc-summary button.cc-tarjeta-activo:not(#_) { border-left-color: #27863c !important; }
body .uvm-resumen > .resumen-error:not(#_), body .solcancel-summary button.summary-error:not(#_), body .consulta-card.devueltas:not(#_) { border-left-color: #bb3434 !important; }
body .uvm-resumen > .tarjeta-filtro:not(#_) { cursor: pointer; }
body .uvm-resumen > .tarjeta-filtro:not(#_):hover, body .uvm-resumen > .tarjeta-filtro.seleccionada:not(#_) { background: #edf4ff; }
body .uvm-resumen > .tarjeta-filtro.seleccionada:not(#_) { box-shadow: inset 0 0 0 1px #286ba9; }
body .fondeos-summary > div.tarjeta-filtro:not(#_) { cursor: pointer; }
body .fondeos-summary > div.tarjeta-filtro:not(#_):hover, body .fondeos-summary > div.tarjeta-filtro.seleccionada:not(#_) { background: #edf4ff; }
body .fondeos-summary > div.tarjeta-filtro.seleccionada:not(#_) { box-shadow: inset 0 0 0 1px #286ba9; }
body .solprepago-summary button:not(#_):hover, body .solprepago-summary button.selected:not(#_), body .solcancel-summary button:not(#_):hover, body .solcancel-summary button.selected:not(#_) { background: #edf4ff; }

/* ---------- 3) Tablas (ng-table): misma tipografia y espacios en encabezado y filas ---------- */
body table.ng-table:not(#_) > thead > tr:not(.ng-table-filters) > th:not(#_) {
    background-color: #007AFF !important;
    border-color: #007AFF !important;
    color: #fff !important;
}
body table.ng-table:not(#_) > thead > tr:not(.ng-table-filters) > th.sortable.sort-asc:not(#_),
body table.ng-table:not(#_) > thead > tr:not(.ng-table-filters) > th.sortable.sort-desc:not(#_) { background-color: #0062cc !important; }
body table.ng-table:not(#_) > thead > tr > th:not(#_) {
    font-family: Nunito, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    padding: 9px 8px !important;
}
body table.ng-table:not(#_) > tbody > tr > td:not(#_) {
    font-size: 12px !important;
    vertical-align: middle !important;
}

/* ---------- 4) Modales: mismo fondo, tipografia y pie en todo el sistema (solo apariencia; la distribucion de cada modal no cambia) ---------- */
body .modal-content:not(#_) { font-family: Nunito, sans-serif; background-color: #fff; }
body .modal-header:not(#_) {
    background-color: #315da8 !important;
    background-image: none !important;
    border-color: #315da8 !important;
    color: #fff !important;
}
body .modal-header:not(#_) .modal-title,
body .modal-header:not(#_) h1, body .modal-header:not(#_) h2,
body .modal-header:not(#_) h3, body .modal-header:not(#_) h4 {
    color: #fff !important;
    font-family: Nunito, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
body .modal-header:not(#_) small, body .modal-header:not(#_) p {
    color: rgba(255, 255, 255, .92) !important;
    font-size: 13px;
    font-weight: 400;
}
/* Subtitulos del encabezado (clases propias de cada modal): siempre claros sobre el azul */
body .modal-header:not(#_) .detail-subtitle, body .modal-header:not(#_) .timeline-context, body .modal-header:not(#_) [class*="subtitle"] {
    color: rgba(255, 255, 255, .92) !important;
}
/* Boton Ayuda arriba a la derecha del encabezado, a la izquierda de la X (va despues del boton de cerrar en el HTML) */
body .modal-header:not(#_) .modal-ayuda-btn { float: right; margin: 0 16px 0 0; padding: 4px 11px; font-size: 12px; font-weight: 600; color: #315da8 !important; background: #fff !important; border-color: #fff !important; border-radius: 5px; }
body .modal-header:not(#_) .modal-ayuda-btn:hover { background: #eaf0fc !important; }
/* El icono del boton hereda el color del boton (algunos temas de modal pintan de blanco todos los <i> del encabezado y se perdia sobre el fondo blanco) */
body .modal-header:not(#_) .modal-ayuda-btn i { color: inherit !important; }
body .modal-header:not(#_) .close, body .modal-header:not(#_) button[class*="close"] {
    color: #fff !important;
    opacity: .9;
    text-shadow: none;
}
body .modal-footer:not(#_) {
    background-color: #fff !important;
    border-top: 1px solid #dce5ef !important;
}
body .modal-footer:not(#_) .btn-primary:not(.btn-o) { background-color: #315da8; border-color: #315da8; color: #fff; }
body .modal-footer:not(#_) .btn.btn-primary.btn-o { background-color: #fff !important; border-color: #cbd5e1 !important; color: #334155 !important; }

/* ---------- 5) Etiquetas de estatus (badges) ---------- */
.badge-sat { display: inline-block; padding: 3px 7px; border-radius: 4px; color: #fff; font-weight: 600; font-size: 11px; line-height: 1.3; }
.badge-sat-success { background: #27863c; }
.badge-sat-info { background: #286ba9; }
.badge-sat-warning { background: #a76500; }
.badge-sat-danger { background: #bb3434; }
.badge-sat-default { background: #707070; }

/* ---------- 6) Cuadros de ayuda ---------- */
body .uvm-ayuda:not(#_), body .solprepago-help:not(#_), body .solcancel-help:not(#_), body .cc-help:not(#_), body .fondeos-help:not(#_),
body .pizarra-help:not(#_), body .gps-help:not(#_), body .gd-help:not(#_), body .consulta-ayuda:not(#_) {
    background: #f7f9fc !important;
    border: 1px solid #d8e3f1 !important;
    border-left: 4px solid #315da8 !important;
    border-radius: 8px !important;
    padding: 18px !important;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    color: #516178;
}
body .uvm-ayuda:not(#_) p, body .solprepago-help:not(#_) p, body .solcancel-help:not(#_) p, body .cc-help:not(#_) p, body .fondeos-help:not(#_) p,
body .pizarra-help:not(#_) p, body .gps-help:not(#_) p, body .gd-help:not(#_) p, body .consulta-ayuda:not(#_) p { margin: 0 0 10px; }
body .uvm-ayuda:not(#_) strong, body .solprepago-help:not(#_) strong, body .solcancel-help:not(#_) strong, body .cc-help:not(#_) strong, body .fondeos-help:not(#_) strong,
body .pizarra-help:not(#_) strong, body .gps-help:not(#_) strong, body .gd-help:not(#_) strong, body .consulta-ayuda:not(#_) strong { color: #304f77; }
.uvm-ayuda ol, .solprepago-help ol { margin: 0 0 10px; padding-left: 20px; }
.uvm-ayuda li, .solprepago-help li { margin-bottom: 6px; }

/* ---------- 7) Bandejas / pestañas de botones ---------- */
body .uvm-bandejas:not(#_), body .solprepago-tabs:not(#_), body .solcancel-tabs:not(#_), body .gps-tabs:not(#_), body .credito-bandejas:not(#_) {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
body .uvm-bandejas:not(#_) .badge, body .solprepago-tabs:not(#_) .badge, body .solcancel-tabs:not(#_) .badge { margin-left: 5px; background: #e5e9ee; color: #333; }
body .uvm-bandejas:not(#_) .btn-primary .badge, body .solprepago-tabs:not(#_) .btn-primary .badge, body .solcancel-tabs:not(#_) .btn-primary .badge { background: #fff; color: #24538b; }

/* ---------- 8) Pestañas (bootstrap nav-tabs / tabset) ---------- */
body ul.nav-tabs:not(#_) {
    display: flex; flex-wrap: wrap; gap: 4px;
    background: #f7f8fa; border: 1px solid #e5e5e5; border-radius: 5px; padding: 5px; margin-bottom: 14px;
}
body ul.nav-tabs:not(#_) > li { float: none; margin: 0; }
body ul.nav-tabs:not(#_) > li > a {
    border: 1px solid transparent !important; border-radius: 4px !important;
    padding: 9px 14px; margin: 0; font-size: 12px; font-weight: 600; background: transparent; color: #30435c !important;
}
body ul.nav-tabs:not(#_) > li > a:hover { background: #e8eef9 !important; }
body ul.nav-tabs:not(#_) > li.active > a, body ul.nav-tabs:not(#_) > li.active > a:hover, body ul.nav-tabs:not(#_) > li.active > a:focus {
    background: #315da8 !important; color: #fff !important; border-color: #315da8 !important;
}

/* ---------- 9) Pestañas de botones dentro de detalles y modales ---------- */
body .uvm-pestanas:not(#_), body .detail-tabs:not(#_), body .fd-tabs:not(#_), body .credito-tabs:not(#_), body .respaldo-tabs:not(#_) {
    display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #dce5f2; padding-bottom: 10px; margin: 0 0 16px;
}
body .uvm-pestanas:not(#_) > .btn, body .uvm-pestanas:not(#_) > button, body .detail-tabs:not(#_) .btn, body .fd-tabs:not(#_) button, body .credito-tabs:not(#_) .btn, body .respaldo-tabs:not(#_) .btn {
    background: #fff; border: 1px solid #dce5f2; border-radius: 5px; color: #52647c; padding: 8px 14px; font-size: 12px; margin: 0;
}
body .uvm-pestanas:not(#_) > .active, body .uvm-pestanas:not(#_) > .btn-primary, body .detail-tabs:not(#_) .btn.active, body .detail-tabs:not(#_) .btn-primary, body .fd-tabs:not(#_) button.active,
body .credito-tabs:not(#_) .btn.active, body .credito-tabs:not(#_) .btn-primary, body .respaldo-tabs:not(#_) .btn.active, body .respaldo-tabs:not(#_) .btn-primary {
    background: #315da8 !important; border-color: #315da8 !important; color: #fff !important;
}

/* ---------- 10) Botones del pie de los modales ---------- */
body .modal-footer:not(#_) .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 38px; padding: 9px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.35; box-shadow: none;
}

/* ---------- 11) Tablas simples (.table) dentro de pantallas y modales: mismo encabezado que las de ng-table ---------- */
body table.table:not(#_) > thead > tr:not(.ng-table-filters) > th:not(#_) {
    background-color: #007AFF !important;
    border-color: #007AFF !important;
    color: #fff !important;
    font-family: Nunito, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    padding: 9px 8px !important;
}
body table.table:not(#_) > thead > tr:not(.ng-table-filters) > th:not(#_) a, body table.table:not(#_) > thead > tr:not(.ng-table-filters) > th:not(#_) span { color: #fff !important; }
body table.table:not(#_) > tbody > tr > td:not(#_) { font-size: 12px; vertical-align: middle; }

/* ---------- 12) Campos de formulario dentro de modales ---------- */
body .modal-body label { font-size: 12px; font-weight: 700; color: #444; }
body .modal-body input.form-control:not([type="file"]):not([type="checkbox"]):not([type="radio"]), body .modal-body select.form-control {
    height: 38px; min-height: 38px; padding: 8px 12px; border: 1px solid #c8d1dc; border-radius: 4px; background-color: #fff; font-size: 13px; box-sizing: border-box;
}
body .modal-body textarea.form-control { padding: 8px 12px; border: 1px solid #c8d1dc; border-radius: 4px; font-size: 13px; }

/* ---------- 13) Botones del encabezado: todos iguales (blancos con borde), sin importar el color propio del modulo ---------- */
body .uvm-heading:not(#_) .uvm-actions .btn:not(#_) {
    background: #fff !important; color: #555 !important; border: 1px solid #ddd !important; border-radius: 4px !important;
    padding: 6px 10px; font-size: 12px; font-weight: 600; min-height: 32px; box-shadow: none; text-shadow: none;
}
body .uvm-heading:not(#_) .uvm-actions .btn:not(#_):hover { background: #f2f4f7 !important; border-color: #aebdce !important; }
body .uvm-heading:not(#_) .uvm-actions .btn:not(#_) .fa, body .uvm-heading:not(#_) .uvm-actions .btn:not(#_) i { color: inherit; }

/* ---------- 14) Bandejas de botones: mismo aspecto que las pestañas (barra gris, activa en azul) ---------- */
body .uvm-bandejas:not(#_), body .solprepago-tabs:not(#_), body .solcancel-tabs:not(#_), body .gps-tabs:not(#_), body .credito-bandejas:not(#_) {
    background: #f7f8fa; border: 1px solid #e5e5e5; border-radius: 5px; padding: 5px; gap: 4px;
}
body .uvm-bandejas:not(#_) > .btn, body .solprepago-tabs:not(#_) > .btn, body .solcancel-tabs:not(#_) > .btn, body .gps-tabs:not(#_) > .btn, body .credito-bandejas:not(#_) > .btn {
    background: transparent !important; border: 1px solid transparent !important; border-radius: 4px !important; color: #30435c !important;
    padding: 9px 14px; font-size: 12px; font-weight: 600; box-shadow: none; margin: 0;
}
body .uvm-bandejas:not(#_) > .btn:hover, body .solprepago-tabs:not(#_) > .btn:hover, body .solcancel-tabs:not(#_) > .btn:hover, body .gps-tabs:not(#_) > .btn:hover, body .credito-bandejas:not(#_) > .btn:hover { background: #e8eef9 !important; }
body .uvm-bandejas:not(#_) > .btn-primary, body .solprepago-tabs:not(#_) > .btn-primary, body .solcancel-tabs:not(#_) > .btn-primary, body .gps-tabs:not(#_) > .btn-primary, body .credito-bandejas:not(#_) > .btn-primary {
    background: #315da8 !important; border-color: #315da8 !important; color: #fff !important;
}

/* ---------- 15) Boton primario (incluye Buscar y la tachita del buscador): un solo azul en todo el sistema ---------- */
body .btn.btn-primary:not(.btn-o):not(#_), body .btn.btn-primary:not(.btn-o):not(#_):focus, body .btn.btn-primary:not(.btn-o):not(#_):active {
    background-color: #315da8 !important;
    border-color: #315da8 !important;
    color: #fff !important;
}
body .btn.btn-primary:not(.btn-o):not(#_):hover { background-color: #274d8c !important; border-color: #274d8c !important; color: #fff !important; }
body .btn.btn-primary:not(.btn-o):not(#_)[disabled], body .btn.btn-primary:not(.btn-o):not(#_).disabled { opacity: .6; }
/* Selector de columna del buscador (Centro de costos, Folio, etc.): mismo aspecto en todas las pantallas */
body .input-group .search-panel:not(#_) select.btn { background: #fff !important; color: #555 !important; border: 1px solid #c8d1dc !important; font-weight: 600; min-width: 112px; }

/* Botones del encabezado deshabilitados (por ejemplo Exportar sin resultados): se ven apagados pero legibles */
body .uvm-heading:not(#_) .uvm-actions .btn:not(#_)[disabled], body .uvm-heading:not(#_) .uvm-actions .btn:not(#_).disabled {
    opacity: .75 !important; color: #444 !important; background: #f4f5f7 !important; cursor: not-allowed;
}