/* ============================================================
   responsive-scale.css — auto-fit layout without horizontal scroll
   -----------------------------------------------------------
   NO JS zoom. Pure CSS. Makes the existing fixed-px dashboard
   design flex/wrap/scale to any viewport from phone to 4K.
   Never produces a horizontal scrollbar.

   Three things this file does:
     1. Caps body/html so horizontal scroll can't appear anywhere.
     2. Removes the hard-coded `max-width: 1400px` on main-content
        (which was leaving 4K desktops mostly empty) and lets it
        fill the available space, centered on very wide screens.
     3. Adds narrow-window rules so cards, tables, and grids
        reflow instead of clipping.

   Loaded AFTER the main stylesheet so these rules win.
   ============================================================ */

/* ---------- 0.  No horizontal scroll, ever  ---------- */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ---------- 1.  Dashboard shell fills the viewport cleanly ---------- */
.dashboard-layout {
    width: 100%;
    max-width: none !important;  /* was unset — pin it so nothing down-caps */
}

/* The fixed sidebar + main-wrap layout now auto-flexes. On huge
   (4K) monitors the main-wrap still fills the remaining width,
   and the inner content gets a sane max-width + centered so text
   lines aren't absurdly long. */
.main-wrap {
    width: auto !important;
    max-width: none !important;
}

/* Kill the hard 1400px cap + overflow:hidden that was clipping
   content on wide displays. Replace with a fluid, auto-centered
   container. `overflow: visible` so section panels' own scroll
   rules still work. */
.main-content {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    min-height: calc(100vh - var(--topbar-height, 60px)) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    /* keep the original padding from dashboard.css — don't
       override unless narrow (rule below) */
}

/* Inside that unbounded main-content, cap the inner SECTION
   panels to a comfortable reading width on huge screens, so the
   UI doesn't stretch to 3800px wide. Generous enough that
   everything still looks exactly like the reference design on
   1920-sized laptops. */
.section-panel {
    max-width: 1800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
}

/* ---------- Desktop app-shell: kill the window scroll, scroll INSIDE ----------
   On wide screens the DASHBOARD is an app shell: the window itself never
   scrolls (no right-side browser scrollbar on any page). Scoped with
   :has(.main-content) so the PUBLIC marketing site — which also loads this
   file but has no .main-content — keeps its normal full-page scroll.

   Two scroll behaviors inside the shell:
     • A normal single-panel page (Detalle, Configuración, Eventos, Email)
       scrolls inside its OWN panel — never the window.
     • A BOARD page (Clientes / Gestión de Cursos / Órdenes / Personal) does
       NOT scroll the board at all; only each column's inner list
       (.emp-panel-body) scrolls. The toolbar + grid flex so the columns
       fill the leftover height. (This is the fix for the Gestión de Cursos
       overflow + the unwanted whole-board scrollbar.)
   ≤1200px keeps the natural body scroll above (mobile pass unaffected). */
@media (min-width: 1201px) {
    /* Kill the browser/window scrollbar — dashboards only. */
    html:has(.main-content) { overflow: hidden !important; }
    body:has(.main-content) { height: 100vh !important; min-height: 0 !important; overflow: hidden !important; }

    .main-content {
        height: 100vh !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Normal single-panel section: scroll within the panel, not the window. */
    .section-panel.active {
        max-height: calc(100vh - var(--topbar-height, 60px) - 32px) !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(155,89,182,0.25) transparent;
    }
    .section-panel.active::-webkit-scrollbar { width: 8px; }
    .section-panel.active::-webkit-scrollbar-thumb { background: rgba(155,89,182,0.25); border-radius: 5px; }
    .section-panel.active::-webkit-scrollbar-track { background: transparent; }

    /* BOARD sections: the board NEVER scrolls — only the column lists do.
       Becomes a flex column so the toolbar stays put and the grid fills the
       remaining height; the grid's columns stretch to it and their
       .emp-panel-body lists handle all scrolling. */
    #sec-clientes.active,
    #sec-cursos-gestion.active,
    #sec-ordenes.active,
    #sec-personal.active {
        height: calc(100vh - var(--topbar-height, 60px) - 32px) !important;
        max-height: calc(100vh - var(--topbar-height, 60px) - 32px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #sec-clientes.active  .emp-clientes-grid,
    #sec-cursos-gestion.active .emp-cursos-grid,
    #sec-ordenes.active   .emp-orders-grid,
    #sec-personal.active  .emp-personal-grid {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        align-items: start !important;     /* columns size to their content… */
    }
    #sec-clientes.active  .emp-panel,
    #sec-cursos-gestion.active .emp-panel,
    #sec-ordenes.active   .emp-orders-panel,
    #sec-personal.active  .emp-panel {
        max-height: 100% !important;       /* …but never taller than the board */
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* So a SHORT column (few items) stays short, and a column TALLER than the
       viewport caps at the board height and scrolls its own .emp-panel-body
       (already flex:1 + overflow-y:auto) — the board itself never scrolls. */
}

/* ---------- 2.  Cards, grids, rows — allow wrapping ---------- */
.card {
    box-sizing: border-box;
    max-width: 100%;
}

.stats-grid,
.courses-grid,
.certs-grid,
.analytics-grid,
.rec-courses-grid,
.ext-certs-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}

.client-row-split,
.venta-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)) !important;
}

.locations-row {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
}

/* ---------- 3.  Tables — reflow into cards on narrow viewports ---------- */
/* Desktop: normal table. .table-wrap holds the table; no internal
   scroll needed since section content fits. */
.table-wrap {
    max-width: 100% !important;
    overflow-x: visible !important;
}

/* Tablet (769–1100px): table still horizontal but cells get a
   smaller minimum and the column styles relax so content wraps
   instead of spilling. */
@media (min-width: 769px) and (max-width: 1100px) {
    .data-table th,
    .data-table td {
        font-size: 0.78rem !important;
        padding: 8px 10px !important;
        white-space: normal !important;
    }
    .data-table td code {
        font-size: 0.7rem !important;
        word-break: break-all !important;
    }
}

/* Narrow phones, tablets in portrait, resized windows: collapse
   every .data-table into one card per row. Header hidden, cells
   stack, labels rendered via CSS ::before so the JS that fills
   tbody doesn't need to change. Each table section uses its own
   nth-child rules below. */
@media (max-width: 768px) {
    .table-wrap {
        overflow-x: visible !important;
    }
    .data-table {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
    }
    .data-table thead { display: none !important; }
    .data-table tbody { display: block !important; width: 100% !important; }
    .data-table tbody tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        background: var(--white) !important;
        border: 1px solid rgba(155,89,182,0.18) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        box-sizing: border-box !important;
    }
    body.dark-theme .data-table tbody tr {
        background: #1c1630 !important;
        border-color: #2a2040 !important;
    }
    .data-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(155,89,182,0.08) !important;
        text-align: right !important;
        font-size: 0.82rem !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .data-table tbody td:last-child { border-bottom: 0 !important; }
    .data-table tbody td::before {
        content: attr(data-label);
        font-weight: 700 !important;
        color: var(--gray-500) !important;
        font-size: 0.72rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        text-align: left !important;
        flex-shrink: 0 !important;
    }
    /* Stats grid on mobile — 1 or 2 columns max */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 10px !important;
    }
    .stat-card { padding: 12px !important; }
    .stat-card h4 { font-size: 1.5rem !important; }
    /* Toolbar wraps */
    .clients-toolbar,
    .orders-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .clients-toolbar .search-box,
    .orders-filter-bar .search-box { width: 100% !important; }
}

/* Fallback labels for data-tables in the EMPLOYEE & ADMIN dashboards
   (6-col Clientes, 6-col Cursos, etc). These read from a data-label
   attr the renderer sets — if it's not set, nothing is rendered, so
   this is purely additive. */
@media (max-width: 768px) {
    /* Clientes (Empleado/Admin) */
    #sec-clientes .data-table tbody td:nth-child(1)::before { content: 'Cliente'; }
    #sec-clientes .data-table tbody td:nth-child(2)::before { content: 'Profesión'; }
    #sec-clientes .data-table tbody td:nth-child(3)::before { content: 'Licencia'; }
    #sec-clientes .data-table tbody td:nth-child(4)::before { content: 'Vencimiento'; }
    #sec-clientes .data-table tbody td:nth-child(5)::before { content: 'Progreso'; }
    #sec-clientes .data-table tbody td:nth-child(6)::before { content: 'Acción'; }
    /* Gestión de Cursos */
    #sec-cursos-gestion .data-table tbody td:nth-child(1)::before { content: 'Curso'; }
    #sec-cursos-gestion .data-table tbody td:nth-child(2)::before { content: 'Horas'; }
    #sec-cursos-gestion .data-table tbody td:nth-child(3)::before { content: 'Precio'; }
    #sec-cursos-gestion .data-table tbody td:nth-child(4)::before { content: 'Inscritos'; }
    #sec-cursos-gestion .data-table tbody td:nth-child(5)::before { content: 'Estado'; }
    #sec-cursos-gestion .data-table tbody td:nth-child(6)::before { content: 'Acciones'; }
    /* Órdenes */
    #sec-ordenes .data-table tbody td:nth-child(1)::before { content: 'Fecha'; }
    #sec-ordenes .data-table tbody td:nth-child(2)::before { content: 'Cliente'; }
    #sec-ordenes .data-table tbody td:nth-child(3)::before { content: 'Cursos'; }
    #sec-ordenes .data-table tbody td:nth-child(4)::before { content: 'Monto'; }
    #sec-ordenes .data-table tbody td:nth-child(5)::before { content: 'Pago'; }
    #sec-ordenes .data-table tbody td:nth-child(6)::before { content: 'Origen'; }
    #sec-ordenes .data-table tbody td:nth-child(7)::before { content: 'Estado'; }
    #sec-ordenes .data-table tbody td:nth-child(8)::before { content: 'Acción'; }
}

/* ---------- 4.  Narrow-window refinements (desktop to tablet) ---------- */
/* Between the mobile breakpoint (~768px) and 1280px, tighten
   padding and let flex items stack so nothing clips. Below 768
   the existing mobile rules from dashboard.css take over. */
@media (max-width: 1280px) {
    .main-content {
        padding: 12px !important;
        padding-top: calc(var(--topbar-height, 60px) + 12px) !important;
    }
    .card { padding: 14px !important; }
    .client-row-split,
    .venta-layout,
    .locations-row {
        grid-template-columns: 1fr !important;
    }
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
}

/* ---------- 5.  Huge-screen refinements (4K+) ---------- */
/* On a 4K+ monitor with a 260px sidebar, the remaining ~3580px
   is too wide for comfortable reading. Our section-panel max
   above already caps content, this just makes sure the main
   content area has breathing room. */
@media (min-width: 2000px) {
    .main-content {
        padding: 24px !important;
        padding-top: calc(var(--topbar-height, 60px) + 24px) !important;
    }
}

@media (min-width: 2600px) {
    .main-content {
        padding: 40px !important;
        padding-top: calc(var(--topbar-height, 60px) + 40px) !important;
    }
    .section-panel {
        max-width: 2000px !important;
    }
}

/* ---------- 6.  Public site (home / cursos / 404) — already mostly fluid ---------- */
/* Belt-and-suspenders: the public marketing pages use their own
   styles.css and should never scroll horizontally either. */
body > .container,
body > nav,
body > footer {
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* ============================================================
   EMPLOYEE DASHBOARD — 3-panel Clientes view
   Buscar / Licencias Venciendo / Recientes
   ============================================================ */
.emp-clientes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start;
}

.emp-panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--topbar-height, 60px) - 56px);
    overflow: hidden;
    padding: 16px !important;
}

.emp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.emp-panel-head h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--dark);
    margin: 0;
    display: flex;
    align-items: center;
}
.emp-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 50px;
    background: rgba(155,89,182,0.12);
    color: var(--purple);
    font-weight: 800;
    font-size: 0.8rem;
}
.emp-panel-sub {
    font-size: 0.72rem;
    color: var(--gray-500);
    margin: 0 0 10px;
    line-height: 1.4;
}
.emp-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(155,89,182,0.25) transparent;
}
.emp-panel-body::-webkit-scrollbar { width: 6px; }
.emp-panel-body::-webkit-scrollbar-thumb { background: rgba(155,89,182,0.25); border-radius: 4px; }

/* Compact client row-card — shared across the 3 panels */
.emp-client-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.emp-client-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(155,89,182,0.04);
    border: 1px solid rgba(155,89,182,0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.emp-client-row:hover {
    background: rgba(155,89,182,0.10);
    border-color: rgba(155,89,182,0.30);
    transform: translateY(-1px);
}
.emp-client-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a8e063, #9b59b6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.78rem;
}
.emp-client-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.emp-client-text strong {
    font-size: 0.85rem;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.emp-client-text span {
    font-size: 0.7rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.emp-client-meta {
    text-align: right;
    font-size: 0.7rem;
    color: var(--gray-500);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    white-space: nowrap;
}
.emp-client-meta small { font-size: 0.66rem; line-height: 1.25; }
.emp-client-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.emp-client-actions .btn { padding: 5px 9px; font-size: 0.72rem; }

/* Licencia status pill — used in the Venciendo panel meta */
.emp-lic-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff;
}
.emp-lic-pill.warn   { background: #f59e0b; }
.emp-lic-pill.danger { background: #e17055; }

/* Empty-state within each panel body */
.emp-empty-hint {
    text-align: center;
    padding: 32px 18px;
    color: var(--gray-500);
}
.emp-empty-hint i { font-size: 2rem; color: var(--purple); opacity: 0.45; margin-bottom: 10px; }
.emp-empty-hint p { font-size: 0.85rem; margin: 4px 0 6px; color: var(--gray-700); }
.emp-empty-hint small { font-size: 0.72rem; color: var(--gray-500); }
.emp-list-foot {
    padding: 10px 8px 2px;
    font-size: 0.7rem;
    color: var(--gray-500);
    text-align: center;
}

/* Dark theme tweaks */
body.dark-theme .emp-client-row {
    background: rgba(155,89,182,0.08);
    border-color: #2a2040;
}
body.dark-theme .emp-client-row:hover {
    background: rgba(155,89,182,0.18);
    border-color: rgba(155,89,182,0.40);
}
body.dark-theme .emp-client-text strong { color: #f0ecf8; }

/* Narrow windows / tablet: stack the 3 panels */
@media (max-width: 1200px) {
    .emp-clientes-grid { grid-template-columns: 1fr; }
    .emp-panel { max-height: none; }
    .emp-panel-body { max-height: 420px; }
}

/* ============================================================
   EMPLOYEE DASHBOARD — 4-panel Órdenes view
   Arecibo / Bayamón / Gurabo / Web
   ============================================================ */
.emp-orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 12px;
}
.emp-orders-toolbar > * { align-self: center; }
/* Uniform toolbar tile sizing — every button / input / select is 36px tall */
.emp-tb-btn {
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    white-space: nowrap;
}
.emp-tb-dots {
    width: 36px;
    padding: 0;
    justify-content: center;
}
.emp-tb-search {
    flex: 0 1 260px;
    min-width: 160px;
    margin-bottom: 0 !important; /* kills the 20px gap from base .search-box */
    display: flex;
    align-items: center;
}
.emp-tb-search input {
    height: 36px !important;
    box-sizing: border-box !important;
    font-size: 0.85rem !important;
    padding: 0 12px 0 34px !important;
    line-height: 34px !important;
}
.emp-tb-search i {
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.emp-tb-range {
    height: 36px;
    padding: 0 28px 0 12px;
    font-size: 0.82rem;
    min-width: 110px;
    max-width: 130px;
}

.emp-orders-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.emp-orders-sum-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.emp-orders-sum-card i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(155,89,182,0.12);
    color: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.emp-orders-sum-card h4 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--dark);
    margin: 0 0 2px;
    line-height: 1.1;
}
.emp-orders-sum-card p {
    font-size: 0.7rem;
    color: var(--gray-500);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
body.dark-theme .emp-orders-sum-card {
    background: #1c1630;
    border-color: #2a2040;
}
body.dark-theme .emp-orders-sum-card h4 { color: #f0ecf8; }

.emp-orders-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: start;
}
.emp-orders-panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--topbar-height, 60px) - 180px);
    overflow: hidden;
    padding: 14px !important;
}
.emp-orders-panel .emp-panel-head h3 { font-size: 0.9rem; }
.emp-orders-total {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--dark);
    margin: 2px 0 10px;
}
body.dark-theme .emp-orders-total { color: #f0ecf8; }

/* Compact sale row card */
.emp-order-row {
    padding: 10px;
    border-radius: 10px;
    background: rgba(155,89,182,0.04);
    border: 1px solid rgba(155,89,182,0.12);
    cursor: pointer;
    margin-bottom: 6px;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.emp-order-row:hover {
    background: rgba(155,89,182,0.1);
    border-color: rgba(155,89,182,0.3);
    transform: translateY(-1px);
}
body.dark-theme .emp-order-row {
    background: rgba(155,89,182,0.08);
    border-color: #2a2040;
}
body.dark-theme .emp-order-row:hover {
    background: rgba(155,89,182,0.18);
    border-color: rgba(155,89,182,0.4);
}
.emp-order-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.emp-order-top strong {
    font-size: 0.82rem;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
body.dark-theme .emp-order-top strong { color: #f0ecf8; }
.emp-order-amt {
    font-size: 0.92rem;
    font-weight: 800;
    color: #10b981;
    flex-shrink: 0;
}
.emp-order-mid {
    font-size: 0.72rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.emp-order-bot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: var(--gray-500);
    flex-wrap: wrap;
}
.emp-order-method {
    padding: 1px 8px;
    border-radius: 50px;
    background: rgba(52,152,219,0.12);
    color: #2980b9;
    font-weight: 700;
    font-size: 0.64rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.emp-order-ref {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: monospace;
    font-size: 0.66rem;
    color: var(--gray-500);
}
.emp-order-ref i { font-size: 0.56rem; }

/* Reverse-fulfillment delete button — admin/owner only. Lives in the
   bottom row of an order card; reveals on row hover. */
.emp-order-del {
    margin-left: auto;
    background: transparent;
    border: 1px solid transparent;
    color: var(--gray-400);
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 0.72rem;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.emp-order-row:hover .emp-order-del { opacity: 1; }
.emp-order-del:hover {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.35);
    color: #dc3545;
}

/* Responsive: collapse to 2 cols below 1400, 1 col on narrow */
@media (max-width: 1400px) {
    .emp-orders-grid { grid-template-columns: repeat(2, 1fr); }
    .emp-orders-panel { max-height: 500px; }
}
@media (max-width: 820px) {
    .emp-orders-grid { grid-template-columns: 1fr; }
    .emp-orders-panel { max-height: 400px; }
}

/* ============================================================
   Actions dropdown + Nueva Venta & Reporte modals
   ============================================================ */
.emp-dd-wrap { position: relative; }
.emp-dd-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 200px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 500;
    display: none;
}
.emp-dd-wrap.open .emp-dd-menu { display: block; }
.emp-dd-menu button {
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--dark);
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}
.emp-dd-menu button i { width: 16px; color: var(--purple); }
.emp-dd-menu button:hover { background: rgba(155,89,182,0.08); }
.emp-dd-divider { height: 1px; background: var(--gray-200); margin: 4px 2px; }
body.dark-theme .emp-dd-menu { background: #1c1630; border-color: #2a2040; }
body.dark-theme .emp-dd-menu button { color: #f0ecf8; }
body.dark-theme .emp-dd-menu button:hover { background: rgba(155,89,182,0.15); }
body.dark-theme .emp-dd-divider { background: #2a2040; }

.emp-report-overlay, .emp-sale-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,10,26,0.75);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
/* The `hidden` HTML attribute must win over our default display:flex so
   the modals stay closed until explicitly opened by JS. */
.emp-report-overlay[hidden],
.emp-sale-overlay[hidden] { display: none !important; }
.emp-report-modal, .emp-sale-modal {
    background: var(--white);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.emp-sale-modal { max-width: 920px; }
body.dark-theme .emp-report-modal,
body.dark-theme .emp-sale-modal { background: #1c1630; }

.emp-report-head, .emp-sale-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--gray-200);
}
body.dark-theme .emp-report-head,
body.dark-theme .emp-sale-head { border-color: #2a2040; }
.emp-report-head h3, .emp-sale-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--dark);
}
body.dark-theme .emp-report-head h3,
body.dark-theme .emp-sale-head h3 { color: #f0ecf8; }
.emp-report-close {
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--gray-500);
    font-size: 1rem;
}
.emp-report-close:hover { background: var(--gray-100); }

.emp-report-body {
    padding: 20px 22px;
    overflow-y: auto;
}
/* Sale + ATH Móvil modals: the panel itself does NOT scroll. The header
   fields and the TOTAL + action buttons stay pinned; only the course list
   scrolls. Achieved with a flex column chain down to .ssf-cat-list. */
.emp-sale-body {
    padding: 18px 22px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.emp-sale-body > div {           /* #sale-form-container / #athpush-form-container */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.ssf-courses-field {             /* the "Cursos" field wrapping the picker */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ssf-courses-field > label { flex: 0 0 auto; }
.ssf-courses-field > #ssf-course-picker,
.ssf-courses-field > #apf-course-picker {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.emp-sale-body .ssf-cat-tabs  { flex: 0 0 auto; }
.emp-sale-body .ssf-pick-hint { flex: 0 0 auto; }
.emp-sale-body .ssf-cat-list {
    flex: 1 1 auto;
    min-height: 110px;
    max-height: none;
    overscroll-behavior: contain;   /* don't chain scroll to the page behind */
}
.emp-report-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.emp-report-row label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
}

.emp-report-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--gray-200);
    background: rgba(155,89,182,0.03);
}
body.dark-theme .emp-report-foot { border-color: #2a2040; background: rgba(155,89,182,0.08); }

/* Two-track course list in the sale form: Web | Presencial */
.ssf-tracks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ssf-track {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(155,89,182,0.02);
}
body.dark-theme .ssf-track { border-color: #2a2040; background: rgba(155,89,182,0.06); }
.ssf-track-head {
    padding: 8px 12px;
    background: rgba(155,89,182,0.08);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 6px;
}
body.dark-theme .ssf-track-head { background: rgba(155,89,182,0.15); color: #f0ecf8; }
.ssf-track-count {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 1px 8px;
    background: var(--white);
    border-radius: 50px;
    color: var(--purple);
    font-weight: 700;
}
body.dark-theme .ssf-track-count { background: #1c1630; }
.ssf-track .ssf-courses-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
}
.ssf-track-empty {
    padding: 22px 14px;
    text-align: center;
    font-size: 0.76rem;
    color: var(--gray-500);
    font-style: italic;
}

@media (max-width: 820px) {
    .ssf-tracks { grid-template-columns: 1fr; }
}

/* ============================================================
   EMPLOYEE DASHBOARD — Email panel (embedded Gmail) overrides
   Base styles live in dashboard.css. These rules make the 3-column
   layout reflow to fit any viewport and give the shell a firm
   height to work with (it was collapsing to 0 in some browsers).
   ============================================================ */

/* The email section panel's direct container must give the shell a
   usable height; otherwise Gmail's three grid columns collapse. These
   rules ONLY apply when the panel is the active tab — otherwise the
   base `.section-panel { display: none }` rule from dashboard.css is
   overridden by an ID selector and the email UI leaks onto every tab. */
#sec-correo.active {
    min-height: calc(100vh - var(--topbar-height, 60px) - 32px);
    display: flex;
    flex-direction: column;
}
.gmail-panel-container {
    flex: 1;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}
.gmail-panel-container > .gmail-shell,
.gmail-shell {
    min-height: 520px;
    height: 100%;
}

/* 1200px and up: default 3-column, nothing to change.
   1000-1199px: shrink the sidebar (icon-only nav) + keep list + reader. */
@media (max-width: 1199px) and (min-width: 900px) {
    .gmail-shell {
        grid-template-columns: 60px 280px 1fr !important;
    }
    .gmail-sidebar { padding: 14px 8px !important; }
    .gmail-compose-btn {
        padding: 12px 0 !important;
        font-size: 0 !important;
        text-align: center !important;
    }
    .gmail-compose-btn i {
        margin: 0 !important;
        font-size: 1rem !important;
    }
    .gmail-folder {
        padding: 10px 8px !important;
        text-align: center !important;
        font-size: 0 !important; /* hide label */
    }
    .gmail-folder i {
        margin-right: 0 !important;
        font-size: 1rem !important;
    }
    .gm-unread-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        font-size: 0.6rem !important;
        padding: 0 6px !important;
    }
    .gmail-folder { position: relative; }
    .gmail-user span { display: none !important; }
}

/* ====================================================================
   USER-TOGGLED sidebar collapse — same icon-only mode as the media
   query above, but driven by .gmail-shell.sidebar-collapsed class so
   it applies regardless of viewport. Clicking the toggle button in
   the sidebar fires this state. Persisted via localStorage.
   ==================================================================== */
.gmail-shell.sidebar-collapsed .gmail-sidebar { padding: 10px 8px !important; }
.gmail-shell.sidebar-collapsed .gmail-compose-btn {
    padding: 12px 0 !important;
    font-size: 0 !important;
    text-align: center !important;
}
.gmail-shell.sidebar-collapsed .gmail-compose-btn i {
    margin: 0 !important;
    font-size: 1rem !important;
}
.gmail-shell.sidebar-collapsed .gmail-folder {
    padding: 10px 8px !important;
    text-align: center !important;
    font-size: 0 !important;
    position: relative;
}
.gmail-shell.sidebar-collapsed .gmail-folder i {
    margin-right: 0 !important;
    font-size: 1rem !important;
}
.gmail-shell.sidebar-collapsed .gm-unread-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.6rem !important;
    padding: 0 6px !important;
}
.gmail-shell.sidebar-collapsed .gmail-user { justify-content: center; }
.gmail-shell.sidebar-collapsed .gmail-user span { display: none !important; }

/* The toggle button itself — small chevron at the top of the sidebar.
   Always visible (in both collapsed and expanded states) so the user
   can flip back. Rotates direction via JS swapping the icon class. */
.gmail-sidebar-toggle {
    width: 28px; height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px auto;     /* push right when sidebar expanded */
    transition: background 0.15s, color 0.15s;
    font-size: 0.78rem;
}
.gmail-sidebar-toggle:hover {
    background: rgba(155,89,182,0.10);
    color: var(--purple);
}
.gmail-shell.sidebar-collapsed .gmail-sidebar-toggle {
    margin: 0 auto 8px;        /* center when collapsed */
}
body.dark-theme .gmail-sidebar-toggle:hover { background: rgba(195,155,211,0.18); color: #d8b8e8; }

/* ====================================================================
   Email row redesign — star floats at top-left corner with minimal
   transparent spacing. Frees the row's full width for the preview
   info (sender, subject, snippet, attachment chip). Tighter rows
   = more density without losing readability.
   ==================================================================== */
.gmail-msg {
    display: block !important;          /* override flex layout */
    padding: 10px 60px 10px 26px !important;  /* L: star area, R: date area */
}
.gm-msg-star {
    position: absolute !important;
    top: 8px;
    left: 6px;
    width: 18px !important;
    height: 18px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--gray-300);
    background: transparent;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.gm-msg-star:hover { background: rgba(249,168,37,0.10); color: #f9a825; }
.gm-msg-star.starred { color: #f9a825; }
.gm-msg-content { margin: 0; min-width: 0; }
.gmail-msg-date { top: 10px !important; }

/* Tablet (700-899px): hide the sidebar entirely, show list+reader only.
   Folder switch lives in a burger menu (added in JS). */
@media (max-width: 899px) and (min-width: 700px) {
    .gmail-shell {
        grid-template-columns: 320px 1fr !important;
    }
    .gmail-sidebar { display: none !important; }
}

/* Mobile (< 700px): single column. Clicking a message hides the list
   and shows only the reader (JS toggles .mobile-reader-open). */
@media (max-width: 699px) {
    .gmail-shell {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
    }
    .gmail-sidebar { display: none !important; }
    .gmail-list {
        border-right: 0 !important;
    }
    .gmail-shell.mobile-reader-open .gmail-list { display: none; }
    .gmail-shell:not(.mobile-reader-open) .gmail-reader { display: none; }
    .gmail-reader-header {
        padding: 14px 16px !important;
    }
    .gm-body-content { padding: 16px !important; }
    .gm-att-section { padding: 14px 16px !important; }
}

/* Attachment thumbnails lazy-skeleton state */
.gm-att-card-icon.gm-lazy {
    background: linear-gradient(90deg,
        rgba(155,89,182,0.08) 0%,
        rgba(155,89,182,0.16) 50%,
        rgba(155,89,182,0.08) 100%);
    background-size: 200% 100%;
    animation: gm-lazy-shimmer 1.4s infinite ease-in-out;
}
@keyframes gm-lazy-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Reader action bar — compact, with dropdown for secondary actions.
   Inline: Reply, Reply-all, Forward, Star. Dropdown (3-dot): everything else. */
.gmail-reader-actions {
    flex-wrap: wrap;
}
.gmail-reader-actions .gm-ra-dd {
    position: relative;
    margin-left: auto;
}
.gmail-reader-actions .gm-ra-dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 6px;
    z-index: 200;
    display: none;
}
.gmail-reader-actions .gm-ra-dd.open .gm-ra-dd-menu { display: block; }
.gmail-reader-actions .gm-ra-dd-menu button {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 12px !important;
    text-align: left !important;
    border-radius: 7px !important;
    background: transparent !important;
    border: 0 !important;
    font-family: inherit !important;
    font-size: 0.84rem !important;
    color: var(--dark) !important;
    cursor: pointer;
    height: auto !important;
}
.gmail-reader-actions .gm-ra-dd-menu button i {
    width: 16px !important;
    color: var(--purple);
    font-size: 0.82rem !important;
}
.gmail-reader-actions .gm-ra-dd-menu button:hover {
    background: rgba(155,89,182,0.08) !important;
    color: var(--dark) !important;
}
.gmail-reader-actions .gm-ra-dd-menu .gm-ra-dd-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 2px;
}
body.dark-theme .gmail-reader-actions .gm-ra-dd-menu { background: #1c1630; border-color: #2a2040; }
body.dark-theme .gmail-reader-actions .gm-ra-dd-menu button { color: #f0ecf8 !important; }
body.dark-theme .gmail-reader-actions .gm-ra-dd-menu button:hover { background: rgba(155,89,182,0.18) !important; }
body.dark-theme .gmail-reader-actions .gm-ra-dd-menu .gm-ra-dd-divider { background: #2a2040; }

/* Infinite-scroll sentinel — invisible row at the bottom of the list that
   the IntersectionObserver uses to trigger the next page fetch. */
.gm-list-sentinel {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    font-size: 0.7rem;
}

/* Thread (conversation) strip — older messages in the same thread shown
   as collapsible cards above the current message body. Matches Gmail's
   conversation view pattern. */
.gm-thread-strip {
    margin: 12px 16px 4px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: rgba(155,89,182,0.03);
    overflow: hidden;
}
body.dark-theme .gm-thread-strip { background: rgba(155,89,182,0.08); border-color: #2a2040; }
.gm-thread-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--purple);
    background: rgba(155,89,182,0.06);
    border-bottom: 1px solid var(--gray-200);
}
body.dark-theme .gm-thread-header { border-color: #2a2040; background: rgba(155,89,182,0.12); }
.gm-thread-header i { font-size: 0.74rem; }
.gm-thread-expand-all {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--purple);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
}
.gm-thread-expand-all:hover { background: rgba(155,89,182,0.10); }
.gm-thread-msg { border-bottom: 1px solid var(--gray-200); }
.gm-thread-msg:last-child { border-bottom: 0; }
body.dark-theme .gm-thread-msg { border-color: #2a2040; }
.gm-thread-msg-head {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
    transition: background 0.12s;
}
.gm-thread-msg-head:hover { background: rgba(155,89,182,0.05); }
.gm-thread-msg-head > div:first-child {
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gm-thread-msg-head strong { color: var(--dark); }
body.dark-theme .gm-thread-msg-head strong { color: #f0ecf8; }
.gm-thread-msg-snip {
    color: var(--gray-500);
    font-size: 0.76rem;
    margin-left: 6px;
}
.gm-thread-msg-date {
    font-size: 0.72rem;
    color: var(--gray-500);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gm-thread-chevron { transition: transform 0.18s; font-size: 0.68rem; }
.gm-thread-msg.open .gm-thread-chevron { transform: rotate(180deg); }
.gm-thread-msg-body {
    padding: 6px 14px 14px;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
}
body.dark-theme .gm-thread-msg-body { background: #1c1630; border-color: #2a2040; }
.gm-thread-body-content {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--dark);
}
body.dark-theme .gm-thread-body-content { color: #f0ecf8; }
.gm-thread-body-content img { max-width: 100%; height: auto; border-radius: 6px; }
.gm-thread-body-content blockquote {
    margin: 8px 0;
    padding: 0 12px;
    border-left: 3px solid var(--gray-200);
    color: var(--gray-500);
}

/* "Ver perfil del cliente" pill — shown in reader header when sender is a known client */
.gm-client-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(16,185,129,0.12);
    color: #10b981;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    border: 0;
    transition: background 0.12s;
}
.gm-client-pill:hover { background: rgba(16,185,129,0.22); }
.gm-client-pill i { font-size: 0.7rem; }

/* Compose panel improvements — cleaner hierarchy + sensible maximize */
.gm-compose-float.maximized {
    position: fixed !important;
    inset: 24px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    border-radius: 16px !important;
    z-index: 9500 !important;
}
.gm-compose-float .gm-compose-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gm-compose-float input[type="email"],
.gm-compose-float input[type="text"] {
    height: 38px;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 6px;
    font-size: 0.88rem;
    background: transparent;
    color: var(--dark);
    outline: none;
}
body.dark-theme .gm-compose-float input[type="email"],
body.dark-theme .gm-compose-float input[type="text"] {
    color: #f0ecf8;
    border-color: #2a2040;
}
.gm-compose-float #gc-cc,
.gm-compose-float #gc-bcc { display: none; }
.gm-compose-float.show-ccbcc #gc-cc,
.gm-compose-float.show-ccbcc #gc-bcc { display: block; }
.gm-compose-ccbcc-toggle {
    font-size: 0.72rem;
    color: var(--gray-500);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 6px;
    margin-left: auto;
}
.gm-compose-ccbcc-toggle:hover { color: var(--purple); }
.gm-compose-editor {
    flex: 1 !important;
    min-height: 220px !important;
}
.gm-compose-float.maximized .gm-compose-editor { min-height: 360px !important; }

/* ============================================================
   Email panel — comprehensive polish
   - Contain the page (no infinite scroll)
   - Stronger unread vs read indicator + attachment chip
   - Compose: attachment list capped, position aware of Notas
   - Thread reply attachments
   ============================================================ */

/* CONTAINMENT — Without these, a long email body + the inline
   thread cards can grow the whole #sec-correo panel taller than the
   viewport. We want internal scroll, not page scroll. */
#sec-correo.active {
    height: calc(100vh - var(--topbar-height, 60px) - 32px) !important;
    min-height: 0 !important;
    overflow: hidden;
}
.gmail-panel-container {
    flex: 1;
    min-height: 0 !important;
    overflow: hidden;
}
.gmail-panel-container > .gmail-shell {
    height: 100% !important;
    min-height: 0 !important;
}
/* Reader scroll wrapper — make IT scroll, not the page */
.gm-reader-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.gmail-reader {
    overflow: hidden !important;   /* defer to .gm-reader-scroll */
}
/* Constrain wide content inside the email body so it can't blow up
   the reader column width on rich/HTML emails. */
.gm-body-content,
.gm-thread-body-content {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.gm-body-content img,
.gm-thread-body-content img {
    max-width: 100% !important;
    height: auto !important;
}
.gm-body-content table {
    max-width: 100%;
    table-layout: auto;
    display: block;
    overflow-x: auto;
}

/* UNREAD / READ — much stronger visual hierarchy.
   Unread: lime-tinted background + left accent + bold + dot bullet.
   Read: muted, no accent. Attachment chip is visible at a glance. */
.gmail-msg {
    border-left: 3px solid transparent !important;
    transition: background 0.15s, border-color 0.15s;
}
.gmail-msg.unread {
    background: linear-gradient(90deg,
        rgba(168,224,99,0.14) 0%,
        rgba(168,224,99,0.04) 100%) !important;
    border-left-color: var(--lime, #a8e063) !important;
}
.gmail-msg.unread .gmail-msg-from,
.gmail-msg.unread .gmail-msg-subject { font-weight: 800 !important; color: var(--dark) !important; }
.gmail-msg.unread .gmail-msg-snippet { color: var(--gray-700) !important; }
body.dark-theme .gmail-msg.unread {
    background: linear-gradient(90deg,
        rgba(168,224,99,0.18) 0%,
        rgba(168,224,99,0.04) 100%) !important;
}
body.dark-theme .gmail-msg.unread .gmail-msg-from,
body.dark-theme .gmail-msg.unread .gmail-msg-subject { color: #f0ecf8 !important; }

/* Selected state wins over unread visually */
.gmail-msg.selected {
    background: rgba(155,89,182,0.14) !important;
    border-left-color: var(--purple) !important;
}

.gm-unread-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--lime, #a8e063);
    border-radius: 50%;
    margin-right: 7px;
    box-shadow: 0 0 0 2px rgba(168,224,99,0.25);
    vertical-align: middle;
    flex-shrink: 0;
}

/* Attachment indicator chip in the row subject — paperclip + count */
.gm-msg-attchip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px 1px 5px;
    margin-left: 6px;
    background: rgba(155,89,182,0.14);
    color: var(--purple);
    border-radius: 50px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    min-height: 16px;
}
.gm-msg-attchip i { font-size: 0.62rem; }
.gm-msg-attchip-n { letter-spacing: 0.02em; }
.gmail-msg.has-att .gmail-msg-subject { padding-right: 4px; }
body.dark-theme .gm-msg-attchip { background: rgba(195,155,211,0.22); color: #d8b8e8; }

/* COMPOSE FLOAT — DOCKED by default, DETACHED on user request.
   Two distinct modes, controlled by the .detached class:

   DOCKED   — pinned to the right edge, offset by the Notas panel so
              the two don't overlap. No drag (cursor stays default on
              the titlebar). Minimize collapses to a slim bar at the
              dock position. This is the Gmail-style "always in place"
              behavior the user explicitly asked for.

   DETACHED — free-floating. JS sets explicit left/top. Titlebar is
              draggable. localStorage remembers position.

   Minimize ALWAYS docks first before collapsing — so the minimized
   bar can never wander off into a random spot of the screen. */
/* The DOCK position is set by JS (_alignDockToNotas) — it measures
   the Notas panel's actual left edge and pins the compose 24px to
   its left, so the two never overlap regardless of Notas state.
   CSS just provides a fallback right offset for the brief moment
   before JS runs. */
.gm-compose-float {
    right: 24px;
    bottom: 0;
    transition: none;
    cursor: default;
}
.gm-compose-float.maximized {
    inset: 24px !important;
    right: 24px !important;
    width: auto !important;
}
.gm-compose-float.detached {
    /* Detached mode uses absolute left/top set by JS. Override the
       default right offset so left/top take effect. */
    right: auto !important;
    bottom: auto !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(155,89,182,0.20);
}
.gm-compose-float.detached .gm-compose-titlebar {
    cursor: move !important;
    background: linear-gradient(135deg, #1a1030, #9b59b6) !important;
}
/* Titlebar pin button — highlighted when detached to show toggle state */
.gm-compose-float.detached #gc-detach {
    background: rgba(168,224,99,0.30) !important;
    color: #fff !important;
}
@media (max-width: 899px) {
    .gm-compose-float:not(.detached) {
        right: 12px !important; left: 12px !important;
        width: auto !important; max-width: none !important;
    }
}

/* Presencial purchases card in staff client-detail view */
.pres-list { display: flex; flex-direction: column; gap: 8px; }
.pres-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(168,224,99,0.05);
    border: 1px solid rgba(168,224,99,0.25);
    border-radius: 12px;
}
.pres-row.approved { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.30); }
.pres-main { flex: 1; min-width: 0; }
.pres-title { font-size: 0.92rem; font-weight: 700; color: var(--dark); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pres-title .pill { background: rgba(155,89,182,0.14); color: var(--purple); font-size: 0.7rem; padding: 1px 8px; border-radius: 50px; font-weight: 700; }
.pres-meta-line { font-size: 0.78rem; color: var(--gray-500); margin: 3px 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pres-meta-line i { font-size: 0.7rem; }
.pres-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 4px;
}
.pres-pill.ok      { background: rgba(16,185,129,0.16); color: #047857; }
.pres-pill.pending { background: rgba(225,112,85,0.16);  color: #c0392b; }
.pres-actions { flex-shrink: 0; }
.pres-summary-pending {
    background: rgba(225,112,85,0.12); color: #c0392b;
    padding: 4px 10px; border-radius: 50px; font-size: 0.72rem; font-weight: 700;
}
.pres-summary-clear {
    background: rgba(16,185,129,0.14); color: #047857;
    padding: 4px 10px; border-radius: 50px; font-size: 0.72rem; font-weight: 700;
}
body.dark-theme .pres-row { background: rgba(168,224,99,0.10); border-color: rgba(168,224,99,0.35); }
body.dark-theme .pres-title { color: #f0ecf8; }

/* Gmail integration status card (admin Settings) */
.gmail-int-status {
    background: var(--gray-100);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0;
    font-size: 0.84rem;
    color: var(--gray-700);
}
.gmail-int-on { color: var(--dark); }
.gmail-int-on .gmail-int-row { padding: 3px 0; font-size: 0.84rem; }
.gmail-int-on .gmail-int-row:first-child { font-size: 0.92rem; color: #047857; margin-bottom: 4px; }
.gmail-int-on .gmail-int-row i { color: #047857; margin-right: 4px; }
.gmail-int-on .gmail-int-row span { color: var(--gray-500); margin-right: 4px; }
.gmail-int-off { color: #c0392b; font-size: 0.84rem; }
.gmail-int-off i { margin-right: 6px; }
body.dark-theme .gmail-int-status { background: #1c1630; color: #c0b8d8; }
body.dark-theme .gmail-int-on { color: #f0ecf8; }

/* Cap the compose's overall height so it can NEVER push the Send
   button off-screen. The viewport-relative ceiling reserves 80px at
   the top (visible above the compose, e.g. for the email list). */
.gm-compose-float:not(.maximized):not(.detached) {
    max-height: calc(100vh - 80px);
}

/* ====================================================================
   COMPOSE v4 additions — drag-drop overlay, file status, saved
   indicator, discard button. All purely visual; the wiring lives in
   gmail-panel.js's openCompose().
   ==================================================================== */

/* Drop zone overlay — appears when the user drags files over the
   compose. The 44px top inset keeps the titlebar usable so they can
   still close/minimize while a drag is in flight. */
.gm-compose-dropzone {
    display: none;
    position: absolute;
    inset: 44px 6px 6px 6px;
    background: rgba(155,89,182,0.12);
    border: 3px dashed var(--purple);
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 99;
    color: var(--purple);
    pointer-events: none;          /* let drop events reach compose */
    backdrop-filter: blur(2px);
}
.gm-compose-dropzone i { font-size: 3rem; opacity: 0.85; }
.gm-compose-dropzone-text { font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; }
.gm-compose-float.drag-over .gm-compose-dropzone { display: flex; }
body.dark-theme .gm-compose-dropzone { background: rgba(155,89,182,0.22); }

/* Attachment chip — re-skinned for the status badge layout */
.gm-compose-attach-list { padding: 6px 4px; }
.gm-ca-summary {
    width: 100%;
    padding: 4px 8px;
    margin-bottom: 4px;
    font-size: 0.72rem;
    color: var(--gray-500);
    font-weight: 600;
}
.gm-ca-summary.over {
    color: #c0392b;
    background: rgba(192,57,43,0.08);
    border-radius: 6px;
}
.gm-ca-item {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 8px !important;
    width: 100%;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 0.76rem !important;
}
.gm-ca-clip { color: var(--purple); font-size: 0.72rem; flex-shrink: 0; }
.gm-ca-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark);
}
.gm-ca-size { color: var(--gray-500); font-size: 0.7rem; flex-shrink: 0; }
.gm-ca-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 50px;
    font-size: 0.66rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s;
}
.gm-ca-status.ok      { background: rgba(16,185,129,0.14); color: #047857; }
.gm-ca-status.err     { background: rgba(192,57,43,0.14);  color: #c0392b; }
.gm-ca-status.reading { background: rgba(155,89,182,0.10); color: var(--purple); }
.gm-ca-status i { font-size: 0.62rem; }

/* Circular progress ring — driven by --p custom property (0-100).
   conic-gradient paints a filled arc; an absolute pseudo-inner
   creates the hollow donut center so the ring is just 2px thick.
   The percentage text sits OUTSIDE the ring on the right. */
.gm-ca-ring {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: conic-gradient(
        var(--purple) calc(var(--p, 0) * 1%),
        rgba(155, 89, 182, 0.22) 0
    );
    flex-shrink: 0;
}
.gm-ca-ring-inner {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--gray-100);
}
body.dark-theme .gm-ca-ring-inner { background: #1c1630; }
.gm-ca-pct {
    font-variant-numeric: tabular-nums;
    min-width: 26px;
    text-align: left;
}

/* Faint pulse on the row while a file is reading — subtle hint that
   work is happening without being distracting. */
@keyframes gm-ca-pulse {
    0%, 100% { background: var(--gray-100); }
    50%      { background: rgba(155,89,182,0.06); }
}
.gm-ca-item.gm-ca-reading {
    animation: gm-ca-pulse 1.8s ease-in-out infinite;
}
body.dark-theme .gm-ca-item.gm-ca-reading {
    animation: none;     /* skip pulse in dark mode (already low contrast) */
}
.gm-ca-remove {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--gray-500);
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gm-ca-remove:hover { background: rgba(231,76,60,0.12); color: #c0392b; }
body.dark-theme .gm-ca-item { background: #1c1630; border-color: #2a2040; }
body.dark-theme .gm-ca-name { color: #f0ecf8; }

/* Saved-state indicator (lives in the bottom toolbar next to Send) */
.gm-compose-saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font-size: 0.74rem;
    color: var(--gray-500);
    font-weight: 600;
    min-height: 24px;
    visibility: hidden;
    transition: color 0.15s;
}
.gm-compose-saved.is-saving,
.gm-compose-saved.is-saved,
.gm-compose-saved.is-unsaved,
.gm-compose-saved.is-error  { visibility: visible; }
.gm-compose-saved.is-saved   { color: #047857; }
.gm-compose-saved.is-unsaved { color: var(--gray-500); font-style: italic; }
.gm-compose-saved.is-error   { color: #c0392b; }
.gm-compose-saved i { font-size: 0.72rem; }

/* Discard (trash) button — at the right end of the send toolbar */
.gm-compose-discard {
    background: transparent;
    border: 1px solid transparent;
    color: var(--gray-500);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.gm-compose-discard:hover {
    background: rgba(231,76,60,0.10);
    color: #c0392b;
    border-color: rgba(231,76,60,0.30);
}

/* Inside the compose: turn the body into a proper flex column that
   contains its overflow. The editor flexes to fill the remaining
   space and scrolls; the attachment list + send toolbar are pinned
   at the bottom via flex-shrink: 0 — they're never pushed out. */
.gm-compose-float .gm-compose-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.gm-compose-editor {
    flex: 1 !important;
    min-height: 100px !important;
    max-height: none !important;
    overflow-y: auto !important;
}
.gm-compose-attach-list {
    max-height: 110px !important;
    overflow-y: auto !important;
    flex-shrink: 0;
    align-content: flex-start;
    border-top: 1px dashed transparent;
}
.gm-compose-attach-list:not(:empty) {
    padding-top: 6px;
    border-top-color: var(--gray-200);
}
body.dark-theme .gm-compose-attach-list:not(:empty) { border-top-color: #2a2040; }
.gm-compose-float .gm-compose-toolbar {
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
}
.gm-compose-float .gm-rich-toolbar { flex-shrink: 0; }
.gm-compose-float input[type="email"],
.gm-compose-float input[type="text"] { flex-shrink: 0; }

/* ====================================================================
   Multi-pick attachment cards — checkbox + bulk save-to-client button
   ==================================================================== */
.gm-att-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.gm-att-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gm-att-allcb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    color: var(--gray-500);
    cursor: pointer;
}
.gm-att-allcb input { accent-color: var(--purple); cursor: pointer; }
.gm-att-card { position: relative; }
.gm-att-card .gm-att-pick {
    position: absolute;
    top: 6px; left: 6px;
    width: 16px; height: 16px;
    accent-color: var(--purple);
    cursor: pointer;
    z-index: 5;
}
.gm-att-card.has-pick { box-shadow: 0 0 0 2px var(--purple); }

/* Thread attachment items — save button + multi-pick checkbox */
.gm-thread-att-header { flex-wrap: wrap; }
.gm-thread-att-allcb {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 6px;
    font-size: 0.7rem; color: var(--gray-500);
    cursor: pointer; font-weight: 600;
}
.gm-thread-att-allcb input { accent-color: var(--purple); }
.gm-thread-att-saveall {
    margin-left: 6px;
    background: transparent;
    border: 1px solid var(--gray-200);
    color: var(--purple);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
}
.gm-thread-att-saveall:hover:not(:disabled) { background: rgba(155,89,182,0.10); }
.gm-thread-att-saveall:disabled { opacity: 0.5; cursor: not-allowed; }
.gm-thread-att-pick {
    width: 15px; height: 15px;
    accent-color: var(--purple);
    cursor: pointer;
    flex-shrink: 0;
}
.gm-thread-att-save {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--gray-500);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    flex-shrink: 0;
}
.gm-thread-att-save:hover { background: rgba(168,224,99,0.15); color: #047857; }

/* Multi-pick client picker — file preview list */
.gm-pick-flist {
    background: rgba(155,89,182,0.05);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 12px;
    max-height: 130px;
    overflow-y: auto;
    font-size: 0.78rem;
}
.gm-pick-flist-item {
    padding: 3px 4px;
    color: var(--gray-700);
    display: flex; align-items: center; gap: 6px;
}
.gm-pick-flist-item i { color: var(--purple); font-size: 0.72rem; }
.gm-pick-flist-more { padding: 3px 4px; color: var(--gray-500); font-style: italic; font-size: 0.74rem; }
body.dark-theme .gm-pick-flist { background: rgba(155,89,182,0.10); border-color: #2a2040; }
body.dark-theme .gm-pick-flist-item { color: #c4bdd8; }

/* Popup modals — let the user resize without the email-view cap.
   The base CSS (dashboard.css) sets fixed sizes like `width: min(480px, 92vw)`
   and `max-height: 80vh` which prevents the resize handle from growing
   past those values. Override here: max grows to almost the full viewport. */
.gm-picker-modal,
.gm-pdf-modal {
    resize: both;
    overflow: hidden;
    min-width: 380px;
    min-height: 240px;
    position: relative;
    max-width:  96vw !important;
    max-height: 96vh !important;
}

/* ====================================================================
   Compose — two resize modes:
   - DOCKED   → native `resize: both`. Right edge is anchored at 324px
                from viewport (left of Notas panel), so the corner
                grip only grows the panel LEFTWARD. It can never
                overlap the Notas column.
   - DETACHED → custom corner+edge handles (defined further below)
                so the user can resize freely in any direction.
   ==================================================================== */
.gm-compose-float {
    position: fixed;
}
.gm-compose-float:not(.detached):not(.minimized):not(.maximized) {
    /* Native resize: works because the right edge is anchored — the
       handle only modifies width (growing leftward). The cursor sits
       at the bottom-right inside the email-view area. */
    resize: both;
    overflow: hidden;
}

/* Custom 8-direction handles — ONLY active when detached.
   When docked, they're hidden so they can't accidentally detach
   the panel via a misclick. */
.gm-compose-rh {
    position: absolute;
    z-index: 10;
    background: transparent;
    display: none;
}
.gm-compose-float.detached .gm-compose-rh { display: block; }

/* Edges — 8px thick, span the full side */
.gm-compose-rh-n { top: -3px;    left: 14px;  right: 14px; height: 8px; cursor: ns-resize; }
.gm-compose-rh-s { bottom: -3px; left: 14px;  right: 14px; height: 8px; cursor: ns-resize; }
.gm-compose-rh-e { top: 14px;    right: -3px; bottom: 14px; width: 8px; cursor: ew-resize; }
.gm-compose-rh-w { top: 14px;    left: -3px;  bottom: 14px; width: 8px; cursor: ew-resize; }
/* Corners — 18x18 squares at each corner with a diagonal cursor */
.gm-compose-rh-nw { top: -3px;    left: -3px;    width: 18px; height: 18px; cursor: nwse-resize; }
.gm-compose-rh-ne { top: -3px;    right: -3px;   width: 18px; height: 18px; cursor: nesw-resize; }
.gm-compose-rh-sw { bottom: -3px; left: -3px;    width: 18px; height: 18px; cursor: nesw-resize; }
.gm-compose-rh-se { bottom: -3px; right: -3px;   width: 18px; height: 18px; cursor: nwse-resize; }

/* Visible grip hint at SE corner — only when detached */
.gm-compose-float.detached .gm-compose-rh-se::after {
    content: '';
    position: absolute;
    right: 3px; bottom: 3px;
    width: 10px; height: 10px;
    pointer-events: none;
    background:
        linear-gradient(135deg, transparent 50%, rgba(155,89,182,0.45) 50% 60%, transparent 60% 70%, rgba(155,89,182,0.45) 70% 80%, transparent 80%);
    border-radius: 2px;
    opacity: 0.85;
}

/* While resizing, disable all transitions + hide text selection */
.gm-compose-float.resizing,
.gm-compose-float.resizing * { transition: none !important; user-select: none !important; }

/* Disable native resize in maximized / minimized states too */
.gm-compose-float.minimized,
.gm-compose-float.maximized { resize: none !important; }

/* THREAD REPLY ATTACHMENT BAR — shown inside each thread message
   when the reply itself carried files. Mirrors the main reader's
   attachment grid but compact. */
.gm-thread-att-bar {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--gray-200);
}
body.dark-theme .gm-thread-att-bar { border-color: #2a2040; }
.gm-thread-att-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.gm-thread-att-dlall {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--gray-200);
    color: var(--purple);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
}
.gm-thread-att-dlall:hover { background: rgba(155,89,182,0.08); }
.gm-thread-att-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}
.gm-thread-att-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.gm-thread-att-item:hover { border-color: var(--purple); background: rgba(155,89,182,0.04); }
body.dark-theme .gm-thread-att-item { background: #1c1630; border-color: #2a2040; }
body.dark-theme .gm-thread-att-item:hover { background: rgba(155,89,182,0.10); }
.gm-thread-att-item > i:first-child { font-size: 1rem; color: var(--purple); width: 18px; text-align: center; }
.gm-thread-att-info { flex: 1; min-width: 0; }
.gm-thread-att-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dark-theme .gm-thread-att-name { color: #f0ecf8; }
.gm-thread-att-size { font-size: 0.68rem; color: var(--gray-500); }
.gm-thread-att-dl {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--gray-500);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    flex-shrink: 0;
}
.gm-thread-att-dl:hover { background: rgba(155,89,182,0.10); color: var(--purple); }

/* ============================================================
   EMPLOYEE DASHBOARD — Gestión de Cursos 3-panel layout
   Web · Módulo · Presencial — all equal width, side-by-side on
   wide screens. Below 1400px we drop to a 2-column flow (Web +
   Módulo on row 1, Presencial spans row 2) and below 1100px to
   a single column.
   ============================================================ */
.emp-cursos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;   /* Web · Módulo · Presencial · Combos — 4 equal, side by side */
    gap: 14px;
    align-items: start;
}
@media (max-width: 1500px) { .emp-cursos-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .emp-cursos-grid { grid-template-columns: 1fr; } }

.emp-course-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(155,89,182,0.04);
    border: 1px solid rgba(155,89,182,0.12);
    border-radius: 12px;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.emp-course-row:hover {
    background: rgba(155,89,182,0.10);
    border-color: rgba(155,89,182,0.28);
    transform: translateY(-1px);
}
body.dark-theme .emp-course-row {
    background: rgba(155,89,182,0.08);
    border-color: #2a2040;
}
body.dark-theme .emp-course-row:hover {
    background: rgba(155,89,182,0.18);
    border-color: rgba(155,89,182,0.40);
}

.emp-course-main { min-width: 0; }
.emp-course-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.emp-course-title strong {
    font-size: 0.88rem;
    color: var(--dark);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
body.dark-theme .emp-course-title strong { color: #f0ecf8; }

.emp-course-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}
.emp-course-status.active   { background: rgba(16,185,129,0.15); color: #10b981; }
.emp-course-status.inactive { background: rgba(148,163,184,0.18); color: #64748b; }

.emp-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 0.72rem;
    color: var(--gray-500);
    align-items: center;
}
.emp-course-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.emp-course-meta i { font-size: 0.7rem; opacity: 0.7; }

/* Expiration pill */
.emp-exp-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 50px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.emp-exp-pill.forever { background: rgba(155,89,182,0.12); color: var(--purple); }
.emp-exp-pill.ok      { background: rgba(16,185,129,0.12); color: #10b981; }
.emp-exp-pill.warn    { background: rgba(245,158,11,0.15); color: #d97706; }
.emp-exp-pill.danger  { background: rgba(225,112,85,0.15); color: #e17055; }
.emp-exp-pill.expired { background: rgba(225,112,85,0.9); color: #fff; }

/* Course action context menu (fixed-positioned by JS) */
.emp-course-menu {
    min-width: 220px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    padding: 6px;
    z-index: 9500;
}
.emp-course-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.84rem;
    color: var(--dark);
    border-radius: 7px;
    cursor: pointer;
}
.emp-course-menu button i { width: 16px; color: var(--purple); }
.emp-course-menu button:hover { background: rgba(155,89,182,0.08); }
body.dark-theme .emp-course-menu { background: #1c1630; border-color: #2a2040; }
body.dark-theme .emp-course-menu button { color: #f0ecf8; }
body.dark-theme .emp-course-menu button:hover { background: rgba(155,89,182,0.18); }

/* Expiration toggle inside the course edit modal */
.emp-exp-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.emp-exp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--dark);
    cursor: pointer;
}
body.dark-theme .emp-exp-toggle { color: #f0ecf8; }
.emp-exp-toggle input { width: 16px; height: 16px; accent-color: var(--purple); cursor: pointer; }

/* ============================================================
   EMPLOYEE SETTINGS — account panel
   ============================================================ */
.emp-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 1100px) { .emp-settings-grid { grid-template-columns: 1fr; } }

.emp-settings-card {
    padding: 20px !important;
}
.emp-settings-card h3 {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--dark);
    margin: 0 0 4px;
}
body.dark-theme .emp-settings-card h3 { color: #f0ecf8; }
.emp-settings-sub {
    font-size: 0.76rem;
    color: var(--gray-500);
    margin: 0 0 16px;
    line-height: 1.4;
}

.emp-settings-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 14px;
}
.emp-settings-avatar {
    position: relative;
    width: 96px; height: 96px;
    border-radius: 20px;
    background: linear-gradient(135deg, #a8e063, #9b59b6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}
.emp-settings-avatar .avatar-overlay {
    position: absolute; inset: 0;
    background: rgba(26,16,48,0.65);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #fff; font-size: 0.7rem;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.18s;
    border-radius: inherit;
}
.emp-settings-avatar:hover .avatar-overlay { opacity: 1; }
.emp-settings-avatar .avatar-remove-btn {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(225,112,85,0.9);
    color: #fff; border: 0;
    cursor: pointer; display: none;
    align-items: center; justify-content: center;
    font-size: 0.7rem;
    z-index: 2;
}
.emp-settings-avatar.has-photo .avatar-remove-btn { display: flex; }

.emp-settings-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 900px) { .emp-settings-fields { grid-template-columns: 1fr; } }
.emp-settings-field { display: flex; flex-direction: column; gap: 4px; }
.emp-settings-field label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
}
.emp-settings-field input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--dark);
    font-family: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.15s;
}
.emp-settings-field input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(155,89,182,0.1);
}
.emp-settings-field input[readonly] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}
body.dark-theme .emp-settings-field input {
    background: #141020; border-color: #2a2040; color: #f0ecf8;
}
body.dark-theme .emp-settings-field input[readonly] {
    background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.5);
}
.emp-settings-hint {
    font-size: 0.68rem;
    color: var(--gray-500);
    margin-top: 2px;
}

.emp-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Toggle switches */
.emp-settings-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-200);
}
.emp-settings-toggle:last-child { border-bottom: 0; }
body.dark-theme .emp-settings-toggle { border-color: #2a2040; }
.emp-settings-toggle > div:first-child {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.emp-settings-toggle strong {
    font-size: 0.86rem;
    color: var(--dark);
    font-weight: 700;
}
body.dark-theme .emp-settings-toggle strong { color: #f0ecf8; }
.emp-settings-toggle small {
    font-size: 0.72rem;
    color: var(--gray-500);
    line-height: 1.35;
}

.emp-switch {
    position: relative;
    display: inline-block;
    width: 42px; height: 24px;
    flex-shrink: 0;
}
.emp-switch input { opacity: 0; width: 0; height: 0; }
.emp-switch span {
    position: absolute; inset: 0;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 50px;
    transition: 0.18s;
}
.emp-switch span::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.18s;
}
.emp-switch input:checked + span { background: var(--purple); }
.emp-switch input:checked + span::before { transform: translateX(18px); }

/* Password feedback line */
.emp-pwd-msg {
    margin-top: 8px;
    font-size: 0.8rem;
    min-height: 18px;
}
.emp-pwd-msg.ok    { color: #10b981; }
.emp-pwd-msg.error { color: #e17055; }

/* Account info block */
.emp-settings-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}
@media (max-width: 700px) { .emp-settings-info { grid-template-columns: 1fr 1fr; } }
.emp-settings-info > div {
    background: rgba(155,89,182,0.05);
    padding: 12px 14px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.emp-settings-info small {
    font-size: 0.66rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.emp-settings-info strong {
    font-size: 0.95rem;
    color: var(--dark);
    font-weight: 700;
}
body.dark-theme .emp-settings-info > div { background: rgba(155,89,182,0.10); }
body.dark-theme .emp-settings-info strong { color: #f0ecf8; }

/* ---------- 7.  Print safety ---------- */
@media print {
    html, body {
        overflow-x: visible !important;
        max-width: none !important;
    }
    .dashboard-layout, .main-wrap, .main-content, .section-panel {
        max-width: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ====================================================================
   OWNER-ONLY: Personal (staff CRUD) — 3 panels: Owners / Admins / Employees
   Same visual language as .emp-clientes-grid so owner UX feels native.
   ==================================================================== */
.emp-personal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 1100px) { .emp-personal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .emp-personal-grid { grid-template-columns: 1fr; } }

.staff-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}
.staff-row:last-child { border-bottom: none; }
.staff-row.is-inactive { opacity: 0.55; }
.staff-row-avatar {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9b59b6, #6f4cb6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700;
}
.staff-row-body { flex: 1 1 auto; min-width: 0; }
.staff-row-name {
    font-weight: 600;
    font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.staff-row-meta {
    font-size: .76rem;
    color: var(--muted, #6c7080);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.staff-row-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.staff-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    margin-left: 4px;
    vertical-align: middle;
}
.staff-pill.warn   { background: #fff3cd; color: #856404; }
.staff-pill.danger { background: #f8d7da; color: #721c24; }
body.dark-theme .staff-pill.warn   { background: #3d2c00; color: #ffd970; }
body.dark-theme .staff-pill.danger { background: #3d0a10; color: #ffb3b8; }

/* btn-icon — small square icon-only button used in staff rows.
   Only added if not already provided by dashboard.css. The fallback
   is intentionally generic so this won't fight existing styles. */
.btn-icon {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    color: var(--text, #222);
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: .82rem;
    transition: background .15s, color .15s, border-color .15s;
}
.btn-icon:hover:not(:disabled) {
    background: rgba(155, 89, 182, .08);
    border-color: rgba(155, 89, 182, .35);
    color: var(--purple, #9b59b6);
}
.btn-icon:disabled { opacity: .35; cursor: not-allowed; }
.btn-icon.danger:hover:not(:disabled) {
    background: rgba(220, 53, 69, .08);
    border-color: rgba(220, 53, 69, .35);
    color: #dc3545;
}
body.dark-theme .btn-icon { color: #e6e0ff; border-color: rgba(255,255,255,.14); }
body.dark-theme .btn-icon:hover:not(:disabled) { background: rgba(155,89,182,.16); }

/* ====================================================================
   MOBILE DASHBOARD POLISH  (2026-06)
   --------------------------------------------------------------------
   Phones ≤768px and ≤480px. EVERYTHING here is inside a max-width
   media query, so desktop/tablet ≥769px is provably untouched.

   The earlier responsive rules cover the class-based grids, but several
   panels/modals set their column layout via INLINE styles, which beat
   non-!important stylesheet rules — so those need explicit !important
   overrides here. Prime offenders fixed below:
     • Client-detail ".profile-display" card (inline 4-col grid)
     • Unified edit modal + sale form (inline 2/3-col inner grids)
     • Gmail cert / notas / pdf / picker modals (min-width:360-380px
       forced horizontal overflow on a 360px screen)
   ==================================================================== */
@media (max-width: 768px) {

    /* ---- Client-detail "profile-display" card → single column ----
       The card hard-codes grid-template-columns inline, so the existing
       900px rule in dashboard.css can't win without !important. Stack
       avatar → info → professions/licenses → actions, all centered. */
    .profile-display {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        text-align: center;
        justify-items: center;
    }
    .profile-display > * { min-width: 0 !important; max-width: 100% !important; }
    .profile-display .profile-avatar,
    #emp-avatar-el { margin: 0 auto !important; }
    /* The professions/licenses column + its chips: left-align text but
       keep the block centered and full-width so chips wrap cleanly. */
    .profile-display > div { width: 100%; }
    /* Action button stack (Exportar / Correo / Editar) → centered row that
       wraps, full-width-friendly tap targets. */
    .profile-display > div:last-child {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .profile-display > div:last-child .btn { flex: 1 1 auto; min-height: 38px; }

    /* ---- Generic: any inline multi-column grid inside the client
       detail area stacks. Covers the licenses grid, profs row, etc. ---- */
    #sec-detalle [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* ---- MODALS — lighter chrome, near-full-width, inner grids stack ---- */
    .modal { padding: 20px 16px !important; max-width: 100% !important; }
    .modal-overlay { padding: 10px !important; }
    .emp-report-modal, .emp-sale-modal { max-width: 100% !important; }
    .emp-report-overlay, .emp-sale-overlay { padding: 10px !important; }

    /* Any inline multi-col grid inside ANY modal → single column. The
       attribute selector catches inline `grid-template-columns:…` that
       JS-built modals set, which class rules can't reach. */
    .modal [style*="grid-template-columns"],
    #edit-client-form-content [style*="grid-template-columns"],
    .emp-sale-modal [style*="grid-template-columns"],
    .emp-report-modal [style*="grid-template-columns"],
    .gm-cert-modal [style*="grid-template-columns"],
    .gm-notas-modal [style*="grid-template-columns"],
    .gm-notas-docs-modal [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- Gmail floating modals: kill the desktop min-width (360-380px)
       that overflowed a 360px viewport, and cap to the screen. ---- */
    .gm-notas-modal,
    .gm-cert-modal,
    .gm-notas-docs-modal,
    .gm-pdf-modal,
    .gm-picker-modal {
        min-width: 0 !important;
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
        /* Disable native corner-resize on touch — it fights page scroll. */
        resize: none !important;
        /* If JS drag set absolute left/top, re-center for small screens. */
        left: 2vw !important;
        right: 2vw !important;
    }
    .gm-cert-body { grid-template-columns: 1fr !important; }
    /* Cert generator: the floating overlay is pointer-events:none with the
       modal centered; on phones make sure it can't sit off-screen top. */
    .gm-notas-modal-overlay.gm-overlay-floating { align-items: flex-start !important; padding-top: 12px; }

    /* ---- Cursos 3-panel split → single column ---- */
    .cursos-split-view { grid-template-columns: 1fr !important; }

    /* ---- Topbar: tighten so the right cluster never overflows ---- */
    .topbar { padding-left: 8px !important; padding-right: 8px !important; }
    .topbar-right { gap: 6px !important; }
    .topbar-title { font-size: 1rem !important; }
    /* Role badge is redundant on a phone (name already hidden) — hide it
       to free horizontal room for the icon buttons. */
    .role-badge { display: none !important; }

    /* ---- Comfortable touch targets on small action buttons ---- */
    .btn-sm { min-height: 34px; }
}

@media (max-width: 480px) {
    /* Reclaim every pixel of width on small phones. */
    .main-content {
        padding: 10px !important;
        padding-top: calc(var(--topbar-height, 60px) + 10px) !important;
    }
    .card { padding: 12px !important; }
    .modal { padding: 16px 12px !important; }
    .modal-overlay { padding: 6px !important; }

    /* Hours ring slightly smaller so it doesn't dominate the fold. */
    .hours-circle, .hours-circle svg { width: 110px !important; height: 110px !important; }

    /* Profile-display action buttons: full-width stacked on tiny screens. */
    .profile-display > div:last-child .btn { flex: 1 1 100%; }

    /* Section headings + card titles a touch smaller for fit. */
    .section-title { font-size: 1.15rem !important; }
}

/* ====================================================================
   MOBILE PASS 2  (2026-06) — Eventos overflow, Órdenes clipping
   ("can't see the sale"), Email list containment. All ≤768px.
   ==================================================================== */
@media (max-width: 768px) {

    /* ---- ÓRDENES / CLIENTES PANELS: stop clipping content ----
       The location panels (Arecibo/Bayamón/Gurabo/Web) and the client
       panels use max-height + overflow:hidden with an inner scroll. On a
       phone that hides rows (a real sale looked "missing" because it was
       clipped below the panel's fixed height). On mobile we let every
       panel grow to its full content and the PAGE scrolls — nothing is
       hidden, so all sales/clients are always visible. */
    .emp-orders-panel,
    .emp-panel {
        max-height: none !important;
        overflow: visible !important;
    }
    .emp-orders-panel .emp-panel-body,
    .emp-panel .emp-panel-body {
        max-height: none !important;
        overflow: visible !important;
    }
    /* Orders summary cards: 2-up instead of cramped auto-fit */
    .emp-orders-summary { grid-template-columns: 1fr 1fr !important; }

    /* ---- EVENTOS — kill horizontal overflow + clipped text ---- */
    #sec-eventos { padding: 12px !important; }
    /* Split → single column, list grows naturally (no nested scroll) */
    .evt-split { grid-template-columns: 1fr !important; }
    .evt-side {
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }
    /* Every text element inside event cards + detail wraps instead of
       being clipped at the viewport edge. */
    .evt-side-card, .evt-side-card *,
    .evt-pane, .evt-pane *,
    .evt-detail, .evt-detail *,
    .evt-pane-head, .evt-pane-head *,
    .evt-detail-title, .evt-detail-title * {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        min-width: 0 !important;
    }
    /* Heads that were 2/3-column grids → stack */
    .evt-pane-head,
    .evt-detail-head { grid-template-columns: 1fr !important; }
    .evt-pane-actions,
    .evt-detail-actions { flex-wrap: wrap !important; }
    /* Participant table: keep it scrollable INSIDE its wrapper only, so
       it never pushes the page wide. The wrapper already has overflow:auto;
       reinforce it + cap to the content width. */
    .evt-table-wrap { max-width: 100% !important; overflow-x: auto !important; }
    .evt-table { min-width: 480px; }   /* legible columns; scrolls within wrap */
    /* Toolbar buttons wrap to multiple rows instead of cutting off */
    .evt-pane-toolbar,
    .evt-detail-toolbar { flex-wrap: wrap !important; }
    .evt-pane-toolbar > *,
    .evt-detail-toolbar > * { flex: 0 1 auto; }

    /* ---- EMAIL — contain the list rows, no horizontal spill ---- */
    .gmail-list { max-width: 100% !important; overflow-x: hidden !important; }
    .gmail-msg {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Sender / subject / snippet truncate cleanly within the row width */
    .gmail-msg-from, .gmail-msg-subject, .gmail-msg-snippet {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Reader body never forces the column wider than the screen */
    .gm-body-content, .gm-thread-body-content { overflow-wrap: anywhere !important; }

    /* ---- Global belt-and-suspenders: nothing inside a dashboard
       section may exceed the viewport width on a phone. Children opt
       back into horizontal scroll only via explicit *-wrap containers
       (tables), which set their own overflow-x:auto above. ---- */
    .section-panel > .card,
    .section-panel > div { max-width: 100% !important; }
}

/* ====================================================================
   MOBILE PASS 3  (2026-06) — Personal toolbar overflow, Eventos
   participant table readability (undo per-char break → scroll table),
   Cert generator inner overflow. All ≤768px.
   ==================================================================== */
@media (max-width: 768px) {

    /* ---- PERSONAL (owner staff CRUD) toolbar: wrap cleanly, no button
       shoved off the right edge by margin-left:auto ---- */
    .emp-orders-toolbar { flex-wrap: wrap !important; }
    .emp-orders-toolbar > * { margin-left: 0 !important; }
    .emp-orders-toolbar .emp-tb-search { flex: 1 1 100% !important; max-width: none !important; }
    #btn-wipe-docs { margin-left: 0 !important; }

    /* Staff rows: name + meta wrap inside the card instead of pushing wide */
    .staff-row { flex-wrap: wrap; }
    .staff-row-body { flex: 1 1 60%; min-width: 0; }
    .staff-row-name,
    .staff-row-meta {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
    .staff-row-actions { flex: 0 0 auto; }

    /* ---- EVENTOS participant table: OVERRIDE the broad word-break from
       Pass 2 that was shattering names into one letter per line. Make it
       a clean horizontally-scrollable table — cells stay on one line and
       you swipe sideways to see Profesión / Certificados / Pagado /
       Acciones. The wrapper scrolls internally so the page stays put. ---- */
    .evt-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .evt-table { min-width: 560px !important; }
    .evt-table, .evt-table th, .evt-table td,
    .evt-table * {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
    /* Cert cell can hold stacked lines (multiple certs) — let just that
       cell wrap normally without per-char breaking. */
    .evt-cert-cell, .evt-cert-cell * { white-space: normal !important; }

    /* ---- CERTIFICADOS GENERATOR modal: kill the small right overflow.
       Contain the body, let the action buttons + subtabs wrap, and stop
       any inner card from exceeding the modal width. ---- */
    .gm-cert-modal { overflow: hidden !important; }
    .gm-cert-body, .gm-cert-left, .gm-cert-right { overflow-x: hidden !important; max-width: 100% !important; }
    .gm-cert-actions { flex-wrap: wrap !important; }
    .gm-cert-actions .btn { min-width: 0 !important; flex: 1 1 auto !important; }
    /* 4 subtabs (Módulos/Presencial/Web/Combos) → 2×2 so they don't spill */
    .gm-cert-subtabs.gm-cert-subtabs-4 { grid-template-columns: 1fr 1fr !important; }
    .gm-cert-combo-card,
    .gm-cert-course-row,
    .gm-cert-preview,
    .gm-cert-client-block {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .gm-cert-combo-list { overflow-wrap: anywhere !important; }
}