.loader {
    width: 2rem;
    height: 2rem;
    border: 0.185rem solid #1973B8;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 
/* Columna Acciones: el botón con la flecha del dropdown no debe partirse en 2 líneas.
   El white-space:nowrap mantiene "Acciones" + el ícono juntos y la columna toma el ancho del botón. */
.btn[data-kt-menu-trigger] {
    white-space: nowrap;
}

/* === SweetAlert2: unificación de colores de iconos ===
   Criterio único: error/warning -> color warning ; notificación o confirmación
   (success/info/question) -> color primary. Se respeta la forma de cada icono y se
   usan los tokens del tema (--bs-warning / --bs-primary), así que se adapta solo si
   cambia la marca. Este archivo carga después de plugins.bundle.css, por lo que gana
   el override sin necesidad de !important. Aplica a todos los Swal del admin. */

/* Error y warning -> warning */
.swal2-icon.swal2-error,
.swal2-icon.swal2-warning {
    border-color: var(--bs-warning);
    color: var(--bs-warning);
}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--bs-warning);
}

/* Notificación / confirmación (success, info, question) -> primary */
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--bs-primary);
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--bs-primary);
}

/* Reproductor de audio nativo: Chrome dibuja los controles en un shadow DOM con su
   propio radio, así que la clase .rounded del elemento no alcanza. Alineamos el panel
   al mismo radio que el resto de los elementos (--bs-border-radius = .475rem). */
audio::-webkit-media-controls-enclosure {
    border-radius: var(--bs-border-radius);
}

/* Tooltip con contenido alineado a la izquierda (ej. "Campos faltantes" de Administración,
   que lista varios campos uno por línea). Scoped con data-bs-custom-class="tooltip-start".
   Se ensancha respecto al default de Bootstrap (200px) para que los labels no se corten. */
.tooltip-start .tooltip-inner {
    text-align: left;
    max-width: 380px;
}

/* Fila del listado de Administración en warning: score por debajo del umbral (feature SURVEY_SCORE).
   El JS agrega .survey-row-warn a la <tr> según el marcador que trae el modelo.
   Escala de amber para que cada elemento resalte del anterior:
     - fila:              #fffdf2  (light-light-warning: apenas un tinte, más claro que el light-warning)
     - checkbox:          #fbe699  (tono medio: resalta sobre la fila, sin llegar al warning pleno)
     - botón Acciones:    btn-light-warning nativo de Metronic (desde el template)
     - badge Completado / check tildado: var(--bs-warning) #F6C000 (warning pleno, desde el template)
   Las celdas de los extremos difuminan a transparente para suavizar el borde contra el margen. */
.survey-row-warn > td { background-color: #fffdf2 !important; }
.survey-row-warn > td:first-child { background: linear-gradient(to right, transparent, #fffdf2 48px) !important; }
.survey-row-warn > td:last-child  { background: linear-gradient(to left,  transparent, #fffdf2 48px) !important; }
[data-bs-theme="dark"] .survey-row-warn > td { background-color: #2e2b1d !important; }
[data-bs-theme="dark"] .survey-row-warn > td:first-child { background: linear-gradient(to right, transparent, #2e2b1d 48px) !important; }
[data-bs-theme="dark"] .survey-row-warn > td:last-child  { background: linear-gradient(to left,  transparent, #2e2b1d 48px) !important; }

/* Checkbox de selección en filas warning (sin variante nativa en Metronic): tono medio para que
   resalte sobre la fila; al tildarlo pasa a warning pleno con el check blanco. */
.survey-row-warn .form-check-input.kt_row_check { background-color: #fbe699; border-color: #f3ce54; }
.survey-row-warn .form-check-input.kt_row_check:checked { background-color: var(--bs-warning); border-color: var(--bs-warning); }
[data-bs-theme="dark"] .survey-row-warn .form-check-input.kt_row_check { background-color: #5c4f22; border-color: #7a6a2e; }

/* En filas warning:
     - badges Audio / Km / Revisar / Satisfacción -> fondo blanco (conservan su color de texto)
     - switches Pago / Llamado / Informe -> apagados en light-warning (#FFF8DD) y warning pleno
       (con la bolita blanca) cuando están encendidos. */
.survey-row-warn .badge.warn-neutral { background-color: #fff !important; }
[data-bs-theme="dark"] .survey-row-warn .badge.warn-neutral { background-color: rgba(255,255,255,.06) !important; }
.survey-row-warn .form-check-input.kt_log_payed,
.survey-row-warn .form-check-input.kt_log_called,
.survey-row-warn .form-check-input.kt_log_delivered { background-color: #FFF8DD !important; border-color: #f3ce54 !important; }
.survey-row-warn .form-check-input.kt_log_payed:checked,
.survey-row-warn .form-check-input.kt_log_called:checked,
.survey-row-warn .form-check-input.kt_log_delivered:checked { background-color: var(--bs-warning) !important; border-color: var(--bs-warning) !important; }
[data-bs-theme="dark"] .survey-row-warn .form-check-input.kt_log_payed:not(:checked),
[data-bs-theme="dark"] .survey-row-warn .form-check-input.kt_log_called:not(:checked),
[data-bs-theme="dark"] .survey-row-warn .form-check-input.kt_log_delivered:not(:checked) { background-color: #5c4f22 !important; border-color: #7a6a2e !important; }

/* Select de Forma de pago en filas warning: se funde con la fila (fondo transparente para que
   tome el color de la row en cualquier tema; se usa background-color para no pisar la flecha).
   Borde en un amber apenas más oscuro que el light-warning para que el campo se distinga. */
.survey-row-warn .form-select.kt_log_paytype { background-color: transparent !important; border-color: #fbe699 !important; }
[data-bs-theme="dark"] .survey-row-warn .form-select.kt_log_paytype { border-color: #6e5f2a !important; }

/* === Toolbar de acciones de las cards de listado en pantallas angostas ===
   El header de las cards de listado (views/list.html, compartido por TODOS los módulos) tiene la
   búsqueda (.card-title) y los botones de acción (.card-toolbar: Filtrar, Limpiar, Sincronizar,
   Nuevo, etc.). En mobile esos botones se salían del card. Fix:
     - flex-wrap: envuelven a una línea nueva SOLO cuando no entran (no afecta desktop, ahí caben).
     - flex: 0 0 auto en los botones/selects: no se AGRANDAN ni se ENCOGEN -> mantienen su ancho de
       contenido y no se deforman.
   Es global y no toca el botón "Acciones" de las filas (ese está en la tabla, no en la toolbar). */
.card-header .card-toolbar,
.card-header .card-toolbar > .d-flex {
    flex-wrap: wrap;
    row-gap: .5rem;
}
.card-header .card-toolbar .btn,
.card-header .card-toolbar .form-select,
.card-header .card-toolbar .form-control {
    flex: 0 0 auto;
}
@media (max-width: 767.98px) {
    /* La toolbar toma el ancho completo del card y alinea los botones a la izquierda. */
    .card-header .card-toolbar { width: 100%; justify-content: flex-start; }
    .card-header .card-toolbar > .d-flex { width: 100%; justify-content: flex-start !important; }
    /* La búsqueda deja de forzar 250px fijos y ocupa el ancho disponible (sin desbordar el card). */
    .card-header .card-title .form-control.w-250px { width: 100% !important; }
}