/*
 * design-system.css — Sistema de diseño unificado
 * Intranet Surtidora Médica de Occidente
 * Todos los módulos deben incluir este archivo
 */

/* ===== UI-001: fuentes ===== */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ibm-plex-sans-700.woff2') format('woff2'); }

/* ===== UI-001: variables (Sistema visual v1.1, secciones 2, 3 y 4) ===== */
:root {
    /* Marca */
    --smo-blue:        #0055B8;
    --smo-blue-hover:  #00479B;
    --smo-blue-active: #003C82;
    --smo-navy:        #164075;
    --smo-green:       #25D366;

    /* Neutros */
    --text:          #1B2533;
    --text-2:        #5F6B7A;
    --text-3:        #6B7787;
    --bg:            #F4F6F9;
    --surface:       #FFFFFF;
    --surface-2:     #F8FAFC;
    --border:        #DDE3EA;
    --border-strong: #CFD6DF;
    --divider:       #E6EAF0;
    --row-divider:   #EEF1F5;
    --row-hover:     #F7F9FC;
    --selected-bg:   #EAF1FB;
    --focus-ring:    0 0 0 3px rgba(0, 85, 184, 0.18);

    /* Tipografía */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Espacio */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
    --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 40px; --space-10: 48px;

    /* Radios, sombras, transiciones, armazón */
    --radius-control: 6px;
    --radius-panel:   8px;
    --radius-pill:    999px;
    --shadow-overlay: 0 10px 30px rgba(16, 24, 40, 0.18);
    --transition-fast: 150ms;
    --sidebar-width:  256px;
    --topbar-height:  60px;

    /* Módulo: el tono propio va en --mod-accent */
    --mod-color:  var(--smo-blue); /* OBSOLETO: migrar en UI-0xx — botones y activos usan siempre --smo-blue */
    --mod-accent: var(--text-3);

    /* OBSOLETO: migrar en UI-0xx — alias de las variables anteriores hacia los tokens v1.1 */
    --brand:          var(--smo-blue);
    --brand-dark:     var(--smo-blue-hover);
    --brand-light:    var(--selected-bg);
    --border-light:   var(--row-divider);
    --text-primary:   var(--text);
    --text-secondary: var(--text-2);
    --text-muted:     var(--text-3);
    --header-h:       var(--topbar-height);
    --header-bg:      var(--surface);
    --header-border:  var(--border);
    --font:           var(--font-sans);
    --font-size:      14px;
    --line-height:    1.5;
    --radius-sm:      var(--radius-control);
    --radius:         var(--radius-panel);
    --radius-lg:      var(--radius-panel);
    --radius-xl:      var(--radius-panel);
    --shadow-sm:      none;
    --shadow:         none;
    --shadow-lg:      var(--shadow-overlay);

    /* Estados (alias usados por reglas anteriores: alertas, badges, botones) */
    --success:    #146C3A;
    --success-bg: #F1FAF4;
    --success-bd: #BDE5CB;
    --warning:    #7A4F00;
    --warning-bg: #FFF3DC;
    --warning-bd: #F0D9A8;
    --danger:     #A3231F;
    --danger-bg:  #FDF3F2;
    --danger-bd:  #F1C4C2;
    --info:       #0A3E80;
    --info-bg:    #F2F7FD;
    --info-bd:    #BFD3EE;

    /* ===== UI-002P: menú lateral claro ===== */
    --sidebar-bg:       var(--surface);
    --sidebar-text:     var(--text);
    --sidebar-text-act: var(--smo-blue);
    --sidebar-hover:    var(--row-hover);
    --sidebar-active:   var(--selected-bg);
}

/* ═══════════════════════════════════════════════════════════
   2. RESET Y BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

/* ===== UI-001: base ===== */
body {
    font-family: var(--font-sans);
    font-size:   14px;
    line-height: 1.5;
    color:       var(--text);
    background:  var(--bg);
    min-height:  100vh;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* Sin color global: varios h1 heredan blanco sobre fondos oscuros propios (p. ej. .hero de tickets/estadisticas.php).
   El azul marino del título de página lo aplica .page-header h1. */
h1 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 18px; line-height: 1.3;  font-weight: 600; }

a { color: var(--smo-blue); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--smo-blue-hover); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

img { max-width: 100%; display: block; }

.section-label { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.text-help     { font-size: 13px; line-height: 1.45; color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════
   3. LAYOUT PRINCIPAL
══════════════════════════════════════════════════════════════ */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
/* ===== UI-002P: menú lateral claro de 256 px ===== */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--font-sans);
}

.sidebar-brand {
    min-height: var(--topbar-height);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
}

/* Símbolo del logotipo (img/logo_surti.png recortado al ícono) */
.sidebar-logo {
    width: 32px;
    height: 30px;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}
.sidebar-logo img {
    display: block;
    height: 30px;
    width: auto;
    max-width: none;
}

.sidebar-brand-text { min-width: 0; line-height: 1.2; }
.sidebar-brand-text h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--smo-navy);
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0;
}
.sidebar-brand-text span {
    font-size: 12px;
    color: var(--text-2);
}

/* OBSOLETO: el armazón ya no muestra el ícono del módulo ($mod_icon) */
.sidebar-brand-icon { display: none; }

.sidebar-back {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 8px 0;
    padding: 0 12px;
    height: 36px;
    border-radius: var(--radius-control);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}
.sidebar-back:hover { background: var(--row-hover); color: var(--smo-blue); }
.sidebar-back i { font-size: 12px; }

/* Etiqueta del módulo con el cuadro --mod-accent */
.sidebar-module {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    flex-shrink: 0;
}
.sidebar-module-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-section {
    padding: 8px 0 0;
    flex: 0 0 auto;
}

.sidebar-section-label {
    padding: 8px 20px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }

.sidebar-nav a,
.sidebar-nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    color: var(--sidebar-text);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: var(--radius-control);
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav a:hover,
.sidebar-nav button:hover {
    background: var(--sidebar-hover);
    color: var(--text);
}

.sidebar-nav a:focus-visible,
.sidebar-back:focus-visible,
.sidebar-logout:focus-visible,
.sidebar-close-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.sidebar-nav a.active,
.sidebar-nav a[aria-current="page"] {
    background: var(--sidebar-active);
    color: var(--sidebar-text-act);
    font-weight: 600;
}

.sidebar-nav i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    color: var(--text-3);
}

.sidebar-nav a.active i,
.sidebar-nav a[aria-current="page"] i { color: var(--smo-blue); }

/* OBSOLETO: el componente ya no imprime separadores entre grupos */
.sidebar-divider {
    height: 1px;
    background: var(--divider);
    margin: 8px 0;
}

.sidebar-footer {
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid var(--divider);
    flex-shrink: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--selected-bg);
    display: flex; align-items: center; justify-content: center;
    color: var(--smo-blue); font-weight: 600; font-size: 12px;
    flex-shrink: 0;
}

.sidebar-user-info { min-width: 0; flex: 1; }

.sidebar-user-info .u-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-info .u-role {
    font-size: 12px;
    color: var(--text-2);
}

/* Cerrar sesión (antes style="" + onmouseover/onmouseout) */
.sidebar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-control);
    color: var(--text-3);
    font-size: 14px;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-logout:hover { background: var(--row-hover); color: var(--smo-blue); }

/* ── Contenido principal ─────────────────────────────────── */
.app-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* ── Top bar ─────────────────────────────────────────────── */
/* ===== UI-002P: barra superior de 60 px ===== */
.topbar {
    height: var(--topbar-height);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0; z-index: 50;
    gap: 16px;
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Ruta: Portal › Módulo › Opción */
.topbar-breadcrumb { min-width: 0; }
.topbar-breadcrumb ol {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--text-2);
    min-width: 0;
    white-space: nowrap;
}
.topbar-breadcrumb li { overflow: hidden; text-overflow: ellipsis; }
.topbar-breadcrumb li + li::before {
    content: '/';
    margin: 0 8px;
    color: var(--text-3);
}
.topbar-breadcrumb a { color: var(--text-2); text-decoration: none; }
.topbar-breadcrumb a:hover { color: var(--smo-blue); }
.topbar-breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }
.topbar-breadcrumb li[hidden] { display: none; }

/* OBSOLETO: el componente ya no imprime título/subtítulo (se usan en la ruta) */
.topbar-titles { display: flex; flex-direction: column; min-width: 0; }
.topbar-title { font-size: 14px; font-weight: 600; color: var(--text); }
.topbar-subtitle { font-size: 12px; color: var(--text-2); }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Buscador solo visual (UI-002P) */
.topbar-search {
    position: relative;
    width: clamp(320px, 28vw, 380px);
}
.topbar-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 13px;
    pointer-events: none;
}
.topbar-search .form-control {
    height: 36px;
    padding-left: 34px;
    background: var(--surface-2);
}

.topbar #sidebarToggle {
    display: none;
}

/* ☰ de respaldo que crea app-shell.js en páginas sin topbar (solo < 900 px) */
.shell-fab-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 98;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    font-size: 16px;
    cursor: pointer;
}
.shell-fab-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* OBSOLETO: ☰ propio de Marketing (alterna #sidebar, que no existe); lo sustituye el ☰ flotante */
body.has-shell-fab .mobile-toggle { display: none !important; }

/* ── Page ────────────────────────────────────────────────── */
.page {
    flex: 1;
    padding: 28px;
}

/* ===== UI-001: encabezado de página ===== */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header h1,
.page-header-left h1 {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--smo-navy);
    letter-spacing: -0.01em;
}

.page-header p,
.page-header-left p {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-2);
    margin-top: 4px;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===== UI-001: botones ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    filter: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn i, .btn svg { font-size: 16px; width: 16px; flex-shrink: 0; }

.btn-primary {
    background: var(--smo-blue);
    border-color: var(--smo-blue);
    color: #fff;
    font-weight: 600;
    padding: 0 16px;
    box-shadow: none;
}
.btn-primary:hover  { background: var(--smo-blue-hover);  border-color: var(--smo-blue-hover);  color: #fff; filter: none; box-shadow: none; transform: none; }
.btn-primary:active { background: var(--smo-blue-active); border-color: var(--smo-blue-active); color: #fff; }

.btn-secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: #2B3747;
}
.btn-secondary:hover  { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.btn-secondary:active { background: var(--row-divider); }

/* OBSOLETO: migrar en UI-0xx — no está en el sistema visual; se re-tematiza como éxito sobrio */
.btn-success {
    background: var(--surface);
    border-color: var(--success-bd);
    color: var(--success);
}
.btn-success:hover { background: var(--success-bg); color: var(--success); }

.btn-danger {
    background: var(--surface);
    border-color: #F1C4C2;
    color: #A3231F;
}
.btn-danger:hover  { background: var(--danger-bg); border-color: #F1C4C2; color: #A3231F; }

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--smo-blue);
}
.btn-ghost:hover { background: var(--selected-bg); color: var(--smo-blue-hover); }

.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] {
    background: #EEF1F5;
    border-color: var(--border);
    color: #6B7787;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
}
.btn-icon.btn-sm { width: 32px; height: 32px; }

/* ═══════════════════════════════════════════════════════════
   5. TARJETAS
══════════════════════════════════════════════════════════════ */
/* ===== UI-001: tarjetas ===== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: none;
}

.card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-header h2, .card-header h3 {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--text);
}

.card-body { padding: 20px; }
.card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--divider);
    background: var(--surface);
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}

/* Stat cards */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.stat-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-info .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1;
}

.stat-info .stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ===== UI-001: franja de indicadores ===== */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    margin-bottom: 20px;
}
.stat-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-strip__item { padding: 16px 20px; min-width: 0; }
.stat-strip__item + .stat-strip__item { border-left: 1px solid var(--divider); }
.stat-strip__label { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.stat-strip__value { font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--text); margin-top: 4px; }
.stat-strip__value.is-warning { color: #7A4F00; }
.stat-strip__value.is-danger  { color: #A3231F; }

/* ═══════════════════════════════════════════════════════════
   6. TABLAS
══════════════════════════════════════════════════════════════ */
/* ===== UI-001: tablas ===== */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-panel);
    border: 1px solid var(--border);
    background: var(--surface);
}
.table-card .table-wrap { border: none; border-radius: 0; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.4;
}

thead th {
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--divider);
    white-space: nowrap;
}

tbody tr {
    border-bottom: 1px solid var(--row-divider);
    transition: background-color var(--transition-fast);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--row-hover); }
tbody td {
    padding: 11px 16px;
    color: var(--text);
    vertical-align: middle;
}

/* Tabla del sistema visual (código nuevo) */
.table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; }
.table th { background: var(--surface-2); color: var(--text-2); font-weight: 600; padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.table td { padding: 11px 16px; color: var(--text); border-bottom: 1px solid var(--row-divider); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--row-hover); }
.table .num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .col-id a { font-weight: 600; color: var(--smo-blue); }
.table .col-actions { width: 48px; text-align: right; }

.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    overflow: hidden;
    margin-bottom: 20px;
}

.table-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
}
.table-toolbar .search-input { width: 300px; max-width: 100%; height: 36px; }
.table-toolbar .btn { height: 36px; }
.table-toolbar__end { margin-left: auto; }

.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--divider);
    font-size: 13px;
    color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════
   7. FORMULARIOS
══════════════════════════════════════════════════════════════ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-full   { grid-column: 1 / -1; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ===== UI-001: campos de formulario ===== */
.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.form-label .req { color: #A3231F; margin-left: 2px; }

.form-control {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    width: 100%;
}

.form-control:focus {
    border-color: var(--smo-blue);
    box-shadow: inset 0 0 0 1px var(--smo-blue), var(--focus-ring);
    background: var(--surface);
}

.form-control::placeholder { color: var(--text-3); }

.form-control[aria-invalid="true"] { border-color: #D93A35; }

textarea.form-control { height: auto; padding: 10px 12px; resize: vertical; min-height: 90px; }

select.form-control { cursor: pointer; }
/* MKT-001L: con altura fija el select no admite padding vertical (Chrome y Safari recortan el texto al
   content-box si una hoja local se lo agrega); queda centrado con line-height normal en todos los navegadores. */
select.form-control:not([multiple]):not([size]) { padding-top: 0; padding-bottom: 0; line-height: normal; }

/* Campo del sistema visual (código nuevo): .field > label + .form-control + .field-help / .field-error */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; font-weight: 500; color: var(--text); }
.field-help  { font-size: 12px; line-height: 1.3; color: var(--text-2); }
.field-error { font-size: 12px; line-height: 1.3; color: #A3231F; }
.field.has-error .form-control { border-color: #D93A35; }

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   8. BADGES Y ESTATUS
══════════════════════════════════════════════════════════════ */
/* ===== UI-001: estatus (píldora con punto de 6 px) ===== */
.status, .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    white-space: nowrap;
    border: none;
}
.status:is(.status-success, .status-info, .status-neutral, .status-warning, .status-danger, .status-partial)::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-dot, #8C97A6);
    flex-shrink: 0;
}

/* Clases nuevas (.status-*) y clases existentes agrupadas por equivalencia (sistema visual 10.2) */
.status-success, .badge-green, .badge-success, .badge-sent, .badge-entregado
    { background: #E4F6EB; color: #146C3A; --status-dot: #25D366; }
.status-info, .badge-blue, .badge-info, .badge-programmed, .badge-embarcado
    { background: #E6EFFA; color: #0A4A9C; --status-dot: #0055B8; }
.status-neutral, .badge-gray, .badge-secondary, .badge-neutral, .badge-default, .badge-draft
    { background: #EEF1F5; color: #3E4A5A; --status-dot: #8C97A6; border: none; }
.status-warning, .badge-amber, .badge-warning, .badge-pendiente, .badge-paused, .badge-orange
    { background: #FFF3DC; color: #7A4F00; --status-dot: #E59A00; }
.status-danger, .badge-red, .badge-danger, .badge-cancelled
    { background: #FDE8E7; color: #A3231F; --status-dot: #D93A35; }
.status-partial, .badge-parcial, .badge-violet
    { background: #EDEBFB; color: #463C9E; --status-dot: #6D5FD8; }
/* OBSOLETO: migrar en UI-0xx — sin equivalente en el sistema visual */
.badge-teal { background: #E4F4F2; color: #1F6B63; }

/* Badges contextuales de módulos */
.badge-status { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   9. ALERTAS
══════════════════════════════════════════════════════════════ */
/* ===== UI-001: avisos ===== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-control);
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 16px;
    border: 1px solid;
}

.alert i { margin-top: 2px; flex-shrink: 0; }
.alert strong, .alert-title { font-weight: 600; }

.alert-info    { background: #F2F7FD; border-color: #BFD3EE; color: #0A3E80; }
.alert-success { background: #F1FAF4; border-color: #BDE5CB; color: #146C3A; }
.alert-error, .alert-danger { background: #FDF3F2; border-color: #F1C4C2; color: #A3231F; }
/* OBSOLETO: migrar en UI-0xx — el sistema visual no define aviso de advertencia */
.alert-warning { background: var(--warning-bg); border-color: var(--warning-bd); color: var(--warning); }

/* ═══════════════════════════════════════════════════════════
   10. COLORES POR MÓDULO
══════════════════════════════════════════════════════════════ */
/* ===== UI-001: color de módulo (solo --mod-accent; --mod-color es la marca, ver :root) ===== */
.mod-licitaciones { --mod-accent: #5A63B0; }
.mod-calidad      { --mod-accent: #2E7DAF; }
.mod-rrhh         { --mod-accent: #B7791F; }
.mod-tecnologias  { --mod-accent: #5B6B7F; }
.mod-tickets      { --mod-accent: #7A5AB8; }
.mod-marketing    { --mod-accent: #B04A7A; }
.mod-cotizador    { --mod-accent: #3D8B5F; }
.mod-ventas       { --mod-accent: #2F8F83; }
.mod-compras      { --mod-accent: #2C86A0; }
.mod-admin        { --mod-accent: #B4443B; }
.mod-cursos       { --mod-accent: #3A6EA5; }
.mod-perfil       { --mod-accent: #6A5ACD; }
.mod-ia           { --mod-accent: #5C6F96; }
.mod-finanzas     { --mod-accent: #8A6D3B; }
.mod-almacen      { --mod-accent: #6F7F5A; }
.mod-juridico     { --mod-accent: #7A5C3E; }
/* UI-002P: portal (sin color de módulo propio) */
.mod-portal       { --mod-accent: var(--smo-blue); }

/* Cuadro de 8 px del color de módulo (menú lateral, portal) */
.mod-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--mod-accent);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   11. COMPONENTES DE VISTA DEPARTAMENTAL
══════════════════════════════════════════════════════════════ */
/* Welcome card estándar */
.welcome-card {
    background: var(--surface);
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    max-width: 960px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}
.welcome-card h2 {
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.welcome-card h2 i { color: var(--mod-color, var(--brand)); }
.welcome-card .description { color: var(--text-secondary); line-height: 1.7; }
.welcome-card .description p { margin-bottom: 10px; }
.welcome-card .description p:last-child { margin-bottom: 0; }

/* Quick actions estándar */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 20px;
}
.quick-action {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 18px 14px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s;
    text-align: center;
    cursor: pointer;
    display: block;
}
.quick-action:hover {
    border-color: var(--mod-color, var(--brand));
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: var(--text-primary);
    transform: translateY(-2px);
}
.quick-action i {
    font-size: 1.4rem;
    color: var(--mod-color, var(--brand));
    margin-bottom: 10px;
    display: block;
}
.quick-action h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 3px;
}
.quick-action p {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* KPI cards universales (compatibilidad .lic-kpi, .kpi-card) */
.lic-kpis, .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.lic-kpi, .kpi-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.lic-kpi::before, .kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--kc, var(--mod-color, var(--brand)));
}
.lic-kpi .kl, .kpi-card .kl {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.lic-kpi .kv, .kpi-card .kv {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}
.lic-kpi .ks, .kpi-card .ks {
    font-size: .75rem;
    color: var(--text-muted);
}

/* Toolbars y filtros de módulo (.lic-toolbar, .toolbar, .filter-bar) */
.lic-toolbar, .toolbar, .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.lic-toolbar select,
.lic-toolbar input[type="text"],
.lic-toolbar input[type="date"],
.lic-toolbar input[type="search"],
.toolbar select,
.toolbar input,
.filter-bar select,
.filter-bar input {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    color: var(--text-primary);
    background: #f8fafc;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.lic-toolbar select:focus,
.lic-toolbar input:focus,
.toolbar select:focus,
.toolbar input:focus,
.filter-bar select:focus,
.filter-bar input:focus {
    border-color: var(--mod-color, var(--brand));
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.lic-toolbar label,
.toolbar label,
.filter-bar label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
    margin-bottom: 4px;
}

/* Botones específicos de submódulos */
.lic-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
    font-family: inherit;
}
.lic-btn-primary { background: var(--mod-color, var(--brand)); color: #fff; }
.lic-btn-primary:hover { filter: brightness(0.92); color: #fff; }
.lic-btn-secondary { background: var(--bg); color: var(--text-primary); border: 1px solid var(--border); }
.lic-btn-secondary:hover { background: var(--border); }
.lic-btn-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bd); }
.lic-btn-danger:hover { background: var(--danger-bd); }

.btn-custom {
    padding: 9px 18px;
    border-radius: var(--radius);
    font-weight: 600;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}
.btn-primary-custom { background: var(--mod-color, var(--brand)); color: white; }
.btn-primary-custom:hover { filter: brightness(0.92); color: white; }
.btn-outline-custom { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); }
.btn-outline-custom:hover { background: var(--bg); }
.form-control-modern {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: var(--font);
    transition: 0.2s;
    background: #f8fafc;
}
.form-control-modern:focus {
    border-color: var(--mod-color, var(--brand));
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    background: var(--surface);
}

/* Tablas responsivas unificadas */
.lic-table-wrap, .card-table {
    background: var(--surface);
    border-radius: var(--radius-panel);
    border: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
    margin-bottom: 24px;
}
.lic-table, .table-custom {
    width: 100%;
    border-collapse: collapse;
    font-size: .83rem;
    color: var(--text-primary);
}
.lic-table thead tr, .table-custom th {
    background: var(--bg);
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
}
.lic-table tbody tr, .table-custom td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.lic-table tbody tr:last-child, .table-custom tr:last-child td {
    border-bottom: none;
}
.lic-table tbody tr:hover, .table-custom tr:hover td {
    background: #f8fafc;
}

/* Paginación licitaciones */
.lic-pag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: .82rem;
    color: #6b7280;
}
.lic-pag a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    color: #374151;
    font-size: .82rem;
    transition: all .12s;
}
.lic-pag a:hover { background: #f1f5f9; border-color: #d1d5db; }
.lic-pag a.active {
    background: var(--mod-color, var(--brand));
    color: #fff;
    border-color: var(--mod-color, var(--brand));
}

/* Animaciones y loaders */
#content-area { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.75);
    z-index: 150;
    justify-content: center;
    align-items: center;
}
.loading-overlay.show { display: flex; }
.loading-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--border);
    border-top-color: var(--mod-color, var(--brand));
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Botón cerrar sidebar móvil */
.sidebar-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-control);
    color: var(--text-2);
    font-size: 16px;
    cursor: pointer;
    margin-left: auto;
}
.sidebar-close-btn:hover { background: var(--row-hover); color: var(--text); }

/* Overlay de sidebar móvil (UI-002P: fondo oscuro sin blur) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.sidebar-overlay.open {
    display: block;
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   12. UTILIDADES
══════════════════════════════════════════════════════════════ */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.mt-2   { margin-top: 8px; }  /* UI-RH2 */
.mt-3   { margin-top: 12px; } /* UI-RH2 */
.mt-4   { margin-top: 16px; }
.mt-6   { margin-top: 24px; }
.mb-4   { margin-bottom: 16px; }
.mb-6   { margin-bottom: 24px; }
.w-full { width: 100%; }
.text-sm    { font-size: 0.82rem; }
.text-muted { color: var(--text-muted); }
.font-600   { font-weight: 600; }
.font-700   { font-weight: 700; }

/* Colores de icono para stat cards */
.ic-blue   { background: #dbeafe; color: #2563eb; }
.ic-green  { background: #dcfce7; color: #16a34a; }
.ic-amber  { background: #fef3c7; color: #d97706; }
.ic-red    { background: #fee2e2; color: #dc2626; }
.ic-violet { background: #ede9fe; color: #7c3aed; }
.ic-teal   { background: #ccfbf1; color: #0f766e; }
.ic-pink   { background: #fce7f3; color: #db2777; }
.ic-slate  { background: #f1f5f9; color: #475569; }
.ic-orange { background: #ffedd5; color: #ea580c; }
.ic-indigo { background: #e0e7ff; color: #4338ca; }
.ic-cyan   { background: #cffafe; color: #0e7490; }

/* Search bar */
.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-bar:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    background: var(--surface);
}

.search-bar i    { color: var(--text-muted); font-size: 0.85rem; }
.search-bar input {
    border: none; background: none; outline: none;
    font-family: var(--font); font-size: 0.875rem;
    color: var(--text-primary);
    width: 220px;
}
.search-bar input::placeholder { color: var(--text-muted); }

/* ===== UI-001: modales ===== */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(16, 24, 40, 0.45);
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.modal-overlay[hidden] { display: none; }

.modal {
    background: var(--surface);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-overlay);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-header h2, .modal-header h3 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text);
}

.modal-body   { padding: 20px 24px; }
.modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--divider);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ===== UI-001: estado vacío ===== */
.empty-state {
    text-align: center;
    padding: 40px 24px;
    color: var(--text-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-panel);
    background: var(--surface);
}

.empty-state i {
    font-size: 28px;
    color: var(--text-3);
    margin: 0 auto 12px;
    display: block;
}

.empty-state h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.empty-state p {
    font-size: 13px;
    line-height: 1.45;
    max-width: 360px;
    margin: 0 auto 8px;
}

.table-card .empty-state { border: none; border-radius: 0; }

/* ===== UI-001: paginación ===== */
.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination a, .pagination span, .pagination button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-control);
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 500;
    color: var(--text-2);
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pagination a:hover, .pagination button:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.pagination .active, .pagination [aria-current="page"] { background: var(--selected-bg); color: var(--smo-blue); border-color: var(--smo-blue); font-weight: 600; }


/* ===== UI-001: rejillas ===== */
.layout-grid { display: grid; gap: 20px; }
.layout-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layout-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.layout-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Acción primaria fija abajo en celular (ver media query de 600 px) */
.sticky-action { display: contents; }

/* Tooltip */
[data-tooltip] { position: relative; cursor: default; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: var(--text-primary); color: white;
    font-size: 0.72rem; font-weight: 500;
    padding: 4px 8px; border-radius: var(--radius-sm);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity 0.2s;
    z-index: 999;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   UI-002P: VISTA PRINCIPAL (portal)
══════════════════════════════════════════════════════════════ */
.portal-header { margin-bottom: 24px; }
.portal-header h1 {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--smo-navy);
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}
.portal-header p { font-size: 13px; color: var(--text-2); margin: 0; font-variant-numeric: tabular-nums; }

.portal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
.portal-main { min-width: 0; }
.portal-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Encabezado de área: una sola vez por grupo */
.portal-area + .portal-area { margin-top: 24px; }
.portal-area-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin: 0 0 8px;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.module-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--transition-fast);
    min-width: 0;
}
.module-card:hover { border-color: var(--border-strong); text-decoration: none; color: var(--text); }
.module-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.module-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-control);
    background: var(--selected-bg);
    color: var(--smo-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.module-card__body { min-width: 0; }
.module-card__name, .module-card__desc { display: block; }
.module-card__name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); }
.module-card__desc { font-size: 13px; line-height: 1.4; color: var(--text-2); margin-top: 2px; }

/* Columna derecha: Mis tickets abiertos */
.ticket-mini-list { list-style: none; margin: 0; padding: 0; }
.ticket-mini-list li { border-top: 1px solid var(--row-divider); }
.ticket-mini-list li:first-child { border-top: none; }
.ticket-mini-list a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 20px;
    color: var(--text);
    text-decoration: none;
}
.ticket-mini-list a:hover { background: var(--row-hover); }
.ticket-mini-list .ticket-mini-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-mini-list .ticket-mini-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.portal-aside .card-header .btn { height: 32px; }
.portal-aside .empty-state { border: none; padding: 24px 16px; }

@media (max-width: 1100px) {
    .portal-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .module-grid { grid-template-columns: minmax(0, 1fr); }
    .portal-header h1 { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   UI-RH1: MODO EMBEBIDO Y RECURSOS HUMANOS
══════════════════════════════════════════════════════════════ */
/* iframe de un hub (rh_content_*.php). La altura la ajusta el hub con smo:embed-height */
.content-frame {
    display: block;
    width: 100%;
    min-height: 480px;
    border: 0;
    background: transparent;
}

/* Página embebida: sin menú ni barra propios, fondo --bg, sin margen extra */
body.is-embed { background: var(--bg); min-height: 0; }
body.is-embed .page { padding: 0 0 8px; }
.is-embed .modal-overlay { align-items: flex-start; padding-top: var(--embed-modal-top, 24px); }

/* Página embebible abierta sola: "← Módulo" hacia su hub */
.embed-back { margin: 0 0 12px -12px; }

.page--narrow { max-width: 720px; margin: 0 auto; }
.page--wide   { max-width: 1200px; margin: 0 auto; }
body:not(.is-embed) .page--narrow,
body:not(.is-embed) .page--wide { width: 100%; }

.section-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 24px 0 12px;
}
.section-title:first-child { margin-top: 0; }

.alert ul { margin: 4px 0 0 18px; padding: 0; }

/* Bloques ocultos con [hidden] aunque su clase defina display */
.field[hidden], .form-group[hidden], .modal-section[hidden] { display: none; }
fieldset.form-group { border: 0; padding: 0; margin: 0; min-width: 0; }
/* Formulario en columna con separación uniforme entre bloques */
.form-stack > * + * { margin-top: 20px; }
.empty-state .form-actions { justify-content: center; }

/* Toolbar con filtros "Campo: Valor ▾" */
.table-toolbar .form-control { height: 36px; width: auto; min-width: 160px; }
.table-toolbar .search-input.form-control { width: 300px; }

/* Acciones por fila (no renombrar: .actions, .btn-view, .btn-create-user, .btn-disabled) */
.table .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-disabled { pointer-events: none; }

/* Estatus de empleado (JS: status-activo / status-inactivo) */
.status-activo   { background: #E4F6EB; color: #146C3A; --status-dot: #25D366; }
.status-inactivo { background: #EEF1F5; color: #3E4A5A; --status-dot: #8C97A6; }
.status:is(.status-activo, .status-inactivo)::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-dot);
    flex-shrink: 0;
}
.status:is(.status-activo, .status-inactivo) > i { display: none; }

/* Modal que el JS abre con .is-visible (en lugar de [hidden]) */
.modal-overlay--toggle:not(.is-visible) { display: none; }
body.modal-open { overflow: hidden; }
.modal--wide { max-width: 720px; }
.modal-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); margin: 0 0 2px; }
.modal-header .modal-heading { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* Ficha en modal */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 16px;
}
.detail-grid + .detail-grid { margin-top: 12px; }
.detail-item span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
}
.detail-item strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.modal-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--divider); }
.modal-section h4 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.modal-section p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }

/* Píldoras (JS: req-chip, req-empty, doc-pill, doc-pill-muted) */
.req-chips, .doc-modal-list, .doc-existing-list { display: flex; flex-wrap: wrap; gap: 6px; }
.req-chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: var(--radius-pill);
    background: #EEF1F5; color: #3E4A5A; font-size: 12px; font-weight: 600;
}
.req-empty { color: var(--text-2); font-size: 13px; }
.doc-pill {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 0 10px; border-radius: var(--radius-pill);
    background: var(--selected-bg); color: var(--smo-blue);
    font-size: 12px; font-weight: 600; text-decoration: none;
}
.doc-pill a { color: inherit; text-decoration: none; }
.doc-pill a:hover { text-decoration: underline; }
.doc-pill button {
    border: none; background: transparent; color: #A3231F;
    font-size: 14px; line-height: 1; cursor: pointer; padding: 0 0 0 2px;
}
.doc-pill-muted { background: #EEF1F5; color: var(--text-2); cursor: default; }

/* Expediente: carga de documentos (alta/edición) */
.upload-card {
    padding: 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-panel);
    background: var(--surface-2);
}
.doc-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.doc-field { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.doc-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.doc-input-row { display: flex; gap: 8px; align-items: center; }
.doc-input-row input[type=file] { flex: 1; min-width: 0; font-size: 13px; }
.doc-remove { display: none; } /* app JS lo muestra con style.display cuando hay más de un campo */
.doc-existing-header { margin: 12px 0 6px; font-size: 13px; color: var(--text-2); }
.add-doc-btn { margin-top: 12px; }

/* Requerimientos como casillas en píldora */
.chips-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer;
}
.chip-toggle input { accent-color: var(--smo-blue); margin: 0; }
.chip-toggle:has(input:checked) { background: var(--selected-bg); border-color: var(--smo-blue); color: var(--smo-blue); font-weight: 600; }
.chip-toggle:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Lista de movimientos (bajas recientes) */
.timeline { display: flex; flex-direction: column; }
.timeline-item { padding: 12px 0; border-bottom: 1px solid var(--row-divider); }
.timeline-item:first-child { padding-top: 0; }
.timeline-item:last-child { border-bottom: none; padding-bottom: 0; }
.timeline-item strong { display: block; font-size: 14px; font-weight: 600; }
.timeline-item span { display: block; font-size: 12px; color: var(--text-2); }
.timeline-item p { margin: 6px 0 0; font-size: 13px; color: var(--text); }
.timeline-item small { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); }

/* Escala de calificación 1–10 (encuesta) */
.rating-title { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.rating-desc { font-size: 13px; color: var(--text-2); margin: 0 0 12px; }
.rating-options { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.rating-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-option label {
    display: flex; align-items: center; justify-content: center;
    height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-control);
    background: var(--surface); color: var(--text-2); font-weight: 600; cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.rating-option label:hover { border-color: var(--smo-blue); color: var(--smo-blue); }
.rating-option input:checked + label { background: var(--smo-blue); border-color: var(--smo-blue); color: #fff; }
.rating-option input:focus-visible + label { box-shadow: var(--focus-ring); }
.rating-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--text-2); }

/* Franja de 6 indicadores en dos filas de 3 */
.stat-strip--3 .stat-strip__item:nth-child(3n+1) { border-left: none; }
.stat-strip--3 .stat-strip__item:nth-child(n+4) { border-top: 1px solid var(--divider); }
.stat-strip__note { font-size: 12px; color: var(--text-2); margin-top: 2px; }

.chart-box { position: relative; width: 100%; }

@media (max-width: 900px) {
    .stat-strip--3 .stat-strip__item:nth-child(3n+1) { border-left: 1px solid var(--divider); }
    .stat-strip--3 .stat-strip__item:nth-child(odd) { border-left: none; }
    .stat-strip--3 .stat-strip__item:nth-child(n+3) { border-top: 1px solid var(--divider); }
}
@media (max-width: 600px) {
    .rating-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .rating-labels { display: none; }
    .table-toolbar .form-control,
    .table-toolbar .search-input.form-control { width: 100%; }
    .embed-back { margin-left: -8px; }
}

/* ═══════════════════════════════════════════════════════════
   UI-RH2: PSICOMÉTRICOS INTERNOS
══════════════════════════════════════════════════════════════ */
.card--pad { padding: 20px; }
.card--pad + .card--pad, .card--pad + .table-card, .table-card + .card--pad { margin-top: 16px; }
.card-title { font-size: 14px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: var(--text); }
.inline-form { display: inline-flex; margin: 0; }

/* Filas que el JS despliega con .show (no renombrar: baja-row, reabrir-row, campo-camara, show) */
.baja-row:not(.show), .reabrir-row:not(.show) { display: none !important; }
.baja-row.show, .reabrir-row.show { display: table-row; }
.campo-camara:not(.show) { display: none; }
.row-form {
    display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
    padding: 12px; background: var(--surface-2); border: 1px solid var(--divider); border-radius: var(--radius-control);
}
.row-form .field { min-width: 180px; }
.row-form .field--grow { flex: 1; min-width: 220px; }

.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.checkbox-row input { accent-color: var(--smo-blue); margin: 0; }

/* Formularios en línea del contenido de pruebas */
.form-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; align-items: end; }
.form-row-3 .span-2 { grid-column: span 2; }
.baremo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }

/* Contenido de una prueba: dimensión → preguntas → opciones (no renombrar: el include de imagen los usa) */
.dimension-card { border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 16px; background: var(--surface); }
.dimension-card + .dimension-card { margin-top: 16px; }
.dimension-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dimension-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.dimension-head .clave { color: var(--text-2); font-size: 12px; font-weight: 400; font-family: ui-monospace, Menlo, monospace; }
.dimension-head p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.pregunta-item { border: 1px solid var(--divider); border-radius: var(--radius-control); padding: 12px 14px; background: var(--surface-2); }
.pregunta-item + .pregunta-item { margin-top: 10px; }
.pregunta-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.pregunta-head__body { flex: 1; min-width: 220px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pregunta-head .enunciado { flex-basis: 100%; font-weight: 600; font-size: 14px; }
.opciones-list { margin-top: 10px; }
.opcion-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.opcion-item:last-child { border-bottom: none; }
.opcion-item__texto { flex: 1; min-width: 160px; }
.opcion-item__valor { color: var(--text-2); font-variant-numeric: tabular-nums; }
.actions-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mini-form { margin-top: 10px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-control); background: var(--surface); }
.empty-note { color: var(--text-2); font-size: 13px; padding: 8px 0; margin: 0; }
.reactivo-img { max-width: 160px; max-height: 120px; border-radius: var(--radius-control); border: 1px solid var(--border); }

/* Resultado */
.foto-verificacion { display: block; max-width: 220px; border-radius: var(--radius-panel); border: 1px solid var(--border); }
.chart-box--radar { max-width: 480px; margin: 0 auto; }
.chart-box--short canvas { max-height: 280px; }
details.auditoria summary { cursor: pointer; color: var(--smo-blue); font-size: 13px; font-weight: 600; padding: 2px 0; }
details.auditoria[open] summary { margin-bottom: 12px; }
.sin-dato { color: var(--text-2); font-style: italic; }
.th-sort { color: var(--text-2); text-decoration: none; white-space: nowrap; }
.th-sort:hover { color: var(--smo-blue); }

/* Vista previa de una prueba (como la vería el candidato) */
.preview-banner { background: #F2F7FD; border-bottom: 1px solid #BFD3EE; color: #0A3E80; padding: 10px 16px; font-size: 13px; text-align: center; }
.dimension-block + .dimension-block { margin-top: 24px; }
.dimension-block h2 { font-size: 16px; font-weight: 600; padding-bottom: 8px; border-bottom: 2px solid var(--smo-blue); margin: 0 0 12px; }
.pregunta-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 16px 18px; }
.pregunta-card + .pregunta-card { margin-top: 12px; }
.pregunta-card .enunciado { font-weight: 600; margin-bottom: 10px; }
.opcion-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--text-2); }

@media (max-width: 900px) {
    .baremo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .form-row-3 { grid-template-columns: minmax(0, 1fr); }
    .form-row-3 .span-2 { grid-column: auto; }
    .baremo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .row-form .field, .row-form .field--grow { min-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   UI-TK: TICKETS
══════════════════════════════════════════════════════════════ */
/* Utilidad usada por el JS del modal de encuesta (no renombrar) */
.d-none { display: none !important; }

/* Página pública con logotipo arriba (encuesta de servicio) */
.public-brand { display: flex; justify-content: center; padding: 20px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.public-brand img { display: block; height: 38px; width: auto; }

.rating-options--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rating-options--4 .rating-option label { height: 44px; padding: 0 8px; text-align: center; font-size: 13px; }

/* Historial de notas de un ticket */
.ticket-notas { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--text-2); }
.ticket-notas li { padding: 4px 0; border-bottom: 1px dashed var(--divider); overflow-wrap: anywhere; }
.ticket-notas li:last-child { border-bottom: none; }

/* Detalle de encuesta en el modal de la bandeja */
.survey-question { padding: 10px 0; border-bottom: 1px solid var(--row-divider); }
.survey-question:last-child { border-bottom: none; }
.survey-rating { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.survey-comment { margin-top: 6px; font-size: 13px; color: var(--text); white-space: pre-line; }

/* Filas de estadísticas: etiqueta a la izquierda, valor a la derecha */
.stat-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.progress-bar { height: 6px; margin-top: 6px; border-radius: var(--radius-pill); background: var(--row-divider); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: var(--smo-blue); }
.chart-box--h280 { height: 280px; }

@media (max-width: 600px) {
    .rating-options--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   UI-LOGIN: INICIO DE SESIÓN Y MI PERFIL
══════════════════════════════════════════════════════════════ */
/* Inicio de sesión: 5/12 marca (azul marino sólido) + 7/12 formulario */
.login-layout { display: grid; grid-template-columns: 5fr 7fr; min-height: 100vh; background: var(--surface); }
.login-aside {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8);
    padding: var(--space-10); background: var(--smo-navy); color: #fff;
}
.login-aside-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.login-aside-brand img { height: 40px; width: auto; }
.login-aside-brand span { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.login-aside-title { font-size: 34px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.login-aside-text { margin-top: var(--space-3); max-width: 380px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.login-aside-foot { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.login-main { display: flex; align-items: center; justify-content: center; padding: var(--space-10) var(--space-6); }
.login-box { width: 100%; max-width: 380px; }
.login-box h1 { color: var(--smo-navy); }
.login-sub { margin: var(--space-1) 0 var(--space-6); color: var(--text-2); }
.login-mobile-logo { display: none; height: 38px; width: auto; margin-bottom: var(--space-8); }
.login-help { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--divider); font-size: 13px; color: var(--text-2); }
.btn-block { width: 100%; }

/* Campo con botón dentro (mostrar contraseña) */
.input-action { position: relative; }
.input-action .form-control { padding-right: 48px; }
.input-action .btn-icon { position: absolute; top: 2px; right: 2px; width: 40px; height: calc(100% - 4px); color: var(--text-2); }

/* Mi perfil */
.perfil-datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
.perfil-datos dt { color: var(--text-2); }
.perfil-datos dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.perfil-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Completar perfil: sin menú, solo logotipo, formulario y Cerrar sesión */
.completar-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-3) var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border);
}
.completar-header img { height: 38px; width: auto; }
.completar-main { max-width: 720px; margin: 0 auto; padding: var(--space-8) var(--space-4); }

@media (max-width: 900px) {
    .login-layout { grid-template-columns: minmax(0, 1fr); }
    .login-aside { display: none; }
    .login-mobile-logo { display: block; }
    .login-main { align-items: flex-start; padding: var(--space-9) var(--space-4); }
}
@media (max-width: 600px) {
    .perfil-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .perfil-datos dd + dt { margin-top: 8px; }
    .completar-header { padding: var(--space-3) var(--space-4); }
    .completar-main { padding: var(--space-6) var(--space-4); }
}

/* ═══════════════════════════════════════════════════════════
   UI-INC: INCIDENCIAS INTERNAS (LADO DEL COLABORADOR)
══════════════════════════════════════════════════════════════ */
/* Texto capturado por el usuario: respeta sus saltos de línea */
.texto-multilinea { white-space: pre-line; overflow-wrap: anywhere; color: var(--text); }
.card--pad .texto-multilinea { margin: 0; }
/* Obligatorio en campos .field y separación de un fieldset dentro de .form-stack */
.field > label .req { color: #A3231F; margin-left: 2px; }
.form-stack > * + fieldset.form-group { margin-top: 20px; }

@media (max-width: 600px) {
    /* Espacio para la acción primaria fija abajo */
    .page:has(.sticky-action) { padding-bottom: 80px; }
}

/* ═══════════════════════════════════════════════════════════
   UI-ADM: ADMINISTRACIÓN
══════════════════════════════════════════════════════════════ */
/* Marco de las secciones del hub que muestran otra página en iframe (admin_content/*) */
.admin-frame { overflow: hidden; padding: 0; }
.admin-frame__iframe { height: calc(100vh - 160px); min-height: 480px; }
.text-danger { color: var(--danger); }

/* Bitácora de inicios de sesión (seguridad/lista_logins.php) */
.logins-agente { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.table-footer .pagination { margin: 0; }

@media (max-width: 600px) {
    .logins-agente { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}

/* ═══════════════════════════════════════════════════════════
   UI-TI: TECNOLOGÍAS
══════════════════════════════════════════════════════════════ */
/* Pestañas: [role=tablist].tabs > [role=tab].tabs__tab[aria-selected]; paneles con [hidden] */
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs__tab {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
    border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent;
    font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--smo-blue); border-bottom-color: var(--smo-blue); font-weight: 600; }
.stat-strip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Filas ocultas por los filtros: también en la vista de tarjetas (.table-stack) */
.table tr[hidden] { display: none !important; }
.pagination[hidden] { display: none; }
/* Columna de acciones con varios botones en una fila (la .col-actions del sistema es de 48 px) */
.table .col-acciones { text-align: right; white-space: nowrap; }
.table .acciones-fila { flex-wrap: nowrap; justify-content: flex-end; }
@media (max-width: 600px) {
    .table-stack td.col-acciones { text-align: left; }
    .table-stack .acciones-fila { justify-content: flex-start; flex-wrap: wrap; }
}
.pagination button:disabled { opacity: .5; cursor: default; }
/* Contraseña consultada en accesos: texto monoespaciado y sin desbordar */
.texto-pw { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-2); font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .stat-strip--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-strip--5 .stat-strip__item:nth-child(odd) { border-left: none; }
    .stat-strip--5 .stat-strip__item:nth-child(n+3) { border-top: 1px solid var(--divider); }
}

/* ═══════════════════════════════════════════════════════════
   JUR-001A: AGENDA (includes/agenda/, assets/js/agenda-*.js)
══════════════════════════════════════════════════════════════ */
/* Colores por estado del asunto (mismos tonos que .status-*) */
.agenda-ev--pendiente   { --ev-bg: #E6EFFA; --ev-tx: #0A4A9C; --ev-bd: #0055B8; }
.agenda-ev--seguimiento { --ev-bg: #FDE8E7; --ev-tx: #A3231F; --ev-bd: #D93A35; }
.agenda-ev--atendido    { --ev-bg: #E4F6EB; --ev-tx: #146C3A; --ev-bd: #25D366; }
.agenda-ev--no_atendido { --ev-bg: #FFF3DC; --ev-tx: #7A4F00; --ev-bd: #E59A00; }
.agenda-ev--cancelado   { --ev-bg: #EEF1F5; --ev-tx: #3E4A5A; --ev-bd: #8C97A6; }

.agenda-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.agenda-toolbar__titulo { font-size: 18px; font-weight: 600; color: var(--smo-navy); margin: 0 8px; min-width: 0; }
.agenda-toolbar__fin { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.agenda-vistas { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
.agenda-vistas .btn { border: 0; border-radius: 0; background: var(--surface); color: var(--text-2); }
.agenda-vistas .btn + .btn { border-left: 1px solid var(--border-strong); }
.agenda-vistas .btn[aria-pressed="true"] { background: var(--selected-bg); color: var(--smo-blue); font-weight: 600; }

.agenda-leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 12px; color: var(--text-2); }
.agenda-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.agenda-leyenda__muestra { width: 12px; height: 12px; border-radius: 3px; background: var(--ev-bg); border: 2px solid var(--ev-bd); }

/* Mes */
.agenda-mes { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; }
.agenda-mes__semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-mes__semana + .agenda-mes__semana { border-top: 1px solid var(--divider); }
.agenda-mes__encabezado { background: var(--surface-2); border-bottom: 1px solid var(--divider); }
.agenda-mes__encabezado div { padding: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); text-align: center; }
.agenda-mes__celda { min-height: 112px; padding: 4px; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.agenda-mes__celda + .agenda-mes__celda { border-left: 1px solid var(--divider); }
.agenda-mes__celda:hover { background: var(--row-hover); }
.agenda-mes__celda.is-otro-mes { background: var(--surface-2); }
.agenda-mes__celda.is-otro-mes .agenda-mes__dia { color: var(--text-3); }
.agenda-mes__dia {
    align-self: flex-start; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: var(--radius-pill);
    background: transparent; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.agenda-mes__dia:hover { background: var(--selected-bg); color: var(--smo-blue); }
.agenda-mes__celda.is-hoy .agenda-mes__dia { background: var(--smo-blue); color: #fff; }
.agenda-mes__conteo { display: none; }
.agenda-mas { border: 0; background: transparent; padding: 2px 4px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--smo-blue); cursor: pointer; text-align: left; }

/* Evento (mes y semana) */
.agenda-eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-ev {
    display: block; padding: 2px 6px; border-left: 3px solid var(--ev-bd); border-radius: 4px; background: var(--ev-bg); color: var(--ev-tx);
    font-size: 12px; line-height: 1.35; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-ev:hover { filter: brightness(0.97); text-decoration: underline; }
.agenda-ev.is-alta { font-weight: 600; }

/* Semana */
.agenda-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.agenda-semana__dia { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); min-width: 0; display: flex; flex-direction: column; }
.agenda-semana__dia.is-hoy { border-color: var(--smo-blue); }
.agenda-semana__cabeza {
    display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--divider);
    background: var(--surface-2); font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left;
}
.agenda-semana__cabeza:hover { background: var(--selected-bg); color: var(--smo-blue); }
.agenda-semana__cuerpo { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 80px; }
.agenda-semana__cuerpo .agenda-ev { white-space: normal; padding: 6px 8px; }
.agenda-ev__hora { font-weight: 600; }
.agenda-ev__linea { display: block; overflow-wrap: anywhere; }
.agenda-semana__vacio { font-size: 12px; color: var(--text-3); }

/* Agenda (lista por día) */
.agenda-dias { display: flex; flex-direction: column; gap: 12px; }
.agenda-dia { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; }
.agenda-dia.is-hoy { border-color: var(--smo-blue); }
.agenda-dia__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px 16px; background: var(--surface-2); border-bottom: 1px solid var(--divider); }
.agenda-dia__cabeza h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
.agenda-dia__lista { list-style: none; margin: 0; padding: 0; }
.agenda-dia__lista li + li { border-top: 1px solid var(--row-divider); }
.agenda-fila { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 16px; min-height: 44px; color: var(--text); text-decoration: none; border-left: 3px solid var(--ev-bd); }
.agenda-fila:hover { background: var(--row-hover); }
.agenda-fila__hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.agenda-fila__texto { min-width: 0; }
.agenda-fila__texto strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.agenda-fila__texto span { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.agenda-fila__estado { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

/* Lista: filtros rápidos y filas por dar seguimiento */
.agenda-rapidos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.agenda-rapidos .btn[aria-current="true"] { background: var(--selected-bg); border-color: var(--smo-blue); color: var(--smo-blue); }
.agenda-filtros { padding: 16px; border-bottom: 1px solid var(--divider); }
.agenda-filtros .form-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.agenda-filtros .form-actions { padding-top: 12px; }
.table tr.is-seguimiento td:first-child { box-shadow: inset 3px 0 0 #D93A35; }
.agenda-celda-folio a { font-weight: 600; color: var(--smo-blue); white-space: nowrap; }
.agenda-celda-sub { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }

/* Detalle */
.agenda-detalle { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.agenda-detalle > div { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.agenda-detalle .card { margin: 0; }
.agenda-pildoras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.agenda-movs { list-style: none; margin: 0; padding: 0; }
.agenda-movs > li { padding: 12px 0; border-top: 1px solid var(--row-divider); }
.agenda-movs > li:first-child { border-top: 0; padding-top: 0; }
.agenda-movs__meta { font-size: 12px; color: var(--text-2); margin: 0 0 4px; }
.agenda-movs__meta strong { color: var(--text); font-weight: 600; }
.agenda-movs__texto { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.agenda-adjunto { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.agenda-adjunto a { font-weight: 600; color: var(--smo-blue); overflow-wrap: anywhere; min-width: 0; }
.agenda-vacio { margin: 0; font-size: 13px; color: var(--text-2); }
.agenda-card-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--divider); }
.agenda-mensaje[hidden] { display: none; }

/* Catálogo de tipos */
.agenda-tipo-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.agenda-tipo-form .form-control { width: auto; flex: 1 1 200px; }
.agenda-tipo-form .agenda-tipo-orden { flex: 0 0 90px; }

@media (max-width: 900px) {
    .agenda-detalle { grid-template-columns: minmax(0, 1fr); }
    .agenda-semana { grid-template-columns: minmax(0, 1fr); }
    .agenda-semana__cuerpo { min-height: 0; }
    .agenda-toolbar__fin { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
    .agenda-toolbar__titulo { width: 100%; order: -1; margin: 0; }
    .agenda-mes__encabezado div { padding: 6px 0; font-size: 11px; }
    .agenda-mes__celda { min-height: 0; padding: 2px; align-items: center; }
    .agenda-mes__dia { min-width: 40px; height: 44px; align-self: center; }
    .agenda-mes__celda .agenda-eventos, .agenda-mes__celda .agenda-mas { display: none; }
    .agenda-mes__conteo {
        display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; border: 0; background: transparent;
        font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ev-tx, var(--smo-blue)); cursor: pointer;
    }
    .agenda-mes__conteo[hidden] { display: none; }
    .agenda-fila { grid-template-columns: 48px minmax(0, 1fr); }
    .agenda-fila__estado { grid-column: 2; justify-content: flex-start; }
    .agenda-semana__cabeza { min-height: 44px; }
    .agenda-tipo-form .form-control, .agenda-tipo-form .btn { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════
   UI-CUR: MIS CURSOS (cursos/mis_cursos.php, assets/js/mis-cursos.js)
══════════════════════════════════════════════════════════════ */
.cursos-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.cursos-filtros__buscar { flex: 1 1 280px; }
.cursos-filtros__categorias { display: flex; flex-wrap: wrap; gap: 8px; }
.cursos-filtros__categorias .btn[aria-pressed="true"] { background: var(--selected-bg); border-color: var(--smo-blue); color: var(--smo-blue); font-weight: 600; }
.cursos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 24px; }
.curso-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.curso-card[hidden] { display: none; }
/* UI-CUR2: encabezado 16:9 con portada (object-fit: cover) o ícono por categoría */
.curso-card__portada { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-bottom: 1px solid var(--divider); color: var(--smo-blue); font-size: 32px; overflow: hidden; }
.curso-card__portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.curso-card__portada i[hidden] { display: none; }
.curso-portada-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 10px 14px 0; }
.curso-portada-admin .btn[hidden], .curso-portada-admin p[hidden] { display: none; }
.curso-portada-admin p { flex-basis: 100%; margin: 0; }
.cursos-grid--capsulas { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.curso-card__cuerpo { padding: 16px 20px 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.curso-card__titulo { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--text); margin: 0; overflow-wrap: anywhere; }
.curso-card__desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.curso-card__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 12px; color: var(--text-2); }
.curso-card__acciones { padding: 16px 20px 20px; }
.curso-card__acciones .btn { width: 100%; }
.cursos-capsulas-titulo { margin-top: 8px; }
@media (max-width: 600px) {
    .cursos-grid, .cursos-grid--capsulas { grid-template-columns: minmax(0, 1fr); }
    .curso-portada-admin .btn { flex: 1 1 auto; }
    .cursos-filtros__categorias .btn { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════
   UI-PERF2: PRÓXIMAMENTE (componente reutilizable)
══════════════════════════════════════════════════════════════ */
/* Etiqueta junto al nombre de un elemento del menú ('badge' en components/sidebar.php) */
.sidebar-nav a.has-badge { height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; white-space: normal; }
.sidebar-nav__texto { min-width: 0; line-height: 1.3; }
.sidebar-badge {
    display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: var(--radius-pill);
    background: #E6EFFA; color: #0A4A9C; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle;
}
/* Estado vacío de una función que aún no está disponible (.empty-state.empty-state--proximamente) */
.empty-state--proximamente { padding: 56px 24px; }
.empty-state--proximamente h2 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.empty-state--proximamente .status { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════
   UI-NOV: VENTANA DE NOVEDADES (components/novedades_modal.php, assets/js/novedades.js)
══════════════════════════════════════════════════════════════ */
.nov-overlay {
    position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(16, 24, 40, 0.55); animation: nov-fondo 200ms ease-out;
}
.nov-overlay[hidden] { display: none; }
.nov-modal {
    display: flex; flex-direction: column; width: 100%; max-width: 760px; max-height: min(90vh, 860px);
    background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-overlay); overflow: hidden;
    animation: nov-entrada 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nov-modal:focus { outline: none; }
.nov-header {
    position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 24px 56px 22px 28px; flex: none;
    background: linear-gradient(135deg, var(--smo-navy) 0%, var(--smo-blue) 100%); color: #fff;
}
.nov-header__icono {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px;
    border-radius: 12px; background: rgba(255, 255, 255, 0.16); font-size: 22px;
}
.nov-header__texto { min-width: 0; }
.nov-header__etiqueta { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.nov-header h2 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; color: #fff; }
.nov-header p#nov-subtitulo { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.nov-cerrar {
    position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; border-radius: var(--radius-control); background: transparent; color: #fff; font-size: 18px; cursor: pointer;
}
.nov-cerrar:hover { background: rgba(255, 255, 255, 0.16); }
.nov-cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nov-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 28px; overscroll-behavior: contain; }
.nov-cuerpo:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.nov-puntos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nov-punto, .nov-proximamente { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.nov-punto__icono {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
    border-radius: 10px; background: var(--selected-bg); color: var(--smo-blue); font-size: 16px;
}
.nov-punto h3, .nov-proximamente h3 { margin: 0 0 2px; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--text); }
.nov-punto p, .nov-proximamente p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.nov-proximamente { margin-top: 16px; border-style: dashed; border-color: #BFD3EE; background: var(--info-bg); }
.nov-proximamente .nov-punto__icono { background: var(--surface); }
.nov-proximamente .sidebar-badge { margin: 0 0 4px; }
.nov-pie {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex: none; flex-wrap: wrap;
    padding: 16px 28px; border-top: 1px solid var(--divider); background: var(--surface-2);
}
.nov-pie p { margin: 0; font-size: 13px; color: var(--text-2); flex: 1 1 260px; }
.nov-pie .btn { min-width: 140px; }

@keyframes nov-fondo { from { opacity: 0; } }
@keyframes nov-entrada { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
    .nov-overlay, .nov-modal { animation: none; }
}
@media (max-width: 600px) {
    .nov-overlay { padding: 8px; align-items: stretch; }
    .nov-modal { max-height: none; height: 100%; border-radius: var(--radius-panel); }
    .nov-header { padding: 18px 52px 16px 16px; gap: 12px; }
    .nov-header__icono { width: 40px; height: 40px; font-size: 18px; }
    .nov-header h2 { font-size: 19px; }
    .nov-cerrar { width: 44px; height: 44px; top: 8px; right: 6px; }
    .nov-cuerpo { padding: 16px; }
    .nov-puntos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .nov-pie { padding: 12px 16px; }
    .nov-pie .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   13. RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    :root { --sidebar-width: 0px; }
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 100;
        width: 256px;
        max-width: 85vw;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-overlay);
    }
    .sidebar-close-btn { display: inline-flex; }
    .app-content { margin-left: 0; }
    .topbar { padding: 0 16px; }
    .topbar #sidebarToggle { display: inline-flex !important; }
    .topbar-search { display: none; }
    .shell-fab-toggle { display: inline-flex; }
    body.has-shell-fab { padding-top: 60px; } /* espacio para el ☰ flotante */
    .page { padding: 18px 16px; }
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .lic-kpis, .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .quick-actions { grid-template-columns: repeat(2, 1fr); }
    .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .page-header-actions { width: 100%; }
    .d-none-mobile { display: none !important; }

    /* ===== UI-001: celular < 900 px ===== */
    .layout-grid--3, .layout-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-strip, .stat-strip--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-strip__item:nth-child(odd) { border-left: none; }
    .stat-strip__item:nth-child(n+3) { border-top: 1px solid var(--divider); }
}

@media (max-width: 600px) {
    .stat-grid { grid-template-columns: 1fr; }
    .lic-kpis, .kpi-grid { grid-template-columns: 1fr; }
    .quick-actions { grid-template-columns: 1fr; }
    .topbar-subtitle { display: none; }
    .page { padding: 14px 12px; }
    .welcome-card { padding: 20px 16px; }
    .lic-toolbar, .toolbar, .filter-bar { padding: 12px; flex-direction: column; align-items: stretch; }
    .lic-toolbar select, .lic-toolbar input, .toolbar select, .toolbar input { width: 100%; }
    .modal { border-radius: var(--radius-panel); }

    /* ===== UI-001: celular < 600 px ===== */
    .layout-grid--2, .layout-grid--3, .layout-grid--4 { grid-template-columns: 1fr; }
    .stat-strip, .stat-strip--3 { grid-template-columns: 1fr; }
    .stat-strip__item + .stat-strip__item { border-left: none; border-top: 1px solid var(--divider); }
    .btn { height: 44px; }
    .btn-icon { width: 44px; }
    .form-control { height: 44px; }
    textarea.form-control { height: auto; }
    .table-toolbar .search-input { width: 100%; }
    .table-toolbar .btn { height: 44px; }
    .pagination a, .pagination span, .pagination button { min-width: 44px; height: 44px; }

    /* Listados principales como tarjetas: <table class="table table-stack"> con td[data-label] */
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr { padding: 12px 16px; border-bottom: 1px solid var(--row-divider); }
    .table-stack td { padding: 2px 0; border: none; text-align: left; }
    .table-stack td.num { text-align: left; }
    .table-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--text-2); }

    .sticky-action {
        display: block;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        padding: 8px 16px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        z-index: 60;
    }
    .sticky-action .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   MKT-001: barra de avance nativa de Marketing (sin estilos en línea)
   ═══════════════════════════════════════════════════════════ */
progress.mkt-progreso { width: 180px; height: 8px; border: 0; border-radius: var(--radius-pill); background: var(--row-divider); overflow: hidden; -webkit-appearance: none; appearance: none; }
progress.mkt-progreso::-webkit-progress-bar { background: var(--row-divider); border-radius: var(--radius-pill); }
progress.mkt-progreso::-webkit-progress-value { background: var(--smo-blue); border-radius: var(--radius-pill); }
progress.mkt-progreso::-moz-progress-bar { background: var(--smo-blue); border-radius: var(--radius-pill); }
progress.mkt-progreso--ancho { width: 100%; height: 10px; }
/* MKT-001H: vista previa del correo en un iframe aislado */
.mkt-vista-previa { display: block; width: 100%; min-height: 520px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: #FFFFFF; }
/* MKT-001L: desglose de excluidos de la audiencia (crear campaña) */
.mkt-desglose { margin-top: var(--space-2); font-size: 14px; color: var(--text-2); }
.mkt-desglose summary { cursor: pointer; color: var(--smo-blue); font-weight: 500; width: fit-content; }
.mkt-desglose__lista { list-style: none; margin: var(--space-2) 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.mkt-desglose__lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); }
.mkt-desglose__lista > li + li { border-top: 1px solid var(--border); }
.mkt-desglose__lista ul { flex-basis: 100%; list-style: none; margin: 0; padding: 0 0 0 var(--space-4); color: var(--text-3); }
.mkt-desglose__lista ul li { padding: 2px 0; }
.mkt-desglose__lista li > span:first-child { flex: 1 1 0; min-width: 0; }
.mkt-desglose__lista .num { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
/* MKT-001L: reporte de campaña — datos en rejilla, métricas y subtítulos (sin estilos propios en la página) */
.mkt-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; font-size: 13px; }
.mkt-datos dt { color: var(--text-2); }
.mkt-datos dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.mkt-datos--num dt { display: flex; align-items: center; }
.mkt-datos--num dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; align-self: center; }
.mkt-subtitulo { margin: var(--space-5) 0 var(--space-2); font-size: 13px; font-weight: 600; color: var(--text); }
.mkt-metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.mkt-metrica { border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-4); text-align: center; }
.mkt-metrica__valor { font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.mkt-metrica__etiqueta { margin-top: var(--space-1); font-size: 12px; line-height: 1.35; color: var(--text-2); }
.mkt-destinatarios .table td { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .mkt-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .mkt-datos dd + dt { margin-top: var(--space-2); }
    .mkt-datos--num { grid-template-columns: minmax(0, 1fr) max-content; gap: var(--space-2) var(--space-4); }
    .mkt-datos--num dd + dt { margin-top: 0; }
    .mkt-metricas { grid-template-columns: minmax(0, 1fr); }
}