/* ============================================ NEXUS CORE — Design System v2.0 Alineado con el Manual de Marca Springhead ============================================ */ :root { /* ── Paleta principal (oficial Springhead) ── */ --color-primary: #0b314a; /* navy */ --color-primary-mid: #1b7181; /* teal */ --color-primary-light: #4a8b98; /* teal claro */ --color-accent: #f1e51b; /* amarillo */ --color-surface: #d9d6c7; /* arena */ --color-surface-light: #e7e7de; /* arena claro */ --color-slate: #3d5a6e; /* slate */ /* ── Semánticos ── */ --color-success: #2a9d5c; --color-warning: #f4a261; --color-danger: #e63946; --color-info: #4a8b98; /* ── Tipografía ── */ --font-brand: 'Unica One', 'Helvetica Neue', Arial, sans-serif; /* sustituta de Ladisloav Semibold */ --font-ui: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* sustituta de Helvetica Light */ --font-primary: var(--font-ui); /* alias legacy */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ── Layout ── */ --sidebar-width: 240px; --sidebar-width-collapsed: 76px; --topbar-height: 88px; --brand-height: 88px; --border-radius-sm: 4px; --border-radius-base: 6px; --border-radius-lg: 10px; --border-radius-xl: 14px; /* ── Sombras ── */ --shadow-sm: 0 1px 2px rgba(11, 49, 74, 0.06); --shadow-card: 0 1px 4px rgba(11, 49, 74, 0.08); --shadow-card-hover: 0 6px 18px rgba(11, 49, 74, 0.10); --shadow-lg: 0 12px 32px rgba(11, 49, 74, 0.14); /* ── Transiciones ── */ --transition-fast: all 0.12s ease; --transition-base: all 0.2s ease; --transition-slow: all 0.3s ease; /* ── Fondo de áreas ── */ --bg-app: #f7f6f2; /* fondo general del content admin */ --bg-surface: #ffffff; /* cards, panels */ --color-border: #e3e8ec; /* ── Aliases legacy (scheduling/*.html) ── */ --nxs-teal: var(--color-primary-mid); --nxs-navy: var(--color-primary); --nxs-yellow: var(--color-accent); --nxs-surface: var(--bg-surface); --nxs-surface-alt: var(--color-surface-light); --nxs-border: var(--color-border); --nxs-text-muted: var(--color-slate); /* ── Tema: colores textuales ── */ --text-strong: #1a2433; --text-body: #2d3845; --text-muted: var(--color-slate); } /* ============================================ DARK THEME — variables override Se activa con . ============================================ */ html[data-theme="dark"] { --color-primary: #0b314a; /* navy de marca queda igual */ --color-primary-mid: #2b95aa; /* teal más luminoso para contraste */ --color-primary-light: #5fb4c2; --color-accent: #f1e51b; --color-surface: #2a3542; --color-surface-light: #2f3b49; --color-slate: #a4b3c5; --color-success: #3bc97a; --color-warning: #f6b26b; --color-danger: #f26a75; --color-info: #5fb4c2; --bg-app: #111820; --bg-surface: #1a2530; --color-border: rgba(255,255,255,0.08); --text-strong: #eef2f5; --text-body: #d4dae2; --text-muted: #a4b3c5; --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-card: 0 1px 4px rgba(0,0,0,0.35); --shadow-card-hover: 0 6px 18px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.55); } html[data-theme="dark"] body, html[data-theme="dark"] body.admin-body { background-color: var(--bg-app); color: var(--text-body); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .page-header__title, html[data-theme="dark"] .section-card__title { color: var(--text-strong); } html[data-theme="dark"] .card, html[data-theme="dark"] .section-card, html[data-theme="dark"] .data-table, html[data-theme="dark"] .admin-topbar { background-color: var(--bg-surface); border-color: var(--color-border); color: var(--text-body); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #22303d; border-color: rgba(255,255,255,0.12); color: var(--text-body); } html[data-theme="dark"] .form-control::placeholder { color: #768295; } html[data-theme="dark"] .input-group-text { background-color: #22303d; border-color: rgba(255,255,255,0.12); color: var(--text-muted); } html[data-theme="dark"] .table { color: var(--text-body); } html[data-theme="dark"] .table thead th { color: var(--text-muted); border-bottom-color: var(--color-border); } html[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255,255,255,0.04); } html[data-theme="dark"] .data-table .table thead th { background-color: #202d3a; } html[data-theme="dark"] .btn-ghost { color: var(--text-muted); } html[data-theme="dark"] .btn-ghost:hover { background-color: rgba(255,255,255,0.06); color: var(--text-strong); } html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; } html[data-theme="dark"] .alert-info { background-color: rgba(95, 180, 194, 0.12); color: #bde2ea; border-left-color: var(--color-info); } html[data-theme="dark"] .alert-success { background-color: rgba(59, 201, 122, 0.12); color: #8be0ad; border-left-color: var(--color-success); } html[data-theme="dark"] .alert-warning { background-color: rgba(246, 178, 107, 0.14); color: #f5cfa3; border-left-color: var(--color-warning); } html[data-theme="dark"] .alert-danger { background-color: rgba(242, 106, 117, 0.14); color: #f3b7bd; border-left-color: var(--color-danger); } html[data-theme="dark"] hr { border-color: var(--color-border); } /* Dropdowns de Bootstrap en dark (navbar usuario, menús contextuales). Bootstrap 5.3 usa variables CSS propias (--bs-dropdown-*). Hay que overridearlas además del background directo para que el menú entero (bg, border, items, hover) respete el tema. */ html[data-theme="dark"] .dropdown-menu { --bs-dropdown-bg: #1a2530; --bs-dropdown-color: #d4dae2; --bs-dropdown-border-color: rgba(255, 255, 255, 0.10); --bs-dropdown-divider-bg: rgba(255, 255, 255, 0.10); --bs-dropdown-header-color: #a4b3c5; --bs-dropdown-link-color: #d4dae2; --bs-dropdown-link-hover-color: #eef2f5; --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06); --bs-dropdown-link-active-color: #eef2f5; --bs-dropdown-link-active-bg: rgba(255, 255, 255, 0.10); background-color: #1a2530 !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #d4dae2 !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important; } html[data-theme="dark"] .dropdown-menu .dropdown-item { color: #d4dae2 !important; background-color: transparent !important; } html[data-theme="dark"] .dropdown-menu .dropdown-item:hover, html[data-theme="dark"] .dropdown-menu .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06) !important; color: #eef2f5 !important; } html[data-theme="dark"] .dropdown-menu .dropdown-item.text-danger { color: #f26a75 !important; } html[data-theme="dark"] .dropdown-menu .dropdown-item.text-danger:hover, html[data-theme="dark"] .dropdown-menu .dropdown-item.text-danger:focus { background-color: rgba(242, 106, 117, 0.14) !important; color: #f7939b !important; } html[data-theme="dark"] .dropdown-menu .dropdown-header { color: #a4b3c5 !important; } html[data-theme="dark"] .dropdown-menu .dropdown-divider { border-top-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="dark"] .admin-topbar__user, html[data-theme="dark"] .admin-topbar__user[aria-expanded="true"], html[data-theme="dark"] .admin-topbar__user.show { background-color: transparent !important; border-color: rgba(255, 255, 255, 0.10); color: var(--text-body); } html[data-theme="dark"] .admin-topbar__user:hover, html[data-theme="dark"] .admin-topbar__user:focus, html[data-theme="dark"] .admin-topbar__user[aria-expanded="true"]:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: var(--text-strong); } html[data-theme="dark"] .admin-topbar__user:focus-visible { box-shadow: 0 0 0 0.15rem rgba(95, 180, 194, 0.35); } /* FullCalendar en dark */ html[data-theme="dark"] #calendar { --fc-border-color: rgba(255,255,255,0.07); --fc-today-bg-color: rgba(241, 229, 27, 0.06); --fc-page-bg-color: var(--bg-surface); } html[data-theme="dark"] .fc .fc-toolbar-title, html[data-theme="dark"] .fc .fc-col-header-cell-cushion, html[data-theme="dark"] .fc .fc-daygrid-day-number, html[data-theme="dark"] .fc .fc-timegrid-slot-label-cushion { color: var(--text-muted); } html[data-theme="dark"] .fc .fc-button-group { background: rgba(255,255,255,0.05); } html[data-theme="dark"] .fc .fc-prev-button, html[data-theme="dark"] .fc .fc-next-button, html[data-theme="dark"] .fc .fc-today-button { background: rgba(255,255,255,0.06) !important; border-color: transparent !important; color: var(--text-strong) !important; } /* ============================================ BASE ============================================ */ html, body { font-family: var(--font-ui); font-weight: var(--font-weight-regular); color: #1a2433; background-color: #fff; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; color: var(--color-primary); } .font-brand { font-family: var(--font-brand) !important; letter-spacing: 0.02em; } code, pre, kbd, samp { font-family: 'JetBrains Mono', 'Menlo', monospace; } /* ============================================ BOTONES ============================================ */ .btn { border-radius: var(--border-radius-base); font-weight: var(--font-weight-medium); letter-spacing: 0.01em; transition: var(--transition-fast); } .btn-primary { background-color: var(--color-primary-mid); border-color: var(--color-primary-mid); color: #fff; } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-outline-primary { color: var(--color-primary-mid); border-color: var(--color-primary-mid); } .btn-outline-primary:hover { background-color: var(--color-primary-mid); border-color: var(--color-primary-mid); color: #fff; } .btn-success { background-color: var(--color-success); border-color: var(--color-success); } .btn-warning { background-color: var(--color-warning); border-color: var(--color-warning); color: var(--color-primary); } .btn-danger { background-color: var(--color-danger); border-color: var(--color-danger); } .btn-accent { background-color: var(--color-accent); color: var(--color-primary); border: none; font-weight: var(--font-weight-semibold); } .btn-accent:hover { background-color: #d4ca18; color: var(--color-primary); } .btn-ghost { background-color: transparent; color: var(--color-slate); border: 1px solid transparent; } .btn-ghost:hover { background-color: var(--color-surface-light); color: var(--color-primary); } /* ============================================ CARDS ============================================ */ .card { border: 1px solid rgba(11, 49, 74, 0.06); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-card); transition: var(--transition-base); background-color: var(--bg-surface); } .card:hover { box-shadow: var(--shadow-card-hover); } .card-header { background-color: transparent; border-bottom: 1px solid var(--color-surface-light); font-weight: var(--font-weight-semibold); font-size: 0.875rem; letter-spacing: 0.02em; padding: 0.85rem 1.1rem; } .card-body { padding: 1.1rem; } /* Card "section" — contenedor de sección de página */ .section-card { background: var(--bg-surface); border: 1px solid rgba(11, 49, 74, 0.06); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: 1.25rem 1.4rem; margin-bottom: 1rem; } .section-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-surface-light); } .section-card__title { font-size: 0.95rem; font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; display: flex; align-items: center; gap: 0.6rem; } /* ============================================ TABLAS ============================================ */ .table { font-size: 0.9rem; color: #1a2433; } .table thead th { font-weight: var(--font-weight-semibold); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-slate); border-bottom: 2px solid var(--color-surface-light); padding: 0.65rem 0.85rem; } .table tbody td { padding: 0.75rem 0.85rem; vertical-align: middle; } .table-hover tbody tr:hover { background-color: var(--color-surface-light); } /* Wrapper estándar de tabla */ .data-table { background: var(--bg-surface); border-radius: var(--border-radius-lg); border: 1px solid rgba(11, 49, 74, 0.06); overflow: hidden; box-shadow: var(--shadow-sm); } .data-table .table { margin: 0; } .data-table .table thead th { background-color: var(--color-surface-light); border-bottom: 1px solid rgba(11, 49, 74, 0.08); } /* ============================================ BADGES ============================================ */ .badge { font-weight: var(--font-weight-medium); letter-spacing: 0.02em; padding: 0.35em 0.65em; } .badge.bg-primary { background-color: var(--color-primary-mid) !important; color: #fff !important; } .badge.bg-success { background-color: var(--color-success) !important; } .badge.bg-warning { background-color: var(--color-warning) !important; color: var(--color-primary) !important; } .badge.bg-secondary { background-color: var(--color-slate) !important; } .badge.bg-accent { background-color: var(--color-accent) !important; color: var(--color-primary) !important; } /* ============================================ ALERTAS ============================================ */ .alert { border-radius: var(--border-radius-base); border: none; padding: 0.75rem 1rem; } .alert-info { background-color: rgba(74, 139, 152, 0.10); color: var(--color-primary); border-left: 3px solid var(--color-primary-light); } .alert-success { background-color: rgba(42, 157, 92, 0.10); color: #1b6e3f; border-left: 3px solid var(--color-success); } .alert-warning { background-color: rgba(244, 162, 97, 0.14); color: #8a4a18; border-left: 3px solid var(--color-warning); } .alert-danger { background-color: rgba(230, 57, 70, 0.10); color: #8a1b25; border-left: 3px solid var(--color-danger); } /* ============================================ FORMULARIOS ============================================ */ .form-label { font-size: 0.82rem; font-weight: var(--font-weight-medium); color: var(--color-slate); margin-bottom: 0.35rem; } .form-control, .form-select { border-radius: var(--border-radius-base); border-color: #d6dce4; font-size: 0.92rem; } .form-control:focus, .form-select:focus { border-color: var(--color-primary-mid); box-shadow: 0 0 0 0.2rem rgba(27, 113, 129, 0.18); } .input-group-text { background-color: var(--color-surface-light); border-color: #d6dce4; color: var(--color-slate); } .form-check-input:checked { background-color: var(--color-primary-mid); border-color: var(--color-primary-mid); } .form-switch .form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); } /* ============================================ UTILIDADES DE MARCA ============================================ */ .bg-brand-primary { background-color: var(--color-primary) !important; } .bg-brand-mid { background-color: var(--color-primary-mid) !important; } .bg-brand-accent { background-color: var(--color-accent) !important; } .bg-brand-surface { background-color: var(--color-surface-light) !important; } .bg-brand-slate { background-color: var(--color-slate) !important; } .text-brand-primary { color: var(--color-primary) !important; } .text-brand-mid { color: var(--color-primary-mid) !important; } .text-brand-accent { color: var(--color-accent) !important; } .text-brand-slate { color: var(--color-slate) !important; } /* ============================================ PAGE HEADER — header unificado de pantalla ============================================ */ .page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-surface-light); } .page-header__title { font-family: var(--font-brand); font-size: 1.75rem; font-weight: var(--font-weight-regular); letter-spacing: 0.01em; color: var(--color-primary); margin: 0; line-height: 1.1; } .page-header__subtitle { font-size: 0.88rem; color: var(--color-slate); margin: 0.25rem 0 0; font-weight: var(--font-weight-regular); } .page-header__actions { display: flex; gap: 0.5rem; align-items: center; } /* ============================================ KPI CARDS (dashboards) ============================================ */ .kpi-card { border-radius: var(--border-radius-lg); padding: 1.35rem 1.4rem; color: #fff; display: flex; flex-direction: column; justify-content: space-between; min-height: 110px; box-shadow: var(--shadow-card); } .kpi-card .kpi-label { font-size: 0.72rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.78; } .kpi-card .kpi-value { font-family: var(--font-brand); font-size: 2.1rem; line-height: 1.1; font-weight: var(--font-weight-regular); margin: 0.4rem 0 0; } .kpi-card .kpi-icon { font-size: 1.4rem; opacity: 0.6; } .kpi-card.kpi-sales-today { background-color: var(--color-primary); } .kpi-card.kpi-sales-month { background-color: var(--color-primary-mid); } .kpi-card.kpi-appointments { background-color: var(--color-slate); } .kpi-card.kpi-accent { background-color: var(--color-accent); color: var(--color-primary); } .kpi-card.kpi-accent .kpi-label { opacity: 0.7; } /* ============================================ MISC ============================================ */ hr { border-color: var(--color-surface-light); opacity: 1; } .text-muted { color: var(--color-slate) !important; opacity: 0.75; } .chart-container { position: relative; } /* Scrollbar sutil para sidebar / áreas oscuras */ .scroll-brand::-webkit-scrollbar { width: 6px; } .scroll-brand::-webkit-scrollbar-track { background: transparent; } .scroll-brand::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; } /* ============================================ AUTH SHELL (login, recuperar, etc.) ============================================ */ body.auth-body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, var(--color-primary) 0%, #072538 100%); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; position: relative; overflow-x: hidden; } /* Isotipos decorativos en el fondo */ body.auth-body::before, body.auth-body::after { content: ''; position: absolute; border-radius: 50%; border: 2px solid rgba(241, 229, 27, 0.08); pointer-events: none; } body.auth-body::before { width: 280px; height: 280px; top: -60px; right: -80px; border-color: rgba(27, 113, 129, 0.25); } body.auth-body::after { width: 420px; height: 420px; bottom: -140px; left: -140px; border-color: rgba(241, 229, 27, 0.08); } .auth-flash-wrap { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); width: min(480px, 90%); z-index: 2000; } .auth-card { background: #fff; border-radius: var(--border-radius-xl); box-shadow: 0 24px 60px rgba(0,0,0,0.28); width: min(420px, 100%); padding: 2.25rem 2rem; position: relative; z-index: 1; } .auth-card__brand { display: flex; justify-content: center; margin-bottom: 1.25rem; } .auth-card__brand img { height: 34px; width: auto; } .auth-card__title { font-family: var(--font-brand); font-size: 1.6rem; color: var(--color-primary); text-align: center; margin: 0 0 0.25rem; letter-spacing: 0.02em; } .auth-card__subtitle { text-align: center; color: var(--color-slate); font-size: 0.88rem; margin-bottom: 1.5rem; } .auth-footer { text-align: center; color: rgba(255,255,255,0.55); font-size: 0.78rem; margin-top: 1.25rem; position: relative; z-index: 1; } /* ============================================ AVATARES (profesionales, clientes) ============================================ */ .nxs-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background-color: var(--color-primary-mid); color: #fff; font-size: 0.72rem; font-weight: var(--font-weight-semibold); overflow: hidden; flex-shrink: 0; line-height: 1; text-transform: uppercase; } .nxs-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .nxs-avatar--sm { width: 22px; height: 22px; font-size: 0.62rem; } .nxs-avatar--lg { width: 42px; height: 42px; font-size: 0.95rem; } .nxs-avatar--xl { width: 72px; height: 72px; font-size: 1.4rem; } .admin-avatar-preview { width: 84px; height: 84px; border-radius: 50%; background-color: var(--color-primary-mid); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: var(--font-weight-semibold); overflow: hidden; flex-shrink: 0; border: 2px solid var(--color-surface-light); } .admin-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================ TARJETAS DE EVENTO (calendario + recepción) ============================================ */ .nxs-event-card { display: flex; flex-direction: column; gap: 3px; padding: 5px 7px 6px; font-size: 0.78rem; line-height: 1.2; overflow: hidden; min-width: 0; } /* Texto navy por default (gana sobre --fc-event-text-color e inline styles). Usamos color hardcodeado + !important porque FullCalendar v6 fuerza el color del texto vía la variable --fc-event-text-color y/o color inline en .fc-event-main, que es el parent directo de .nxs-event-card. */ .fc-event .nxs-event-card, .fc-event .nxs-event-card__time, .fc-event .nxs-event-card__service, .fc-event .nxs-event-card__customer { color: #0b314a !important; /* navy */ } /* Fondos oscuros: texto blanco */ .fc-event.nxs-evt--blocked .nxs-event-card, .fc-event.nxs-evt--blocked .nxs-event-card__time, .fc-event.nxs-evt--blocked .nxs-event-card__service, .fc-event.nxs-evt--blocked .nxs-event-card__customer, .fc-event.nxs-evt--cancelled .nxs-event-card, .fc-event.nxs-evt--cancelled .nxs-event-card__time, .fc-event.nxs-evt--cancelled .nxs-event-card__service, .fc-event.nxs-evt--cancelled .nxs-event-card__customer { color: #ffffff !important; } /* Fila 1: avatar + hora */ .nxs-event-card__top { display: flex; align-items: center; gap: 6px; min-width: 0; flex-shrink: 0; } .nxs-event-card__time { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); font-size: 0.74rem; opacity: 0.9; flex-shrink: 0; } /* Fila 2: servicio (bold, wrap hasta 2 líneas) */ .nxs-event-card__service { font-weight: var(--font-weight-semibold); font-size: 0.78rem; min-width: 0; word-break: break-word; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Fila 3: cliente (light, wrap hasta 2 líneas) */ .nxs-event-card__customer { font-weight: var(--font-weight-light); font-size: 0.72rem; opacity: 0.88; min-width: 0; word-break: break-word; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nxs-event-card .nxs-avatar { width: 20px; height: 20px; font-size: 0.58rem; background-color: rgba(255,255,255,0.55); color: var(--color-primary); box-shadow: 0 0 0 1px rgba(255,255,255,0.65); flex-shrink: 0; } .fc-event.nxs-evt--blocked .nxs-event-card .nxs-avatar, .fc-event.nxs-evt--cancelled .nxs-event-card .nxs-avatar { background-color: rgba(255,255,255,0.22); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.35); } /* ═══ FIX: botón "Hoy" del calendario — contraste ═══ */ .fc .fc-today-button { color: var(--color-primary) !important; font-weight: var(--font-weight-semibold); } .fc .fc-today-button:not(:disabled):hover { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; } .fc .fc-today-button:disabled { opacity: 0.55; color: var(--color-slate) !important; cursor: not-allowed; } html[data-theme="dark"] .fc .fc-today-button { color: var(--text-strong) !important; background: rgba(241, 229, 27, 0.12) !important; } html[data-theme="dark"] .fc .fc-today-button:not(:disabled):hover { background: var(--color-accent) !important; color: var(--color-primary) !important; } html[data-theme="dark"] .fc .fc-today-button:disabled { color: var(--text-muted) !important; background: rgba(255,255,255,0.04) !important; } /* ============================================ TOGGLE TEMA (navbar backoffice) ============================================ */ .admin-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--border-radius-base); color: var(--color-slate); cursor: pointer; transition: var(--transition-fast); padding: 0; } .admin-theme-toggle:hover { background: var(--color-surface-light); color: var(--color-primary); border-color: var(--color-primary-mid); } .admin-theme-toggle i { font-size: 1.05rem; } .admin-theme-toggle .icon-sun { display: none; } .admin-theme-toggle .icon-moon { display: inline; } html[data-theme="dark"] .admin-theme-toggle .icon-sun { display: inline; color: var(--color-accent); } html[data-theme="dark"] .admin-theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .admin-theme-toggle { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); } html[data-theme="dark"] .admin-theme-toggle:hover { background: rgba(255,255,255,0.10); color: var(--color-accent); }