/* Fondo negro desde el primer byte — elimina el flash blanco al navegar */
html {
    background: #000000;
}

/* Sistema de Gimnasio - Sistema de Gestión Completo */

/* Variables CSS - Colores Configurables */
:root {
    /* Colores principales (valores por defecto, se sobreescriben con JS) */
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    
    /* Colores de marca (configurables) */
    --brand-primary: #2E9D36;
    --brand-primary-light: #3BA847;
    --brand-primary-dark: #258B2E;

     /* Variables RGB para uso con rgba() */
    --brand-primary-rgb: 46, 157, 54;
    --brand-primary-light-rgb: 59, 168, 71;
    --brand-primary-dark-rgb: 37, 139, 46;
    --success-color-rgb: 46, 157, 54;
    --warning-color-rgb: 255, 165, 0;
    --error-color-rgb: 255, 68, 68;
    --info-color-rgb: 0, 153, 204;
    
    /* Colores de estado */
    --success-color: #2E9D36;
    --warning-color: #ffa500;
    --error-color: #ff4444;
    --info-color: #0099cc;
    
    /* Colores de fondo para tarjetas */
    --card-bg: var(--bg-secondary);
    --card-hover: #333333;
    --border-color: #333333;
    --border-light: #444444;
    
    /* Sombras */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    /* Tipografía */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Espaciado */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Bordes */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    
    /* Dimensiones del sidebar */
    --sidebar-width: 280px;
    --sidebar-collapsed: 70px;
    --header-height: 80px;
}

/* Reset y Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary-light);
}

/* ==================== TOPBAR ==================== */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--navbar-bg, linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%));
    border-bottom: 2px solid var(--brand-primary);
    z-index: 1000;
    box-shadow: var(--shadow-medium);
    transition: left 0.3s ease;
}

.topbar-content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    height: 100%;
    padding: 0 var(--spacing-xl);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
    overflow: hidden;
}

.hamburger-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.hamburger-btn:hover {
    background: var(--bg-tertiary);
    color: var(--brand-primary);
}

.empty-notification {
    padding: 32px 20px;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs);
    margin-left: var(--spacing-sm);
    height: 60px;
}

.header-logo img,
.navbar-logo-img {
    height: 60px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    object-position: left center;
}

.header-logo i {
    font-size: 1.5rem;
    color: var(--brand-primary);
}

.search-container {
    position: relative;
    max-width: 400px;
    flex: 1;
}

.search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 2.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(46, 157, 54, 0.2);
}

.search-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.notifications {
    position: relative;
}

.notification-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.125rem;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    position: relative;
}

.notification-btn:hover {
    background: var(--bg-tertiary);
    color: var(--brand-primary);
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--error-color);
    color: white;
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
}

/* ==================== NOTIF PERMISSION BLOCK ==================== */
.notif-permission-block {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.notif-permission-block:hover {
    color: var(--text-primary);
}

@media (max-width: 900px) {
    .notif-permission-block span {
        display: none;
    }
}

@media (max-width: 600px) {
    .notif-permission-block {
        display: none;
    }
}

/* ==================== USER DROPDOWN ==================== */
.user-dropdown {
    position: relative;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: var(--spacing-sm);
    padding-right: var(--spacing-lg);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.user-btn:hover {
    background: var(--bg-tertiary);
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: var(--brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    overflow: hidden;
    flex-shrink: 0;
}

/* Cuando user-avatar contiene una imagen */
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Fondo transparente cuando hay imagen */
.user-avatar.has-image {
    background: transparent;
}

/* Foto de usuario con imagen en el navbar */
.user-avatar-small {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.user-info {
    text-align: left;
}

.user-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.user-role {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.user-arrow {
    font-size: var(--font-size-xs);
    transition: transform 0.3s ease;
}

.user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    min-width: 200px;
    box-shadow: var(--shadow-heavy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
}

.user-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* ==================== NOTIFICATIONS PANEL ==================== */
.notifications {
    position: relative;
}

.notification-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.125rem;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    position: relative;
}

.notification-btn:hover {
    background: var(--bg-tertiary);
    color: var(--brand-primary);
}

.notification-btn.show {
    background: var(--bg-tertiary);
    color: var(--brand-primary);
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--error-color);
    color: white;
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
}

.notifications-panel {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    min-width: 350px;
    max-width: 400px;
    max-height: 500px;
    box-shadow: var(--shadow-heavy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    overflow: hidden;
    margin-top: var(--spacing-sm);
}

.notifications-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .notifications-panel {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        width: 100%;
        min-width: unset;
        max-width: unset;
        max-height: calc(100vh - var(--header-height));
        border-radius: 0;
        margin-top: 0;
        border-left: none;
        border-right: none;
        border-top: none;
    }
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.notifications-header h4 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
}

.mark-read-btn {
    background: none;
    border: none;
    color: var(--brand-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: color 0.3s ease;
}

.mark-read-btn:hover {
    color: var(--brand-primary-light);
    text-decoration: underline;
}

.notifications-list {
    max-height: 350px;
    overflow-y: auto;
    padding: 10px 14px; 
}

.notification-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
}

.notification-item:hover {
    background: var(--bg-tertiary);
}

.notification-item.unread {
    background: rgba(46, 157, 54, 0.05);
}

.notification-item.unread:hover {
    background: rgba(46, 157, 54, 0.1);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon.payment {
    background: rgba(46, 157, 54, 0.15);
    color: var(--success-color);
}

.notification-icon.membership {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.notification-icon.client {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.notification-icon.alert {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.notification-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notification-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.notification-message {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-time {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.unread-dot {
    width: 8px;
    height: 8px;
    background: var(--brand-primary);
    border-radius: 50%;
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
}

.notifications-footer {
    padding: var(--spacing-lg) var(--spacing-md);
    border-top: 1px solid var(--border-color);
    text-align: center;
    background: var(--bg-secondary);
}

.notifications-footer a {
    color: var(--brand-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color 0.3s ease;
}

.notifications-footer a:hover {
    color: var(--brand-primary-light);
    text-decoration: underline;
}

/* ==================== NOTIFICATIONS DRAWER ==================== */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.notifications-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100%;
    height: 100vh;
    background: var(--sidebar-bg, var(--bg-secondary));
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    z-index: 1999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notifications-drawer.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.drawer-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.drawer-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.drawer-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.drawer-tabs {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
}

.drawer-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.drawer-tab:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.drawer-tab.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.drawer-actions {
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.empty-notifications {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    color: var(--text-muted);
    text-align: center;
}

.empty-notifications i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.drawer-notification-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.drawer-notification-item:hover {
    background: var(--bg-tertiary);
}

.drawer-notification-item.unread {
    background: rgba(46, 157, 54, 0.08);
    border-left: 3px solid var(--brand-primary);
}

.drawer-notification-item.unread:hover {
    background: rgba(46, 157, 54, 0.12);
}

.drawer-notification-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.drawer-notification-icon.payment {
    background: rgba(46, 157, 54, 0.15);
    color: var(--success-color);
}

.drawer-notification-icon.membership {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.drawer-notification-icon.client {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.drawer-notification-icon.alert {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.drawer-notification-content {
    flex: 1;
    min-width: 0;
}

.drawer-notification-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 4px;
}

.drawer-notification-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.unread-badge {
    background: var(--brand-primary);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

.drawer-notification-message {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 4px;
}

.drawer-notification-time {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.drawer-notification-action {
    position: absolute;
    top: 50%;
    right: var(--spacing-sm);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.drawer-notification-item:hover .drawer-notification-action {
    opacity: 1;
}

.drawer-notification-action:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: var(--text-primary);
    text-decoration: none;
}

.user-menu-item:hover {
    background: var(--bg-tertiary);
}

.user-menu-item:visited {
    color: var(--text-primary);
}

.user-menu-item:active {
    color: var(--text-primary);
}

.user-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-xs) 0;
}

.logout-item {
    color: var(--error-color);
}

/* ==================== SIDEBAR ==================== */
.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    background: var(--sidebar-bg, var(--bg-secondary));
    border-right: 2px solid var(--border-color);
    z-index: 10000;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 4px; /* Evitar que el avatar se corte por la izquierda */
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

.sidebar-header {
    padding: var(--spacing-lg);
    padding-left: calc(var(--spacing-lg) + 4px); /* Compensar padding del sidebar */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.sidebar.collapsed .sidebar-header {
    padding: var(--spacing-md);
}

.sidebar-user-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.user-avatar-large {
    width: 70px;
    height: 70px;
    background: var(--brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

/* Cuando user-avatar-large tiene imagen, fondo transparente */
.user-avatar-large.has-image {
    background: transparent !important;
}

/* Cuando user-avatar-large contiene una imagen, el fondo debe ser transparente */
.user-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.user-avatar-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 3px solid var(--brand-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.sidebar.collapsed .user-avatar-image {
    width: 44px;
    height: 44px;
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.user-avatar-initials {
    font-weight: 600;
    font-size: 1.25rem;
}

.sidebar.collapsed .sidebar-user-photo {
    justify-content: center;
}

.sidebar.collapsed .user-avatar-large,
.sidebar.collapsed .user-avatar-image {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

.sidebar.collapsed .user-avatar-initials {
    font-size: 0.875rem;
}

.section-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-xs) var(--spacing-md);
    opacity: 1;
    transition: all 0.3s ease;
}

.sidebar.collapsed .section-divider {
    height: 2px;
    margin: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
}

/* Centrado perfecto de iconos en sidebar contraído */
.sidebar.collapsed .sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.sidebar.collapsed .nav-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar.collapsed .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--spacing-md) 0;
    padding-left: 10px;
}

.sidebar.collapsed .nav-item i {
    font-size: 1.25rem;
    margin: 0;
}

.sidebar.collapsed .section-divider {
    height: 2px;
    margin: var(--spacing-sm) 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
    width: 60%;
}

.sidebar-content {
    padding: var(--spacing-md) 0;
}

.nav-section {
    margin-bottom: var(--spacing-md);
}

.nav-section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color, var(--text-muted));
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .nav-section-title {
    opacity: 0;
    width: 0;
    padding: 0;
    margin: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: var(--font-size-sm);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-item.active {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: var(--text-primary);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: var(--text-primary);
    border-radius: 0 2px 2px 0;
}

.nav-item i {
    font-size: 1.25rem;
    min-width: 24px;
    flex-shrink: 0;
    text-align: center;
    color: var(--icon-color, var(--text-primary));
}

.nav-text {
    white-space: nowrap;
    opacity: 1;
    transition: all 0.3s ease;
    overflow: hidden;
    color: var(--text-color, var(--text-primary));
}

.sidebar.collapsed .nav-text {
    opacity: 0;
    width: 0;
    max-width: 0;
}

/* Tooltip for collapsed sidebar */

.sidebar-tooltip {
    position: fixed;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10001;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    border: 1px solid var(--border-color);
    transform: translateY(-50%);
}

.sidebar-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 6px 0;
    border-color: transparent var(--bg-tertiary) transparent transparent;
}

.sidebar-tooltip::after {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7px 7px 0;
    border-color: transparent var(--border-color) transparent transparent;
    z-index: -1;
}

.sidebar.collapsed .nav-item {
    position: relative;
}

/* Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ==================== MAIN CONTENT ==================== */
.main-content {
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
    padding: var(--spacing-xl);
    transition: margin-left 0.3s ease;
    background: var(--main-bg, var(--bg-primary));
}

/* Congelar contenido al navegar para no mostrar blanco */
/* NOTA: la clase se remueve por JS tras 5s de seguridad para evitar bloqueo en descargas */
.main-content.page-leaving {
    pointer-events: none;
    animation: unblock-safety 5s forwards;
}

/* Tras 5s reestablece pointer-events por CSS también, como doble seguridad */
@keyframes unblock-safety {
    0%, 99% { pointer-events: none; }
    100%     { pointer-events: auto; }
}

.main-content.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed);
}

/* Content Sections */
.content-section {
    display: none;
    animation: fadeIn 0.3s ease;
}

.content-section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Header */
.section-header {
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--brand-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* ==================== STATS GRID ==================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-primary);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.stat-card.primary::before { background: var(--brand-primary); }
.stat-card.success::before { background: var(--success-color); }
.stat-card.warning::before { background: var(--warning-color); }
.stat-card.danger::before { background: var(--error-color); }
.stat-card.info::before { background: var(--info-color); }

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-card.primary .stat-icon {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
}

.stat-card.success .stat-icon {
    background: linear-gradient(135deg, var(--success-color) 0%, #34C759 100%);
}

.stat-card.warning .stat-icon {
    background: linear-gradient(135deg, var(--warning-color) 0%, #FFB800 100%);
}

.stat-card.danger .stat-icon {
    background: linear-gradient(135deg, var(--error-color) 0%, #FF6B6B 100%);
}

.stat-card.info .stat-icon {
    background: linear-gradient(135deg, var(--info-color) 0%, #00B4D8 100%);
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.stat-change {
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.stat-change.positive { color: var(--success-color); }
.stat-change.negative { color: var(--error-color); }
.stat-change.neutral { color: var(--text-muted); }

/* ==================== CHARTS GRID ==================== */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.chart-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    transition: all 0.3s ease;
}

.chart-card.large {
    grid-column: span 2;
}

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

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.chart-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.chart-period {
    display: flex;
    gap: var(--spacing-sm);
}

.period-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all 0.3s ease;
}

.period-btn.active,
.period-btn:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.chart-container {
    height: 300px;
    position: relative;
}

/* ==================== BUTTONS ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}


.btn-secondary:hover {
    background: var(--card-hover);
    border-color: var(--brand-primary);
}

/* ==================== FILTERS BAR ==================== */
.filters-bar {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}


/* ==================== ACTIONS BAR (Clientes) ==================== */
.actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.actions-bar .search-filter {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.actions-bar .search-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    padding-left: 2.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: all 0.3s ease;
}

.actions-bar .search-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(46, 157, 54, 0.2);
}

.actions-bar .search-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.actions-bar .btn {
    margin-left: var(--spacing-md);
    flex-shrink: 0;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.search-bar {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.search-bar i {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-bar input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 2.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.filter-controls {
    display: flex;
    gap: var(--spacing-md);
}

.filter-controls select {
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    min-width: 150px;
}

/* ==================== DATA TABLE ==================== */
.data-table-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.data-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table td {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.data-table tbody tr {
    transition: background-color 0.3s ease;
}

.data-table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* Columna Acciones centrada */
.data-table th:last-child,
.data-table td:last-child {
    text-align: center;
    width: 180px;
}

/* ==================== ACTION BUTTONS IN TABLE ==================== */
.action-btns {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    align-items: center;
}

.action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: var(--font-size-sm);
}

.action-btn:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 157, 54, 0.3);
}

.action-btn.view:hover {
    background: var(--info-color);
    border-color: var(--info-color);
}

.action-btn.edit:hover {
    background: var(--warning-color);
    border-color: var(--warning-color);
}

.action-btn.payment:hover {
    background: var(--success-color);
    border-color: var(--success-color);
}

.action-btn.danger:hover {
    background: var(--error-color);
    border-color: var(--error-color);
}

/* Nuevos botones de acción */
.action-btn.delete:hover {
    background: var(--error-color);
    border-color: var(--error-color);
    color: white;
}

.action-btn.check:hover {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.action-btn.check.paid {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--success-color);
    color: var(--success-color);
    cursor: default;
}

.action-btn.check.paid:hover {
    transform: none;
    box-shadow: none;
}

.action-btn.guests {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.action-btn.guests:hover {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.action-btn.extend {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #f59e0b;
}

.action-btn.extend:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* Indicador de invitados (▼) al lado del nombre */
.guests-indicator {
    color: #007b46;
    font-size: 10px;
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.guests-indicator.expanded {
    transform: rotate(180deg);
}

/* Filas de clientes con invitados - cursor pointer */
.cliente-row.has-guests-toggle {
    cursor: pointer;
}

.cliente-row.has-guests-toggle:hover {
    background: rgba(139, 92, 246, 0.05);
}

/* Filas de invitados expandibles */
.guest-row td {
    padding: 0 !important;
    border: none !important;
}

.guest-row-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px 10px 25px;
    margin-left: 20px;
    position: relative;
}

/* Línea curva conectora */
.guest-curve {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 50%;
    width: 15px;
    border-left: 2px solid var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
    border-bottom-left-radius: 10px;
}

/* Línea vertical continua para invitados que no son el último */
.guest-row:not(.last-guest) .guest-row-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    bottom: -10px;
    border-left: 2px solid var(--brand-primary);
}

.guest-row .guest-name {
    font-weight: 500;
    color: var(--text-primary);
}

.guest-row .guest-info {
    color: var(--text-muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.guest-row .guest-info i {
    font-size: 10px;
    opacity: 0.7;
}

/* Botón editar invitado */
.guest-edit-btn {
    background: transparent;
    border: 1px solid rgba(0, 123, 70, 0.3);
    color: #007b46;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.2s ease;
    margin-right: 6px;
}

.guest-edit-btn:hover {
    background: rgba(0, 123, 70, 0.15);
    border-color: #007b46;
    opacity: 1;
}

.guest-edit-btn i {
    font-size: 12px;
}

/* Botón eliminar invitado */
.guest-delete-btn {
    background: transparent;
    border: 1px solid rgba(255, 68, 68, 0.3);
    color: #ff4444;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.guest-delete-btn:hover {
    background: rgba(255, 68, 68, 0.15);
    border-color: #ff4444;
    opacity: 1;
}

.guest-delete-btn i {
    font-size: 12px;
}

.guest-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007b46 0%, #05a862 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 11px;
    flex-shrink: 0;
}

.guest-badge {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.guest-badge i {
    font-size: 10px;
}

.guest-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.guest-status.pendiente {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.guest-status.completado {
    background: rgba(46, 157, 54, 0.15);
    color: #2E9D36;
}

.guest-row-hidden {
    display: none;
}

/* Client Cell in Table */
.client-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.client-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.client-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.client-name {
    font-weight: 600;
    color: var(--text-primary);
}

.client-email {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}   

/* ==================== STATUS BADGES ==================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active,
.status-badge.completed {
    background: rgba(46, 157, 54, 0.15);
    color: var(--success-color);
}

.status-badge.inactive {
    background: rgba(255, 165, 0, 0.15);
    color: var(--warning-color);
}

.status-badge.overdue {
    background: rgba(255, 68, 68, 0.15);
    color: var(--error-color);
}

.status-badge.pending {
    background: rgba(0, 153, 204, 0.15);
    color: var(--info-color);
}

/* ==================== PAGINATION ==================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) 0;
    margin-top: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding: 0 var(--spacing-md);
}

.pagination-numbers {
    display: flex;
    gap: var(--spacing-xs);
}

.page-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-number:hover,
.page-number.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

/* ==================== PLAN CARDS ==================== */
.planes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.plan-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-primary);
}

.plan-card.plan-a::before { background: #3BA847; }
.plan-card.plan-b::before { background: #007ACC; }
.plan-card.plan-c::before { background: #FF6B35; }
.plan-card.plan-d::before { background: #9B59B6; }

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.plan-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.plan-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    font-size: 1.5rem;
    color: white;
}

.plan-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.plan-price {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--brand-primary);
}

.plan-details p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.plan-features {
    list-style: none;
    margin-bottom: var(--spacing-lg);
}

.plan-features li {
    padding: var(--spacing-xs) 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: var(--spacing-lg);
}

.plan-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: 600;
}

.plan-stats {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.clients-count {
    font-size: var(--font-size-sm);
    color: var(--brand-primary);
    font-weight: 600;
}

/* ==================== MODAL ==================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-heavy);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--spacing-xl);
}

.modal-footer {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
}

/* Modal pequeño para confirmaciones */
.modal-content.modal-small {
    max-width: 450px;
}

/* Modal header danger (para eliminar) */
.modal-header.danger {
    background: rgba(239, 68, 68, 0.1);
    border-bottom: 2px solid var(--error-color);
}

.modal-header.danger h3 {
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Mensajes en modales */
.modal-message {
    font-size: var(--font-size-lg);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.modal-warning {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* Estilos para modal de invitado */
.invitado-info {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.invitado-info p {
    margin: var(--spacing-xs) 0;
}

.invitado-info .text-muted {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Estilos para modal de extender plan */
.extender-info {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.extender-info p {
    margin: var(--spacing-xs) 0;
}

.extension-preview {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.preview-item .label {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.preview-item .value {
    font-weight: 600;
    color: var(--text-primary);
}

.preview-item.highlight {
    border-top: 1px dashed var(--border-color);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-md);
}

.preview-item.highlight .value {
    color: var(--success-color);
    font-size: var(--font-size-lg);
}

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

.text-muted i {
    margin-right: var(--spacing-xs);
}

/* ==================== QR CODE SECTION ==================== */
.qr-section {
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    transition: all 0.3s ease;
}

.qr-section:hover {
    border-color: var(--brand-primary);
}

.qr-display {
    width: 180px;
    height: 180px;
    margin: 0 auto var(--spacing-md);
    background: white;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    overflow: hidden;
}

.qr-display img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-display i {
    font-size: 3rem;
    color: var(--text-muted);
}

.qr-display span {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.qr-display.has-qr i,
.qr-display.has-qr span {
    display: none;
}

.qr-display.has-qr img {
    display: block;
}

.qr-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.qr-actions .btn {
    min-width: 140px;
}

.btn-success {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: white;
    border: none;
}

.btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.btn-success:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    border: 1px solid var(--border-color);
}

.qr-info {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.qr-info i {
    color: var(--brand-primary);
}
/* ==================== PAYMENT STATUS TOGGLE ==================== */
.payment-status-toggle {
    display: flex;
    gap: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 4px;
}

.payment-status-toggle input[type="radio"] {
    display: none;
}

.status-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.status-option i {
    font-size: 1rem;
}

.status-option.pagado {
    color: var(--success-color);
}

.status-option.pagado:hover {
    background: rgba(46, 157, 54, 0.1);
}

.status-option.pendiente {
    color: var(--warning-color);
}

.status-option.pendiente:hover {
    background: rgba(255, 165, 0, 0.1);
}

/* Estado activo - Pagado (Nuevo Cliente) */
#pago_pagado:checked + .status-option.pagado,
#edit_pago_pagado:checked + .status-option.pagado {
    background: linear-gradient(135deg, var(--success-color) 0%, #34C759 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(46, 157, 54, 0.3);
}

#pago_pagado:checked + .status-option.pagado i,
#edit_pago_pagado:checked + .status-option.pagado i {
    color: white;
}

/* Estado activo - Pendiente (Nuevo Cliente y Editar Cliente) */
#pago_pendiente:checked + .status-option.pendiente,
#edit_pago_pendiente:checked + .status-option.pendiente {
    background: linear-gradient(135deg, var(--warning-color) 0%, #FFB800 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 165, 0, 0.3);
}

#pago_pendiente:checked + .status-option.pendiente i,
#edit_pago_pendiente:checked + .status-option.pendiente i {
    color: white;
}

/* ==================== PHONE INPUT WITH COUNTRY CODE ==================== */
.phone-input-container {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.country-code-wrapper {
    position: relative;
}

.country-code-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--border-color);
}

#country-code {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    padding: var(--spacing-md);
    padding-right: var(--spacing-xl);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    min-width: 160px;
    height: 46px;
    transition: all 0.3s ease;
}

#country-code:hover {
    background: var(--card-hover);
}

#country-code:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(46, 157, 54, 0.2);
}

/* Input validation states */
.form-group input.valid {
    border-color: var(--success-color);
    background: rgba(46, 157, 54, 0.1);
}

.form-group input.error {
    border-color: var(--error-color);
    background: rgba(255, 68, 68, 0.1);
}

#dni-input {
    transition: all 0.3s ease;
}

#dni-input.valid {
    border-color: var(--success-color);
    box-shadow: 0 0 0 2px rgba(46, 157, 54, 0.2);
}

/* DNI Search Button Styles */
.dni-search-container {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.dni-search-container input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    height: 46px;
    transition: all 0.3s ease;
}

.dni-search-container input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(46, 157, 54, 0.2);
}

.dni-search-container input.valid {
    border-color: var(--success-color);
    background: rgba(46, 157, 54, 0.1);
}

.btn-dni-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    border: 1px solid var(--brand-primary);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.btn-dni-search:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 157, 54, 0.3);
}

.btn-dni-search:disabled {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    cursor: not-allowed;
}

.btn-dni-search i {
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-dni-search .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.btn-dni-search.loading i {
    display: none;
}

.btn-dni-search.loading .spinner {
    display: block;
}

/* Search status messages */
.search-status {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.search-status.success {
    color: var(--success-color);
}

.search-status.error {
    color: var(--error-color);
}

.search-status.loading {
    color: var(--brand-primary);
}

#country-code::-ms-expand {
    display: none;
}

.country-code-wrapper::before {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 0.85rem;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#phone-input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    height: 46px;
    transition: all 0.3s ease;
}

#phone-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(46, 157, 54, 0.2);
}

#phone-input.error {
    border-color: var(--error-color);
    box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2);
}

#phone-input.valid {
    border-color: var(--success-color);
}

.input-hint {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.required {
    color: var(--error-color);
}

/* DNI Input validation */
#dni-input {
    transition: all 0.3s ease;
}

#dni-input.valid {
    border-color: var(--success-color);
    box-shadow: 0 0 0 2px rgba(46, 157, 54, 0.2);
}

#dni-input.error {
    border-color: var(--error-color);
    box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2);
}

/* ==================== FORMS ==================== */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(46, 157, 54, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.activity-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
}

.activity-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.activity-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.view-all-btn {
    background: none;
    border: none;
    color: var(--brand-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: color 0.3s ease;
}

.view-all-btn:hover {
    color: var(--brand-primary-light);
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.activity-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.activity-icon.success { background: var(--success-color); }
.activity-icon.warning { background: var(--warning-color); }
.activity-icon.info { background: var(--info-color); }

.activity-details {
    flex: 1;
}

.activity-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.activity-time {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ==================== CLIENT CARDS ==================== */
.clients-today {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.client-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
}

.client-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.client-info {
    flex: 1;
}

.client-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.client-plan {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ==================== ACCESS GRID ==================== */
.access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.access-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
}

.access-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.scanner-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    color: var(--text-muted);
}

.scanner-area i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

/* ==================== PRODUCT CARDS ==================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.product-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.product-image {
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius-lg);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
    font-size: 2rem;
    color: var(--brand-primary);
}

.product-info h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.product-info p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-sm);
}

.product-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.product-price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--success-color);
}

.product-stock {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ==================== ROLE CARDS ==================== */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.role-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all 0.3s ease;
}

.role-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.role-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
    font-size: 1.5rem;
    color: white;
}

.role-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.role-card p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.role-count {
    display: inline-block;
    background: var(--bg-tertiary);
    color: var(--brand-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
}


/* ==================== PAYMENTS STATS ==================== */
.payments-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

/* ==================== SALES STATS ==================== */
.sales-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

/* ==================== REPORTS GRID ==================== */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
}

.report-controls {
    display: flex;
    gap: var(--spacing-md);
}

.top-products {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.product-ranking {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
}

.rank {
    font-weight: 600;
    color: var(--brand-primary);
    min-width: 20px;
}

.name {
    flex: 1;
    font-weight: 500;
}

.sales {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ==================== PRODUCTS SELECTION ==================== */
.products-selection {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.products-selection select {
    flex: 1;
}

.products-selection input {
    width: 100px;
}

.cart-items {
    margin: var(--spacing-lg) 0;
    max-height: 200px;
    overflow-y: auto;
}

.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
    min-height: 60px;
}

.cart-total {
    text-align: right;
    font-size: var(--font-size-lg);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-lg);
}

/* ==================== TOP PRODUCTS LIST ==================== */
.top-products-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.product-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.product-item:hover {
    background: var(--card-hover);
}

.product-rank {
    width: 24px;
    height: 24px;
    background: var(--brand-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.product-info {
    flex: 1;
}

.product-name {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.product-sales {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.product-revenue {
    font-weight: 600;
    color: var(--success-color);
}

/* ==================== ACCESS CONTROLS ==================== */
.access-controls {
    display: flex;
    gap: var(--spacing-md);
}

/* ==================== INSIDE CLIENTS ==================== */
.inside-clients {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ==================== TIME CONTROLS ==================== */
.time-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1200px) {
    /* En tablets, el sidebar puede colapsarse igual que en desktop */
    /* El comportamiento de collapse es el mismo, solo ajusta el overlay */
    
    .sidebar-overlay.active {
        display: block;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --spacing-xl: 1rem;
    }

    .topbar-content {
        padding: 0 var(--spacing-sm);
    }

    .topbar-left {
        gap: var(--spacing-sm);
    }

    .topbar-right {
        gap: var(--spacing-sm);
    }

    .search-container {
        display: none;
    }

    .user-info {
        display: none;
    }

    .header-logo img,
    .navbar-logo-img {
        height: 44px;
        max-width: 140px;
    }

    .notif-permission-block span {
        display: none;
    }

    .hamburger-btn,
    .notification-btn {
        padding: var(--spacing-xs);
    }

    .user-btn {
        padding: var(--spacing-xs);
        gap: var(--spacing-sm);
    }

    .user-arrow {
        display: none;
    }
    
    .main-content {
        padding: var(--spacing-md);
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-card.large {
        grid-column: span 1;
    }
    
    .activity-section {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        margin: var(--spacing-md);
    }
    
    .products-selection {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    :root {
        --header-height: 56px;
    }

    .stat-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto;
        align-items: center;
        gap: var(--spacing-md);
        text-align: left;
        padding: var(--spacing-lg);
    }

    .stat-icon {
        grid-column: 1;
        grid-row: 1;
    }

    .stat-content {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }

    .stat-badge {
        justify-content: flex-start;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
    }

    .nav-item {
        padding: var(--spacing-md);
    }

    .nav-text {
        display: none;
    }

    .header-logo img,
    .navbar-logo-img {
        height: 36px;
        max-width: 110px;
    }

    .notif-permission-block {
        display: none;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .user-avatar-small {
        width: 32px !important;
        height: 32px !important;
    }

    .topbar-content {
        padding: 0 8px;
    }
}

/* ==================== STAFF/PERSONAL STYLES ==================== */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.staff-card {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.staff-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.staff-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    position: relative;
}

.staff-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-right: var(--spacing-md);
}

.staff-info {
    flex: 1;
}

.staff-info h4 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-lg);
}

.staff-role {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: capitalize;
}

.staff-role.admin {
    background: rgba(220, 38, 38, 0.2);
    color: #fecaca;
}

.staff-role.recepcionista {
    background: rgba(59, 130, 246, 0.2);
    color: #bfdbfe;
}

.staff-role.vendedor {
    background: rgba(16, 185, 129, 0.2);
    color: #a7f3d0;
}

.staff-role.entrenador {
    background: rgba(245, 158, 11, 0.2);
    color: #fde68a;
}

.staff-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.staff-status.active {
    background: #10b981;
    border-color: #10b981;
}

.staff-status.inactive {
    background: #ef4444;
    border-color: #ef4444;
}

.staff-body {
    padding: var(--spacing-lg);
}

.staff-detail {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.staff-detail i {
    width: 20px;
    color: var(--primary);
}

.staff-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-secondary);
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

.btn-sm {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
}

/* Estilos específicos para la vista de pagos pendientes */
    .days-late {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }

    .days-late.overdue {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

    .action-btn.view {
        background: rgba(59, 130, 246, 0.15);
        border-color: #3b82f6;
        color: #3b82f6;
    }

    .action-btn.view:hover {
        background: #3b82f6;
        border-color: #3b82f6;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    /* ==================== TOGGLE SWITCH ==================== */
    .toggle-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: var(--spacing-md);
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        transition: all 0.3s ease;
    }

    .toggle-label:hover {
        background: var(--bg-secondary);
        border-color: var(--brand-primary);
    }

    .toggle-content {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
        flex: 1;
    }

    .toggle-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        background: rgba(46, 157, 54, 0.15);
        color: var(--brand-primary);
        flex-shrink: 0;
    }

    .toggle-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .toggle-title {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--text-primary);
    }

    .toggle-hint {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .toggle-input {
        display: none;
    }

    .toggle-switch {
        position: relative;
        width: 52px;
        height: 28px;
        background: var(--border-color);
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .toggle-switch::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        background: white;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .toggle-input:checked + .toggle-switch {
        background: var(--brand-primary);
    }

    .toggle-input:checked + .toggle-switch::after {
        transform: translateX(24px);
    }

    /* ==================== INPUT LABEL WITH ICON ==================== */
    .input-label {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

    .input-label i {
        color: var(--brand-primary);
    }

    /* Estilos para campos de cantidad de invitados */
    #cantidad-invitados-container {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: var(--spacing-md);
        margin-left: 0;
    }

    #cantidad-invitados-container input[type="number"] {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: var(--spacing-md);
        color: var(--text-primary);
        font-size: var(--font-size-base);
        width: 100%;
        max-width: 200px;
    }

    #cantidad-invitados-container input[type="number"]:focus {
        outline: none;
        border-color: var(--brand-primary);
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
    }

    /* Debug: asegurar que el toggle sea visible */
    .toggle-label {
        position: relative;
        overflow: visible;
        z-index: 1;
    }

    .toggle-switch {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        z-index: 2;
    }

    /* Asegurar que el background del toggle sea oscuro (no transparente/blanco) */
    .toggle-switch {
        background: var(--border-color) !important;
        border: 2px solid var(--border-color);
    }

    /* Cuando está activado */
    .toggle-input:checked + .toggle-switch {
        background: var(--brand-primary) !important;
        border-color: var(--brand-primary) !important;
    }

    .checkbox-label input[type="checkbox"] {
        display: none;
    }

    .checkmark {
        width: 24px;
        height: 24px;
        border: 2px solid var(--border-color);
        border-radius: 6px;
        margin-right: var(--spacing-md);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .checkbox-label input:checked + .checkmark {
        background: var(--success-color);
        border-color: var(--success-color);
    }

    .checkbox-label input:checked + .checkmark::after {
        content: '✓';
        color: white;
        font-weight: bold;
    }

    .checkbox-text {
        color: var(--text-primary);
    }

    /* Sección de método de pago */
    .metodo-pago-section {
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #modal-recibo .modal-content {
        max-width: 500px;
    }

    /* Botón historial */
    .action-btn.history {
        background: rgba(16, 185, 129, 0.15);
        border-color: #10b981;
        color: #10b981;
    }

    .action-btn.history:hover {
        background: #10b981;
        border-color: #10b981;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

    /* Modal historial */
    .modal-large {
        max-width: 600px;
    }

    .historial-info-cliente {
        background: var(--bg-tertiary);
        border-radius: var(--border-radius);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cliente-badge {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .cliente-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: var(--font-size-lg);
    }

    .cliente-datos h4 {
        margin: 0;
        font-size: var(--font-size-lg);
        color: var(--text-primary);
    }

    .cliente-datos .dni {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
    }

    .total-pagado {
        text-align: right;
    }

    .total-pagado .label {
        display: block;
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        margin-bottom: 4px;
    }

    .total-pagado .amount {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--success-color);
    }

    .historial-container {
        background: var(--bg-tertiary);
        border-radius: var(--border-radius);
        padding: var(--spacing-lg);
    }

    .historial-container h4 {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);
        padding-bottom: var(--spacing-sm);
    }

    .historial-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--border-color);
    }

    .historial-item:last-child {
        border-bottom: none;
    }

    .historial-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .historial-fecha {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
    }

    .historial-detalle {
        font-weight: 600;
        color: var(--text-primary);
    }

    .historial-monto {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .historial-monto .monto {
        font-weight: 600;
        color: var(--text-primary);
    }

    /* Estilos para filtros de estado */
    .status-filter {
        display: flex;
        gap: var(--spacing-sm);
        background: var(--bg-tertiary);
        padding: 4px;
        border-radius: var(--border-radius-lg);
    }

    .filter-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        border-radius: var(--border-radius);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .filter-btn:hover {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

    .filter-btn.active {
        background: var(--brand-primary);
        color: white;
        box-shadow: 0 2px 8px rgba(46, 157, 54, 0.3);
    }

    .filter-btn.success.active {
        background: var(--success-color);
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    }

    .filter-btn i {
        font-size: 12px;
    }

    /* Responsive para filtros */
    @media (max-width: 768px) {
        .status-filter {
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .filter-btn {
            padding: 6px 12px;
            font-size: var(--font-size-xs);
        }
        
        .filter-btn span {
            display: none;
        }
        
        .filter-btn::after {
            content: attr(data-short);
            font-size: var(--font-size-xs);
        }
    }

/* ==================== SCANNER SECTION FULL WIDTH ==================== */
    .scanner-section-full {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    /* Info Bar */
    .scanner-info-bar {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .scanner-info-bar .scanner-stat-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,0.05);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: 0 16px;
        height: 44px;
        box-sizing: border-box;
        line-height: 44px;
    }

    .scanner-info-bar .scanner-stat-item i,
    .scanner-info-bar .scanner-stat-item .info-label,
    .scanner-info-bar .scanner-stat-item .info-value {
        line-height: 1;
        vertical-align: middle;
    }

    .scanner-info-bar .scanner-stat-item i {
        color: var(--brand-primary);
        font-size: 1rem;
        flex-shrink: 0;
        width: 16px;
        text-align: center;
    }

    .scanner-info-bar .scanner-stat-item .info-label {
        font-size: 0.8rem;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .scanner-info-bar .scanner-stat-item .info-value {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
    }

    @media (max-width: 768px) {
        .scanner-info-bar {
            flex-direction: column;
            align-items: stretch;
            gap: var(--spacing-sm);
            padding: var(--spacing-sm) var(--spacing-md);
        }

        .scanner-info-bar .scanner-stat-item {
            width: 100%;
            justify-content: flex-start;
            height: 44px;
        }
    }

    .scanner-info-bar .btn-sm {
        padding: 6px 12px;
        font-size: var(--font-size-xs);
        margin-left: auto;
    }

    .scanner-card-large {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-lg);
        overflow: hidden;
    }

    .scanner-tabs {
        display: flex;
        background: var(--bg-tertiary);
        padding: 4px;
    }

    .tab-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 20px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: var(--font-size-md);
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: var(--border-radius);
    }

    .tab-btn:hover {
        color: var(--text-primary);
    }

    .tab-btn.active {
        background: var(--brand-primary);
        color: white;
        box-shadow: 0 2px 12px rgba(46, 157, 54, 0.4);
    }

    .tab-content {
        display: none;
        padding: var(--spacing-xl);
    }

    .tab-content.active {
        display: block;
    }

    .scanner-large-preview {
        text-align: center;
        padding: 60px 40px;
        background: var(--bg-tertiary);
        border-radius: var(--border-radius);
        margin-bottom: var(--spacing-lg);
    }

    .scanner-animation-large {
        position: relative;
        display: inline-block;
        width: 180px;
        height: 180px;
    }

    .scanner-animation-large i {
        font-size: 180px;
        color: var(--brand-primary);
        opacity: 0.3;
    }

    .scan-line {
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        height: 3px;
        background: var(--brand-primary);
        box-shadow: 0 0 15px var(--brand-primary);
        animation: scan 2s linear infinite;
    }

    @keyframes scan {
        0% { top: 15px; }
        50% { top: 150px; }
        100% { top: 15px; }
    }

    .scanner-status-large {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: var(--spacing-lg);
        color: var(--text-muted);
        font-size: var(--font-size-lg);
    }

    .pulse {
        width: 12px;
        height: 12px;
        background: var(--success-color);
        border-radius: 50%;
        animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.3); }
    }

    .scanner-input-large {
        display: flex;
        gap: var(--spacing-md);
        max-width: 600px;
        margin: 0 auto;
    }

    .scanner-input-large input {
        flex: 1;
        padding: var(--spacing-lg);
        border: 2px solid var(--border-color);
        border-radius: var(--border-radius);
        font-size: var(--font-size-xl);
        text-align: center;
        letter-spacing: 4px;
        font-weight: 600;
    }

    .scanner-input-large input:focus {
        border-color: var(--brand-primary);
        outline: none;
    }

    .input-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: var(--spacing-md);
        font-size: var(--font-size-sm);
        color: var(--text-muted);
    }

    /* DNI Input Large */
    .dni-input-section-large {
        padding: var(--spacing-lg);
        max-width: 600px;
        margin: 0 auto;
    }

    .dni-input-container-large {
        display: flex;
        gap: var(--spacing-md);
        margin-top: var(--spacing-md);
    }

    .dni-input-container-large input {
        flex: 1;
        padding: var(--spacing-lg);
        border: 2px solid var(--border-color);
        border-radius: var(--border-radius);
        font-size: var(--font-size-2xl);
        text-align: center;
        letter-spacing: 6px;
        font-weight: 700;
    }

    .dni-input-container-large input:focus {
        border-color: var(--brand-primary);
        outline: none;
    }

    /* ==================== QUICK STATS FULL ==================== */
    .quick-stats-full {
        display: flex;
        justify-content: center;
    }

    .stat-item-full {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-lg);
        padding: var(--spacing-lg) var(--spacing-2xl);
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
    }

    .stat-icon-full {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 24px;
        background: rgba(59, 130, 246, 0.15);
        color: #3b82f6;
    }

    .stat-data-full {
        text-align: left;
    }

    .stat-value-full {
        display: block;
        font-size: 36px;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1;
    }

    .stat-label-full {
        font-size: var(--font-size-md);
        color: var(--text-muted);
    }

    /* ==================== TABLE SECTION FULL ==================== */
    .table-section-full {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .log-title-full {
        font-size: var(--font-size-lg);
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
    }

    .data-table-container-full {
        flex: 1;
        overflow-y: auto;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-lg);
    }

    .data-table-container-full .data-table {
        width: 100%;
    }

    .data-table-container-full th,
    .data-table-container-full td {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    /* ==================== CLIENT DETAILS IN TABLE ==================== */
    .client-details {
        display: flex;
        flex-direction: column;
    }

    .client-dni {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    /* ==================== MODAL STYLES ==================== */
    .modal-medium {
        max-width: 500px;
    }

    .modal-small {
        max-width: 400px;
    }

    .cliente-verificacion {
        display: flex;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
        background: var(--bg-tertiary);
        border-radius: var(--border-radius);
        margin-bottom: var(--spacing-lg);
    }

    .cliente-avatar-large {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: var(--font-size-2xl);
    }

    .cliente-info-detallada {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
    }

    .cliente-info-detallada h2 {
        margin: 0;
        font-size: var(--font-size-xl);
        color: var(--text-primary);
    }

    .info-row {
        display: flex;
        gap: var(--spacing-sm);
    }

    .info-row .label {
        color: var(--text-muted);
        font-size: var(--font-size-sm);
    }

    .info-row .value {
        color: var(--text-primary);
        font-weight: 500;
        font-size: var(--font-size-sm);
    }

    .membresia-status {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        background: rgba(34, 197, 94, 0.1);
        border-radius: var(--border-radius);
        margin-bottom: var(--spacing-lg);
    }

    .membresia-status.warning {
        background: rgba(245, 158, 11, 0.1);
    }

    .status-icon {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 24px;
    }

    .status-icon.success {
        background: rgba(34, 197, 94, 0.2);
        color: var(--success-color);
    }

    .status-icon.warning {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

    .status-text h4 {
        margin: 0;
        color: var(--text-primary);
        font-size: var(--font-size-lg);
    }

    .status-text p {
        margin: 4px 0 0;
        color: var(--text-muted);
        font-size: var(--font-size-sm);
    }

    /* Sección de invitados */
    .invitados-section {
        background: rgba(59, 130, 246, 0.05);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: var(--border-radius);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .invitados-section h4 {
        margin: 0 0 var(--spacing-md);
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-base);
    }

    .invitados-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-md);
    }

    .invitados-header h4 {
        margin: 0;
    }

    .invitados-header .btn {
        margin: 0;
    }

    .invitados-container {
        max-height: 200px;
        overflow-y: auto;
    }

    .invitados-lista {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .no-invitados {
        color: var(--text-muted);
        font-style: italic;
        margin: 0;
        text-align: center;
        padding: var(--spacing-md);
    }

    .invitados-hint {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
        margin: 0 0 var(--spacing-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .invitado-ya-entro {
        opacity: 0.6;
    }

    .invitado-dni {
        color: var(--text-muted);
        font-size: var(--font-size-sm);
    }

    .checkbox-todos {
        background: rgba(59, 130, 246, 0.1);
        border-radius: var(--border-radius);
        margin-bottom: var(--spacing-sm);
    }

    .invitados-divider {
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
        margin: var(--spacing-sm) 0;
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        border-radius: var(--border-radius-sm);
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .checkbox-label:hover {
        background: rgba(59, 130, 246, 0.1);
    }

    .checkbox-label .checkmark {
        width: 22px;
        height: 22px;
        min-width: 22px;
        border: 2px solid var(--border-color);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .checkbox-label input:checked + .checkmark {
        background: var(--success-color, #10b981);
        border-color: var(--success-color, #10b981);
    }

    .checkbox-label input:checked + .checkmark::after {
        content: '✓';
        color: white;
        font-size: 14px;
        font-weight: bold;
    }

    .checkbox-text {
        flex: 1;
    }

    .acceso-opciones {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .btn-large {
        padding: var(--spacing-lg) var(--spacing-xl);
        font-size: var(--font-size-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .denegado-info {
        text-align: center;
        padding: var(--spacing-lg);
    }

    .denegado-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--error-color) 0%, #dc2626 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: var(--font-size-2xl);
        margin: 0 auto var(--spacing-md);
    }

    .denegado-info h4 {
        margin: 0 0 var(--spacing-lg);
        color: var(--text-primary);
    }

    .razon-denegado {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        color: var(--error-color);
    }

    /* Modal header warning (para advertencias) */
    .modal-header.warning {
        background: rgba(255, 165, 0, 0.1);
        border-bottom: 2px solid var(--warning-color);
    }

    .modal-header.warning h3 {
        color: var(--warning-color);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: #ffffff;
    }

    /* Estilos para opciones de DNI */
    .acceso-opciones-dni {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .acceso-opciones-dni .btn-warning {
        background: linear-gradient(135deg, var(--warning-color) 0%, #e69500 100%);
        color: #000;
    }

    .acceso-opciones-dni .btn-warning:hover {
        background: linear-gradient(135deg, #e69500 0%, #cc8400 100%);
    }

    /* Estado de membresía para DNI */
    .membresia-status .status-icon.error {
        background: rgba(239, 68, 68, 0.2);
        color: var(--error-color);
    }

    /* Estilos para denegado-info en modales de advertencia */
    .denegado-info .denegado-avatar i {
        font-size: 2rem;
        color: var(--warning-color);
    }

    .razon-denegado i {
        font-size: 1.2rem;
    }

    .razon-denegado p {
        margin: 0;
        color: var(--text-secondary);
    }


    .razon-denegado i {
        font-size: 24px;
    }

    .razon-denegado p {
        margin: 0;
        font-weight: 500;
    }

    .modal-header.success {
        background: rgba(34, 197, 94, 0.1);
        border-bottom: 2px solid var(--success-color);
    }

    .modal-header.success h3 {
        color: var(--success-color);
    }

    .modal-header.warning {
        background: rgba(245, 158, 11, 0.1);
        border-bottom: 2px solid #f59e0b;
    }

     

/* Report Tables */
.report-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.report-table-section h3 {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

/* Scanner Section */
.scanner-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.scanner-card {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
}

.scanner-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.scanner-icon {
    font-size: 48px;
    color: var(--primary);
}

.scanner-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.scanner-preview {
    background: #1a1a2e;
    border-radius: var(--border-radius-md);
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    margin-bottom: var(--spacing-lg);
}

.scanner-preview i {
    font-size: 48px;
    margin-bottom: var(--spacing-sm);
}

.scanner-input {
    display: flex;
    gap: var(--spacing-sm);
}

.scanner-input input {
    flex: 1;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-md);
}

.last-access-card {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
}

.last-access-card h4 {
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--text-primary);
}

.access-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--border-radius-md);
}

.access-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.access-details {
    flex: 1;
}

.access-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.access-time {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.access-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.access-status.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.access-status.denied {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Sale Form */
.sale-form {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--spacing-xl);
}

.sale-left .form-group {
    margin-bottom: var(--spacing-md);
}

.products-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    margin-top: var(--spacing-md);
}

.products-list h4 {
    padding: var(--spacing-md);
    margin: 0;
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
}

.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
}

.product-item:hover {
    background: var(--bg-secondary);
}

.product-item .product-info {
    display: flex;
    flex-direction: column;
}

.product-item .product-name {
    font-weight: 500;
}

.product-item .product-price {
    color: var(--primary);
    font-weight: 600;
}

.product-item .stock {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.product-item .stock.warning {
    color: #f59e0b;
}

.sale-right {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
}

.sale-right h4 {
    margin: 0 0 var(--spacing-md) 0;
}

.empty-cart {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--spacing-xl);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: 600;
    border-top: 2px solid var(--border-color);
    margin-top: var(--spacing-md);
}

.modal-content.large {
    max-width: 900px;
}

/* Report Filters */
.report-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: flex-end;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.filter-group label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.filter-select {
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-md);
    min-width: 180px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(46, 157, 54, 0.1);
}

.date-range-group {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.date-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.date-input {
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-md);
    min-width: 160px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.date-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(46, 157, 54, 0.1);
}

.date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.filter-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-left: auto;
}

/* Plans Grid */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}


.plan-card:hover {
    transform: translateY(-4px);
}

.plan-card.featured {
    border: 2px solid var(--primary);
}

.plan-badge {
    position: absolute;
    top: 10px;
    right: -30px;
    background: var(--primary);
    color: white;
    padding: 4px 40px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transform: rotate(45deg);
}

.plan-header {
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    text-align: center;
}

.plan-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

.plan-name {
    margin: 0;
    font-size: var(--font-size-lg);
}

.plan-body {
    padding: var(--spacing-xl);
    text-align: center;
}


.plan-duration {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}


.plan-features li {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats-section {
    margin-top: var(--spacing-xl);
}

.stats-section h3 {
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.empleado-detalle {
        text-align: center;
    }

    .empleado-foto {
        margin-bottom: 20px;
    }

    .avatar-grande {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--primary, #2563eb);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-weight: bold;
        margin: 0 auto 10px;
    }

    .empleado-info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        text-align: left;
        margin-top: 20px;
    }

    .info-item {
        background: #f8fafc;
        padding: 12px;
        border-radius: 8px;
    }

    .info-item.full-width {
        grid-column: span 2;
    }

    .info-item label {
        display: block;
        font-size: 12px;
        color: #64748b;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-item span {
        font-weight: 500;
        color: #1e293b;
    }

    .sin-datos-mensaje {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        text-align: center;
        color: #64748b;
    }

    .sin-datos-mensaje i {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .sin-datos-mensaje p {
        margin-bottom: 20px;
        font-size: 16px;
    }

    .badge-info {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    .required {
        color: #ef4444;
    }

    /* ==================== BADGES ==================== */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .badge-success {
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
    }

    .badge-warning {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }

    .badge-info {
        background: rgba(59, 130, 246, 0.15);
        color: #3b82f6;
    }

    .badge-yape {
        background: linear-gradient(135deg, #7B3F00 0%, #A05000 100%);
        color: #ffffff;
    }

    .badge-danger {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

    /* ==================== CATEGORY FILTERS ==================== */
    .category-filters,
    .status-filter {
        display: flex;
        gap: var(--spacing-sm);
        background: var(--bg-secondary);
        padding: 4px;
        border-radius: var(--border-radius-lg);
        width: fit-content;
    }

    .filter-tab,
    .filter-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        border-radius: var(--border-radius);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .filter-tab:hover,
    .filter-btn:hover {
        color: var(--text-primary);
        background: var(--bg-tertiary);
    }

    .filter-tab.active,
    .filter-btn.active {
        background: var(--brand-primary);
        color: white;
        box-shadow: 0 2px 8px rgba(46, 157, 54, 0.3);
    }

    .filter-btn.success.active {
        background: #22c55e;
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    }

    .filter-tab i,
    .filter-btn i {
        font-size: 14px;
    }

    /* ==================== PRODUCT CELL ==================== */
    .product-cell,
    .client-cell {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .product-icon,
    .client-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .product-icon.suplementos {
        background: rgba(139, 92, 246, 0.15);
        color: #8b5cf6;
    }

    .product-icon.accesorios {
        background: rgba(59, 130, 246, 0.15);
        color: #3b82f6;
    }

    .product-icon.equipamiento {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }

    .product-details,
    .client-details {
        display: flex;
        flex-direction: column;
    }

    .product-name,
    .client-name {
        font-weight: 600;
        color: var(--text-primary);
    }

    .product-code {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    /* ==================== CATEGORY BADGES ==================== */
    .category-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .category-badge.suplementos {
        background: rgba(139, 92, 246, 0.15);
        color: #8b5cf6;
    }

    .category-badge.accesorios {
        background: rgba(59, 130, 246, 0.15);
        color: #3b82f6;
    }

    .category-badge.equipamiento {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }

    /* ==================== ACTION BUTTONS ==================== */
    .action-btns {
        display: flex;
        gap: 8px;
    }

    .action-btn {
        width: 32px;
        height: 32px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-secondary);
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-light);
    }

    .action-btn.edit {
        background: rgba(245, 158, 11, 0.15);
        border-color: #f59e0b;
        color: #f59e0b;
    }

    .action-btn.edit:hover {
        background: #f59e0b;
        border-color: #f59e0b;
        color: white;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }

    .action-btn.stock {
        background: rgba(59, 130, 246, 0.15);
        border-color: #3b82f6;
        color: #3b82f6;
    }

    .action-btn.stock:hover {
        background: #3b82f6;
        border-color: #3b82f6;
        color: white;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    .action-btn.view {
        border-color: var(--brand-primary);
        color: var(--brand-primary);
    }

    .action-btn.view:hover {
        background: var(--brand-primary);
        color: white;
    }

    .action-btn.history {
        border-color: #8b5cf6;
        color: #8b5cf6;
    }

    .action-btn.history:hover {
        background: #8b5cf6;
        color: white;
    }

    .action-btn.danger {
        border-color: #ef4444;
        color: #ef4444;
    }

    .action-btn.danger:hover {
        background: #ef4444;
        color: white;
    }

    /* ==================== EMPTY STATE ==================== */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        text-align: center;
    }

    .empty-state i {
        font-size: 64px;
        color: var(--text-muted);
        margin-bottom: 20px;
    }

    .empty-state p {
        color: var(--text-muted);
        font-size: var(--font-size-lg);
    }

    .empty-state h3 {
    margin-bottom: 10px;
    color: #495057;
    }

    /* ==================== LOADING STATE ==================== */
    .loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 20px;
        color: var(--text-muted);
    }

    .loading-state i {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .loading-state p {
        font-size: var(--font-size-lg);
    }

    /* ==================== STATS GRID ==================== */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .stats-grid.small {
        grid-template-columns: repeat(4, 1fr);
    }

    .stat-card {
        background: var(--bg-secondary);
        border-radius: var(--border-radius-lg);
        padding: var(--spacing-lg);
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
        border: 1px solid var(--border-color);
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-medium);
    }

    .stat-card.primary {
        border-left: 4px solid var(--brand-primary);
    }

    .stat-card.info {
        border-left: 4px solid #3b82f6;
    }

    .stat-card.warning {
        border-left: 4px solid #f59e0b;
    }

    .stat-card.danger {
        border-left: 4px solid #ef4444;
    }

    .stat-card.success {
        border-left: 4px solid #22c55e;
    }

    .stat-card .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .stat-card .stat-icon.primary {
        background: rgba(46, 157, 54, 0.15);
        color: var(--brand-primary);
    }

    .stat-card.success .stat-icon {
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
    }

    .stat-card.info .stat-icon {
        background: rgba(59, 130, 246, 0.15);
        color: #3b82f6;
    }

    .stat-card.warning .stat-icon {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }

    .stat-card.danger .stat-icon {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

    .stat-content {
        flex: 1;
    }

    .stat-number {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
        line-height: 1.2;
    }

    .stat-label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-bottom: 8px;
    }

    .stat-change {
        font-size: var(--font-size-xs);
        padding: 2px 8px;
        border-radius: 12px;
        font-weight: 500;
    }

    .stat-change.positive {
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
    }

    .stat-change.negative {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

    /* ==================== CHARTS GRID ==================== */
    .charts-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .chart-card {
        background: var(--bg-secondary);
        border-radius: var(--border-radius-lg);
        padding: var(--spacing-lg);
        border: 1px solid var(--border-color);
    }

    .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-lg);
    }

    .chart-header h3 {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--text-primary);
    }

    .chart-period {
        display: flex;
        gap: 4px;
        background: var(--bg-tertiary);
        padding: 4px;
        border-radius: var(--border-radius);
    }

    .period-btn {
        padding: 6px 12px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: var(--font-size-xs);
        font-weight: 500;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .period-btn:hover {
        color: var(--text-primary);
    }

    .period-btn.active {
        background: var(--brand-primary);
        color: white;
    }

    .chart-container {
        height: 300px;
        position: relative;
    }

    /* ==================== TOP PRODUCTS ==================== */
    .top-products-list,
    .products-list {
        max-height: 340px;
        overflow-y: auto;
    }

    .product-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);
        transition: background 0.3s ease;
        cursor: pointer;
    }

    .product-item:last-child {
        border-bottom: none;
    }

    .product-item:hover {
        background: var(--bg-tertiary);
    }

    .product-rank {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--brand-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-xs);
        font-weight: 600;
    }

    .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .product-name {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--text-primary);
    }

    .product-sales {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .product-revenue {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--brand-primary);
    }

    /* ==================== ACTIVITY SECTION ==================== */
    .activity-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }

    .activity-card {
        background: var(--bg-secondary);
        border-radius: var(--border-radius-lg);
        border: 1px solid var(--border-color);
        overflow: hidden;
    }

    .activity-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--border-color);
    }

    .activity-header h3 {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--text-primary);
    }

    .view-all-btn {
        border: none;
        background: transparent;
        color: var(--brand-primary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .view-all-btn:hover {
        color: var(--brand-hover);
    }

    .activity-list,
    .clients-today {
        max-height: 340px;
        overflow-y: auto;
    }

    .activity-item {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--border-color);
        transition: background 0.3s ease;
    }

    .activity-item:last-child {
        border-bottom: none;
    }

    .activity-item:hover {
        background: var(--bg-tertiary);
    }

    .activity-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
    }

    .activity-icon.primary {
        background: rgba(46, 157, 54, 0.15);
        color: var(--brand-primary);
    }

    .activity-icon.success {
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
    }

    .activity-icon.warning {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }

    .activity-icon.danger {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

    .activity-icon.info {
        background: rgba(59, 130, 246, 0.15);
        color: #3b82f6;
    }

    .activity-content {
        flex: 1;
        min-width: 0;
    }

    .activity-text {
        font-size: var(--font-size-sm);
        color: var(--text-primary);
        margin-bottom: 2px;
    }

    .activity-time {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .activity-time-label {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        white-space: nowrap;
    }

    /* ==================== CLIENTS TODAY ==================== */
    .client-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--border-color);
        transition: background 0.3s ease;
    }

    .client-item:last-child {
        border-bottom: none;
    }

    .client-item:hover {
        background: var(--bg-tertiary);
    }

    .client-avatar {
        border-radius: 50%;
    }

    .client-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .client-plan {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .client-time {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        white-space: nowrap;
    }

    /* ==================== PAGINATION ==================== */
    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-md);
        padding: var(--spacing-lg) 0;
    }

    .pagination-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .pagination-btn:hover:not(:disabled) {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .pagination-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pagination-numbers {
        display: flex;
        gap: 4px;
    }

    .page-number {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--border-radius);
        font-size: var(--font-size-sm);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .page-number:hover {
        background: var(--bg-tertiary);
    }

    .page-number.active {
        background: var(--brand-primary);
        color: white;
    }

    .pagination-info {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    /* ==================== DATA TABLE ==================== */
    .data-table-container {
        overflow-x: auto;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table th,
    .data-table td {
        padding: var(--spacing-md);
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    .data-table th {
        background: var(--bg-tertiary);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .data-table tbody tr:hover {
        background: var(--bg-tertiary);
    }

    /* ==================== DAYS LATE ==================== */
    .days-late {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: var(--font-size-xs);
        font-weight: 500;
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }

    /* ==================== RECIBO MODAL ==================== */
    .recibo-container {
        background: var(--bg-tertiary);
        border-radius: var(--border-radius);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .recibo-section {
        margin-bottom: var(--spacing-md);
    }

    .recibo-section:last-child {
        margin-bottom: 0;
    }

    .recibo-section h4 {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
        margin-bottom: var(--spacing-sm);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .recibo-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }

    .recibo-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .recibo-item .label {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .recibo-item .value {
        font-size: var(--font-size-base);
        font-weight: 500;
        color: var(--text-primary);
    }

    .recibo-item .value.amount {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--brand-primary);
    }

    /* ==================== PAGO CHECK ==================== */
    .pago-check-section {
        margin-bottom: var(--spacing-lg);
    }

    /* ==================== METODO PAGO ==================== */
    .metodo-pago-section {
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ==================== HISTORIAL MODAL ==================== */
    .modal-large {
        max-width: 700px;
    }

    .historial-info-cliente {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--bg-tertiary);
        border-radius: var(--border-radius);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .cliente-badge {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .cliente-badge .cliente-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var(--brand-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: var(--font-size-lg);
    }

    .cliente-datos h4 {
        font-size: var(--font-size-base);
        margin-bottom: 4px;
    }

    .cliente-datos .dni {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .total-pagado {
        text-align: right;
    }

    .total-pagado .label {
        display: block;
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        margin-bottom: 4px;
    }

    .total-pagado .amount {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--brand-primary);
    }

    .historial-container h4 {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
        margin-bottom: var(--spacing-md);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .historial-container {
        max-height: 300px;
        overflow-y: auto;
    }

    .historial-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);
        transition: background 0.3s ease;
    }

    .historial-item:last-child {
        border-bottom: none;
    }

    .historial-item:hover {
        background: var(--bg-tertiary);
    }

    .historial-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .historial-fecha {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .historial-detalle {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--text-primary);
    }

    .historial-monto {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .historial-monto .monto {
        font-weight: 600;
        color: var(--brand-primary);
    }

    /* ==================== STOCK MODAL ==================== */
    .modal-small {
        max-width: 450px;
    }

    .stock-info {
        background: var(--bg-tertiary);
        border-radius: var(--border-radius);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .stock-info p {
        margin: var(--spacing-xs) 0;
        font-size: var(--font-size-sm);
    }

    .stock-info strong {
        color: var(--text-muted);
    }

    .nuevo-stock-preview {
        background: var(--bg-tertiary);
        border-radius: var(--border-radius);
        padding: var(--spacing-md);
        margin-top: var(--spacing-md);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nuevo-stock-preview .label {
        color: var(--text-muted);
        font-size: var(--font-size-sm);
    }

    .nuevo-stock-preview .value {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--brand-primary);
    }

    /* ==================== TOAST NOTIFICATIONS ==================== */
    .toast-notifications {
        position: fixed;
        top: 80px;
        right: 20px;
        z-index: 3000;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .toast-notification {
        position: fixed;
        top: 80px;
        right: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-medium);
        animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        max-width: 350px;
        z-index: 10001;
    }

    @keyframes slideInRight {
        from {
            transform: translateX(120%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .toast-notification.success {
        border-left: 4px solid #22c55e;
    }

    .toast-notification.success i {
        color: #22c55e;
    }

    .toast-notification.error {
        border-left: 4px solid #ef4444;
    }

    .toast-notification.error i {
        color: #ef4444;
    }

    .toast-notification.warning {
        border-left: 4px solid #f59e0b;
    }

    .toast-notification.warning i {
        color: #f59e0b;
    }

    .toast-notification.info {
        border-left: 4px solid #3b82f6;
    }

    .toast-notification.info i {
        color: #3b82f6;
    }

    .toast-notification.fade-out {
        animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes slideOutRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(120%);
            opacity: 0;
        }
    }

    /* ==================== DNI SEARCH ==================== */
    .dni-search-container {
        display: flex;
        gap: 8px;
    }

    .dni-search-container input {
        flex: 1;
    }

    .btn-dni-search {
        width: 40px;
        height: 40px;
        border: 1px solid var(--brand-primary);
        border-radius: var(--border-radius);
        background: transparent;
        color: var(--brand-primary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .btn-dni-search:hover {
        background: var(--brand-primary);
        color: white;
    }

    .input-hint {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid transparent;
        border-top-color: var(--brand-primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

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

    /* ==================== CART ITEMS ==================== */
    .cart-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--border-color);
    }

    .cart-item:last-child {
        border-bottom: none;
    }

    .cart-item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .cart-item-name {
        font-size: var(--font-size-base);
        font-weight: 500;
        color: var(--text-primary);
    }

    .cart-item-price {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--brand-primary);
    }

    .cart-item-remove {
        width: 28px;
        height: 28px;
        border: none;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    .cart-item-remove:hover {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .empty-cart {
        text-align: center;
        color: var(--text-muted);
        font-size: var(--font-size-sm);
        padding: var(--spacing-lg);
    }

    .cart-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-md) 0;
        border-top: 2px solid var(--border-color);
        margin-top: var(--spacing-md);
        font-size: var(--font-size-lg);
        font-weight: 600;
    }
    .cart-total span:first-child {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
    }
    .cart-total span:last-child {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--brand-primary);
    }   
    
    /* Responsive */
    @media (max-width: 1200px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .stats-grid.small {
            grid-template-columns: repeat(2, 1fr);
        }

        .charts-grid {
            grid-template-columns: 1fr;
        }

        .activity-section {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }

        .stats-grid.small {
            grid-template-columns: 1fr;
        }

        .category-filters,
        .status-filter {
            flex-wrap: wrap;
        }

        .filter-tab span,
        .filter-btn span {
            display: none;
        }

        .filter-tab::after,
        .filter-btn::after {
            content: attr(data-filter);
            font-size: var(--font-size-xs);
            text-transform: capitalize;
        }

        .historial-info-cliente {
            flex-direction: column;
            gap: var(--spacing-md);
            text-align: center;
        }

        .cliente-badge {
            flex-direction: column;
        }

        .recibo-grid {
            grid-template-columns: 1fr;
        }

        .form-grid {
            grid-template-columns: 1fr;
        }

        .form-group.full-width {
            grid-column: span 1;
        }

        .empleado-info-grid {
            grid-template-columns: 1fr;
        }

        .info-item.full-width {
            grid-column: span 1;
        }

        .pagination-numbers {
            display: none;
        }

        .sale-form {
            grid-template-columns: 1fr;
        }

        .actions-bar {
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .actions-bar .search-filter {
            width: 100%;
        }

        .pagination {
            flex-wrap: wrap;
        }
    }

/* ==========================================
   ESTILOS PARA BADGES DE PLANES¿
   ========================================== */

/* Badge de QR */
.qr-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin: 10px 0;
}

.qr-badge.qr-enabled {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.qr-badge.qr-disabled {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.qr-badge i {
    font-size: 14px;
}

/* Badge de Aplazamiento */
.aplazamiento-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin: 5px;
}

.aplazamiento-badge.aplazamiento-enabled {
    background-color: #cce5ff;
    color: #004085;
    border: 1px solid #b8daff;
}

.aplazamiento-badge.aplazamiento-disabled {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.aplazamiento-badge i {
    font-size: 14px;
}

/* Badge de Invitados */
.invitados-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin: 5px;
}

.invitados-badge.invitados-enabled {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

.invitados-badge.invitados-disabled {
    background-color: #f5c6cb;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.invitados-badge i {
    font-size: 14px;
}

/* Estilos adicionales para membresías */
.plan-card.disabled {
    opacity: 0.6;
    filter: grayscale(50%);
}

.plan-card.disabled .plan-footer .badge-secondary {
    background-color: #6c757d;
    color: #fff;
}

.form-hint {
    font-size: 11px;
    color: #6c757d;
    margin-top: 4px;
}

.text-danger {
    color: #dc3545 !important;
}

.plan-description {
    font-size: 13px;
    color: #6c757d;
    margin: 8px 0;
    text-align: center;
}

/* Estilos específicos para el selector de país en el modal de edición */
.edit-country-code-wrapper {
    position: relative;
}

.edit-country-code-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--border-color);
    z-index: 1;
}

#edit-country-code {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    padding: var(--spacing-md);
    padding-right: var(--spacing-xl);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    width: auto;
    min-width: 160px;
    height: 46px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

#edit-country-code::-ms-expand {
    display: none;
}

#edit-country-code:focus {
    outline: none;
    border-color: var(--primary-color);
}

.edit-country-code-wrapper::before {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 0.75rem;
    z-index: 3;
}

#edit-phone-input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    height: 46px;
}

#edit-phone-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

#edit-phone-input.valid {
    border-color: var(--success-color);
    background: rgba(39, 174, 96, 0.05);
}

#edit-phone-input.error {
    border-color: var(--error-color);
    background: rgba(231, 76, 60, 0.05);
}

/* Estilos para selector de país de invitados */
#invitado-country-code {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    padding: 10px 36px 10px 14px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    width: auto;
    min-width: 160px;
    height: 46px;
    line-height: 24px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

#invitado-country-code::-ms-expand {
    display: none;
}

#invitado-country-code:focus {
    outline: none;
    border-color: var(--primary-color);
}

#invitado-country-code option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Asegurar icono de dropdown en modales de invitados */
#modal-agregar-invitado .country-code-wrapper::before,
#modal-editar-invitado .country-code-wrapper::before {
    color: var(--text-secondary);
    font-size: 0.85rem;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#edit-invitado-country-code {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    padding: 10px 36px 10px 14px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    width: auto;
    min-width: 160px;
    height: 46px;
    line-height: 24px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}


#edit-invitado-country-code::-ms-expand {
    display: none;
}

#edit-invitado-country-code:focus {
    outline: none;
    border-color: var(--primary-color);
}

#edit-invitado-country-code option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

#invitado-telefono {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    height: 46px;
}

#invitado-telefono:focus {
    outline: none;
    border-color: var(--primary-color);
}

#invitado-telefono.valid {
    border-color: var(--success-color);
    background: rgba(39, 174, 96, 0.05);
}

#invitado-telefono.error {
    border-color: var(--error-color);
    background: rgba(231, 76, 60, 0.05);
}

#edit-invitado-telefono {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    height: 46px;
}

#edit-invitado-telefono:focus {
    outline: none;
    border-color: var(--primary-color);
}

#edit-invitado-telefono.valid {
    border-color: var(--success-color);
    background: rgba(39, 174, 96, 0.05);
}

#edit-invitado-telefono.error {
    border-color: var(--error-color);
    background: rgba(231, 76, 60, 0.05);
}

.modal-header.warning {
    background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
    color: white;
}

.convertir-info {
    text-align: center;
    padding: 10px 0;
}

.convertir-detalle {
    color: #666;
    font-size: 0.9em;
    margin-top: 10px;
}

/* ==========================================
   TOAST NOTIFICATIONS PROFESIONALES
   ========================================== */

/* Contenedor de toast */
.toast {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    z-index: 3000;
    min-width: 320px;
    max-width: 400px;
}

/* Icono del toast */
.toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

/* Contenido del toast */
.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.toast-message {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tipos de toast */
.toast.success {
    border-left: 4px solid var(--success-color) !important;
}

.toast.success .toast-icon {
    background: rgba(46, 157, 54, 0.15);
    color: var(--success-color);
}

.toast.error {
    border-left: 4px solid var(--error-color) !important;
}

.toast.error .toast-icon {
    background: rgba(255, 68, 68, 0.15);
    color: var(--error-color);
}

.toast.warning {
    border-left: 4px solid var(--warning-color) !important;
}

.toast.warning .toast-icon {
    background: rgba(255, 165, 0, 0.15);
    color: var(--warning-color);
}

.toast.info {
    border-left: 4px solid var(--info-color) !important;
}

.toast.info .toast-icon {
    background: rgba(0, 153, 204, 0.15);
    color: var(--info-color);
}

/* Animación de entrada */
.toast-enter {
    animation: toastSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.toast-exit {
    animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* ==========================================
   ESTILOS PARA AUMENTAR MESES - PAGOS
   ========================================== */

/* Botón de aumentar meses */
.action-btn.add {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 14px;
}

.action-btn.add:hover {
    background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 157, 54, 0.4);
}

.action-btn.add.disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    cursor: not-allowed;
    opacity: 0.6;
}

.action-btn.add.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Modal de aumentar meses */
.aumentar-info-cliente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-lg);
}

.plan-actual {
    text-align: right;
}

.plan-actual .label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.plan-actual .value {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.aumentar-form {
    padding: 0;
}

.aumentar-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.aumentar-form .form-group {
    margin-bottom: 0;
}

.aumentar-form .form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.aumentar-form .form-group select,
.aumentar-form .form-group input {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: var(--bg-secondary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.aumentar-form .form-group select:focus,
.aumentar-form .form-group input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(46, 157, 54, 0.1);
}

.aumentar-form .input-readonly {
    background: var(--bg-tertiary) !important;
    cursor: default;
}

.monto-total-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    border-radius: var(--border-radius-lg);
    color: white;
    margin-top: var(--spacing-lg);
}

.monto-total-section .label {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.monto-total-section .amount {
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

/* ==========================================
   ESTILOS PARA RECIBO MODAL - ESTADO YA PAGADO
   ========================================== */

.recibo-pagado-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(46, 157, 54, 0.15) 0%, rgba(46, 157, 54, 0.05) 100%);
    border: 2px solid var(--success-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-lg);
}

.recibo-pagado-badge i {
    font-size: 2rem;
    color: var(--success-color);
}

.recibo-pagado-badge span {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--success-color);
}

.recibo-pendiente-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.15) 0%, rgba(255, 165, 0, 0.05) 100%);
    border: 2px solid var(--warning-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-lg);
}

.recibo-pendiente-badge i {
    font-size: 2rem;
    color: var(--warning-color);
}

.recibo-pendiente-badge span {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--warning-color);
}

/* ==========================================
   MEDIA QUERIES PARA AUMENTAR MESES
   ========================================== */

@media (max-width: 768px) {
    .aumentar-form .form-row {
        grid-template-columns: 1fr;
    }

    .aumentar-info-cliente {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .plan-actual {
        text-align: center;
    }

    .monto-total-section {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .monto-total-section .amount {
        font-size: var(--font-size-xl);
    }
}

/* ==========================================
   ESTILOS PARA PLANES ELIMINADOS (LÓGICA 3 ESTADOS)
   ========================================== */

.plan-card.deleted {
    opacity: 0.4;
    filter: grayscale(100%);
    pointer-events: none;
    position: relative;
}

.plan-card.deleted::after {
    content: 'ELIMINADO';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255, 68, 68, 0.8);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 10;
    border: 3px solid rgba(255, 68, 68, 0.8);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    background: rgba(0, 0, 0, 0.3);
}

.plan-card.deleted .plan-header,
.plan-card.deleted .plan-body,
.plan-card.deleted .plan-footer {
    opacity: 0.3;
}

/* ==========================================
   ESTILOS PARA MODALES DE CONFIRMACIÓN Y RESULTADO
   ========================================== */

/* Modal de Confirmación */
.modal-header.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.modal-header.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.modal-header.success-result {
    background: linear-gradient(135deg, var(--success-color) 0%, #22c55e 100%);
}

.modal-header.error-result {
    background: linear-gradient(135deg, var(--error-color) 0%, #ef4444 100%);
}

.confirm-icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.confirm-icon i {
    font-size: 4rem;
}

.confirm-icon.success i {
    color: var(--success-color);
}

.confirm-icon.warning i {
    color: var(--warning-color);
}

.confirm-icon.danger i {
    color: var(--error-color);
}

.confirm-message {
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Modal de Resultado */
.result-icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.result-icon i {
    font-size: 5rem;
}

.result-message {
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.6;
}

#modal-confirmar .modal-content,
#modal-resultado .modal-content {
    text-align: center;
}

#modal-confirmar .modal-body,
#modal-resultado .modal-body {
    padding: var(--spacing-xl) var(--spacing-lg);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}


/* ==================== CART QUANTITY CONTROLS ==================== */
.cart-item-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: 2px;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: 4px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.qty-btn:hover:not(:disabled) {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(46, 157, 54, 0.3);
}

.qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cart-item-quantity span {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.cart-item-price {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--brand-primary);
    white-space: nowrap;
}

/* RESET COMPLETO - Lo más seguro */
#modal-nueva-venta .cart-total,
#modal-editar-venta .cart-total {
    all: unset !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 0 !important;
    margin-top: 16px !important;
    border-top: 2px solid var(--border-color) !important;
    gap: 10px !important;
    white-space: nowrap !important;
}

#modal-nueva-venta .cart-total > *,
#modal-editar-venta .cart-total > * {
    all: unset !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

#modal-nueva-venta .cart-total > span:first-child,
#modal-editar-venta .cart-total > span:first-child {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

#modal-nueva-venta .cart-total > span:last-child,
#modal-editar-venta .cart-total > span:last-child {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--brand-primary) !important;
}

/* Estilo para el Total de Inversión en Inventario */
.total-inversion-container {
    display: none; /* Se activa con JS */
    margin: 20px auto 10px auto; /* Centra el bloque mismo y da espacio */
    padding: 15px;
    background-color: rgba(46, 157, 54, 0.05); /* Fondo muy sutil */
    border: 1px dashed var(--brand-primary); /* Borde punteado para que resalte */
    border-radius: var(--border-radius-md);
    
    /* Centrado de contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    width: 100%;
    animation: fadeIn 0.3s ease;
}

.total-label {
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-weight: 500;
}

.total-amount {
    color: var(--brand-primary);
    font-size: 15px; /* Un poco más grande para que destaque */
    font-weight: 800;
    font-family: 'Inter', sans-serif;
}

/* Ajuste para que no choque con los botones de abajo */
#info-total-entrada {
    margin-bottom: 20px;
}

/* Animación suave para que no aparezca de golpe */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Estilos para modal de credenciales */
.credentials-info {
    padding: 20px 0;
}

.credentials-grid {
    margin: 20px 0;
}

.credential-item {
    margin: 15px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.credential-item label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.credential-item label i {
    margin-right: 8px;
    color: #007bff;
}

.credential-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
}

.credential-value code {
    flex: 1;
    padding: 5px;
    word-break: break-all;
    color: #000;
}

.copy-btn {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    margin-left: 10px;
    transition: background 0.3s;
}

.copy-btn:hover {
    background: #0056b3;
}

.copy-btn i {
    font-size: 1em;
}

.alert {
    padding: 15px;
    border-radius: 6px;
    margin: 15px 0;
}

.alert-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.alert i {
    margin-right: 10px;
    font-size: 1.2em;
}

.alert ul {
    padding-left: 20px; /* o 1.25rem */
    margin-left: 0;
}

/* Estilos para la edición de email en el modal */
.email-edit-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.email-display {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-input {
    padding: 10px 15px;
    font-size: 1rem;
    border: 2px solid #2563eb;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 250px;
    outline: none;
    transition: all 0.3s ease;
}

.email-input:focus {
    border-color: #10b981;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.email-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.btn-edit-email {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-edit-email:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #2563eb;
    transform: scale(1.05);
}

.btn-save-email {
    background: #10b981;
    border: none;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-save-email:hover {
    background: #059669;
    transform: scale(1.05);
}

.btn-cancel-email {
    background: #ef4444;
    border: none;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cancel-email:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.btn-edit-email i, .btn-save-email i, .btn-cancel-email i {
    font-size: 0.9rem;
}

.edit-actions {
    display: flex;
    gap: 5px;
}

/* Animación de transición */
.fade-in {
    animation: fadeIn 0.3s ease;
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

* Estilos para botón de confirmar bloqueado */
#confirm-btn-personal:disabled {
    background: #6b7280 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

#confirm-btn-personal:disabled:hover {
    background: #6b7280 !important;
    transform: none !important;
}

.btn:disabled {
        background-color: #ccc !important;
        border-color: #ccc !important;
        color: #666 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }
    
    .btn:disabled:hover {
        background-color: #ccc !important;
        border-color: #ccc !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .permisos-container {
    max-height: 450px; /* Un poco más de espacio */
    overflow-y: auto;
    padding: 15px;
    border: 1px solid #334155; /* Borde sutil oscuro */
    border-radius: 12px;
    background: #000000; /* Fondo totalmente negro */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Estilo de cada tarjeta de permiso */
.checkbox-group {
    display: flex;
    align-items: center; /* Centra verticalmente el checkbox con el texto */
    gap: 15px;
    padding: 14px 18px;
    background: #111827; /* Gris muy oscuro, casi negro */
    border-radius: 10px;
    border: 1px solid #1f2937;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efecto al pasar el mouse */
.checkbox-group:hover {
    background: #1f2937;
    border-color: #3b82f6; /* Un toque de azul al hacer hover */
    transform: translateY(-1px);
}

/* Checkbox más estilizado */
.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6; /* Color del check */
}

/* Alineación de las letras a la izquierda */
.checkbox-group label {
    cursor: pointer;
    flex: 1; /* Hace que el label ocupe el resto del espacio */
    text-align: left;
}

.checkbox-group label strong {
    display: block;
    font-size: 15px;
    color: #f3f4f6; /* Blanco humo para que no canse la vista */
    font-weight: 600;
    margin-bottom: 2px;
}

.checkbox-desc {
    display: block;
    font-size: 12.5px;
    color: #9ca3af; /* Gris claro para la descripción */
    line-height: 1.4;
}

/* Scrollbar personalizado para que no se vea el de Windows feo */
.permisos-container::-webkit-scrollbar {
    width: 6px;
}

.permisos-container::-webkit-scrollbar-track {
    background: #000;
}

.permisos-container::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 10px;
}

/* Grid para pantallas grandes */
@media (min-width: 768px) {
    .permisos-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Dos columnas */
        gap: 12px;
    }
}

/* Contenedor específico para peligro */
.modal-danger {
    border-top: 5px solid #ff4444 !important;
    max-width: 550px !important;
}

.header-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.danger-icon {
    color: #ff4444;
    font-size: 1.5rem;
}

/* Alerta personalizada */
.custom-alert-danger {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    color: #ff8888;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
}

.count-badge {
    background: #ff4444;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

/* Radio Buttons estilo Tarjeta (Modernos) */
.modern-radio-group {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.radio-option input[type="radio"] {
    display: none; /* Escondemos el radio original */
}

.radio-card {
    background: #1a1a1a;
    border: 2px solid #333;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-card i {
    font-size: 1.2rem;
    color: #888;
}

.radio-info {
    display: flex;
    flex-direction: column;
}

.radio-info strong {
    color: #fff;
    font-size: 0.95rem;
}

.radio-info span {
    color: #888;
    font-size: 0.8rem;
}

/* Estado cuando el radio está seleccionado */
.radio-option input[type="radio"]:checked + .radio-card {
    border-color: var(--brand-primary); /* Color principal */
    background: rgba(var(--brand-primary-rgb), 0.05);
}

.radio-option input[type="radio"]:checked + .radio-card i {
    color: var(--brand-primary);
}

/* Botón de acción de peligro */
.btn-danger-action {
    background: #ff4444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-danger-action:hover {
    background: #cc0000;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4);
}

/* Select mejorado */
.select-wrapper {
    position: relative;
    margin-top: 8px;
}

/* Espaciado para el contenedor del selector de rol */
#selector-rol-container {
    margin-top: 25px; /* Aquí le damos el respiro que pedías */
    padding-top: 20px;
    border-top: 1px dashed #333; /* Una línea sutil para separar la elección del selector */
    animation: fadeInDown 0.3s ease-out; /* Animación suave al aparecer */
}

/* Estilo para la etiqueta del selector */
#selector-rol-container label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Mejorar el aspecto del select para que no se vea "feo" */
.form-select {
    width: 100%;
    background-color: #111 !important;
    border: 1px solid #444 !important;
    color: white !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s;
}

.form-select:focus {
    border-color: var(--brand-primary) !important;
}

/* Animación de entrada */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== Ajustes para filtros de categoría ==================== */

/* Contenedor principal de búsqueda y filtros */
.search-filter-container {
    margin-bottom: var(--spacing-lg); /* Reduce el espacio inferior */
}

/* La fila con la búsqueda y el botón "Nuevo Producto" */
.actions-bar {
    margin-bottom: var(--spacing-sm) !important; /* MUY POCO espacio abajo */
}

/* Los filtros de categoría (Todos, Suplementos, etc.) */
.category-filters {
    margin-top: var(--spacing-xs) !important; /* Poco espacio arriba */
    margin-bottom: var(--spacing-xl) !important; /* MUCHO espacio abajo */
}

/* Cada botón de filtro individual */
.filter-tab {
    padding: var(--spacing-sm) var(--spacing-md); /* Botones más compactos */
}
    
/* Las cards de estadísticas */
.stats-grid {
    margin-top: var(--spacing-lg) !important; /* Espacio arriba de las cards */
}

.whatsapp-btn {
    background: linear-gradient(135deg, #25D366 0%, #1DA851 100%);
    border-color: #25D366;
    color: white;
}
.whatsapp-btn:hover {
    background: linear-gradient(135deg, #1DA851 0%, #25D366 100%);
    border-color: #1DA851;
}
.whatsapp-info {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 16px;
}
.info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.info-item .label {
    font-weight: 600;
    color: var(--text-muted);
}
.info-item .value {
    color: var(--text-color);
}
.info-item .value.amount {
    font-weight: bold;
    color: var(--success-color);
}
.whatsapp-message-preview {
    margin-top: 16px;
}
.whatsapp-message-preview label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-muted);
}
.whatsapp-message-preview textarea {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px;
    font-family: monospace;
    font-size: 14px;
    resize: vertical;
    color: var(--text-color);
}

.action-btns .action-btn.whatsapp.disabled {
    background: rgba(200, 200, 200, 0.1);
    border: 1px solid rgba(200, 200, 200, 0.3);
    color: #999;
    cursor: not-allowed;
    opacity: 0.5;
}

.action-btns .action-btn.whatsapp.disabled:hover {
    background: rgba(200, 200, 200, 0.1);
    border-color: rgba(200, 200, 200, 0.3);
}

/* ==================== MOBILE FULLSCREEN MENU ==================== */

/* Siempre oculto en desktop */
.mobile-menu-overlay {
    display: none !important;
}

@media (max-width: 768px) {
    /* Ocultar sidebar normal en móvil */
    .sidebar {
        display: none !important;
    }

    .sidebar-overlay {
        display: none !important;
    }

    /* Fullscreen overlay menu */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--sidebar-bg, #1a1a1a);
        z-index: 9999;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-menu-overlay.open {
        display: flex !important;
        opacity: 1;
    }

    /* Botón X cerrar */
    .mobile-menu-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 1.75rem;
        cursor: pointer;
        padding: 8px;
        line-height: 1;
        transition: color 0.2s ease;
    }

    .mobile-menu-close:hover {
        color: var(--brand-primary);
    }

    /* Avatar usuario arriba */
    .mobile-menu-user {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 32px;
    }

    .mobile-menu-avatar {
        width: 64px;
        height: 64px;
        background: var(--brand-primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 700;
        color: white;
        overflow: hidden;
    }

    .mobile-menu-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-menu-username {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .mobile-menu-role {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    /* Nav items centrados */
    .mobile-menu-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 100%;
        padding: 0 40px;
        max-height: 60vh;
        overflow-y: auto;
    }

    .mobile-menu-nav a {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        max-width: 280px;
        padding: 14px 24px;
        color: var(--text-primary);
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        transition: all 0.2s ease;
        justify-content: center;
    }

    .mobile-menu-nav a:hover,
    .mobile-menu-nav a.active {
        background: var(--brand-primary);
        color: white;
    }

    .mobile-menu-nav a i {
        width: 20px;
        text-align: center;
        font-size: 1.1rem;
    }

    .mobile-menu-divider {
        width: 80%;
        height: 1px;
        background: var(--border-color);
        margin: 12px 0 4px;
    }

    .mobile-menu-section-title {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--text-muted);
        margin: 4px 0 2px;
        padding: 0 8px;
        width: 100%;
        max-width: 280px;
        text-align: left;
    }

    /* Ajustar main-content para que no tenga margen de sidebar */
    .main-content {
        margin-left: 0 !important;
    }

    .main-content.sidebar-collapsed {
        margin-left: 0 !important;
    }
}

/* ==================== QR MOBILE CAMERA ==================== */
.qr-desktop-view { display: block; }
.qr-mobile-view  { display: none; }

@media (max-width: 768px) {
    .qr-desktop-view { display: none; }
    .qr-mobile-view  { display: block; }

    .mobile-scan-btn-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
        gap: 16px;
        text-align: center;
    }

    .mobile-qr-icon {
        width: 100px;
        height: 100px;
        background: var(--bg-tertiary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: var(--brand-primary);
        margin-bottom: 8px;
    }

    .mobile-scan-hint {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        max-width: 260px;
    }

    .mobile-scan-btn {
        padding: 14px 32px;
        font-size: 1rem;
        border-radius: var(--border-radius-lg);
        gap: 10px;
    }

    .mobile-camera-container {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 16px;
    }

    #mobileCameraVideo {
        width: 100%;
        max-width: 380px;
        border-radius: var(--border-radius-lg);
        display: block;
    }

    .mobile-camera-overlay {
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 380px;
        aspect-ratio: 1;
        pointer-events: none;
    }

    .mobile-scan-frame {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 220px;
        height: 220px;
    }

    .mobile-scan-frame .corner {
        position: absolute;
        width: 28px;
        height: 28px;
        border-color: var(--brand-primary);
        border-style: solid;
    }
    .corner.tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
    .corner.tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
    .corner.bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
    .corner.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }

    .mobile-scan-line {
        position: absolute;
        top: 0;
        left: 4px;
        right: 4px;
        height: 2px;
        background: var(--brand-primary);
        box-shadow: 0 0 6px var(--brand-primary);
        animation: mobileScanMove 2s linear infinite;
    }

    @keyframes mobileScanMove {
        0%   { top: 0; }
        100% { top: calc(100% - 2px); }
    }

    .mobile-camera-hint {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        text-align: center;
    }

    .mobile-stop-btn {
        width: 100%;
        max-width: 380px;
    }
}

/* ==================== TURNO SELECTOR MEJORADO ==================== */
.turno-selector {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.turno-option {
    flex: 1;
    cursor: pointer;
    user-select: none;
}

.turno-option input[type="radio"] {
    display: none;
}

.turno-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.turno-btn i {
    font-size: 2rem;
    transition: all 0.3s ease;
}

.turno-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: background 0.3s ease;
}

.turno-btn::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: transparent;
    transition: all 0.3s ease;
}

.turno-option input[type="radio"]:checked + .turno-btn {
    background: linear-gradient(145deg, var(--brand-primary-dark), var(--brand-primary));
    border-color: var(--brand-primary);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(46, 157, 54, 0.3);
}

.turno-option input[type="radio"]:checked + .turno-btn i {
    color: white;
    transform: scale(1.1);
}

.turno-option input[type="radio"]:checked + .turno-btn::before {
    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.3));
}

.turno-option input[type="radio"]:checked + .turno-btn::after {
    background: white;
    border-color: white;
    color: var(--brand-primary-dark);
}

.turno-option input[type="radio"]:not(:checked) + .turno-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--brand-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.turno-option input[type="radio"]:not(:checked) + .turno-btn:hover i {
    color: var(--brand-primary);
}

.turno-option input[type="radio"]:not(:checked) + .turno-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Estilos específicos para cada opción */
.turno-option:first-child .turno-btn i {
    color: #fbbf24; /* Amarillo para mañana */
}

.turno-option:last-child .turno-btn i {
    color: #818cf8; /* Púrpura para tarde/noche */
}

.turno-option input[type="radio"]:checked + .turno-btn i {
    color: white;
}

/* Responsive */
@media (max-width: 480px) {
    .turno-selector {
        flex-direction: column;
        gap: 12px;
    }
    
    .turno-btn {
        flex-direction: row;
        justify-content: flex-start;
        padding: 16px 20px;
        gap: 16px;
    }
    
    .turno-btn i {
        font-size: 1.5rem;
        min-width: 30px;
    }
    
    .turno-btn::after {
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
    }
}

/* Versión compacta (para modales pequeños) */
.modal-small .turno-selector {
    gap: 12px;
}

.modal-small .turno-btn {
    padding: 16px 12px;
}

.modal-small .turno-btn i {
    font-size: 1.5rem;
}

/* ==================== TURNO SELECTOR - TEMA OSCURO ESPECÍFICO ==================== */
/* Estos estilos refuerzan el tema oscuro de tu sistema */
.turno-btn {
    background: #1e1e1e;
    border: 2px solid #333;
    color: #aaa;
}

.turno-option input[type="radio"]:checked + .turno-btn {
    background: linear-gradient(145deg, #1a5c2a, #2e9d36);
    border-color: #2e9d36;
    color: white;
}

.turno-option:first-child .turno-btn i {
    color: #f59e0b; /* Naranja/amarillo para mañana */
}

.turno-option:last-child .turno-btn i {
    color: #8b5cf6; /* Púrpura/violeta para tarde/noche */
}

/* Efecto de brillo al seleccionar */
.turno-option input[type="radio"]:checked + .turno-btn {
    box-shadow: 0 0 20px rgba(46, 157, 54, 0.4);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 12px 24px rgba(46, 157, 54, 0.3);
    }
    50% {
        box-shadow: 0 12px 28px rgba(46, 157, 54, 0.5);
    }
}

@media (max-width: 768px) {
    .dni-input-container-large {
        flex-direction: column;
    }

    .dni-input-container-large input {
        width: 100%;
        font-size: 1.25rem;
        letter-spacing: 4px;
    }

    .dni-input-container-large .btn {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }
}

/* ==================== BARRA DE PROGRESO DE NAVEGACIÓN ==================== */
#nav-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--brand-primary);
    z-index: 99999;
    transition: width 0.25s ease, opacity 0.3s ease;
    opacity: 0;
    box-shadow: 0 0 8px var(--brand-primary);
    pointer-events: none;
}
#nav-progress-bar.active {
    opacity: 1;
}

.promo-actions {
    margin-bottom: 20px;
}
.promo-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 10px;
}
.promo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.promo-card-title {
    font-weight: 600;
    color: var(--text-primary);
}
.promo-card-badge {
    background: rgba(37, 211, 102, 0.2);
    color: #25D366;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.promo-card-body {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.promo-card-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.promo-card-footer button {
    padding: 6px 12px;
    font-size: 12px;
}

/* ==========================================
   SELECTOR DE SEXO MEJORADO - TARJETAS MODERNAS
   ========================================== */

.sexo-selector-moderno {
    display: flex;
    gap: 15px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.sexo-card {
    flex: 1;
    min-width: 120px;
    cursor: pointer;
}

.sexo-card input[type="radio"] {
    display: none;
}

.sexo-card-content {
    padding: 15px 10px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.sexo-card-content:hover {
    border-color: var(--brand-primary, #2E9D36);
    background: #222;
}

.sexo-card input[type="radio"]:checked + .sexo-card-content {
    border-color: var(--brand-primary, #2E9D36);
    background: rgba(46, 157, 54, 0.1);
}

.sexo-card i {
    font-size: 28px;
}

.sexo-card span {
    font-weight: 600;
    color: #fff;
}

/* Colores específicos para cada icono */
.sexo-card i.fa-mars {
    color: #3b82f6;
}

.sexo-card i.fa-venus {
    color: #ec4899;
}

.sexo-card i.fa-question {
    color: #aaa;
}

/* Versión para el modal de edición (mismos estilos) */
.sexo-card-edit {
    flex: 1;
    min-width: 120px;
    cursor: pointer;
}

.sexo-card-edit input[type="radio"] {
    display: none;
}


/* ==================== PLAN FEATURES BADGES ==================== */

.feature-badge {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.feature-badge.success {
    background: rgba(37, 211, 102, 0.1);
    border-color: rgba(37, 211, 102, 0.3);
    color: #25D366;
}


.precio-original {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.precio-descuento {
    font-size: 24px;
    font-weight: bold;
    color: var(--success-color);
}

.promo-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

/* ==================== LÍMITE SEMANAL ==================== */
.limite-semanal-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
}

.radio-label:hover {
    background-color: var(--bg-secondary);
}

.radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-primary);
}

.radio-text {
    font-size: 14px;
}

.limite-dias-input {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
    padding: 10px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.limite-dias-input input {
    width: 80px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.limite-dias-input small {
    color: var(--text-muted);
    font-size: 12px;
}

/* ==================== TOAST NOTIFICATIONS ==================== */
.toast-enter {
    animation: toastSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.toast-exit {
    animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* ==================== COMPARADOR DE PRECIOS (PROMOCIONES) ==================== */
.precio-comparador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    margin: 10px 0;
}

.precio-original-box,
.precio-descuento-box {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
}

.precio-descuento-box {
    background: rgba(46, 157, 54, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.precio-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 5px;
}

.precio-valor {
    display: block;
    font-size: 24px;
    font-weight: bold;
}

.precio-flecha {
    font-size: 24px;
    color: white;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .precio-comparador {
        flex-direction: column;
        gap: 10px;
    }
    
    .precio-flecha {
        transform: rotate(90deg);
    }
    
    .precio-original-box,
    .precio-descuento-box {
        width: 100%;
    }
}

/* ==================== TÍTULO DE PROMOCIONES ==================== */
.promo-titulo {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
}

.promo-titulo h4 {
    font-size: 1.5rem;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    display: inline-block;
    position: relative;
}

.promo-titulo h4::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    animation: expandWidth 0.5s ease-out;
}

@keyframes expandWidth {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 60px;
        opacity: 1;
    }
}

.promo-titulo .titulo-icon {
    display: block;
    margin-bottom: 10px;
}

.promo-titulo .titulo-icon i {
    font-size: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==================== PROMOCIONES CARDS ==================== */
.promo-actions {
    margin-bottom: 20px;
}

.promo-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 10px;
}

.promo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.promo-card-title {
    font-weight: 600;
    color: var(--text-primary);
}

.promo-card-badge {
    background: rgba(37, 211, 102, 0.2);
    color: #25D366;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.promo-card-body {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

/* ==================== FORMULARIO PROMOCIÓN ==================== */
.promo-descuento-valor-group {
    display: none;
}

#tooltip-descuento {
    position: absolute;
    background: var(--error-color);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
    animation: fadeIn 0.3s;
}

/* ==================== PROMOCIONES EN PLAN CARDS ==================== */
.promo-info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
    font-size: 12px;
}

.promo-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 5px;
    margin-bottom: 5px;
}

.promo-badge-small i {
    font-size: 10px;
}

.promo-sexo {
    display: inline-block;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.promo-fechas {
    display: inline-block;
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 4px;
}

.promo-fechas i {
    margin-right: 4px;
    font-size: 10px;
}

.promo-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}