/* ============================================================
   CC-R3Q — Puente de overrides sobre la plantilla StackWave
   ------------------------------------------------------------
   Adapta el marcado existente del proyecto (mayormente Bootstrap
   estándar) al look de la plantilla SIN tener que editar cada
   vista. Se carga DESPUÉS de style.css.
   ============================================================ */

/* ---- 1. CARDS ----------------------------------------------------------
   La plantilla solo estiliza .sw-card; el proyecto usa la .card de
   Bootstrap en decenas de vistas. Aquí la .card hereda el aspecto premium
   (radio, sombra, borde suave). Se omite el "hover lift" de .sw-card para
   no marear cuando hay muchas cards en una misma pantalla. */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.card > .card-header,
.card > .card-header:first-child {
  background: transparent;
  border-bottom: 1px solid var(--card-border);
  font-weight: 700;
}
.card > .card-footer {
  background: transparent;
  border-top: 1px solid var(--card-border);
}

/* Contenedores utilitarios frecuentes que también deben verse "tarjeta" */
.list-group {
  border-radius: var(--card-radius);
}

/* style.css define los .btn-soft-* con hover para todas las variantes salvo
   secondary (usada en los Cancelar de los modales): se completa aquí. */
.btn-soft-secondary:hover { background: rgba(108,117,125,0.22); color: #6c757d; }

/* ---- 2. FORMULARIOS ----------------------------------------------------
   Los controles (.form-control, .form-select, .input-group) y la validación
   (is-invalid / is-valid, que usa validateForm() en common.js) ya están
   cubiertos por style.css. Aquí solo se refuerzan detalles del proyecto. */

/* Etiqueta requerida coherente */
.form-label .text-danger { font-weight: 600; }

/* Mensaje de error inline de jquery-validate (errorElement: "em").
   La app usa errorPlacement vacío, pero si alguna vista lo muestra, que
   tenga el color y tamaño correctos. */
em.error,
label.error,
.invalid-feedback {
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 500;
}
/* (.form-icon-header y .bg-*-lt ya están definidos en style.css) */

/* ---- 3. TABS -----------------------------------------------------------
   style.css solo trae la variante premium .nav-tabs-underline; el proyecto
   usa .nav-tabs estándar en ~16 vistas. Aquí los .nav-tabs adoptan el mismo
   indicador inferior on-brand (estilo "Tabs with Icons" de la plantilla).
   Para el patrón con icono basta anteponer <i class="bi ... me-2"></i> en
   el texto de cada pestaña. */
.nav-tabs { border-bottom: 1px solid var(--card-border); }
.nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--bs-secondary-color, #5a6a85);
  font-weight: 500;
  margin-bottom: -1px;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  border-bottom-color: var(--primary);
  color: var(--primary);
  background: transparent;
}
.nav-tabs .nav-link:hover:not(.active) {
  border-bottom-color: rgba(93,135,255,.3);
  color: var(--primary);
  background: transparent;
}

/* Pills on-brand */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--primary); }

/* Separación del contenido de pestañas */
.tab-content { padding-top: 1rem; }

/* ---- 3b. BANDA DE BREADCRUMB ------------------------------------------
   En el template .page-hdr-inline es columna (apila título sobre breadcrumb)
   con align-items:center. En EdE24 la usamos como fila (icono + breadcrumb +
   acciones), así que la forzamos a fila alineada a la izquierda para que el
   breadcrumb no quede centrado/desplazado. */
.dark-band .page-hdr-inline {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

/* ---- 4. TABLAS / DATATABLES --------------------------------------------
   DataTables ya hereda el "chrome" de style.css (.dataTables_wrapper, filtro,
   paginación). La clase propia .custom-table (12 vistas) venía de main.css y
   quedó sin estilo: aquí adopta el header premium de .sw-table, igual que las
   datatables, para un aspecto uniforme. */
.table.custom-table thead th,
table.dataTable thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted, #5a6a85);
  background: var(--body-bg);
  border-bottom: 2px solid var(--card-border);
  white-space: nowrap;
}
.table.custom-table tbody td { vertical-align: middle; }
.table.custom-table tbody tr:hover { background: rgba(93,135,255,0.04); }

/* Dropdowns de acciones (⋮) dentro de tablas/datatables: que no se recorten ni
   queden ocultos tras el sidebar. El menú debe poder desbordar el contenedor de
   la tabla y dibujarse por encima del sidebar (1051) pero por debajo de los
   modales (1055). */
.table-responsive:has(.dataTables_wrapper),
.dataTables_wrapper { overflow: visible !important; }
.dropdown-menu { z-index: 1052; }

/* Botón ⋮ de la columna "Opciones": plano, sin borde y sin la flechita del
   dropdown; se ilumina al pasar el puntero igual que el resto de los iconos. */
.btn-row-options {
  border: 0;
  padding: .25rem .4rem;
  line-height: 1;
  color: var(--muted, #5a6a85);
  background: transparent;
  border-radius: var(--radius-sm, 8px);
}
.btn-row-options:hover,
.btn-row-options:focus,
.btn-row-options.show {
  color: var(--primary, #5d87ff);
  background: rgba(93,135,255,0.10);
}
.btn-row-options::after { display: none; }

/* ---- 5. SELECT2 / SELECT ----------------------------------------------
   La app usa <select class="form-select"> mejorados con select2 (el widget
   nativo se reemplaza). Sin tema, select2 queda sin borde. Aquí se alinea con
   el aspecto de .form-control/.form-select de la plantilla. */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
  height: auto; min-height: 38px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--card-bg);
  padding: 3px 6px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px; color: var(--body-color); padding-left: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted, #8a96b0); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm, 8px);
  min-height: 38px;
  background: var(--card-bg);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(93,135,255,0.15);
}
.select2-dropdown {
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--card-bg);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--primary);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--card-border); border-radius: var(--radius-sm, 8px);
}
/* select2 abierto dentro de modales debe quedar por encima del modal */
.select2-container--open { z-index: 1060; }

/* ---- 5b. SELECT2 EN MODO OBSCURO ---------------------------------------
   select2 no trae tema dark propio: su CSS (que carga DESPUÉS de este
   archivo) quema blancos/grises en el dropdown, el buscador y las opciones.
   Se tematiza aquí con las variables de la plantilla, scopeado a
   [data-theme="dark"]: el atributo vive en <html> y el dropdown cuelga del
   <body>, así que estas reglas se activan/desactivan solas al cambiar el
   skin, sin JS adicional. */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background: var(--card-bg);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--body-color);
}
[data-theme="dark"] .select2-dropdown {
  background: var(--card-bg);
  border-color: var(--card-border);
}
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
  background: var(--input-bg);
  border-color: var(--card-border);
  color: var(--body-color);
}
[data-theme="dark"] .select2-results__option { color: var(--body-color); }
[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(93,135,255,0.18);
  color: var(--dark-text);
}
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--primary);
  color: #fff;
}
[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled="true"] {
  color: var(--muted);
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(93,135,255,0.18);
  border: 1px solid var(--card-border);
  color: var(--body-color);
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--muted);
}
[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple {
  background: var(--hover-bg);
}

/* ---- 6. MODALES -------------------------------------------------------
   .page-wrapper de la plantilla lleva position:relative; z-index:1, lo que crea
   un stacking context que atrapaba los modales por DEBAJO del backdrop (que
   cuelga del <body>). Se neutraliza ese contexto y se ordenan backdrop/modal de
   forma que también oscurezcan header (1050) y sidebar (1051). */
.page-wrapper { z-index: auto; }
.modal-backdrop { z-index: 1054; }
.modal { z-index: 1056; }

/* ---- 7. SWEETALERT2 EN MODO OBSCURO -----------------------------------
   Swal.fire se usa en ~29 vistas sin wrapper común; en lugar de tocar cada
   llamada se adapta el diálogo al skin obscuro vía CSS global.

   SweetAlert2 v11.26 expone TODA su paleta como variables CSS propias
   (--swal2-*). En vez de pelear especificidad elemento por elemento, se
   redefinen esas variables y el diálogo entero (fondo, texto, título, footer,
   inputs, validación) hereda el modo obscuro con la paleta del proyecto:
   el título y el contenido usan `color: inherit` → toman --swal2-color.

   Se usa el selector `html[data-theme="dark"]` (especificidad 0,1,1) para
   ganarle al `:root` (0,1,0) que la librería declara DESPUÉS en el orden de
   carga; con `[data-theme="dark"]` a secas (0,1,0) el `:root` posterior ganaría
   por orden de cascada y las variables no aplicarían. */
html[data-theme="dark"] {
  --swal2-background:                    var(--card-bg);
  --swal2-color:                         var(--body-color);
  --swal2-border:                        1px solid var(--card-border);
  --swal2-close-button-color:            var(--muted);
  --swal2-footer-color:                  var(--body-color);
  --swal2-footer-border-color:           var(--card-border);
  --swal2-input-background:              var(--input-bg);
  --swal2-input-border:                  1px solid var(--card-border);
  --swal2-validation-message-background: var(--input-bg);
  --swal2-validation-message-color:      var(--body-color);
}
/* El texto de los inputs no tiene variable propia: se fuerza explícitamente. */
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select,
html[data-theme="dark"] .swal2-file { color: var(--body-color); }
html[data-theme="dark"] .swal2-input::placeholder,
html[data-theme="dark"] .swal2-textarea::placeholder { color: var(--muted); }

/* ============================================================
   CC-R3Q — Identidad de marca
   Tomada del logotipo: azul profundo, azul medio, verde y ámbar.
   ============================================================ */
:root {
  --ccreq-azul-profundo: #14416f;
  --ccreq-azul:          #1b6ec2;
  --ccreq-azul-claro:    #3f9ae0;
  --ccreq-verde:         #1f9d7a;
  --ccreq-ambar:         #f59e0b;

  /* Semáforo de prioridad */
  --ccreq-prioridad-alta:  #dc3545;
  --ccreq-prioridad-media: #f59e0b;
  --ccreq-prioridad-baja:  #1f9d7a;
}

/* ---- Semáforo del requerimiento ---------------------------------------- */
.semaforo-punto {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  vertical-align: middle;
}
.semaforo-alta  { background: var(--ccreq-prioridad-alta); }
.semaforo-media { background: var(--ccreq-prioridad-media); }
.semaforo-baja  { background: var(--ccreq-prioridad-baja); }

/* ---- Logotipo del login ------------------------------------------------ */
.auth-logo-top img { display: inline-block; }

/* ---- Invitación a instalar la app (PWA) -------------------------------- */
.pwa-install-box {
  border-top: 1px solid var(--card-border, rgba(0, 0, 0, .08));
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  text-align: center;
}
.pwa-install-box .pwa-install-btn {
  font-weight: 600;
  text-decoration: none;
}
.pwa-install-box .pwa-install-hint {
  font-size: .82rem;
  margin-top: .35rem;
  margin-bottom: 0;
}

/* En modo instalado (standalone) la invitación no tiene sentido */
@media (display-mode: standalone) {
  .pwa-install-box { display: none !important; }
}

/* ---- CAMPANA DE NOTIFICACIONES -----------------------------------------
   La plantilla ya trae .notif-dropdown, .notif-item y .notif-icon. Aquí solo
   se cierra el hueco que deja el texto largo: sin min-width:0 el hijo flexible
   no se deja encoger y el .text-truncate nunca recorta. */
.notif-item .notif-text {
  flex: 1 1 auto;
  min-width: 0;
}
.notif-item .notif-text small {
  display: block;
}