/* ==========================================================================
   DALTUM UI — la ÚNICA hoja de estilos del sitio (POC 26-oct-2026)
   "Genera estilos para todo el site; ninguna pantalla debería tener el suyo."
   El modelo es el Dashboard principal (/dashboard).
   REGLA: ninguna plantilla trae <style> ni style="..." visual. Si una pantalla
   necesita algo nuevo, se agrega aquí como COMPONENTE con nombre genérico
   (tarjeta, pastilla, tabla...), nunca con el nombre de la página.
   Lo único que sigue aparte es /dynamic/theme.css (colores configurables).
   tests/test_estilos_unicos.py vigila la regla.
   ========================================================================== */


/* ######################################################################
   1. Variables, base y utilidades (antes styles.css)
   ###################################################################### */
/* Estilos personalizados para la aplicación Odoo API Dashboard */
/* Actualizado: 2026-01-21 - Sistema de diseño unificado */

/* ===========================================
   VARIABLES CSS - SISTEMA DE DISEÑO
   =========================================== */
:root {
    /* ----- COLORES PRIMARIOS ----- */
    /* 26-oct: era morado (#667eea/#764ba2) de un diseño viejo; la marca es naranja */
    --color-primary: #FA6100;
    --color-primary-dark: #d45200;
    --color-primary-light: #ff8a3d;

    /* ----- COLORES SEMÁNTICOS ----- */
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-danger: #ef4444;
    --color-danger-light: #f87171;
    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-info: #06b6d4;
    --color-info-light: #22d3ee;

    /* ----- COLORES DE TEXTO ----- */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-light: #9ca3af;

    /* ----- COLORES DE FONDO ----- */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-tertiary: #e5e7eb;
    --bg-dark: #1f2937;

    /* ----- COLORES DE BORDE ----- */
    --border-color: #e5e7eb;
    --border-color-dark: #d1d5db;

    /* ----- COLORES LEGACY (compatibilidad Bootstrap) ----- */
    --primary-color: var(--color-primary);
    --secondary-color: var(--text-secondary);
    --success-color: var(--color-success);
    --danger-color: var(--color-danger);
    --warning-color: var(--color-warning);
    --info-color: var(--color-info);
    --light-color: var(--bg-secondary);
    --dark-color: var(--bg-dark);

    /* ----- ESPACIADO ----- */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* ----- SOMBRAS ----- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* ----- SOMBRA LEGACY ----- */
    --box-shadow: var(--shadow-lg);

    /* ----- BORDER RADIUS ----- */
    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius: 0.5rem;       /* 8px */
    --radius-md: 0.75rem;   /* 12px */
    --radius-lg: 1rem;      /* 16px */
    --radius-xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;

    /* ----- RADIUS LEGACY ----- */
    --border-radius: var(--radius);

    /* ----- TIPOGRAFÍA ----- */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 2rem;       /* 32px */
    --text-4xl: 2.5rem;     /* 40px */

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ----- TRANSICIONES ----- */
    --duration-fast: 0.15s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;
    --duration-slower: 0.5s;
    --easing: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-out: cubic-bezier(0, 0, 0.2, 1);

    /* ----- Z-INDEX ----- */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Estilos generales */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-secondary);
}

main {
    flex: 1;
}

/* Animación para loader */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Mejoras a tarjetas */
.card {
    margin-bottom: var(--space-6);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-slow) var(--easing);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    font-weight: var(--font-medium);
}

/* Iconos en tarjetas y botones */
.card-header i,
.btn i {
    margin-right: var(--space-2);
}

/* Mejoras a tablas */
.table th {
    font-weight: var(--font-semibold);
    background-color: var(--bg-secondary);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Indicadores de estado */
.status-indicator {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-3);
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-right: var(--space-3);
}

/* Filtros y búsqueda */
.filter-row {
    margin-bottom: var(--space-2);
    align-items: center;
}

/* Estilo para títulos de secciones */
.section-title {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--space-3);
    margin-bottom: var(--space-5);
}

/* Badges y pills */
.badge {
    font-weight: var(--font-medium);
}

/* Enlaces en cards */
.card a {
    text-decoration: none;
}

/* Hover en filas de tabla */
.table-hover tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05);
}

/* Personalización de formularios */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
}

/* Alertas mejoradas */
.alert {
    border-left-width: 4px;
    border-radius: var(--radius);
}

.alert-success {
    border-left-color: var(--color-success);
}

.alert-danger {
    border-left-color: var(--color-danger);
}

.alert-warning {
    border-left-color: var(--color-warning);
}

.alert-info {
    border-left-color: var(--color-info);
}

/* Menú de navegación */
.nav-link:hover {
    background-color: rgba(102, 126, 234, 0.1);
    border-radius: var(--radius);
}

.nav-link.active {
    font-weight: var(--font-semibold);
}

/* Botones mejorados */
.btn {
    font-weight: var(--font-medium);
    border-radius: var(--radius-sm);
    transition: all var(--duration-normal) var(--easing);
}

.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
}

/* Dashboard stats */
.stat-card {
    text-align: center;
    padding: var(--space-6);
}

.stat-card .stat-icon {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

.stat-card .stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
}

.stat-card .stat-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Media queries para responsive */
@media (max-width: 767.98px) {
    .card-title {
        font-size: var(--text-xl);
    }

    .table {
        font-size: var(--text-sm);
    }

    .btn {
        padding: var(--space-2) var(--space-2);
    }
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn var(--duration-slower) var(--easing);
}

/* Tema oscuro - para futuras implementaciones */
body.dark-theme {
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --border-color-dark: #4b5563;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-theme .card {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

body.dark-theme .card-header {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

body.dark-theme .table {
    color: var(--text-primary);
}

body.dark-theme .table th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dark-theme .form-control,
body.dark-theme .form-select {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}


/* ######################################################################
   2. Sistema de ayuda (antes help-system.css)
   ###################################################################### */
/**
 * Estilos para el Sistema de Ayuda
 */

/* Botón de ayuda flotante */
.help-button-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.help-button-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Estilos del modal de ayuda */
#helpModal .modal-content {
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

#helpModal .modal-header {
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

#helpModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Contenido de ayuda */
.help-content h6 {
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

.help-content h6 i {
    margin-right: 8px;
}

.help-content ul li {
    padding: 5px 0;
}

.help-content .alert {
    border-left: 4px solid;
}

.help-content .alert-info {
    border-left-color: #0dcaf0;
    background-color: #cff4fc;
}

.help-content .alert-warning {
    border-left-color: #ffc107;
    background-color: #fff3cd;
}

/* Tabla de permisos */
.help-content .table {
    font-size: 0.9rem;
}

.help-content .table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

/* Enlaces relacionados */
.help-content a {
    color: #0d6efd;
    transition: color 0.2s;
}

.help-content a:hover {
    color: #0a58ca;
}

/* Animación de carga */
.help-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.help-loading i {
    font-size: 3rem;
    color: #0d6efd;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsividad */
@media (max-width: 768px) {
    #helpModal .modal-dialog {
        margin: 0.5rem;
    }
    
    .help-button-float {
        bottom: 10px;
        right: 10px;
    }
}

/* Botón de ayuda en header */
.help-button-header {
    margin-left: 10px;
}

/* Indicador de ayuda disponible */
.help-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background-color: #28a745;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Tooltip de ayuda rápida */
.help-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.help-tooltip .help-tooltip-text {
    visibility: hidden;
    width: 250px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1001;
    bottom: 125%;
    left: 50%;
    margin-left: -125px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.help-tooltip .help-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.help-tooltip:hover .help-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Estilos para sección de documentación */
.help-section {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.help-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 15px;
}

.help-section-content {
    color: #6c757d;
}

/* Badges de roles */
.role-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem;
}

.role-badge.superuser {
    background-color: #dc3545;
    color: white;
}

.role-badge.manager {
    background-color: #fd7e14;
    color: white;
}

.role-badge.user {
    background-color: #0dcaf0;
    color: white;
}


/* ######################################################################
   3. Barra de navegación (antes navbar-simple.css)
   ###################################################################### */
/* ===========================================
   NAVBAR SIMPLE - Fondo blanco, texto gris
   Sin efectos que cambien tamaño
   Actualizado: 2026-03-19 - Colores Daltum
   =========================================== */

/* Reset navbar */
.navbar {
    background-color: #fff !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 0.5rem 1rem !important;
    font-family: var(--font-family-primary, 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif) !important;
}

/* Links del navbar */
.navbar .nav-link {
    color: #495057 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #212529 !important;
}

/* Brand */
.navbar .navbar-brand {
    color: #495057 !important;
}

.navbar .navbar-brand i {
    color: #495057 !important;
}

/* Dropdown toggle arrow */
.navbar .dropdown-toggle::after {
    border-top-color: #495057 !important;
}

/* Dropdown menu */
.navbar .dropdown-menu {
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
    padding: 0.5rem 0 !important;
    margin-top: 0 !important;
    z-index: 9999 !important;
}

/* Dropdown items */
.navbar .dropdown-item {
    color: #495057 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: #fa6101 !important;
    background-color: #f8f9fa !important;
}

.navbar .dropdown-item i {
    color: #6c757d !important;
    width: 1.25rem !important;
    margin-right: 0.5rem !important;
}

.navbar .dropdown-item:hover i {
    color: #fa6101 !important;
}

/* Divider */
.navbar .dropdown-divider {
    border-color: #dee2e6 !important;
}

/* User button */
.navbar .btn-outline-secondary,
.navbar .user-dropdown .btn {
    color: #495057 !important;
    border-color: #dee2e6 !important;
    background: transparent !important;
    font-size: 0.875rem !important;
}

.navbar .btn-outline-secondary:hover,
.navbar .user-dropdown .btn:hover {
    color: #212529 !important;
    background: transparent !important;
    border-color: #dee2e6 !important;
}

/* Toggler for mobile */
.navbar .navbar-toggler {
    border-color: #dee2e6 !important;
}

.navbar .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='%23495057' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ===========================================
   MOBILE MENU - Alta especificidad para
   sobrescribir el theme dinámico
   =========================================== */
@media (max-width: 991.98px) {
    /* Contenedor del menú colapsado - FONDO BLANCO SIEMPRE */
    body .navbar .navbar-collapse,
    html body .navbar .navbar-collapse,
    .navbar.navbar-expand-lg .navbar-collapse,
    .navbar .navbar-collapse.collapse,
    .navbar .navbar-collapse.show,
    .navbar #mainNavbar {
        background-color: #ffffff !important;
        background: #ffffff !important;
        padding: 0.75rem !important;
        margin-top: 0.5rem !important;
        border-radius: 0.5rem !important;
        border: 1px solid #dee2e6 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    /* Nav links en móvil - TEXTO OSCURO SIEMPRE */
    body .navbar .nav-link,
    html body .navbar .nav-link,
    .navbar.navbar-expand-lg .nav-link,
    .navbar .navbar-collapse .nav-link,
    .navbar #mainNavbar .nav-link {
        color: #333333 !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        padding: 0.75rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        border-radius: 0.375rem !important;
        background-color: transparent !important;
    }

    body .navbar .nav-link:hover,
    body .navbar .nav-link:active,
    .navbar .navbar-collapse .nav-link:hover {
        background-color: #f0f0f0 !important;
        color: #000000 !important;
    }

    /* Íconos en móvil - VISIBLES */
    body .navbar .nav-link i,
    .navbar .navbar-collapse .nav-link i,
    .navbar #mainNavbar .nav-link i {
        color: #555555 !important;
        margin-right: 0.5rem !important;
        font-size: 1rem !important;
        display: inline-block !important;
        width: 1.25rem !important;
    }

    /* Dropdown en móvil */
    body .navbar .dropdown-menu,
    .navbar .navbar-collapse .dropdown-menu,
    .navbar #mainNavbar .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0.25rem 0 0.25rem 1.5rem !important;
        margin: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    /* Dropdown items en móvil */
    body .navbar .dropdown-item,
    .navbar .navbar-collapse .dropdown-item,
    .navbar #mainNavbar .dropdown-item {
        color: #444444 !important;
        font-size: 0.9rem !important;
        padding: 0.6rem 1rem !important;
        border-radius: 0.375rem !important;
        background-color: transparent !important;
    }

    body .navbar .dropdown-item:hover,
    .navbar .navbar-collapse .dropdown-item:hover {
        background-color: #e9ecef !important;
        color: #000000 !important;
    }

    body .navbar .dropdown-item i,
    .navbar .navbar-collapse .dropdown-item i {
        color: #666666 !important;
        margin-right: 0.5rem !important;
    }

    /* Dropdown toggle arrow en móvil */
    body .navbar .dropdown-toggle::after,
    .navbar .navbar-collapse .dropdown-toggle::after {
        border-top-color: #333333 !important;
        margin-left: auto !important;
    }

    /* Separadores */
    body .navbar .dropdown-divider,
    .navbar .navbar-collapse .dropdown-divider {
        border-color: #dee2e6 !important;
        margin: 0.5rem 0 !important;
    }

    /* Navbar nav en móvil - stack vertical */
    body .navbar .navbar-nav,
    .navbar .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
    }

    body .navbar .navbar-nav.ms-auto,
    body .navbar .navbar-nav.me-auto {
        margin: 0 !important;
    }

    /* Separación entre grupos de nav */
    body .navbar .navbar-nav + .navbar-nav,
    .navbar .navbar-collapse .navbar-nav + .navbar-nav {
        border-top: 1px solid #dee2e6 !important;
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
    }

    /* Badge de notificaciones en móvil */
    body .navbar .notification-badge {
        position: relative !important;
        top: -2px !important;
    }
}


/* ######################################################################
   4. Marca Daltum: botones, tablas, formularios, pop-ups (antes daltum-brand.css)
   ###################################################################### */
/**
 * Daltum Brand CSS
 * Sistema de diseño basado en el Visual Identity Manual de Daltum
 * Versión: 1.0
 * Fecha: 2026-03-18
 */

/* ===========================================
   FONT FACES - Switzer
   =========================================== */

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer/Switzer-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer/Switzer-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer/Switzer-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer/Switzer-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer/Switzer-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===========================================
   CSS VARIABLES - Design Tokens
   =========================================== */

:root {
  /* Colores Principales */
  --daltum-orange: #fa6101;
  --daltum-orange-rgb: 250, 97, 1;
  --daltum-pastel-orange: #ffcfa2;
  --daltum-pastel-orange-rgb: 255, 207, 162;
  --daltum-black: #101011;
  --daltum-black-rgb: 16, 16, 17;
  --daltum-white: #ffffff;
  --daltum-white-rgb: 255, 255, 255;

  /* Colores Secundarios */
  --daltum-deep-blue: #082382;
  --daltum-deep-blue-rgb: 8, 35, 130;
  --daltum-green: #00515c;
  --daltum-green-rgb: 0, 81, 92;
  --daltum-purple: #361984;
  --daltum-purple-rgb: 54, 25, 132;
  --daltum-electric-cyan: #a4f1f7;
  --daltum-electric-cyan-rgb: 164, 241, 247;
  --daltum-soft-violet: #eab9ff;
  --daltum-soft-violet-rgb: 234, 185, 255;
  --daltum-mellow-yellow: #ffffa4;
  --daltum-mellow-yellow-rgb: 255, 255, 164;

  /* Grises (tints del negro del brand) */
  --daltum-gray-90: rgba(16, 16, 17, 0.9);
  --daltum-gray-80: rgba(16, 16, 17, 0.8);
  --daltum-gray-70: rgba(16, 16, 17, 0.7);
  --daltum-gray-60: rgba(16, 16, 17, 0.6);
  --daltum-gray-50: rgba(16, 16, 17, 0.5);
  --daltum-gray-40: rgba(16, 16, 17, 0.4);
  --daltum-gray-30: rgba(16, 16, 17, 0.3);
  --daltum-gray-20: rgba(16, 16, 17, 0.2);
  --daltum-gray-10: rgba(16, 16, 17, 0.1);
  --daltum-gray-5: rgba(16, 16, 17, 0.05);

  /* Tipografía */
  --font-family-primary: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Espaciado */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(16, 16, 17, 0.05);
  --shadow-md: 0 4px 6px rgba(16, 16, 17, 0.07);
  --shadow-lg: 0 10px 15px rgba(16, 16, 17, 0.1);
  --shadow-xl: 0 20px 25px rgba(16, 16, 17, 0.15);

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* Iconos (Phosphor) */
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 48px;
}

/* ===========================================
   CLASES UTILITARIAS - COLORES DE FONDO
   =========================================== */

.bg-daltum-orange { background-color: var(--daltum-orange) !important; }
.bg-daltum-pastel-orange { background-color: var(--daltum-pastel-orange) !important; }
.bg-daltum-black { background-color: var(--daltum-black) !important; }
.bg-daltum-white { background-color: var(--daltum-white) !important; }
.bg-daltum-deep-blue { background-color: var(--daltum-deep-blue) !important; }
.bg-daltum-green { background-color: var(--daltum-green) !important; }
.bg-daltum-purple { background-color: var(--daltum-purple) !important; }
.bg-daltum-electric-cyan { background-color: var(--daltum-electric-cyan) !important; }
.bg-daltum-soft-violet { background-color: var(--daltum-soft-violet) !important; }
.bg-daltum-mellow-yellow { background-color: var(--daltum-mellow-yellow) !important; }

/* Grises */
.bg-daltum-gray-5 { background-color: var(--daltum-gray-5) !important; }
.bg-daltum-gray-10 { background-color: var(--daltum-gray-10) !important; }
.bg-daltum-gray-20 { background-color: var(--daltum-gray-20) !important; }

/* ===========================================
   CLASES UTILITARIAS - COLORES DE TEXTO
   =========================================== */

.text-daltum-orange { color: var(--daltum-orange) !important; }
.text-daltum-pastel-orange { color: var(--daltum-pastel-orange) !important; }
.text-daltum-black { color: var(--daltum-black) !important; }
.text-daltum-white { color: var(--daltum-white) !important; }
.text-daltum-deep-blue { color: var(--daltum-deep-blue) !important; }
.text-daltum-green { color: var(--daltum-green) !important; }
.text-daltum-purple { color: var(--daltum-purple) !important; }
.text-daltum-electric-cyan { color: var(--daltum-electric-cyan) !important; }
.text-daltum-soft-violet { color: var(--daltum-soft-violet) !important; }
.text-daltum-mellow-yellow { color: var(--daltum-mellow-yellow) !important; }

/* Grises */
.text-daltum-gray-60 { color: var(--daltum-gray-60) !important; }
.text-daltum-gray-80 { color: var(--daltum-gray-80) !important; }

/* ===========================================
   CLASES UTILITARIAS - TIPOGRAFÍA
   =========================================== */

.font-switzer {
  font-family: var(--font-family-primary) !important;
}

.text-switzer-light {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-light);
}

.text-switzer-regular {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
}

.text-switzer-medium {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
}

.text-switzer-semibold {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
}

.text-switzer-bold {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
}

/* ===========================================
   CLASES UTILITARIAS - BORDES
   =========================================== */

.border-daltum-orange { border-color: var(--daltum-orange) !important; }
.border-daltum-deep-blue { border-color: var(--daltum-deep-blue) !important; }
.border-daltum-green { border-color: var(--daltum-green) !important; }
.border-daltum-gray-10 { border-color: var(--daltum-gray-10) !important; }
.border-daltum-gray-20 { border-color: var(--daltum-gray-20) !important; }

/* ===========================================
   COMBINACIONES DE FONDO + TEXTO (Brand Book)
   =========================================== */

/* Orange background */
.daltum-theme-orange {
  background-color: var(--daltum-orange);
  color: var(--daltum-white);
}
.daltum-theme-orange h1,
.daltum-theme-orange h2,
.daltum-theme-orange h3,
.daltum-theme-orange .headline {
  color: var(--daltum-pastel-orange);
}

/* Deep Blue background */
.daltum-theme-deep-blue {
  background-color: var(--daltum-deep-blue);
  color: var(--daltum-white);
}
.daltum-theme-deep-blue h1,
.daltum-theme-deep-blue h2,
.daltum-theme-deep-blue h3,
.daltum-theme-deep-blue .headline {
  color: var(--daltum-mellow-yellow);
}

/* Green background */
.daltum-theme-green {
  background-color: var(--daltum-green);
  color: var(--daltum-white);
}
.daltum-theme-green h1,
.daltum-theme-green h2,
.daltum-theme-green h3,
.daltum-theme-green .headline {
  color: var(--daltum-soft-violet);
}

/* Purple background */
.daltum-theme-purple {
  background-color: var(--daltum-purple);
  color: var(--daltum-white);
}
.daltum-theme-purple h1,
.daltum-theme-purple h2,
.daltum-theme-purple h3,
.daltum-theme-purple .headline {
  color: var(--daltum-electric-cyan);
}

/* White background (default) */
.daltum-theme-white {
  background-color: var(--daltum-white);
  color: var(--daltum-black);
}
.daltum-theme-white a {
  color: var(--daltum-orange);
}

/* ===========================================
   HOVER STATES
   =========================================== */

.hover-daltum-orange:hover { color: var(--daltum-orange) !important; }
.hover-bg-daltum-orange:hover { background-color: var(--daltum-orange) !important; }

.hover-daltum-deep-blue:hover { color: var(--daltum-deep-blue) !important; }
.hover-bg-daltum-deep-blue:hover { background-color: var(--daltum-deep-blue) !important; }

/* ===========================================
   FOCUS STATES
   =========================================== */

.focus-daltum-orange:focus {
  outline: 2px solid var(--daltum-orange);
  outline-offset: 2px;
}

.focus-daltum-deep-blue:focus {
  outline: 2px solid var(--daltum-deep-blue);
  outline-offset: 2px;
}

/* ===========================================
   OVERRIDE BOOTSTRAP - Colores Daltum
   =========================================== */

/* Override del color primary de Bootstrap */
:root {
  --bs-primary: #fa6101 !important;
  --bs-primary-rgb: 250, 97, 1 !important;
  --bs-link-color: #fa6101 !important;
  --bs-link-hover-color: #e55800 !important;
}

/* Botones Primary - Naranja Daltum */
.btn-primary {
  background-color: var(--daltum-orange) !important;
  border-color: var(--daltum-orange) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #e55800 !important;
  border-color: #e55800 !important;
}

.btn-outline-primary {
  color: var(--daltum-orange) !important;
  border-color: var(--daltum-orange) !important;
}

.btn-outline-primary:hover {
  background-color: var(--daltum-orange) !important;
  border-color: var(--daltum-orange) !important;
  color: white !important;
}

/* Headers de Cards - Colores Daltum */
.card-header.bg-primary {
  background-color: var(--daltum-orange) !important;
}

.card-header.bg-info {
  background-color: var(--daltum-deep-blue) !important;
}

.card-header.bg-success {
  background-color: var(--daltum-green) !important;
}

.card-header.bg-secondary {
  background-color: var(--daltum-gray-60) !important;
}

/* Badges */
.badge.bg-primary {
  background-color: var(--daltum-orange) !important;
}

.badge.bg-info {
  background-color: var(--daltum-deep-blue) !important;
}

.badge.bg-success {
  background-color: var(--daltum-green) !important;
}

/* Text colors */
.text-primary {
  color: var(--daltum-orange) !important;
}

.text-info {
  color: var(--daltum-deep-blue) !important;
}

.text-success {
  color: var(--daltum-green) !important;
}

/* Border colors */
.border-primary {
  border-color: var(--daltum-orange) !important;
}

.border-info {
  border-color: var(--daltum-deep-blue) !important;
}

.border-success {
  border-color: var(--daltum-green) !important;
}

/* Links */
a {
  color: var(--daltum-orange);
}

a:hover {
  color: #e55800;
}

/* Progress bars */
.progress-bar {
  background-color: var(--daltum-orange) !important;
}

.progress-bar.bg-success {
  background-color: var(--daltum-green) !important;
}

.progress-bar.bg-info {
  background-color: var(--daltum-deep-blue) !important;
}

/* El resto de colores de Bootstrap también manda en las barras (26-oct). */
.progress-bar.bg-warning { background-color: #ffc107 !important; }
.progress-bar.bg-danger { background-color: #dc3545 !important; }
.progress-bar.bg-secondary { background-color: #6c757d !important; }
.progress-bar.bg-dark { background-color: #0F0F12 !important; }
.progress-bar.bg-light { background-color: #e9ecef !important; }
.progress-bar.bg-primary { background-color: var(--daltum-orange) !important; }
/* Barra de avance delgada (8px) para avances dentro de tarjetas: <div class="progress progress-fina">. */
.progress.progress-fina { height: 8px; }
.progress-bar.bg-secondary { background-color: #6c757d !important; }
.progress-bar.bg-dark { background-color: #0F0F12 !important; }
.progress-bar.bg-light { background-color: #e9ecef !important; }

/* ===========================================
   CARDS - Estandarización
   =========================================== */

/* Todas las cards con border-radius consistente */
.card {
  border-radius: var(--radius-lg) !important;
  /* sin !important: así las utilidades border-* / border-start border-primary de Bootstrap sí se ven (26-oct) */
  border: none;
  box-shadow: var(--shadow-sm) !important;
}

.card:hover {
  box-shadow: var(--shadow-md) !important;
}

.card-header {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border-bottom: none !important;
}

.card-header:first-child {
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0 !important;
}

/* ===========================================
   FASE 3: BOTONES - Todos los estilos
   =========================================== */

/* Todos los botones con tipografía Switzer */
.btn {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-semibold) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-fast) !important;
}

/* Secondary buttons - Deep Blue */
.btn-secondary {
  background-color: var(--daltum-deep-blue) !important;
  border-color: var(--daltum-deep-blue) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #061a66 !important;
  border-color: #061a66 !important;
}

.btn-outline-secondary {
  color: var(--daltum-deep-blue) !important;
  border-color: var(--daltum-deep-blue) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--daltum-deep-blue) !important;
  color: white !important;
}

/* Success buttons - Daltum Green */
.btn-success {
  background-color: var(--daltum-green) !important;
  border-color: var(--daltum-green) !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #003d45 !important;
  border-color: #003d45 !important;
}

/* Info buttons - Deep Blue */
.btn-info {
  background-color: var(--daltum-deep-blue) !important;
  border-color: var(--daltum-deep-blue) !important;
  color: white !important;
}

.btn-info:hover,
.btn-info:focus {
  background-color: #061a66 !important;
  border-color: #061a66 !important;
  color: white !important;
}

/* Warning buttons - Pastel Orange con texto oscuro */
.btn-warning {
  background-color: var(--daltum-pastel-orange) !important;
  border-color: var(--daltum-pastel-orange) !important;
  color: var(--daltum-black) !important;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #ffb870 !important;
  border-color: #ffb870 !important;
  color: var(--daltum-black) !important;
}

/* ===========================================
   FASE 5: TABLAS - Estilo Daltum
   =========================================== */

/* Todas las tablas */
.table {
  font-family: var(--font-family-primary) !important;
}

/* Headers de tabla - Deep Blue */
.table thead th,
.table-dark thead th {
  background-color: var(--daltum-deep-blue) !important;
  color: var(--daltum-white) !important;
  font-weight: var(--font-weight-semibold) !important;
  border: none !important;
  padding: 0.75rem 1rem !important;
}

/* Primera columna redondeada izquierda */
.table thead th:first-child {
  border-radius: var(--radius-md) 0 0 0 !important;
}

/* Última columna redondeada derecha */
.table thead th:last-child {
  border-radius: 0 var(--radius-md) 0 0 !important;
}

/* Filas alternas */
.table tbody tr:nth-child(even) {
  background-color: var(--daltum-gray-5) !important;
}

/* Hover en filas */
.table tbody tr:hover {
  background-color: var(--daltum-gray-10) !important;
}

/* Celdas */
.table tbody td {
  border-color: var(--daltum-gray-10) !important;
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
}

/* table-sm sí compacta (26-oct): la regla de celdas de arriba lleva padding !important */
.table.table-sm > :not(caption) > * > * {
  padding: 0.3rem 0.5rem !important;
}

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

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

/* Tabla hover - sobrescribir Bootstrap */
.table-hover > tbody > tr:hover > * {
  background-color: var(--daltum-gray-10) !important;
}

/* Variante con header naranja */
.table-orange thead th {
  background-color: var(--daltum-orange) !important;
}

/* Variante con header verde */
.table-green thead th {
  background-color: var(--daltum-green) !important;
}

/* ===========================================
   FASE 6: FORMS - Inputs y controles
   =========================================== */

/* Todos los inputs */
.form-control,
.form-select {
  font-family: var(--font-family-primary) !important;
  border: 1px solid var(--daltum-gray-20) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

/* Focus state - Naranja Daltum */
.form-control:focus,
.form-select:focus {
  border-color: var(--daltum-orange) !important;
  box-shadow: 0 0 0 3px rgba(250, 97, 1, 0.15) !important;
  outline: none !important;
}

/* Labels */
.form-label,
label {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--daltum-gray-80) !important;
}

/* Checkboxes y Radios */
.form-check-input:checked {
  background-color: var(--daltum-orange) !important;
  border-color: var(--daltum-orange) !important;
}

.form-check-input:focus {
  border-color: var(--daltum-orange) !important;
  box-shadow: 0 0 0 3px rgba(250, 97, 1, 0.15) !important;
}

/* Input groups */
.input-group-text {
  background-color: var(--daltum-gray-5) !important;
  border-color: var(--daltum-gray-20) !important;
  font-family: var(--font-family-primary) !important;
}

/* Validation states */
.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--daltum-green) !important;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  box-shadow: 0 0 0 3px rgba(0, 81, 92, 0.15) !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #dc3545 !important;
}

/* ===========================================
   DROPDOWNS - Menús desplegables
   =========================================== */

.dropdown-menu {
  font-family: var(--font-family-primary) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

.dropdown-item {
  font-family: var(--font-family-primary) !important;
  padding: 0.5rem 1rem !important;
  transition: background-color var(--transition-fast) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--daltum-gray-5) !important;
  color: var(--daltum-orange) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--daltum-orange) !important;
  color: white !important;
}

/* ===========================================
   MODALS - Ventanas modales
   =========================================== */

.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}

.modal-header {
  border-bottom: 1px solid var(--daltum-gray-10) !important;
  font-family: var(--font-family-primary) !important;
}

.modal-title {
  font-weight: var(--font-weight-semibold) !important;
}

.modal-footer {
  border-top: 1px solid var(--daltum-gray-10) !important;
}

/* UN SOLO encabezado para TODOS los pop-ups (POC 26-oct-2026: "no quiero que ninguna página
   o pop up parezca diferente"). Naranja de la marca con letra blanca, sin importar el bg-*
   que traiga cada plantilla (había 7 variantes: blanco, naranja, verde, ámbar, azul, rojo...). */
.modal-header,
.modal-header[class*="bg-"],
#helpModal .modal-header {
  background-color: var(--daltum-orange) !important;
  background-image: none !important;
  color: #fff !important;
  border-bottom: 0 !important;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0 !important;
}
.modal-header .modal-title,
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6,
.modal-header i, .modal-header small, .modal-header .small,
.modal-header .text-muted, .modal-header .text-dark, .modal-header .text-white-50 {
  color: #fff !important;
}
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .85;
}
.modal-header .btn-close:hover { opacity: 1; }

/* ===========================================
   ALERTS - Mensajes de alerta
   =========================================== */

.alert {
  font-family: var(--font-family-primary) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
}

.alert-primary {
  background-color: rgba(250, 97, 1, 0.1) !important;
  color: var(--daltum-orange) !important;
}

.alert-info {
  background-color: rgba(8, 35, 130, 0.1) !important;
  color: var(--daltum-deep-blue) !important;
}

.alert-success {
  background-color: rgba(0, 81, 92, 0.1) !important;
  color: var(--daltum-green) !important;
}

/* ===========================================
   PAGINATION - Paginación
   =========================================== */

.page-link {
  font-family: var(--font-family-primary) !important;
  color: var(--daltum-orange) !important;
  border-color: var(--daltum-gray-20) !important;
}

.page-link:hover {
  background-color: var(--daltum-gray-5) !important;
  color: var(--daltum-orange) !important;
}

.page-item.active .page-link {
  background-color: var(--daltum-orange) !important;
  border-color: var(--daltum-orange) !important;
  color: white !important;
}

/* ===========================================
   NAV TABS - Pestañas
   =========================================== */

.nav-tabs .nav-link {
  font-family: var(--font-family-primary) !important;
  color: var(--daltum-gray-60) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
}

.nav-tabs .nav-link:hover {
  color: var(--daltum-orange) !important;
  border-bottom-color: var(--daltum-gray-20) !important;
}

.nav-tabs .nav-link.active {
  color: var(--daltum-orange) !important;
  border-bottom-color: var(--daltum-orange) !important;
  background-color: transparent !important;
}

/* ===========================================
   NAV PILLS - Pills/Botones de navegación
   =========================================== */

.nav-pills .nav-link {
  font-family: var(--font-family-primary) !important;
  color: var(--daltum-gray-60) !important;
  border-radius: var(--radius-md) !important;
}

.nav-pills .nav-link:hover {
  color: var(--daltum-orange) !important;
  background-color: var(--daltum-gray-5) !important;
}

.nav-pills .nav-link.active {
  background-color: var(--daltum-orange) !important;
  color: white !important;
}

/* ===========================================
   ESTILOS GLOBALES - Aplicación gradual
   =========================================== */

/* Aplicar Switzer a todo el documento */
body {
  font-family: var(--font-family-primary);
}

/* Headings con Switzer Semibold */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
}

/* Links con color Daltum Orange en hover */
a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--daltum-orange);
}

/* ===========================================
   BOTONES DALTUM
   =========================================== */

.btn-daltum-primary {
  background-color: var(--daltum-orange);
  border-color: var(--daltum-orange);
  color: var(--daltum-white);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.btn-daltum-primary:hover,
.btn-daltum-primary:focus {
  background-color: #e55800;
  border-color: #e55800;
  color: var(--daltum-white);
  box-shadow: var(--shadow-md);
}

.btn-daltum-secondary {
  background-color: var(--daltum-deep-blue);
  border-color: var(--daltum-deep-blue);
  color: var(--daltum-white);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.btn-daltum-secondary:hover,
.btn-daltum-secondary:focus {
  background-color: #061a66;
  border-color: #061a66;
  color: var(--daltum-white);
  box-shadow: var(--shadow-md);
}

.btn-daltum-outline {
  background-color: transparent;
  border: 2px solid var(--daltum-orange);
  color: var(--daltum-orange);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.btn-daltum-outline:hover,
.btn-daltum-outline:focus {
  background-color: var(--daltum-orange);
  color: var(--daltum-white);
}

.btn-daltum-outline-secondary {
  background-color: transparent;
  border: 2px solid var(--daltum-deep-blue);
  color: var(--daltum-deep-blue);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.btn-daltum-outline-secondary:hover,
.btn-daltum-outline-secondary:focus {
  background-color: var(--daltum-deep-blue);
  color: var(--daltum-white);
}

/* ===========================================
   CARDS DALTUM
   =========================================== */

.card-daltum {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}

.card-daltum:hover {
  box-shadow: var(--shadow-md);
}

.card-daltum .card-header {
  background-color: var(--daltum-gray-5);
  border-bottom: 1px solid var(--daltum-gray-10);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
}

.card-daltum-orange .card-header {
  background-color: var(--daltum-orange);
  color: var(--daltum-white);
}

.card-daltum-blue .card-header {
  background-color: var(--daltum-deep-blue);
  color: var(--daltum-white);
}

.card-daltum-green .card-header {
  background-color: var(--daltum-green);
  color: var(--daltum-white);
}

/* ===========================================
   BADGES DALTUM
   =========================================== */

.badge-daltum-orange {
  background-color: var(--daltum-orange);
  color: var(--daltum-white);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

.badge-daltum-blue {
  background-color: var(--daltum-deep-blue);
  color: var(--daltum-white);
}

.badge-daltum-green {
  background-color: var(--daltum-green);
  color: var(--daltum-white);
}

.badge-daltum-purple {
  background-color: var(--daltum-purple);
  color: var(--daltum-white);
}

/* ===========================================
   FORM CONTROLS DALTUM
   =========================================== */

.form-control-daltum {
  border: 1px solid var(--daltum-gray-20);
  border-radius: var(--radius-md);
  font-family: var(--font-family-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control-daltum:focus {
  border-color: var(--daltum-orange);
  box-shadow: 0 0 0 3px rgba(250, 97, 1, 0.15);
  outline: none;
}

/* ===========================================
   TABLAS DALTUM
   =========================================== */

.table-daltum {
  font-family: var(--font-family-primary);
}

.table-daltum thead th {
  background-color: var(--daltum-deep-blue);
  color: var(--daltum-white);
  font-weight: var(--font-weight-semibold);
  border: none;
}

.table-daltum tbody tr:nth-child(even) {
  background-color: var(--daltum-gray-5);
}

.table-daltum tbody tr:hover {
  background-color: var(--daltum-gray-10);
}

/* Variante con header naranja */
.table-daltum-orange thead th {
  background-color: var(--daltum-orange);
}

/* Variante con header verde */
.table-daltum-green thead th {
  background-color: var(--daltum-green);
}

/* ===========================================
   FASE 7: DASHBOARD Y KPIs
   =========================================== */

/* KPI Cards del Dashboard */
.kpi-card,
.metric-card {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-normal) !important;
  font-family: var(--font-family-primary) !important;
}

.kpi-card:hover,
.metric-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Porcentajes grandes en KPIs */
.display-percentage,
.kpi-value,
.metric-value {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--daltum-orange) !important;
}

/* Las cifras grandes son naranjas, PERO una utilidad de color manda (26-oct: varios grupos
   necesitaban rojo/verde/ámbar y la regla de arriba se los comía). Mismos tonos que .text-*. */
.display-percentage.text-primary, .kpi-value.text-primary, .metric-value.text-primary { color: var(--daltum-orange) !important; }
.display-percentage.text-info, .kpi-value.text-info, .metric-value.text-info { color: var(--daltum-deep-blue) !important; }
.display-percentage.text-success, .kpi-value.text-success, .metric-value.text-success { color: var(--daltum-green) !important; }
.display-percentage.text-danger, .kpi-value.text-danger, .metric-value.text-danger { color: #dc3545 !important; }
.display-percentage.text-warning, .kpi-value.text-warning, .metric-value.text-warning { color: #b58100 !important; }
.display-percentage.text-dark, .kpi-value.text-dark, .metric-value.text-dark { color: #0F0F12 !important; }
.display-percentage.text-secondary, .kpi-value.text-secondary, .metric-value.text-secondary { color: #6c757d !important; }
.display-percentage.text-muted, .kpi-value.text-muted, .metric-value.text-muted { color: #6c757d !important; }

/* Widgets del Dashboard */
.dashboard-widget,
.widget-card {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Headers de widgets */
.widget-header,
.dashboard-widget .card-header {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* Semáforos - mantener colores pero suavizar */
.badge.bg-success,
.semaforo-verde {
  background-color: var(--daltum-green) !important;
}

.badge.bg-warning,
.semaforo-amarillo {
  background-color: #f59e0b !important;
  color: var(--daltum-black) !important;
}

.badge.bg-danger,
.semaforo-rojo {
  background-color: #dc2626 !important;
}

/* Stat cards (saldo, proyecciones, etc.) */
.stat-card {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.stat-card .stat-value {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-bold) !important;
}

.stat-card .stat-label {
  font-family: var(--font-family-primary) !important;
  color: var(--daltum-gray-60) !important;
}

/* ===========================================
   ACCORDIONS - Estilo Daltum
   =========================================== */

.accordion-button {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-semibold) !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--daltum-gray-5) !important;
  color: var(--daltum-orange) !important;
}

.accordion-button:focus {
  border-color: var(--daltum-orange) !important;
  box-shadow: 0 0 0 3px rgba(250, 97, 1, 0.15) !important;
}

.accordion-item {
  border-color: var(--daltum-gray-10) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.5rem !important;
}

/* ===========================================
   SPINNERS Y LOADING
   =========================================== */

.spinner-border {
  color: var(--daltum-orange) !important;
}

.spinner-grow {
  color: var(--daltum-orange) !important;
}

/* ===========================================
   TOOLTIPS
   =========================================== */

.tooltip-inner {
  font-family: var(--font-family-primary) !important;
  background-color: var(--daltum-black) !important;
  border-radius: var(--radius-sm) !important;
}

/* ===========================================
   ICONOS Y ACCIONES
   =========================================== */

/* Iconos de acción */
.action-icon,
.btn-icon {
  color: var(--daltum-gray-60) !important;
  transition: color var(--transition-fast) !important;
}

.action-icon:hover,
.btn-icon:hover {
  color: var(--daltum-orange) !important;
}

/* ===========================================
   OVERRIDE FINAL - Alta especificidad
   =========================================== */

/* Asegurar que todos los elementos usen Switzer */
body,
body * {
  font-family: var(--font-family-primary, 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif);
}

/* Headers siempre Semibold */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-header,
.modal-title,
.accordion-button,
th {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* Links con color naranja. :where() baja la fuerza a la de un simple 'a' para que un
   componente pueda poner su color (26-oct). */
a:where(:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge)) {
  color: var(--daltum-orange);
}

a:where(:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge)):hover {
  color: #e55800;
}


/* ######################################################################
   5. Cabecera común (antes primer bloque <style> de base.html)
   ###################################################################### */
        /* Estandarizar tamaños de fuente en todo el sitio */
        body {
            font-size: 0.875rem;
        }
        
        /* Navbar */
        .navbar {
            font-size: 0.875rem;
        }
        
        .navbar-brand {
            font-size: 1.25rem !important;
        }
        
        .nav-link {
            font-size: 0.875rem !important;
        }
        
        .dropdown-toggle {
            font-size: 0.875rem !important;
        }
        
        .dropdown-menu {
            font-size: 0.875rem;
        }
        
        /* Botones generales */
        .btn {
            font-size: 0.875rem;
        }
        
        /* Tablas */
        .table {
            font-size: 0.875rem;
        }
        
        .table th {
            font-size: 0.8rem;
        }
        
        .table td {
            font-size: 0.8rem;
        }
        
        /* Cards */
        .card-header {
            font-size: 1rem;
        }
        
        .card-body {
            font-size: 0.875rem;
        }
        
        /* Modales */
        .modal-title {
            font-size: 1.25rem;
        }
        
        .modal-body {
            font-size: 0.875rem;
        }

        /* ========== RESPONSIVE MOBILE IMPROVEMENTS ========== */

        /* Touch-friendly buttons on mobile */
        @media (max-width: 767.98px) {
            .btn {
                min-height: 44px;
                padding: 0.5rem 0.75rem;
            }

            .btn-sm {
                min-height: 38px;
                padding: 0.375rem 0.5rem;
            }

            /* Reduce card padding on mobile */
            .card-body {
                padding: 0.75rem;
            }

            /* Smaller display sizes on mobile */
            .display-4, .display-5, .display-6 {
                font-size: 2rem;
            }

            /* Reduce margins on mobile */
            .mb-4 {
                margin-bottom: 0.75rem !important;
            }

            .mt-4 {
                margin-top: 0.75rem !important;
            }

            /* Compact table on mobile */
            .table td, .table th {
                padding: 0.4rem;
                font-size: 0.75rem;
            }

            /* Truncate long text */
            .text-truncate-mobile {
                max-width: 120px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            /* Status indicator styling */
            .status-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                display: inline-block;
                flex-shrink: 0;
            }
        }

        /* Extra small screens (phones < 576px) */
        @media (max-width: 575.98px) {
            body {
                font-size: 0.8rem;
            }

            .card-body {
                padding: 0.5rem;
            }

            .btn {
                font-size: 0.75rem;
            }

            h1, .h1 { font-size: 1.5rem; }
            h2, .h2 { font-size: 1.25rem; }
            h3, .h3 { font-size: 1.1rem; }
            h4, .h4 { font-size: 1rem; }
            h5, .h5, h6, .h6 { font-size: 0.9rem; }

            .container-fluid {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }

            /* Dashboard card specific */
            .card-title {
                font-size: 0.85rem !important;
            }

            .card-text {
                font-size: 0.75rem;
            }
        }

        /* Status dot for system status */
        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
        }

        /* Helper classes for responsive display sizes */
        @media (min-width: 768px) {
            .display-md-4 { font-size: 3.5rem; }
            .h5-md { font-size: 1.25rem; }
            .btn-md-normal { font-size: 0.875rem; padding: 0.5rem 1rem; }
        }
    


/* ######################################################################
   6. Aviso de suplantación (antes en base.html)
   ###################################################################### */
        /* Impersonation Banner */
        .impersonation-banner {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
            color: white;
            padding: 10px 0;
            text-align: center;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            position: sticky;
            top: 0;
            z-index: 1050;
        }

        .impersonation-banner i {
            margin-right: 8px;
        }

        .impersonation-banner .btn-return {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.5);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.875rem;
            margin-left: 15px;
            transition: all 0.2s;
        }

        .impersonation-banner .btn-return:hover {
            background: rgba(255,255,255,0.3);
            border-color: white;
        }
    


/* ######################################################################
   7. Submenús y buscador Ctrl+K (antes en base.html)
   ###################################################################### */
    /* submenús de Operaciones (19-ago) */
    .dropdown-submenu { position: relative; list-style: none; }
    .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -8px; display: none; }
    .dropdown-submenu:hover > .dropdown-menu { display: block; }
    .dropdown-submenu > a.dropdown-toggle::after { transform: rotate(-90deg); float: right; margin-top: 8px; }
    @media (max-width: 991px) {
      .dropdown-submenu > .dropdown-menu { position: static; left: 0; margin-left: 14px; }
    }
        th.tabla-asc,th.tabla-desc{color:#FA6100}
    /* Buscador de paginas Ctrl+K (28-sep-2026) */
    .bp-fondo{position:fixed;inset:0;background:rgba(20,25,35,.45);z-index:2000;display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
    .bp-caja{width:min(640px,92vw);background:#fff;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden}
    .bp-entrada{width:100%;border:0;border-bottom:1px solid #e5e7eb;padding:14px 18px;font-size:1.05rem;outline:none}
    .bp-lista{max-height:52vh;overflow:auto}
    .bp-item{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;text-decoration:none;color:#1f2937}
    .bp-item.activo,.bp-item:hover{background:#fff4ec;color:#1f2937}
    .bp-titulo{font-weight:600}.bp-grupo{color:#6b7280;font-size:.85rem;white-space:nowrap}
    .bp-vacio{padding:16px 18px;color:#6b7280}.bp-pie{padding:8px 18px;font-size:.75rem;color:#9ca3af;border-top:1px solid #f1f5f9}


/* ######################################################################
   8. Componentes del Dashboard: franja de indicadores (kpi-strip/kpi-tile),
      pastillas (kpi-chip), tarjetas de widget, resúmenes, puntos de estado,
      tablas dentro de pop-ups, columnas ordenables, cargando y vacío.
      (antes dentro de templates/dashboard_new.html)
      Las medidas aplican dentro de class="tablero" (el acomodo del Dashboard):
      con nombres genéricos como .chart-container, sin el prefijo aplastaban otras
      páginas mientras dura la migración (26-oct, Mi Dashboard). Pop-ups,
      etiquetas y columnas ordenables sí son globales.
   ###################################################################### */
/* ========== Status Dots - Profesionales (Scaling Up) ========== */
.tablero .status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
}

.tablero .status-dot-lg {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

.tablero .status-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.tablero .status-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.tablero .status-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.tablero .status-secondary {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    box-shadow: 0 0 8px rgba(156, 163, 175, 0.3);
}

.tablero .status-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

/* ========== KPI Cards ========== */
.tablero .kpi-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 130px;
}

.tablero .kpi-card .card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tablero .kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
}

/* Porcentaje prominente */
.tablero .display-percentage {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Finance Dashboard V2 Styles */
.tablero .finance-dashboard-v2 {
    position: relative;
}
.tablero .finance-dashboard-v2 .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}
.tablero .finance-dashboard-v2 .card {
    transition: box-shadow 0.2s;
}
.tablero .finance-dashboard-v2 .card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.tablero .finance-dashboard-v2 .opacity-25 {
    opacity: 0.25;
}

.tablero .widget-card {
    height: 450px;
    transition: transform 0.2s;
}
.tablero .widget-card:hover {
    transform: translateY(-5px);
}
.tablero .chart-container {
    position: relative;
    height: 210px; /* 300→260 (POC 9-jul) →210 (POC 12-ago): deja lugar a
                      Ventas eComm 30d y Acciones pendientes al costado */
    margin-bottom: 20px;
    background-color: #ffffff;
    border-radius: 4px;
}
.tablero .chart-container canvas {
    background-color: #ffffff;
}
/* Ensure cards maintain white background in dark mode */
.tablero .widget-card,
.tablero .widget-card .card-body {
    background-color: #ffffff !important;
}
.tablero .summary-box {
    background: #f8f9fa !important;
    border-radius: 8px;
    padding: 12px;
    margin-top: auto;
    color: #212529 !important;
}
.tablero .summary-stat {
    text-align: center;
    padding: 8px;
}
.tablero .summary-stat h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
}
.tablero .summary-stat p {
    margin: 0;
    color: #7f8c8d;
    font-size: 0.75rem;
    margin-top: 2px;
}
/* Acomodo tipo Dashboard: el contenido de cada tarjeta en columna, para que
   los resúmenes (summary-box) bajen al pie. */
.tablero .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Estilos para iconos clickeables */
.clickable-icon {
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}
.clickable-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}
.clickable-icon:active {
    transform: scale(0.95);
}

.modal .table {
    font-size: 0.8rem;
}

.modal .table thead {
    background: #495057;
    font-weight: 600;
}

.modal .table thead th {
    border: none;
    padding: 0.75rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #212529 !important; /* Texto gris oscuro */
    background-color: #e9ecef !important; /* Fondo gris claro */
}

/* Fix para text-end en headers */
.modal .table thead th.text-end,
.modal .table tfoot th.text-end,
.overdue-table thead th.text-end,
.overdue-table tfoot th.text-end {
    text-align: right !important;
}

.modal .table tbody tr:hover {
    background-color: #f8f9fa;
}

.modal .table tfoot {
    font-weight: 600;
    background-color: #e9ecef;
}

/* Cards en modales */
.modal .card {
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.modal .card h6 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal .card h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
}

/* Estilos para las tablas de facturas vencidas */
.overdue-invoices-section {
    margin-top: 2rem;
    border-top: 2px solid #dee2e6;
    padding-top: 2rem;
}

.overdue-invoices-section h6 {
    color: #dc3545;
    font-weight: 600;
    margin-bottom: 1rem;
}

.overdue-table {
    font-size: 0.8rem;
}

.overdue-table thead th {
    background-color: #e9ecef !important;
    color: #212529 !important;
    font-weight: 600;
}

.overdue-table tbody tr:hover {
    background-color: #fff5f5;
}

/* Badges mejorados */
.badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
}

/* Etiquetas dentro de tablas: un punto más compactas que las sueltas, para que
   tablas con muchas columnas no empujen la de Acciones fuera de la pantalla
   (26-oct: Reglas de Comisión y Panel de Acciones se cortaban). */
.table .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

/* Animación de carga */
.spinner-border {
    width: 2rem;
    height: 2rem;
}

/* El chico (dentro de botones y etiquetas) conserva su tamaño: la regla de arriba lo agrandaba (26-oct). */
.spinner-border.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Estilos para el header colapsable */
.card-header[data-bs-toggle="collapse"] {
    transition: background-color 0.3s ease;
}

.card-header[data-bs-toggle="collapse"]:hover {
    background-color: #0dcaf0 !important;
    filter: brightness(0.9);
}

/* Estilos para el colapso de facturas vencidas */
.collapse-icon {
    transition: transform 0.3s ease;
}

[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

h6[data-bs-toggle="collapse"]:hover {
    opacity: 0.8;
}

/* Estilos para el resumen */
.tablero .card-body .row.text-center h4 {
    transition: all 0.3s ease;
}

/* Estilos para mostrar datos de clientes y proveedores */
.tablero .summary-stat h4 {
    line-height: 1.2;
}

.tablero .summary-stat h4 div {
    margin-bottom: 0.25rem;
}

.tablero .summary-stat h4 div.text-danger {
    font-size: 0.9rem;
}

.tablero .summary-stat h4 div.small {
    font-size: 0.8rem;
}

/* Estilos para columnas ordenables */
.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.sortable:hover {
    /* 26-oct: antes pintaba #f8f9fa !important y el encabezado azul marino quedaba en blanco */
    opacity: .85;
}

.sortable i {
    margin-left: 5px;
    font-size: 0.75rem;
}

.sortable i.fa-sort-up,
.sortable i.fa-sort-down {
    font-weight: bold;
}

/* Estilos Dashboard Financiero */
.tablero .financial-dashboard {
    padding: 20px;
}

.tablero .financial-dashboard .kpi-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tablero .financial-dashboard .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tablero .kpi-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.tablero .kpi-value {
    font-size: 2rem;
    font-weight: bold;
    margin: 10px 0;
}

.tablero .kpi-label {
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 600;
}

.tablero .kpi-subtitle {
    font-size: 0.85rem;
    color: #888;
    margin-top: 5px;
}

.tablero .trend-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
}

.tablero .trend-increasing {
    background-color: #dc3545;
    color: white;
}

.tablero .trend-stable {
    background-color: #28a745;
    color: white;
}

.tablero .trend-decreasing {
    background-color: #28a745;
    color: white;
}

.tablero .alert-item {
    border-left: 4px solid;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: white;
}

.tablero .alert-item.alert-critical {
    border-left-color: #dc3545;
    background-color: #f8d7da;
}

.tablero .alert-item.alert-warning {
    border-left-color: #ffc107;
    background-color: #fff3cd;
}

.tablero .alert-item.alert-info {
    border-left-color: #17a2b8;
    background-color: #d1ecf1;
}

.tablero .section-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #2c3e50;
    border-left: 4px solid var(--daltum-orange);
    padding-left: 15px;
}

.tablero .factoring-company {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.tablero .factoring-company-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.tablero .factoring-stat {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    font-size: 0.9rem;
}

.tablero .factoring-stat-label {
    color: #6c757d;
}

.tablero .factoring-stat-value {
    font-weight: 600;
}

.tablero .progress-custom {
    height: 25px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #e9ecef;
}

.tablero .progress-bar-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    transition: width 0.6s ease;
}

.tablero .no-alerts-message {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

.tablero .no-alerts-message i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #28a745;
}

/* 26-oct: aquí había una 2ª definición de .tablero .status-* (color de texto) que nadie usaba y se encimaba con el semáforo de arriba. */

.tablero .loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.tablero .loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Cards de igual altura (Acciones + Ingresos del periodo) */
.tablero .dashboard-equal-card {
    height: 440px;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.tablero .dashboard-equal-card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* ── Franja de KPIs del Resumen (13-ago-2026) ──────────────────────────
   Cuatro indicadores en un renglón, con el número como protagonista.
   Sustituye a los cards con ícono de 3rem que ocupaban toda la pantalla. */
.tablero .kpi-strip .kpi-tile {
    padding: .85rem 1.1rem;
    border-right: 1px solid rgba(0, 0, 0, .07);
}
.tablero .kpi-strip .kpi-tile:last-child { border-right: 0; }
@media (max-width: 991.98px) {
    /* En dos columnas: la de la derecha no lleva línea vertical y cada
       renglón se separa del siguiente. Sirve para cualquier número de
       tiles (hoy son cinco con Saldo proyectado). */
    .tablero .kpi-strip .kpi-tile { border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .tablero .kpi-strip .kpi-tile:nth-child(even) { border-right: 0; }
    .tablero .kpi-strip .kpi-tile:last-child { border-bottom: 0; }
}
.tablero .kpi-strip .kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.tablero .kpi-strip .kpi-label {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
    line-height: 1.2;
}
.tablero .kpi-strip .kpi-icon { font-size: 1.05rem; opacity: .35; }
.tablero .kpi-strip .kpi-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.15;
    color: #0F0F12;
    margin-top: .1rem;
}
.tablero .kpi-strip .kpi-sub { font-size: .74rem; color: #8a8f98; }
.tablero .kpi-strip .kpi-clickable { cursor: pointer; }
.tablero .kpi-strip .kpi-tile.kpi-clickable:hover { background: rgba(250, 97, 0, .04); }
.tablero .kpi-strip .kpi-tile.kpi-clickable:hover .kpi-icon { opacity: .6; }
.tablero .kpi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .4rem;
}
.tablero .kpi-chip {
    display: inline-flex;      /* también se usa como <a> en Ventas eCommerce */
    align-items: center;
    font-size: .68rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.tablero .kpi-chip b { margin: 0 .15rem; }
.tablero .kpi-chip span { opacity: .75; }
.tablero .kpi-chip-ok { background: #e8f5ee; color: #14663c; border-color: #cfe9db !important; }
.tablero .kpi-chip-warn { background: #fff4e5; color: #8a4b00; border-color: #ffe0b8 !important; }
.tablero .kpi-chip-bad { background: #fdecec; color: #a12020; border-color: #f8d3d3 !important; }
.tablero .kpi-chip:hover { filter: brightness(.96); }


/* ######################################################################
   9. Componentes — grupo varios (migración 26-oct-2026; se consolidan al final)
   ###################################################################### */
/* Utilidades genéricas (sub-equipo varios-E). */
/* Caja con scroll vertical: listas largas dentro de tarjetas o pop-ups. */
.caja-desplazable { max-height: 300px; overflow-y: auto; }
/* Texto que respeta saltos de línea (descripciones, notas, logs cortos). */
.texto-preformado { white-space: pre-wrap; }
/* Elemento clicable que no es botón ni enlace (renglones con onclick, <summary>). */
.cursor-mano { cursor: pointer; }
/* Celda de tabla con texto largo truncado (va con text-truncate en su contenido). */
.celda-texto-largo { max-width: 320px; }

/* Tarjeta seleccionable: una card que filtra/elige al hacer clic; .active la marca en naranja
   (p. ej. categorías de Documentación de procesos). */
.tarjeta-seleccionable {
    cursor: pointer;
    border: 2px solid transparent;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.tarjeta-seleccionable:hover { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .10); }
.tarjeta-seleccionable.active { border-color: #FA6100; }

/* Icono en cuadro redondeado con fondo de color (el color lo pone el dato: categoría, tipo). */
.icono-cuadro {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #fff;
    background-color: #6c757d;
}
.icono-cuadro-sm { width: 34px; height: 34px; border-radius: 8px; font-size: 1rem; }

/* Pastilla neutra (gris) para la franja/etiquetas del Dashboard: tipo, categoría, sin semáforo. */
.tablero .kpi-chip-neutro { background: #f1f3f5; color: #495057; border-color: #e3e6ea !important; }
/* Sección de pestaña manejada por JS (sub-equipo varios-D): oculta hasta que
   el script le pone .active. Para pestañas hechas a mano sin tab-pane de Bootstrap. */
.tab-content-section { display: none; }
.tab-content-section.active { display: block; }
/* Renglón/tarjeta con franja izquierda por prioridad (listas de pendientes).
   Uso: class="franja-prioridad prioridad-{critical|high|normal|low} [vencida]" */
.franja-prioridad { border-left: 4px solid #adb5bd; background: #fff; }
.franja-prioridad:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.franja-prioridad.prioridad-critical,
.franja-prioridad.prioridad-high { border-left-color: #FA6100; }
.franja-prioridad.prioridad-normal { border-left-color: #00515c; }
.franja-prioridad.prioridad-low { border-left-color: #adb5bd; }
.franja-prioridad.vencida { background: #fef9f7; }
/* Columna lateral angosta y fija dentro de un renglón flex (responsable, dueño). */
.columna-lateral { min-width: 180px; max-width: 180px; border-left: 1px solid #eee; padding-left: 12px; }
/* Estado vacío fuera de un .tablero (mismo aspecto que no-alerts-message). */
.estado-vacio { padding: 60px 20px; text-align: center; color: #6c757d; }
.estado-vacio > i { font-size: 4rem; color: #dee2e6; margin-bottom: 20px; }
/* Bloque de código o JSON crudo (payloads, respuestas de API) con scroll propio
   (sub-equipo varios-D). Va en un <pre>. */
.bloque-codigo {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .75rem 1rem;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
/* Ícono dentro de un círculo de 40px (avatar de renglón en listas). */
.icono-circulo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Buscador/filtro de ancho fijo junto a un título o contador (sub-equipo varios-D). */
.campo-buscar { width: 300px; max-width: 100%; }


/* ######################################################################
   9. Componentes — grupo operaciones (migración 26-oct-2026; se consolidan al final)
   ###################################################################### */
/* Diálogo nativo (<dialog> que el JS abre con showModal()): pop-up sin Bootstrap con el
   aspecto de un modal. Uso: <dialog class="dialogo"><div class="dialogo-cuerpo">
   <h5 class="dialogo-titulo">…</h5> … </div></dialog>. Ancho mayor: + .dialogo-lg */
dialog.dialogo {
    border: 0;
    border-radius: .5rem;
    padding: 0;
    width: min(520px, 94vw);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
dialog.dialogo.dialogo-lg { width: min(760px, 96vw); }
dialog.dialogo::backdrop { background: rgba(15, 15, 18, .45); }
.dialogo .dialogo-cuerpo { padding: 1.25rem 1.5rem; }
.dialogo .dialogo-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 .25rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #FA6100;
}

/* Pasos de un proceso en orden (ciclo mensual, flujo con etapas). Cada paso: número en
   círculo, cuerpo y acciones a la derecha. Estado: .actual (naranja), .listo, .devuelto.
   Uso: <div class="paso-proceso actual"><div class="paso-proceso-num">1</div>
        <div class="paso-proceso-cuerpo">…</div><div class="paso-proceso-acciones">…</div></div> */
.paso-proceso {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e9e9ec;
    border-radius: .5rem;
    padding: 1rem 1.1rem;
    margin-bottom: .75rem;
}
.paso-proceso.actual { border-color: #FA6100; box-shadow: 0 0 0 3px rgba(250, 97, 0, .08); }
.paso-proceso.listo { background: #f8fbf8; }
.paso-proceso-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    background: #eef0f2;
    color: #6b7280;
}
.paso-proceso.listo .paso-proceso-num { background: #00515c; color: #fff; }
.paso-proceso.actual .paso-proceso-num { background: #FA6100; color: #fff; }
.paso-proceso.devuelto .paso-proceso-num { background: #dc3545; color: #fff; }
.paso-proceso-cuerpo { flex: 1; min-width: 0; }
.paso-proceso-acciones { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
@media (max-width: 760px) {
    .paso-proceso { flex-wrap: wrap; }
    .paso-proceso-acciones { width: 100%; }
}

/* Gráfica de barras verticales simple (sin Chart.js), p. ej. neto mensual.
   La altura de cada barra la pone el JS (el.style.height = 'NN%').
   Uso: .barras-v > .barras-v-col > .barras-v-barra.positivo|.negativo + .barras-v-etiqueta */
.barras-v {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 180px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 2px;
}
.barras-v-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.barras-v-barra {
    width: 70%;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    background: #adb5bd;
    transition: height .4s;
}
.barras-v-barra.positivo { background: #198754; }
.barras-v-barra.negativo { background: #dc3545; }
.barras-v-etiqueta {
    font-size: .62rem;
    color: #8a8f98;
    margin-top: 4px;
    transform: rotate(-30deg);
    white-space: nowrap;
}
/* Caja con scroll vertical alta (listas de selección largas; la normal es .caja-desplazable). */
.caja-desplazable-lg { max-height: 500px; overflow-y: auto; }
/* Columna angosta de casillas de selección en tablas. */
.columna-casilla { width: 50px; }
/* Barra de avance alta, con el porcentaje escrito adentro legible. */
.barra-avance-alta { height: 24px; }
/* Cifra de dinero/cantidad: a la derecha y con dígitos de ancho fijo para que las columnas cuadren. */
.cifra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Campos de captura de ancho fijo (en tablas o renglones de filtros, donde form-control tomaría el 100%). */
.campo-corto { width: 5rem; }
.campo-mediano { width: 7.5rem; }
.campo-fecha { width: 10rem; max-width: 100%; }
/* Dentro de un input-group, Bootstrap pone a .form-control width:1% + flex:1 y les ganaba: el campo
   corto quedaba aplastado (26-oct). Aquí mandan su ancho fijo. */
.input-group > .campo-corto { flex: 0 0 5rem; width: 5rem; }
.input-group > .campo-mediano { flex: 0 0 7.5rem; width: 7.5rem; }
.input-group > .campo-fecha { flex: 0 0 10rem; width: 10rem; }
.campo-filtro { width: 13rem; max-width: 100%; }
.campo-largo { min-width: 15rem; }

/* Tabla densa: muchas columnas en poco espacio. La regla global de celdas
   (.table tbody td con padding .75rem 1rem !important) anula a table-sm de Bootstrap. */
.table.tabla-densa { font-size: .8rem; }
.table.tabla-densa > thead > tr > th,
.table.tabla-densa > tbody > tr > td,
.table.tabla-densa > tfoot > tr > td,
.table.tabla-densa > tfoot > tr > th { padding: .3rem .45rem !important; vertical-align: middle; }

/* Encabezado de tabla que se queda pegado arriba al desplazar. */
.tabla-encabezado-fijo thead th { position: sticky; top: 0; z-index: 2; }

/* Tabla agrupada: renglón de grupo (gris, negritas, se abre con clic) y sus renglones hijos.
   .fila-grupo / .flecha-grupo (gira con .abierto) / .fila-apagada (persona o renglón dado de baja).
   Alias: asignaciones.js todavía emite as-cliente / as-flecha / as-fila.baja (quitar al renombrar el JS). */
.tabla-agrupada tr.fila-grupo > td,
.tabla-agrupada tr.as-cliente > td { background: #f1f3f5 !important; font-weight: 600; border-top: 2px solid #dee2e6; }
.tabla-agrupada tr.fila-grupo,
.tabla-agrupada tr.as-cliente { cursor: pointer; }
.tabla-agrupada tr.fila-grupo:hover > td,
.tabla-agrupada tr.as-cliente:hover > td { background: #e9ecef !important; }
.flecha-grupo, .tabla-agrupada .as-flecha { transition: transform .15s; color: #6c757d; font-size: .75rem; }
tr.abierto .flecha-grupo, .tabla-agrupada tr.abierto .as-flecha { transform: rotate(90deg); }
.fila-apagada > td, .tabla-agrupada tr.as-fila.baja > td { opacity: .55; }

/* Etiqueta mini de origen de un dato (capturado a mano / traído de otro sistema).
   .etiqueta-mini + .etiqueta-azul | .etiqueta-ambar | .etiqueta-gris.
   Alias: asignaciones.js emite as-origen cap|emp y as-chip. */
.etiqueta-mini, .as-origen, .as-chip { display: inline-block; font-size: .68rem; padding: .02rem .4rem; border-radius: 4px; white-space: nowrap; }
.etiqueta-azul, .as-origen.cap { background: #e7f1ff; color: #0b5ed7; }
.etiqueta-ambar, .as-origen.emp { background: #fff3cd; color: #8a6d00; }
.etiqueta-gris, .as-chip { background: #eef0f2; color: #495057; border-radius: 999px; }

/* Tarjeta de propuesta con franja de confianza a la izquierda: .tarjeta-propuesta + alta|media|baja.
   Alias: asignaciones.js emite as-pend alta|media|baja. */
.tarjeta-propuesta, .as-pend { border: 1px solid #e5e7eb; border-left: 4px solid #adb5bd; border-radius: 8px; padding: .75rem; margin-bottom: .75rem; background: #fff; }
.tarjeta-propuesta.alta, .as-pend.alta { border-left-color: #198754; }
.tarjeta-propuesta.media, .as-pend.media { border-left-color: #FA6100; }
.tarjeta-propuesta.baja, .as-pend.baja { border-left-color: #adb5bd; }
.tarjeta-propuesta .table td, .as-pend .table td { padding: .2rem .3rem !important; font-size: .8rem; }


/* ######################################################################
   9. Componentes — grupo prospeccion (migración 26-oct-2026; se consolidan al final)
   ###################################################################### */
/* Spinner dentro de un texto o etiqueta (badge "Procesando…"). La regla global
   .spinner-border {width:2rem} pisa a .spinner-border-sm de Bootstrap; esta lo deja
   del tamaño de la letra. Uso: <span class="spinner-border spinner-border-sm spinner-en-texto"></span> */
.spinner-border.spinner-en-texto { width: .75em; height: .75em; border-width: .15em; }
/* Columna de acciones a la derecha de un renglón de lista (botones y campos
   apilados con ancho mínimo para que no se aplasten). Uso: dentro de un
   list-group-item d-flex: <div class="columna-acciones"> botones/inputs </div> */
.columna-acciones {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 170px;
    flex-shrink: 0;
}
/* Vista previa de un correo dentro de un pop-up: marco gris con scroll y el <iframe>
   (srcdoc) en blanco a todo lo ancho. Uso: <div class="border rounded vista-previa-correo">
   … <iframe></iframe></div> (sub-equipo prospeccion-F3). */
.vista-previa-correo { height: 430px; overflow: auto; background: #f8f9fa; padding: 10px; }
.vista-previa-correo iframe { width: 100%; height: 380px; border: 0; background: #fff; }
/* Texto recortado que deja lugar a un botón al lado (nombre de archivo + quitar). Va con text-truncate. */
.ancho-max-80 { max-width: 80%; }
/* Caja con scroll que ocupa lo que queda de la pantalla (tablas largas con
   encabezado fijo: va con .tabla-encabezado-fijo en la tabla). */
.caja-alto-pantalla { max-height: calc(100vh - 360px); overflow: auto; }
/* Tabla ordenable: flechita de orden en el encabezado (tenue; fuerte en la columna
   activa) y renglón seleccionado con contorno naranja. Usar con th.sortable.
   .flecha-orden dentro de th.activo; .fila-activa en el renglón elegido.
   (Alias ca-*: el JS de Cuentas por cobrar pone esas clases.) */
.flecha-orden { opacity: .35; font-size: .75em; margin-left: .2em; }
th.activo > .flecha-orden, th.ca-activo > .flecha-orden { opacity: 1; }
.fila-activa, .ca-fila-activa { outline: 2px solid #FA6100; outline-offset: -2px; }
/* Tabla cuyos renglones se pueden picar (filtran o abren algo). */
.tabla-clicable tbody tr[data-tramo], .tabla-clicable tbody tr[data-socio], .tabla-clicable tbody tr.ca-clic { cursor: pointer; }
/* Renglón de filtros: selects/campos con ancho mínimo; en celular, a todo lo ancho. */
.fila-filtros .form-select, .fila-filtros .form-control { min-width: 9rem; width: auto; }
@media (max-width: 575.98px) { .fila-filtros .form-select, .fila-filtros .form-control { min-width: 0; width: 100%; } }
/* ---- Sub-equipo varios-B (Marketing / LinkedIn) ---- */

/* Acento de color a la izquierda de una tarjeta o renglón: estado, prioridad o tipo.
   Uso: class="card acento-izq acento-ok|acento-warn|acento-bad|acento-marca|acento-info|acento-neutro" */
.acento-izq { border-left: 4px solid #dee2e6 !important; }
.acento-izq.acento-ok { border-left-color: #198754 !important; }
.acento-izq.acento-warn { border-left-color: #f59e0b !important; }
.acento-izq.acento-bad { border-left-color: #dc3545 !important; }
.acento-izq.acento-marca { border-left-color: #FA6100 !important; }
.acento-izq.acento-info { border-left-color: #082382 !important; }
.acento-izq.acento-neutro { border-left-color: #adb5bd !important; }

/* Renglón de lista que se puede elegir/abrir con clic; .selected/.active lo marca en naranja. */
.renglon-seleccionable { cursor: pointer; transition: background-color .15s ease; }
.renglon-seleccionable:hover { background-color: #f8f9fa; }
.renglon-seleccionable.selected,
.renglon-seleccionable.active { background-color: rgba(250, 97, 0, .06); box-shadow: inset 3px 0 0 #FA6100; }

/* Renglón simple de una lista dentro de una tarjeta (dato a la izquierda, valor a la derecha). */
.renglon-lista { padding: .75rem 1rem; border-bottom: 1px solid #f1f3f5; }
.renglon-lista:last-child { border-bottom: 0; }

/* Leyenda de colores (calendarios, gráficas). */
.leyenda-item { display: inline-flex; align-items: center; margin-right: 1rem; }
.leyenda-color { width: 12px; height: 12px; border-radius: 2px; margin-right: .5rem; background: #adb5bd; }
.leyenda-color.leyenda-color-verde { background: #198754; }
.leyenda-color.leyenda-color-azul { background: #0d6efd; }

/* <pre> con la letra normal del sitio (va con .texto-preformado). */
.texto-pre-normal { font-family: inherit; font-size: .875rem; margin-bottom: 0; }

/* Texto largo recortado a pocas líneas (resúmenes de reseñas, vistas previas). */
.texto-recortado { max-height: 4.5em; overflow: hidden; }
.texto-recortado.texto-recortado-largo { max-height: 150px; }

/* Borde punteado (cajas de "conecta tu cuenta", zonas vacías). Va con .border. */
.borde-punteado { border-style: dashed !important; }

/* Letra o número dentro de un círculo (calificación A-D, número de opción). */
.insignia-circulo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: 700;
}
.insignia-circulo.insignia-circulo-sm { width: 28px; height: 28px; font-size: .85rem; font-weight: 600; }

/* Barra de avance chica junto a un número (score). Va con .progress. */
.progress.barra-mini { height: 8px; width: 100px; }

/* Barra naranja de la marca para .barras-v */
.barras-v-barra.barras-v-marca { background: #FA6100; }

/* Consola de registro (texto monoespaciado sobre fondo oscuro) con renglones .log-entry
   y colores .log-info|.log-success|.log-warn|.log-error. */
.consola {
    background: #1f2937;
    color: #e9ecef;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    padding: 1rem;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
}
.consola .log-entry { padding: .25rem 0; border-bottom: 1px solid #374151; }
.consola .log-info { color: #a4f1f7; }
.consola .log-success { color: #10b981; }
.consola .log-warn { color: #ffcfa2; }
.consola .log-error { color: #f87171; }

/* Pasos de un asistente (1 · 2 · 3 · 4). .active = paso actual, .completed = hecho. */
.pasos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: .75rem 0;
    background: #f8f9fa;
    border-radius: 8px;
}
.pasos .paso { display: flex; align-items: center; gap: .5rem; color: #8a8f98; font-weight: 500; }
.pasos .paso-numero {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 600;
    background: #e9ecef;
    color: #6c757d;
}
.pasos .paso.active { color: #FA6100; }
.pasos .paso.active .paso-numero { background: #FA6100; color: #fff; }
.pasos .paso.completed { color: #198754; }
.pasos .paso.completed .paso-numero { background: #198754; color: #fff; }
/* Panel de cada paso: solo se ve el que tiene .active (lo cambia el JS). */
.panel-paso { display: none; }
.panel-paso.active { display: block; }

/* Lista flotante bajo un campo (sugerencias, autocompletar). El padre va con .position-relative. */
.lista-flotante {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: .5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    max-height: 400px;
    overflow-y: auto;
}
.lista-flotante-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.lista-flotante-item { padding: .75rem 1rem; border-bottom: 1px solid #f1f3f5; cursor: pointer; }
.lista-flotante-item:last-child { border-bottom: 0; }
.lista-flotante-item:hover { background: #f8f9fa; }

/* Vista previa de una publicación de red social (autor, texto, imagen, acciones). */
.vista-publicacion { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; max-width: 552px; }
.vista-publicacion-cabecera { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; text-align: left; }
.vista-publicacion-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FA6100;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}
.vista-publicacion-autor { font-weight: 600; font-size: .875rem; color: #212529; }
.vista-publicacion-detalle { font-size: .75rem; color: #6c757d; }
.vista-publicacion-texto { padding: 0 1rem .75rem; font-size: .875rem; line-height: 1.5; white-space: pre-wrap; color: #212529; }
.vista-publicacion-hashtag { color: #082382; font-weight: 600; }
.vista-publicacion-imagen { border-top: 1px solid #dee2e6; }
.vista-publicacion-imagen img { width: 100%; display: block; }
.vista-publicacion-acciones {
    display: flex;
    justify-content: space-around;
    padding: .5rem 1rem;
    border-top: 1px solid #dee2e6;
    color: #6c757d;
    font-size: .8rem;
}
.vista-publicacion-accion { display: flex; align-items: center; gap: .25rem; padding: .5rem 1rem; }

/* Imágenes: logo chico junto a un control; imagen grande con alto máximo; miniatura de galería. */
.imagen-logo-mini { max-height: 30px; opacity: .8; }
.imagen-limitada { max-height: 400px; }
.miniatura-cuadro { width: 100%; height: 80px; object-fit: cover; }

/* Bloque centrado de ancho de lectura (vista previa final, resúmenes). */
.ancho-medio { max-width: 600px; }
/* Tabla de cifras (sub-equipo operaciones-dr): números a la derecha con dígitos del mismo
   ancho, la primera columna (nombre) a la izquierda y nada se parte en dos renglones.
   Uso: <table class="table table-sm tabla-numerica">. Una celda de texto: td.text-start. */
.tabla-numerica th,
.tabla-numerica td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-numerica th:first-child,
.tabla-numerica td:first-child,
.tabla-numerica .text-start { text-align: left; }
.tabla-numerica td.text-wrap { white-space: normal; }
/* Tabla numérica que debe caber sin scroll lateral: los títulos de columna se parten en renglones
   y las celdas con text-wrap también (26-oct). <table class="table tabla-numerica tabla-ajustada"> */
.tabla-numerica.tabla-ajustada th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
.tabla-numerica.tabla-ajustada td { font-size: .85rem; }
.tabla-numerica.tabla-ajustada td.text-wrap { min-width: 9rem; }

/* Zona para soltar archivos (arrastrar y soltar). El JS le pone .arrastrando mientras
   el archivo está encima. Uso: <div class="zona-soltar text-center">…<input type=file></div> */
.zona-soltar {
    border: 2px dashed #adb5bd;
    border-radius: .5rem;
    padding: 1.1rem;
    background: #f8f9fa;
}
.zona-soltar.arrastrando { border-color: #FA6100; background: rgba(250, 97, 0, .05); }

/* Tabla de renglones que se eligen con clic (meses, periodos): el renglón con .activo
   queda marcado en naranja suave. Uso: <table class="table tabla-seleccionable">. */
.tabla-seleccionable tbody tr { cursor: pointer; }
.tabla-seleccionable tbody tr.activo > td { background-color: rgba(250, 97, 0, .08) !important; }

/* Renglón "etiqueta: valor" para fichas de detalle dentro de una celda o tarjeta.
   Uso: <div class="renglon-dato"><span class="renglon-dato-etiqueta">RFC</span><span>…</span></div> */
.renglon-dato {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .25rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .85rem;
}
.renglon-dato:last-child { border-bottom: 0; }
.renglon-dato-etiqueta { color: #6c757d; min-width: 140px; }
/* Renglón de dato con los nombres que todavía emite el JS de varias páginas
   (Costos de facturas, Suscripciones): .invoice-line / .line-label / .line-description
   son el mismo componente que .renglon-dato. */
.invoice-line {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .25rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .85rem;
}
.invoice-line:last-child { border-bottom: 0; }
.invoice-line .line-label { color: #6c757d; min-width: 140px; }
.invoice-line .line-description { color: #495057; word-break: break-word; }
.invoice-name { font-weight: 600; }
.invoice-partner { color: #6c757d; font-size: .85rem; }
/* Pastilla de margen: negativo (rojo), bajo (ámbar), sano (verde), sin dato (gris). */
.margin-badge { font-size: .75rem; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.margin-badge.negative { background: #fdecec; color: #a12020; }
.margin-badge.low { background: #fff4e5; color: #8a4b00; }
.margin-badge.high { background: #e8f5ee; color: #14663c; }
.margin-badge.none { background: #e9ecef; color: #6c757d; }
/* Flecha de renglón que se abre: gira cuando el renglón tiene .expanded. */
.expand-icon { transition: transform .2s; color: #6c757d; font-size: .75rem; }
.expanded .expand-icon { transform: rotate(90deg); }

/* Tabla de ancho fijo: cada columna con su ancho (clases .ancho-col-NN en el <th>), lo largo
   se envuelve en los espacios y nunca desborda la página. Las tablas anidadas dentro vuelven
   al acomodo normal. Uso: <table class="table tabla-fija"><th class="ancho-col-92">… */
.tabla-fija { table-layout: fixed; width: 100%; }
.tabla-fija > tbody > tr > td { white-space: normal; overflow-wrap: normal; word-break: normal; }
.tabla-fija table { table-layout: auto; width: 100%; }
.tabla-fija table th { width: auto; white-space: nowrap; }
.ancho-col-64 { width: 64px; }
.ancho-col-92 { width: 92px; }
.ancho-col-104 { width: 104px; }
.ancho-col-130 { width: 130px; }
.ancho-col-140 { width: 140px; }
.ancho-col-270 { width: 270px; }

/* Tabla agrupada: un renglón de grupo (cliente, producto) que abre renglones internos y
   fichas de detalle. Hoy la usa Suscripciones y su JS marca los renglones con los nombres
   de abajo (su-grupo, su-sub, su-detalle, …): PENDIENTE renombrarlos en el JS a nombres
   genéricos cuando se toque. Uso: <table class="table tabla-densa tabla-agrupada">. */
.tabla-agrupada tr.su-grupo,
.tabla-agrupada tr.su-sub,
.tabla-agrupada tr.su-fila { cursor: pointer; }
.tabla-agrupada tr.su-grupo > td { background-color: #f1f3f5 !important; border-top: 2px solid #dee2e6; font-weight: 600; }
.tabla-agrupada tr.su-grupo .invoice-partner { font-weight: 400; }
.tabla-agrupada tr.su-grupo.su-propia > td { background-color: #fafafa !important; }
.tabla-agrupada tr.su-grupo.su-propia .invoice-name { color: #6c757d; }
.tabla-agrupada td.su-sub-cuenta { padding-left: 1.6rem !important; }
.tabla-agrupada tr.inactiva > td { opacity: .55; }
.tabla-agrupada tr.su-huerfano { cursor: default; }
.tabla-agrupada tr.su-huerfano > td { background-color: #fff8f8 !important; }
.tabla-agrupada tr.su-huerfano > td.su-sub-cuenta { font-style: italic; }
.tabla-agrupada tr.su-detalle > td { background-color: #fafafa !important; }
.tabla-agrupada tr.su-analisis > td { background-color: #f4f7fb !important; border-top: 2px solid #082382; }
.tabla-agrupada tr.su-acciones > td { background-color: #fffaf3 !important; border-left: 4px solid #FA6100; }
.tabla-agrupada tr.su-detalle td,
.tabla-agrupada tr.su-analisis td,
.tabla-agrupada tr.su-acciones td { white-space: normal !important; }
.tabla-agrupada .su-ult { white-space: normal !important; font-size: .68rem; }
.tabla-agrupada .su-renglones { font-size: .75rem; }
.tabla-agrupada tr.su-fila > td:last-child .btn,
.tabla-agrupada tr.su-sub > td:last-child .btn { display: block; width: 100%; margin: 0 0 2px; padding: .05rem .15rem; font-size: .64rem; white-space: nowrap; }
/* Lista de acciones pendientes dentro del grupo; la hecha se tacha. */
.su-acciones-lista { list-style: none; margin: 0; padding: 0; }
.su-acciones-lista li { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .2rem 0; border-bottom: 1px dashed #eee; font-size: .8rem; }
.su-accion-btn { padding: 0 .35rem !important; font-size: .7rem !important; width: auto !important; display: inline-block !important; }
.su-accion.hecha .su-accion-txt { text-decoration: line-through; color: #6c757d; }
/* Pastillas de tipo: correo (azul marino) y dominio (naranja), en botón de filtro y en el renglón. */
.su-tipo-btn { border: 2px solid #dee2e6; background: #fff; color: #495057; font-weight: 600; }
.su-tipo-btn.su-tipo-correo { border-color: #e8ecf8; color: #082382; }
.su-tipo-btn.su-tipo-dominio { border-color: #fff4ec; color: #a84300; }
.su-tipo-btn.active { color: #fff !important; background: #343a40; border-color: #343a40; }
.su-tipo-btn.su-tipo-correo.active { background: #082382; border-color: #082382; }
.su-tipo-btn.su-tipo-dominio.active { background: #FA6100; border-color: #FA6100; }
.su-tipo-n { background: rgba(0, 0, 0, .08); color: inherit; font-weight: 600; }
.su-tipo-btn.active .su-tipo-n { background: rgba(255, 255, 255, .25); }
.su-tipo { display: inline-flex; align-items: center; gap: .3em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .66rem; font-weight: 600; padding: .1rem .3rem; border-radius: 999px; white-space: nowrap; border: 0; cursor: pointer; background: #eef0f2; color: #495057; }
button.su-tipo:hover { filter: brightness(.92); }
button.su-tipo.active { outline: 2px solid #343a40; }
.su-tipo-correo { background: #e8ecf8; color: #082382; }
.su-tipo-dominio { background: #fff4ec; color: #a84300; }
.su-col-tipo .su-tipo-prov { display: block; font-size: .7rem; color: #6c757d; padding-left: .5rem; font-weight: 400; }
.tabla-agrupada tr.su-fila.t-correo > td:first-child { box-shadow: inset 4px 0 0 #082382; }
.tabla-agrupada tr.su-fila.t-dominio > td:first-child { box-shadow: inset 4px 0 0 #FA6100; }
/* Pastilla de proveedor (Google, Microsoft, dominio). */
.su-rubro { display: inline-flex; align-items: center; gap: .3em; font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; background: #eef0f2; color: #495057; }
.su-r-google { background: #e8ecf8; color: #082382; }
.su-r-microsoft { background: #e8f5ee; color: #14663c; }
.su-r-dominio { background: #fff4ec; color: #a84300; }
/* Pastilla punteada que lleva a la cuenta hermana (el dominio de un correo y al revés). */
.su-chip { font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; background: #fff; border: 1px dashed #adb5bd; color: #495057; white-space: nowrap; }
.su-chip:hover { background: #f8f9fa; }
.su-chip-dominio { border-color: #FA6100; color: #a84300; }
.su-chip-correo { border-color: #082382; color: #082382; }
.su-chip.su-chip-alerta { border-style: solid; background: #fff4e5; }
.su-contacto { color: #6c757d; margin-left: .25rem; }
.su-contacto:hover { color: #212529; }
/* En la vista de Dominios no hay licencias: la 2ª columna se oculta (el JS pone la clase en body). */
body.su-ver-dominio .tabla-agrupada > thead > tr > th:nth-child(2),
body.su-ver-dominio .tabla-agrupada tr.su-fila > td:nth-child(2),
body.su-ver-dominio .tabla-agrupada > tfoot td:nth-child(2) { display: none; }
/* Facturas de una cuenta: la licencia anual y el buzón agregado se distinguen por color. */
tr.papel-anual > td { background-color: #e8ecf8 !important; }
tr.papel-buzon > td { background-color: #fff4e5 !important; }
/* Rejilla de casillas (checkbox de filtros por estado): se acomodan solas en columnas de ~120px. */
.rejilla-casillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .25rem; }
@media (max-width: 768px) { .rejilla-casillas { grid-template-columns: repeat(2, 1fr); } }
/* Dos columnas iguales (fichas lado a lado: compra / venta); en celular, una sola. */
.rejilla-dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 768px) { .rejilla-dos-columnas { grid-template-columns: 1fr; } }
/* Punto de color chico junto a una etiqueta (leyenda de estados). */
.icono-punto { font-size: .5rem; vertical-align: middle; }
/* Opción elegible en forma de tarjeta: un <label> con un radio/checkbox oculto
   (class="visually-hidden") que se marca en naranja al elegirse. Se marca solo con
   el input elegido (:has) o con .selected que ponga el JS.
   Uso: <label class="opcion-tarjeta"><input type="radio" class="visually-hidden"> …</label> */
.opcion-tarjeta {
    display: block;
    cursor: pointer;
    padding: .75rem;
    border-radius: .5rem;
    border: 2px solid #e9ecef;
    text-align: center;
    background: #fff;
    transition: border-color .2s, background-color .2s;
}
.opcion-tarjeta:hover { border-color: #FA6100; }
.opcion-tarjeta.selected,
.opcion-tarjeta:has(input:checked) { border-color: #FA6100; background: #fff4ec; }
/* Línea de tiempo vertical de pasos (cadencias, secuencias, historial): cada paso con su
   ícono en círculo y una línea gris que lo une con el siguiente. El color del círculo lo
   ponen utilidades de Bootstrap (bg-primary-subtle text-primary, …).
   Uso: <div class="linea-tiempo"><div class="linea-tiempo-paso">
        <div class="linea-tiempo-icono bg-…">ícono</div><div>texto</div></div></div>
   El ícono también sirve suelto (sin línea) fuera de .linea-tiempo. (prospeccion-F3) */
.linea-tiempo-paso { display: flex; gap: .75rem; position: relative; padding-bottom: 1rem; }
.linea-tiempo-paso:last-child { padding-bottom: 0; }
.linea-tiempo-paso::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}
.linea-tiempo-paso:last-child::before { display: none; }
.linea-tiempo-icono {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .9rem;
    position: relative;
    z-index: 1;
    background: #f1f3f5;
    color: #6c757d;
}
/* Renglón de tabla que se despliega al hacer clic (drill-down en su lugar).
   El JS le pone .abierto; el renglón que aparece debajo lleva .renglon-detalle. */
.renglon-desplegable { cursor: pointer; }
.renglon-desplegable > td:first-child { position: relative; padding-left: 24px; }
.renglon-desplegable > td:first-child::before {
    content: '\203A'; position: absolute; left: 9px; top: .45rem;
    color: #6c757d; font-size: 1.05rem; line-height: 1;
    display: inline-block; transition: transform .15s;
}
.renglon-desplegable.abierto > td:first-child::before { transform: rotate(90deg); color: #FA6100; }
.renglon-desplegable.abierto > td { background: #fff6ef; }
.renglon-detalle > td { padding: 0; background: #fbfbfc; }
/* Grupo de botones de opción única (periodo, vista): el JS marca la elegida con .on */
.grupo-opciones .btn.on { background: #FA6100; border-color: #FA6100; color: #fff; }
/* Barra de proporción delgada (va con .progress / .progress-bar; ancho en %) */
.progress.barra-fina { height: 5px; }
/* Rejilla de tarjetas que se acomodan solas en columnas de ~280px (fichas de contactos,
   bloques de información). Uso: <div class="rejilla-tarjetas"> tarjetas </div> */
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; }

/* Capa de diálogo hecha por JS (un <div> que se agrega al body y se quita con .remove()):
   fondo oscuro a pantalla completa y una caja blanca centrada, con el aspecto de un modal.
   Uso: div.className = 'capa-dialogo'; div.innerHTML = '<div class="capa-dialogo-cuerpo">…</div>' */
.capa-dialogo {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 18, .45);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
}
.capa-dialogo-cuerpo {
    background: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: .5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    border-top: 3px solid #FA6100;
}

/* Aviso flotante arriba a la derecha que entra y sale solo (lo crea el JS y le pone .show).
   El color va con text-bg-success | text-bg-danger | text-bg-info de Bootstrap. */
.aviso-flotante {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: .75rem 1.25rem;
    border-radius: .5rem;
    font-size: .9rem;
    z-index: 1090;
    display: flex;
    align-items: center;
    transform: translateX(120%);
    transition: transform .3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.aviso-flotante.show { transform: translateX(0); }
/* Clasificación (ranking de personas por puntos) y podio de los tres primeros.
   Nombres en español; los alias en inglés son las clases que pone el JS de
   Gamificación (app/static/js/prospecting/gamification.js) — no renombrar sin él.
   1.º naranja de la marca, 2.º gris, 3.º azul petróleo. (prospeccion-F3)
   Podio:   .podio > .podio-lugar.podio-1|2|3 > .podio-avatar .podio-nombre .podio-puntos .podio-base
   Renglón: .clasificacion-fila[.destacada] > .clasificacion-lugar.lugar-1|2|3|otro
            .clasificacion-persona(.clasificacion-nombre .clasificacion-detalle) .clasificacion-puntos
   Pastilla de puntos: .pastilla-puntos[.contacto|.reunion|.propuesta|.cierre|.cumplimiento] */
.podio, .podium-section { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; padding: 1.5rem 1rem; margin-bottom: 1rem; }
.podio-lugar, .podium-place { text-align: center; }
.podio-avatar, .podium-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .75rem; font-weight: 700; font-size: 1.5rem;
    background: #f1f3f5; color: #6c757d; border: 3px solid #dee2e6;
}
.podio-nombre, .podium-name { font-weight: 600; font-size: .95rem; margin-bottom: .25rem; }
.podio-puntos, .podium-points { font-size: 1.5rem; font-weight: 700; color: #0F0F12; }
.podio-base, .podium-base {
    width: 100px; margin: 0 auto; border-radius: 8px 8px 0 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700; color: #fff; background: #adb5bd;
}
.podio-1 .podio-avatar, .podium-1 .podium-avatar { width: 100px; height: 100px; font-size: 2rem; background: #fff4ec; color: #FA6100; border-color: #FA6100; }
.podio-2 .podio-avatar, .podium-2 .podium-avatar { border-color: #6c757d; }
.podio-3 .podio-avatar, .podium-3 .podium-avatar { background: #e6f0f1; color: #00515c; border-color: #00515c; }
.podio-1 .podio-puntos, .podium-1 .podium-points { color: #FA6100; }
.podio-3 .podio-puntos, .podium-3 .podium-points { color: #00515c; }
.podio-1 .podio-base, .podium-1 .podium-base { height: 80px; background: #FA6100; }
.podio-2 .podio-base, .podium-2 .podium-base { height: 60px; background: #6c757d; }
.podio-3 .podio-base, .podium-3 .podium-base { height: 40px; background: #00515c; }

.clasificacion-fila, .leaderboard-row { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.25rem; border-bottom: 1px solid #f1f3f5; }
.clasificacion-fila:last-child, .leaderboard-row:last-child { border-bottom: 0; }
.clasificacion-fila:hover, .leaderboard-row:hover { background: #f8f9fa; }
.clasificacion-fila.destacada, .leaderboard-row.top-3 { background: #fff9f4; }
.clasificacion-lugar, .leaderboard-rank {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.05rem; background: #f1f3f5; color: #6c757d;
}
.lugar-1, .leaderboard-rank.rank-1 { background: #fff4ec; color: #FA6100; border: 2px solid #FA6100; }
.lugar-2, .leaderboard-rank.rank-2 { border: 2px solid #6c757d; }
.lugar-3, .leaderboard-rank.rank-3 { background: #e6f0f1; color: #00515c; border: 2px solid #00515c; }
.clasificacion-persona, .leaderboard-user { flex: 1; min-width: 0; }
.clasificacion-nombre, .leaderboard-name { font-weight: 600; }
.clasificacion-detalle, .leaderboard-stats { font-size: .8rem; color: #6c757d; margin-top: .15rem; }
.clasificacion-puntos, .leaderboard-points { text-align: right; }
.clasificacion-puntos .valor, .leaderboard-points .points-value { font-size: 1.4rem; font-weight: 700; color: #0F0F12; line-height: 1.1; }
.clasificacion-puntos .etiqueta, .leaderboard-points .points-label { font-size: .72rem; color: #8a8f98; }
.points-breakdown { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.pastilla-puntos, .breakdown-badge { display: inline-block; font-size: .68rem; padding: .12rem .45rem; border-radius: 999px; background: #f1f3f5; color: #495057; font-weight: 600; }
.pastilla-puntos.contacto, .breakdown-badge.contact { background: #e7f1ff; color: #0b5ed7; }
.pastilla-puntos.reunion, .breakdown-badge.meeting { background: #e8f5ee; color: #14663c; }
.pastilla-puntos.propuesta, .breakdown-badge.proposal { background: #fff4e5; color: #8a4b00; }
.pastilla-puntos.cierre, .breakdown-badge.won { background: #fff4ec; color: #c44d00; }
.pastilla-puntos.cumplimiento, .breakdown-badge.compliance { background: #e6f0f1; color: #00515c; }
/* Renglón dato–valor (desglose de saldo, nómina, montos): etiqueta gris a la
   izquierda (.k) y valor en negritas a la derecha (.v); línea punteada entre renglones.
   Uso: <div class="fila-dato"><span class="k">En bancos</span><span class="v cifra">$1</span></div> */
.fila-dato {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem 0;
    border-bottom: 1px dashed #dee2e6;
}
.fila-dato:last-child { border-bottom: 0; }
.fila-dato > .k { color: #6c757d; }
.fila-dato > .v { font-weight: 600; white-space: nowrap; }

/* Buscador con botón "×" para limpiar dentro del campo. El JS le pone .con-texto
   al contenedor cuando hay algo escrito y entonces aparece el botón .limpiar.
   Uso: <div class="buscador-limpiable"><input class="form-control">
        <button class="limpiar" type="button">&times;</button></div> */
.buscador-limpiable { position: relative; flex: 1 1 260px; max-width: 340px; }
.buscador-limpiable .form-control { padding-right: 2rem; }
.buscador-limpiable .limpiar {
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    border: 0;
    background: transparent;
    color: #6c757d;
    font-size: 1.15rem;
    line-height: 1;
    padding: .25rem .5rem;
    cursor: pointer;
}
.buscador-limpiable.con-texto .limpiar { display: block; }
/* Visor de logs (contenedor .visor-log): renglón de log y etiqueta de nivel (las clases las genera
   app/static/js/audit/log-viewer.js: .log-entry, .log-level-badge .log-level-<nivel>). */
.visor-log .log-entry {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875rem; padding: .5rem;
    border-bottom: 1px solid #e9ecef; cursor: pointer;
}
.visor-log .log-entry:hover { background-color: #f8f9fa; }
.visor-log .log-level-badge { font-size: .75rem; padding: .25rem .5rem; border-radius: 4px; font-weight: 600; }
.visor-log .log-level-debug { background-color: #e3f2fd; color: #1976d2; }
.visor-log .log-level-info { background-color: #e8f5e9; color: #388e3c; }
.visor-log .log-level-warning { background-color: #fff4e5; color: #8a4b00; }
.visor-log .log-level-error { background-color: #fdecec; color: #a12020; }
.visor-log .log-level-critical { background-color: #f3e5f5; color: #7b1fa2; }
/* Caja con scroll vertical alta (listas largas a página casi completa). */
.caja-desplazable-alta { max-height: 600px; overflow-y: auto; }
/* Mapa de calor en tabla (actividad por día/hora): celdas .calor-0 … .calor-5
   según intensidad, en el naranja de la marca. */
.mapa-calor td { font-size: .75rem; }
.mapa-calor .calor-0 { background: #fff; color: #adb5bd; }
.mapa-calor .calor-1 { background: rgba(250, 97, 0, .12); color: #212529; }
.mapa-calor .calor-2 { background: rgba(250, 97, 0, .28); color: #212529; }
.mapa-calor .calor-3 { background: rgba(250, 97, 0, .48); color: #fff; }
.mapa-calor .calor-4 { background: rgba(250, 97, 0, .70); color: #fff; }
.mapa-calor .calor-5 { background: #FA6100; color: #fff; }
/* Tarjeta con semáforo: el JS le pone .healthy / .warning / .critical y el borde y el ícono
   grande (.fa-3x) toman el color (estado de servicios: BD, Odoo, disco, memoria). */
.tarjeta-semaforo { box-shadow: inset 0 0 0 2px transparent; }
.tarjeta-semaforo .fa-3x { opacity: .7; }
.tarjeta-semaforo.healthy { box-shadow: inset 0 0 0 2px #198754; }
.tarjeta-semaforo.warning { box-shadow: inset 0 0 0 2px #ffc107; }
.tarjeta-semaforo.critical { box-shadow: inset 0 0 0 2px #dc3545; }
.tarjeta-semaforo.healthy .fa-3x { color: #198754; opacity: 1; }
.tarjeta-semaforo.warning .fa-3x { color: #ffc107; opacity: 1; }
.tarjeta-semaforo.critical .fa-3x { color: #dc3545; opacity: 1; }
/* Barra de avance corta dentro de una celda de tabla. */
.barra-avance-corta { width: 100px; }
/* Capa por encima de pop-ups y menús (alertas fijas creadas por JS; va con position-fixed). */
.capa-superior { z-index: 1090; }


/* ######################################################################
   9. Componentes — grupo reclutamiento (migración 26-oct-2026; se consolidan al final)
   ###################################################################### */
/* Capa de "cargando" a pantalla completa: fondo blanco translúcido y el spinner al centro,
   mientras el JS trae los datos de la página. Se esconde con d-none.
   Uso: <div class="capa-cargando" id="..."><div class="spinner-border text-primary"></div></div> */
.capa-cargando {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1055;
}
/* Caja con scroll de altura fija baja (feeds en vivo de pocas líneas). */
.caja-desplazable-baja { height: 200px; overflow-y: auto; }
/* Panel que llena el alto de la pantalla bajo un encabezado + franja (columnas lado a lado). */
.alto-panel-pantalla { height: calc(100vh - 420px); }
/* Contenedor de gráfica pequeña (Chart.js con maintainAspectRatio:false). */
.grafica-chica { position: relative; height: 160px; }
/* Embudo de etapas: casillas grises en renglón unidas por flechas, cada una con su
   cifra, etiqueta y tasa de paso (verde/ámbar/rojo). También para "días por etapa".
   Uso: <div class="embudo"><div class="embudo-pasos"><div class="embudo-paso">
        <div class="embudo-cifra">12</div><div class="embudo-etiqueta">Etapa</div>
        <div class="embudo-tasa estado-bien">80%</div></div><div class="embudo-flecha">→</div>…
   Alias (el JS del Dashboard Ejecutivo reescribe className): funnel-step-rate,
   velocity-item-value, status-good|warning|bad — sólo dentro de .embudo. (prospeccion-F3) */
.embudo-pasos { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.embudo-paso { flex: 1; min-width: 120px; text-align: center; padding: 1rem; background: #f8f9fa; border-radius: .5rem; }
.embudo-cifra, .embudo .velocity-item-value { font-size: 1.5rem; font-weight: 700; color: #0F0F12; line-height: 1.2; }
.embudo-etiqueta { font-size: .75rem; color: #6c757d; }
.embudo-tasa, .embudo .funnel-step-rate { font-size: .8rem; font-weight: 600; margin-top: .5rem; }
.embudo-flecha { color: #adb5bd; font-size: 1.25rem; }
.embudo .estado-bien, .embudo .status-good { color: #198754; }
.embudo .estado-alerta, .embudo .status-warning { color: #c46a00; }
.embudo .estado-mal, .embudo .status-bad { color: #dc3545; }

/* Ícono de ayuda junto a un título o etiqueta (abre un tooltip). */
.icono-ayuda { cursor: help; color: #adb5bd; margin-left: .25rem; }
.icono-ayuda:hover { color: #FA6100; }
.embudo-etiqueta .icono-ayuda { font-size: .65rem; }

/* Lista de avisos: renglones con ícono a la izquierda, fondo rojo tenue (crítico),
   ámbar (.warning) o azul (.info); clic abre el detalle.
   Uso: <div class="lista-avisos"> renglones .aviso-fila > .aviso-fila-icono + .aviso-fila-cuerpo </div>
   Alias del JS del Dashboard Ejecutivo: alert-item(-icon/-content/-title/-subtitle/-status/-action)
   y performance-issue-item — sólo dentro de .lista-avisos. */
.aviso-fila, .lista-avisos .alert-item, .lista-avisos .performance-issue-item {
    display: flex; align-items: center; gap: 1rem; padding: .75rem; margin-bottom: .5rem;
    border-radius: .5rem; background: #fdf3f3; border: 1px solid #f5d0d0;
}
.lista-avisos .performance-issue-item { display: block; padding: 1rem; }
.aviso-fila.warning, .lista-avisos .alert-item.warning, .lista-avisos .performance-issue-item.warning { background: #fff8ec; border-color: #ffe0b8; }
.aviso-fila.info, .lista-avisos .alert-item.info { background: #f1f6ff; border-color: #cfe0fb; }
.lista-avisos .alert-item:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.aviso-fila-icono, .lista-avisos .alert-item-icon {
    width: 32px; height: 32px; border-radius: .5rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: #fbe3e3; color: #dc3545;
}
.aviso-fila.warning .aviso-fila-icono, .lista-avisos .alert-item.warning .alert-item-icon { background: #fff0d6; color: #c46a00; }
.aviso-fila.info .aviso-fila-icono, .lista-avisos .alert-item.info .alert-item-icon { background: #e2ecfc; color: #0b5ed7; }
.aviso-fila-cuerpo, .lista-avisos .alert-item-content { flex: 1; min-width: 0; }
.lista-avisos .alert-item-title { font-size: .85rem; font-weight: 600; }
.lista-avisos .alert-item-subtitle, .lista-avisos .alert-item-status { font-size: .75rem; color: #6c757d; }
.lista-avisos .alert-item-status { margin-top: .25rem; }
.lista-avisos .alert-item-action { font-size: .8rem; }

/* Clasificación compacta (top 5 en una tarjeta): círculo chico, nombre y puntos.
   Alias del JS del Dashboard Ejecutivo: leaderboard-item/-rank(.gold|.silver|.bronze)/-name/-points. */
.clasificacion-mini .leaderboard-item { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid #f1f3f5; }
.clasificacion-mini .leaderboard-item:last-child { border-bottom: 0; }
.clasificacion-mini .leaderboard-rank { width: 28px; height: 28px; font-size: .8rem; border: 0; }
.clasificacion-mini .leaderboard-rank.gold { background: #fff4ec; color: #FA6100; }
.clasificacion-mini .leaderboard-rank.bronze { background: #e6f0f1; color: #00515c; }
.clasificacion-mini .leaderboard-name { flex: 1; font-size: .85rem; font-weight: 500; }
.clasificacion-mini .leaderboard-points { font-size: .9rem; font-weight: 700; }

/* Barras horizontales de reparto (razones, categorías): nombre y % arriba, barra delgada abajo.
   El ancho y color de la barra los pone el JS. Alias del JS: lost-reason-*. */
.barras-reparto .lost-reason-bar { margin-bottom: .75rem; }
.barras-reparto .lost-reason-header { display: flex; justify-content: space-between; margin-bottom: .25rem; }
.barras-reparto .lost-reason-name { font-size: .8rem; }
.barras-reparto .lost-reason-pct { font-size: .8rem; font-weight: 600; color: #6c757d; }
.barras-reparto .lost-reason-progress { height: 8px; background: #f1f3f5; border-radius: 4px; overflow: hidden; }
.barras-reparto .lost-reason-progress-fill { height: 100%; border-radius: 4px; }
/* Punto de prioridad (10px) junto a una alerta: .critical | .high | .medium | .low. */
.punto-prioridad { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background-color: #6c757d; }
.punto-prioridad.critical { background-color: #dc3545; }
.punto-prioridad.high { background-color: #FA6100; }
.punto-prioridad.medium { background-color: #ffc107; }
.punto-prioridad.low { background-color: #adb5bd; }
/* Renglón que se atenúa cuando el JS le pone .inactive (tipos apagados en una lista). */
.atenuable.inactive { opacity: .6; background-color: #f8f9fa; }
/* Celda que ocupa todo el ancho de una rejilla CSS (grid). */
.rejilla-completa { grid-column: 1 / -1; }
/* Panel lateral que se queda visible al desplazar la página (formulario de envío o
   resumen junto a una lista larga). Deja libre la barra de navegación.
   Uso: <div class="col-lg-4"><div class="card card-body panel-fijo-lateral"> … </div></div> */
.panel-fijo-lateral { position: sticky; top: 80px; }
/* Asa para arrastrar y reordenar renglones o tarjetas (SortableJS: handle). */
.asa-arrastre { cursor: grab; padding: .5rem; color: #adb5bd; }
.asa-arrastre:hover { color: #6c757d; }
/* Campo de etiquetas: caja con aspecto de form-control donde se escriben valores y cada uno
   queda como pastilla con su "×" para quitarlo (ubicaciones, títulos, tecnologías).
   Uso: <div class="campo-etiquetas"><span class="etiqueta-quitable">CDMX<span class="quitar">&times;</span></span>
        <input class="campo-etiquetas-input"></div>. Pastilla roja (excluir): + .peligro (prospeccion-F4) */
.campo-etiquetas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: .4rem .6rem;
    min-height: 46px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
.campo-etiquetas:focus-within { border-color: #FA6100; box-shadow: 0 0 0 .2rem rgba(250, 97, 0, .15); }
.etiqueta-quitable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: #00515c;
    color: #fff;
    font-size: .85rem;
}
.etiqueta-quitable.peligro { background: #dc3545; }
.etiqueta-quitable .quitar { cursor: pointer; opacity: .7; font-size: 1rem; line-height: 1; }
.etiqueta-quitable .quitar:hover { opacity: 1; }
.campo-etiquetas-input { flex: 1; min-width: 150px; border: 0; outline: 0; background: transparent; font-size: .95rem; }
/* Globo flotante que crea el JS junto a un botón (menú de un toque, segmentar, fecha rápida):
   caja blanca con sombra; el JS le pone top/left y lo muestra con display:block.
   Uso: div.className = 'globo-flotante'; adentro opciones con .dropdown-item (prospeccion-F4) */
.globo-flotante {
    position: absolute;
    z-index: 1080;
    width: 290px;
    padding: .8rem .9rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    box-shadow: 0 8px 28px rgba(15, 15, 18, .18);
}
.globo-flotante label { cursor: pointer; }
/* Acción que solo aparece al pasar el mouse por su renglón (editar, marcar).
   Uso: <a class="revelar-al-pasar"> dentro de un <tr>, .list-group-item o .con-revelar (prospeccion-F4) */
.revelar-al-pasar { opacity: 0; transition: opacity .1s; }
tr:hover .revelar-al-pasar,
.list-group-item:hover .revelar-al-pasar,
.con-revelar:hover .revelar-al-pasar { opacity: .55; }
.revelar-al-pasar:hover { opacity: 1 !important; }
/* Botones tipo pastilla para filtros (periodo rápido, estatus). El botón prendido lleva .on.
   Sirve también para botones que arma el JS sin clases (p. ej. <button class="on">). */
.botones-pastilla > button { font-size: .72rem; padding: .15rem .6rem; border: 1px solid #ced4da; border-radius: 999px; background: #fff; color: #212529; margin: 0 .15rem .15rem 0; }
.botones-pastilla > button:hover { border-color: #FA6100; }
.botones-pastilla > button.on { background: #0F0F12; color: #fff; border-color: #0F0F12; }

/* Columnas ordenables con data-k: flecha ▲/▼ según .asc/.desc que pone el JS.
   (No se usa .sortable porque su :hover con !important deja el encabezado azul marino en blanco.) */
.tabla-ordenable thead th[data-k] { cursor: pointer; user-select: none; }
.tabla-ordenable thead th.asc::after { content: " ▲"; font-size: .6rem; }
.tabla-ordenable thead th.desc::after { content: " ▼"; font-size: .6rem; }

/* Tabla de documentos expandible (facturas): renglón tr.f que se abre (.abierta) en un renglón
   tr.det con el detalle (.det-in: dos columnas, conceptos + datos). Las clases internas
   (f, det, det-in, cli, nom, rfc, com, n, pill p-<Estatus>, sat, venc, mon, uuid, ligas, vacio, flecha)
   las emite el JS de la página; quedan dentro del contenedor para no pisar a nadie. */
.tabla-expandible td.n, .tabla-expandible th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-expandible > tbody > tr > td { white-space: nowrap; }
.tabla-expandible tbody tr.f { cursor: pointer; }
.table.tabla-expandible > tbody > tr.f.abierta > td { background: #fff7f1 !important; }
.tabla-expandible .flecha { display: inline-block; width: 12px; color: #6c757d; transition: transform .15s; }
.tabla-expandible tr.abierta .flecha { transform: rotate(90deg); color: #FA6100; }
.tabla-expandible > tbody > tr > td.cli { white-space: normal; width: 22%; max-width: 240px; font-weight: 600; line-height: 1.25; }
.tabla-expandible td.cli .nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabla-expandible td.cli .rfc { display: block; font-weight: 400; color: #6c757d; font-size: .66rem; }
.tabla-expandible > tbody > tr > td.com { white-space: normal; max-width: 110px; line-height: 1.2; }
.tabla-expandible .sat { font-size: .7rem; color: #6c757d; }
.tabla-expandible .sat.no { color: #dc3545; font-weight: 600; }
.tabla-expandible .venc { color: #dc3545; font-size: .66rem; display: block; }
.tabla-expandible .mon { font-size: .62rem; color: #6c757d; }
.tabla-expandible .pill { display: inline-block; font-size: .66rem; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.tabla-expandible .p-Pagada { background: #e8f5ee; color: #14663c; }
.tabla-expandible .p-Porcobrar { background: #eef2ff; color: #082382; }
.tabla-expandible .p-Parcial { background: #fff4e5; color: #8a4b00; }
.tabla-expandible .p-Vencida, .tabla-expandible .p-Parcialvencida { background: #fdecec; color: #a12020; }
.tabla-expandible .p-Cancelada { background: #eee; color: #555; text-decoration: line-through; }
.tabla-expandible .p-Notadecrédito, .tabla-expandible .p-Revertida { background: #f3e8fd; color: #361984; }
.tabla-expandible .p-AntesdeOdoo { background: #f1f1f3; color: #6c757d; }
.table.tabla-expandible > tbody > tr.det > td { background: #fffaf6 !important; padding: 0 !important; white-space: normal; }
.tabla-expandible .det-in { padding: 14px 18px 18px 30px; display: grid; grid-template-columns: 2fr 1fr; gap: 22px; border-bottom: 2px solid #f0d8c6; }
.tabla-expandible .det-in h6 { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; margin: 0 0 6px; }
.tabla-expandible .det-in table { width: 100%; font-size: .78rem; border-collapse: collapse; }
.tabla-expandible .det-in table td, .tabla-expandible .det-in table th { padding: 4px 6px; border-bottom: 1px solid #f0e6de; }
.tabla-expandible .det-in table th { font-size: .6rem; text-transform: uppercase; color: #6c757d; font-weight: 600; }
.tabla-expandible .det-in dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: .78rem; margin: 0 0 12px; }
.tabla-expandible .det-in dt { color: #6c757d; font-weight: 400; }
.tabla-expandible .det-in dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tabla-expandible .det-in .ligas a { font-size: .76rem; margin-right: 6px; }
.tabla-expandible .det-in .uuid { font-family: monospace; font-size: .68rem; color: #6c757d; word-break: break-all; }
.tabla-expandible .vacio { padding: 30px 0; color: #6c757d; text-align: center; }
@media (max-width: 1100px) { .tabla-expandible .det-in { grid-template-columns: 1fr; } }
/* Franja de cifras que arma el JS: cada hijo es una cifra con .l (etiqueta), .v (número) y .f (nota).
   Mismo aspecto que kpi-strip, para cuando el JS no puede emitir kpi-tile.
   Alias: desempeno-comercial.js emite div.dc-kpi como hijo. */
.franja-cifras { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid rgba(0, 0, 0, .125); border-radius: .5rem; margin-bottom: 1rem; }
.franja-cifras > div { padding: .85rem 1.1rem; border-right: 1px solid rgba(0, 0, 0, .07); }
.franja-cifras > div:last-child { border-right: 0; }
.franja-cifras .l { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #6c757d; line-height: 1.2; }
.franja-cifras .v { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #0F0F12; margin-top: .1rem; font-variant-numeric: tabular-nums; }
.franja-cifras .f { font-size: .74rem; color: #8a8f98; }
@media (max-width: 720px) { .franja-cifras { grid-template-columns: repeat(2, 1fr); } }

/* Nombre con muestra de color (serie de una gráfica) y barrita de proporción bajo la cifra.
   .nombre-con-muestra > .muestra-color + texto; .barra-mini > i (ancho y color los pone el JS).
   Alias: desempeno-comercial.js emite dc-name / dc-sw / dc-bar. */
.nombre-con-muestra, .dc-name { font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.muestra-color, .dc-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.barra-mini, .dc-bar { height: 3px; background: #f0f0f2; border-radius: 2px; margin-top: 3px; }
.barra-mini > i, .dc-bar > i { display: block; height: 3px; border-radius: 2px; }

/* Cifra contra el periodo anterior: sube (verde), baja (rojo), .fuerte si cambió mucho, en curso (gris).
   Alias: desempeno-comercial.js emite dc-sube / dc-baja / dc-curso / dc-note. */
.cifra-sube, .dc-sube { color: #198754; }
.cifra-sube.fuerte, .dc-sube.fuerte { color: #0b5d24; font-weight: 600; }
.cifra-baja, .dc-baja { color: #dc3545; }
.cifra-baja.fuerte, .dc-baja.fuerte { color: #8e1b10; font-weight: 600; }
.cifra-en-curso, .dc-curso { color: #6c757d; }
.dc-note { font-size: .72rem; color: #6c757d; }

/* Tabla con subgrupos que arma el JS: tr.grp abre grupo (línea arriba), td.cm = nombre del grupo,
   tr.sub = renglón resumen (gris, cursiva), td.cli-nm = texto que sí se parte. */
.tabla-subgrupos tr.grp > td { border-top: 2px solid #dee2e6 !important; }
.tabla-subgrupos td.cm { font-weight: 600; vertical-align: top; white-space: nowrap; }
.tabla-subgrupos tr.sub > td { color: #6c757d; font-style: italic; }
.tabla-subgrupos td.cli-nm { white-space: normal; text-align: left; }
.tabla-subgrupos thead th:nth-child(2) { text-align: left; }

/* Gráfica que se muestra/oculta con un botón (el JS le pone .on). */
.grafica-plegable { position: relative; height: 300px; margin: .25rem 0 .75rem; display: none; }
.grafica-plegable.on { display: block; }

/* Página que se exporta a PDF con window.print(): al imprimir se quitan menú, pie y botones,
   y el contenido usa todo el ancho. Uso: class="hoja-imprimible" en el contenedor de la página. */
@media print {
    body:has(.hoja-imprimible) { background: #fff !important; }
    body:has(.hoja-imprimible) .navbar, body:has(.hoja-imprimible) nav,
    body:has(.hoja-imprimible) footer, body:has(.hoja-imprimible) .footer,
    body:has(.hoja-imprimible) #sidebar, .hoja-imprimible .btn { display: none !important; }
    body:has(.hoja-imprimible) .container, body:has(.hoja-imprimible) .container-fluid,
    body:has(.hoja-imprimible) main { max-width: none !important; width: 100% !important; padding: 0 !important; }
    .hoja-imprimible .card-header { page-break-after: avoid; }
    .hoja-imprimible table { page-break-inside: auto; }
}
/* Encabezado de columna escrito de lado (matrices con muchas columnas angostas,
   p. ej. persona × permiso). Va en th.encabezado-vertical. */
th.encabezado-vertical { writing-mode: vertical-rl; transform: rotate(180deg); height: 128px; padding: 8px 4px !important; white-space: nowrap; vertical-align: bottom; }
/* Enlace discreto dentro de una tabla o texto: color del texto con subrayado punteado gris,
   para que se note que se puede abrir sin pintar todo de azul. Uso: <a class="enlace-discreto"> */
.enlace-discreto { color: inherit; text-decoration: underline dotted #adb5bd; }
.enlace-discreto:hover { color: #FA6100; }
/* Número grande en rojo/verde: la regla global .kpi-value { color: naranja !important } se comía
   text-danger / text-success (la guía dice "kpi-value + text-danger"). Esto las deja funcionar. */
/* Hilo de mensajes tipo chat (respuestas a un caso, conversación con el equipo).
   .burbuja + .burbuja-propia (a la derecha, tono de marca) o .burbuja-otro (a la izquierda, gris);
   .burbuja-meta = quién y cuándo. */
.burbuja { max-width: 85%; padding: .6rem .85rem; border-radius: 12px; margin-bottom: .6rem; word-break: break-word; font-size: .9rem; }
.burbuja-propia { background: #fff1e6; margin-left: auto; border-bottom-right-radius: 4px; }
.burbuja-otro { background: #f1f3f5; margin-right: auto; border-bottom-left-radius: 4px; }
.burbuja-meta { font-size: .72rem; color: #6c757d; margin-bottom: .2rem; }
.burbuja-texto { white-space: pre-line; }

/* Imagen adjunta en miniatura (clic la abre grande). */
.imagen-adjunta { max-width: 200px; max-height: 150px; border-radius: 6px; border: 1px solid #dee2e6; cursor: pointer; object-fit: contain; }

/* Zona para soltar archivos (clic o arrastrar). El JS le pone .drag-over mientras se arrastra. */
.zona-archivos { border: 2px dashed #dee2e6; border-radius: 8px; padding: 2rem; text-align: center; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.zona-archivos:hover, .zona-archivos.drag-over { border-color: #FA6100; background-color: #fff8f3; }

/* Miniaturas de archivos por subir, cada una con su botón redondo para quitarla. */
.miniaturas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.miniatura { position: relative; width: 120px; height: 120px; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #dee2e6; }
.miniatura-quitar { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: #dc3545; color: #fff; border: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; }

/* Texto recortado que el usuario despliega (el JS le pone .expanded). */
.texto-recortado.expanded { max-height: none; }

/* Mosaico de la franja de indicadores que funciona como filtro: el elegido queda marcado. */
.tablero .kpi-strip .kpi-tile.active { background: rgba(250, 97, 0, .07); box-shadow: inset 0 -3px 0 #FA6100; }

/* Tarjeta que se oculta/desvanece al filtrar una lista (el JS le pone .hidden / .fade-out). */
.card.hidden { display: none !important; }
.card.fade-out { opacity: 0; transform: scale(.98); transition: opacity .2s ease, transform .2s ease; }
/* Tarjeta o renglón con franja de color a la izquierda (pendientes por decidir, bitácora de
   actividad). Color por modificador: franja-naranja | franja-ambar | franja-roja |
   franja-verde | franja-azul (gris si no lleva). Compacta para listas largas.
   Uso: <div class="tarjeta-franja franja-roja"> … </div> (reclutamiento-A). */
.tarjeta-franja {
    border: 1px solid #e5e7eb;
    border-left: 4px solid #adb5bd;
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    background: #fff;
}
.tarjeta-franja.compacta { padding: .5rem .75rem; margin-bottom: 0; }
.tarjeta-franja.franja-naranja { border-left-color: #FA6100; }
.tarjeta-franja.franja-ambar { border-left-color: #ffc107; }
.tarjeta-franja.franja-roja { border-left-color: #dc3545; }
.tarjeta-franja.franja-verde { border-left-color: #198754; }
.tarjeta-franja.franja-azul { border-left-color: #082382; }
/* Minigráfica de barras (actividad de 7 días junto a un número). La altura de cada barra
   la pone el JS (el.style.height). Uso: <div class="minigrafica"><span></span>…</div> */
.minigrafica { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; }
.minigrafica span { display: inline-block; width: 6px; min-height: 2px; background: #082382; border-radius: 1px 1px 0 0; }
/* Indicador de la franja que cambia de tono según su estado: el JS pone data-tone en el
   .kpi-tile (down = falla, alert = requiere decisión, degraded = a medias). */
.tablero .kpi-tile[data-tone="down"] .kpi-value { color: #dc3545; }
.tablero .kpi-tile[data-tone="alert"] .kpi-value { color: #FA6100; }
.tablero .kpi-tile[data-tone="degraded"] .kpi-value { color: #b58100; }
/* Más anchos de columna para tablas (completa la serie .ancho-col-NN). */
.ancho-col-180 { width: 180px; }
/* Imagen chica de muestra (logo actual, vista previa en un formulario). */
.imagen-chica { max-height: 100px; }
/* Bloque angosto (tarjeta de vista previa, ficha suelta). */
.ancho-angosto { max-width: 400px; }
/* Tarjetas de clave/valor (variables de configuración, parámetros) (sub-equipo reclutamiento-B).
   .clave-texto = nombre de la clave en monoespaciado; .valor-codigo = valor en caja gris que parte
   palabras largas; .valor-oculto = valor sensible enmascarado; .cabecera-grupo = barra gris que
   titula un grupo de tarjetas; .texto-ayuda = descripción chica gris.
   Alias: configuration/env-variables.js emite variable-key, variable-value, sensitive-value,
   category-header, description-text, protected-badge, sensitive-badge (quitar al renombrar el JS). */
.clave-texto, .variable-key {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #0F0F12;
    word-break: break-all;
}
.valor-codigo, .variable-value {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    background-color: #f8f9fa;
    padding: .25rem .5rem;
    border-radius: .25rem;
    word-break: break-all;
}
.valor-oculto, .sensitive-value { color: #6c757d; font-style: italic; }
.cabecera-grupo, .category-header {
    background-color: #f1f3f5;
    padding: .6rem 1rem;
    border-radius: .375rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.texto-ayuda, .description-text { font-size: .875rem; color: #6c757d; }
.category-section { margin-bottom: 1.5rem; }
.badge.protected-badge { background-color: #dc3545; color: #fff; }
.badge.sensitive-badge { background-color: #ffc107; color: #0F0F12; }
/* Nota con franja naranja a la izquierda (respuesta del equipo, notas del administrador).
   Ojo: no usar border-4 de Bootstrap 5.3.0-alpha1 en contenedores: cambia --bs-border-width
   y engorda TODOS los bordes de adentro (botones, etiquetas). */
.nota-lateral { border-left: 4px solid #FA6100; background: #f8f9fa; border-radius: 0 8px 8px 0; padding: .75rem 1rem; }
/* Franja de cifras de seis columnas (variante de .franja-cifras). */
.franja-cifras.franja-cifras-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) { .franja-cifras.franja-cifras-6 { grid-template-columns: repeat(3, 1fr); } .franja-cifras.franja-cifras-6 > div:nth-child(3n) { border-right: 0; } }
@media (max-width: 900px) { .franja-cifras.franja-cifras-6 { grid-template-columns: repeat(2, 1fr); } }

/* Caja de gráfica con alto fijo (Chart.js con maintainAspectRatio:false). Baja: 240px. */
.grafica-caja { position: relative; height: 300px; margin: .25rem 0 .75rem; }
.grafica-caja.grafica-caja-baja { height: 240px; }

/* Informe de datos que pinta el JS (tablas, ficha en pop-up). Clases internas que emite el JS:
   td.nm (nombre, se parte), td.tx (texto gris), td.n (cifra), tr.tot (total), a.cli (liga a la ficha),
   .sube/.baja/.curso (contra el periodo anterior), .pill.ok/.pill.no (activo / sin compra). */
.informe-datos td.nm { white-space: normal; min-width: 220px; font-weight: 600; text-align: left; }
.informe-datos td.tx { text-align: left; white-space: normal; color: #6c757d; font-size: .74rem; min-width: 220px; }
.informe-datos td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.informe-datos tr.tot > td { font-weight: 700; border-top: 2px solid #212529 !important; }
.informe-datos a.cli { color: #212529; text-decoration: none; border-bottom: 1px dotted #999; cursor: pointer; }
.informe-datos a.cli:hover { color: #FA6100; }
.informe-datos .sube { color: #198754; }
.informe-datos .baja { color: #dc3545; }
.informe-datos .curso { color: #6c757d; font-style: italic; }
.informe-datos .pill { display: inline-block; font-size: .66rem; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.informe-datos .pill.ok { background: #e8f5ee; color: #14663c; }
.informe-datos .pill.no { background: #fdecec; color: #a12020; }
.informe-datos .modal-body h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; margin: 1rem 0 .4rem; }
.informe-datos .modal-body table { font-size: .8rem; font-variant-numeric: tabular-nums; width: 100%; }
.informe-datos .modal-body td, .informe-datos .modal-body th { padding: 4px 6px; }
/* Foto de perfil de una persona (candidato, empleado): cuadro de 100px recortado sin
   deformar. Va con rounded-circle. Uso: <img class="rounded-circle foto-perfil" src="…"> */
.foto-perfil { width: 100px; height: 100px; object-fit: cover; }
.foto-perfil.foto-perfil-sm { width: 80px; height: 80px; }
/* Tablero kanban por columnas (etapas lado a lado; scroll horizontal si no caben).
   Uso: <div class="kanban">
          <div class="kanban-columna [vacia]">
            <div class="kanban-columna-cabecera"><span class="kanban-columna-titulo" style="background:{{color}}">Etapa</span>
              <span class="kanban-columna-conteo">3</span><span class="kanban-columna-aviso">— sin candidatos</span></div>
            <div class="kanban-columna-cuerpo"> tarjetas .tarjeta-kanban </div>
          </div></div>
   Columna .vacia: se reduce a una etiqueta delgada. Tarjeta: .dragging (la que se arrastra),
   .drag-over (destino); .tarjeta-kanban-quitar sale al pasar el mouse; .tarjeta-kanban-casilla
   es la casilla de selección en la esquina. */
.kanban { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.kanban-columna {
    flex: 0 0 300px; width: 300px; display: flex; flex-direction: column;
    background: #f4f4f5; border-radius: .75rem; padding: 10px;
    min-height: 140px; max-height: calc(100vh - 180px);
}
.kanban-columna-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex: 0 0 auto; }
.kanban-columna-titulo {
    font-size: .8rem; font-weight: 600; color: #fff; background: #6c757d;
    padding: 3px 11px; border-radius: .5rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.kanban-columna-conteo {
    font-size: .72rem; font-weight: 600; color: #56565e; background: #fff;
    border: 1px solid #e3e3e6; border-radius: 999px; padding: 1px 9px; flex: 0 0 auto;
}
.kanban-columna-aviso { color: #a4a4ac; font-size: .74rem; font-style: italic; }
.kanban-columna-cuerpo { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1 1 auto; min-height: 48px; }
.kanban-columna.vacia { flex: 0 0 130px; width: 130px; min-height: 0; background: transparent; padding: 8px 6px; }
.kanban-columna.vacia .kanban-columna-cabecera { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 0; }
.kanban-columna.vacia .kanban-columna-titulo { white-space: normal; }
.kanban-columna.vacia .kanban-columna-aviso { display: none; }
.kanban-columna.vacia .kanban-columna-cuerpo { min-height: 14px; }
.tarjeta-kanban {
    position: relative; flex: 0 0 auto; width: 100%;
    background: #fff; border: 1px solid #ececee; border-radius: .75rem;
    padding: 13px 13px 11px; cursor: grab; font-size: .8rem;
    box-shadow: 0 1px 2px rgba(15, 15, 18, .05);
    transition: box-shadow .18s, border-color .18s;
}
.tarjeta-kanban:hover { box-shadow: 0 6px 18px rgba(15, 15, 18, .10); border-color: #e0d7ce; }
.tarjeta-kanban.dragging { opacity: .5; cursor: grabbing; }
.tarjeta-kanban.drag-over { border: 2px dashed #FA6100; }
.tarjeta-kanban .btn-sm { font-size: .7rem; padding: .15rem .55rem; }
.tarjeta-kanban .badge { font-size: .64rem; }
.tarjeta-kanban .form-select-sm { font-size: .66rem; padding: .1rem 1.4rem .1rem .35rem; max-width: 130px; }
.tarjeta-kanban-quitar { display: none; position: absolute; top: 8px; right: 8px; z-index: 10; }
.tarjeta-kanban:hover .tarjeta-kanban-quitar { display: block; }
.tarjeta-kanban-casilla { position: absolute; top: 7px; left: 7px; z-index: 4; width: 16px; height: 16px; cursor: pointer; }

/* Avatar con iniciales (34px, naranja suave) para tarjetas y renglones de personas. */
.avatar-iniciales {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
    background: #ffe7d5; color: #FA6100; font-weight: 600; font-size: .78rem;
    display: flex; align-items: center; justify-content: center;
}

/* Barra flotante abajo al centro (acciones sobre lo seleccionado). El JS la muestra
   con style.display = 'flex'; en el HTML va con style="display:none". */
.barra-flotante {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 1050;
    background: #0F0F12; color: #fff; border-radius: 999px; padding: 8px 10px 8px 18px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25); align-items: center; gap: 12px;
}
/* Renglón de bitácora (cambios de una configuración, logs de un proceso): texto chico,
   línea abajo y fondo al pasar el mouse. Con .renglon-bitacora-detalle oculto que se
   muestra cuando el renglón tiene .expanded (el JS lo alterna con un clic).
   Etiqueta de severidad: .etiqueta-severidad.info|warning|critical. Acción: .accion-bitacora.created|updated|deleted.
   Alias (static/js/recruitment/agent-config.js emite estas clases): log-item, agent-log-item,
   agent-log-metadata, severity-badge, log-action. */
.renglon-bitacora, .log-item, .agent-log-item { padding: .75rem 1rem; border-bottom: 1px solid #f0f0f0; font-size: .85rem; }
.renglon-bitacora:last-child, .log-item:last-child, .agent-log-item:last-child { border-bottom: 0; }
.renglon-bitacora:hover, .log-item:hover, .agent-log-item:hover { background: #f8f9fa; }
.agent-log-item { cursor: pointer; }
.renglon-bitacora-detalle, .agent-log-metadata {
    display: none; background: #f8f9fa; padding: .75rem; margin-top: .5rem; border-radius: 4px;
    font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem;
}
.expanded > .renglon-bitacora-detalle, .agent-log-item.expanded .agent-log-metadata { display: block; }
.etiqueta-severidad, .severity-badge {
    display: inline-block; font-size: .7rem; padding: .2rem .5rem; border-radius: 4px;
    font-weight: 600; text-transform: uppercase; background: #eef0f2; color: #495057;
}
.etiqueta-severidad.info, .severity-badge.info { background: #e7ecfa; color: #082382; }
.etiqueta-severidad.warning, .severity-badge.warning { background: #fff3cd; color: #856404; }
.etiqueta-severidad.critical, .severity-badge.critical { background: #f8d7da; color: #842029; }
.accion-bitacora, .log-action { font-weight: 600; text-transform: capitalize; }
.accion-bitacora.created, .log-action.created { color: #00515c; }
.accion-bitacora.updated, .log-action.updated { color: #082382; }
.accion-bitacora.deleted, .log-action.deleted { color: #dc3545; }

/* Indicador de guardado junto a un editor: .saving (azul) | .saved (verde) | .error (rojo).
   Alias: save-indicator (el JS reescribe className = 'save-indicator ' + estado). */
.indicador-guardado, .save-indicator { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; }
.indicador-guardado.saving, .save-indicator.saving { color: #082382; }
.indicador-guardado.saved, .save-indicator.saved { color: #00515c; }
.indicador-guardado.error, .save-indicator.error { color: #dc3545; }

/* Franja de encabezado con ícono grande y texto blanco sobre color de la marca (el JS puede
   ponerle su propio fondo). Uso: <div class="franja-encabezado"><i class="bi bi-x"></i>
   <div><h5>Título</h5><small>Descripción</small></div></div> */
.franja-encabezado {
    display: flex; align-items: center; gap: .75rem; padding: 1rem; margin-bottom: 1rem;
    background: #FA6100; color: #fff; border-radius: .5rem;
}
.franja-encabezado > i { font-size: 2rem; opacity: .9; }
.franja-encabezado h5 { margin: 0; font-weight: 600; color: #fff; }
.franja-encabezado small { opacity: .85; }

/* Editor de texto largo (Markdown, prompts) a todo lo ancho dentro de una tarjeta:
   letra monoespaciada, sin borde propio y alto mínimo de 400px. Va con form-control. */
.form-control.editor-texto {
    min-height: 400px; border: 0 !important; border-radius: 0 !important; resize: vertical;
    font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; line-height: 1.5; padding: 1rem;
}
.form-control.editor-texto:focus { box-shadow: inset 0 0 0 2px rgba(250, 97, 0, .15) !important; }

/* Vista previa de Markdown renderizado (títulos más chicos que los de la página). */
.vista-markdown { background: #f8f9fa; border-radius: .5rem; padding: 1rem; min-height: 200px; font-size: .9rem; }
.vista-markdown h1 { font-size: 1.5rem; }
.vista-markdown h2 { font-size: 1.25rem; }
.vista-markdown h3 { font-size: 1.1rem; }
.vista-markdown ul, .vista-markdown ol { padding-left: 1.5rem; }


/* ######################################################################
   9. Componentes — grupo analisis-metricas (migración 26-oct-2026; se consolidan al final)
   ###################################################################### */
/* Pastilla de estado fuera de un .tablero (tablas, listas): mismo aspecto que .kpi-chip
   del Dashboard. .pastilla + .pastilla-ok (verde) | .pastilla-warn (ámbar) | .pastilla-bad (rojo)
   | .pastilla-neutro (gris). Sirve también como <a>. */
.pastilla {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    border: 1px solid #e3e6ea;
    background: #f1f3f5;
    color: #495057;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.4;
}
a.pastilla:hover { filter: brightness(.96); }
.pastilla-ok { background: #e8f5ee; color: #14663c; border-color: #cfe9db; }
.pastilla-warn { background: #fff4e5; color: #8a4b00; border-color: #ffe0b8; }
.pastilla-bad { background: #fdecec; color: #a12020; border-color: #f8d3d3; }
.pastilla-neutro { background: #f1f3f5; color: #495057; border-color: #e3e6ea; }

/* Panel plegable: tarjeta cuya cabecera abre/cierra el cuerpo. El JS le pone .abierta al
   contenedor (p. ej. onclick="this.parentElement.classList.toggle('abierta')"). */
.plegable-cabecera { cursor: pointer; }
.plegable > .plegable-cuerpo { display: none; }
.plegable.abierta > .plegable-cuerpo { display: block; }

/* Barra de avance delgada que ocupa todo el ancho (va con .progress; el ancho de
   .progress-bar va en línea con el porcentaje). */
.progress.barra-delgada { height: 8px; }

/* Gráfica de barras por mes en pares (dos series lado a lado) sin Chart.js.
   .grafica-meses > .grafica-mes > .grafica-mes-barras > .grafica-mes-barra[.serie-a|.serie-b]
   + .grafica-mes-etiqueta (texto vertical). El alto de cada barra va en línea (%). */
.grafica-meses { display: flex; align-items: flex-end; gap: 6px; height: 130px; overflow-x: auto; padding-bottom: 4px; }
.grafica-mes { display: flex; flex-direction: column; align-items: center; min-width: 34px; }
.grafica-mes-barras { display: flex; align-items: flex-end; gap: 2px; height: 100px; }
.grafica-mes-barra { width: 12px; border-radius: 2px 2px 0 0; background: #adb5bd; }
.grafica-mes-barra.serie-a { background: #dc3545; }
.grafica-mes-barra.serie-b { background: #FA6100; }
.grafica-mes-etiqueta { font-size: .62rem; color: #6c757d; margin-top: 2px; writing-mode: vertical-rl; transform: rotate(180deg); height: 44px; }

/* Etiqueta de nivel de riesgo: .risk-badge + .risk-critico|alto|medio|bajo (nombres que
   todavía emite el JS de análisis, p. ej. fraud-detection.js). Mismo tamaño que .badge.
   Sólo dentro de un contenedor .niveles-riesgo (otras páginas usan .risk-badge a su modo). */
.niveles-riesgo .risk-badge {
    display: inline-block;
    min-width: 80px;
    padding: .25rem .6rem;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    background: #6c757d;
}
.niveles-riesgo .risk-badge.risk-critico { background: #dc3545; }
.niveles-riesgo .risk-badge.risk-alto { background: #FA6100; }
.niveles-riesgo .risk-badge.risk-medio { background: #f59e0b; }
.niveles-riesgo .risk-badge.risk-bajo { background: #198754; }
/* Renglón de tabla que abre un detalle al hacer clic (nombre que emite el JS). */
.table-row-clickable { cursor: pointer; }
/* Señal/bandera (texto corto de advertencia) y pastilla de pago, nombres que emite el JS;
   mismo aspecto que .pastilla-warn / .pastilla-ok. */
.red-flag-badge, .payment-badge {
    display: inline-block;
    font-size: .72rem;
    padding: .12rem .5rem;
    margin: .1rem .2rem .1rem 0;
    border-radius: 999px;
    line-height: 1.4;
}
.red-flag-badge { background: #fff4e5; color: #8a4b00; border: 1px solid #ffe0b8; }
.payment-badge { background: #e8f5ee; color: #14663c; border: 1px solid #cfe9db; font-weight: 600; }
/* Renglones de una lista (facturas, productos que pinta el JS) separados por línea.
   Van dentro de un contenedor .lista-renglones. */
.lista-renglones .invoice-row, .lista-renglones .product-row { padding: .6rem 0; border-bottom: 1px solid #eef0f2; }
.lista-renglones .invoice-row:last-child, .lista-renglones .product-row:last-child { border-bottom: 0; }
/* Condición de pago y monto vencido en tablas de proveedores (nombres que emite el JS):
   etiqueta azul chica y pastilla roja. */
.payment-term-badge { display: inline-block; font-size: .7rem; padding: .1rem .45rem; margin: .1rem; border-radius: 4px; background: #e7f1ff; color: #0b5ed7; white-space: nowrap; }
.overdue-badge { display: inline-block; font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; background: #fdecec; color: #a12020; border: 1px solid #f8d3d3; font-weight: 600; white-space: nowrap; }
/* Contenedores de gráfica (Chart.js con maintainAspectRatio:false) fuera del .tablero:
   mediana 300px y grande 400px (la chica, 160px, es .grafica-chica). */
.grafica-media { position: relative; height: 300px; width: 100%; }
.grafica-grande { position: relative; height: 400px; width: 100%; }
/* Estado de pago de una factura y moneda (nombres que emite el JS de proveedores):
   pagada verde, parcial ámbar, sin pagar roja; moneda en etiqueta azul. */
.invoice-status-paid, .invoice-status-partial, .invoice-status-not_paid {
    display: inline-block; font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.invoice-status-paid { background: #e8f5ee; color: #14663c; border-color: #cfe9db; }
.invoice-status-partial { background: #fff4e5; color: #8a4b00; border-color: #ffe0b8; }
.invoice-status-not_paid { background: #fdecec; color: #a12020; border-color: #f8d3d3; }
.currency-badge { display: inline-block; font-size: .7rem; padding: .1rem .45rem; margin-left: .3rem; border-radius: 4px; background: #e7f1ff; color: #0b5ed7; }
/* Lugar en un ranking (1, 2, 3, resto): círculo con el número. Va con .insignia-circulo
   (y .insignia-circulo-sm si se quiere chico) + .puesto-1|puesto-2|puesto-3|puesto-otro. */
.puesto-1 { background: #FA6100; color: #fff; }
.puesto-2 { background: #00515c; color: #fff; }
.puesto-3 { background: #082382; color: #fff; }
.puesto-otro { background: #f1f3f5; color: #6c757d; }
/* Renglón con enlace a su detalle: el ícono de "abrir" (fa-external-link-alt) sólo aparece
   al pasar el mouse por el renglón. */
.renglon-con-enlace a .fa-external-link-alt { opacity: 0; transition: opacity .2s ease; }
.renglon-con-enlace:hover a .fa-external-link-alt { opacity: 1; }
/* Color de fondo por serie (categoría 0-9 en tablas y barras que acompañan a una gráfica).
   Paleta de la marca + Bootstrap; el JS pone .fondo-serie-N con N = índice % 10. */
.fondo-serie-0 { background-color: #FA6100 !important; }
.fondo-serie-1 { background-color: #082382 !important; }
.fondo-serie-2 { background-color: #00515c !important; }
.fondo-serie-3 { background-color: #198754 !important; }
.fondo-serie-4 { background-color: #dc3545 !important; }
.fondo-serie-5 { background-color: #f59e0b !important; }
.fondo-serie-6 { background-color: #0d6efd !important; }
.fondo-serie-7 { background-color: #6c757d !important; }
.fondo-serie-8 { background-color: #0dcaf0 !important; }
.fondo-serie-9 { background-color: #343a40 !important; }
/* Caja con scroll de alto máximo chico (resultados de búsqueda en pop-ups); la normal
   es .caja-desplazable (300px). */
.caja-desplazable-chica { max-height: 200px; overflow-y: auto; }
/* Columna ordenable: el JS pone .sorted-asc / .sorted-desc en el <th class="sortable"> y la
   flecha (fa-sort) cambia sola a arriba/abajo. */
.sortable.sorted-asc i::before { content: "\f0de"; }
.sortable.sorted-desc i::before { content: "\f0dd"; }
/* Etiqueta mini morada (complementa .etiqueta-azul/.etiqueta-ambar/.etiqueta-gris): origen
   "Odoo" en tablas históricas, mismo morado que su serie en la gráfica. */
.etiqueta-morada { background: #f3e5f5; color: #7b1fa2; }
/* Tendencia: color de texto (sube verde, baja rojo, igual gris) y pastilla de tendencia
   .trend-indicator + .trend-up|down|stable. Nombres que reescribe el JS de comerciales;
   sólo dentro de .comparison-table o .tarjeta-metrica. */
.comparison-table .trend-up, .tarjeta-metrica .trend-up { color: #198754; }
.comparison-table .trend-down, .tarjeta-metrica .trend-down { color: #dc3545; }
.comparison-table .trend-stable, .tarjeta-metrica .trend-stable { color: #6c757d; }
.comparison-table .trend-indicator { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 4px; font-weight: 600; font-size: .8rem; }
.comparison-table .trend-indicator.trend-up { background: #e8f5ee; }
.comparison-table .trend-indicator.trend-down { background: #fdecec; }
.comparison-table .trend-indicator.trend-stable { background: #f1f3f5; }
/* Tarjeta de métrica (.tarjeta-metrica): etiqueta arriba, número grande y detalle. Va con .card .card-body;
   el JS reescribe className de .metric-value (p. ej. 'metric-value trend-up'), por eso
   el tamaño vive aquí y no en utilidades. */
.tarjeta-metrica .metric-label { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #6c757d; }
.tarjeta-metrica .metric-value { font-size: 1.7rem; font-weight: 700; line-height: 1.15; margin: .15rem 0 .35rem; }
.tarjeta-metrica .metric-detail { margin: .4rem 0; line-height: 1.6; font-size: .85rem; }
.tarjeta-metrica .metric-change { margin-top: .4rem; font-size: .85rem; }
/* Semáforo de un indicador contra su meta (nombres que emite el JS de comerciales):
   .semaphore-card(.status-green|yellow|red|gray) con .semaphore-indicator(.green|yellow|red|gray),
   .semaphore-value, .semaphore-label, .semaphore-goal, .semaphore-change(.positive|negative|neutral).
   .scaleup-card es la versión compacta con acento a la izquierda. */
.semaphore-card, .scaleup-card { background: #fff; border-radius: var(--radius-lg, 12px); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); padding: 1.25rem; text-align: center; height: 100%; }
.semaphore-card { border: 2px solid transparent; cursor: pointer; }
.semaphore-card.status-green { border-color: #198754; }
.semaphore-card.status-yellow { border-color: #f59e0b; }
.semaphore-card.status-red { border-color: #dc3545; }
.semaphore-card.status-gray { border-color: #adb5bd; }
.scaleup-card { border-left: 4px solid #FA6100; }
.semaphore-indicator { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; background: #adb5bd; }
.semaphore-indicator.green { background: #198754; }
.semaphore-indicator.yellow { background: #f59e0b; }
.semaphore-indicator.red { background: #dc3545; }
.semaphore-indicator.gray { background: #adb5bd; }
.scaleup-card .semaphore-indicator, .semaphore-card .semaphore-indicator.semaforo-chico { width: 44px; height: 44px; font-size: 1.1rem; }
.semaphore-value { font-size: 1.6rem; font-weight: 700; color: #0F0F12; margin-bottom: .2rem; }
.scaleup-card .semaphore-value { font-size: 1.4rem; }
.semaphore-label { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #6c757d; margin-bottom: .4rem; }
.semaphore-goal { font-size: .78rem; color: #8a8f98; }
.semaphore-change { font-size: .82rem; margin-top: .4rem; }
.semaphore-change.positive { color: #198754; }
.semaphore-change.negative { color: #dc3545; }
.semaphore-change.neutral { color: #6c757d; }
/* Autoevaluación con tres botones redondos rojo/ámbar/verde; .active marca el elegido
   (nombres que emite el JS). */
.assessment-btn-group { display: flex; gap: .25rem; }
.assessment-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #dee2e6; background: #fff; cursor: pointer; }
.assessment-btn.red:hover, .assessment-btn.red.active { background: #dc3545; border-color: #dc3545; }
.assessment-btn.yellow:hover, .assessment-btn.yellow.active { background: #f59e0b; border-color: #f59e0b; }
.assessment-btn.green:hover, .assessment-btn.green.active { background: #198754; border-color: #198754; }
/* Celda de mapa de calor: cuadro de 100px con la cifra al centro. La intensidad la calcula
   el JS en la variable --intensidad (0 a 1). */
.celda-calor { width: 100px; height: 100px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; font-weight: 700; background: rgba(250, 97, 0, var(--intensidad, .2)); }
/* Detalle de comisión dentro de un pop-up (nombres que emite el JS de comisiones):
   renglón con acento naranja a la izquierda y monto destacado. */
.commission-detail-item { border-left: 3px solid #FA6100; padding-left: 1rem; }
.commission-amount { font-size: 1.15rem; font-weight: 700; }
/* Movimientos de dinero (nombres que emite el JS de flujo de efectivo): línea de tiempo
   con punto por movimiento (.timeline-item.income verde / .expense rojo), monto positivo o
   negativo, renglón de ingreso/egreso con tinte suave y etiqueta por tipo. La línea de
   tiempo va dentro de un contenedor .linea-movimientos. */
.linea-movimientos .timeline-item { border-left: 3px solid #dee2e6; padding-left: 20px; margin-left: 10px; position: relative; margin-bottom: 20px; }
.linea-movimientos .timeline-item::before { content: ''; position: absolute; left: -8px; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid #FA6100; }
.linea-movimientos .timeline-item.income::before { border-color: #198754; }
.linea-movimientos .timeline-item.expense::before { border-color: #dc3545; }
.amount-positive { color: #198754; font-weight: 700; }
.amount-negative { color: #dc3545; font-weight: 700; }
tr.income-row > td { background-color: rgba(25, 135, 84, .05); }
tr.expense-row > td { background-color: rgba(220, 53, 69, .05); }
.badge.badge-income { background-color: #198754; color: #fff; }
.badge.badge-expense { background-color: #dc3545; color: #fff; }
.badge.badge-payroll { background-color: #00515c; color: #fff; }
/* Caja con scroll alta (600px) para tablas largas con encabezado fijo. */
.caja-desplazable-xl { max-height: 600px; overflow-y: auto; }
/* Contenedor de gráfica extra grande (500px) para la gráfica principal de una página. */
.grafica-xl { position: relative; height: 500px; width: 100%; }
/* Color del margen en tablas (nombres que emite el JS de líneas de factura):
   positivo verde, negativo rojo, cero gris. */
.margin-positive { color: #198754; font-weight: 500; }
.margin-negative { color: #dc3545; font-weight: 500; }
.margin-zero { color: #6c757d; }
/* Categoría de producto en una tabla densa (nombre que emite el JS): etiqueta gris chica. */
.tabla-densa .category-badge { display: inline-block; font-size: .7rem; padding: .1rem .4rem; border-radius: 4px; background: #6c757d; color: #fff; white-space: nowrap; }
/* Tabla de facturas con renglón que se abre (nombres que emite el JS de facturas):
   el renglón se pica; el renglón de detalle no lleva bordes y su contenido va con acento. */
tr.invoice-row { cursor: pointer; }
tr.invoice-detail-row > td { border: 0; padding: 0; background-color: #f8f9fa; }
.invoice-lines-container { border-left: 4px solid #FA6100; box-shadow: inset 0 0 10px rgba(0, 0, 0, .05); }
.invoice-lines-container table { font-size: .75rem; }
/* Tabla comparativa por comercial (nombres que emite el JS de metas): cada comercial con su
   tinte de fondo suave (bg-color-0..4) y su celda de nombre separada; monto con detalle
   subrayado punteado; botón mínimo de "abrir" junto a una cifra; caja flotante de detalle
   (oculta hasta que el JS la muestra). El botón mínimo va dentro de .tabla-comparativa. */
.bg-color-0 { background-color: rgba(8, 35, 130, .04) !important; }
.bg-color-1 { background-color: rgba(250, 97, 0, .05) !important; }
.bg-color-2 { background-color: rgba(25, 135, 84, .05) !important; }
.bg-color-3 { background-color: rgba(245, 158, 11, .06) !important; }
.bg-color-4 { background-color: rgba(108, 117, 125, .06) !important; }
.salesperson-cell { border-right: 2px solid #dee2e6 !important; font-weight: 700; }
.tabla-comparativa .btn.btn-xs { padding: 0; font-size: .65rem; line-height: 1; border-radius: 0; vertical-align: middle; margin-left: 2px; color: #6c757d; opacity: .7; }
.tabla-comparativa .btn.btn-xs:hover { opacity: 1; }
.amount-with-details { cursor: pointer; border-bottom: 1px dotted #6c757d; display: inline-block; }
.popover-container { display: none; min-width: 300px; max-width: 500px; font-size: .85rem; }
/* Costos de facturas (nombres que emite el JS de asignación de costos): tarjeta de factura
   con cabecera gris que se abre (.invoice-card > .invoice-header + .invoice-lines), renglones
   de línea (.invoice-line .has-amount/.no-amount, .line-info) y margen negativo en rojo. */
.invoice-card { border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: .75rem; overflow: hidden; background: #fff; }
.invoice-header { background: #f8f9fa; padding: .6rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.invoice-header .invoice-info { flex: 1; min-width: 0; }
.invoice-lines { border-top: 1px solid #dee2e6; }
.invoice-card .invoice-line { padding: .5rem 1rem; display: block; }
.invoice-line.no-amount { background: #fafafa; color: #6c757d; font-style: italic; }
.invoice-line .line-description { white-space: pre-wrap; }
.line-info { font-size: .8rem; color: #6c757d; }
.invoice-card.negative-margin { background: #fff8f8; border-color: #f8d3d3; }
.invoice-card.negative-margin .invoice-header { background: #fdecec; }
.invoice-line.negative-margin { background: #fff4f4 !important; border-left: 3px solid #dc3545; }
/* Asignación de costos en el pop-up: renglón de empleado asignado, empleado sugerido (verde),
   lista de empleados, línea de factura elegible (.selected / .info-line), costo propio,
   pastillas de empleado/costo asignado y renglón de bitácora. Empleados dentro de .lista-empleados. */
.assignment-item { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: .6rem 1rem; margin-bottom: .5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.assignment-item:hover { border-color: #adb5bd; }
.assignment-item .employee-name { font-weight: 600; }
.lista-empleados .suggested-employee { background: #e8f5ee !important; border: 1px solid #198754 !important; }
.lista-empleados .employee-item:hover { background: #e9ecef !important; }
.invoice-line-item { padding: .5rem .75rem; border-bottom: 1px solid #f0f0f0; font-size: .85rem; }
.invoice-line-item:last-child { border-bottom: 0; }
.invoice-line-item.selected { background: #e9ecef; border-left: 4px solid #FA6100; font-weight: 500; }
.invoice-line-item.info-line { background: #fafafa; color: #6c757d; font-style: italic; }
.invoice-line-item .line-desc { word-break: break-word; }
.assigned-employees-list { font-size: .75rem; margin-top: .25rem; }
.assigned-employee-chip, .assigned-cost-chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; margin: .1rem .15rem .1rem 0; font-size: .7rem; }
.assigned-employee-chip { background: #e8f5ee; color: #14663c; }
.assigned-cost-chip { background: #e7f1ff; color: #0b5ed7; }
.assigned-employee-chip i, .assigned-cost-chip i { margin-right: .2rem; }
.custom-cost-item { background: #f8f9fa; border-left: 3px solid #00515c; }
.audit-log-entry { padding: .6rem 1rem; border-bottom: 1px solid #f0f0f0; }
.audit-log-entry:last-child { border-bottom: 0; }
.audit-log-entry:hover { background: #f8f9fa; }
/* Flecha de un encabezado plegable que gira cuando el JS cambia su transform. */
.flecha-plegable { transition: transform .2s; font-size: .85rem; }
/* Campo obligatorio que se marca en rojo mientras no es válido (y su .form-text de abajo). */
.campo-obligatorio:invalid { border-color: #dc3545; }
.campo-obligatorio:invalid + .form-text { color: #dc3545; }
/* Celdas truncadas de ancho máximo fijo (van con .text-truncate) para tablas densas. */
.celda-max-100 { max-width: 100px; }
.celda-max-150 { max-width: 150px; }
.celda-max-180 { max-width: 180px; }
/* Capa por encima de los pop-ups (alert con position-fixed que debe verse sobre un modal). */
.sobre-popups { z-index: 1070; }
/* Lista de resultados que se despliega sobre el contenido (búsqueda dentro de un pop-up). */
.resultados-flotantes { max-height: 200px; overflow-y: auto; z-index: 1050; }
/* Tablas con renglones que se abren (Bootstrap collapse en un <tr>): el renglón oculto no deja
   relleno y al abrirse lleva una línea arriba. Va en un contenedor .filas-expandibles. */
.filas-expandibles tr.collapse > td { padding: 0 !important; }
.filas-expandibles tr.collapse.show > td > div { border-top: 2px solid #dee2e6; }
.filas-expandibles tr.expandable-row { cursor: pointer; }
.filas-expandibles tr.expandable-row:hover > td { background-color: #f8f9fa; }
/* Chevron de un botón que abre/cierra un collapse: gira al abrir. */
.btn-link[data-bs-toggle="collapse"] .fa-chevron-right { transition: transform .2s; }
.btn-link[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-right { transform: rotate(90deg); }
/* Rejilla de tarjetas que llenan todo el ancho (auto-fit: con pocas tarjetas, cada una se estira;
   .rejilla-tarjetas usa auto-fill y deja huecos). Mínimo 290px por tarjeta. */
.rejilla-ancha { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .75rem; }
/* Editor de texto (Markdown/prompt): letra de ancho fijo. La regla global de .form-control
   fija la tipografía de la marca con !important; aquí se gana con dos clases. */
.form-control.editor-texto { font-family: SFMono-Regular, Menlo, Consolas, monospace !important; }

/* Tarjeta seleccionable elegida: anillo naranja con sombra (la hoja quita bordes a .card con !important). */
.tarjeta-seleccionable.active { box-shadow: 0 0 0 2px #FA6100; }
/* Texto mini (etiquetas bajo una cifra en celdas angostas de tabla). */
.texto-mini { font-size: .7rem; }
/* Anchos fijos de columna que faltaban junto a .ancho-col-NN (para <col>/<th> de tablas de ancho fijo). */
.ancho-col-30 { width: 30px; }
.ancho-col-32 { width: 32px; }
.ancho-col-42 { width: 42px; }
.ancho-col-80 { width: 80px; }
.ancho-col-84 { width: 84px; }
.ancho-col-100 { width: 100px; }
.ancho-col-112 { width: 112px; }
.ancho-col-230 { width: 230px; }

/* Montos con signo: dentro de .montos-con-signo, el JS marca .positive (entra, verde) o .negative (sale, rojo). */
.montos-con-signo .positive { color: #198754; }
.montos-con-signo .negative { color: #dc3545; }

/* Etiqueta que el JS apaga con .hidden (contadores de filtros). */
.badge.hidden { display: none; }

/* Carrusel de indicadores para celular: tarjetas chicas que se recorren de lado (va con d-flex d-md-none). */
.carrusel-indicadores {
    gap: .6rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .25rem;
}
.carrusel-indicadores::-webkit-scrollbar { display: none; }
.carrusel-indicadores .indicador {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 170px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: .5rem;
    padding: .6rem .75rem;
    scroll-snap-align: start;
}
.carrusel-indicadores .indicador .kpi-label { font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; color: #6c757d; }
.carrusel-indicadores .indicador .card-amount { font-size: 1rem; font-weight: 700; color: #0F0F12; line-height: 1.2; word-break: break-word; }
.carrusel-indicadores .indicador .card-amount.negative { color: #dc3545; }
.carrusel-indicadores .indicador .kpi-sub { font-size: .62rem; color: #8a8f98; }

/* Tabla de movimientos (flujo de caja): ancho fijo por <colgroup>, montos sin partir,
   renglones por tipo que pone el JS, encabezados de sección plegables y renglones de saldo/corte.
   Va sobre el contenedor de la tabla: <div class="tabla-movimientos"><table class="table table-sm tabla-densa">. */
.tabla-movimientos table { table-layout: fixed; width: 100%; }
.tabla-movimientos th, .tabla-movimientos td { word-break: normal; }
.tabla-movimientos .col-venc, .tabla-movimientos .col-num { white-space: nowrap; }
.tabla-movimientos .col-desc { white-space: normal; word-break: break-word; font-size: .72rem; line-height: 1.25; }
.tabla-movimientos .col-partner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-movimientos .col-tipo, .tabla-movimientos .col-mon, .tabla-movimientos .col-acc { text-align: center; }
.tabla-movimientos .col-mon { font-size: .66rem; }
.tabla-movimientos .col-num { font-size: .75rem; }
.tabla-movimientos .col-fact { font-size: .7rem; white-space: nowrap; }
.tabla-movimientos .actions-cell { white-space: nowrap; }
.tabla-movimientos .actions-cell .btn { padding: .15rem .4rem; font-size: .75rem; margin: 0 1px; }
.tabla-movimientos .btn-edit { color: #fff; background: #082382; border-color: #082382; }
.tabla-movimientos .btn-delete { color: #fff; background: #dc3545; border-color: #dc3545; }
.tabla-movimientos .btn-edit:hover, .tabla-movimientos .btn-delete:hover { color: #fff; filter: brightness(.9); }
.tabla-movimientos .scheduled-date { font-style: italic; color: #0dcaf0; }
.tabla-movimientos tr.section-header { cursor: pointer; }
.tabla-movimientos tr.section-header td { white-space: nowrap; }
.tabla-movimientos .section-header .collapse-icon { transition: transform .2s; }
.tabla-movimientos .section-totals { color: #6c757d; font-weight: normal; }
.tabla-movimientos .section-totals strong { color: #495057; font-weight: 600; }
.tabla-movimientos tr.collapsible-section.collapsed { display: none; }
/* Renglones por tipo (los pone el JS). Van en la celda: la hoja común pinta las celdas. */
.tabla-movimientos tr.egreso-row > td { background-color: #f8f9fa !important; }
.tabla-movimientos tr.manual-income-row > td,
.tabla-movimientos tr.factoring-income-row > td { background-color: #e7f3ff !important; }
.tabla-movimientos tr.manual-expense-row > td { background-color: #fdecec !important; }
.tabla-movimientos tr.payroll-row > td { background-color: #f1ecfa !important; }
.tabla-movimientos tr.egreso-row:hover > td,
.tabla-movimientos tr.manual-income-row:hover > td,
.tabla-movimientos tr.factoring-income-row:hover > td,
.tabla-movimientos tr.manual-expense-row:hover > td,
.tabla-movimientos tr.payroll-row:hover > td { filter: brightness(.97); }
.tabla-movimientos tr[data-type*="factoring"] > td:first-child { box-shadow: inset 4px 0 0 #FA6100; }
.tabla-movimientos tr[data-type="factoring_income"] > td:first-child { box-shadow: inset 4px 0 0 #198754; }
/* Saldo de hoy y corte de mes: renglón azul marino de la marca, letra blanca. */
.tabla-movimientos tr.today-balance-row > td,
.tabla-movimientos tr.monthly-cut-row > td { background-color: #082382 !important; color: #fff !important; font-weight: 600; }
.tabla-movimientos tr.monthly-cut-row small { font-weight: normal; opacity: .9; }

/* Tarjetas deslizables para celular: cada movimiento es una tarjeta; al deslizar a la izquierda
   aparecen sus acciones. Las arma el JS dentro de <div class="tarjetas-deslizables">. */
.tarjetas-deslizables .mobile-transaction-card { position: relative; background: #fff; border-radius: .75rem; margin-bottom: .6rem; box-shadow: 0 1px 6px rgba(0, 0, 0, .06); overflow: hidden; }
.tarjetas-deslizables .card-swipe-actions { position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: stretch; z-index: 1; }
.tarjetas-deslizables .swipe-action { width: 60px; border: 0; color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.tarjetas-deslizables .swipe-action.edit { background: #082382; }
.tarjetas-deslizables .swipe-action.validate { background: #198754; }
.tarjetas-deslizables .swipe-action.sync { background: #FA6100; }
.tarjetas-deslizables .swipe-action.delete { background: #dc3545; }
.tarjetas-deslizables .card-content { position: relative; z-index: 2; background: #fff; padding: .75rem; transition: transform .3s ease; }
.tarjetas-deslizables .card-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.tarjetas-deslizables .card-type-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .5rem; border-radius: 999px; font-size: .65rem; font-weight: 600; text-transform: uppercase; background: #f1f3f5; color: #495057; }
.tarjetas-deslizables .card-type-badge.ingreso { background: #e8f5ee; color: #14663c; }
.tarjetas-deslizables .card-type-badge.egreso { background: #fdecec; color: #a12020; }
.tarjetas-deslizables .card-type-badge.factoraje-in,
.tarjetas-deslizables .card-type-badge.factoraje-out { background: #fff4e5; color: #8a4b00; }
.tarjetas-deslizables .card-date { font-size: .72rem; color: #6c757d; }
.tarjetas-deslizables .card-description { font-size: .85rem; font-weight: 500; line-height: 1.3; margin-bottom: .25rem; }
.tarjetas-deslizables .card-partner { font-size: .75rem; color: #6c757d; margin-bottom: .5rem; }
.tarjetas-deslizables .card-amounts-row { display: flex; align-items: center; justify-content: space-between; padding-top: .5rem; border-top: 1px solid #f1f3f4; }
.tarjetas-deslizables .card-amount { font-size: 1rem; font-weight: 700; }
.tarjetas-deslizables .card-amount.positive { color: #198754; }
.tarjetas-deslizables .card-amount.negative { color: #dc3545; }
.tarjetas-deslizables .card-amount.factoraje-in,
.tarjetas-deslizables .card-amount.factoraje-out { color: #FA6100; }
.tarjetas-deslizables .card-balance { text-align: right; }
.tarjetas-deslizables .card-balance-label { font-size: .65rem; color: #adb5bd; text-transform: uppercase; }
.tarjetas-deslizables .card-balance-value { font-size: .85rem; font-weight: 600; }
.tarjetas-deslizables .swipe-hint { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #dee2e6; font-size: .8rem; }
.tarjetas-deslizables .mobile-transaction-card.touched .swipe-hint { display: none; }
.tarjetas-deslizables .mobile-section-header { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: .5rem; margin: .75rem 0 .5rem; }
.tarjetas-deslizables .mobile-section-header .section-header-content { padding: .6rem .8rem; display: flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 600; }
.tarjetas-deslizables .mobile-section-header .collapse-icon { font-size: .7rem; color: #6c757d; }
.tarjetas-deslizables .mobile-today-balance { background: #082382; color: #fff; border-radius: .5rem; padding: .6rem .8rem; margin: .75rem 0 .5rem; display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.tarjetas-deslizables .mobile-today-balance .today-amount { margin-left: auto; font-size: 1.05rem; }
.tarjetas-deslizables .mobile-monthly-cut { background: #f8f9fa; border: 1px dashed #dee2e6; border-radius: .5rem; padding: .5rem .8rem; margin: .5rem 0; text-align: center; color: #6c757d; font-size: .8rem; }

/* Botón de contorno ENCENDIDO (filtros tipo interruptor: .active o btn-check marcado).
   La regla de marca fija el color del texto con !important y el botón activo quedaba
   con letra azul/naranja sobre fondo oscuro. Aquí se rellena con el color del botón. */
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
    background-color: #FA6100 !important;
    border-color: #FA6100 !important;
    color: #fff !important;
}
.btn-outline-secondary.active,
.btn-check:checked + .btn-outline-secondary {
    background-color: var(--daltum-deep-blue, #082382) !important;
    border-color: var(--daltum-deep-blue, #082382) !important;
    color: #fff !important;
}
/* Lista en columnas hecha con flex (encabezado + renglones list-group con d-flex):
   ancho fijo de cada columna (col-flex-NN = NN px) o proporcional (col-flex-20/15 = 20%/15%). */
.col-flex-40 { flex: 0 0 40px; }
.col-flex-60 { flex: 0 0 60px; }
.col-flex-70 { flex: 0 0 70px; }
.col-flex-80 { flex: 0 0 80px; }
.col-flex-90 { flex: 0 0 90px; }
.col-flex-100 { flex: 0 0 100px; }
.col-flex-20 { flex: 1 1 20%; min-width: 150px; }
.col-flex-15 { flex: 1 1 15%; min-width: 130px; }
/* Renglón de list-group con franja de color a la izquierda; el color lo pone el dato
   (style="border-left-color: {{ color }}"). */
.list-group-item.renglon-franja { border-left: 4px solid #adb5bd; }
.list-group-item.renglon-franja:hover { background: #f8f9fa; }
/* Íconos apilados en vertical y juntos (flechas de prioridad). */
.flechas-apiladas { line-height: .6; display: inline-block; }
.flechas-apiladas i { display: block; }
/* Texto diminuto de apoyo (folio/#id bajo un ícono), más chico que .small. */
.texto-diminuto { font-size: .65rem; }
/* Cuadros de avance contra una meta: un cuadro por unidad (contratación, entrega), en una
   sola fila. .ok = logrado (naranja); con .completa los logrados pasan a verde de marca.
   Uso: <div class="cuadros-meta [completa] [cuadros-meta-sm]"><i class="ok"></i><i></i>…</div> */
.cuadros-meta { display: grid; grid-auto-flow: column; grid-auto-columns: 34px; gap: 4px; justify-content: start; }
.cuadros-meta i { display: block; height: 30px; background: #f2f2f3; border: 1px solid #dddde0; border-radius: 2px; }
.cuadros-meta i.ok { background: #FA6100; border-color: #FA6100; }
.cuadros-meta.completa i.ok { background: #00515c; border-color: #00515c; }
.cuadros-meta.cuadros-meta-sm { grid-auto-columns: 26px; }
.cuadros-meta.cuadros-meta-sm i { height: 14px; }
/* Ancho mínimo de 80px (cajitas de conteo por etapa que no deben encogerse). */
.ancho-min-80 { min-width: 80px; }
/* Línea de tiempo con puntos de color (bitácora de actividad sin íconos): una línea gris
   vertical y un punto por evento. Tono del punto: .punto-marca | .punto-info | .punto-ok | .punto-gris.
   Uso: <div class="linea-puntos"><div class="linea-puntos-paso punto-marca"> … </div></div> */
.linea-puntos { position: relative; padding-left: 20px; }
.linea-puntos::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: #e9ecef; }
.linea-puntos-paso { position: relative; padding-bottom: 1rem; }
.linea-puntos-paso::before {
    content: ''; position: absolute; left: -18px; top: 4px;
    width: 10px; height: 10px; border-radius: 50%; background: #adb5bd;
}
.linea-puntos-paso.punto-marca::before { background: #FA6100; }
.linea-puntos-paso.punto-info::before { background: #082382; }
.linea-puntos-paso.punto-ok::before { background: #00515c; }
.linea-puntos-paso.punto-gris::before { background: #adb5bd; }
/* Chips seleccionables con nivel (habilidades, etiquetas con grado 1-5).
   .rejilla-chips = contenedor; .chip-seleccionable (+ .selected, lo pone el JS) con su
   .chip-nivel adentro (solo se ve si está seleccionado); .selector-nivel = globo flotante
   con .boton-nivel (+ .active), se muestra con .show; .cabecera-plegable (+ .collapsed)
   oculta la .rejilla-chips que le sigue. */
.rejilla-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
.chip-seleccionable {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; background: #f8f9fa; border: 1px solid #dee2e6;
    border-radius: 999px; cursor: pointer; font-size: .85rem;
    transition: background-color .2s, border-color .2s; user-select: none;
}
.chip-seleccionable:hover { border-color: #FA6100; background: #fff4ec; }
.chip-seleccionable.selected { background: #FA6100; color: #fff; border-color: #FA6100; }
.chip-nivel {
    display: none; padding: 2px 6px; background: #e9ecef;
    border-radius: 10px; font-size: .75rem; font-weight: 600;
}
.chip-seleccionable.selected .chip-nivel { display: inline; background: rgba(255, 255, 255, .25); }
.selector-nivel {
    position: absolute; z-index: 1000; background: #fff;
    border: 1px solid #dee2e6; border-radius: .5rem; padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15); display: none;
}
.selector-nivel.show { display: block; }
.boton-nivel {
    width: 28px; height: 28px; border: 1px solid #dee2e6;
    background: #fff; border-radius: 4px; cursor: pointer; font-size: .8rem;
}
.boton-nivel:hover { background: #fff4ec; border-color: #FA6100; }
.boton-nivel.active { background: #FA6100; color: #fff; border-color: #FA6100; }
.cabecera-plegable {
    cursor: pointer; padding: 8px 12px; background: #f8f9fa;
    border: 1px solid #dee2e6; border-radius: .5rem;
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.cabecera-plegable:hover { border-color: #FA6100; }
.cabecera-plegable.collapsed + .rejilla-chips { display: none; }
/* Ícono que gira al abrir (el JS le pone transform); solo suaviza el giro. */
.icono-giro { font-size: .7rem; transition: transform .2s; }


/* ######################################################################
   9. Componentes — grupo personas (migración 26-oct-2026; se consolidan al final)
   ###################################################################### */
/* Pastilla de categoría (tipo de curso, tipo de registro): completa .pastilla-ok|warn|bad|neutro
   con dos tonos sin semáforo. Uso: <span class="pastilla pastilla-azul">Curso</span>. (personas) */
.pastilla.pastilla-azul { background: #e7f1ff; color: #0b5ed7; border-color: #cfe2ff; }
.pastilla.pastilla-morada { background: #f3e5f5; color: #7b1fa2; border-color: #e6cfea; }
/* Flujo de caja (tabla de movimientos), ajustes tras captura 26-oct:
   - En escritorio los totales del encabezado de cada sección (mes) siempre se ven, como antes
     (el JS los oculta al expandir; la hoja vieja los forzaba visibles con table-cell !important).
   - La columna de moneda (42px) no parte "MXN" en dos renglones. */
@media (min-width: 769px) {
    .tabla-movimientos tbody tr.section-header > td { display: table-cell !important; }
}
.tabla-movimientos .table > tbody > tr > td.col-mon { white-space: nowrap; padding-left: .1rem !important; padding-right: .1rem !important; }


/* ######################################################################
   9. Componentes — grupo publico (migración 26-oct-2026; se consolidan al final)
   ###################################################################### */
/* Pantalla suelta (sin menú) con una caja al centro: inicio de sesión, recuperar contraseña,
   invitaciones, PIN de un portal, avisos de error o de gracias. Va en <body class="pantalla-centrada">.
   La caja: .caja-acceso (420px, lleva una .card) o .tarjeta-mensaje (500px, blanca, centrada). */
body.pantalla-centrada {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 20px; background: #f8f9fa;
}
.caja-acceso { width: 100%; max-width: 420px; margin: auto; }
.caja-acceso-ancha { width: 100%; max-width: 480px; margin: auto; }
.caja-formulario { width: 100%; max-width: 620px; margin: 0 auto; }
.tarjeta-mensaje {
    background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.08);
    padding: 3rem; text-align: center; width: 100%; max-width: 500px; margin: auto;
}
@media (max-width: 575.98px) { .tarjeta-mensaje { padding: 2rem 1.25rem; } }

/* Página con barra de marca arriba, aviso al centro y pie abajo:
   <body class="pantalla-con-barra"> nav … <section class="zona-centro"> … </section> footer. */
body.pantalla-con-barra { min-height: 100vh; display: flex; flex-direction: column; background: #f8f9fa; }
.zona-centro { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }

/* Círculo con ícono que encabeza un aviso. .circulo-icono (naranja) + -ok | -aviso | -error | -verde. */
.circulo-icono {
    width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; margin: 0 auto 1.5rem; background: #FA6100; color: #fff; font-size: 2.25rem;
}
.circulo-icono-ok { background: #198754; }
.circulo-icono-aviso { background: #f59e0b; }
.circulo-icono-error { background: #dc3545; }
.circulo-icono-verde { background: #00515c; }

/* Cifra de error grande (404, 403) en azul marino de la marca. */
.cifra-error { font-size: 4rem; font-weight: 700; color: #082382; line-height: 1; margin-bottom: .5rem; }

/* Campo para un código o PIN: dígitos espaciados y centrados. */
.campo-codigo { letter-spacing: .5em; text-align: center; font-size: 1.4rem; }

/* Mensaje bajo un formulario que pinta el JS (className = 'msg' | 'msg ok' | 'msg err'). */
.pantalla-centrada .msg { font-size: .88rem; margin-top: 10px; min-height: 1.2em; }
.pantalla-centrada .msg.err { color: #dc3545; }
.pantalla-centrada .msg.ok { color: #198754; }

/* Calificación de 1 a 5 estrellas con radios ocultos. Los <input>/<label> van del 5 al 1
   (row-reverse) para que al elegir una se pinten también las anteriores. */
.calificacion-estrellas { display: flex; flex-direction: row-reverse; justify-content: center; gap: 10px; margin: 18px 0 8px; }
.calificacion-estrellas input { display: none; }
.calificacion-estrellas label { font-size: 2.4rem; line-height: 1; color: #d9d9de; cursor: pointer; }
.calificacion-estrellas label:hover,
.calificacion-estrellas label:hover ~ label,
.calificacion-estrellas input:checked + label,
.calificacion-estrellas input:checked + label ~ label { color: #FA6100; }
/* ===== Portal público (vacantes, candidatos, referidos, evaluaciones): <body class="portal-publico">.
   Páginas sin menú interno que ven candidatos sin sesión; letra y colores de la marca. ===== */
body.portal-publico { background: #fff; color: #333; line-height: 1.6; }

/* Encabezado fijo del portal público (el JS le pone .scrolled al bajar):
   header.encabezado-publico > .encabezado-publico-fila > a.encabezado-publico-logo>img
   + nav.menu-publico>a.nav-link(.active) + .encabezado-publico-acciones; abajo .collapse.menu-movil>a.menu-movil-enlace */
.encabezado-publico { background: #fff; padding: 16px 0; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: padding .3s, box-shadow .3s; }
.encabezado-publico.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.08); padding: 12px 0; }
.encabezado-publico-fila { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.encabezado-publico-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.encabezado-publico-logo img { height: 40px; width: auto; }
.menu-publico { display: flex; align-items: center; gap: 8px; }
.menu-publico .nav-link { color: #666; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 8px; }
.menu-publico .nav-link:hover { color: #333; background: #f8f9fa; }
.menu-publico .nav-link.active { color: #FA6100; background: rgba(250,97,1,.08); }
.encabezado-publico-acciones { display: flex; align-items: center; gap: 12px; }
.menu-movil { background: #fff; border-top: 1px solid #eee; padding: 16px 24px; }
.menu-movil-enlace { display: block; padding: 12px 0; color: #333; text-decoration: none; font-size: 16px; font-weight: 500; border-bottom: 1px solid #f5f5f5; }
.menu-movil-enlace:last-child { border-bottom: none; }
@media (max-width: 767.98px) {
    .encabezado-publico-fila { padding: 0 16px; gap: 12px; }
    .encabezado-publico-logo img { height: 32px; }
}
/* Contenido que queda debajo del encabezado fijo. */
.bajo-encabezado-fijo { padding-top: 80px; min-height: calc(100vh - 200px); }
@media (max-width: 767.98px) { .bajo-encabezado-fijo { padding-top: 70px; } }

/* Portada de bienvenida a todo lo ancho, verde Daltum (listado de vacantes, referidos):
   section.portada > .portada-contenido > .portada-insignia + h1 (span resaltado) + p + buscador. */
.portada { background: #00515c; padding: 160px 0 100px; }
.portada-contenido { max-width: 1200px; margin: 0 auto; padding: 0 40px; text-align: center; }
.portada-insignia {
    display: inline-flex; align-items: center; gap: 8px; background: rgba(234,185,255,.2); color: #eab9ff;
    padding: 10px 24px; border-radius: 50px; font-size: 14px; font-weight: 600; margin-bottom: 30px;
    border: 1px solid rgba(234,185,255,.3);
}
.portada h1 { font-size: 52px; font-weight: 700; color: #fff; margin-bottom: 20px; line-height: 1.2; }
.portada h1 span { color: #eab9ff; }
.portada p { font-size: 20px; color: rgba(255,255,255,.8); margin: 0 auto 40px; max-width: 600px; }
@media (max-width: 992px) {
    .portada { padding: 140px 0 80px; }
    .portada h1 { font-size: 36px; }
    .portada p { font-size: 17px; }
    .portada-contenido { padding: 0 24px; }
}
@media (max-width: 768px) {
    .portada { padding: 110px 0 50px; }
    .portada h1 { font-size: 28px; }
    .portada p { font-size: 16px; margin-bottom: 30px; }
    .portada-contenido { padding: 0 16px; }
}

/* Buscador grande redondeado (campo + botón naranja); en celular se apila. */
.buscador-grande { display: flex; max-width: 650px; margin: 0 auto; background: #fff; border-radius: 50px; padding: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.buscador-grande input { flex: 1; min-width: 0; border: none; padding: 16px 24px; font-size: 16px; outline: none; background: transparent; color: #333; }
.buscador-grande .btn { border-radius: 50px !important; padding: 14px 32px; display: flex; align-items: center; justify-content: center; gap: 10px; }
@media (max-width: 768px) {
    .buscador-grande { flex-direction: column; border-radius: 20px; padding: 12px; }
    .buscador-grande input { padding: 12px 16px; }
    .buscador-grande .btn { width: 100%; }
}

/* Cuerpo de una página pública: ancho máximo y márgenes laterales. .contenedor-lectura es la versión angosta (900px). */
.contenido-publico { max-width: 1200px; margin: 0 auto; padding: 60px 40px 80px; }
.contenedor-lectura { max-width: 900px; margin: 0 auto; padding: 24px; }
@media (max-width: 992px) { .contenido-publico { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 768px) {
    .contenido-publico { padding: 32px 16px 56px; }
    .contenedor-lectura { padding: 16px; }
}

/* Título de sección del portal: azul marino de la marca con una palabra (span) en naranja. */
.titulo-seccion { font-size: 28px; font-weight: 700; color: #082382; margin: 0; }
.titulo-seccion span { color: #FA6100; }
@media (max-width: 768px) { .titulo-seccion { font-size: 22px; } }

/* Tarjeta de vacante (listados públicos, favoritos, relacionadas): datos a la izquierda y
   acciones a la derecha; en celular se apilan. .lista-vacantes > .tarjeta-vacante >
   div (h3>a + .tarjeta-vacante-datos>span>i + .tarjeta-vacante-etiquetas) + .tarjeta-vacante-acciones */
.lista-vacantes { display: flex; flex-direction: column; gap: 16px; }
.tarjeta-vacante {
    background: #fff; border: 2px solid #f0f0f0; border-radius: 20px; padding: 28px 32px;
    display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
    transition: border-color .2s, box-shadow .2s;
}
.tarjeta-vacante:hover { border-color: #FA6100; box-shadow: 0 15px 40px rgba(250,97,1,.12); }
.tarjeta-vacante h3 { font-size: 22px; font-weight: 600; color: #082382; margin-bottom: 12px; }
.tarjeta-vacante h3 a { color: inherit; text-decoration: none; }
.tarjeta-vacante h3 a:hover { color: #FA6100; }
.tarjeta-vacante-datos { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #666; font-size: 14px; }
.tarjeta-vacante-datos span { display: flex; align-items: center; gap: 8px; }
.tarjeta-vacante-datos i { color: #FA6100; }
.tarjeta-vacante-etiquetas { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.tarjeta-vacante-acciones { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
@media (max-width: 768px) {
    .tarjeta-vacante { grid-template-columns: 1fr; gap: 16px; padding: 20px 18px; border-radius: 16px; }
    .tarjeta-vacante h3 { font-size: 18px; }
    .tarjeta-vacante-datos { gap: 6px 14px; }
    .tarjeta-vacante-acciones { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

/* Etiqueta redonda de una vacante: .etiqueta-vacante (gris) + -sueldo (verde) | -nueva (naranja) | -urgente (rojo). */
.etiqueta-vacante { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 50px; font-size: 13px; font-weight: 500; background: #f1f3f5; color: #495057; }
.etiqueta-vacante-sueldo { background: #e8f5e9; color: #2e7d32; }
.etiqueta-vacante-nueva { background: #ffcfa2; color: #b34700; }
.etiqueta-vacante-urgente { background: #ffebee; color: #c62828; }

/* Botón cuadrado con corazón para guardar en favoritos (el JS le cambia el color al marcarlo). */
.boton-favorito { background: none; border: 2px solid #eee; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .2s; }
.boton-favorito i { color: #ccc; font-size: 18px; }

/* Aviso de la marca: fondo naranja pastel con franja naranja a la izquierda (evaluaciones
   pendientes, invitación a referir). Más grande que .nota-lateral. */
.aviso-marca { background: #FFF4EC; border: 1px solid #FFCFA3; border-left: 5px solid #FA6100; border-radius: 14px; padding: 20px 22px; margin-bottom: 28px; }
.aviso-marca h2, .aviso-marca h3 { font-size: 1.15rem; color: #0F0F12; margin: 0; }

/* Pie del portal público: azul marino de la marca, logo blanco, enlaces y derechos.
   footer.pie-publico > .pie-publico-contenido > img.pie-publico-logo + .pie-publico-enlaces + .pie-publico-social + .pie-publico-copia */
.pie-publico { background: #082382; color: #fff; padding: 56px 0; }
.pie-publico-contenido { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.pie-publico-logo { height: 40px; width: auto; }
.pie-publico-enlaces { display: flex; gap: 16px 40px; flex-wrap: wrap; justify-content: center; }
.pie-publico-enlaces a { color: #ffffa4; text-decoration: none; font-size: 15px; font-weight: 500; }
.pie-publico-enlaces a:hover { color: #FA6100; }
.pie-publico-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.pie-publico-social a:hover { background: #FA6100; color: #fff; }
.pie-publico-copia { color: rgba(255,255,255,.6); font-size: 14px; margin: 0; }
@media (max-width: 768px) {
    .pie-publico { padding: 40px 0; }
    .pie-publico-contenido { padding: 0 16px; }
    .pie-publico-enlaces { flex-direction: column; }
}

/* Cabecera blanca de una página interna del portal (mis postulaciones, perfil, favoritos):
   .cabecera-publica > .contenedor-lectura > migas + h1 + p. */
.cabecera-publica { background: #fff; border-bottom: 1px solid #e5e5e5; padding: 24px 0 8px; }
.cabecera-publica h1 { font-size: 24px; font-weight: 700; color: #171717; margin: 0 0 4px; }
.cabecera-publica p { color: #737373; font-size: 14px; margin: 0; }
.cabecera-publica .breadcrumb { font-size: 13px; margin-bottom: 8px; }
.cabecera-publica .breadcrumb a { color: #737373; text-decoration: none; }
@media (max-width: 768px) { .cabecera-publica h1 { font-size: 20px; } }

/* Etiqueta de habilidad (perfil del candidato, requisitos de una vacante); .selected en naranja;
   .nivel-habilidad = el nivel chico dentro de la etiqueta. */
.etiqueta-habilidad { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #f5f5f5; color: #404040; font-size: 13px; font-weight: 500; border-radius: 20px; border: 1px solid #e5e5e5; }
.etiqueta-habilidad.selected { background: rgba(250,97,1,.1); color: #FA6100; border-color: #FA6100; }
.nivel-habilidad { padding: 2px 6px; background: #fff; border-radius: 10px; font-size: 11px; font-weight: 600; }
/* Caja con scroll vertical baja (tablas o listas cortas dentro de una tarjeta del tablero;
   la normal es .caja-desplazable de 300px). */
.caja-desplazable-sm { max-height: 200px; overflow-y: auto; }
/* Cuerpo de tarjeta compacto: letra, etiquetas y botones chicos, con tope de altura y
   scroll interno. Para resúmenes densos (pipeline por etapa) en una tarjeta del tablero.
   Uso: <div class="card-body panel-compacto"> … </div> */
.panel-compacto { max-height: 200px; overflow-y: auto; }
.panel-compacto .bg-light.rounded { padding: .35rem .5rem !important; margin-bottom: .4rem !important; }
.panel-compacto strong { font-size: .85rem; }
.panel-compacto small { font-size: .72rem; line-height: 1.15; }
.panel-compacto .badge { font-size: .68rem; }
.panel-compacto h6 { margin-bottom: .6rem !important; font-size: .9rem; }
.panel-compacto .btn-sm { padding: .15rem .4rem; }
.panel-compacto .col-md-6 { margin-bottom: .25rem !important; }
/* Barra horizontal con la cifra adentro (embudo por etapa, reparto). El ancho y el color
   los pone la plantilla en línea (style="width:NN%; background-color:…").
   Uso: <div class="barra-etiquetada" style="width:40%;background-color:#FA6100">12</div> */
.barra-etiquetada {
    height: 24px;
    border-radius: 4px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    padding-left: 8px;
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    background-color: #FA6100;
}
/* Celda de mapa de calor (día × hora): cuadrito de 12px; el color lo pone el JS según la
   intensidad. Uso: <div class="celda-calor-mini"></div> (también en la leyenda). */
.celda-calor-mini { width: 12px; height: 12px; border-radius: 2px; display: inline-block; margin: 1px; background: #ebedf0; }


/* ######################################################################
   9. Componentes — grupo ecommerce-tienda (migración 26-oct-2026; se consolidan al final)
   ###################################################################### */
/* Foto de producto en un renglón de tabla: cuadro de 52px recortado, fondo gris mientras carga.
   .foto-producto-sm = 40px (listas densas); .foto-producto-lg = 80px (fichas). */
.foto-producto { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #f3f4f6; }
.foto-producto-sm { width: 40px; height: 40px; }
.foto-producto-lg { width: 80px; height: 80px; }
/* Renglón reservado para un mensaje que pinta el JS (éxito/error): guarda su alto para que
   la página no brinque al aparecer el texto. */
.renglon-mensaje { min-height: 1.25rem; }
/* Gráfica SVG dibujada por el JS que necesita un ancho mínimo legible (va dentro de
   .table-responsive para que en celular se desplace de lado en vez de aplastarse). */
.grafica-svg-ancha { min-width: 520px; }
/* Punto de semáforo (11px) que el JS pinta con el nombre del color: .verde | .amarillo | .rojo | .gris.
   Sirve fuera de .tablero (allá está .status-dot). */
.punto-semaforo { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; background: #adb5bd; }
.punto-semaforo.verde { background: #198754; }
.punto-semaforo.amarillo { background: #f59e0b; }
.punto-semaforo.rojo { background: #dc3545; }
.punto-semaforo.gris { background: #adb5bd; }
/* Rejilla de tarjetas de cifra que se acomodan solas (~200px cada una): cada hijo es una
   .card con .card-body.tarjeta-metrica (metric-label / metric-value / metric-detail). */
.rejilla-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
/* Miniatura de producto con la foto completa (sin recortar) sobre fondo blanco: galerías
   de imágenes nuevas, vista previa de lo que trajo un proveedor. */
.miniatura-producto { width: 62px; height: 62px; object-fit: contain; background: #fff; border: 1px solid #e9ecef; border-radius: 6px; }
/* Ficha angosta de galería (imagen + texto chico debajo). Va dentro de un d-flex flex-wrap gap-2. */
.ficha-galeria { width: 150px; font-size: .72rem; color: #6c757d; }
/* Pastilla azul (en tránsito, informativa): completa .pastilla-ok|warn|bad|neutro. */
.pastilla-info { background: #e8ecf8; color: #082382; border-color: #cfd8f0; }
/* Acento naranja arriba de una tarjeta (las cifras principales de una rejilla). La hoja quita
   los bordes de .card con !important, por eso lleva !important. */
.acento-arriba { border-top: 3px solid #FA6100 !important; }
/* Embudo de etapas (complemento de .embudo-pasos): nota bajo la cifra y paso destacado en
   oscuro (un filtro o candado por el que todo pasa). */
.embudo-nota { font-size: .78rem; color: #6c757d; margin-top: .25rem; line-height: 1.35; }
.embudo-paso.embudo-paso-filtro { background: #0F0F12; color: #fff; }
.embudo-paso.embudo-paso-filtro .embudo-cifra { color: #fff; }
.embudo-paso.embudo-paso-filtro .embudo-etiqueta { color: #FFCFA3; }
.embudo-paso.embudo-paso-filtro .embudo-nota { color: #c9ccd1; }
.embudo-paso.embudo-paso-filtro .embudo-nota b { color: #FFCFA3; }
/* Encabezado o texto con explicación al pasar el mouse (title): cursor de ayuda. */
.cursor-ayuda { cursor: help; }
/* Barras verticales bajas (60px) para una tendencia chica dentro de una tarjeta (va con .barras-v). */
.barras-v.barras-v-baja { height: 60px; gap: 3px; }
.barras-v.barras-v-baja .barras-v-barra { width: 100%; border-radius: 3px 3px 0 0; min-height: 3px; }
/* Ficha de revisión lado a lado (imagen candidata contra la actual): ancho fijo de 290px. */
.ficha-revision { width: 290px; max-width: 100%; }
/* Imagen de vista previa dentro de una ficha: cabe completa, alto máximo 110px. */
.imagen-vista-previa { max-width: 100%; max-height: 110px; object-fit: contain; }
/* Navegación por secciones de un formulario largo: renglón de botones-pastilla que se queda
   pegado arriba al desplazar (scroll horizontal si no caben). El botón de la sección visible
   lleva .active (naranja); .completed le pone una palomita verde. (personas)
   Uso: <div class="nav-secciones"><button class="active">1. Check-in</button>…</div> */
.nav-secciones {
    position: sticky; top: 70px; z-index: 100;
    display: flex; gap: .5rem; overflow-x: auto;
    background: #fff; padding: .75rem 0; margin-bottom: 1.5rem; border-bottom: 1px solid #e9ecef;
}
.nav-secciones > button {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: .35rem .9rem; border: 1px solid #ced4da; border-radius: 999px;
    background: #fff; color: #495057; font-size: .85rem; font-weight: 500;
}
.nav-secciones > button:hover { border-color: #FA6100; color: #FA6100; }
.nav-secciones > button.active { background: #FA6100; border-color: #FA6100; color: #fff; }
.nav-secciones > button.completed { border-color: #198754; }
.nav-secciones > button.completed::after { content: '✓'; color: #198754; }
.nav-secciones > button.active.completed::after { color: #fff; }

/* Sección plegable de un formulario largo (tarjeta). La cabecera abre/cierra; el JS le pone
   .collapsed a la sección: el cuerpo se oculta y la flecha gira. Deja margen arriba al
   saltar a ella con scrollIntoView (por la navegación pegada). (personas)
   Uso: <div class="card seccion-plegable"><div class="card-body">
          <div class="seccion-plegable-cabecera">… <i class="fas fa-chevron-down seccion-plegable-flecha"></i></div>
          <div class="seccion-plegable-cuerpo">…</div></div></div> */
.seccion-plegable { scroll-margin-top: 140px; margin-bottom: 1.5rem; }
.seccion-plegable-cabecera { display: flex; align-items: center; gap: 1rem; cursor: pointer; margin-bottom: 1.25rem; }
.seccion-plegable-flecha { color: #adb5bd; transition: transform .2s; }
.seccion-plegable.collapsed .seccion-plegable-cuerpo { display: none; }
.seccion-plegable.collapsed .seccion-plegable-cabecera { margin-bottom: 0; }
.seccion-plegable.collapsed .seccion-plegable-flecha { transform: rotate(-90deg); }

/* Barra de botones que se queda pegada abajo de la pantalla (guardar / completar un
   formulario largo). (personas) */
.barra-acciones-fija {
    position: sticky; bottom: 0; z-index: 100;
    background: #fff; padding: 1rem 0; margin-top: 1.5rem; border-top: 1px solid #e9ecef;
}

/* Indicador de guardado flotante abajo a la derecha (auto-guardado). Va con
   .indicador-guardado; solo se ve cuando el JS le pone .saving o .saved. (personas) */
.indicador-flotante {
    position: fixed; bottom: 80px; right: 20px; z-index: 1000;
    padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.indicador-guardado.indicador-flotante { display: none; }
.indicador-guardado.indicador-flotante.saving,
.indicador-guardado.indicador-flotante.saved { display: inline-flex; }

/* Carita/emoji elegible (estado de ánimo): tenue hasta que se elige; la elegida (.selected,
   la pone el JS) crece y brilla en naranja. (personas) */
.opcion-emoji { cursor: pointer; font-size: 1.7rem; opacity: .4; display: inline-block; padding: 2px 6px; transition: opacity .15s, transform .15s; }
.opcion-emoji:hover { opacity: .8; }
.opcion-emoji.selected { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 4px rgba(250, 97, 0, .55)); }
/* Encuesta con escala de botones (clima laboral, pulso): <body class="encuesta-escala">.
   Nombres que usa y emite el JS: .wrap (columna), .q (pregunta; .destacada con borde naranja;
   dentro .cat = categoría y .txt = texto), .scale > div > button (.sel = la elegida),
   .sub (nota gris) y .ok > .big (pantalla de gracias). */
.encuesta-escala { background: #f5f5f7; }
.encuesta-escala .wrap { max-width: 620px; margin: 0 auto; padding: 20px 16px 60px; }
.encuesta-escala .sub { color: #777; font-size: 13px; }
.encuesta-escala .q { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px 14px; margin: 10px 0; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.encuesta-escala .q.destacada { border: 2px solid #ffe1c7; }
.encuesta-escala .q .cat { color: #FA6100; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.encuesta-escala .q .txt { font-size: 15px; margin: 3px 0 10px; }
.encuesta-escala .scale { display: flex; flex-wrap: wrap; gap: 6px; }
.encuesta-escala .scale > div { flex: 1; min-width: 26px; }
.encuesta-escala .scale button { width: 100%; border: 1px solid #ddd; background: #fafafa; border-radius: 8px; padding: 9px 0; font-size: 15px; cursor: pointer; color: #333; }
.encuesta-escala .scale button.sel { background: #FA6100; color: #fff; border-color: #FA6100; font-weight: 700; }
.encuesta-escala .ok { text-align: center; margin-top: 70px; }
.encuesta-escala .ok .big { font-size: 52px; }
/* Estado de una postulación del candidato: la clase status-<estado> sale del dato
   (applied | reviewing | interview | rejected | hired). Va con .pastilla. */
.pastilla.status-applied { background: #e3f2fd; color: #1565c0; border-color: #cfe3f7; }
.pastilla.status-reviewing { background: #fff4e5; color: #8a4b00; border-color: #ffe0b8; }
.pastilla.status-interview,
.pastilla.status-hired { background: #e8f5ee; color: #14663c; border-color: #cfe9db; }
.pastilla.status-rejected { background: #fdecec; color: #a12020; border-color: #f8d3d3; }
/* Banda de título a todo lo ancho, verde Daltum con letra blanca (inicio de una evaluación,
   formulario de postulación). Sus enlaces van en blanco tenue. Con .tarjeta-sobre-banda la
   tarjeta de abajo se encima a la banda. (sub-equipo publico-C) */
.banda-titulo { background: #00515c; color: #fff; padding: 3rem 0 4rem; }
.banda-titulo h1, .banda-titulo h2 { color: #fff; }
.banda-titulo a { color: rgba(255,255,255,.8); text-decoration: none; }
.banda-titulo a:hover { color: #fff; }
.banda-titulo.banda-titulo-ok { background: #198754; }
.banda-titulo.banda-titulo-baja { padding: 2rem 0; }
.tarjeta-sobre-banda { max-width: 700px; margin: -3rem auto 2rem; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.1); overflow: hidden; }
.tarjeta-sobre-banda.tarjeta-sobre-banda-angosta { max-width: 600px; }

/* Renglones "dato — valor" a todo lo ancho dentro de una tarjeta: .renglon-info > span + span. */
.renglon-info { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid #f1f1f1; }
.renglon-info:last-child { border-bottom: none; }
.renglon-info > span:first-child { color: #6c757d; }
.renglon-info > span:last-child { font-weight: 600; }

/* Lista de reglas o pasos con ícono naranja a la izquierda y renglones separados. */
.lista-reglas { list-style: none; padding: 0; margin: 0; }
.lista-reglas li { display: flex; align-items: flex-start; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #f1f1f1; }
.lista-reglas li:last-child { border-bottom: none; }
.lista-reglas li > i { color: #FA6100; margin-top: .25rem; width: 1.1rem; text-align: center; }
.lista-reglas.lista-reglas-ok li > i { color: #198754; }

/* Círculo grande con el puntaje (150px): .circulo-puntaje + -ok | -error | -aviso. */
.circulo-puntaje { width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: #fff; background: #6c757d; }
.circulo-puntaje-ok { background: #198754; }
.circulo-puntaje-error { background: #dc3545; }
.circulo-puntaje-aviso { background: #f59e0b; }
.circulo-puntaje-valor { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
.circulo-puntaje-etiqueta { font-size: .9rem; opacity: .9; }

/* Título de un bloque de formulario con línea abajo (pasos de una postulación). */
.titulo-con-linea { font-weight: 600; color: #1e293b; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid #e2e8f0; }

/* Título de apartado en mayúsculas (lotes por revisar, historial). */
.titulo-apartado { font-size: 15px; font-weight: 700; margin: 26px 0 12px; text-transform: uppercase; letter-spacing: .04em; }

/* Tarjeta resaltada con borde naranja (lo que espera una decisión). Le gana al borde quitado de .card. */
.card.tarjeta-destacada { border: 2px solid #FA6100 !important; }
.card.tarjeta-destacada > .card-header { background: #fff5ec; }

/* Foto redonda chica de una persona en un renglón (46px, recortada). */
.foto-redonda { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; flex-shrink: 0; }

/* Logo de la marca en una barra superior sencilla (portal de clientes, mi ingreso). */
.logo-barra { height: 36px; width: auto; }
.logo-barra.logo-barra-chico { height: 26px; }

/* Pastilla azul (complementa .pastilla-ok/warn/bad/neutro): estado "subido / en revisión". */
.pastilla-info { background: #e7f1ff; color: #084298; border-color: #cfe2ff; }

/* Encabezado de carpeta o grupo dentro de una tarjeta: franja naranja a la izquierda, ícono
   naranja, contador a la derecha (.ms-auto). */
.encabezado-acento { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-left: 4px solid #FA6100; font-weight: 600; }
.encabezado-acento > i { color: #FA6100; font-size: 1.3rem; }

/* Separador con texto al centro y una línea a cada lado (secciones de una encuesta). */
.separador-texto { text-align: center; margin: 1.5rem 0; color: #adb5bd; font-size: .8rem; }
.separador-texto::before, .separador-texto::after { content: ""; display: inline-block; width: 40px; height: 1px; background: #dee2e6; vertical-align: middle; margin: 0 .75rem; }

/* Escala de respuesta 1 a 5 con casillas grandes (encuestas): .escala-respuesta > .escala-respuesta-opcion
   > input radio (oculto) + label > .numero + .texto. La elegida queda naranja. En celular se esconde .texto. */
.escala-respuesta { display: flex; justify-content: space-between; gap: .5rem; }
.escala-respuesta-opcion { flex: 1; text-align: center; }
.escala-respuesta-opcion input { display: none; }
.escala-respuesta-opcion label { display: block; padding: .75rem .5rem; background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 12px; cursor: pointer; transition: all .2s; }
.escala-respuesta-opcion label:hover { border-color: #FA6100; background: #fff5f0; }
.escala-respuesta-opcion input:checked + label { border-color: #FA6100; background: #FA6100; color: #fff; }
.escala-respuesta-opcion .numero { display: block; font-size: 1.25rem; font-weight: 600; }
.escala-respuesta-opcion .texto { display: block; font-size: .65rem; margin-top: .25rem; color: #6c757d; }
.escala-respuesta-opcion input:checked + label .texto { color: rgba(255,255,255,.85); }
.escala-respuesta-leyenda { display: flex; justify-content: space-between; gap: .5rem; margin-top: .5rem; font-size: .75rem; color: #6c757d; }
.escala-respuesta-leyenda > span { display: flex; align-items: center; gap: .25rem; }

/* Escala 0 a 10 (recomendación tipo eNPS): .escala-nps > .escala-nps-opcion.detractor|passive|promoter
   > input radio (oculto) + label. Al elegirse se pinta rojo (0-6), ámbar (7-8) o verde (9-10). */
.escala-nps { display: flex; justify-content: center; gap: .25rem; flex-wrap: wrap; }
.escala-nps-opcion input { display: none; }
.escala-nps-opcion label { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .875rem; transition: all .2s; }
.escala-nps-opcion.detractor label:hover { background: #ffebee; border-color: #dc3545; }
.escala-nps-opcion.passive label:hover { background: #fff8e1; border-color: #ffc107; }
.escala-nps-opcion.promoter label:hover { background: #e8f5e9; border-color: #198754; }
.escala-nps-opcion.detractor input:checked + label { background: #dc3545; border-color: #dc3545; color: #fff; }
.escala-nps-opcion.passive input:checked + label { background: #ffc107; border-color: #ffc107; color: #212529; }
.escala-nps-opcion.promoter input:checked + label { background: #198754; border-color: #198754; color: #fff; }
@media (max-width: 576px) {
    .escala-respuesta-opcion label { padding: .5rem .25rem; }
    .escala-respuesta-opcion .numero { font-size: 1rem; }
    .escala-respuesta-opcion .texto { display: none; }
    .escala-nps-opcion label { width: 30px; height: 34px; font-size: .75rem; }
}

/* Pantalla de una encuesta o formulario para responder desde el celular: columna de 600px centrada. */
.columna-encuesta { max-width: 600px; margin: 0 auto; padding: 2rem 1rem; }
/* Evaluación en curso (prueba con reloj que arma el JS). Contenedor: .prueba-en-curso.
   Nombres que emite el JS adentro: .timer(.warning|.danger), .progress-dots > .progress-dot(.answered|.current),
   .question-number, .question-text, .option-item(.selected) > input + .option-letter, .code-editor,
   .sjt-legend/.sjt-row/.sjt-text/.sjt-scale/.sjt-pick (calificar cada acción 1-5),
   .fc-legend/.fc-row/.fc-text/.fc-pick (más / menos como yo). El aviso de cambio de pestaña es
   .anti-cheat-warning sobre .overlay (ocultos; el JS los muestra con style.display). (sub-equipo publico-C) */
.prueba-en-curso { background: #f8f9fa; min-height: calc(100vh - 80px); padding-bottom: 2rem; }
.prueba-en-curso .barra-prueba { background: #fff; padding: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.08); position: sticky; top: 70px; z-index: 100; }
.prueba-en-curso .timer { font-size: 1.5rem; font-weight: 700; font-family: monospace; color: #00515c; }
.prueba-en-curso .timer.warning { color: #d39e00; }
.prueba-en-curso .timer.danger { color: #dc3545; }
.prueba-en-curso .progress-dots { display: flex; gap: .25rem; flex-wrap: wrap; max-width: 400px; margin: 0 auto; }
.prueba-en-curso .progress-dot { width: 12px; height: 12px; border-radius: 50%; background: #e9ecef; }
.prueba-en-curso .progress-dot.answered { background: #00515c; }
.prueba-en-curso .progress-dot.current { background: #FA6100; box-shadow: 0 0 0 3px rgba(250,97,1,.3); }
.prueba-en-curso .zona-pregunta { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
.prueba-en-curso .tarjeta-pregunta { background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.08); padding: 2rem; }
.prueba-en-curso .question-number { color: #6c757d; font-size: .9rem; margin-bottom: .5rem; }
.prueba-en-curso .question-text { font-size: 1.25rem; font-weight: 500; margin-bottom: 1.5rem; color: #333; }
.prueba-en-curso .option-item { display: block; padding: 1rem 1.25rem; margin-bottom: .75rem; border: 2px solid #e9ecef; border-radius: 8px; cursor: pointer; transition: all .2s; }
.prueba-en-curso .option-item:hover { border-color: #FA6100; background: rgba(250,97,1,.05); }
.prueba-en-curso .option-item.selected { border-color: #FA6100; background: rgba(250,97,1,.08); }
.prueba-en-curso .option-item input { display: none; }
.prueba-en-curso .option-letter { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; background: #e9ecef; border-radius: 50%; margin-right: 1rem; font-weight: 600; font-size: .9rem; }
.prueba-en-curso .option-item.selected .option-letter { background: #FA6100; color: #fff; }
.prueba-en-curso .code-editor { font-family: Monaco, Menlo, monospace; font-size: 14px; min-height: 200px; border: 2px solid #e9ecef; border-radius: 8px; }
.prueba-en-curso .sjt-legend { font-size: .85rem; color: #7A7A82; font-weight: 600; margin-bottom: 10px; }
.prueba-en-curso .sjt-row { padding: 12px 4px; border-bottom: 1px solid #F0F0F1; }
.prueba-en-curso .sjt-text { font-size: .95rem; line-height: 1.4; margin-bottom: 8px; }
.prueba-en-curso .sjt-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.prueba-en-curso .sjt-pick { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; cursor: pointer; font-size: .78rem; color: #7A7A82; }
.prueba-en-curso .sjt-pick input { width: 18px; height: 18px; cursor: pointer; }
.prueba-en-curso .fc-legend { display: flex; justify-content: space-between; font-size: .8rem; color: #7A7A82; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0 4px 6px; }
.prueba-en-curso .fc-row { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 11px 4px; border-bottom: 1px solid #F0F0F1; }
.prueba-en-curso .fc-text { font-size: .95rem; line-height: 1.35; }
.prueba-en-curso .fc-pick { display: flex; justify-content: center; margin: 0; }
.prueba-en-curso .fc-pick input { width: 20px; height: 20px; cursor: pointer; }
.prueba-en-curso .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1999; display: none; }
.prueba-en-curso .anti-cheat-warning { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 440px); background: #fff3cd; border: 2px solid #ffc107; padding: 2rem; border-radius: 16px; text-align: center; z-index: 2000; box-shadow: 0 10px 40px rgba(0,0,0,.3); display: none; }
@media (max-width: 767.98px) {
    .prueba-en-curso .barra-prueba { top: 60px; }
    .prueba-en-curso .barra-prueba .text-end { text-align: left !important; }
    .prueba-en-curso .tarjeta-pregunta { padding: 1.25rem; }
    .prueba-en-curso .question-text { font-size: 1.1rem; }
}

/* Revisión de candidatos por el cliente (portal de clientes). Contenedor: .revision-candidatos.
   Nombres que usa el JS: .candidate-row (.is-hired se oculta salvo con body.show-hired),
   .vac-card(.all-hidden), .fb-btn.like|.dislike (.active = elegido), .fb-extra (campos de motivo). */
.revision-candidatos .candidate-row { padding: 14px 20px; border-bottom: 1px solid #f1f3f5; }
.revision-candidatos .candidate-row:last-child { border-bottom: 0; }
.revision-candidatos .candidate-row.is-hired { display: none; }
body.show-hired .revision-candidatos .candidate-row.is-hired { display: block; }
.revision-candidatos .vac-card.all-hidden { display: none; }
.revision-candidatos .fb-btn.like.active { background: #d1e7dd; border-color: #198754; color: #146c43; }
.revision-candidatos .fb-btn.dislike.active { background: #f8d7da; border-color: #dc3545; color: #b02a37; }
.revision-candidatos .fb-extra { margin-top: 10px; }
.revision-candidatos .comentario { padding: 8px 0; border-bottom: 1px dashed #ffd9b8; }
.revision-candidatos .comentario:last-of-type { border-bottom: 0; }
/* Capa de diálogo que ya está en la página y el JS abre poniéndole .show (va junto a .capa-dialogo;
   sin .show queda oculta). El cuerpo puede llevar un botón de cerrar arriba a la derecha (.capa-dialogo-cerrar). */
.capa-dialogo.capa-dialogo-oculta { display: none; padding: 20px; }
.capa-dialogo.capa-dialogo-oculta.show { display: flex; }
.capa-dialogo-cuerpo.capa-dialogo-amplia { position: relative; padding: 2.5rem 2rem 2rem; width: 100%; }
.capa-dialogo-cerrar { position: absolute; top: .5rem; right: .5rem; }

/* Separador con texto al centro ("o con tu email") entre dos formas de entrar. */
.separador-texto { display: flex; align-items: center; margin: 20px 0; color: #a3a3a3; font-size: .85rem; }
.separador-texto::before, .separador-texto::after { content: ''; flex: 1; height: 1px; background: #e5e5e5; }
.separador-texto span { padding: 0 12px; }

/* Cabecera gris de una ficha pública (detalle de vacante) que queda bajo el encabezado fijo.
   .cabecera-ficha > .contenedor-ficha > enlace de regreso + h1 + .tarjeta-vacante-datos. */
.cabecera-ficha { background: #fafafa; padding: 120px 0 3rem; border-bottom: 1px solid #e5e5e5; }
.cabecera-ficha h1 { font-size: 2.25rem; font-weight: 700; color: #082382; margin-bottom: 1rem; line-height: 1.2; }
.contenedor-ficha { max-width: 1000px; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 768px) {
    .cabecera-ficha { padding: 96px 0 2rem; }
    .cabecera-ficha h1 { font-size: 1.6rem; }
    .contenedor-ficha { padding-left: 1rem; padding-right: 1rem; }
}

/* Dos columnas: contenido y columna lateral de 340px; en celular/tableta una sola. */
.rejilla-con-lateral { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; }
@media (max-width: 991.98px) { .rejilla-con-lateral { grid-template-columns: 1fr; gap: 2rem; } }

/* Bloque de texto de una ficha (descripción, requisitos, beneficios): título azul marino con
   ícono naranja, texto gris y viñetas naranjas; línea abajo entre bloques. */
.bloque-seccion { padding-bottom: 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid #e5e5e5; }
.bloque-seccion:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.bloque-seccion h2 { font-size: 1.1rem; font-weight: 600; color: #082382; margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
.bloque-seccion h2 i { color: #FA6100; font-size: 1rem; }
.bloque-seccion-texto { color: #525252; line-height: 1.8; }
.bloque-seccion-texto ul { padding-left: 1.5rem; margin: 0 0 1rem; }
.bloque-seccion-texto li { margin-bottom: .4rem; }
.bloque-seccion-texto li::marker { color: #FA6100; }
.bloque-seccion-texto p { margin: 0 0 .9rem; }
.bloque-seccion-texto h3 { font-size: 1.02rem; font-weight: 700; margin: 1.25rem 0 .5rem; color: #082382; }

/* Más tonos de .etiqueta-vacante: -marino (requisito obligatorio), -petroleo (remoto), -azul (presencial). */
.etiqueta-vacante-marino { background: #082382; color: #fff; }
.etiqueta-vacante-petroleo { background: #e0f2f1; color: #00695c; }
.etiqueta-vacante-azul { background: #e8eaf6; color: #3949ab; }

/* Renglón de ficha con ícono en cuadro: .renglon-ficha > .icono-cuadro + div > .renglon-ficha-etiqueta + .renglon-ficha-valor. */
.renglon-ficha { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #f5f5f5; }
.renglon-ficha:last-of-type { border-bottom: none; }
.renglon-ficha-etiqueta { font-size: .75rem; color: #a3a3a3; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .25rem; }
.renglon-ficha-valor { font-weight: 600; color: #262626; font-size: .9rem; }

/* Enlace destacado en tarjeta naranja pastel con ícono en cuadro naranja (invitar a referir). */
.enlace-destacado { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; background: #ffe9d6; border-radius: 12px; text-decoration: none; border: 2px solid transparent; color: #262626; }
.enlace-destacado:hover { border-color: #FA6100; color: #262626; }
.enlace-destacado .icono-cuadro { background: #FA6100; }

/* Barra fija abajo con la acción principal (Aplicar) en celular; va con d-lg-none. */
.barra-fija-abajo { position: fixed; bottom: 0; left: 0; right: 0; padding: .75rem 1rem; background: #fff; border-top: 1px solid #e5e5e5; box-shadow: 0 -4px 12px rgba(0,0,0,.05); z-index: 100; }
@media (max-width: 991.98px) { .con-barra-fija-abajo { padding-bottom: 100px !important; } }
/* Cifra grande en naranja dentro del título de una .portada (monto de un bono, un premio). */
.portada h1 .portada-cifra { display: block; font-size: clamp(40px, 8vw, 64px); font-weight: 700; color: #FA6100; line-height: 1.1; margin-top: 8px; }
/* Ficha translúcida sobre una .portada (la vacante que se está refiriendo). */
.portada-ficha { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 24px 32px; max-width: 600px; margin: 0 auto; text-align: left; }
.portada-ficha .tarjeta-vacante-datos { color: rgba(255,255,255,.75); }
@media (max-width: 575.98px) { .portada-ficha { padding: 18px; } }
/* Cuerpo angosto de una página pública (formularios de una columna). Va con .contenido-publico. */
.contenido-publico.contenido-angosto { max-width: 720px; }
/* Rejilla de tres columnas iguales (pasos "cómo funciona"); en celular, una sola. */
.rejilla-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 640px) { .rejilla-tres { grid-template-columns: 1fr; } }
/* Ícono en cuadro con el naranja pastel de la marca (reglas importantes). Va con .icono-cuadro. */
.icono-cuadro.icono-cuadro-marca { background: #ffcfa2; color: #FA6100; }
/* Campo que el JS marca con .error al validarlo (la hoja fija el borde de .form-control con !important). */
.form-control.error, .form-select.error { border-color: #dc3545 !important; }
/* Estrellas de .calificacion-estrellas: la regla global de label (color gris con !important,
   sección 4) las dejaba negras; aquí recuperan gris/naranja. */
.calificacion-estrellas label { color: #d9d9de !important; }
.calificacion-estrellas label:hover,
.calificacion-estrellas label:hover ~ label,
.calificacion-estrellas input:checked + label,
.calificacion-estrellas input:checked + label ~ label { color: #FA6100 !important; }
/* Marca naranja en la barra de una página suelta (Daltum Jobs). La regla global
   .navbar .navbar-brand (gris !important, sección 3) es para el menú interno. */
.navbar .navbar-brand.marca-barra, .navbar .navbar-brand.marca-barra i { color: #FA6100 !important; }
/* Tono morado para un 4.º estado que no es semáforo (sentimiento "preocupante"): texto y
   botón de opción con contorno (va con .btn-check como los btn-outline-* de Bootstrap).
   Mismo morado que .etiqueta-morada. (personas) */
.texto-morado { color: #7b1fa2 !important; }
.btn-outline-morado { color: #7b1fa2; border-color: #7b1fa2; background: transparent; }
.btn-outline-morado:hover,
.btn-check:checked + .btn-outline-morado { color: #fff; background: #7b1fa2; border-color: #7b1fa2; }
/* Columnas de un embudo vertical (cifra arriba, barra de color, etiqueta abajo). La altura de
   cada barra (<b>) la pone el JS en px desde data-alto-px; el color, con bg-* de Bootstrap. */
.columnas-embudo { display: flex; gap: 6px; align-items: flex-end; height: 110px; }
.columnas-embudo > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.columnas-embudo > div > b { display: block; width: 100%; border-radius: 4px 4px 0 0; }
.columnas-embudo .columnas-embudo-etiqueta { font-size: .65rem; color: #6c757d; text-align: center; }
/* Tendencia de barras delgadas a todo lo ancho (pedidos o publicaciones por día). La altura de cada
   <i> la pone el JS; .hoy resalta el último día. .alta = 56px. */
.tendencia-barras { display: flex; gap: 2px; align-items: flex-end; height: 42px; }
.tendencia-barras.alta { height: 56px; }
.tendencia-barras > i { flex: 1; background: #ffcfa3; border-radius: 2px 2px 0 0; min-height: 2px; }
.tendencia-barras > i.hoy { background: #FA6100; }
/* Barra apilada alta (26px) dentro de una celda: tramos .progress-bar con su ancho en %. */
.progress.barra-apilada { height: 26px; }
.progress.barra-delgada-6 { height: 6px; }
/* Variante de .foto-producto que muestra la foto completa sin recortar (fotos de proveedor con fondo). */
.foto-producto.foto-completa { object-fit: contain; }
/* Columna fija de 80px para el logo o nombre corto de un proveedor/marca a la izquierda de una ficha. */
.columna-logo { width: 80px; }
/* Logo de proveedor o marca (36px de alto, sin deformar). */
.logo-proveedor { height: 36px; max-width: 100%; object-fit: contain; }
/* Galería de imágenes de un producto: cuadros de 150px con la foto completa y su fuente abajo
   (.galeria-imagen-fuente). .is-main marca la principal con el borde de la marca. */
.galeria-imagenes { display: flex; gap: 1rem; flex-wrap: wrap; }
.galeria-imagen { position: relative; width: 150px; height: 150px; border: 2px solid #e9ecef; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f8f9fa; }
.galeria-imagen img { max-width: 100%; max-height: 100%; object-fit: contain; }
.galeria-imagen.is-main { border-color: #FA6100; }
.galeria-imagen-fuente { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(15, 15, 18, .72); color: #fff; font-size: .7rem; padding: 2px 5px; text-align: center; }
/* Imagen de una tarjeta de resultados (foto de fabricante): completa, hasta 200px de alto. */
.imagen-tarjeta { max-height: 200px; object-fit: contain; padding: 1rem; }
/* Variante ancha de .capa-dialogo-cuerpo (análisis, tablas) con scroll propio si no cabe. */
.capa-dialogo-cuerpo.capa-dialogo-ancha { max-width: 800px; max-height: 90vh; overflow-y: auto; }
/* Tarjeta de producto en una rejilla (va con .card): casilla de selección arriba a la izquierda,
   foto completa en un cuadro de 160px y .selected (lo pone el JS) la marca en naranja. */
.tarjeta-producto { position: relative; overflow: hidden; }
.tarjeta-producto.selected { outline: 2px solid #FA6100; }
.tarjeta-producto-casilla { position: absolute; top: 12px; left: 12px; z-index: 2; }
.tarjeta-producto-imagen { height: 160px; display: flex; align-items: center; justify-content: center; padding: 1rem; background: #fff; border-bottom: 1px solid #f1f3f5; }
.tarjeta-producto-imagen img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Título de producto recortado a dos renglones. */
.texto-dos-lineas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Código (SKU, folio) en cajita gris de letra fija, dentro de tablas. */
.codigo-chico { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; background: #f1f3f5; padding: .15rem .45rem; border-radius: 4px; color: #6c757d; }
/* Barra de acciones sobre lo seleccionado, dentro de la página (no flotante): oculta hasta que
   el JS le pone .active (o style.display = 'flex'). Fondo azul marino de la marca, texto blanco. */
.barra-seleccion { display: none; align-items: center; flex-wrap: wrap; gap: .75rem; background: #0F0F12; color: #fff; padding: .6rem 1rem; border-radius: .5rem; margin-bottom: 1rem; }
.barra-seleccion.active { display: flex; }
/* Ícono SVG en línea (logos de canal que no están en Font Awesome): 14px; .icono-svg-md = 18px. */
.icono-svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
.icono-svg.icono-svg-md { width: 18px; height: 18px; vertical-align: middle; }
/* Foto que no cargó (el onerror le pone la clase): borde rojo punteado y atenuada. */
.foto-rota { border: 2px dashed #dc3545; opacity: .5; }
/* Tarjeta o renglón mientras el JS espera la respuesta de una acción: atenuado y sin clics. */
.procesando { opacity: .5; pointer-events: none; }


/* ######################################################################
   9. Componentes — grupo ecommerce-canales (migración 26-oct-2026; se consolidan al final)
   ###################################################################### */
/* Hueco de foto de producto cuando no hay imagen (mismo tamaño que .foto-producto, 52px):
   cuadro punteado gris con el ícono al centro. */
.foto-producto-vacia { width: 52px; height: 52px; border-radius: 8px; border: 1px dashed #ced4da; background: #f8f9fa; color: #ced4da; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Íconos de validación en círculo (22px) que pinta el JS: verde si el dato está (.valid),
   rojo si falta (.invalid). Uso: <div class="iconos-validacion"><span class="valid"><i …></i></span>…</div> */
.iconos-validacion { display: flex; gap: 4px; }
.iconos-validacion > span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; background: #f1f3f5; color: #6c757d; }
.iconos-validacion > span.valid { background: #e8f5ee; color: #14663c; }
.iconos-validacion > span.invalid { background: #fdecec; color: #a12020; }
/* Estado de una orden de venta (Amazon, Mercado Libre, tienda): pastilla con el color del
   estado que trae el dato. Uso: <span class="estado-orden {{ order.status }}">…</span>.
   pending (ámbar) · unshipped (rojo: falta enviar) · paid/processing (azul marino) ·
   shipped (verde) · delivered (verde petróleo) · cancelled (gris). (ecommerce-canales-C) */
.estado-orden {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid #e3e6ea;
    background: #f1f3f5;
    color: #495057;
    white-space: nowrap;
}
.estado-orden.pending { background: #fff4e5; color: #8a4b00; border-color: #ffe0b8; }
.estado-orden.unshipped { background: #fdecec; color: #a12020; border-color: #f8d3d3; }
.estado-orden.paid,
.estado-orden.processing { background: #e8ecf7; color: #082382; border-color: #cfd6ee; }
.estado-orden.shipped { background: #e8f5ee; color: #14663c; border-color: #cfe9db; }
.estado-orden.delivered { background: #e6f0f1; color: #00515c; border-color: #c8dfe1; }
.estado-orden.cancelled { background: #f1f3f5; color: #6c757d; border-color: #e3e6ea; }
/* La regla global a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) (sección 4, naranja,
   especificidad 0-4-1) pintaba de naranja los enlaces de estos componentes; aquí recuperan su color. */
.pie-publico-enlaces a { color: #ffffa4 !important; }
.pie-publico-enlaces a:hover { color: #FA6100 !important; }
.pie-publico-social a, .pie-publico-social a:hover { color: #fff !important; }
.menu-movil-enlace { color: #333 !important; }
.menu-movil-enlace.text-primary { color: #FA6100 !important; }
.menu-movil-enlace.text-danger { color: #dc3545 !important; }
.tarjeta-vacante h3 a { color: inherit !important; }
.tarjeta-vacante h3 a:hover { color: #FA6100 !important; }
.cabecera-publica .breadcrumb a { color: #737373 !important; }
/* Botón del encabezado público: no se parte en dos renglones en el celular. */
.encabezado-publico-acciones .btn { white-space: nowrap; }
/* Tamaños del hueco de foto (.foto-producto-vacia) que acompañan a .foto-producto-sm/-lg. */
.foto-producto-vacia.foto-producto-sm { width: 40px; height: 40px; }
.foto-producto-vacia.foto-producto-lg { width: 80px; height: 80px; font-size: 1.6rem; }

/* Renglón marcado con .selected en una .tabla-seleccionable (casillas de selección múltiple
   que pinta el JS: productos por publicar). Mismo naranja suave que tr.activo. (ecommerce-canales-B) */
.tabla-seleccionable tbody tr.selected > td { background-color: rgba(250, 97, 0, .08) !important; }
/* Flecha de una cabecera plegable cuando el JS le pone .collapsed a la cabecera: gira a la izquierda.
   Uso: <div class="card-header ... X" onclick=...> ... <i class="fas fa-chevron-down flecha-plegable"></i> */
.collapsed > .flecha-plegable { transform: rotate(-90deg); }
/* Tabla de publicaciones de un canal de venta (Amazon, Mercado Libre): producto con
   miniatura, precios contra la competencia, margen, existencias, estado y acciones chicas.
   Va en <table class="table table-hover tabla-densa tabla-publicaciones">. Las clases internas
   (product-cell, product-thumb, product-title, price-our, margin-value, stock-value,
   status-badge, btn-action-sm, profitability-badge, recommendation-badge…) las emiten o
   buscan la plantilla y el JS de listings; por eso conservan su nombre (ecommerce-canales-A). */
.tabla-publicaciones tr.selected > td { background: rgba(250, 97, 0, .06); }
.tabla-publicaciones .product-cell { display: flex; gap: .75rem; align-items: center; }
.tabla-publicaciones .product-thumb,
.tabla-publicaciones .product-thumb-wrapper { width: 50px; height: 50px; border-radius: 6px; flex-shrink: 0; background: #f8f9fa; }
.tabla-publicaciones .product-thumb { object-fit: cover; }
.tabla-publicaciones .product-thumb-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.tabla-publicaciones .fallback-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #adb5bd; }
.tabla-publicaciones .product-info { min-width: 0; }
.tabla-publicaciones .product-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.tabla-publicaciones .product-meta { font-size: .75rem; color: #6c757d; margin-top: 2px; }
.tabla-publicaciones .product-meta > span { margin-right: .75rem; }
.tabla-publicaciones .asin-link,
.tabla-publicaciones .ml-link { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; color: #082382; text-decoration: none; }
.tabla-publicaciones .asin-link:hover,
.tabla-publicaciones .ml-link:hover { color: #FA6100; }
/* Precios */
.tabla-publicaciones .price-comparison,
.tabla-publicaciones .amazon-price-info,
.tabla-publicaciones .ml-price-info,
.tabla-publicaciones .analysis-badges { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.tabla-publicaciones .price-our,
.tabla-publicaciones .amazon-price,
.tabla-publicaciones .ml-price,
.tabla-publicaciones .ml-competitor-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.tabla-publicaciones .price-amazon, .tabla-publicaciones .price-ml,
.tabla-publicaciones .ml-offers, .tabla-publicaciones .ml-margin-info,
.tabla-publicaciones .suggested-price, .tabla-publicaciones .ml-suggested { font-size: .72rem; color: #6c757d; }
.tabla-publicaciones .suggested-price, .tabla-publicaciones .ml-suggested { color: #082382; font-weight: 600; }
.tabla-publicaciones .amazon-price-clickable { cursor: pointer; border-radius: 4px; padding: 4px; margin: -4px; }
.tabla-publicaciones .amazon-price-clickable:hover { background: rgba(250, 97, 0, .08); }
/* Verde = a favor, rojo = en contra (texto) */
.tabla-publicaciones .competitive,
.tabla-publicaciones .margin-value.good, .tabla-publicaciones .stock-value.in-stock,
.tabla-publicaciones .price-amazon.higher, .tabla-publicaciones .price-ml.higher,
.tabla-publicaciones .position.winning { color: #198754; }
.tabla-publicaciones .not-competitive,
.tabla-publicaciones .margin-value.bad, .tabla-publicaciones .stock-value.no-stock,
.tabla-publicaciones .price-amazon.lower, .tabla-publicaciones .price-ml.lower,
.tabla-publicaciones .position.losing { color: #dc3545; }
.tabla-publicaciones .margin-value.medium, .tabla-publicaciones .stock-value.low-stock { color: #b86e00; }
.tabla-publicaciones .position.competitive { color: #082382; }
.tabla-publicaciones .margin-value, .tabla-publicaciones .stock-value, .tabla-publicaciones .position { font-weight: 600; }
.tabla-publicaciones .stock-cell { text-align: center; }
.tabla-publicaciones .competition-info { font-size: .75rem; margin-top: .25rem; }
/* Etiquetas chicas con semáforo (mismos tonos que .pastilla) */
.tabla-publicaciones .price-diff, .tabla-publicaciones .ml-diff,
.tabla-publicaciones .profitability-badge, .tabla-publicaciones .analysis-badge,
.tabla-publicaciones .recommendation-badge, .tabla-publicaciones .trend-indicator {
    display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 600;
    padding: 1px 6px; border-radius: 4px; background: #f1f3f5; color: #495057; white-space: nowrap;
}
.tabla-publicaciones .recommendation-badge { text-transform: uppercase; padding: 3px 8px; }
.tabla-publicaciones .price-diff.positive, .tabla-publicaciones .ml-diff.cheaper,
.tabla-publicaciones .profitability-badge.profitable, .tabla-publicaciones .profitability-badge.oportunidad,
.tabla-publicaciones .analysis-badge.rentable, .tabla-publicaciones .recommendation-badge.publish,
.tabla-publicaciones .trend-indicator.up { background: #e8f5ee; color: #14663c; }
.tabla-publicaciones .price-diff.negative, .tabla-publicaciones .ml-diff.expensive,
.tabla-publicaciones .profitability-badge.not-profitable, .tabla-publicaciones .profitability-badge.no-viable,
.tabla-publicaciones .analysis-badge.no-rentable, .tabla-publicaciones .recommendation-badge.skip,
.tabla-publicaciones .trend-indicator.down { background: #fdecec; color: #a12020; }
.tabla-publicaciones .profitability-badge.viable, .tabla-publicaciones .analysis-badge.no-competitivo,
.tabla-publicaciones .recommendation-badge.adjust { background: #fff4e5; color: #8a4b00; }
.tabla-publicaciones .analysis-badge.competitivo, .tabla-publicaciones .recommendation-badge.review { background: #e7ecfa; color: #082382; }
/* Estado de la publicación */
.tabla-publicaciones .status-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: #f1f3f5; color: #495057; }
.tabla-publicaciones .status-badge.active { background: #198754; color: #fff; }
.tabla-publicaciones .status-badge.pending { background: #fff4e5; color: #8a4b00; }
.tabla-publicaciones .status-badge.inactive { background: #6c757d; color: #fff; }
.tabla-publicaciones .status-badge.error { background: #dc3545; color: #fff; }
.tabla-publicaciones .seller-central-link,
.tabla-publicaciones .ml-link-published { display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; font-size: .7rem; font-weight: 600; color: #198754; text-decoration: none; }
.tabla-publicaciones .seller-central-link:hover,
.tabla-publicaciones .ml-link-published:hover { text-decoration: underline; }
/* Barra de confianza (ancho en % que pone la plantilla) */
.tabla-publicaciones .confidence-bar { width: 60px; height: 4px; background: #e9ecef; border-radius: 2px; margin-top: 4px; overflow: hidden; }
.tabla-publicaciones .confidence-bar .fill { height: 100%; background: #adb5bd; }
.tabla-publicaciones .confidence-bar .fill.high { background: #198754; }
.tabla-publicaciones .confidence-bar .fill.medium { background: #f59e0b; }
.tabla-publicaciones .confidence-bar .fill.low { background: #dc3545; }
/* Botones chicos de cada renglón */
.tabla-publicaciones .recommendation-actions,
.tabla-publicaciones .ml-action-buttons { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.tabla-publicaciones .btn-action-sm, .tabla-publicaciones .btn-ml-action,
.tabla-publicaciones .btn-analyze-price, .tabla-publicaciones .btn-report-asin,
.tabla-publicaciones .btn-action-asin {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; font-size: .7rem; font-weight: 600;
    border: 1px solid #ced4da; border-radius: 4px; background: #fff; color: #495057; cursor: pointer; text-decoration: none;
}
.tabla-publicaciones .btn-action-asin { margin-top: 4px; }
.tabla-publicaciones .btn-action-sm:hover, .tabla-publicaciones .btn-ml-action:hover,
.tabla-publicaciones .btn-action-asin:hover { border-color: #FA6100; color: #FA6100; }
.tabla-publicaciones .btn-action-sm.publish { background: #198754; border-color: #198754; color: #fff; }
.tabla-publicaciones .btn-action-sm.amazon, .tabla-publicaciones .btn-action-sm.ml,
.tabla-publicaciones .btn-analyze-price, .tabla-publicaciones .btn-action-asin.principal { background: #FA6100; border-color: #FA6100; color: #fff; }
.tabla-publicaciones .btn-action-sm.danger, .tabla-publicaciones .btn-report-asin { color: #dc3545; border-color: #dc3545; }
.tabla-publicaciones .btn-action-sm.danger:hover, .tabla-publicaciones .btn-report-asin:hover { background: #dc3545; color: #fff; }
.tabla-publicaciones .btn-ml-action.btn-refresh { color: #FA6100; border-color: #FA6100; }
.tabla-publicaciones .btn-analyze-price:disabled { opacity: .6; cursor: not-allowed; }
.tabla-publicaciones .btn-analyze-price.small, .tabla-publicaciones .btn-report-asin { padding: 2px 6px; font-size: .65rem; margin-top: 4px; }
.tabla-publicaciones .action-btn { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 6px; color: #6c757d; }
.tabla-publicaciones .action-btn:hover { background: #f1f3f5; color: #FA6100; }
/* Encabezado ordenable de la tabla de publicaciones: el JS pone .sort-asc / .sort-desc en th.sortable. */
.tabla-publicaciones th.sortable { white-space: nowrap; }
.tabla-publicaciones th.sortable::after { content: " ↕"; opacity: .4; font-size: .85em; }
.tabla-publicaciones th.sortable.sort-asc::after { content: " ▲"; opacity: 1; }
.tabla-publicaciones th.sortable.sort-desc::after { content: " ▼"; opacity: 1; }
/* Foto grande de producto en la ficha principal (140px, completa sin recortar); va con
   .foto-producto.foto-completa o con .foto-producto-vacia. */
.foto-producto.foto-producto-xl,
.foto-producto-vacia.foto-producto-xl { width: 140px; height: 140px; font-size: 2.6rem; }
/* Ficha de atributos en dos columnas (etiqueta gris fija de 110px | valor): MPN, UPC, marca,
   costo... Uso: <div class="rejilla-atributos"><div class="rejilla-atributos-etiqueta">MPN</div><div>…</div>…</div> */
.rejilla-atributos { display: grid; grid-template-columns: 110px 1fr; gap: .4rem 1rem; font-size: .85rem; align-items: baseline; }
.rejilla-atributos-etiqueta { color: #6c757d; font-weight: 600; }
@media (max-width: 575.98px) { .rejilla-atributos { grid-template-columns: 1fr; gap: .1rem; } .rejilla-atributos-etiqueta { margin-top: .4rem; } }
/* Botón de solo ícono/texto chico sin caja (copiar, editar junto a un dato). */
.boton-discreto { background: none; border: 0; padding: 0 .25rem; font-size: .72rem; color: #6c757d; cursor: pointer; }
.boton-discreto:hover { color: #FA6100; }
/* Colores de enlace del portal público. La regla global
   a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: naranja } (sección 4, especificidad 0,4,1)
   pinta de naranja todo enlace y se come el color de los componentes; aquí se repone con el mismo :not(). */
.tarjeta-vacante h3 a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: #082382; }
.tarjeta-vacante h3 a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover { color: #FA6100; }
.pie-publico-enlaces a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: #ffffa4; }
.pie-publico-enlaces a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover { color: #FA6100; }
.pie-publico-social a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: #fff; }
.menu-movil a.menu-movil-enlace:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: #333; }
.cabecera-publica .breadcrumb a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: #737373; }
a.enlace-destacado:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: #262626; }

/* Rejilla de tres paneles: lateral izquierdo fijo (filtros/categorías), centro flexible (tabla)
   y lateral derecho que se pliega a una franja de 44px cuando el JS le pone .derecho-plegado.
   Dentro del panel derecho: .panel-plegable-titulo y .panel-plegable-cuerpo se ocultan al plegar,
   y la .flecha-plegable gira. En pantallas < 1200px los paneles se apilan. (ecommerce-canales-B) */
.rejilla-paneles { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 1rem; transition: grid-template-columns .2s; }
.rejilla-paneles.derecho-plegado { grid-template-columns: 250px minmax(0, 1fr) 44px; }
.rejilla-paneles.derecho-plegado .panel-plegable-titulo,
.rejilla-paneles.derecho-plegado .panel-plegable-cuerpo { display: none; }
.rejilla-paneles.derecho-plegado .flecha-plegable { transform: rotate(-90deg); }
@media (max-width: 1400px) {
    .rejilla-paneles { grid-template-columns: 220px minmax(0, 1fr) 280px; }
    .rejilla-paneles.derecho-plegado { grid-template-columns: 220px minmax(0, 1fr) 44px; }
}
@media (max-width: 1200px) {
    .rejilla-paneles, .rejilla-paneles.derecho-plegado { grid-template-columns: minmax(0, 1fr); }
}

/* Aviso en tarjeta blanca flotante arriba a la derecha (resultado de una acción larga, varias
   líneas, con botón × .btn-close). El color de la franja va con .acento-izq + .acento-ok|warn|bad|info.
   El JS lo crea y le pone .show para que entre; .aviso-tarjeta-centro = arriba al centro, fijo
   (tarjeta de progreso de una operación que tarda). (ecommerce-canales-B) */
.aviso-tarjeta {
    position: fixed; top: 20px; right: 20px; z-index: 1090;
    min-width: 320px; max-width: 480px;
    background: #fff; color: #212529;
    border-radius: 6px; padding: 14px 36px 14px 18px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    font-size: .875rem; line-height: 1.45;
    opacity: 0; transform: translateX(20px);
    transition: opacity .25s, transform .25s;
}
.aviso-tarjeta.show { opacity: 1; transform: none; }
.aviso-tarjeta.aviso-tarjeta-centro { right: auto; left: 50%; transform: translateX(-50%); min-width: 360px; max-width: 520px; padding: 16px 22px; }
/* Panel lateral deslizante a la derecha (historial global, bitácora): fijo y escondido fuera de
   la pantalla; el JS lo abre poniéndole style.right = '0' y lo cierra con '-400px'.
   Va con un fondo .panel-deslizante-fondo (display:none en línea; el JS lo prende). */
.panel-deslizante {
    position: fixed; top: 0; right: -400px; width: 380px; max-width: 100%; height: 100vh;
    background: #fff; box-shadow: -4px 0 20px rgba(0, 0, 0, .15); z-index: 1050;
    transition: right .3s ease; display: flex; flex-direction: column;
}
.panel-deslizante-fondo { position: fixed; inset: 0; background: rgba(15, 15, 18, .3); z-index: 1049; }
/* Caja ancha (reportes con tabla) dentro de una .capa-dialogo hecha por JS: hasta 1100px y 90% del alto,
   encabezado y pie fijos y el cuerpo con scroll (el cuerpo lleva .flex-grow-1 .overflow-auto). */
.capa-dialogo-ancho {
    background: #fff; border-radius: .5rem; width: 100%; max-width: 1100px; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    border-top: 3px solid #FA6100;
}
/* Tabla de publicaciones (variante de la plantilla base de canal): existencias low|medium|good,
   estados published|paused y margen en pastilla dentro de la celda de precio. */
.tabla-publicaciones .stock-value.low { color: #dc3545; }
.tabla-publicaciones .stock-value.medium { color: #b86e00; }
.tabla-publicaciones .stock-value.good { color: #198754; }
.tabla-publicaciones .status-badge.published { background: #198754; color: #fff; }
.tabla-publicaciones .status-badge.paused { background: #e7ecfa; color: #082382; }
.tabla-publicaciones .margin { display: inline-block; font-size: .68rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: #f1f3f5; color: #495057; }
.tabla-publicaciones .margin.good { background: #e8f5ee; color: #14663c; }
.tabla-publicaciones .margin.warn { background: #fff4e5; color: #8a4b00; }
.tabla-publicaciones .margin.bad { background: #fdecec; color: #a12020; }
/* Barra de acciones sobre lo seleccionado en una lista: oculta hasta que el JS le pone .visible. */
/* (26-oct) la variante .visible de las plantillas channel/_base_* (sin uso) se fundió con la de arriba */
.barra-seleccion.visible { display: flex; }
/* Barras de avance en ámbar/rojo: la regla global .progress-bar { naranja !important } se comía
   bg-warning / bg-danger (solo dejaba bg-success e bg-info), y una barra apilada de
   promotores/pasivos/detractores salía con dos tramos naranjas iguales. Esto las deja funcionar. (personas) */
/* Número de .metric-value en rojo/verde/ámbar: la regla global .metric-value { color: naranja !important }
   se comía text-danger / text-success (mismo arreglo que .kpi-value.text-*). */
/* Barra de score corta (40px) para columnas angostas de tablas densas (va con .progress.barra-mini). */
.progress.barra-mini.barra-mini-corta { width: 40px; }
/* Botón naranja "ver en Amazon/ML" de .tabla-publicaciones cuando es un <a>: la regla global
   a:not(.btn):not(.nav-link)… (naranja, especificidad 0-4-1) le pintaba el ícono del mismo naranja
   que el fondo y quedaba invisible. */
.tabla-publicaciones a.btn-action-sm.amazon,
.tabla-publicaciones a.btn-action-sm.ml { color: #fff !important; }


/* ######################################################################
   10. Utilidades: valores sueltos con nombre (antes style="..." en línea).
   Llevan !important porque sustituyen estilos en línea, que ganaban siempre.
   ###################################################################### */
.texto-indigo { color: #361a85 !important; }
.texto-marca { color: #FA6100 !important; }
.texto-marino { color: #082482 !important; }
.texto-petroleo { color: #00515c !important; }
.u-alto-20 { height: 20px !important; }
.u-alto-28 { height: 28px !important; }
.u-alto-280 { height: 280px !important; }
.u-alto-32 { height: 32px !important; }
.u-alto-320 { height: 320px !important; }
.u-alto-8 { height: 8px !important; }
.u-alto-max-120 { max-height: 120px !important; }
.u-alto-max-240 { max-height: 240px !important; }
.u-alto-max-300 { max-height: 300px !important; }
.u-alto-max-320 { max-height: 320px !important; }
.u-alto-max-350 { max-height: 350px !important; }
.u-ancho-180 { width: 180px !important; }
.u-ancho-90 { width: 90px !important; }
.u-ancho-max-120 { max-width: 120px !important; }
.u-ancho-max-220 { max-width: 220px !important; }
.u-ancho-min-180 { min-width: 180px !important; }
.u-ancho-min-200 { min-width: 200px !important; }
.u-ancho-min-240 { min-width: 240px !important; }
.u-ancho-min-280 { min-width: 280px !important; }
.u-ancho-min-320 { min-width: 320px !important; }
.u-borde-izq-0d6efd { border-left: 4px solid #0d6efd !important; }
.u-borde-izq-0dcaf0 { border-left: 4px solid #0dcaf0 !important; }
.u-borde-izq-198754 { border-left: 4px solid #198754 !important; }
.u-borde-izq-6c757d { border-left: 4px solid #6c757d !important; }
.u-borde-izq-dc3545 { border-left: 4px solid #dc3545 !important; }
.u-borde-izq-fa6101 { border-left: 4px solid #fa6101 !important; }
.u-borde-izq-ffc107 { border-left: 4px solid #ffc107 !important; }
.u-desplazar-y { overflow-y: auto !important; }
.u-letra-05rem { font-size: 0.5rem !important; }
.u-letra-06rem { font-size: 0.6rem !important; }
.u-letra-07em { font-size: 0.7em !important; }
.u-letra-07rem { font-size: 0.7rem !important; }
.u-letra-08em { font-size: 0.8em !important; }
.u-letra-08rem { font-size: 0.8rem !important; }
.u-letra-1rem { font-size: 1rem !important; }
.u-letra-3rem { font-size: 3rem !important; }
.u-ml-03 { margin-left: .3rem !important; }
.u-z-1000 { z-index: 1000 !important; }


/* ######################################################################
   11. Ajustes globales de la consolidación (26-oct-2026)
   ###################################################################### */
/* La letra de la marca va con !important en campos y botones; la de código debe poder ganarle. */
.font-monospace, .form-control.font-monospace, code, pre, kbd, samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
/* bg-info de la marca es azul marino: con text-dark no se leía. */
.bg-info.text-dark, .badge.bg-info.text-dark, .text-bg-info { color: #fff !important; }


/* ═══ Celular estilo iOS (POC 3-nov-2026) — antes en movil-ios.css; vive aquí por la regla de una sola hoja (POC 26-oct).
   Todo va dentro de este @media y además cuelga de html.movil-ios: en escritorio no aplica nada. ═══ */
@media (max-width: 991.98px) {
/* ═══════════════════════════════════════════════════════════════════════════════════════
   MÓVIL ESTILO iOS — Daltum Stats (orden POC 3-nov-2026: "que realmente parezca mobile en
   iOS ... es importante que no vayas a romperla").

   CANDADOS para no romper nada:
   1. Este archivo se carga con media="(max-width: 991.98px)": en escritorio el navegador ni lo
      aplica. Escritorio queda pixel por pixel igual (se comprobó con capturas antes/después).
   2. Toda regla cuelga de html.movil-ios. Esa clase la pone movil-ios-inicio.js; sin ella este
      archivo no hace nada. Apagarlo para un usuario: abrir cualquier página con ?movil=clasico
      (o "Versión clásica" al final del menú). Volver: ?movil=ios.
   3. No se cambia el HTML de ninguna pantalla: la barra de pestañas y el menú en hoja los arma
      movil-ios.js a partir del menú que ya existe (mismos permisos, mismos enlaces).
   Rollback total: commits [ui-movil-20261103] (~/TRABAJO/respaldos/rollback_frameworks_20261103.sh codigo).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

html.movil-ios {
  --ios-tinte: #fa6101;
  --ios-fondo: #f2f2f7;            /* systemGroupedBackground */
  --ios-celda: #ffffff;
  --ios-separador: rgba(60, 60, 67, .18);
  --ios-gris: #8e8e93;             /* systemGray */
  --ios-texto: #1c1c1e;
  --ios-barra: rgba(249, 249, 249, .86);
  --ios-tab-alto: 50px;
  --ios-abajo: env(safe-area-inset-bottom, 0px);
  --ios-arriba: env(safe-area-inset-top, 0px);
  -webkit-text-size-adjust: 100%;
}

/* ── Tipografía del sistema (San Francisco en iPhone) ─────────────────────────────────── */
html.movil-ios body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  background: var(--ios-fondo) !important;
  color: var(--ios-texto);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--ios-tab-alto) + var(--ios-abajo) + 12px) !important;
  overscroll-behavior-y: none;
}
html.movil-ios footer { display: none !important; }   /* el pie lo tapa la barra de pestañas */

/* ── Barra de navegación translúcida (como UINavigationBar) ───────────────────────────── */
html.movil-ios .navbar {
  position: sticky !important;
  top: 0;
  z-index: 1030;
  background: var(--ios-barra) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--ios-separador) !important;
  box-shadow: none !important;
  padding: calc(4px + var(--ios-arriba)) 12px 4px !important;
  min-height: 44px;
}
html.movil-ios .navbar .navbar-brand img { height: 24px !important; }
html.movil-ios .navbar .navbar-toggler,
html.movil-ios .navbar #mainNavbar { display: none !important; }   /* el menú vive en la hoja "Más" */
html.movil-ios .mi-barra-derecha { display: flex !important; gap: 4px; margin-left: auto; align-items: center; }
html.movil-ios .mi-icono-barra {
  position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ios-tinte) !important; font-size: 20px; border: 0; background: none; border-radius: 22px;
}
html.movil-ios .mi-icono-barra:active { background: rgba(0, 0, 0, .06); }
html.movil-ios .mi-icono-barra .mi-globo {
  position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ff3b30; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}

/* ── Título grande (Large Title) ──────────────────────────────────────────────────────── */
html.movil-ios main > h1:first-of-type,
html.movil-ios main > .container > h1:first-of-type,
html.movil-ios main > .container-fluid > h1:first-of-type,
html.movil-ios main .mi-titulo-grande {
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  color: var(--ios-texto) !important;
}
html.movil-ios .mi-titulo-grande > i:first-child { display: none; }   /* iOS no lleva ícono en el título */

/* Encabezado con título + botones que no caben: título en su renglón, botones abajo */
html.movil-ios .mi-encabezado { flex-wrap: wrap !important; row-gap: 10px; }
html.movil-ios .mi-encabezado > .mi-con-titulo { flex: 0 0 100% !important; max-width: 100%; }
html.movil-ios .mi-encabezado > :not(.mi-con-titulo) { flex-wrap: wrap; gap: 8px; }

/* ── Contenido ─────────────────────────────────────────────────────────────────────────── */
/* main es .container de Bootstrap: se respeta su margen (las .row cuentan con él para sus márgenes negativos) */
html.movil-ios main.container { padding-top: 12px !important; }

html.movil-ios .card {
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
  background: var(--ios-celda);
  overflow: hidden;
}
html.movil-ios .card-header {
  background: var(--ios-celda) !important;
  border-bottom: .5px solid var(--ios-separador) !important;
  font-weight: 600;
}

/* Listas al estilo "inset grouped" */
html.movil-ios .list-group { border-radius: 12px; overflow: hidden; }
html.movil-ios .list-group-item {
  border-left: 0 !important; border-right: 0 !important; border-color: var(--ios-separador) !important;
  min-height: 44px; padding-top: 11px; padding-bottom: 11px;
}

/* ── Botones y controles del tamaño de un dedo (44 pt, guía de Apple) ──────────────────── */
html.movil-ios .btn:not(table .btn):not(.btn-close):not(.btn-link) {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
html.movil-ios .btn-sm:not(table .btn) { min-height: 36px; border-radius: 10px; }
html.movil-ios .btn:active, html.movil-ios a.mi-fila:active { opacity: .55; transition: opacity 0s; }
html.movil-ios .btn { transition: opacity .25s; }

/* 16 px en campos: con menos, Safari hace zoom al tocar el campo y la página se descuadra */
html.movil-ios input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.movil-ios select, html.movil-ios textarea { font-size: 16px !important; }
html.movil-ios .form-control:not(textarea), html.movil-ios .form-select { min-height: 44px; border-radius: 10px; }
html.movil-ios textarea.form-control { border-radius: 10px; }
html.movil-ios .form-control:focus, html.movil-ios .form-select:focus {
  border-color: var(--ios-tinte); box-shadow: 0 0 0 3px rgba(250, 97, 1, .18);
}

/* Interruptores tipo iOS */
html.movil-ios .form-switch .form-check-input { width: 51px; height: 31px; margin-top: 0; border-radius: 16px; }
html.movil-ios .form-switch .form-check-input:checked { background-color: #34c759; border-color: #34c759; }

/* Pestañas (nav-tabs/pills) como control segmentado deslizable */
html.movil-ios .nav-tabs, html.movil-ios .nav-pills {
  flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
html.movil-ios .nav-tabs::-webkit-scrollbar, html.movil-ios .nav-pills::-webkit-scrollbar { display: none; }
html.movil-ios .nav-tabs .nav-link, html.movil-ios .nav-pills .nav-link { white-space: nowrap; min-height: 44px; }

/* Filas de botones que no caben: carrusel horizontal en lugar de salirse de la pantalla */
html.movil-ios .mi-carrusel {
  display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px;
  scroll-snap-type: x proximity; padding-bottom: 2px; max-width: 100%;
}
html.movil-ios .mi-carrusel::-webkit-scrollbar { display: none; }
html.movil-ios .mi-carrusel > * { flex: 0 0 auto !important; scroll-snap-align: start; }

/* Tablas: se deslizan con el dedo dentro de su caja, la página no */
html.movil-ios .table-responsive, html.movil-ios .mi-tabla-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px;
}

/* Filtros plegados detrás de un botón (movil-ios.js decide cuáles) */
html.movil-ios .mi-filtros-cerrado { display: none !important; }
html.movil-ios .mi-boton-filtros {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; margin: 4px 0 10px;
  border: 0; border-radius: 18px; background: rgba(118, 118, 128, .12); color: var(--ios-texto); font-weight: 600; font-size: 15px;
}
html.movil-ios .mi-boton-filtros .mi-cuenta {
  background: var(--ios-tinte); color: #fff; border-radius: 10px; min-width: 20px; height: 20px; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}

/* ── Modales como hojas que suben desde abajo (UISheetPresentationController) ─────────── */
html.movil-ios .modal:not(.mi-sin-hoja) .modal-dialog:not(.modal-fullscreen) {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; width: 100%;
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .3, 1) !important;
}
html.movil-ios .modal.show:not(.mi-sin-hoja) .modal-dialog:not(.modal-fullscreen) { transform: none; }
html.movil-ios .modal:not(.mi-sin-hoja) .modal-dialog:not(.modal-fullscreen) .modal-content {
  border: 0; border-radius: 14px 14px 0 0; max-height: calc(92vh - var(--ios-arriba));
  padding-bottom: var(--ios-abajo);
}
html.movil-ios .modal:not(.mi-sin-hoja) .modal-dialog:not(.modal-fullscreen) .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.movil-ios .modal:not(.mi-sin-hoja) .modal-header { position: relative; border-bottom: .5px solid var(--ios-separador); padding-top: 20px; }
html.movil-ios .modal:not(.mi-sin-hoja) .modal-header::before {   /* agarradera */
  content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 5px; margin-left: -18px;
  border-radius: 3px; background: rgba(60, 60, 67, .3);
}

/* Menús desplegables como "action sheet" */
html.movil-ios main .dropdown-menu.show {
  border: 0; border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); padding: 6px 0;
}
html.movil-ios main .dropdown-item { min-height: 44px; display: flex; align-items: center; }

/* ── Barra de pestañas inferior (UITabBar) ─────────────────────────────────────────────── */
html.movil-ios .mi-tabbar {
  display: flex !important;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  height: calc(var(--ios-tab-alto) + var(--ios-abajo));
  padding-bottom: var(--ios-abajo);
  background: var(--ios-barra);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--ios-separador);
}
html.movil-ios .mi-tabbar a, html.movil-ios .mi-tabbar button {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ios-gris); text-decoration: none; font-size: 10px; font-weight: 500; letter-spacing: .01em;
  background: none; border: 0; padding: 4px 0 0; position: relative; min-width: 0;
}
html.movil-ios .mi-tabbar i { font-size: 21px; line-height: 1; }
html.movil-ios .mi-tabbar .activa { color: var(--ios-tinte); }
html.movil-ios .mi-tabbar .mi-globo {
  position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ff3b30; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px;
}

/* ── Hoja "Más": el menú completo con navegación de ida y vuelta (como Ajustes) ──────── */
html.movil-ios .mi-hoja-fondo {
  display: block !important; position: fixed; inset: 0; z-index: 1060; background: rgba(0, 0, 0, .32);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
html.movil-ios .mi-hoja-fondo.abierta { opacity: 1; pointer-events: auto; }
html.movil-ios .mi-hoja {
  display: flex !important; flex-direction: column;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1061;
  height: calc(100% - 44px - var(--ios-arriba)); background: var(--ios-fondo);
  border-radius: 14px 14px 0 0; overflow: hidden;
  transform: translateY(105%); transition: transform .38s cubic-bezier(.2, .9, .3, 1);
  box-shadow: 0 -2px 30px rgba(0, 0, 0, .15);
}
html.movil-ios .mi-hoja.abierta { transform: none; }
html.movil-ios .mi-hoja-cabeza {
  flex: 0 0 auto; display: flex; align-items: center; height: 56px; padding: 8px 8px 0; position: relative;
  background: var(--ios-fondo);
}
html.movil-ios .mi-hoja-cabeza::before {
  content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px;
  border-radius: 3px; background: rgba(60, 60, 67, .3);
}
html.movil-ios .mi-hoja-cabeza .mi-titulo { flex: 1; text-align: center; font-weight: 600; font-size: 17px; }
html.movil-ios .mi-hoja-cabeza button {
  min-width: 72px; height: 44px; border: 0; background: none; color: var(--ios-tinte); font-size: 17px; padding: 0 8px;
}
html.movil-ios .mi-hoja-cabeza .mi-atras { text-align: left; visibility: hidden; }
html.movil-ios .mi-hoja-cabeza .mi-atras.visible { visibility: visible; }
html.movil-ios .mi-hoja-cabeza .mi-listo { text-align: right; font-weight: 600; }
html.movil-ios .mi-paneles { flex: 1; position: relative; overflow: hidden; }
html.movil-ios .mi-panel {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 16px calc(24px + var(--ios-abajo)); background: var(--ios-fondo);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1);
}
html.movil-ios .mi-panel.fuera-der { transform: translateX(100%); }
html.movil-ios .mi-panel.fuera-izq { transform: translateX(-30%); }
html.movil-ios .mi-grupo-titulo {
  font-size: 13px; text-transform: uppercase; color: var(--ios-gris); padding: 18px 16px 6px; letter-spacing: .02em;
}
html.movil-ios .mi-grupo { background: var(--ios-celda); border-radius: 12px; overflow: hidden; }
html.movil-ios .mi-grupo + .mi-grupo { margin-top: 20px; }
html.movil-ios .mi-fila {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 16px;
  border: 0; background: none; text-align: left; color: var(--ios-texto) !important; text-decoration: none !important;
  font-size: 17px; position: relative;
}
html.movil-ios .mi-fila + .mi-fila::before {
  content: ""; position: absolute; top: 0; right: 0; left: 52px; border-top: .5px solid var(--ios-separador);
}
html.movil-ios .mi-fila .mi-ico {
  flex: 0 0 29px; height: 29px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ios-tinte); color: #fff !important; font-size: 15px;
}
html.movil-ios .mi-fila .mi-ico i { color: #fff !important; margin: 0 !important; }
html.movil-ios .mi-fila .mi-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.movil-ios .mi-fila .mi-chevron { color: #c4c4c7; font-size: 14px; }
html.movil-ios .mi-fila:active { background: #e5e5ea; }
html.movil-ios .mi-fila.mi-peligro { color: #ff3b30 !important; }
html.movil-ios .mi-nota { font-size: 13px; color: var(--ios-gris); padding: 8px 16px 0; }

/* Bloquea el fondo mientras la hoja está abierta */
html.movil-ios.mi-hoja-viva, html.movil-ios.mi-hoja-viva body { overflow: hidden !important; }

}

/* ═══ Plan semanal de vacantes (feedback #504, POC 4-nov-2026): clases ps-*, solo en /recruitment/plan-semanal ═══ */
/* Plan semanal de vacantes (feedback #504, POC 4-nov-2026). Se ve como la hoja de Faryna:
   prioridad y estatus en "pastillas" de color, celdas que se editan en su lugar. */
.ps { padding-bottom: 24px; }
.ps-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.ps-titulo { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; }
.ps-semana { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.ps-estado { font-size: 12px; font-weight: 600; border-radius: 12px; padding: 3px 10px; }
.ps-estado.gris { background: #f3f4f6; color: #4b5563; }
.ps-estado.verde { background: #dcfce7; color: #166534; }
.ps-estado.naranja { background: #ffedd5; color: #9a3412; }
.ps-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-publicar { background: #FA6100; border-color: #FA6100; }
.ps-publicar:hover { background: #e05600; border-color: #e05600; }
.ps-nota { color: #6b7280; font-size: 13px; margin: 6px 0 12px; }
.ps-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ps-filtros .form-control, .ps-filtros .form-select { width: auto; min-width: 170px; flex: 0 1 auto; }
.ps-filtros #ps-buscar { min-width: 260px; }
.ps-cuenta { color: #6b7280; font-size: 13px; margin-left: auto; }

.ps-tabla-caja { max-height: calc(100vh - 290px); overflow: auto; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.ps-tabla { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.ps-tabla thead th { position: sticky; top: 0; z-index: 2; background: #2f5d50; color: #fff; font-weight: 600; padding: 8px; white-space: nowrap; cursor: pointer; user-select: none; }
.ps-tabla tbody td { border-bottom: 1px solid #eef0f2; padding: 4px 6px; vertical-align: top; }
.ps-tabla tbody tr:nth-child(even) td { background: #fafbfc; }
.ps-tabla tbody tr:hover td { background: #fff7ed; }
.ps-tabla .c-vacante { min-width: 230px; }
.ps-tabla .c-cliente { min-width: 150px; }
.ps-tabla .c-siguiente_accion, .ps-tabla .c-comentarios { min-width: 220px; }
.ps-tabla .c-bloqueo { min-width: 170px; }
.ps-tabla .c-responsable, .ps-tabla .c-cs { min-width: 160px; }
.ps-vacio { text-align: center; color: #6b7280; padding: 28px !important; }

.ps-celda { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 4px 6px; font: inherit; color: inherit; }
.ps-celda:hover:not(:disabled) { border-color: #d1d5db; background: #fff; }
.ps-celda:focus { outline: none; border-color: #FA6100; background: #fff; box-shadow: 0 0 0 3px rgba(250, 97, 0, .15); }
.ps-celda:disabled { color: inherit; opacity: 1; -webkit-appearance: none; appearance: none; }
.ps-celda.guardando { border-color: #fbbf24; }
.ps-texto { resize: none; overflow: hidden; min-height: 30px; line-height: 1.35; }
.ps-num { width: 64px; text-align: center; }

.ps-prio { font-weight: 600; border-radius: 12px; text-align: center; min-width: 98px; }
.ps-prio.p-URGENT { background: #b91c1c; color: #fff; }
.ps-prio.p-HIGH { background: #fde2e2; color: #b91c1c; }
.ps-prio.p-MEDIUM { background: #fef3c7; color: #92400e; }
.ps-prio.p-LOW { background: #f3f4f6; color: #4b5563; }
.ps-est { border-radius: 12px; padding: 2px 10px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.ps-est.e-IN_PROGRESS { background: #166534; color: #fff; }
.ps-est.e-APPROVED { background: #dbeafe; color: #1e40af; }
.ps-est.e-ON_HOLD { background: #f3f4f6; color: #4b5563; }
.ps-pill { display: inline-block; background: #e0f2fe; color: #075985; border-radius: 10px; padding: 1px 8px; margin: 1px 0; font-size: 12px; white-space: nowrap; }
.ps-vac { font-weight: 600; color: #111827; text-decoration: none; }
.ps-vac:hover { color: #FA6100; text-decoration: underline; }
.ps-id { color: #9ca3af; font-size: 12px; }
.ps-badge { background: #ffedd5; color: #9a3412; border-radius: 8px; padding: 0 6px; font-size: 11px; font-weight: 600; }
.ps-badge.nueva { background: #dcfce7; color: #166534; }
.ps-gris { color: #9ca3af; }

.ps-guardado { position: fixed; right: 20px; bottom: 20px; z-index: 1080; background: #111827; color: #fff; padding: 8px 14px; border-radius: 10px;
  font-size: 13px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.ps-guardado.visible { opacity: .95; transform: none; }
.ps-guardado.error { background: #b91c1c; }
.ps-resumen td, .ps-resumen th { text-align: center; }
.ps-resumen td:first-child, .ps-resumen th:first-child { text-align: left; }
.ps-cambios, .ps-dest { padding-left: 18px; font-size: 14px; }

/* Celular (con la capa iOS): la barra de pestañas tapa la esquina, el aviso sube */
@media (max-width: 991.98px) {
  .ps-guardado { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); right: 12px; left: 12px; text-align: center; }
  .ps-tabla-caja { max-height: none; }
  .ps-filtros .form-control, .ps-filtros .form-select { min-width: 0; flex: 1 1 45%; }
  .ps-filtros #ps-buscar { flex-basis: 100%; }
}

/* ═══ Cotizador con todos los proveedores y ofertas (POC 4-nov-2026): clases cz-*, solo en /comercial/cotizacion* ═══ */
.cz { padding: 8px 0 24px; }
.cz-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cz-titulo { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; }
.cz-folio { color: #FA6100; font-size: 1.1rem; }
.cz-provs { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-prov { font-size: 12px; border-radius: 12px; padding: 2px 10px; font-weight: 600; cursor: help; }
.cz-prov.si { background: #dcfce7; color: #166534; }
.cz-prov.no { background: #f3f4f6; color: #6b7280; }
.cz-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 30%); gap: 16px; align-items: start; }   /* POC 5-nov: carrito ≤ 30 % como un eCommerce */
.cz-cuerpo.cz-sin-carrito { grid-template-columns: minmax(0, 1fr); }
.cz-cuerpo.cz-sin-carrito .cz-cotizacion { display: none; }
.cz-cuerpo.cz-detalle { grid-template-columns: minmax(0, 1fr); }
.cz-cuerpo.cz-detalle .cz-catalogo { display: none; }
.cz-cuerpo.cz-detalle .cz-cotizacion { position: static; max-height: none; }
.cz-cotizacion .cz-solo-detalle { display: none; }
.cz-cuerpo.cz-detalle .cz-solo-detalle { display: block; }
.cz-cuerpo.cz-detalle .cz-cliente { display: flex; }
.cz-cuerpo.cz-detalle .cz-solo-compacto { display: none; }
.cz-carrito-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.cz-carrito-cab h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.cz-carrito-cab .btn { padding: 4px 10px; font-size: 13px; }
.cz-pill { position: fixed; right: 18px; bottom: 18px; z-index: 1030; background: #FA6100; color: #fff; border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.18); display: none; align-items: center; gap: 8px; }
.cz-pill.visible { display: inline-flex; }
.cz-pill .cz-pill-n { background: #fff; color: #FA6100; border-radius: 999px; padding: 0 8px; font-size: 12px; }
.cz-cuerpo:not(.cz-detalle) .cz-linea { padding: 6px 8px; font-size: 12.5px; }
.cz-cuerpo:not(.cz-detalle) .cz-totales { margin: 6px 0 8px auto; max-width: none; }
.cz-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; }
.cz-cotizacion { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; }
.cz-pestanas { margin-bottom: 10px; gap: 6px; }
.cz-pestanas .nav-link { border-radius: 20px; font-weight: 600; }
.cz-pestanas .nav-link.active { background: #FA6100; }
.cz-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.cz-barra .form-control { flex: 1 1 260px; }
.cz-barra .form-select { flex: 0 1 190px; }
.cz-check { font-size: 13px; color: #4b5563; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.cz-ayuda, .cz-nota { color: #6b7280; font-size: 13px; margin: 4px 0 8px; }
.cz-cuenta { color: #6b7280; font-size: 12px; margin: 4px 0 8px; }
.cz-vacio { color: #6b7280; text-align: center; padding: 22px 8px; }
.cz-grupo { border: 1px solid #eef0f2; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.cz-g-cab { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cz-g-nombre { font-weight: 600; line-height: 1.25; }
.cz-g-parte { color: #6b7280; font-size: 12px; }
.cz-g-badges { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-start; }
.cz-b { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 8px; background: #e0f2fe; color: #075985; white-space: nowrap; }
.cz-b.oferta { background: #fee2e2; color: #b91c1c; }
.cz-b.mejor { background: #dcfce7; color: #166534; }
.cz-venta { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cz-venta > i { color: #FA6100; }
.cz-venta input { flex: 1; min-width: 0; }
.cz-venta-info { font-size: 12.5px; background: #FFF1E8; color: #7C2D12; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.cz-venta-info ul { margin: 4px 0 0; padding-left: 18px; }
.cz-b.venta { background: #0F0F12; color: #fff; }
.cz-b.sobrepedido { background: #b91c1c; color: #fff; border: 1px solid #991b1b; letter-spacing: .02em; }
.cz-op-exist.cz-sp { color: #b91c1c; font-weight: 700; }
.cz-linea.cz-sp { border-color: #fca5a5; background: #fff7f7; }
.cz-sp-aviso { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #fee2e2; color: #991b1b; font-size: 12.5px; }
.cp-sp { display: inline-block; background: #b91c1c; color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 1px 6px; }
.cz-opciones { width: 100%; font-size: 13px; border-collapse: collapse; }
.cz-opciones th { color: #6b7280; font-weight: 600; font-size: 12px; padding: 4px 6px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.cz-opciones td { padding: 6px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.cz-opciones tr.cz-mejor td { background: #f0fdf4; }
.cz-tachado { text-decoration: line-through; color: #9ca3af; font-size: 12px; }
.cz-sub { color: #6b7280; font-size: 11px; }
.cz-cliente { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cz-campo { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; }
.cz-campo label { font-size: 12px; color: #4b5563; font-weight: 600; }
.cz-campo.cz-ancho { flex-basis: 100%; }
.cz-campo.cz-corto { flex: 0 1 110px; }
.cz-margen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.cz-margen .input-group { width: 120px; }
.cz-partidas { font-size: 13px; margin-bottom: 4px; }
.cz-partidas th { font-size: 12px; color: #6b7280; white-space: nowrap; }
.cz-partidas td { vertical-align: top; }
.cz-partidas .cz-desc { min-width: 150px; }
.cz-partidas .cz-num { width: 64px; padding-left: 4px; padding-right: 4px; }
.cz-partidas .cz-precio { width: 100px; padding-left: 4px; padding-right: 4px; }
.cz-partidas tr.cz-mal td { background: #fef2f2; }
.cz-etiquetas { margin-top: 3px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.cz-problema { color: #b91c1c; font-size: 12px; font-weight: 600; margin-top: 2px; }
.cz-totales { margin: 8px 0 12px auto; max-width: 340px; font-size: 14px; }
.cz-totales > div { display: flex; justify-content: space-between; padding: 3px 0; }
.cz-totales .cz-total { border-top: 1px solid #e5e7eb; font-size: 16px; color: #FA6100; }
.cz-totales .cz-util { color: #166534; font-size: 13px; }
.cz-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cz-guardar { background: #FA6100; border-color: #FA6100; }
.cz-guardar:hover { background: #e05600; border-color: #e05600; }
.cz-estado { width: auto; }
.cz-msg { font-size: 13px; }
.cz-msg.ok { color: #166534; }
.cz-msg.error { color: #b91c1c; }
.cz-filtro { max-width: 360px; }
.cz-filtro-corto { max-width: 200px; }
.cz-listado tbody tr { cursor: pointer; }
.cz-estado-pill { border-radius: 10px; padding: 1px 9px; font-size: 12px; font-weight: 600; background: #f3f4f6; color: #374151; }
.cz-estado-pill.e-enviada { background: #dbeafe; color: #1e40af; }
.cz-estado-pill.e-ganada { background: #dcfce7; color: #166534; }
.cz-estado-pill.e-perdida { background: #fee2e2; color: #b91c1c; }
@media (max-width: 991.98px) {
  .cz-cuerpo { grid-template-columns: 1fr; }
  .cz-cotizacion { position: static; max-height: none; }
}

/* ═══ Cotizador v2: búsqueda inteligente (POC 4-nov-2026 "la mejor página de cotizaciones") — clases cz-* nuevas ═══ */
.cz-modo { display: inline-flex; background: #f3f4f6; border-radius: 12px; padding: 3px; gap: 2px; margin-bottom: 10px; }
.cz-modo-btn { border: 0; background: transparent; border-radius: 10px; padding: 7px 14px; font-weight: 600; color: #4b5563; }
.cz-modo-btn.activo { background: #fff; color: #FA6100; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cz-cuenta-of { background: #ef4444; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; margin-left: 2px; }
.cz-busqueda { position: relative; margin-bottom: 8px; }
.cz-busqueda .cz-lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.cz-busqueda .form-control { padding-left: 36px; height: 44px; border-radius: 12px; }
.cz-afinar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.cz-afinar .form-select { flex: 1 1 150px; max-width: 230px; font-size: 13px; }
.cz-rango { display: flex; align-items: center; gap: 4px; flex: 1 1 220px; max-width: 260px; }
.cz-rango .form-control { font-size: 13px; }
.cz-provs-filtro, .cz-interruptores { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
.cz-chip-check { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e5e7eb; border-radius: 16px; padding: 3px 10px; font-size: 13px; cursor: pointer; background: #fff; user-select: none; }
.cz-chip-check:has(input:checked) { border-color: #FA6100; background: #fff7ed; color: #9a3412; }
.cz-chip-check input { accent-color: #FA6100; }
.cz-n { color: #9ca3af; font-size: 11px; }
.cz-sugerencia { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 6px 12px; font-size: 14px; margin-bottom: 8px; }
.cz-tarjeta { display: flex; gap: 12px; border: 1px solid #eef0f2; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.cz-tarjeta .cz-g-nombre { font-weight: 600; line-height: 1.25; }
.cz-tarjeta .cz-g-parte { color: #6b7280; font-size: 12px; }
.cz-btn-afinar { display: none; width: 100%; margin-bottom: 8px; }
.cz-foto { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid #f3f4f6; }
.cz-sin-foto { display: flex; align-items: center; justify-content: center; color: #d1d5db; font-size: 22px; }
.cz-g-cuerpo { flex: 1; min-width: 0; }
.cz-g-badges { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.cz-ficha summary { font-size: 12px; color: #2563eb; cursor: pointer; }
.cz-ficha p { font-size: 12px; color: #4b5563; margin: 4px 0; }
.cz-ops { margin-top: 6px; border-top: 1px solid #f3f4f6; }
.cz-op { display: grid; grid-template-columns: minmax(90px, 1.2fr) minmax(95px, 1fr) minmax(64px, .7fr) minmax(76px, .9fr) 38px; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.cz-op-mejor { background: #f0fdf4; border-radius: 8px; }
.cz-op-costo { text-align: right; }
.cz-op-exist { text-align: right; color: #374151; }
.cz-op-entrega { color: #4b5563; font-size: 12px; }
.cz-op-btn { width: 36px; height: 36px; padding: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.cz-op-btn span { display: none; }
.cz-lineas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.cz-linea { border: 1px solid #e5e7eb; border-radius: 12px; padding: 8px 10px; }
.cz-linea.cz-mal { border-color: #fca5a5; background: #fef2f2; }
.cz-l-cab { display: flex; gap: 8px; align-items: flex-start; }
.cz-l-num { flex: 0 0 22px; height: 22px; border-radius: 11px; background: #f3f4f6; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 6px; }
.cz-l-desc { flex: 1; resize: vertical; min-height: 38px; }
.cz-l-etiq { margin: 4px 0 0 30px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.cz-linea .cz-problema { margin-left: 30px; }
.cz-l-nums { display: grid; grid-template-columns: 70px 1fr 90px 1fr 1.2fr; gap: 8px; margin: 6px 0 0 30px; align-items: end; }
.cz-l-nums label { display: flex; flex-direction: column; font-size: 11px; color: #6b7280; gap: 2px; }
.cz-l-fijo { font-size: 14px; color: #111827; padding: 4px 0; }
.cz-l-importe { display: flex; flex-direction: column; text-align: right; font-size: 11px; color: #6b7280; }
.cz-l-importe b { font-size: 15px; color: #111827; }
.cz-l-importe small { color: #166534; }
@media (max-width: 991.98px) {
  .cz-btn-afinar { display: block; }
  .cz-afinar { display: none; }
  .cz-afinar-abierto .cz-afinar { display: flex; }
}
@media (max-width: 575.98px) {
  .cz-op { grid-template-columns: 1fr auto; }
  .cz-op-costo { text-align: left; }
  .cz-op-exist, .cz-op-entrega { grid-column: 1; text-align: left; }
  .cz-op-btn { grid-column: 2; grid-row: 1 / span 3; }
  .cz-op-btn span { display: none; }
  .cz-l-nums { grid-template-columns: 1fr 1fr; margin-left: 0; }
  .cz-l-etiq, .cz-linea .cz-problema { margin-left: 0; }
  .cz-afinar .form-select, .cz-rango { max-width: none; }
}

.cz-alms { font-size: 10.5px; color: #6b7280; margin-top: 2px; line-height: 1.5; text-align: right; }
.cz-alm { display: inline-block; background: #f3f4f6; border-radius: 8px; padding: 0 6px; margin: 1px 0 0 2px; white-space: nowrap; }
.cz-alm-local { background: #dcfce7; color: #166534; font-weight: 700; }