/*
 * panel.css — MM Consultor Legal · Panel Ciudadano
 * v4 · Paleta Dorada · Layout independiente
 *
 * Reemplaza: admin.css + custom.css + panel-custom.css
 *
 * [1]  Variables
 * [2]  Reset & Tipografía
 * [3]  Skeleton: sidebar + wrapper
 * [4]  Sidebar
 * [5]  Topbar
 * [6]  Content & Page header
 * [7]  Cards generales
 * [8]  Stat cards
 * [9]  Welcome banner
 * [10] Quick actions
 * [11] Actividad reciente
 * [12] Table cards & DataTables
 * [13] Badges de estado
 * [14] Botones
 * [15] Formularios
 * [16] Modales
 * [17] Empty states
 * [18] SOS cards
 * [19] Citas (agenda)
 * [20] Cursos cards
 * [21] Footer
 * [22] Animaciones
 * [23] Responsive
 */

/* ═══════════════════════════════════════════════════
   [1] VARIABLES
═══════════════════════════════════════════════════ */
:root {
    /* Brand — Dorado */
    --brand:        #C9A24A;
    --brand-dark:   #A8842F;
    --brand-light:  #F0D898;
    --brand-xlight: #FAF5E8;

    /* Sidebar */
    --sb-bg:        #0D0D0D;
    --sb-item-h:    rgba(201,162,74,.1);
    --sb-text:      rgba(255,255,255,.48);
    --sb-text-h:    rgba(255,255,255,.82);
    --sb-text-a:    #0D0D0D;
    --sb-border:    rgba(255,255,255,.07);
    --sb-width:     260px;

    /* Topbar */
    --tb-bg:        #ffffff;
    --tb-h:         60px;
    --tb-border:    #EDE8DC;

    /* Content */
    --bg:           #F5F0E8;
    --card-bg:      #ffffff;
    --card-radius:  10px;
    --card-shadow:  0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.07);
    --card-shadow-h:0 6px 24px rgba(0,0,0,.12);
    --card-border:  #EDE8DC;

    /* Text */
    --text:         #0D0D0D;
    --text-2:       #4A4A4A;
    --text-muted:   #7A7A7A;

    /* Semantic */
    --ok:       #2E8B57;
    --ok-bg:    #f0faf4;
    --warn:     #D4A017;
    --warn-bg:  #fdf8e8;
    --err:      #C0392B;
    --err-bg:   #fdf2f0;
    --info:     #2471A3;
    --info-bg:  #f0f7ff;

    /* Bordes */
    --border:   #EDE8DC;
    --border-l: #F5F0E8;

    /* Transiciones */
    --t1: .15s ease;
    --t2: .25s ease;
    --t3: .4s  ease;
}

/* ═══════════════════════════════════════════════════
   [2] RESET & TIPOGRAFÍA
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: .875rem;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Poppins', sans-serif;
    color: var(--text);
    font-weight: 700;
}

a { color: var(--brand); }
a:hover { color: var(--brand-dark); text-decoration: none; }

/* ═══════════════════════════════════════════════════
   [3] SKELETON: SIDEBAR + WRAPPER
═══════════════════════════════════════════════════ */
#panel-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sb-width);
    height: 100vh;
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,.04);
    box-shadow: 2px 0 20px rgba(0,0,0,.35);
    transition: transform var(--t2);
}

#panel-wrapper {
    margin-left: var(--sb-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1039;
}

/* ═══════════════════════════════════════════════════
   [4] SIDEBAR
═══════════════════════════════════════════════════ */

/* ── Brand ── */
.sidebar-brand {
    height: var(--tb-h);
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
}
.sidebar-brand a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.sidebar-brand img { max-height: 36px; }

/* ── User card ── */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
}

.sidebar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: linear-gradient(135deg, #A8842F, #C9A24A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    color: #0D0D0D;
    flex-shrink: 0;
    letter-spacing: -.3px;
    box-shadow: 0 3px 10px rgba(201,162,74,.35);
}

.sidebar-user-info { overflow: hidden; flex: 1; }

.sidebar-user-name {
    font-size: .81rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sidebar-user-role {
    font-size: .64rem;
    color: var(--brand);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-top: 2px;
}

/* ── Nav container ── */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px 0 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.07) transparent;
}
.sidebar-nav::-webkit-scrollbar       { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* ── Grupos ── */
.sidebar-group {
    padding: 0;
    margin-bottom: 4px;
}

.sidebar-group--cuenta {
    margin-top: auto;
    padding-top: 8px;
}

.sidebar-group-label {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(255,255,255,.2);
    padding: 14px 20px 5px;
}

.sidebar-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Items ── */
.sidebar-group ul li a,
.sidebar-group ul li .sidebar-link-collapse {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 16px;
    margin: 1px 10px;
    border-radius: 8px;
    color: var(--sb-text);
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t1), color var(--t1);
    cursor: pointer;
    border: none;
    background: transparent;
    width: calc(100% - 20px);
    line-height: 1;
}

.sidebar-group ul li a .fa,
.sidebar-group ul li .sidebar-link-collapse .fa:not(.sidebar-arrow) {
    font-size: .95rem;
    width: 17px;
    text-align: center;
    opacity: .7;
    flex-shrink: 0;
    transition: opacity var(--t1);
}

.sidebar-group ul li a:hover,
.sidebar-group ul li .sidebar-link-collapse:hover {
    background: var(--sb-item-h);
    color: var(--sb-text-h);
    text-decoration: none;
}
.sidebar-group ul li a:hover .fa,
.sidebar-group ul li .sidebar-link-collapse:hover .fa { opacity: 1; }

/* Estado activo */
.sidebar-group ul li.active > a,
.sidebar-group ul li.active > .sidebar-link-collapse {
    background: var(--brand);
    color: var(--sb-text-a);
    font-weight: 600;
}
.sidebar-group ul li.active > a .fa,
.sidebar-group ul li.active > .sidebar-link-collapse .fa {
    opacity: 1;
    color: var(--sb-text-a);
}

/* ── Flecha collapse ── */
.sidebar-arrow {
    margin-left: auto;
    font-size: .7rem !important;
    width: auto !important;
    transition: transform var(--t2) !important;
    opacity: .5 !important;
}
.sidebar-link-collapse:not(.collapsed) .sidebar-arrow {
    transform: rotate(-180deg);
}

/* ── Submenu ── */
.sidebar-submenu {
    list-style: none;
    margin: 2px 10px 4px;
    padding: 3px 0;
    background: rgba(0,0,0,.18);
    border-radius: 8px;
    overflow: hidden;
}

.sidebar-submenu li a {
    padding: 8px 16px 8px 44px !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    font-size: .8rem !important;
    color: rgba(255,255,255,.45) !important;
    position: relative;
}
.sidebar-submenu li a::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    transition: background var(--t1);
}
.sidebar-submenu li a:hover {
    background: rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.85) !important;
}
.sidebar-submenu li a:hover::before { background: var(--brand); }

/* ── Badges ── */
.sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    font-size: .62rem;
    font-weight: 700;
    padding: 0 5px;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
}
.sidebar-badge--warn { background: var(--warn);  color: #fff; }
.sidebar-badge--err  { background: var(--err);   color: #fff; }
.sidebar-badge--ok   { background: var(--ok);    color: #fff; }

/* ── SOS item especial ── */
.sidebar-item-sos > a .fa-bolt,
.sidebar-item-sos > .sidebar-link-collapse .fa-bolt {
    color: #C0392B !important;
    opacity: 1 !important;
}

/* ── Divisor ── */
.sidebar-divider {
    height: 1px;
    background: var(--sb-border);
    margin: 8px 16px;
}

/* ── Link externo ── */
.sidebar-link-external { color: rgba(255,255,255,.35) !important; }
.sidebar-link-external:hover { color: rgba(255,255,255,.7) !important; }

/* ═══════════════════════════════════════════════════
   [5] TOPBAR
═══════════════════════════════════════════════════ */
#panel-topbar {
    height: var(--tb-h);
    background: var(--tb-bg);
    border-bottom: 1px solid var(--tb-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

.topbar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: background var(--t1), color var(--t1);
    flex-shrink: 0;
    padding: 0;
}
.topbar-toggle:hover { background: var(--brand-xlight); color: var(--brand); }

.topbar-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.topbar-balance {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--brand-xlight);
    border: 1px solid var(--brand-light);
    border-radius: 20px;
    color: var(--brand-dark);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: .84rem;
    text-decoration: none;
    transition: background var(--t1), border-color var(--t1);
    cursor: pointer;
    white-space: nowrap;
}
.topbar-balance .fa-diamond { font-size: .7rem; color: var(--brand); }
.topbar-balance:hover {
    background: var(--brand-light);
    border-color: var(--brand);
    color: var(--brand-dark);
    text-decoration: none;
}

.topbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t1), color var(--t1);
    cursor: pointer;
}
.topbar-btn:hover { background: var(--border-l); color: var(--text); text-decoration: none; }

/* ═══════════════════════════════════════════════════
   [6] CONTENT & PAGE HEADER
═══════════════════════════════════════════════════ */
#panel-content {
    flex: 1;
    background: var(--bg);
    min-height: calc(100vh - var(--tb-h));
    padding: 1.25rem 1.5rem 2rem;
}

/* Page container: cada vista vive en una "página" blanca con
   acento dorado arriba — crea jerarquía visual clara */
#panel-content .container-fluid {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border-top: 3px solid var(--brand);
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    padding: 1.75rem !important;
    min-height: calc(100vh - var(--tb-h) - 4rem);
}

.panel-page-header {
    margin-bottom: 1.4rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.panel-page-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -.3px;
    line-height: 1.2;
}

.panel-page-subtitle {
    font-size: .82rem;
    color: var(--text-muted);
    margin: .2rem 0 0;
    font-weight: 400;
}

.panel-page-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════
   [7] CARDS GENERALES
═══════════════════════════════════════════════════ */
.card {
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    border: 1px solid var(--card-border) !important;
    background: var(--card-bg);
}

.card-header {
    background: #fafaf8 !important;
    border-bottom: 1px solid var(--card-border) !important;
    font-weight: 600;
    font-size: .875rem;
    padding: .875rem 1.25rem !important;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-footer {
    background: #fafaf8 !important;
    border-top: 1px solid var(--border-l) !important;
    font-size: .74rem;
    color: var(--text-muted);
    padding: .5rem 1.25rem !important;
}

/* ═══════════════════════════════════════════════════
   [8] STAT CARDS
═══════════════════════════════════════════════════ */
.panel-stat-card {
    border: none !important;
    border-radius: var(--card-radius) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.11) !important;
    transition: transform var(--t2), box-shadow var(--t2) !important;
    overflow: hidden;
    position: relative;
}
.panel-stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
}

.panel-stat-card .card-body {
    padding: 1.35rem 1.35rem .9rem;
    position: relative;
}

/* Variantes de color — !important necesario para superar .card sin bg !important */
.panel-stat-card--purple { background: linear-gradient(135deg,#A8842F 0%,#C9A24A 55%,#E8C070 100%) !important; }
.panel-stat-card--emerald { background: linear-gradient(135deg,#064e3b 0%,#059669 55%,#10b981 100%) !important; }
.panel-stat-card--blue    { background: linear-gradient(135deg,#1e3a5f 0%,#1d4ed8 55%,#4b85f5 100%) !important; }
.panel-stat-card--amber   { background: linear-gradient(135deg,#7c2d12 0%,#c2410c 55%,#f97316 100%) !important; }
.panel-stat-card--rose    { background: linear-gradient(135deg,#7f1d1d 0%,#b91c1c 55%,#ef4444 100%) !important; }
.panel-stat-card--indigo  { background: linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 55%,var(--brand-light) 100%) !important; }

/* Icono fantasma */
.panel-stat-icon {
    position: absolute;
    bottom: -4px;
    right: 14px;
    font-size: 4rem;
    opacity: .1;
    color: #fff;
    z-index: 0;
    transition: opacity var(--t3), transform var(--t3);
}
.panel-stat-card:hover .panel-stat-icon { opacity: .16; transform: rotate(-6deg) scale(1.04); }

.panel-stat-content { position: relative; z-index: 1; }

.panel-stat-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: .3rem;
    letter-spacing: -.5px;
}

.panel-stat-label {
    font-size: .71rem;
    color: rgba(255,255,255,.72);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.panel-stat-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1.35rem;
    font-size: .74rem;
    font-weight: 500;
    color: rgba(255,255,255,.8) !important;
    background: rgba(0,0,0,.15);
    transition: background var(--t2);
    text-decoration: none !important;
}
.panel-stat-footer:hover {
    background: rgba(0,0,0,.26);
    color: #fff !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════
   [9] WELCOME BANNER
═══════════════════════════════════════════════════ */
.dashboard-welcome {
    background: linear-gradient(135deg, #0D0D0D 0%, #1e1a00 35%, #3a2800 70%, #5a3d00 100%);
    border-radius: var(--card-radius);
    padding: 1.75rem 2rem 1.55rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
    border: 1px solid rgba(201,162,74,.2);
}
.dashboard-welcome::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    background: rgba(201,162,74,.06);
    border-radius: 50%;
    top: -90px;
    right: -60px;
    pointer-events: none;
}
.dashboard-welcome::after {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    background: rgba(201,162,74,.04);
    border-radius: 50%;
    bottom: -60px;
    right: 100px;
    pointer-events: none;
}

.dashboard-welcome-greeting {
    font-size: .73rem;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-weight: 500;
    margin-bottom: 3px;
}
.dashboard-welcome-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.3px;
    margin-bottom: .35rem;
}
.dashboard-welcome-sub {
    font-size: .81rem;
    color: rgba(255,255,255,.5);
    margin: 0;
}

.dashboard-welcome-balance { text-align: right; position: relative; z-index: 1; }
.dashboard-welcome-balance-label {
    font-size: .68rem;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .9px;
    margin-bottom: 4px;
    display: block;
}
.dashboard-welcome-balance-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: -.5px;
    line-height: 1;
    display: block;
}
.dashboard-welcome-balance-sub {
    font-size: .68rem;
    color: rgba(255,255,255,.38);
    margin-top: 4px;
    display: block;
}

/* ═══════════════════════════════════════════════════
   [10] QUICK ACTIONS
═══════════════════════════════════════════════════ */
.quick-actions-row { margin-bottom: 1.25rem; }

.quick-action-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 1.1rem .9rem;
    text-align: center;
    cursor: pointer;
    transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
    text-decoration: none !important;
    display: block;
    border: 1px solid var(--card-border);
    position: relative;
    overflow: hidden;
    color: var(--text);
}
.quick-action-card:hover { color: var(--text); }
.quick-action-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-xlight);
    opacity: 0;
    transition: opacity var(--t2);
}
.quick-action-card:hover {
    box-shadow: var(--card-shadow-h);
    transform: translateY(-2px);
    border-color: rgba(201,162,74,.3);
    text-decoration: none !important;
}
.quick-action-card:hover::before { opacity: 1; }

.quick-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin: 0 auto .6rem;
    position: relative;
    z-index: 1;
}
.quick-action-icon--purple  { background: var(--brand-xlight); color: var(--brand); }
.quick-action-icon--brand   { background: var(--brand-xlight); color: var(--brand); }
.quick-action-icon--emerald { background: var(--ok-bg);        color: var(--ok); }
.quick-action-icon--blue    { background: var(--info-bg);      color: var(--info); }
.quick-action-icon--amber   { background: var(--warn-bg);      color: var(--warn); }
.quick-action-icon--rose    { background: var(--err-bg);       color: var(--err); }

.quick-action-label {
    font-size: .76rem;
    font-weight: 600;
    color: var(--text) !important;
    position: relative;
    z-index: 1;
    line-height: 1.35;
}

/* ═══════════════════════════════════════════════════
   [11] ACTIVIDAD RECIENTE
═══════════════════════════════════════════════════ */
.recent-section-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
    overflow: hidden;
    height: 100%;
}

.recent-section-header {
    padding: .9rem 1.2rem;
    border-bottom: 1px solid var(--border-l);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafaf8;
}

.recent-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: .87rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.recent-section-link {
    font-size: .73rem;
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--t1);
}
.recent-section-link:hover { color: var(--brand-dark); text-decoration: underline; }

.recent-table { width: 100%; }
.recent-table tr {
    border-bottom: 1px solid var(--border-l);
    transition: background var(--t1);
}
.recent-table tr:last-child { border-bottom: none; }
.recent-table tr:hover { background: var(--brand-xlight); }
.recent-table td {
    padding: .68rem 1.2rem;
    font-size: .81rem;
    vertical-align: middle;
    color: var(--text);
}

.recent-empty {
    padding: 2.2rem 1.2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem;
}
.recent-empty .fa {
    font-size: 1.7rem;
    color: var(--border);
    display: block;
    margin-bottom: 8px;
}

.mov-type-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; flex-shrink: 0; }
.mov-type-dot--credit { background: var(--ok); }
.mov-type-dot--debit  { background: var(--err); }

.recent-amount-credit { color: var(--ok);  font-weight: 600; }
.recent-amount-debit  { color: var(--err); font-weight: 600; }

/* ── Cursos recientes ── */
.recent-cursos-list { display: flex; flex-direction: column; padding: 6px 0; }

.recent-curso-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-l);
    transition: background var(--t1);
}
.recent-curso-item:last-child { border-bottom: none; }
.recent-curso-item:hover { background: var(--brand-xlight); }

.recent-curso-thumb {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}
.recent-curso-thumb img { width: 100%; height: 100%; object-fit: cover; }

.recent-curso-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 8px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 4px;
    line-height: 1.4;
}
.recent-curso-badge--done     { background: #16a34a; color: #fff; }
.recent-curso-badge--progress { background: var(--brand-dark); color: #fff; }

.recent-curso-info { flex: 1; min-width: 0; }
.recent-curso-name {
    display: block;
    font-size: .77rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.recent-curso-bar-wrap {
    height: 3px;
    background: #e9ecef;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 3px;
}
.recent-curso-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-dark), var(--brand));
    border-radius: 9999px;
    transition: width .4s ease;
}
.recent-curso-pct { font-size: .67rem; color: var(--text-muted); font-weight: 500; }

/* ── Cursos dashboard card ── */
.cursos-dashboard-card {
    background: linear-gradient(135deg, #0D0D0D 0%, #2A2A2A 40%, #3a2800 75%, #5a3d00 100%);
    border-radius: var(--card-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
    border: 1px solid rgba(201,162,74,.18);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    color: #fff;
    flex-wrap: wrap;
}

.cursos-dc-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: rgba(201,162,74,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    color: var(--brand);
}
.cursos-dc-info { flex: 1; min-width: 0; }
.cursos-dc-title {
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: rgba(255,255,255,.55);
    margin-bottom: 2px;
}
.cursos-dc-sub { font-size: 1.05rem; font-weight: 700; color: #fff; }

.cursos-dc-stats { display: flex; gap: 28px; flex-shrink: 0; }
.cursos-dc-stat  { text-align: center; }
.cursos-dc-stat-val {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
    margin-bottom: 3px;
}
.cursos-dc-stat-label {
    font-size: .68rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}

.cursos-dc-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: rgba(201,162,74,.15);
    border: 1px solid rgba(201,162,74,.35);
    border-radius: 20px;
    color: var(--brand);
    font-size: .77rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--t2), transform var(--t1);
    white-space: nowrap;
    flex-shrink: 0;
}
.cursos-dc-cta:hover {
    background: rgba(201,162,74,.28);
    color: var(--brand-light);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════
   [12] TABLE CARDS & DATATABLES
═══════════════════════════════════════════════════ */
.table-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.table-card .card-header {
    background: #fafaf8 !important;
    border-bottom: 1px solid var(--card-border) !important;
    padding: .875rem 1.25rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.table-card .card-header span,
.table-card .card-header h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.table-card .card-body { padding: 0; }
.table-card .table   { margin-bottom: 0; }

/* ─── DataTables: DOM  <"dt-top"lf>t<"dt-bottom"ip> ─── */

/* Wrapper sin márgenes propios */
.table-card .dataTables_wrapper { padding: 0; }

/* ── Barra superior: length + search ── */
.table-card .dt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border-l);
    background: #fafaf8;
}

/* ── Barra inferior: info + pagination ── */
.table-card .dt-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .65rem 1.25rem;
    border-top: 1px solid var(--border-l);
    background: #fafaf8;
}

/* Labels de length y filter */
.dataTables_length label,
.dataTables_filter label {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 500;
}

/* Select de cantidad */
.dataTables_length select {
    border: 1.5px solid var(--border);
    border-radius: 7px;
    padding: .28rem .6rem;
    font-size: .8rem;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color var(--t1), box-shadow var(--t1);
    -webkit-appearance: auto;
    appearance: auto;
}
.dataTables_length select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(201,162,74,.12);
}

/* Input de búsqueda */
.dataTables_filter input[type="search"] {
    border: 1.5px solid var(--border);
    border-radius: 7px;
    padding: .32rem .85rem;
    font-size: .82rem;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color var(--t1), box-shadow var(--t1);
    min-width: 200px;
}
.dataTables_filter input[type="search"]:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(201,162,74,.12);
}
.dataTables_filter input[type="search"]::placeholder { color: var(--text-muted); }

/* Info de registros */
.dataTables_info {
    font-size: .78rem;
    color: var(--text-muted);
    padding: 0 !important;
    line-height: 2.4;
}

/* ── Paginador Bootstrap 4 ── */
.dataTables_paginate { display: flex; justify-content: flex-end; }
.dataTables_paginate .pagination {
    margin: 0;
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.dataTables_paginate .page-link {
    color: var(--brand-dark);
    border: 1px solid var(--border);
    border-radius: 6px !important;
    font-size: .79rem;
    padding: .3rem .65rem;
    line-height: 1.5;
    background: #fff;
    transition: background var(--t1), color var(--t1), border-color var(--t1);
}
.dataTables_paginate .page-link:hover {
    background: var(--brand-xlight);
    border-color: var(--brand-light);
    color: var(--brand-dark);
    text-decoration: none;
}
.dataTables_paginate .page-item.active .page-link {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #0D0D0D !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(201,162,74,.35);
}
.dataTables_paginate .page-item.disabled .page-link {
    color: var(--text-muted);
    border-color: var(--border-l);
    background: #fafaf8;
    cursor: not-allowed;
}

/* ── Tabla: encabezado ── */
.table-card table.panel-table,
.table-card table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-top: none !important;
}

.table-card table.panel-table thead th,
.table-card table.dataTable thead th,
.table-card table.panel-table thead td,
.table-card table.dataTable thead td {
    background: #fafaf8 !important;
    border-bottom: 2px solid var(--card-border) !important;
    border-top: none !important;
    color: var(--text-2) !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .65px !important;
    padding: .8rem 1.15rem !important;
    white-space: nowrap;
}

/* Iconos de ordenamiento */
.table-card table.dataTable thead .sorting::after,
.table-card table.dataTable thead .sorting_asc::after,
.table-card table.dataTable thead .sorting_desc::after {
    color: var(--brand);
    opacity: .5;
}
.table-card table.dataTable thead .sorting_asc::after,
.table-card table.dataTable thead .sorting_desc::after { opacity: 1; }

/* ── Tabla: filas ── */
.table-card table.panel-table tbody tr,
.table-card table.dataTable tbody tr {
    border-bottom: 1px solid var(--border-l) !important;
    transition: background var(--t1);
}
.table-card table.panel-table tbody tr:last-child,
.table-card table.dataTable tbody tr:last-child { border-bottom: none !important; }

.table-card table.panel-table tbody tr:hover td,
.table-card table.dataTable tbody tr:hover td {
    background: var(--brand-xlight) !important;
}

.table-card table.panel-table tbody td,
.table-card table.dataTable tbody td {
    padding: .8rem 1.15rem !important;
    font-size: .84rem !important;
    vertical-align: middle !important;
    color: var(--text) !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* ── Helpers para celdas de tabla ── */
.table-cell-title     { font-weight: 600; font-size: .87rem; }
.table-cell-sm        { font-size: .82rem; color: var(--text-2); }
.table-cell-muted     { font-size: .82rem; color: var(--text-muted); }
.table-cell-sub       { font-size: .73rem; color: var(--text-muted); }
.table-cell-sub--italic { font-style: italic; }
.table-cell-valor     { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .95rem; color: var(--brand); }
.table-cell-fw        { font-weight: 600; }

/* ═══════════════════════════════════════════════════
   [13] BADGES DE ESTADO
═══════════════════════════════════════════════════ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .25em .7em;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
    line-height: 1.4;
}
.status-badge--ok,
.status-badge--success  { background: var(--ok-bg);         color: var(--ok); }
.status-badge--warn,
.status-badge--warning  { background: var(--warn-bg);        color: var(--warn); }
.status-badge--err,
.status-badge--danger   { background: var(--err-bg);         color: var(--err); }
.status-badge--info,
.status-badge--primary  { background: var(--info-bg);        color: var(--info); }
.status-badge--neutral,
.status-badge--secondary { background: #f3f4f6;              color: #6b7280; }
.status-badge--gold     { background: var(--brand-xlight);   color: var(--brand-dark); }

/* ═══════════════════════════════════════════════════
   [14] BOTONES
═══════════════════════════════════════════════════ */
.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
    color: #0D0D0D;
    font-weight: 600;
    border-radius: 8px;
    padding: .48rem 1.1rem;
    font-size: .84rem;
    transition: background var(--t1), border-color var(--t1), box-shadow var(--t1);
}
.btn-brand:hover, .btn-brand:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #0D0D0D;
    box-shadow: 0 3px 10px rgba(201,162,74,.35);
}

.btn-brand-outline {
    background: transparent;
    border: 1.5px solid var(--brand);
    color: var(--brand-dark);
    font-weight: 600;
    border-radius: 8px;
    padding: .45rem 1.1rem;
    font-size: .84rem;
    transition: background var(--t1), color var(--t1);
}
.btn-brand-outline:hover {
    background: var(--brand-xlight);
    color: var(--brand-dark);
}

/* Override Bootstrap primary en este panel */
.btn-primary {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #0D0D0D !important;
    font-weight: 600;
    border-radius: 8px;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    box-shadow: 0 3px 10px rgba(201,162,74,.35) !important;
}

.btn-outline-primary {
    border-color: var(--brand) !important;
    color: var(--brand-dark) !important;
    border-radius: 8px;
    font-weight: 600;
}
.btn-outline-primary:hover {
    background: var(--brand-xlight) !important;
    border-color: var(--brand) !important;
    color: var(--brand-dark) !important;
}

.btn { border-radius: 8px; font-weight: 500; }
.btn-sm { font-size: .78rem; padding: .3rem .75rem; }
.btn-lg { font-size: .95rem; padding: .65rem 1.4rem; }

/* ═══════════════════════════════════════════════════
   [15] FORMULARIOS
═══════════════════════════════════════════════════ */

/* ── Inputs generales ── */
#panel-content .form-control,
#panel-content .custom-select {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .855rem;
    color: var(--text);
    padding: .48rem .9rem;
    background: #fff;
    height: auto;
    transition: border-color var(--t1), box-shadow var(--t1);
    box-shadow: none;
}
#panel-content .form-control:focus,
#panel-content .custom-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(201,162,74,.14) !important;
    outline: none;
    background: #fff;
    color: var(--text);
}
#panel-content .form-control::placeholder { color: var(--text-muted); opacity: 1; }
#panel-content .form-control.is-invalid    { border-color: var(--err); }
#panel-content .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(192,57,43,.14) !important;
}

/* Textarea */
#panel-content textarea.form-control { resize: vertical; min-height: 90px; }

/* Selects */
#panel-content select.form-control {
    -webkit-appearance: auto;
    appearance: auto;
    padding-right: 2rem;
    cursor: pointer;
}

/* Labels */
#panel-content .form-group label,
#panel-content .form-label {
    font-size: .81rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: .35rem;
    display: block;
}

/* Helper text */
#panel-content .form-text,
#panel-content small.text-muted {
    font-size: .75rem;
    color: var(--text-muted) !important;
    margin-top: .25rem;
    display: block;
}

/* Feedback de validación */
.invalid-feedback { font-size: .76rem; color: var(--err); margin-top: .25rem; }
.valid-feedback   { font-size: .76rem; color: var(--ok);  margin-top: .25rem; }

/* Input groups */
#panel-content .input-group .form-control:not(:first-child) { border-left: none; border-radius: 0 8px 8px 0; }
#panel-content .input-group .form-control:not(:last-child)  { border-right: none; border-radius: 8px 0 0 8px; }
#panel-content .input-group-text {
    background: #fafaf8;
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    font-size: .87rem;
    font-weight: 500;
    padding: .48rem .9rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    border-radius: 8px;
}
#panel-content .input-group-prepend .input-group-text { border-radius: 8px 0 0 8px; border-right: none; }
#panel-content .input-group-append  .input-group-text { border-radius: 0 8px 8px 0; border-left:  none; }
#panel-content .input-group:focus-within .input-group-text { border-color: var(--brand); }

/* Checkbox / radio — accent-color universal */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand);
    cursor: pointer;
}
.form-check-input { cursor: pointer; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-label { cursor: pointer; font-size: .855rem; }

/* Number input — ocultar flechas nativas */
#panel-content input[type="number"],
.modal-body   input[type="number"] { -moz-appearance: textfield; }
#panel-content input[type="number"]::-webkit-outer-spin-button,
#panel-content input[type="number"]::-webkit-inner-spin-button,
.modal-body   input[type="number"]::-webkit-outer-spin-button,
.modal-body   input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Separador de sección en formularios */
.form-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--text-muted);
    margin: 1.25rem 0 .65rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--border-l);
}

.text-muted { color: var(--text-muted) !important; }

/* File input */
#panel-content .form-control-file,
.modal-body .form-control-file {
    font-size: .83rem;
    color: var(--text-2);
}

/* Helper text genérico (fuera de #panel-content, ej. dentro de modales) */
.form-text-helper {
    font-size: .74rem;
    color: var(--text-muted);
    margin-top: .25rem;
    display: block;
}

/* ═══════════════════════════════════════════════════
   [16] MODALES
═══════════════════════════════════════════════════ */

/* Backdrop más suave */
.modal-backdrop.show { opacity: .45; }

/* Diálogo */
.modal-dialog { margin: 1.75rem auto; }

/* Contenido */
.modal-content {
    border: none !important;
    border-radius: var(--card-radius) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.22) !important;
    overflow: hidden;
}

/* Header con acento dorado */
.modal-header {
    padding: 1rem 1.4rem;
    border-bottom: 2px solid var(--brand) !important;
    background: #fafaf8;
    align-items: center;
}
.modal-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

/* Botón cerrar */
.modal-header .close {
    padding: .4rem .6rem;
    margin: -.4rem -.6rem -.4rem auto;
    color: var(--text-muted);
    opacity: 1;
    font-size: 1.2rem;
    line-height: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--t1);
}
.modal-header .close:hover { color: var(--err); }

/* Body */
.modal-body {
    padding: 1.4rem 1.5rem;
    color: var(--text-2);
    font-size: .88rem;
    line-height: 1.65;
}

/* Footer */
.modal-footer {
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--border) !important;
    background: #fafaf8;
    gap: .5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Separador interno (hr dentro de modal-body) */
.modal-body hr {
    border-color: var(--border);
    margin: 1rem 0;
}

/* Labels y campos dentro de modal */
.modal-body .form-group { margin-bottom: 1rem; }

.modal-body .form-control {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .87rem;
    color: var(--text);
    background: #fff;
    padding: .48rem .9rem;
    height: auto;
    transition: border-color var(--t1), box-shadow var(--t1);
    box-shadow: none;
}
.modal-body .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(201,162,74,.14) !important;
    outline: none;
    background: #fff;
}
.modal-body .form-control::placeholder { color: var(--text-muted); opacity: 1; }
.modal-body .form-control.is-invalid   { border-color: var(--err); }
.modal-body .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(192,57,43,.14) !important;
}

/* Select en modal */
.modal-body select.form-control {
    -webkit-appearance: auto;
    appearance: auto;
    padding-right: 2rem;
    cursor: pointer;
}

/* Textarea en modal */
.modal-body textarea.form-control { resize: vertical; min-height: 90px; }

/* Input groups en modal */
.modal-body .input-group-text {
    background: #fafaf8;
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    font-size: .87rem;
    font-weight: 500;
    /* mismo padding que .form-control para alinear verticalmente */
    padding: .48rem .9rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    border-radius: 8px;
}
.modal-body .input-group-prepend .input-group-text { border-radius: 8px 0 0 8px; border-right: none; }
.modal-body .input-group-append  .input-group-text { border-radius: 0 8px 8px 0; border-left:  none; }
.modal-body .input-group .form-control:not(:first-child) { border-left: none; border-radius: 0 8px 8px 0; }
.modal-body .input-group .form-control:not(:last-child)  { border-right: none; border-radius: 8px 0 0 8px; }
/* foco: todo el grupo destaca a la vez */
.modal-body .input-group:focus-within .input-group-text { border-color: var(--brand); }

/* File input en modal */
.modal-body .form-control-file {
    font-size: .83rem;
    color: var(--text-2);
    display: block;
    width: 100%;
    padding: .35rem 0;
    cursor: pointer;
}
/* Botón nativo del file input */
.modal-body .form-control-file::file-selector-button,
.modal-body .form-control-file::-webkit-file-upload-button {
    background: var(--brand-xlight);
    color: var(--brand);
    border: 1.5px solid rgba(201,162,74,.35);
    border-radius: 6px;
    padding: .28rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    margin-right: .65rem;
    transition: background var(--t1), border-color var(--t1);
}
.modal-body .form-control-file::file-selector-button:hover,
.modal-body .form-control-file::-webkit-file-upload-button:hover {
    background: rgba(201,162,74,.2);
    border-color: var(--brand);
}
/* Mismo botón fuera del modal (dentro de #panel-content) */
#panel-content .form-control-file::file-selector-button,
#panel-content .form-control-file::-webkit-file-upload-button {
    background: var(--brand-xlight);
    color: var(--brand);
    border: 1.5px solid rgba(201,162,74,.35);
    border-radius: 6px;
    padding: .28rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    margin-right: .65rem;
    transition: background var(--t1), border-color var(--t1);
}
#panel-content .form-control-file::file-selector-button:hover,
#panel-content .form-control-file::-webkit-file-upload-button:hover {
    background: rgba(201,162,74,.2);
    border-color: var(--brand);
}

/* Labels */
.modal-body label,
.modal-body .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: .3rem;
    display: block;
}

/* Icono decorativo en modal-title */
.modal-title-icon { color: #c084fc; font-size: .8rem; }

/* Tamaños */
.modal-sm  .modal-content { max-width: 380px; }
.modal-lg  .modal-content { max-width: 700px; }
.modal-xl  .modal-content { max-width: 900px; }

/* ═══════════════════════════════════════════════════
   [17] EMPTY STATES
═══════════════════════════════════════════════════ */
.panel-empty-state {
    padding: 3rem 2rem;
    text-align: center;
}
.panel-empty-state .fa {
    font-size: 2.5rem;
    color: var(--border);
    display: block;
    margin-bottom: .85rem;
}
.panel-empty-state-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: .3rem;
}
.panel-empty-state-text {
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* ═══════════════════════════════════════════════════
   [18] SOS — COMPLETO
   (index, create, show, mis-propuestas)
═══════════════════════════════════════════════════ */

/* ── Etiqueta de sección ── */
.sos-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 1rem 0 .6rem;
    display: block;
}

/* ── Card principal (lista activos) ── */
.sos-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
    padding: 1.1rem 1.25rem;
    margin-bottom: .6rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: box-shadow var(--t1), transform var(--t1);
}
.sos-card:hover { box-shadow: var(--card-shadow-h); transform: translateY(-1px); }
.sos-card--ofertado { border-color: var(--brand); }
.sos-card--aceptado { border-color: var(--ok); }

.sos-card__body { flex: 1; min-width: 0; }
.sos-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .4rem;
}
.sos-card__especialidad {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
}
.sos-card__titulo {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .3rem;
}
.sos-card__desc {
    font-size: .83rem;
    color: var(--text-2);
    margin-bottom: .6rem;
    line-height: 1.55;
}
.sos-card__footer {
    display: flex;
    align-items: center;
    font-size: .75rem;
    color: var(--text-muted);
}
.sos-card__fecha,
.sos-card__vence { display: inline-flex; align-items: center; gap: .25rem; }
.sos-card__actions { flex-shrink: 0; }
.sos-card__ofertas-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--brand-xlight);
    color: var(--brand-dark);
    padding: .15rem .65rem;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 700;
}

/* Legacy (non-BEM) aliases */
.sos-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .3rem;
}
.sos-card-meta {
    font-size: .76rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: .6rem .9rem;
    margin-bottom: .5rem;
}
.sos-card-meta .fa { color: var(--brand); }

/* ── Tabla historial (index) ── */
.sos-historial thead th {
    background: #fafaf8;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding: .65rem 1rem;
}
.sos-historial tbody td {
    padding: .6rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-l);
    font-size: .85rem;
}
.sos-historial tbody tr:last-child td { border-bottom: none; }
.sos-historial tbody tr:hover td { background: var(--brand-xlight); }

/* ── Formulario SOS (create) ── */
.sos-form-section { margin-bottom: 1.5rem; }
.sos-form-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-muted);
    margin-bottom: .5rem;
    display: block;
}

/* Geolocalización box */
.geo-box {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    background: var(--border-l);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.geo-icon { font-size: 1.5rem; color: var(--brand); flex-shrink: 0; }
.geo-status { font-size: .82rem; color: var(--text-2); flex: 1; }
.geo-status strong { display: block; font-size: .85rem; color: var(--text); margin-bottom: 2px; }
.geo-btn { flex-shrink: 0; }

/* Método de pago */
.metodo-pago-opt {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: .75rem 1rem;
    cursor: pointer;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    transition: border-color var(--t1), background var(--t1);
}
.metodo-pago-opt:hover { border-color: var(--brand); background: var(--brand-xlight); }
.metodo-pago-opt input[type=radio] { accent-color: var(--brand); }
.metodo-pago-opt .mp-label { font-size: .88rem; font-weight: 600; color: var(--text); }
.metodo-pago-opt .mp-desc  { font-size: .76rem; color: var(--text-muted); }
.metodo-pago-opt .mp-icon  { font-size: 1.1rem; color: var(--brand); width: 22px; text-align: center; }
.metodo-pago-opt.selected  { border-color: var(--brand); background: var(--brand-xlight); }

/* Rubro tabs */
.sos-rubro-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.sos-rubro-tab {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: .55rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-2);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: border-color var(--t1), background var(--t1), color var(--t1);
}
.sos-rubro-tab:hover  { border-color: var(--brand); color: var(--brand); background: var(--brand-xlight); }
.sos-rubro-tab.active { border-color: var(--brand); background: var(--brand); color: #0D0D0D; font-weight: 700; }

/* ── Detail header (show) ── */
.sos-detail-header {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.sos-detail-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .4rem;
}
.sos-detail-meta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.sos-detail-chip {
    background: var(--border-l);
    border-radius: 20px;
    padding: .2rem .75rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.sos-detail-desc { font-size: .9rem; color: var(--text-2); line-height: 1.7; margin-bottom: 0; }
.sos-detail-ref  { font-size: .82rem; color: var(--text-muted); margin-top: .5rem; }
.sos-detail-actions { border-top: 1px solid var(--border); padding-top: .85rem; margin-top: .85rem; }

/* ── Timeline de estado ── */
.sos-timeline {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.sos-timeline-step {
    flex: 1;
    padding: .6rem .5rem;
    text-align: center;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    background: var(--border-l);
    border-right: 1px solid var(--border);
}
.sos-timeline-step:last-child { border-right: none; }
.sos-timeline-step.done   { background: var(--ok-bg);  color: var(--ok); }
.sos-timeline-step.active { background: var(--brand); color: #0D0D0D; font-weight: 700; }

/* ── Propuestas / ofertas ── */
.oferta-card {
    border: 1.5px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1rem 1.25rem;
    margin-bottom: .85rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: border-color var(--t1);
}
.oferta-card--aceptada { border-color: var(--ok); background: var(--ok-bg); }
.oferta-card--rechazada { opacity: .5; }
.oferta-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand);
    color: #0D0D0D;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.oferta-nombre  { font-weight: 700; font-size: .9rem; color: var(--text); }
.oferta-valor   { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--brand); margin: .15rem 0; }
.oferta-jornales{ font-size: .78rem; color: var(--text-muted); }
.oferta-mensaje { font-size: .83rem; color: var(--text-2); margin-top: .35rem; font-style: italic; }
.oferta-actions { margin-top: .75rem; display: flex; gap: .5rem; }
.oferta-time    { font-size: .72rem; color: var(--text-muted); min-width: 70px; text-align: right; flex-shrink: 0; }

/* ── Confirmar finalizado ── */
.sos-confirmar-box {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    background: var(--ok-bg);
    border: 1px solid rgba(46,139,87,.3);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: .85rem;
}
.sos-confirmar-icon  { font-size: 1.5rem; color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.sos-confirmar-body  { flex: 1; }
.sos-confirmar-title { font-weight: 700; font-size: .9rem; color: var(--ok); margin-bottom: .3rem; }
.sos-confirmar-text  { font-size: .83rem; color: var(--text-2); margin-bottom: .65rem; }
.sos-confirmar-date  { display: block; font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }

/* ── Datos dl (sidebar show) ── */
.sos-data-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem .75rem;
    font-size: .84rem;
    margin-bottom: 0;
}
.sos-data-dl dt { color: var(--text-muted); font-weight: 600; }
.sos-data-dl dd { margin-bottom: 0; color: var(--text-2); }

/* ── Profesional asignado card ── */
.card--prof-asignado {
    border: 1.5px solid var(--ok) !important;
}
.card--prof-asignado .card-header {
    background: var(--ok-bg);
}
.prof-asignado-name  { font-weight: 700; font-size: .95rem; color: var(--text); }
.prof-asignado-email { color: var(--text-muted); font-size: .83rem; }
.prof-asignado-valor {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ok);
    margin-top: .5rem;
}
.prof-asignado-jornales { font-size: .77rem; color: var(--text-muted); }

/* ── Info list (ol/card-body con texto explicativo) ── */
.sos-info-list {
    font-size: .84rem;
    color: var(--text-2);
    line-height: 1.8;
}

/* ── Alerts compactos ── */
.alert-sm { font-size: .82rem; padding: .5rem .85rem; }

/* ── Back link ── */
.panel-back-link {
    font-size: .82rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .85rem;
    text-decoration: none;
}
.panel-back-link:hover { color: var(--brand); }

/* ═══════════════════════════════════════════════════
   [19] CITAS — APPOINTMENT CARDS
═══════════════════════════════════════════════════ */
.cita-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: .6rem;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    transition: box-shadow var(--t1), transform var(--t1);
    border: 1px solid var(--card-border);
}
.cita-card:hover { box-shadow: var(--card-shadow-h); transform: translateY(-1px); }
.cita-card--pasada { opacity: .6; }
.cita-card--pasada:hover { transform: none; }

.cita-stripe { width: 5px; flex-shrink: 0; }
.cita-stripe--audiencia { background: #3b82f6; }
.cita-stripe--reunion   { background: var(--ok); }
.cita-stripe--gestion   { background: var(--warn); }
.cita-stripe--otro      { background: #9ca3af; }

.cita-card__fecha {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem .8rem;
    min-width: 62px;
    flex-shrink: 0;
    background: #fafaf8;
    border-right: 1px solid var(--border-l);
    text-align: center;
}
.cita-fecha__dia  { font-size: 1.45rem; font-weight: 900; color: var(--text); line-height: 1; }
.cita-fecha__mes  { font-size: .57rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); }
.cita-fecha__hora {
    font-size: .64rem;
    font-weight: 700;
    margin-top: .3rem;
    color: #0D0D0D;
    background: var(--brand);
    border-radius: 20px;
    padding: .1em .5em;
}

.cita-card__body { flex: 1; padding: .9rem 1.1rem; min-width: 0; }

/* Section label con línea */
.cita-section-label {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 0 0 .85rem;
}
.cita-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Header de la card */
.cita-card__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .3rem;
}

/* Tipo badge */
.tipo-badge-cita {
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .2em .6em;
    border-radius: 5px;
    display: inline-block;
}
.tipo-audiencia { background: #dbeafe; color: #1d4ed8; }
.tipo-reunion   { background: #d1fae5; color: #065f46; }
.tipo-gestion   { background: #fef3c7; color: #92400e; }
.tipo-otro      { background: #f1f5f9; color: #475569; }

/* Estado badge */
.estado-badge {
    font-size: .66rem;
    font-weight: 700;
    padding: .2em .6em;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.estado--pendiente  { background: var(--warn-bg); color: var(--warn); }
.estado--confirmado { background: var(--ok-bg);   color: var(--ok); }
.estado--rechazado  { background: var(--err-bg);  color: var(--err); }

/* Contenido */
.cita-titulo {
    font-weight: 700;
    font-size: .93rem;
    color: var(--text);
    margin-bottom: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cita-meta   { font-size: .77rem; color: var(--text-2); margin-bottom: .12rem; line-height: 1.5; }
.cita-meta i { width: 13px; color: var(--text-muted); }
.cita-nota-rechazo {
    font-size: .75rem;
    color: var(--err);
    background: var(--err-bg);
    border-radius: 6px;
    padding: .3rem .65rem;
    margin-top: .4rem;
    border: 1px solid #fecaca;
}

/* Panel de acciones */
.cita-card__actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    padding: .9rem 1rem;
    border-left: 1px solid var(--border-l);
    flex-shrink: 0;
    min-width: 148px;
}
.cita-card__actions--row {
    flex-direction: row;
    align-items: center;
}
.btn-cita-confirmar {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid #a7f3d0;
    padding: .35rem .8rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t1);
    width: 100%;
}
.btn-cita-confirmar:hover { background: #d1fae5; }
.btn-cita-rechazar {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--err-bg);
    color: var(--err);
    border: 1px solid #fca5a5;
    padding: .35rem .8rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t1);
    width: 100%;
}
.btn-cita-rechazar:hover { background: #fee2e2; }

.cita-card__estado-final {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1rem;
    border-left: 1px solid var(--border-l);
    flex-shrink: 0;
}

/* Estado vacío */
.cita-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: 1px dashed var(--border);
    color: var(--text-muted);
}
.cita-empty i { font-size: 2rem; display: block; margin-bottom: .65rem; opacity: .35; }
.cita-empty p { font-size: .88rem; margin: 0; color: var(--text-2); }

/* Botón toggle historial */
.btn-toggle-historial {
    font-size: .73rem;
    border-radius: 20px;
    padding: .2rem .75rem;
}

/* Modal de rechazo de cita (header con tono danger) */
.modal-header--danger {
    background: #fff8f8;
    border-bottom: 1px solid #fecaca !important;
}
.modal-title--danger { color: var(--err); }

/* ── Expedientes ── */
.exp-table thead th {
    background: #fafaf8;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding: .65rem 1rem;
}
.exp-table tbody td {
    padding: .65rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-l);
    font-size: .85rem;
}
.exp-table tbody tr:last-child td { border-bottom: none; }
.exp-table tbody tr:hover td { background: var(--brand-xlight); }

.badge-pagado    { background: var(--ok-bg); color: var(--ok); font-size: .72rem; }
.badge-pendiente { background: var(--warn-bg); color: var(--warn); font-size: .72rem; }
.badge-gratis    { background: var(--brand-xlight); color: var(--brand-dark); font-size: .72rem; }
.btn-disabled-lock { cursor: not-allowed; opacity: .5; }

/* ── SOS card actions column ── */
.sos-card__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* ═══════════════════════════════════════════════════
   [20] MINI STATS (wallet, documentos)
═══════════════════════════════════════════════════ */
.mini-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    box-shadow: var(--card-shadow);
}
.mini-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--brand-xlight);
    color: var(--brand);
}
.mini-stat-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.mini-stat-label { font-size: .73rem; color: var(--text-muted); font-weight: 500; }

/* Variantes de borde izquierdo para mini-stat */
.mini-stat-card--brand { border-left: 3px solid var(--brand)  !important; }
.mini-stat-card--ok    { border-left: 3px solid var(--ok)     !important; }
.mini-stat-card--err   { border-left: 3px solid var(--err)    !important; }
.mini-stat-card--info  { border-left: 3px solid var(--info)   !important; }
.mini-stat-card--warn  { border-left: 3px solid var(--warn)   !important; }

/* ── Info box (instrucciones / avisos informativos) ── */
.panel-info-box {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .95rem 1.25rem;
    border-radius: var(--card-radius);
    border: 1px solid transparent;
    margin-bottom: 1rem;
    font-size: .83rem;
    line-height: 1.6;
}
.panel-info-box--info {
    background: var(--info-bg);
    border-color: rgba(36,113,163,.22);
    color: #0369a1;
}
.panel-info-box--warn {
    background: var(--warn-bg);
    border-color: rgba(212,160,23,.3);
    color: #92600a;
}
.panel-info-box--ok {
    background: var(--ok-bg);
    border-color: rgba(46,139,87,.25);
    color: var(--ok);
}
.panel-info-box__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(36,113,163,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--info);
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.panel-info-box--warn .panel-info-box__icon {
    background: rgba(212,160,23,.12);
    color: var(--warn);
}
.panel-info-box--ok .panel-info-box__icon {
    background: rgba(46,139,87,.1);
    color: var(--ok);
}
.panel-info-box__title {
    font-size: .83rem;
    font-weight: 600;
    color: var(--info);
    margin-bottom: 2px;
}
.panel-info-box--warn .panel-info-box__title { color: #92600a; }
.panel-info-box--ok   .panel-info-box__title { color: var(--ok); }
.panel-info-box__body { margin: 0; }

/* ── Dashboard: alerta de próxima cita ── */
.dashboard-cita-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--brand-xlight), #F5EAD0);
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    padding: .9rem 1.25rem;
    margin-bottom: 1rem;
}
.dashboard-cita-alert__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}
.dashboard-cita-alert__body { flex: 1; min-width: 0; }
.dashboard-cita-alert__title {
    font-weight: 700;
    font-size: .88rem;
    color: var(--brand-dark);
    margin-bottom: 2px;
}
.dashboard-cita-alert__detail {
    font-size: .82rem;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-cita-alert__btn {
    background: var(--brand);
    color: #fff !important;
    border: none;
    font-size: .78rem;
    white-space: nowrap;
    padding: .35rem .85rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background var(--t1);
    flex-shrink: 0;
}
.dashboard-cita-alert__btn:hover { background: var(--brand-dark); }

/* ═══════════════════════════════════════════════════
   PRO UPGRADE — Dashboard banner + Sidebar widget
═══════════════════════════════════════════════════ */

/* ── Dashboard banner ── */
.pro-upgrade-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--brand-xlight), #fff);
    border: 1.5px solid var(--brand-light);
    border-radius: var(--card-radius);
    animation: fadeInUp .3s ease-out;
}
.pro-upgrade-banner--pending {
    background: linear-gradient(135deg, #fffbeb, #fff);
    border-color: #fde68a;
}
.pro-upgrade-banner--rejected {
    background: linear-gradient(135deg, #fef2f2, #fff);
    border-color: #fecaca;
}
.pro-upgrade-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}
.pro-upgrade-banner--pending .pro-upgrade-icon { background: #d97706; }
.pro-upgrade-banner--rejected .pro-upgrade-icon { background: var(--err); }
.pro-upgrade-body { flex: 1; min-width: 0; }
.pro-upgrade-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.pro-upgrade-sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.pro-upgrade-actions { flex-shrink: 0; }
.pro-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--brand);
    color: #fff !important;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s;
}
.pro-upgrade-btn:hover { opacity: .88; }
.pro-upgrade-btn--retry {
    background: var(--err);
}
.pro-upgrade-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
}

/* ── Sidebar upgrade widget ── */
.sidebar-pro-upgrade {
    margin: 4px 12px 8px;
}
.sidebar-pro-upgrade__inner {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    background: rgba(201,162,74,.12);
    border: 1px solid rgba(201,162,74,.25);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-light);
    text-decoration: none;
    transition: background .2s;
    cursor: pointer;
}
.sidebar-pro-upgrade__inner:hover {
    background: rgba(201,162,74,.22);
    color: #fff;
    text-decoration: none;
}
.sidebar-pro-upgrade__inner--pending {
    background: rgba(217,119,6,.1);
    border-color: rgba(217,119,6,.25);
    color: #fbbf24;
    cursor: default;
}
.sidebar-pro-upgrade__inner i:first-child { font-size: 13px; flex-shrink: 0; }
.sidebar-pro-upgrade__inner span { flex: 1; }
.sidebar-pro-upgrade__arrow { font-size: 10px; opacity: .7; }

/* ═══════════════════════════════════════════════════
   [21] FOOTER
═══════════════════════════════════════════════════ */
#panel-footer {
    background: var(--tb-bg);
    border-top: 1px solid var(--tb-border);
    padding: .85rem 1.5rem;
    flex-shrink: 0;
}
#panel-footer small { color: var(--text-muted); font-size: .76rem; }

/* ═══════════════════════════════════════════════════
   [25] CURSOS — CARDS DE CURSOS COMPRADOS
═══════════════════════════════════════════════════ */

/* Header de la página */
.cursos-page-title { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.cursos-page-sub   { font-size: .87rem; color: var(--text-muted); margin: 0; }
.btn-cursos-explore {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff !important;
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    transition: opacity var(--t1);
}
.btn-cursos-explore:hover { opacity: .88; }

/* Card */
.curso-card {
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    box-shadow: var(--card-shadow);
    background: var(--card-bg);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.curso-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(201,162,74,.15);
}

/* Imagen */
.curso-card__img {
    position: relative;
    overflow: hidden;
    height: 170px;
    background: #f3f4f6;
    flex-shrink: 0;
}
.curso-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s;
}

/* Badge vigencia */
.curso-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
}
.curso-badge--active  { background: rgba(11,224,85,.9); }
.curso-badge--expired { background: rgba(239,68,68,.9); }

/* Barra de progreso sobre la imagen */
.curso-progress-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.3);
}
.curso-progress-overlay__bar {
    height: 100%;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}

/* Body */
.curso-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.curso-cat {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--brand-dark);
    margin-bottom: 6px;
    display: block;
}
.curso-titulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.curso-instructor {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.curso-progress { margin-bottom: 16px; }
.curso-progress__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.curso-progress__clases { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.curso-progress__pct    { font-size: 12px; font-weight: 700; color: var(--brand-dark); }
.curso-progress__bar {
    background: #e5e7eb;
    border-radius: 9999px;
    height: 6px;
    overflow: hidden;
}
.curso-progress__fill {
    height: 100%;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-radius: 9999px;
    transition: width .5s;
}
.curso-progress__done {
    font-size: 11px;
    color: #0be055;
    font-weight: 700;
    margin-top: 4px;
}
.curso-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.curso-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff !important;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 0;
    text-decoration: none;
    transition: opacity var(--t1);
}
.curso-btn:hover { opacity: .88; }
.curso-btn--expired {
    display: block;
    width: 100%;
    text-align: center;
    background: #e5e7eb;
    color: var(--text-muted);
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 0;
    cursor: not-allowed;
    border: none;
}

/* Empty state cursos */
.curso-empty {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--border-l);
    border-radius: 16px;
    border: 1px dashed var(--border);
}
.curso-empty__icon  { font-size: 3rem; display: block; margin-bottom: 1rem; opacity: .4; }
.curso-empty__title { color: var(--text); font-weight: 700; font-size: 1rem; margin-bottom: .5rem; }
.curso-empty__text  { color: var(--text-muted); font-size: .87rem; margin-bottom: 1.5rem; }

/* ═══════════════════════════════════════════════════
   [26] DOCUMENTOS — HELPERS DE TABLA
═══════════════════════════════════════════════════ */

/* Celda: ícono + nombre de documento */
.doc-cell { display: flex; align-items: center; gap: 11px; }
.doc-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--brand-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: .85rem;
    flex-shrink: 0;
}
.doc-name { font-weight: 600; font-size: .85rem; color: var(--text); line-height: 1.3; }

/* Celda: avatar + nombre de usuario */
.user-cell { display: flex; align-items: center; gap: 8px; }
.user-avatar-sm {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -.5px;
}
.user-name-sm { font-size: .82rem; color: var(--text-2); }

/* Botones de acción inline en tabla de documentos */
.doc-action-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .18s, transform .18s;
    white-space: nowrap;
}
.doc-action-btn-sm:hover { opacity: .85; transform: translateY(-1px); text-decoration: none; }
.doc-action-btn-sm--view {
    background: var(--brand-xlight);
    color: var(--brand-dark) !important;
    border: 1px solid rgba(201,162,74,.3);
    margin-right: 4px;
}
.doc-action-btn-sm--download {
    background: var(--ok-bg);
    color: var(--ok) !important;
    border: 1px solid rgba(46,139,87,.25);
}

/* Badge gratis */
.doc-free-badge {
    display: inline-block;
    padding: 2px 10px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* Badge contador en card-header */
.table-card-count {
    font-size: .75rem;
    background: var(--brand-xlight);
    color: var(--brand);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   [24] PERFIL — PROFILE PAGE
═══════════════════════════════════════════════════ */

/* ── Alert panel inline ── */
.alert-panel {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1.1rem;
    border-radius: 8px;
    font-size: .84rem;
    line-height: 1.55;
    border: 1px solid transparent;
}
.alert-panel .fa { margin-top: 2px; flex-shrink: 0; }
.alert-panel--success {
    background: var(--ok-bg);
    border-color: rgba(46,139,87,.25);
    color: var(--ok);
}
.alert-panel--danger {
    background: var(--err-bg);
    border-color: rgba(192,57,43,.25);
    color: var(--err);
}

/* ── Banner de bloqueo SOS ── */
.sos-bloqueo-banner {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .95rem 1.2rem;
    border-radius: 8px;
    font-size: .84rem;
    line-height: 1.55;
    border: 1px solid transparent;
}
.sos-bloqueo-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.sos-bloqueo--info    { background: var(--info-bg);  border-color: rgba(36,113,163,.2); color: var(--info); }
.sos-bloqueo--info    .sos-bloqueo-icon { background: rgba(36,113,163,.1); }
.sos-bloqueo--warning { background: var(--warn-bg);  border-color: rgba(212,160,23,.25); color: var(--warn); }
.sos-bloqueo--warning .sos-bloqueo-icon { background: rgba(212,160,23,.12); }
.sos-bloqueo--danger  { background: var(--err-bg);   border-color: rgba(192,57,43,.25); color: var(--err); }
.sos-bloqueo--danger  .sos-bloqueo-icon { background: rgba(192,57,43,.1); }

/* ── Profile banner ── */
.profile-banner {
    background: linear-gradient(135deg, #0D0D0D 0%, #1e1a00 35%, #3a2800 70%, #5a3d00 100%);
    border-radius: var(--card-radius);
    border: 1px solid rgba(201,162,74,.2);
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.profile-banner::before {
    content: '';
    position: absolute;
    width: 240px; height: 240px;
    background: rgba(201,162,74,.05);
    border-radius: 50%;
    top: -80px; right: -40px;
    pointer-events: none;
}

.profile-banner-left {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.profile-banner-avatar {
    width: 58px; height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, #A8842F, #C9A24A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #0D0D0D;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(201,162,74,.4);
}

.profile-banner-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.profile-banner-username {
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    margin-top: 1px;
}
.profile-banner-role {
    display: inline-block;
    margin-top: 5px;
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #0D0D0D;
    background: var(--brand);
    border-radius: 20px;
    padding: .15em .65em;
}

.profile-banner-right {
    display: flex;
    gap: 2rem;
    flex-shrink: 0;
}
.profile-banner-stat { text-align: center; }
.profile-banner-stat-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand);
    line-height: 1;
    display: block;
    margin-bottom: 3px;
}
.profile-banner-stat-label {
    font-size: .66rem;
    color: rgba(255,255,255,.42);
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 500;
}

/* ── PFC: profile form card ── */
.pfc {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand);
    overflow: hidden;
}

/* Variantes de acento */
.pfc--brand   { border-left-color: var(--brand); }
.pfc--blue    { border-left-color: var(--info); }
.pfc--green   { border-left-color: var(--ok); }
.pfc--amber   { border-left-color: var(--warn); }
.pfc--neutral { border-left-color: #9ca3af; }
.pfc--red     { border-left-color: var(--err); }
.pfc--id      { border-left-color: var(--brand); }

.pfc-header {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.4rem .8rem;
    border-bottom: 1px solid var(--border-l);
}

.pfc-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--brand-xlight);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.pfc--blue   .pfc-icon { background: var(--info-bg);  color: var(--info); }
.pfc--green  .pfc-icon { background: var(--ok-bg);    color: var(--ok); }
.pfc--amber  .pfc-icon { background: var(--warn-bg);  color: var(--warn); }
.pfc--neutral .pfc-icon { background: #f3f4f6;        color: #6b7280; }
.pfc--red    .pfc-icon { background: var(--err-bg);   color: var(--err); }

.pfc-title {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.pfc-desc {
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.pfc-badge-optional {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 20px;
    padding: .2em .65em;
    margin-left: auto;
    align-self: center;
}

.pfc-body { padding: 1.2rem 1.4rem; }

/* ── Save bar ── */
.pfc-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.4rem;
    background: #fafaf8;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    flex-wrap: wrap;
}
.pfc-save-hint {
    font-size: .78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.pfc-save-hint .fa { color: var(--brand); }

/* ── Profile fields ── */
.profile-field { margin-bottom: 1rem; }
.profile-field:last-child { margin-bottom: 0; }

.profile-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: .35rem;
    display: block;
}

.profile-input {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .855rem;
    color: var(--text);
    padding: .48rem .85rem;
    background: #fff;
    transition: border-color var(--t1), box-shadow var(--t1);
    width: 100%;
}
.profile-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(201,162,74,.15);
    outline: none;
}

.profile-field-hint {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .3rem;
}

/* ── Profile section card (contraseña) ── */
.profile-section-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
    overflow: hidden;
}
.profile-section-header {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.4rem .8rem;
    border-bottom: 1px solid var(--border-l);
}
.profile-section-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.profile-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.profile-section-subtitle {
    font-size: .8rem;
    color: var(--text-muted);
}
.profile-section-body  { padding: .5rem 0; }
.profile-section-footer {
    padding: .9rem 1.4rem;
    border-top: 1px solid var(--border-l);
    background: #fafaf8;
    display: flex;
    justify-content: flex-end;
}

/* Variante danger del icono de sección */
.profile-section-icon--danger { background: rgba(239,68,68,.08); color: var(--err); }

/* Alert panel embebida dentro de profile-section (password section) */
.profile-section-body .alert-panel { margin: 1.1rem 1.5rem 0; }

/* pfc-header: el div de texto ocupa el espacio restante */
.pfc-header > div:not(.pfc-icon):not(.pfc-badge-optional) { flex: 1; min-width: 0; }

/* Ícono con color info (en hints del formulario) */
.icon-info { color: var(--info); }

/* ── Identity: fotos grid ── */
.id-fotos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 575.98px) { .id-fotos-grid { grid-template-columns: 1fr; } }

.id-foto-item {}
.id-foto-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: .4rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.id-foto-label .fa { color: var(--brand); }

.id-foto-thumb {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/3;
    background: #f3f4f6;
    border: 1px solid var(--border);
}
.id-foto-thumb--sm { max-width: 120px; aspect-ratio: 4/3; }
.id-foto-thumb img { width: 100%; height: 100%; object-fit: cover; }
.id-foto-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity var(--t1);
}
.id-foto-thumb:hover .id-foto-overlay { opacity: 1; }

.id-foto-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    aspect-ratio: 4/3;
    border: 2px dashed var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: .75rem;
    background: #fafaf8;
}
.id-foto-empty .fa { font-size: 1.4rem; color: var(--border); }

/* ── Identity: notices ── */
.id-pendiente-notice,
.id-verificado-notice,
.id-faltantes-notice {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 500;
}
.id-pendiente-notice {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid rgba(212,160,23,.2);
}
.id-verificado-notice {
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid rgba(46,139,87,.2);
}
.id-faltantes-notice {
    background: var(--err-bg);
    color: var(--err);
    border: 1px solid rgba(192,57,43,.2);
}

/* ── Identity: rechazo ── */
.id-rechazo-box {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem 1.1rem;
    background: var(--err-bg);
    border: 1px solid rgba(192,57,43,.2);
    border-radius: 8px;
}
.id-rechazo-icon {
    width: 34px; height: 34px;
    background: rgba(192,57,43,.1);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--err); font-size: 1rem; flex-shrink: 0;
}
.id-rechazo-title {
    font-size: .87rem; font-weight: 700; color: var(--err); margin-bottom: .3rem;
}
.id-rechazo-motivo {
    font-size: .82rem; color: var(--text-2);
    background: #fff; border-radius: 6px;
    padding: .45rem .7rem; margin-bottom: .4rem;
    border: 1px solid rgba(192,57,43,.15);
}
.id-rechazo-hint { font-size: .78rem; color: var(--text-muted); }

/* ── Identity: upload grid ── */
.id-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 767.98px) { .id-upload-grid { grid-template-columns: 1fr; } }

.id-upload-field {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: .9rem 1rem;
    background: #fafaf8;
    transition: border-color var(--t1);
}
.id-upload-field--required {
    border-color: rgba(192,57,43,.35);
    background: var(--err-bg);
}
.id-upload-field--done {
    border-color: rgba(46,139,87,.35);
    background: var(--ok-bg);
}

.id-upload-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .81rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: .5rem;
    cursor: default;
}
.id-upload-label .fa { color: var(--brand); }

.id-upload-badge {
    font-size: .62rem;
    font-weight: 700;
    padding: .15em .55em;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-left: auto;
}
.id-upload-badge--missing { background: var(--err-bg); color: var(--err); }
.id-upload-badge--ok      { background: var(--ok-bg);  color: var(--ok); }

.id-upload-hint {
    font-size: .75rem;
    color: var(--text-muted);
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    line-height: 1.45;
}

.id-upload-input {
    display: block;
    width: 100%;
    font-size: .8rem;
    color: var(--text-2);
    margin-top: .4rem;
}
.id-upload-input::file-selector-button {
    font-size: .78rem;
    font-weight: 600;
    color: var(--brand-dark);
    background: var(--brand-xlight);
    border: 1px solid var(--brand-light);
    border-radius: 6px;
    padding: .3em .7em;
    cursor: pointer;
    margin-right: .5rem;
    transition: background var(--t1);
}
.id-upload-input::file-selector-button:hover {
    background: var(--brand-light);
}

.id-upload-error {
    font-size: .75rem;
    color: var(--err);
    margin-top: .25rem;
}

/* ── Responsive banner ── */
@media (max-width: 767.98px) {
    .profile-banner { flex-direction: column; align-items: flex-start; padding: 1.35rem 1.25rem; }
    .profile-banner-right { gap: 1.25rem; }
}

/* ═══════════════════════════════════════════════════
   [22] ANIMACIONES
═══════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up { animation: fadeInUp .35s ease both; }
.fade-in-up:nth-child(2) { animation-delay: .06s; }
.fade-in-up:nth-child(3) { animation-delay: .12s; }
.fade-in-up:nth-child(4) { animation-delay: .18s; }

/* ═══════════════════════════════════════════════════
   [23] RESPONSIVE
═══════════════════════════════════════════════════ */

/* Tablet / Mobile */
@media (max-width: 991.98px) {
    #panel-sidebar {
        transform: translateX(-100%);
        z-index: 1050;
    }

    #panel-wrapper {
        margin-left: 0;
    }

    .topbar-toggle {
        display: flex;
    }

    body.sidebar-open #panel-sidebar {
        transform: translateX(0);
    }

    body.sidebar-open #sidebar-overlay {
        display: block;
    }

    .topbar-balance span { display: none; }
    .topbar-balance { padding: 5px 8px; }

    #panel-content { padding: 1rem 1rem 1.5rem; }

    .dashboard-welcome { padding: 1.35rem 1.25rem 1.2rem; }
    .dashboard-welcome-balance { text-align: left; margin-top: 1rem; }
    .dashboard-welcome-balance-amount { font-size: 1.4rem; }

    .cursos-dashboard-card { padding: 14px 16px; }
    .cursos-dc-stats { gap: 16px; }
}

@media (max-width: 575.98px) {
    #panel-content { padding: .75rem .75rem 1.5rem; }
    #panel-content .container-fluid { padding: 1.1rem !important; }

    .panel-stat-card .card-body { padding: 1.1rem 1.1rem .75rem; }
    .panel-stat-value { font-size: 1.35rem; }

    .cursos-dc-cta { display: none; }

    .quick-action-card { padding: .85rem .6rem; }
    .quick-action-icon { width: 38px; height: 38px; font-size: .95rem; }

    /* Citas: acciones en fila en mobile */
    .cita-card__actions,
    .cita-card__estado-final {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid var(--border-l);
        padding: .65rem 1rem;
        min-width: unset;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   AUTH — Login, registro, reset password
   Layout split: panel visual izquierdo + formulario derecho
   Usado por auth/master.blade.php
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset & base ── */
body.auth-body {
    min-height: 100vh;
    display: flex;
    font-family: 'Poppins', sans-serif;
    background: #111;
}

/* ── Panel izquierdo — visual ── */
.auth-visual {
    position: relative;
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.5rem 4rem;
    overflow: hidden;
    background: #0F1218;
}

.auth-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(201,162,74,.22) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 90% 80%, rgba(168,132,47,.14) 0%, transparent 55%),
        linear-gradient(160deg, #0F1218 0%, #1A1206 100%);
    z-index: 0;
}

.auth-visual::after {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 1.5px solid rgba(201,162,74,.12);
    top: -120px;
    right: -180px;
    z-index: 0;
}

.auth-visual__inner {
    position: relative;
    z-index: 1;
}

.auth-visual__ring {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(201,162,74,.10);
    bottom: 80px;
    left: -60px;
    z-index: 0;
}

.auth-visual__dots {
    position: absolute;
    bottom: 120px;
    right: 40px;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(circle, rgba(201,162,74,.25) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    z-index: 0;
    border-radius: 4px;
}

.auth-visual__badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(201,162,74,.12);
    border: 1px solid rgba(201,162,74,.25);
    border-radius: 20px;
    padding: .3rem .85rem;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: #C9A24A;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
}
.auth-visual__badge i { font-size: .65rem; }

.auth-visual__title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1.2rem;
    letter-spacing: -.02em;
}
.auth-visual__title span {
    background: linear-gradient(90deg, #C9A24A 0%, #F0D898 60%, #C9A24A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-visual__sub {
    font-size: .88rem;
    color: rgba(255,255,255,.5);
    line-height: 1.65;
    max-width: 340px;
    margin-bottom: 2.5rem;
}

.auth-visual__pills {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.auth-visual__pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: .3rem .85rem;
    font-size: .75rem;
    color: rgba(255,255,255,.65);
}
.auth-visual__pill i { color: #C9A24A; font-size: .7rem; }

.auth-visual__logo {
    max-height: 36px;
    max-width: 160px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .9;
    margin-bottom: 3rem;
}
.auth-visual__logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    margin-bottom: 3rem;
}

/* ── Panel derecho — formulario ── */
.auth-form-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 2rem;
    background: var(--bg, #F5F0E8);
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 85% 15%, rgba(201,162,74,.07) 0%, transparent 40%),
        radial-gradient(circle at 15% 85%, rgba(201,162,74,.05) 0%, transparent 35%);
}

.auth-form-box {
    width: 100%;
    max-width: 420px;
}

.auth-topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.8rem;
}

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: .35rem .7rem;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: #fff;
    transition: border-color .15s, color .15s;
}
.auth-back:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
    text-decoration: none;
}

.auth-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.09);
    padding: 2.4rem 2.2rem 2rem;
    border: 1px solid var(--border-l);
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand) 50%, var(--brand-light) 100%);
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-dark);
    margin-bottom: .8rem;
}
.auth-eyebrow::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}

.auth-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: .3rem;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.auth-sub {
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: 1.8rem;
    line-height: 1.5;
}

.auth-form label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: .35rem;
    display: block;
    letter-spacing: .01em;
}
.auth-form .form-group { margin-bottom: 1.1rem; }

.auth-form .input-icon-wrap { position: relative; }
.auth-form .input-icon-wrap .fa {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .85rem;
    pointer-events: none;
}
.auth-form .form-control {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: .9rem;
    padding: .72rem 1rem .72rem 2.6rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-shadow: none;
    -webkit-appearance: none;
}
.auth-form .form-control:focus {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201,162,74,.14);
    outline: none;
}
.auth-form .form-control::placeholder { color: var(--text-muted); opacity: 1; }
.auth-form .form-control.is-invalid   { border-color: #dc3545; background: #fff8f8; }
.auth-form .invalid-feedback { font-size: .74rem; color: #dc3545; margin-top: .3rem; }

.auth-forgot {
    display: block;
    text-align: right;
    font-size: .74rem;
    color: var(--text-muted);
    margin-top: .3rem;
    text-decoration: none;
    transition: color .15s;
}
.auth-forgot:hover { color: var(--brand-dark); text-decoration: none; }

.btn-auth-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .85rem 1rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #D4A840 0%, #A8842F 100%);
    color: #0D0D0D;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: box-shadow .2s, transform .15s;
    margin-top: 1.4rem;
    box-shadow: 0 4px 14px rgba(201,162,74,.3);
}
.btn-auth-primary:hover {
    box-shadow: 0 8px 24px rgba(201,162,74,.45);
    transform: translateY(-1px);
}
.btn-auth-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(201,162,74,.25); }

.btn-auth-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-2);
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
    margin-top: .75rem;
}
.btn-auth-secondary:hover {
    border-color: var(--brand);
    background: var(--brand-xlight);
    color: var(--brand-dark);
    text-decoration: none;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0 0;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border);
}

.auth-link-row {
    text-align: center;
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: 1.2rem;
}
.auth-link-row a {
    color: var(--brand-dark);
    font-weight: 600;
    text-decoration: none;
}
.auth-link-row a:hover { text-decoration: underline; }

.auth-footer-note {
    text-align: center;
    font-size: .73rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
}

/* ── Auth responsive ── */
@media (max-width: 767px) {
    body.auth-body { flex-direction: column; }

    .auth-visual {
        flex: none;
        padding: 2rem 1.5rem 1.8rem;
        min-height: auto;
    }
    .auth-visual__title { font-size: 1.75rem; }
    .auth-visual__sub   { display: none; }
    .auth-visual__pills { display: none; }
    .auth-visual__logo  { margin-bottom: 1rem; }
    .auth-visual__logo-text { margin-bottom: 1rem; }

    .auth-form-side {
        flex: 1;
        padding: 1.8rem 1.2rem 3rem;
        min-height: auto;
        background-image: none;
    }
    .auth-card { padding: 1.8rem 1.4rem 1.6rem; }
}