/**
 * NYM Gestión de Clientes - Fase 2 Sidebar Layout
 * CSS Grid: sidebar-header + header + nav(sidebar) + content
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root {
    --nym-primary: #161326;
    --nym-secondary: #161326;
    --nym-accent: #C0FAA0;
    --nym-orchid: #C388F7;
    --nym-success: #2BC155;
    --nym-warning: #FFC107;
    --nym-danger: #FD7972;
    --nym-info: #AFC0FF;
    --nym-light: #F5F5F7;
    --nym-gray: #A4A4A9;
    --nym-border: #E8E8E8;
    --nym-radius: 14px;
    --nym-radius-sm: 10px;
    --nym-shadow: 0 4px 24px rgba(10,10,12,0.05);
    --nym-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --nym-font-heading: 'Poppins', 'Inter', sans-serif;
    --nym-sidebar-w: 256px;
    --nym-header-h: 64px;
}

/* FULLSCREEN OVERRIDE */
body.nym-fullscreen-panel { overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
body.nym-fullscreen-panel #wpadminbar,
body.nym-fullscreen-panel header, body.nym-fullscreen-panel .site-header,
body.nym-fullscreen-panel .header, body.nym-fullscreen-panel #header,
body.nym-fullscreen-panel .masthead, body.nym-fullscreen-panel #masthead,
body.nym-fullscreen-panel footer, body.nym-fullscreen-panel .site-footer,
body.nym-fullscreen-panel .footer, body.nym-fullscreen-panel #footer,
body.nym-fullscreen-panel #colophon, body.nym-fullscreen-panel .sidebar,
body.nym-fullscreen-panel #sidebar, body.nym-fullscreen-panel aside,
body.nym-fullscreen-panel .widget-area, body.nym-fullscreen-panel nav.main-navigation,
body.nym-fullscreen-panel .main-navigation, body.nym-fullscreen-panel .site-branding,
body.nym-fullscreen-panel .menu-toggle, body.nym-fullscreen-panel .breadcrumbs,
body.nym-fullscreen-panel .page-title, body.nym-fullscreen-panel .entry-title,
body.nym-fullscreen-panel .entry-header, body.nym-fullscreen-panel #ast-desktop-header,
body.nym-fullscreen-panel #ast-mobile-header, body.nym-fullscreen-panel .ast-above-header,
body.nym-fullscreen-panel .ast-below-header, body.nym-fullscreen-panel .main-header-bar-wrap,
body.nym-fullscreen-panel .site-above-footer-wrap, body.nym-fullscreen-panel .et-l--header,
body.nym-fullscreen-panel .et-l--footer, body.nym-fullscreen-panel #main-header,
body.nym-fullscreen-panel #main-footer { display: none !important; }
body.nym-fullscreen-panel .site, body.nym-fullscreen-panel .site-content,
body.nym-fullscreen-panel .content-area, body.nym-fullscreen-panel #content,
body.nym-fullscreen-panel #primary, body.nym-fullscreen-panel main,
body.nym-fullscreen-panel .main, body.nym-fullscreen-panel article,
body.nym-fullscreen-panel .entry-content, body.nym-fullscreen-panel .page-content,
body.nym-fullscreen-panel .container, body.nym-fullscreen-panel .wrapper,
body.nym-fullscreen-panel .ast-container, body.nym-fullscreen-panel .site-content > .ast-container {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 0 !important; float: none !important;
}

/* BASE */
.nym-panel, .nym-login-container {
    font-family: var(--nym-font); line-height: 1.6;
    color: var(--nym-primary); -webkit-font-smoothing: antialiased;
}
.nym-panel *, .nym-login-container * { box-sizing: border-box; }

/* =====================================================
   PANEL - CSS Grid Sidebar Layout
   ===================================================== */
.nym-panel {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: grid;
    grid-template-columns: var(--nym-sidebar-w) 1fr;
    grid-template-rows: var(--nym-header-h) 1fr;
    width: 100vw; height: 100vh;
    background: var(--nym-light);
    z-index: 999999; overflow: hidden;
}

/* Sidebar Header (logo) — col 1, row 1 */
.nym-sidebar-header {
    grid-column: 1; grid-row: 1;
    background: var(--nym-primary);
    display: flex; align-items: center;
    padding: 0 24px;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nym-sidebar-header img { max-height: 34px; max-width: 170px; }

/* Top Header (user info) — col 2, row 1 */
.nym-panel-header {
    grid-column: 2; grid-row: 1;
    background: var(--nym-primary);
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 28px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nym-panel-logo { display: none; }
.nym-panel-user { display: flex; align-items: center; gap: 14px; color: #fff; }
.nym-panel-user > span { font-weight: 500; font-size: 14px; color: #fff; }
.nym-panel-user .nym-btn-outline {
    border-color: rgba(255,255,255,0.3); color: #fff;
}
.nym-panel-user .nym-btn-outline:hover {
    background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5);
}
.nym-panel-user .nym-notif-btn {
    background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15);
    color: #fff;
}
.nym-panel-user .nym-notif-btn:hover { background: rgba(255,255,255,0.2); }

/* Navigation (sidebar) — col 1, row 2 */
.nym-panel-nav {
    grid-column: 1; grid-row: 2;
    background: #fff;
    border-right: 1px solid var(--nym-border);
    padding: 16px 0;
    display: flex; flex-direction: column; gap: 1px;
    overflow-y: auto; overflow-x: visible;
    transition: width 0.25s ease;
    z-index: 50;
    position: relative;
}
.nym-panel-nav::-webkit-scrollbar { width: 4px; }
.nym-panel-nav::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Nav items with icons */
.nym-panel-nav > a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px 12px 20px;
    text-decoration: none; color: var(--nym-gray);
    font-weight: 500; font-size: 14px;
    border: none; transition: all 0.15s;
    white-space: nowrap; position: relative;
}
.nym-panel-nav > a::before {
    content: attr(data-icon); font-size: 18px; width: 24px; text-align: center; flex-shrink: 0;
}
.nym-panel-nav > a:hover { color: var(--nym-primary); background: #FAFAFA; }
.nym-panel-nav > a.active {
    color: var(--nym-primary); font-weight: 600;
    background: linear-gradient(90deg, rgba(192,250,160,0.12) 0%, transparent 100%);
}
.nym-panel-nav > a.active::after {
    content: ''; position: absolute; right: 0; top: 6px; bottom: 6px;
    width: 4px; background: var(--nym-accent); border-radius: 4px 0 0 4px;
}

/* Sidebar Dropdown with icons */
.nym-nav-dropdown { position: relative; }
.nym-nav-dropdown > .nym-nav-trigger {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px 12px 20px;
    color: var(--nym-gray); font-weight: 500; font-size: 14px;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
    border: none; text-decoration: none; width: 100%;
}
.nym-nav-dropdown > .nym-nav-trigger::before {
    content: attr(data-icon); font-size: 18px; width: 24px; text-align: center; flex-shrink: 0;
}
.nym-nav-dropdown > .nym-nav-trigger:hover { color: var(--nym-primary); background: #FAFAFA; }
.nym-nav-dropdown > .nym-nav-trigger.active {
    color: var(--nym-primary); font-weight: 600;
    background: linear-gradient(90deg, rgba(192,250,160,0.12) 0%, transparent 100%);
}
.nym-nav-dropdown > .nym-nav-trigger::after {
    content: '›'; margin-left: auto; font-size: 16px; opacity: 0.4;
    transition: transform 0.2s;
}

.nym-nav-submenu a {
    display: block !important;
    padding: 10px 16px 10px 44px !important;
    color: var(--nym-gray) !important;
    font-size: 13px !important; font-weight: 400 !important;
    border: none !important; text-decoration: none !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
}

/* Sidebar toggle button */
.nym-sidebar-toggle {
    margin-left: auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 16px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.nym-sidebar-toggle:hover { background: rgba(255,255,255,0.25); }

/* =====================================================
   SIDEBAR COLLAPSED STATE (desktop only)
   ===================================================== */
.nym-sidebar-collapsed {
    grid-template-columns: 68px 1fr;
}
.nym-sidebar-collapsed .nym-sidebar-header {
    padding: 0; justify-content: center;
}
.nym-sidebar-collapsed .nym-sidebar-header img { display: none; }
.nym-sidebar-collapsed .nym-sidebar-toggle {
    margin: 0;
}
.nym-sidebar-collapsed .nym-panel-nav {
    padding: 16px 0; align-items: center;
    overflow: visible;
}
.nym-sidebar-collapsed .nym-panel-nav > a {
    padding: 12px; justify-content: center; gap: 0;
    font-size: 0; width: 48px; height: 48px; border-radius: 10px; margin: 1px 0;
}
.nym-sidebar-collapsed .nym-panel-nav > a::before { font-size: 20px; width: auto; }
.nym-sidebar-collapsed .nym-panel-nav > a::after { display: none; }
.nym-sidebar-collapsed .nym-panel-nav > a.active { background: rgba(192,250,160,0.15); }

.nym-sidebar-collapsed .nym-nav-dropdown > .nym-nav-trigger {
    padding: 12px; justify-content: center; gap: 0;
    font-size: 0; width: 48px; height: 48px; border-radius: 10px; margin: 1px 0;
}
.nym-sidebar-collapsed .nym-nav-dropdown > .nym-nav-trigger::before { font-size: 20px; width: auto; }
.nym-sidebar-collapsed .nym-nav-dropdown > .nym-nav-trigger::after { display: none; }
.nym-sidebar-collapsed .nym-nav-dropdown > .nym-nav-trigger.active { background: rgba(192,250,160,0.15); }

.nym-sidebar-collapsed .nym-nav-dropdown > .nym-nav-submenu { display: none !important; }
.nym-sidebar-collapsed .nym-nav-dropdown:hover > .nym-nav-submenu { display: none !important; }
.nym-sidebar-collapsed .nym-nav-dropdown > .nym-nav-trigger.active ~ .nym-nav-submenu { display: none !important; }
.nym-panel.nym-sidebar-collapsed .nym-panel-nav .nym-nav-dropdown.open > .nym-nav-submenu { display: flex !important; }

.nym-sidebar-collapsed .nym-nav-submenu {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    bottom: auto !important;
    min-width: 220px;
    background: #fff !important;
    border-radius: 0 var(--nym-radius-sm) var(--nym-radius-sm) 0 !important;
    box-shadow: 8px 4px 24px rgba(0,0,0,0.15) !important;
    border: 1px solid var(--nym-border) !important;
    border-left: none !important;
    z-index: 99999;
    padding: 6px 0 !important;
}
.nym-sidebar-collapsed .nym-nav-dropdown {
    position: relative;
}
.nym-sidebar-collapsed .nym-nav-submenu a {
    padding: 10px 16px !important;
}
.nym-nav-submenu {
    display: none !important;
    flex-direction: column;
    background: #FAFAFA;
    border-top: 1px solid #f0f0f0;
    overflow: hidden;
}
.nym-nav-dropdown:hover > .nym-nav-submenu,
.nym-nav-dropdown.open > .nym-nav-submenu { display: flex !important; }
.nym-nav-dropdown:hover > .nym-nav-trigger::after,
.nym-nav-dropdown.open > .nym-nav-trigger::after,
.nym-nav-dropdown > .nym-nav-trigger.active::after { transform: rotate(90deg); }
.nym-nav-dropdown > .nym-nav-trigger.active ~ .nym-nav-submenu { display: flex !important; }
.nym-nav-submenu a {
    display: block !important;
    padding: 10px 16px 10px 44px !important;
    color: var(--nym-gray) !important;
    font-size: 13px !important; font-weight: 400 !important;
    border: none !important; text-decoration: none !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
}
.nym-nav-submenu a:hover { color: var(--nym-primary) !important; background: #f0f0f0 !important; }
.nym-nav-submenu a.active {
    color: var(--nym-primary) !important; font-weight: 600 !important;
    background: rgba(192,250,160,0.1) !important;
}

/* Content — col 2, row 2 */
.nym-panel-content {
    grid-column: 2; grid-row: 2;
    padding: 28px 32px;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.nym-panel-content h1 { font-family: var(--nym-font-heading); color: var(--nym-primary); margin-bottom: 20px; font-size: 24px; font-weight: 600; }
.nym-panel-content h2 { font-family: var(--nym-font-heading); color: var(--nym-primary); margin: 24px 0 14px; font-size: 18px; font-weight: 600; }
.nym-panel-content h3 { font-family: var(--nym-font-heading); font-size: 16px; font-weight: 600; }

/* =====================================================
   LOGIN
   ===================================================== */
.nym-login-container {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #161326 0%, #2a2046 50%, #161326 100%);
    padding: 20px; z-index: 999999; overflow: auto;
}
.nym-login-box {
    background: #fff; padding: 48px 40px; border-radius: 24px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    width: 100%; max-width: 420px;
}
.nym-login-logo { text-align: center; margin-bottom: 32px; }
.nym-login-logo img { max-width: 180px; height: auto; }
.nym-login-box h2 {
    text-align: center; color: var(--nym-primary);
    margin-bottom: 28px; font-family: var(--nym-font-heading);
    font-size: 22px; font-weight: 600;
}
.nym-login-box .nym-btn-primary { width: 100%; padding: 14px; font-size: 15px; font-weight: 600; border-radius: 12px; margin-top: 8px; }
.nym-login-footer { text-align: center; margin-top: 20px; font-size: 14px; }
.nym-login-footer a { color: var(--nym-orchid); text-decoration: none; }

/* =====================================================
   NOTIFICATIONS
   ===================================================== */
.nym-notif-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: #F5F5F7; border: 1px solid var(--nym-border);
    cursor: pointer; position: relative; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.nym-notif-btn:hover { background: #ECECEC; }
.nym-notif-count {
    position: absolute; top: -2px; right: -2px;
    background: var(--nym-danger); color: #fff;
    font-size: 10px; padding: 1px 5px; border-radius: 10px;
    min-width: 16px; text-align: center; line-height: 1.4;
}
.nym-notif-dropdown {
    display: none; position: absolute; right: 0; top: calc(100% + 8px);
    width: 340px; max-height: 420px; overflow-y: auto;
    background: #fff; border-radius: var(--nym-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: 1000;
    border: 1px solid var(--nym-border);
}
.nym-notif-header {
    padding: 16px 18px; border-bottom: 1px solid #f0f0f0;
    display: flex; justify-content: space-between; align-items: center;
}
.nym-notif-header strong { font-size: 15px; }
.nym-notif-header a { font-size: 12px; color: var(--nym-orchid); text-decoration: none; }
.nym-notif-empty { padding: 40px; text-align: center; color: var(--nym-gray); font-size: 14px; }
.nym-notif-item {
    display: flex; gap: 10px; align-items: start;
    padding: 14px 18px; border-bottom: 1px solid #f8f8f8;
    text-decoration: none; color: var(--nym-primary);
    transition: background 0.15s;
}
.nym-notif-item.unread { background: #FAFAFA; }
.nym-notif-item:hover { background: #F5F5F7; }
.nym-notif-icon { font-size: 18px; flex-shrink: 0; }
.nym-notif-body { flex: 1; min-width: 0; }
.nym-notif-title { font-size: 13px; line-height: 1.4; }
.nym-notif-item.unread .nym-notif-title { font-weight: 600; }
.nym-notif-msg { font-size: 12px; color: #888; margin-top: 3px; }
.nym-notif-time { font-size: 11px; color: var(--nym-gray); margin-top: 4px; }
.nym-notif-dot { width: 8px; height: 8px; background: var(--nym-accent); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }

/* =====================================================
   CARDS
   ===================================================== */
.nym-card { background: #fff; border-radius: var(--nym-radius); padding: 22px; box-shadow: var(--nym-shadow); border: 1px solid var(--nym-border); margin-bottom: 20px; }
.nym-card h3, .nym-card h4 { margin-top: 0; color: var(--nym-primary); }
.nym-card-highlight { border-left: 4px solid var(--nym-orchid); }
.nym-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

/* Stats */
.nym-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 28px; }
.nym-stat-card {
    background: #fff; border-radius: var(--nym-radius); padding: 22px 18px;
    text-align: center; box-shadow: var(--nym-shadow);
    border: 1px solid var(--nym-border); transition: transform 0.15s;
}
.nym-stat-card:hover { transform: translateY(-2px); }
.nym-stat-number { display: block; font-size: 30px; font-weight: 700; color: var(--nym-orchid); line-height: 1.2; }
.nym-stat-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--nym-gray); margin-top: 6px; }
.nym-stat-warning .nym-stat-number { color: var(--nym-warning); }
.nym-stat-success .nym-stat-number { color: var(--nym-success); }
.nym-stat-danger .nym-stat-number { color: var(--nym-danger); }
.nym-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* =====================================================
   DASHBOARD HERO
   ===================================================== */
.nym-dashboard-hero {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
    padding: 24px 28px; background: #fff;
    border-radius: var(--nym-radius);
    border: 1px solid var(--nym-border);
    box-shadow: var(--nym-shadow);
}
.nym-dashboard-hero h1 { font-family: var(--nym-font-heading); }

/* =====================================================
   MODALS (global)
   ===================================================== */
.nym-panel-content div[style*="position:fixed"][style*="background:rgba"] {
    backdrop-filter: blur(4px);
}
.nym-panel-content div[style*="position:fixed"][style*="background:rgba"] > div[style*="background:#fff"] {
    border-radius: var(--nym-radius) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2) !important;
}
.nym-panel-content div[style*="position:fixed"] div[style*="border-bottom:1px solid"] {
    border-color: var(--nym-border) !important;
}
.nym-panel-content fieldset {
    border: 1px solid var(--nym-border) !important;
    border-radius: var(--nym-radius-sm) !important;
    padding: 20px !important;
}
.nym-panel-content legend {
    font-weight: 600 !important;
    font-family: var(--nym-font-heading) !important;
    font-size: 15px !important;
    color: var(--nym-primary) !important;
}

/* =====================================================
   CLIENT CARDS (enhanced)
   ===================================================== */
.nym-card.cliente-card {
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: default;
}
.nym-card.cliente-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(10,10,12,0.08);
}
.nym-card.cliente-card h3 {
    font-family: var(--nym-font-heading);
    font-size: 16px; margin-bottom: 6px;
}

/* =====================================================
   MODALS (global - applies to all inline modals)
   ===================================================== */
div[id^="modal-"] {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
div[id^="modal-"] > div {
    border-radius: var(--nym-radius) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2) !important;
    border: 1px solid var(--nym-border);
}
div[id^="modal-"] > div > div:first-child {
    border-bottom-color: var(--nym-border) !important;
}
div[id^="modal-"] h2, div[id^="modal-"] h3 {
    font-family: var(--nym-font-heading) !important;
}
div[id^="modal-"] button[onclick*="display='none'"],
div[id^="modal-"] button[onclick*="display=\\'none\\'"] {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 50% !important; background: #F5F5F7 !important;
    border: none !important; font-size: 20px !important; color: var(--nym-gray) !important;
    transition: background 0.15s;
}
div[id^="modal-"] button[onclick*="display='none'"]:hover {
    background: #ECECEC !important;
}
.nym-panel-content fieldset {
    border: 1px solid var(--nym-border) !important;
    border-radius: var(--nym-radius-sm) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}
.nym-panel-content legend {
    font-weight: 600 !important;
    font-family: var(--nym-font-heading) !important;
    font-size: 14px !important;
    color: var(--nym-primary) !important;
    padding: 0 10px !important;
}

/* =====================================================
   GRUPO CARDS
   ===================================================== */
.nym-grupo-card {
    transition: transform 0.15s, box-shadow 0.15s;
}
.nym-grupo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(10,10,12,0.08);
    border-color: var(--nym-orchid) !important;
}

/* =====================================================
   INLINE COLOR OVERRIDES (global Critso palette)
   ===================================================== */
.nym-panel-content [style*="color:#dc3545"],
.nym-panel-content [style*="color: #dc3545"] { color: var(--nym-danger) !important; }
.nym-panel-content [style*="color:#28a745"],
.nym-panel-content [style*="color: #28a745"] { color: var(--nym-success) !important; }
.nym-panel-content [style*="color:#17a2b8"],
.nym-panel-content [style*="color: #17a2b8"] { color: var(--nym-info) !important; }
.nym-panel-content [style*="background:#dc3545"],
.nym-panel-content [style*="background: #dc3545"] { background: var(--nym-danger) !important; }
.nym-panel-content [style*="background:#28a745"],
.nym-panel-content [style*="background: #28a745"] { background: var(--nym-success) !important; }

/* =====================================================
   TABLES (Critso Transaction Style)
   ===================================================== */
.nym-table-responsive { overflow-x: auto; background: transparent; border-radius: var(--nym-radius); box-shadow: none; border: none; -webkit-overflow-scrolling: touch; padding: 0; }
.nym-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nym-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 14px; }
.nym-table th {
    background: var(--nym-primary);
    color: #e9e9e9;
    padding: 9px 24px; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.6px;
    white-space: nowrap; position: sticky; top: 0; z-index: 1;
    border: none;
}
.nym-table th:first-child { border-radius: 10px 0 0 10px; padding-left: 22px; }
.nym-table th:last-child { border-radius: 0 10px 10px 0; padding-right: 22px; }
.nym-table td {
    padding: 18px; border: none;
    background: #fff; color: var(--nym-primary);
    border-top: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC;
}
.nym-table td:first-child { border-left: 1px solid #ECECEC; border-radius: 10px 0 0 10px; padding-left: 22px; }
.nym-table td:last-child { border-right: 1px solid #ECECEC; border-radius: 0 10px 10px 0; padding-right: 22px; }
.nym-table tbody tr { transition: transform 0.1s, box-shadow 0.15s; }
.nym-table tbody tr:hover { transform: translateY(-1px); }
.nym-table tbody tr:hover td { box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-color: #ddd; }
.nym-table tfoot td { background: #FAFAFA; font-weight: 600; border-color: #E8E8E8; }
.nym-table tfoot td:first-child { border-radius: 10px 0 0 10px; }
.nym-table tfoot td:last-child { border-radius: 0 10px 10px 0; }

/* Search inputs (Critso style - gray bg, no border) */
.nym-panel-content input[type="text"][placeholder*="Buscar"],
.nym-panel-content input[type="text"][placeholder*="buscar"],
.nym-panel-content input.show-search,
input.nym-search {
    background: #F5F5F7 !important;
    border: none !important;
    padding: 12px 16px !important;
    border-radius: var(--nym-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--nym-primary) !important;
}
.nym-panel-content input[type="text"][placeholder*="Buscar"]:focus,
.nym-panel-content input[type="text"][placeholder*="buscar"]:focus,
input.nym-search:focus {
    background: #ECECEC !important;
    box-shadow: none !important;
    outline: none !important;
}

/* =====================================================
   BADGES
   ===================================================== */
.nym-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.nym-badge-primary { background: var(--nym-primary); color: #fff; }
.nym-badge-secondary { background: #ECECEC; color: #666; }
.nym-badge-success { background: #E8F8EE; color: #1a5e2a; }
.nym-badge-warning { background: #FFF6DD; color: #856404; }
.nym-badge-danger { background: #FFF0EF; color: #8b2020; }
.nym-badge-info { background: #EEF2FF; color: #3D5AF1; }
.nym-badge-director { background: #fff; color: var(--nym-primary); }
.nym-badge-ejecutivo { background: var(--nym-orchid); color: #fff; }
.nym-badge-cobranza { background: var(--nym-info); color: var(--nym-primary); }
.nym-badge-cliente { background: var(--nym-accent); color: var(--nym-primary); }
.nym-badge-socio { background: #FFD6E8; color: #993556; }
.nym-badge-gastos { background: #FFF0E6; color: #D85A30; }

/* =====================================================
   BUTTONS
   ===================================================== */
.nym-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 22px; border: 1px solid var(--nym-border); border-radius: var(--nym-radius-sm); font-size: 14px; font-weight: 500; font-family: var(--nym-font); text-decoration: none; cursor: pointer; transition: all 0.2s; text-align: center; background: #fff; color: var(--nym-primary); line-height: 1.4; }
.nym-btn:hover { background: #F5F5F7; border-color: #ccc; }
.nym-btn-primary { background: var(--nym-primary); color: #fff; border-color: var(--nym-primary); }
.nym-btn-primary:hover { background: #2a2540; border-color: #2a2540; color: #fff; }
.nym-btn-outline { background: transparent; border: 1.5px solid var(--nym-border); color: var(--nym-primary); }
.nym-btn-outline:hover { background: #F5F5F7; }
.nym-btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 8px; }
.nym-btn-danger { background: var(--nym-danger); color: #fff; border-color: var(--nym-danger); }
.nym-btn-warning { background: var(--nym-warning); color: #333; border-color: var(--nym-warning); }
.nym-btn-block { display: block; width: 100%; }

/* =====================================================
   FORMS
   ===================================================== */
.nym-form-group { margin-bottom: 18px; }
.nym-form-group label { display: block; margin-bottom: 6px; font-weight: 500; color: #555; font-size: 13px; }
.nym-form-control { width: 100%; padding: 11px 14px; border: 1.5px solid var(--nym-border); border-radius: var(--nym-radius-sm); font-size: 14px; font-family: var(--nym-font); color: var(--nym-primary); background: #fff; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; max-width: 100%; }
.nym-form-control:focus { outline: none; border-color: var(--nym-primary); box-shadow: 0 0 0 3px rgba(22,19,38,0.06); }
select.nym-form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A4A4A9' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

/* =====================================================
   ALERTS
   ===================================================== */
.nym-alert { padding: 14px 18px; border-radius: var(--nym-radius-sm); margin-bottom: 20px; border-left: 4px solid; font-size: 14px; }
.nym-alert-success { background: #E8F8EE; color: #1a5e2a; border-color: var(--nym-success); }
.nym-alert-warning { background: #FFF6DD; color: #856404; border-color: var(--nym-warning); }
.nym-alert-danger { background: #FFF0EF; color: #8b2020; border-color: var(--nym-danger); }
.nym-alert-info { background: #EEF2FF; color: #3D5AF1; border-color: var(--nym-info); }

/* =====================================================
   UTILITIES
   ===================================================== */
.nym-text-muted { color: var(--nym-gray); }
.nym-text-lg { font-size: 24px; font-weight: 700; color: var(--nym-orchid); }
.nym-row { display: flex; flex-wrap: wrap; margin: -10px; }
.nym-col-4 { flex: 0 0 33.333%; max-width: 33.333%; padding: 10px; }
.nym-col-6 { flex: 0 0 50%; max-width: 50%; padding: 10px; }
.nym-list { list-style: none; padding: 0; margin: 0; }
.nym-list li { padding: 10px 0; border-bottom: 1px solid #F0F0F0; }
.nym-list li:last-child { border-bottom: none; }
.nym-filters { margin-bottom: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.nym-util-grid { display: grid; gap: 16px; }
.nym-util-card { background: #fff; border: 1px solid var(--nym-border); border-radius: var(--nym-radius); padding: 22px; box-shadow: var(--nym-shadow); }

/* =====================================================
   GASTOS MODULE
   ===================================================== */
.nym-gastos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.nym-gasto-card { background:#fff; border:1.5px solid #ff572240; border-radius:var(--nym-radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color 0.2s, box-shadow 0.2s; }
.nym-gasto-card:hover { border-color:#ff5722; box-shadow:var(--nym-shadow); }
.nym-gasto-header { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; background:#fff5f2; border-bottom:1px solid #ff572220; }
.nym-gasto-body { padding:16px 18px; flex:1; display:flex; flex-direction:column; }
.nym-gasto-badge { font-size:10px; padding:4px 12px; border-radius:20px; font-weight:600; }
.nym-gasto-badge.pending { background:#fff; color:#ff5722; border:1px solid #ff572260; }
.nym-gasto-badge.done { background:#E8F8EE; color:#2BC155; border:1px solid #c3e6cb; }
.nym-gasto-nota { background:#fff5f2; padding:8px 12px; border-radius:8px; font-size:13px; color:#bf360c; margin-bottom:12px; border-left:3px solid #ff5722; }
.nym-gasto-doc { display:flex; gap:6px; align-items:center; padding:8px 10px; background:#FAFAFA; border-radius:8px; margin-bottom:6px; flex-wrap:wrap; font-size:12px; }
.nym-gasto-doc-tipo { padding:2px 8px; border-radius:6px; font-size:10px; font-weight:600; }
.nym-gasto-doc-tipo.cfdi { background:#EEF2FF; color:#3D5AF1; }
.nym-gasto-doc-tipo.invoice { background:#FFF0E6; color:#D85A30; }
.nym-gasto-doc-btn { padding:3px 10px; border-radius:6px; text-decoration:none; font-weight:500; font-size:12px; color:#fff; }
.nym-gasto-doc-btn.pdf { background:#FD7972; }
.nym-gasto-doc-btn.xml { background:#AFC0FF; color:var(--nym-primary); }
.nym-gasto-del-form { display:flex; gap:6px; align-items:center; margin-top:6px; padding:8px 10px; background:#FFF0EF; border-radius:8px; border:1px solid #f5c6c6; }
.nym-gasto-del-form span { font-size:13px; font-weight:600; color:#666; }
.nym-gasto-del-form input[type="number"] { width:45px; padding:6px 4px; font-size:16px; text-align:center; border:2px solid #ddd; border-radius:6px; font-weight:600; }
.nym-gasto-del-form input[type="number"]:focus { border-color:#FD7972; outline:none; }
.nym-gasto-del-form button { background:#FD7972; color:#fff; border:none; padding:6px 14px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.nym-gasto-upload-details { margin-top:auto; padding-top:12px; border-top:1px solid #f0f0f0; }
.nym-gasto-upload-trigger { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fff5f2; border-radius:var(--nym-radius-sm); border:1px solid #ff572230; cursor:pointer; list-style:none; }
.nym-gasto-upload-trigger::-webkit-details-marker { display:none; }
.nym-gasto-upload-details[open] .nym-gasto-upload-trigger { border-radius:var(--nym-radius-sm) var(--nym-radius-sm) 0 0; border-bottom:1px dashed #ff572230; }
.nym-gasto-upload-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; background:#ff5722; color:#fff; border-radius:8px; font-size:16px; font-weight:700; }
.nym-gasto-upload-form { padding:14px; background:#fffaf8; border:1px solid #ff572230; border-top:none; border-radius:0 0 var(--nym-radius-sm) var(--nym-radius-sm); }
.nym-gasto-tipo-btn { padding:8px 16px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid var(--nym-border); background:#fff; transition:all 0.15s; font-weight:500; }
.nym-gasto-tipo-btn:has(input:checked) { background:#ff5722; color:#fff; border-color:#ff5722; }
.nym-gasto-tipo-btn input { display:none; }
.nym-gasto-file-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #f5f0ee; }
.nym-gasto-file-label { font-size:12px; color:var(--nym-gray); min-width:90px; }
.nym-gasto-submit-btn { padding:10px 24px; background:#ff5722; color:#fff; border:none; border-radius:var(--nym-radius-sm); font-size:13px; font-weight:600; cursor:pointer; }
.nym-gasto-submit-btn:hover { background:#e64a19; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1100px) { .nym-gastos-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 1024px) {
    .nym-admin-grid { grid-template-columns: 1fr; }
    .nym-panel-content { padding: 20px 24px; }
}
@media (max-width: 768px) {
    .nym-panel {
        grid-template-columns: 1fr;
        grid-template-rows: var(--nym-header-h) 1fr;
    }
    .nym-sidebar-header { display: none; }
    .nym-panel-header { grid-column: 1; grid-row: 1; justify-content: flex-end; padding: 0 16px; background: var(--nym-primary); }
    
    /* Nav como barra inferior fija */
    .nym-panel-nav {
        grid-column: 1; grid-row: 2;
        position: fixed; bottom: 0; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid var(--nym-border);
        border-right: none;
        padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        overflow-x: auto; overflow-y: hidden;
        z-index: 999998;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
        gap: 0;
        height: auto;
    }
    .nym-panel-nav::-webkit-scrollbar { display: none; }
    .nym-panel-nav > a {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 6px 6px 4px; font-size: 10px; min-width: 54px;
        text-align: center; white-space: nowrap;
        border-radius: 8px; color: var(--nym-gray);
    }
    .nym-panel-nav > a::before {
        content: attr(data-icon); font-size: 20px; line-height: 1;
    }
    .nym-panel-nav > a.active { color: var(--nym-primary); background: rgba(192,250,160,0.2); }
    .nym-panel-nav > a.active::after { display: none; }
    
    /* Dropdown triggers en mobile */
    .nym-nav-dropdown { display: flex; flex-direction: column; align-items: center; position: relative; }
    .nym-nav-dropdown > .nym-nav-trigger {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 6px 6px 4px; font-size: 10px; min-width: 54px;
        text-align: center; white-space: nowrap; color: var(--nym-gray);
    }
    .nym-nav-dropdown > .nym-nav-trigger::before {
        content: attr(data-icon); font-size: 20px; line-height: 1; order: -1;
    }
    .nym-nav-dropdown > .nym-nav-trigger::after { display: none; }
    .nym-nav-dropdown > .nym-nav-trigger.active { color: var(--nym-primary); }
    
    /* Submenu en mobile - SOLO se abre con .open (tap) — alta especificidad para ganar */
    .nym-panel .nym-panel-nav .nym-nav-dropdown > .nym-nav-submenu { display: none !important; }
    .nym-panel .nym-panel-nav .nym-nav-dropdown:hover > .nym-nav-submenu { display: none !important; }
    .nym-panel .nym-panel-nav .nym-nav-dropdown.open > .nym-nav-submenu { display: flex !important; }
    .nym-nav-submenu {
        position: fixed !important; bottom: 72px !important; left: 8px !important; right: 8px !important;
        top: auto !important;
        background: #fff !important;
        border-radius: var(--nym-radius) !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.15) !important;
        padding: 8px 0 !important; z-index: 999999;
        min-width: auto !important; max-height: 60vh; overflow-y: auto;
    }
    .nym-nav-submenu a {
        padding: 14px 20px !important; font-size: 15px !important;
        border-bottom: 1px solid #f5f5f5 !important;
    }
    .nym-nav-submenu a:last-child { border-bottom: none !important; }
    
    .nym-panel-content { grid-column: 1; grid-row: 2; padding: 16px 16px calc(90px + env(safe-area-inset-bottom, 0px)); }
    .nym-stats-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
    .nym-stat-number { font-size: 24px; }
    .nym-col-4, .nym-col-6 { flex: 0 0 100%; max-width: 100%; }
    .nym-cards-grid { grid-template-columns: 1fr; }
    .nym-login-box { padding: 32px 24px; }
    .nym-gastos-grid { grid-template-columns: 1fr; }
    .nym-notif-dropdown { width: 290px !important; right: -40px !important; }
}

@media (max-width: 480px) {
    .nym-panel-content h1 { font-size: 18px; }
    .nym-panel-content h2 { font-size: 16px; }
    .nym-table { font-size: 12px; }
    .nym-table th, .nym-table td { padding: 10px 12px; }
    .nym-form-control { padding: 10px 12px; font-size: 16px; }
}
@media print {
    .nym-panel { position: static; height: auto; display: block; }
    .nym-sidebar-header, .nym-panel-header, .nym-panel-nav, .nym-btn { display: none !important; }
    .nym-panel-content { overflow: visible; }
}