/* ============================================================ ExpoDestinos 360° — Admin Dashboard (Leads Web) ============================================================ */ :root, [data-theme="light"] { color-scheme: light; /* Tipografía Global - Regla Fija */ --font-family-main: "Montserrat", sans-serif; /* Pesos */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Escala de Tamaños */ --fs-micro: 10px; --fs-xs: 12px; --fs-sm: 14px; --fs-lg: 20px; /* Peldaño para el título de cada sección. Se añadió en vez de subir --fs-lg porque esa variable también gobierna iconos (p. ej. la X de los modales), que no debían crecer. */ --fs-xl: 22px; /* Superficies y Fondos */ --bg-page: #f7f4ec; --bg-surface: #fffdf9; --bg-surface-secondary: #f8fafc; --bg-input: #ffffff; --bg-hover: #f1f5f9; --bg-selected: #eff6ff; /* Navbar y Sidebar (Se mantienen oscuros por diseño original, pero podemos mapearlos semánticamente) */ --bg-sidebar: #07111F; --theme-sidebar-text: #F7F1E7; /* Textos */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-placeholder: #64748b; --text-disabled: #94a3b8; --text-on-primary: #ffffff; /* Bordes y Foco */ --border-default: #d8d5cc; --border-strong: #94a3b8; --border-focus: #2563eb; /* Colores de Estado / Semánticos */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-success: #15803d; --color-success-bg: rgba(21, 128, 61, 0.15); --color-danger: #dc2626; --color-danger-bg: rgba(220, 38, 38, 0.15); --color-warning: #b45309; --color-warning-bg: rgba(180, 83, 9, 0.15); --color-info: #2563eb; --color-info-bg: rgba(37, 99, 235, 0.15); --focus-ring: rgba(37, 99, 235, 0.35); --overlay-backdrop: rgba(15, 23, 42, 0.55); /* Legacy compatibility (to be removed gradually) */ --bg-body: var(--bg-page); --bg-card: var(--bg-surface); --text-main: var(--text-primary); --border-light: var(--border-default); /* Radius & Shadows */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1); --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1); } [data-theme="dark"] { color-scheme: dark; /* Superficies y Fondos */ --bg-page: #0f172a; --bg-surface: #1e293b; --bg-surface-secondary: #243147; --bg-input: #171f2c; --bg-hover: #2b3950; --bg-selected: #20395f; --bg-sidebar: #050b14; --theme-sidebar-text: #f8fafc; /* Textos */ --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-placeholder: #94a3b8; --text-disabled: #64748b; --text-on-primary: #ffffff; /* Bordes y Foco */ --border-default: #3e4b61; --border-strong: #64748b; --border-focus: #60a5fa; /* Colores de Estado / Semánticos */ --color-primary: #3b82f6; --color-primary-hover: #60a5fa; --color-success: #22c55e; --color-success-bg: rgba(34, 197, 94, 0.15); --color-danger: #f87171; --color-danger-bg: rgba(248, 113, 113, 0.15); --color-warning: #fbbf24; --color-warning-bg: rgba(251, 191, 36, 0.15); --color-info: #60a5fa; --color-info-bg: rgba(96, 165, 250, 0.15); --focus-ring: rgba(96, 165, 250, 0.40); --overlay-backdrop: rgba(0, 0, 0, 0.65); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body, button, input, select, textarea { font-family: var(--font-family-main); color: var(--text-main); background-color: var(--bg-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-weight: var(--fw-bold); color: var(--text-primary); } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; border: none; } /* ── Buttons ───────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.25rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: 8px; transition: all 0.2s ease; } .btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .btn-primary { background-color: var(--color-primary); color: var(--text-on-primary); border: 1px solid var(--color-primary); } .btn-primary:hover { background-color: var(--color-primary-hover); } .btn-success { background-color: var(--color-success); color: var(--text-on-primary); } .btn-success:hover { filter: brightness(0.9); } .btn-danger { background-color: var(--color-danger); color: var(--text-on-primary); } .btn-danger:hover { filter: brightness(0.9); } .btn-outline { background-color: transparent !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; } .btn-outline:hover { background-color: var(--bg-surface-secondary) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; } /* ── Login ─────────────────────────────────────────── */ /* 🔒 Login 🔒 */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; overflow-x: hidden; margin: 0; background: radial-gradient( circle at 50% 48%, rgba(42, 111, 255, 0.42) 0%, rgba(20, 67, 150, 0.24) 27%, transparent 52% ), radial-gradient( circle at 12% 50%, rgba(24, 82, 190, 0.15) 0%, transparent 34% ), radial-gradient( circle at 88% 28%, rgba(25, 79, 175, 0.13) 0%, transparent 30% ), linear-gradient( 135deg, #020713 0%, #07182f 48%, #020916 100% ); background-attachment: fixed; } /* LÍNEAS TOPOGRÁFICAS Y PUNTOS LUMINOSOS */ .login-body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='1600' height='900' viewBox='0 0 1600 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%233478e8' stroke-width='1.2' stroke-opacity='.20'%3E%3Cpath d='M-150 590C10 360 190 370 270 510S460 690 610 515 920 320 1100 470 1420 620 1680 360'/%3E%3Cpath d='M-150 640C20 400 210 420 300 555S490 710 640 545 930 360 1120 500 1440 640 1680 400'/%3E%3Cpath d='M-150 690C30 445 225 470 320 600S510 735 665 575 955 400 1140 530 1450 665 1680 440'/%3E%3Cpath d='M1050 -120C900 30 925 180 1060 240S1240 380 1165 520 1200 760 1430 820'/%3E%3Cpath d='M1120 -130C960 40 990 200 1125 260S1300 410 1230 545 1280 760 1500 850'/%3E%3C/g%3E%3Cg fill='%233b82f6' fill-opacity='.8'%3E%3Ccircle cx='85' cy='300' r='3'/%3E%3Ccircle cx='180' cy='405' r='2.5'/%3E%3Ccircle cx='285' cy='575' r='3'/%3E%3Ccircle cx='410' cy='620' r='2.4'/%3E%3Ccircle cx='1250' cy='145' r='2.7'/%3E%3Ccircle cx='1370' cy='245' r='3'/%3E%3Ccircle cx='1465' cy='365' r='2.5'/%3E%3Ccircle cx='1530' cy='520' r='3'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.85; } /* OSCURECIMIENTO SUAVE EN LOS BORDES */ .login-body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( circle at center, transparent 32%, rgba(0, 3, 12, 0.28) 70%, rgba(0, 2, 8, 0.58) 100% ); } .login-container { position: relative; z-index: 1; background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); width: 100%; max-width: 420px; padding: 2.5rem; border-radius: var(--radius-lg); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); text-align: center; } .login-logo { width: 140px; height: 140px; margin: 0 auto 1.5rem; border-radius: 50%; object-fit: contain; background-color: var(--bg-body); padding: 12px; box-shadow: 0 0 15px rgba(59, 130, 246, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); display: block; } .login-header h1 { font-size: var(--fs-lg); margin-bottom: 0.25rem; } .login-header p { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 2rem; } .login-error { background-color: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.35); padding: 0.75rem 1rem; border-radius: 8px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: 1.25rem; text-align: center; } .form-group { margin-bottom: 1.25rem; text-align: left; } .form-group label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: 0.5rem; } .form-group input { width: 100%; padding: 0.75rem 1rem; background-color: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-light); border-radius: 8px; font-size: var(--fs-lg); transition: border-color 0.2s; } .form-group input:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(14,165,233,0.1); } .password-wrapper { position: relative; display: flex; align-items: center; width: 100%; } .password-wrapper input { padding-right: 42px !important; } .toggle-password-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease, transform 0.15s ease; outline: none; z-index: 10; } .toggle-password-btn:hover { color: var(--color-accent); transform: translateY(-50%) scale(1.1); } .caps-warning { color: #f59e0b; font-size: 0.78rem; font-weight: 500; margin-top: 6px; display: flex; align-items: center; gap: 6px; } .login-form .btn-primary { width: 100%; margin-top: 1rem; } /* ── Dashboard Layout (App Shell) ───────────────────────── */ .app-layout { display: flex; height: 100vh; width: 100%; overflow: hidden; background-color: var(--bg-body); } /* ── Sidebar ───────────────────────────────────────── */ .sidebar { width: 260px; min-width: 260px; background-color: var(--bg-sidebar); display: flex; flex-direction: column; border-right: 1px solid var(--border-light); z-index: 10; transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .app-layout.sidebar-collapsed .sidebar { margin-left: -260px; } /* Pestañita Azul Flotante (Sidebar Toggle Tab) */ .sidebar-toggle-tab { position: fixed; left: 260px; top: 50%; transform: translateY(-50%); z-index: 999; background-color: #2563eb; color: #ffffff; border: none; border-radius: 0 10px 10px 0; width: 26px; height: 52px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 3px 0 10px rgba(0, 0, 0, 0.25); transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, width 0.2s ease; } .sidebar-toggle-tab:hover { background-color: #1d4ed8; width: 30px; } .app-layout.sidebar-collapsed .sidebar-toggle-tab { left: 0; } .sidebar-toggle-tab i { transition: transform 0.3s ease; font-size: 0.85rem; } .app-layout.sidebar-collapsed .sidebar-toggle-tab i { transform: rotate(180deg); } .sidebar-header { padding: 1.5rem 1rem 1.5rem 0.85rem; display: flex; align-items: center; gap: 0.75rem; } .sidebar-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .sidebar-brand { display: flex; flex-direction: column; } .brand-title { color: #fff; font-weight: 800; font-size: var(--fs-lg); letter-spacing: 0.5px; } .brand-subtitle { color: var(--color-accent); font-weight: var(--fw-bold); font-size: var(--fs-sm); } .sidebar-nav { padding: 1rem 0; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .nav-item { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.5rem; color: var(--text-muted); font-weight: var(--fw-medium); transition: all 0.2s; } .nav-item:hover { color: #fff; background-color: rgba(255, 255, 255, 0.05); } .nav-item.active { color: #fff; background-color: var(--color-primary); border-radius: 0 20px 20px 0; margin-right: 1rem; } .sidebar-illustration { position: relative; margin-top: auto; padding: 2rem 1.5rem; text-align: left; font-size: var(--fs-micro); font-weight: var(--fw-semibold); line-height: 1.4; } .illust-img { position: absolute; bottom: 0; left: 0; width: 100%; opacity: 0.5; z-index: 0; pointer-events: none; } .illust-text { position: relative; z-index: 1; } .text-highlight { color: #f59e0b; } .text-orange { color: #ea580c; } .text-yellow { color: #eab308; } .text-purple { color: #8b5cf6; } .text-blue { color: #3b82f6; } .text-accent { color: var(--color-accent); } /* ── Main Wrapper ──────────────────────────────────── */ .main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; background-color: var(--bg-body); } /* ── Topbar ────────────────────────────────────────── */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 2rem; border-bottom: 1px solid var(--border-light); } .search-container { position: relative; width: 400px; } .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); } .search-input { width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-light); color: var(--text-main); padding: 0.75rem 1rem 0.75rem 3rem; border-radius: 20px; font-size: var(--fs-sm); } .search-input:focus { outline: none; border-color: var(--border-focus); } .search-shortcut { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background-color: var(--bg-hover); color: var(--text-muted); font-size: var(--fs-micro); padding: 0.2rem 0.4rem; border-radius: 4px; } .topbar-actions { display: flex; align-items: center; gap: 1.5rem; } .notify-btn { position: relative; background: none; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.2s; } .notify-btn:hover { color: #fff; } .notify-badge { position: absolute; top: -4px; right: -4px; background-color: var(--color-danger); color: #fff; font-size: var(--fs-micro); font-weight: var(--fw-bold); width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .user-profile { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .user-name { color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); } .chevron-down { color: var(--text-muted); } /* ── Content Area ──────────────────────────────────── */ .dashboard-content { flex: 1; overflow-y: auto; padding: 2rem; } /* ── Stats ─────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2rem; } .stat-card { background-color: var(--bg-card); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-md); transition: transform 0.2s ease, box-shadow 0.2s ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .stat-icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-blue { background-color: var(--color-info-bg); color: var(--color-info); } .icon-cyan { background-color: rgba(6, 182, 212, 0.15); color: #06b6d4; } .icon-green { background-color: var(--color-success-bg); color: var(--color-success); } .icon-orange { background-color: var(--color-warning-bg); color: var(--color-warning); } .icon-yellow { background-color: rgba(234, 179, 8, 0.15); color: #eab308; } .stat-info { display: flex; flex-direction: column; } .stat-label { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; } .stat-value { color: #fff; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.2; } .stat-sub { color: var(--text-muted); font-size: var(--fs-micro); } /* ── Table Section ─────────────────────────────────── */ .table-section { background-color: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; } .table-header-block { padding: 1.5rem 1.5rem 0 1.5rem; border-bottom: 1px solid var(--border-light); } .th-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .th-top h2 { color: #fff; display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-lg); } .th-actions { display: flex; gap: 0.75rem; } .table-search-bar { position: relative; margin-bottom: 1rem; } .table-search-bar svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); } .table-search-bar input { width: 100%; background-color: var(--bg-body); border: 1px solid var(--border-light); padding: 0.75rem 1rem 0.75rem 2.5rem; border-radius: 8px; color: #fff; } .table-search-bar input:focus { outline: none; border-color: var(--color-primary); } .table-filters-row { display: flex; justify-content: space-between; margin-bottom: 1rem; } .filter-group { display: flex; gap: 0.5rem; } .filter-btn { background-color: transparent; border: 1px solid var(--border-light); color: var(--text-muted); padding: 0.4rem 1rem; border-radius: 20px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: all 0.2s; } .filter-btn:hover { background-color: var(--bg-hover); color: #fff; } .filter-btn.active { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); } .filter-select select { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-light); padding: 0.4rem 2rem 0.4rem 1rem; border-radius: 20px; appearance: none; cursor: pointer; } /* ── Compact Table ─────────────────────────────────── */ .table-container { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; text-align: left; } .data-table th { background-color: var(--bg-hover); color: var(--text-muted); font-weight: var(--fw-semibold); font-size: var(--fs-xs); text-transform: uppercase; padding: 1rem 1.5rem; } .data-table td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-light); color: #fff; font-size: var(--fs-sm); } .data-table tbody tr { transition: background-color 0.2s; } .data-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.02); } /* Specific Columns Styling */ .client-cell { display: flex; align-items: center; gap: 1rem; } .client-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .client-name { font-weight: var(--fw-semibold); } .company-name { color: var(--text-muted); font-size: var(--fs-sm); } /* ── Badges ────────────────────────────────────────── */ .badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); } .badge-outline { border: 1px solid currentColor; background-color: transparent; } .badge-filled { color: #fff; } /* Existing badge classes adapted for Dark Theme */ .badge-principal { border-color: var(--color-info); color: var(--color-info); } .badge-congreso { border-color: var(--color-success); color: var(--color-success); } .badge-antigua { border-color: var(--color-warning); color: var(--color-warning); } /* ── Action Buttons ────────────────────────────────── */ .actions-cell { display: flex; gap: 0.5rem; } .action-btn { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-light); width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; cursor: pointer; } .action-btn:hover { color: #fff; background-color: var(--bg-hover); border-color: #fff; } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-top: 1px solid var(--border-light); } .pagination-info { color: var(--text-muted); font-size: var(--fs-sm); } .pagination-controls { display: flex; gap: 0.25rem; } .page-btn { background-color: var(--bg-body); border: 1px solid var(--border-light); color: var(--text-muted); width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); } .page-btn:hover { background-color: var(--bg-hover); color: #fff; } .page-btn.active { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); } .page-size-select select { background-color: transparent; color: var(--text-muted); border: none; font-size: var(--fs-sm); cursor: pointer; } /* ── Right Panel (Details & Users) ─────────────────── */ .toggle-rp-btn { position: fixed; right: 340px; top: 50%; transform: translateY(-50%); background-color: var(--color-primary); color: #fff; border-radius: 8px 0 0 8px; padding: 12px 6px; z-index: 1000; display: flex; align-items: center; justify-content: center; transition: right 0.3s ease; box-shadow: -2px 0 10px rgba(0,0,0,0.5); } .toggle-rp-btn.collapsed { right: 0; } .toggle-rp-btn svg { transition: transform 0.3s ease; } .toggle-rp-btn.collapsed svg { transform: rotate(180deg); } .right-panel { width: 340px; min-width: 340px; max-width: 340px; background-color: var(--bg-card); border-left: 1px solid var(--border-light); display: flex; flex-direction: column; overflow-y: auto; transition: all 0.3s ease; } .right-panel.collapsed { width: 0; min-width: 0; max-width: 0; border-left: none; overflow: hidden; padding: 0; } .right-panel-section { padding: 1.5rem; border-bottom: 1px solid var(--border-light); } .right-panel-section.is-hidden { display: none; } .rp-header { display: flex; align-items: center; gap: 0.5rem; color: #fff; margin-bottom: 1.5rem; } .rp-header h3 { font-size: var(--fs-lg); flex: 1; } .close-rp { background: none; color: var(--text-muted); cursor: pointer; } .close-rp:hover { color: #fff; } .client-profile { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .cp-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .cp-info h4 { color: #fff; font-size: var(--fs-lg); margin-bottom: 0.25rem; } .cp-company { color: var(--text-muted); font-size: var(--fs-sm); display: block; margin-bottom: 0.25rem; } .cp-contact { color: var(--text-muted); font-size: var(--fs-xs); display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.25rem; } .cp-contact svg { color: var(--color-success); } .rp-details { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .rp-details-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem; } .rp-details-label { color: var(--text-muted); font-size: var(--fs-sm); } .rp-details-value { color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: right; } .rp-details-value.highlight { color: var(--color-info); } .rp-actions { display: flex; flex-direction: column; gap: 1rem; } .rp-btn-row { display: flex; gap: 0.5rem; } .btn-outline-dark { flex: 1; background-color: transparent; border: 1px solid var(--border-light); color: #fff; font-size: var(--fs-sm); padding: 0.5rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .btn-outline-dark:hover { background-color: var(--bg-hover); } .btn-primary-full { background-color: transparent; border: 1px solid var(--border-light); color: #fff; width: 100%; padding: 0.75rem; border-radius: 8px; font-weight: var(--fw-semibold); display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s; } .btn-primary-full:hover { background-color: var(--bg-hover); } .btn-create-user { background-color: rgba(59, 130, 246, 0.1); color: var(--color-info); border: none; border-radius: 20px; padding: 0.3rem 0.75rem; font-size: var(--fs-micro); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 0.25rem; } .users-list { display: flex; flex-direction: column; gap: 1rem; } .user-item { display: flex; align-items: center; gap: 0.75rem; } .user-item img { width: 32px; height: 32px; border-radius: 50%; } .ui-info { flex: 1; display: flex; flex-direction: column; } .ui-name { color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .ui-role { font-size: var(--fs-micro); } .role-asesor { color: var(--color-success); } .role-coord { color: var(--color-warning); } .ui-status { width: 8px; height: 8px; border-radius: 50%; } .status-online { background-color: var(--color-success); } .status-offline { background-color: var(--text-muted); } .view-all-link { display: flex; align-items: center; gap: 0.25rem; color: var(--color-info); font-size: var(--fs-xs); font-weight: var(--fw-semibold); margin-top: 1rem; } .view-all-link:hover { text-decoration: underline; } /* ── Modal ─────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .modal-overlay.is-visible { opacity: 1; visibility: visible; } .modal-card { background-color: var(--bg-card); border-radius: var(--radius-lg); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; transform: translateY(20px) scale(0.97); transition: transform 0.25s ease; } .modal-overlay.is-visible .modal-card { transform: translateY(0) scale(1); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem 1rem; border-bottom: 1px solid var(--border-default); } .modal-header h2 { font-size: var(--fs-lg); } .modal-close-btn { background: none; border: none; color: var(--text-muted); padding: 0.25rem; border-radius: 6px; transition: all 0.15s; } .modal-close-btn:hover { background-color: var(--color-danger-bg); color: var(--color-danger); } /* Premium Close Button (Global) */ .premium-close-btn { color: var(--text-muted) !important; transition: all 0.2s ease !important; z-index: 100; position: relative; background: none !important; border: none !important; cursor: pointer; font-size: var(--fs-lg); !important; /* Mismo tamaño de icono */ width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; } .premium-close-btn:hover { color: #ef4444 !important; transform: rotate(90deg); } .modal-body { padding: 1.5rem 2rem; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-full { grid-column: 1 / -1; } .detail-label { font-size: var(--fs-micro); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } .detail-value { font-size: var(--fs-sm); color: var(--text-primary); word-break: break-word; } .detail-value a { color: var(--color-primary); } .detail-value a:hover { text-decoration: underline; } .modal-footer { display: flex; gap: 0.75rem; padding: 1rem 2rem 1.5rem; border-top: 1px solid var(--border-default); } .btn-modal-email { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; border-radius: 8px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); background-color: var(--color-info); color: var(--text-on-primary); transition: all 0.2s; } .btn-modal-email:hover { filter: brightness(0.9); } .btn-modal-whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; border-radius: 8px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); background-color: var(--color-success); color: var(--text-on-primary); transition: all 0.2s; } .btn-modal-whatsapp:hover { filter: brightness(0.9); } /* ── Proposal Button & Form ────────────────────────── */ .btn-proposal { background: var(--color-primary); color: var(--text-on-primary); } .btn-proposal:hover { background: var(--color-primary-hover); } .btn-proposal-generate { display: inline-flex; align-items: center; padding: 0.75rem 2rem; border-radius: 8px; font-size: var(--fs-lg); font-weight: var(--fw-bold); background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; transition: all 0.2s; border: none; cursor: pointer; } .btn-proposal-generate:hover { background: linear-gradient(135deg, #6d28d9, #5b21b6); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(109, 40, 217, 0.3); } .modal-card-wide { max-width: 680px; } .proposal-form { padding: 1.5rem 2rem !important; } .form-description { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.5; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .proposal-form .form-group { margin-bottom: 0; } .proposal-form select { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border-light); border-radius: 8px; font-size: var(--fs-lg); font-family: inherit; background-color: #fff; transition: border-color 0.2s; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .proposal-form select:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(14,165,233,0.1); } /* ── Utilities ─────────────────────────────────────── */ .text-center { text-align: center !important; } /* ── Responsive ────────────────────────────────────── */ @media (max-width: 768px) { .header-container { flex-direction: column; gap: 1rem; } .header-actions { flex-wrap: wrap; justify-content: center; } .stats-row { grid-template-columns: repeat(2, 1fr); } .detail-grid { grid-template-columns: 1fr; } .modal-card { margin: 1rem; } .form-row { grid-template-columns: 1fr; } .data-table th.col-documento, .data-table td.col-documento { display: none; } } /* ============================================================ Accordion Benefits (Registrar Cliente) ============================================================ */ .benefit-accordion { margin-bottom: 0.75rem; background-color: rgba(255, 255, 255, 0.02); border-radius: var(--radius-sm); border: 1px solid var(--border-light); overflow: hidden; } .benefit-accordion summary { padding: 0.75rem 1rem; cursor: pointer; font-weight: var(--fw-semibold); font-size: var(--fs-sm); display: flex; justify-content: space-between; align-items: center; list-style: none; /* Hide default arrow */ background-color: rgba(255, 255, 255, 0.03); transition: background-color 0.2s; color: var(--text-main); } .benefit-accordion summary::-webkit-details-marker { display: none; } .benefit-accordion summary:hover { background-color: rgba(255, 255, 255, 0.08); } .benefit-accordion summary i.fa-chevron-down { transition: transform 0.3s ease; font-size: var(--fs-xs); color: var(--text-muted); } .benefit-accordion[open] summary i.fa-chevron-down { transform: rotate(180deg); } .benefit-accordion-content { padding: 1rem 1rem 0.5rem; animation: slideDown 0.3s ease-in-out; } @keyframes slideDown { 0% { opacity: 0; transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0); } } .benefit-accordion .benefit-item { border-bottom: 1px dashed var(--border-light); margin-bottom: 0.75rem; padding-bottom: 0.75rem; } .benefit-accordion .benefit-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .custom-date-filter { width:100%; padding:0.6rem; padding-right:2.5rem; background-color:var(--bg-body); border:1px solid var(--border-light); border-radius:var(--radius-sm); color:#fff; font-family:inherit; cursor:pointer; outline: none; box-sizing: border-box; } .custom-date-filter:focus { border-color: #fff; } /* Make sure dropdown options in Flatpickr are readable */ .flatpickr-monthDropdown-months option { background-color: var(--bg-card); color: #fff; } /* Hide scrollbar for custom year list */ .custom-year-list::-webkit-scrollbar { display: none; } .custom-year-list { -ms-overflow-style: none; scrollbar-width: none; } /* Allow flatpickr year dropdown to overflow */ .flatpickr-months .flatpickr-month, .flatpickr-current-month { overflow: visible !important; } /* Fix para hacer visible y nítido el icono del calendario: Negro en modo claro, Blanco en modo oscuro */ input[type='date']::-webkit-calendar-picker-indicator { filter: brightness(0); opacity: 0.9; cursor: pointer; transition: opacity 0.15s ease; } input[type='date']::-webkit-calendar-picker-indicator:hover { opacity: 1; } html[data-theme="dark"] input[type='date']::-webkit-calendar-picker-indicator { filter: brightness(0) invert(1); opacity: 0.9; } /* ============================================================ FASE 2: CONEXI�N TEMPORAL DE ELEMENTOS GLOBALES AL TEMA ============================================================ */ html, body, .app-layout, .main-content { background-color: var(--theme-bg-main) !important; color: var(--theme-text-main) !important; } /* ============================================================ FASE 2.1: CORRECCI�N M�DULO "REGISTRAR CLIENTE" ============================================================ */ #view-registrar { background-color: var(--theme-bg-main); color: var(--theme-text-main); } #view-registrar .crm-card, #view-registrar .table-header-block, #view-registrar .summary-box, #view-registrar .crm-summary { background-color: var(--theme-surface-main); border: 1px solid var(--theme-border); } #view-registrar .card-title, #view-registrar h2, #view-registrar h3, #view-registrar h4, #view-registrar .input-group label, #view-registrar .toggle-label, #view-registrar .summary-item .value { color: var(--theme-text-main) !important; } #view-registrar .input-group input, #view-registrar .input-group select, #view-registrar .input-with-icon input { background-color: var(--theme-surface-secondary); color: var(--theme-text-main); border: 1px solid var(--theme-border); } #view-registrar .input-group input:disabled { background-color: var(--theme-bg-secondary); color: var(--theme-text-secondary); } #view-registrar .input-group input::placeholder, #view-registrar .input-with-icon input::placeholder { color: var(--theme-text-secondary); opacity: 1; } #view-registrar .input-hint, #view-registrar .text-gray, #view-registrar .text-muted, #view-registrar .summary-title-wrapper span, #view-registrar .summary-footer span, #view-registrar .summary-item .label { color: var(--theme-text-secondary) !important; } #view-registrar .plan-card { background-color: var(--theme-bg-secondary); border-color: var(--theme-border); } #view-registrar .plan-card span { color: var(--theme-text-main); } [data-theme="dark"] #view-registrar .plan-card.selected { background-color: var(--theme-surface-secondary) !important; } /* ============================================================ FASE 3: ACTUALIZACI�N DE PALETA DE COLORES ============================================================ */ :root { --theme-bg-main: #F5F1E8; --theme-bg-secondary: #EEE8DC; --theme-surface-main: #FFFCF7; --theme-surface-secondary: #F8F3EA; --theme-sidebar-bg: #FFFCF7; --theme-header-bg: #FFFCF7; --theme-border: #DDD5C8; --theme-text-main: #172033; --theme-text-secondary: #667085; --theme-text-disabled: #98A0AD; --theme-primary: #2F6FED; --theme-primary-hover: #255BC7; --theme-accent: #D89A2B; /* Retrocompatibilidad */ --bg-body: var(--theme-bg-main); --bg-card: var(--theme-surface-main); --bg-sidebar: var(--theme-sidebar-bg); --bg-hover: var(--theme-surface-secondary); --bg-input: var(--theme-surface-secondary); --border-light: var(--theme-border); --border-focus: var(--theme-primary); --text-main: var(--theme-text-main); --text-muted: var(--theme-text-secondary); --text-dark: var(--theme-text-main); --color-primary: var(--theme-primary); --color-primary-dark: var(--theme-primary-hover); --color-accent: var(--theme-accent); } [data-theme="dark"] { --theme-bg-main: #07111F; --theme-bg-secondary: #0B1627; --theme-surface-main: #111E31; --theme-surface-secondary: #16253A; --theme-sidebar-bg: #050C17; --theme-header-bg: #07101D; --theme-border: #293950; --theme-text-main: #F7F1E7; --theme-text-secondary: #AAB5C5; --theme-text-disabled: #68768A; --theme-primary: #4B86F7; --theme-primary-hover: #6A9BFF; --theme-accent: #F0B44C; } /* Forzar Header y Sidebar a usar estos colores fijos en todo el sistema */ .sidebar, .sidebar-header { background-color: var(--theme-sidebar-bg) !important; border-right-color: var(--theme-border) !important; color: #F7F1E7 !important; } .topbar { background-color: var(--theme-header-bg) !important; border-bottom-color: var(--theme-border) !important; color: #F7F1E7 !important; } .topbar .search-input { background-color: rgba(255, 255, 255, 0.05) !important; color: #F7F1E7 !important; border-color: rgba(255, 255, 255, 0.1) !important; } .topbar .search-input::placeholder { color: rgba(255, 255, 255, 0.5) !important; } /* Forzar botones hover y textos deshabilitados */ .btn-primary:hover { background-color: var(--theme-primary-hover) !important; } input:disabled, select:disabled { color: var(--theme-text-disabled) !important; } /* ============================================================ FASE 4: CORRECCI�N DEL DASHBOARD Y SIDEBAR ============================================================ */ /* 1. Tarjetas del Dashboard (Stats) */ .stat-card { background-color: var(--theme-surface-main) !important; border-color: var(--theme-border) !important; } .stat-value { color: var(--theme-text-main) !important; } .stat-label, .stat-sub { color: var(--theme-text-secondary) !important; } /* 2. Sidebar Nav Items y Textos (Siempre claros, pues el fondo siempre es oscuro) */ .sidebar .nav-item { color: #AAB5C5 !important; } .sidebar .nav-item:hover, .sidebar .nav-item.active { color: #FFFFFF !important; } .sidebar .text-highlight { color: #FFFFFF !important; font-weight: var(--fw-bold); } .sidebar .text-orange { color: var(--theme-accent) !important; } .sidebar .theme-text { color: #AAB5C5 !important; } .sidebar-brand .brand-title, .sidebar-brand .brand-subtitle { color: #FFFFFF !important; } /* 3. Header / Topbar */ .topbar .profile-info .profile-name, .topbar .profile-name { color: #FFFFFF !important; } .topbar .profile-info .profile-role, .topbar .profile-role { color: #AAB5C5 !important; } .topbar i, .topbar svg, .topbar .notification-btn { color: #F7F1E7 !important; } /* ============================================================ FASE 4.3: SIDEBAR Y TOPBAR DIN�MICOS (CLARO/OSCURO) ============================================================ */ /* Sidebar and Header backgrounds are now dynamic (Light/Dark) */ .sidebar, .sidebar-header { background-color: var(--theme-sidebar-bg) !important; border-right-color: var(--theme-border) !important; } .topbar { background-color: var(--theme-header-bg) !important; border-bottom-color: var(--theme-border) !important; } /* Sidebar texts */ .sidebar .nav-item { color: var(--theme-text-secondary) !important; font-weight: var(--fw-medium); !important; } .sidebar .nav-item:hover { background-color: var(--theme-surface-secondary) !important; color: var(--theme-text-main) !important; } .sidebar .nav-item.active { background-color: var(--theme-primary) !important; color: #FFFFFF !important; } .sidebar .text-highlight { color: var(--theme-text-main) !important; font-weight: var(--fw-bold); } .sidebar .theme-text { color: var(--theme-text-secondary) !important; } .sidebar-brand .brand-title { color: var(--theme-text-main) !important; } .sidebar-brand .brand-subtitle { color: var(--theme-text-secondary) !important; } /* Topbar elements */ .topbar .user-name { color: var(--theme-text-main) !important; font-weight: var(--fw-semibold); !important; } .topbar .profile-role { color: var(--theme-text-secondary) !important; } .topbar .user-avatar { border: 2px solid var(--theme-border) !important; } .topbar .chevron-down { color: var(--theme-text-main) !important; } .topbar .user-dropdown-menu a { color: var(--theme-text-main) !important; } .topbar i, .topbar svg, .topbar .notification-btn { color: var(--theme-text-main) !important; } /* Search Input */ .topbar .search-input { background-color: var(--theme-surface-secondary) !important; color: var(--theme-text-main) !important; border: 1px solid var(--theme-border) !important; border-radius: 8px !important; } .topbar .search-input::placeholder { color: var(--theme-text-secondary) !important; } .topbar .search-shortcut { background-color: var(--theme-bg-main) !important; color: var(--theme-text-secondary) !important; border: 1px solid var(--theme-border) !important; font-weight: var(--fw-medium); !important; } /* ============================================================ FASE 4.4: TIPOGRAF�A GLOBAL MONTSERRAT ============================================================ */ body, h1, h2, h3, h4, h5, h6, p, a, input, button, select, textarea, label, table, th, td, div { font-family: var(--font-family-main); } /* Proteger FontAwesome expl�citamente para evitar que desaparezcan los �conos */ i, [class^="fa-"], [class*=" fa-"], .fa, .fas, .far, .fab { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important; } /* ============================================================ FASE 4.5: CORRECCI�N DE COLORES EN TABLAS ============================================================ */ /* Asegurar que las tablas, como la de Buscar Cliente, respeten el texto din�mico y no queden invisibles */ .table-client-name, table, th, td, tr, .table td, .table th, .table-client-info span { color: var(--theme-text-main) !important; } .table-client-type { color: var(--theme-text-secondary) !important; } /* ============================================================ FASE 4.7: CORRECCION DE ACORDEONES (BENEFICIOS) EN MODO OSCURO ============================================================ */ .benefit-accordion summary { color: var(--theme-text-main) !important; } .benefit-item .benefit-text span { color: var(--theme-text-secondary) !important; } .benefit-item .benefit-text strong { color: var(--theme-text-main) !important; } /* ============================================================ FASE 4.8: CORRECCI�N DE CHECKBOXES Y FONDOS PASTEL EN MODO OSCURO ============================================================ */ /* Eliminar el blanco fijo de los checkboxes (Adicionales) */ .checkmark { background-color: var(--theme-surface-main) !important; border-color: var(--theme-border) !important; } .custom-checkbox:hover input ~ .checkmark { border-color: var(--theme-primary) !important; } .topbar .user-dropdown-menu a { color: var(--theme-text-main) !important; } .topbar i, .topbar svg, .topbar .notification-btn { color: var(--theme-text-main) !important; } /* Search Input */ .topbar .search-input { background-color: var(--theme-surface-secondary) !important; color: var(--theme-text-main) !important; border: 1px solid var(--theme-border) !important; border-radius: 8px !important; } .topbar .search-input::placeholder { color: var(--theme-text-secondary) !important; } .topbar .search-shortcut { background-color: var(--theme-bg-main) !important; color: var(--theme-text-secondary) !important; border: 1px solid var(--theme-border) !important; font-weight: var(--fw-medium); !important; } /* ============================================================ FASE 4.4: TIPOGRAFA GLOBAL MONTSERRAT ============================================================ */ body, h1, h2, h3, h4, h5, h6, p, a, input, button, select, textarea, label, table, th, td, div { font-family: var(--font-family-main); } /* Proteger FontAwesome explcitamente para evitar que desaparezcan los conos */ i, [class^="fa-"], [class*=" fa-"], .fa, .fas, .far, .fab { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important; } /* ============================================================ FASE 4.5: CORRECCIN DE COLORES EN TABLAS ============================================================ */ /* Asegurar que las tablas, como la de Buscar Cliente, respeten el texto dinmico y no queden invisibles */ .table-client-name, table, th, td, tr, .table td, .table th, .table-client-info span { color: var(--theme-text-main) !important; } .table-client-type { color: var(--theme-text-secondary) !important; } /* ============================================================ FASE 4.7: CORRECCION DE ACORDEONES (BENEFICIOS) EN MODO OSCURO ============================================================ */ .benefit-accordion summary { color: var(--theme-text-main) !important; } .benefit-item .benefit-text span { color: var(--theme-text-secondary) !important; } .benefit-item .benefit-text strong { color: var(--theme-text-main) !important; } /* ============================================================ FASE 4.8: CORRECCIN DE CHECKBOXES Y FONDOS PASTEL EN MODO OSCURO ============================================================ */ /* Eliminar el blanco fijo de los checkboxes (Adicionales) */ .checkmark { background-color: var(--theme-surface-main) !important; border-color: var(--theme-border) !important; } .custom-checkbox:hover input ~ .checkmark { border-color: var(--theme-primary) !important; } .custom-checkbox input:checked ~ .checkmark { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; } /* Efecto Premium Glass/Neon para los iconos de planes en modo oscuro */ [data-theme="dark"] .bg-gray-main { background-color: rgba(107, 114, 128, 0.2) !important; color: #9ca3af !important; } [data-theme="dark"] .bg-blue-light, [data-theme="dark"] .bg-blue-main { background-color: rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; } [data-theme="dark"] .bg-orange { background-color: rgba(249, 115, 22, 0.2) !important; color: #fb923c !important; } [data-theme="dark"] .bg-yellow { background-color: rgba(234, 179, 8, 0.2) !important; color: #facc15 !important; } [data-theme="dark"] .bg-purple { background-color: rgba(139, 92, 246, 0.2) !important; color: #a78bfa !important; } [data-theme="dark"] .bg-pink { background-color: rgba(217, 70, 239, 0.2) !important; color: #e879f9 !important; } .bg-lime-main { background-color: rgba(118, 184, 43, 0.15) !important; color: rgb(118, 184, 43) !important; } [data-theme="dark"] .bg-lime-main { background-color: rgba(118, 184, 43, 0.25) !important; color: rgb(118, 184, 43) !important; } .plan-card[data-plan="Especial CG"].selected .plan-icon { background-color: rgb(118, 184, 43) !important; color: #fff !important; } .plan-card[data-plan="Especial CG"].selected { border-color: rgb(118, 184, 43) !important; box-shadow: 0 0 15px rgba(118, 184, 43, 0.3) !important; } /* Dynamic Theme Colors for Summary Panel based on selected plan */ body[data-theme-plan="Artesanos"], body[data-theme-plan="Artesanos-Calzado"] { --theme-color: #a78bfa; --theme-primary: #8b5cf6; } body[data-theme-plan="Calzado"] { --theme-color: #22d3ee; --theme-primary: #06b6d4; } body[data-theme-plan="Gastronomía"], body[data-theme-plan="Gastronómico"], body[data-theme-plan="Gastronomía Esencial"], body[data-theme-plan="Gastronomía Profesional"], body[data-theme-plan="Gastronomía Premium"] { --theme-color: #e879f9; --theme-primary: #d946ef; } body[data-theme-plan="Counter Especial"] { --theme-color: #9ca3af; --theme-primary: #6b7280; } body[data-theme-plan="Esencial"] { --theme-color: #60a5fa; --theme-primary: #3b82f6; } body[data-theme-plan="Profesional"] { --theme-color: #fb923c; --theme-primary: #f97316; } body[data-theme-plan="Premium 360"] { --theme-color: #facc15; --theme-primary: #eab308; } body[data-theme-plan="Especial CG"] { --theme-color: rgb(118, 184, 43); --theme-primary: rgb(118, 184, 43); } body[data-theme-plan="Especial CG"] .summary-panel .theme-text, body[data-theme-plan="Especial CG"] .summary-benefits .theme-text, body[data-theme-plan="Especial CG"] .summary-panel .benefit-desc, body[data-theme-plan="Especial CG"] .summary-panel .benefit-icon i { color: rgb(118, 184, 43) !important; } body[data-theme-plan="Gastronomía"] .summary-panel .theme-text, body[data-theme-plan="Gastronomía"] .summary-benefits .theme-text, body[data-theme-plan="Gastronomía"] .summary-panel .benefit-desc, body[data-theme-plan="Gastronomía"] .summary-panel .benefit-icon i, body[data-theme-plan="Gastronómico"] .summary-panel .theme-text, body[data-theme-plan="Gastronómico"] .summary-benefits .theme-text, body[data-theme-plan="Gastronómico"] .summary-panel .benefit-desc, body[data-theme-plan="Gastronómico"] .summary-panel .benefit-icon i { color: #e879f9 !important; } /* FIX: Select options color for Light/Dark Mode (OS native fallback) */ select option { background-color: #FFFCF7; color: #172033; } [data-theme="dark"] select option { background-color: #111E31; color: #F7F1E7; } /* Resaltado Inteligente Morado para Stands Libres por Categoría (Planimetría v3.2) */ @keyframes freeStandGlowPurple { 0% { box-shadow: 0 0 6px rgba(168, 85, 247, 0.5), inset 0 0 8px rgba(168, 85, 247, 0.2); } 50% { box-shadow: 0 0 18px rgba(168, 85, 247, 0.9), inset 0 0 14px rgba(168, 85, 247, 0.4); } 100% { box-shadow: 0 0 6px rgba(168, 85, 247, 0.5), inset 0 0 8px rgba(168, 85, 247, 0.2); } } .stand-highlight-free-purple { border: 2.5px solid #a855f7 !important; background-color: rgba(203, 213, 225, 0.45) !important; animation: freeStandGlowPurple 2s infinite ease-in-out !important; z-index: 30 !important; } /* Icon alignment fixes */ #theme-toggle { display: flex; align-items: center; justify-content: center; } #theme-toggle svg { transform: translateY(-2px); } .notify-btn { display: flex; align-items: center; justify-content: center; } /* ── Glassmorphism Modals (SweetAlert2 & Custom) ────── */ .swal2-popup, .modal-card { background: var(--theme-surface-main) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid var(--theme-border) !important; border-radius: 24px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3) !important; color: var(--theme-text-main) !important; } .swal2-title { color: var(--theme-text-main) !important; font-weight: var(--fw-bold); !important; letter-spacing: -0.02em !important; } .swal2-html-container { color: var(--theme-text-main) !important; } .swal2-actions button { border-radius: 12px !important; font-weight: var(--fw-semibold); !important; padding: 0.7rem 1.5rem !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } .swal2-styled.swal2-confirm { background: var(--theme-primary) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important; } .swal2-styled.swal2-confirm:hover { background: var(--theme-primary-hover) !important; transform: translateY(-1px) !important; } .swal2-styled.swal2-cancel { background: var(--theme-bg-secondary) !important; color: var(--theme-text-secondary) !important; border: 1px solid var(--theme-border) !important; } .swal2-styled.swal2-cancel:hover { background: var(--theme-surface-secondary) !important; color: var(--theme-text-main) !important; } /* Glassmorphism Cards inside Modals */ .tramite-card { background: var(--theme-surface-secondary) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(8px) !important; border-radius: 16px !important; transition: all 0.25s ease !important; } .tramite-card:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.2) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; } /* Dinamic Border for Adicionales Nota matching active Plan Theme */ #adicionales-nota { border: 1.5px solid var(--theme-primary) !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } #adicionales-nota:focus { border-color: var(--theme-primary) !important; box-shadow: 0 0 0 3px rgba(120, 120, 255, 0.25) !important; outline: none !important; } /* ============================================================ Terceros / Plugins Dark Mode Overrides (Flatpickr / MDTimePicker) ============================================================ */ /* Evitar que MDTimePicker y Flatpickr hereden el texto blanco del body oscuro, ya que sus fondos internos no cambian y el texto se vuelve invisible. */ .mdtp__wrapper, .flatpickr-calendar { color: #1a1a1a; } /* Invertimos dinámicamente el widget cuando está activo el tema oscuro. Invert(0.9) hue-rotate(180deg) hace que los fondos claros se vuelvan oscuros, el texto negro se vuelva blanco, y el color verde de acento (hue=160) se mantenga! */ html[data-theme="dark"] .flatpickr-calendar, html[data-theme="dark"] .mdtp__wrapper { filter: invert(0.92) hue-rotate(180deg) brightness(1.2) contrast(1.1) !important; } /* Ensure SweetAlert2 is always on top of all custom modals */ .swal2-container { z-index: 10000 !important; } /* ============================================================ Barra de búsqueda y filtros La clase .search-box se usaba en el módulo Gastos y Costos sin estar definida en ninguna hoja de estilos, por lo que el ícono de lupa quedaba fuera del campo y el input tomaba la apariencia por defecto del navegador, desalineado frente a los selectores. ============================================================ */ .search-filter-container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 15px; } .search-filter-container .search-box { position: relative; flex: 1 1 260px; max-width: 420px; min-width: 220px; } .search-filter-container .search-box i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--fs-sm); pointer-events: none; } .search-filter-container .search-box input { width: 100%; height: 42px; padding: 0 1rem 0 2.4rem; border: 1px solid var(--border-light); border-radius: 8px; background-color: var(--bg-surface); color: var(--text-primary); font-family: inherit; font-size: var(--fs-sm); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .search-filter-container .search-box input::placeholder { color: var(--text-muted); } .search-filter-container .search-box input:focus { outline: none; border-color: var(--gc-borde-foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-borde-foco) 40%, transparent); } /* Selectores de filtro. Se limitan a .search-filter-container para no alterar las barras de otros módulos que ya traen estilos propios. */ .search-filter-container select { flex: 0 1 190px; min-width: 160px; height: 42px; padding: 0 2.2rem 0 0.9rem; border: 1px solid var(--border-light); border-radius: 8px; background-color: var(--bg-surface); color: var(--text-primary); font-family: inherit; font-size: var(--fs-sm); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1em; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .search-filter-container select:focus { outline: none; border-color: var(--gc-borde-foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-borde-foco) 40%, transparent); } .search-filter-container select:disabled { opacity: 0.55; cursor: not-allowed; } html[data-theme="dark"] .search-filter-container select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); } @media (max-width: 640px) { .search-filter-container .search-box, .search-filter-container select { flex: 1 1 100%; max-width: none; } } /* ============================================================ Módulo Gastos y Costos — modales ============================================================ */ /* Título de modal. Antes eran

sin peso ni tamaño propios, por lo que no se leían como encabezado. */ .gc-modal-title { margin: 0; color: var(--text-primary); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.3; } /* Desplegables. Se reemplaza la apariencia nativa por una flecha propia para que respeten el tema y se vean iguales en todos los navegadores. */ .gc-select { width: 100%; min-height: 38px; padding: 8px 2.1rem 8px 10px; border: 1px solid var(--border-light); border-radius: 6px; background-color: var(--bg-surface); color: var(--text-primary); font-family: inherit; font-size: var(--fs-sm); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 0.9em; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .gc-select:focus { outline: none; border-color: var(--gc-borde-foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-borde-foco) 40%, transparent); } .gc-select:disabled { opacity: 0.55; cursor: not-allowed; background-color: var(--bg-hover); } /* Las opciones heredan el fondo del sistema operativo, no del tema. Se fuerzan para que el desplegable abierto no aparezca en blanco. */ .gc-select option { background-color: var(--bg-card); color: var(--text-primary); } html[data-theme="dark"] .gc-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); } /* ========================================================== MODAL ENGINE PARA GASTOS (RESPONSIVE VIEWPORT 14" Y DESKTOP) ========================================================== */ .gc-modal { display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 1200; justify-content: center; align-items: center; padding: 15px; box-sizing: border-box; /* .modal-overlay deja opacity:0 y visibility:hidden, y estos modales comparten ambas clases. Sin restaurarlas aquí, abrirlos con style.display='flex' los dejaba presentes pero invisibles e inertes: cargaban sus datos y no se veía nada. Se muestran únicamente cuando el JS les quita el display:none con el que todos arrancan en el HTML. */ opacity: 1; visibility: visible; } .gc-modal .modal-content { background: var(--bg-card); width: 520px; max-width: 95vw; max-height: 88vh; display: flex; flex-direction: column; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border: 1px solid var(--border-light); overflow: hidden; position: relative; padding: 0 !important; margin: auto; } .gc-modal .modal-header { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border-light); background: var(--bg-card); flex-shrink: 0; z-index: 5; margin-bottom: 0 !important; } .gc-modal .modal-header h3 { margin: 0; color: var(--text-primary); font-weight: 700; font-size: 1.15rem; line-height: 1.25; } .gc-modal .modal-body { padding: 16px 20px; overflow-y: auto; max-height: calc(88vh - 125px); flex: 1; display: flex; flex-direction: column; gap: 13px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .gc-modal .modal-body::-webkit-scrollbar { width: 6px; } .gc-modal .modal-body::-webkit-scrollbar-track { background: transparent; } .gc-modal .modal-body::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: 4px; } .gc-modal .modal-body::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); } .gc-modal .modal-footer { padding: 12px 20px; border-top: 1px solid var(--border-light); background: var(--bg-card); display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-shrink: 0; z-index: 5; margin-top: 0 !important; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04); } .gc-modal .premium-close-btn { position: relative; z-index: 30; flex-shrink: 0; } /* Botón de actualizar datos, en la cabecera del módulo. Recarga las cuatro pestañas a la vez, por eso vive fuera de ellas. */ .gc-refresh-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; padding: 0; border: 1px solid var(--border-light); border-radius: 8px; background-color: var(--bg-surface); color: var(--color-accent); font-size: var(--fs-lg); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .gc-refresh-btn:hover:not(:disabled) { background-color: var(--color-accent); border-color: var(--color-accent); color: #ffffff; } .gc-refresh-btn:focus-visible { outline: none; border-color: var(--gc-borde-foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-borde-foco) 40%, transparent); } .gc-refresh-btn:disabled { cursor: wait; opacity: 0.75; } /* Giro continuo mientras se recargan los datos. */ .gc-refresh-btn.is-loading i { animation: gc-spin 0.8s linear infinite; } @keyframes gc-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .gc-refresh-btn.is-loading i { animation: none; } } /* Separador entre el botón de actualizar y las pestañas. */ .gc-header-divider { width: 1px; height: 24px; flex-shrink: 0; background-color: var(--border-light); } /* Campos de texto y fecha, con las mismas medidas que .gc-select para que queden a la misma altura cuando comparten fila. */ .gc-input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 6px; background-color: var(--bg-surface); color: var(--text-primary); font-family: inherit; font-size: var(--fs-sm); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .gc-input:focus { outline: none; border-color: var(--gc-borde-foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-borde-foco) 40%, transparent); } textarea.gc-input { min-height: 0; resize: none; } /* Campos de moneda: se ocultan las flechas del control numérico, porque el valor se digita y se formatea con separadores de miles. */ .gc-modal input[type="number"]::-webkit-outer-spin-button, .gc-modal input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .gc-modal input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Icono del almanaque en los campos de fecha. El navegador lo dibuja oscuro por defecto, lo cual sirve en modo claro pero queda invisible sobre el fondo oscuro; ahí se invierte a blanco. */ .gc-modal input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.85; filter: none; } .gc-modal input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } html[data-theme="dark"] .gc-modal input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } /* Fila de etiqueta con acción a la derecha (el "+" de crear al vuelo). */ .gc-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; min-height: 20px; } .gc-label-row label { margin: 0; } .gc-add-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; padding: 0; border: 1px solid var(--color-accent); border-radius: 5px; background: transparent; color: var(--color-accent); font-size: var(--fs-micro); line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .gc-add-btn:hover { background-color: var(--color-accent); color: #ffffff; } /* Estado activo: el botón pasa a cancelar y volver al desplegable. */ .gc-add-btn.is-active { border-color: #ef4444; color: #ef4444; } .gc-add-btn.is-active:hover { background-color: #ef4444; color: #ffffff; } /* Nota de ayuda dentro de los formularios. */ .gc-hint { margin: 0; color: var(--text-muted); font-size: var(--fs-micro); line-height: 1.4; } .gc-hint i { margin-right: 4px; } /* Rejilla de dos columnas para los modales. Las celdas se estiran a la misma altura y el control se ancla abajo, de modo que los campos quedan alineados aunque una etiqueta ocupe dos renglones y la otra sólo uno. Ese era el origen del descuadre en el modal de abonos. */ .gc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; } .gc-grid-2 > div { display: flex; flex-direction: column; } @media (max-width: 480px) { .gc-grid-2 { grid-template-columns: 1fr; } } /* Desplegable con buscador. Un