/* ============================================================
FUTRESERVA · Sistema de gestión
Brand styles — diseño unificado y profesional
============================================================ */
/* CSS variables de marca */
:root {
--cobalto: #002F87;
--cobalto-700: #00226A;
--cobalto-900: #0A1733;
--cobalto-50: #E6ECF7;
--cobalto-100: #B8C7E3;
--cobalto-300: #6B85BD;
--electrico: #E8FF35;
--electrico-50: #FAFFE0;
--electrico-100: #F4FFAA;
--electrico-700: #94A50A;
--electrico-900: #545E0A;
--tinta: #0A1733;
--acero: #5A6B7B;
--nieve: #FAFBFC;
--niebla: #F1F4F9;
--nube: #E5EAF2;
--pizarra: #2A3548;
--exito: #10B364;
--exito-bg: #DCFCE7;
--exito-text: #0A6E3F;
--aviso: #F5A623;
--aviso-bg: #FFF1DC;
--aviso-text: #7A4900;
--error: #FF3B5C;
--error-bg: #FFE5E9;
--error-text: #A6132A;
--info: #1F8BFF;
--info-bg: #DBEAFE;
--info-text: #1E40AF;
--whatsapp: #25D366;
--sidebar-width: 260px;
--header-height: 60px;
--topbar-height: 56px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--shadow-sm: 0 1px 3px rgba(10, 23, 51, 0.04);
--shadow-md: 0 4px 14px rgba(10, 23, 51, 0.06);
--shadow-lg: 0 12px 28px rgba(10, 23, 51, 0.08);
/* Bootstrap overrides */
--bs-primary: var(--cobalto);
--bs-primary-rgb: 0, 47, 135;
--bs-secondary: var(--acero);
--bs-success: var(--exito);
--bs-success-rgb: 16, 179, 100;
--bs-warning: var(--aviso);
--bs-warning-rgb: 245, 166, 35;
--bs-danger: var(--error);
--bs-danger-rgb: 255, 59, 92;
--bs-info: var(--cobalto-700);
--bs-link-color: var(--cobalto);
--bs-link-hover-color: var(--cobalto-700);
--bs-body-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--bs-body-color: var(--tinta);
--bs-body-bg: var(--nieve);
--bs-border-color: var(--nube);
--bs-border-radius: 10px;
--bs-border-radius-sm: 6px;
--bs-border-radius-lg: 14px;
/* Surface tokens — semantic names the dark theme can swap independently
of brand colors. Keeps --cobalto and --electrico stable across themes.
`--page-text` is separate from `--text-strong` because in dark mode the
page bg goes dark (so page-level text is light) BUT cards stay bright
(so card-level text stays dark). One token for each context. */
--surface-page: var(--nieve);
--surface-card: #FFFFFF;
--surface-input: #FFFFFF;
--surface-table-row: #FFFFFF;
--surface-table-row-alt: var(--nieve);
--surface-muted: var(--niebla);
--border-soft: var(--nube);
--border-emphasis: var(--cobalto-100);
--text-strong: var(--tinta); /* used INSIDE cards/tables/inputs */
--text-muted: var(--acero);
--text-on-page: var(--tinta); /* used directly on page-bg (header) */
--text-on-page-muted: var(--acero);
--text-on-electrico: var(--cobalto);
}
/* ============================================================
DARK THEME — opt-in via [data-theme="dark"] on .
Pattern: dark page + dark chrome (sidebar/topbar) + LIGHT cards.
The user's eyes hit the dark page first, then content "lifts" off
on bright surfaces — same pattern Notion / Linear / Vercel use.
Brand colors (--cobalto, --electrico) stay constant.
============================================================ */
:root[data-theme="dark"] {
/* Cards STAY LIGHT — only the page bg goes dark. This way table rows,
form inputs, badges and alerts can keep their existing palette and
remain perfectly legible without per-component dark variants. */
--surface-page: #0F1623; /* dark navy outer canvas */
--surface-card: #FAFBFC; /* very light gray — info pop */
--surface-input: #FFFFFF; /* whitest, sits on top of card */
--surface-table-row: #FFFFFF;
--surface-table-row-alt: #F4F6FA;
--surface-muted: #F1F4F9;
--border-soft: #E5EAF2;
--border-emphasis: var(--cobalto-100);
/* Text inside cards stays dark (cards are bright); page-level text
flips to light because the page background is dark. */
--text-strong: var(--tinta); /* inside cards = dark */
--text-muted: var(--acero);
--text-on-page: #E8ECF2; /* directly on dark page = light */
--text-on-page-muted: #9BA8B9;
/* Stronger shadows so cards feel "lifted" off the dark page */
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50);
--bs-body-color: var(--text-on-page);
--bs-body-bg: var(--surface-page);
--bs-border-color: var(--border-soft);
}
/* ============================================================
RESET GLOBAL — fuerza consistencia sobre cualquier CSS legacy
============================================================ */
html, body {
background: var(--surface-page) !important;
background-color: var(--surface-page) !important;
background-image: none !important;
color: var(--text-on-page) !important;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0;
min-height: 100vh;
/* Smooth theme transition (300ms) */
transition: background-color 0.25s ease, color 0.2s ease;
}
* { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800;
letter-spacing: -0.4px;
color: var(--tinta);
line-height: 1.2;
}
h1, .h1 { font-size: 28px; font-weight: 900; letter-spacing: -1px; }
h2, .h2 { font-size: 22px; }
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--acero); }
a { color: var(--cobalto); text-decoration: none; }
a:hover { color: var(--cobalto-700); text-decoration: underline; }
/* ============================================================
BANNER DE VENCIMIENTO DE SUSCRIPCION
============================================================ */
.susc-banner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .25rem .5rem;
padding: .55rem 1.25rem;
font-size: .84rem;
font-weight: 500;
position: fixed;
top: var(--topbar-height);
left: 0;
right: 0;
z-index: 1040;
}
.susc-banner--proximo { background: #fff3cd; color: #664d03; border-bottom: 1px solid #ffc107; }
.susc-banner--vencido { background: #f8d7da; color: #58151c; border-bottom: 1px solid #f5c2c7; }
.susc-banner--critico { background: #dc3545; color: #fff; border-bottom: 1px solid #b02a37; }
.susc-banner-btn {
display: inline-flex;
align-items: center;
padding: .2rem .75rem;
border-radius: 20px;
font-size: .78rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.susc-banner--proximo .susc-banner-btn { background: #ffc107; color: #000; }
.susc-banner--vencido .susc-banner-btn { background: #dc3545; color: #fff; }
.susc-banner--critico .susc-banner-btn { background: #fff; color: #dc3545; }
/* Empujar contenido cuando hay banner visible */
body:has(.susc-banner--proximo),
body:has(.susc-banner--vencido),
body:has(.susc-banner--critico) {
padding-top: calc(var(--topbar-height) + 38px) !important;
}
/* ============================================================
LAYOUT — topbar fijo + sidebar fija + contenido empujado
============================================================ */
/* Scope to pages that render the app chrome (topbar+sidebar via includes/sidebar.php).
:has() lets login.php and standalone pages stay full-screen without conflicting padding. */
body:has(.app-topbar) { padding-top: var(--topbar-height) !important; }
@media (min-width: 992px) {
body:has(.app-topbar) { padding-left: var(--sidebar-width) !important; }
body:has(.app-topbar) .toggle-btn { display: none !important; }
}
@media (max-width: 991.98px) {
body:has(.app-topbar) { padding-left: 0 !important; }
}
.container, .container-fluid {
padding-left: 24px !important;
padding-right: 24px !important;
max-width: 100% !important;
}
.container-fluid > .row > .col-md-9,
.container-fluid > .row > .col-lg-10,
.col-md-9.main-content,
.col-lg-10.main-content {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-left: 0 !important;
padding: 0 !important;
}
.main-content { background: transparent !important; min-height: auto !important; }
/* ============================================================
APP TOPBAR — brand handshake, mirrors landing nav exactly
============================================================ */
.app-topbar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: var(--topbar-height) !important;
background: var(--cobalto) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
z-index: 1100 !important;
padding: 0 24px !important;
display: flex !important;
align-items: center !important;
}
.app-topbar-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.app-topbar-left {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.app-topbar-toggle {
display: none;
background: rgba(255, 255, 255, 0.08);
border: none;
color: #fff;
width: 36px; height: 36px;
border-radius: 8px;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
padding: 0;
}
.app-topbar-toggle:hover { background: rgba(255, 255, 255, 0.16); }
@media (max-width: 991.98px) { .app-topbar-toggle { display: inline-flex; } }
.app-topbar-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.app-topbar-logo svg { display: block; height: 26px; width: auto; }
.app-topbar-right {
display: flex;
align-items: center;
gap: 14px;
}
.app-topbar-link {
color: var(--cobalto-100) !important;
text-decoration: none !important;
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 500;
padding: 6px 8px;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
.app-topbar-link:hover { color: #fff !important; background: rgba(255, 255, 255, 0.06); text-decoration: none !important; }
@media (max-width: 640px) { .app-topbar-link.app-topbar-link--public { display: none; } }
.app-topbar-user { position: relative; }
.app-topbar-user-btn {
background: rgba(255, 255, 255, 0.08);
border: none;
color: #fff;
padding: 7px 13px;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background 0.15s;
}
.app-topbar-user-btn:hover { background: rgba(255, 255, 255, 0.16); }
.app-topbar-user-btn i { opacity: 0.85; }
/* Stack name + role vertically inside the button — name on top in
bold, role muted below in a smaller eyebrow. Replaces the awkward
"rol as disabled menu item" pattern from before. */
.app-topbar-user-text {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
max-width: 160px;
}
.app-topbar-user-name {
font-size: 13px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.app-topbar-user-role {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-top: 1px;
}
@media (max-width: 480px) { .app-topbar-user-text { display: none; } }
.app-topbar-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 200px;
background: var(--surface-card);
border: 1px solid var(--nube);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 6px;
display: none;
z-index: 1101;
}
.app-topbar-user.open .app-topbar-menu { display: block; }
.app-topbar-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 6px;
color: var(--tinta) !important;
text-decoration: none !important;
font-family: 'Roboto', sans-serif;
font-size: 13.5px;
font-weight: 500;
}
.app-topbar-menu a:hover { background: var(--niebla); text-decoration: none !important; }
.app-topbar-menu a i { color: var(--acero); width: 16px; }
.app-topbar-menu a.is-danger { color: var(--error) !important; }
.app-topbar-menu a.is-danger i { color: var(--error); }
.app-topbar-menu hr { margin: 4px 0; border: none; border-top: 1px solid var(--nube); }
/* ============================================================
SIDEBAR — fija, profesional, estilo Linear/Stripe
============================================================ */
.sidebar {
position: fixed !important;
top: var(--topbar-height) !important;
left: 0 !important;
bottom: 0 !important;
width: var(--sidebar-width) !important;
height: calc(100vh - var(--topbar-height)) !important;
background: var(--cobalto) !important;
background-image: none !important;
color: rgba(255, 255, 255, 0.85) !important;
z-index: 1030 !important;
overflow-y: auto !important;
overflow-x: hidden;
padding: 18px 14px !important;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04);
transition: transform 0.25s ease !important;
display: block !important;
min-height: auto !important;
border: none !important;
border-radius: 0 !important;
transform: translateX(0) !important;
}
@media (max-width: 991.98px) {
.sidebar { transform: translateX(-100%) !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25); }
.sidebar.open, .sidebar.active, .sidebar.show { transform: translateX(0) !important; }
}
/* The brand logo lives in .app-topbar now — hide the sidebar's duplicate header
on desktop to avoid two FutReserva logos stacked above each other. On mobile
we keep it because the topbar logo is small and the sidebar is full-height. */
.sidebar-header {
padding: 8px 12px 14px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
margin-bottom: 10px !important;
display: flex;
align-items: center;
justify-content: flex-end;
background: transparent !important;
}
.sidebar-header h2 { display: none !important; }
.sidebar-brand { display: none !important; }
/* Minimal sidebar header (logo lives in topbar). The eyebrow only shows
on mobile where the sidebar is full-height; on desktop the sidebar
header is mostly empty (just the close button), which keeps the focus
on the navigation list. */
.sidebar-eyebrow {
display: none;
font-family: 'Roboto', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 991.98px) {
.sidebar-header { justify-content: space-between; }
.sidebar-eyebrow { display: inline-flex; align-items: center; }
}
.sidebar .close-btn,
.sidebar #closeSidebar {
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, 0.4) !important;
font-size: 14px;
width: 28px; height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.sidebar .close-btn:hover { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }
@media (min-width: 992px) {
.sidebar .close-btn,
.sidebar #closeSidebar { display: none !important; }
}
.sidebar .nav { gap: 1px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; }
.sidebar .nav-item { list-style: none !important; }
.sidebar .nav-link {
display: flex !important;
align-items: center !important;
gap: 11px !important;
padding: 10px 12px !important;
color: rgba(255, 255, 255, 0.78) !important;
background: transparent !important;
border-radius: 8px !important;
font-family: 'Roboto', sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
text-decoration: none !important;
transition: all 0.12s !important;
margin: 1px 0 !important;
border: none !important;
}
.sidebar .nav-link i, .sidebar .nav-link svg {
width: 18px !important;
text-align: center;
font-size: 14px !important;
opacity: 0.85;
flex-shrink: 0;
}
.sidebar .nav-link:hover {
background: rgba(255, 255, 255, 0.06) !important;
color: #fff !important;
text-decoration: none !important;
}
.sidebar .nav-link.active {
background: var(--cobalto) !important;
color: var(--electrico) !important;
}
.sidebar .nav-link.active i, .sidebar .nav-link.active svg { color: var(--electrico) !important; opacity: 1; }
.sidebar .nav-link.text-danger {
color: rgba(255, 100, 120, 0.85) !important;
margin-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 14px !important;
border-radius: 0 !important;
}
.sidebar .nav-link.text-danger:hover { background: rgba(255, 59, 92, 0.1) !important; color: #fff !important; }
.sidebar .nav-section-label {
list-style: none !important;
padding: 16px 16px 4px !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.35) !important;
pointer-events: none;
user-select: none;
}
.sidebar .nav-section-label:first-child { padding-top: 8px !important; }
#overlay {
display: none;
position: fixed; inset: 0;
background: rgba(10, 23, 51, 0.45);
backdrop-filter: blur(2px);
z-index: 1029;
cursor: pointer;
}
#overlay.show, #overlay.active { display: block; }
@media (min-width: 992px) { #overlay { display: none !important; } }
/* ============================================================
TOGGLE BUTTON — sutil, solo mobile
============================================================ */
.toggle-btn,
#toggleSidebar {
position: fixed !important;
top: 14px !important;
left: 14px !important;
z-index: 1040 !important;
background: var(--surface-card) !important;
color: var(--cobalto) !important;
border: 1px solid var(--nube) !important;
width: 40px !important;
height: 40px !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
box-shadow: var(--shadow-md) !important;
font-size: 16px !important;
transition: all 0.15s;
padding: 0 !important;
}
.toggle-btn:hover, #toggleSidebar:hover { background: var(--cobalto) !important; color: var(--electrico) !important; }
/* Hide the legacy floating toggle when the new topbar is present — its own
.app-topbar-toggle takes over on mobile. */
body:has(.app-topbar) .toggle-btn,
body:has(.app-topbar) #toggleSidebar { display: none !important; }
/* ============================================================
PAGE TEMPLATE — single information hierarchy across every module
============================================================
Use this skeleton on every page so the customer feels one product:
<- 24px gutter, 1280 max
<- optional
<- optional, list pages
<- main content block
...
Hierarchy ranks (never invent new ones):
eyebrow -> Montserrat 800, 11px, electric, +2.5 letter-spacing
title -> Montserrat 900, 28px, white on cobalto
subtitle -> Roboto 500, 15px, cobalto-100
section -> Montserrat 800, 16px, tinta
meta -> Montserrat 600, 11px, acero, +1 letter-spacing, uppercase
body -> Roboto 400, 14px, tinta
============================================================ */
.page {
padding: 24px;
max-width: 1320px;
margin: 0 auto;
}
@media (max-width: 768px) { .page { padding: 16px; } }
.page-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
background: var(--cobalto) !important;
background-image: none !important;
border-radius: 16px !important;
padding: 28px 32px !important;
margin: 0 0 24px !important;
position: relative !important;
overflow: hidden !important;
border: none !important;
color: #fff !important;
flex-wrap: wrap;
}
.page-header::before {
content: "";
position: absolute;
right: -60px; top: -30px;
width: 280px; height: 180px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: right top;
opacity: 0.07;
transform: rotate(-12deg);
pointer-events: none;
z-index: 1;
}
.page-header > * { position: relative; z-index: 2; }
.page-header-content { min-width: 0; flex: 1 1 auto; }
.page-eyebrow {
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
color: var(--electrico) !important;
margin: 0 0 8px !important;
display: inline-block;
}
.page-title,
.page-header h1 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: 28px !important;
letter-spacing: -0.8px !important;
color: #fff !important;
margin: 0 0 6px !important;
line-height: 1.15 !important;
}
@media (max-width: 768px) {
.page-title, .page-header h1 { font-size: 22px !important; }
.page-header { padding: 22px 22px !important; gap: 16px !important; }
}
.page-subtitle,
.page-header p {
font-family: 'Roboto', sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
color: var(--cobalto-100) !important;
margin: 0 !important;
line-height: 1.5 !important;
}
.page-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex-shrink: 0;
}
/* In-header buttons. .btn-electrico stays the primary CTA brand mark.
.btn-page-back / .btn-page-secondary are translucent on cobalto. */
.btn-page-back,
.btn-page-secondary,
.page-actions .btn-outline-light {
background: rgba(255, 255, 255, 0.08) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 13px !important;
padding: 9px 16px !important;
border-radius: 8px !important;
}
.btn-page-back:hover,
.btn-page-secondary:hover,
.page-actions .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(255, 255, 255, 0.4) !important;
color: #fff !important;
}
.page-actions .btn-electrico {
background: var(--electrico) !important;
color: var(--cobalto) !important;
border: none !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 13px !important;
padding: 9px 16px !important;
border-radius: 8px !important;
}
.page-actions .btn-electrico:hover {
background: var(--electrico-600) !important;
transform: translateY(-1px);
}
/* ---------- PAGE FILTERS — search/select bar below header ---------- */
.page-filters {
background: var(--surface-card);
border: 1px solid var(--nube);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 24px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px 16px;
}
.page-filter-label {
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--acero);
margin: 0 0 6px;
display: block;
}
.page-filters .form-control,
.page-filters .form-select {
border-radius: 8px !important;
}
/* ---------- PAGE TABS — sub-navigation under page-header
Used for modules with multiple sub-sections (e.g. Churrasqueras has
Parrillas + Paquetes). Sits visually between the page-header and the
content; the active tab inherits the brand cobalto + electrico
accent so the user always knows where they are. ---------- */
.page-tabs {
display: flex;
align-items: center;
gap: 4px;
padding: 0;
margin: -8px 0 24px;
border-bottom: 1px solid var(--border-soft);
flex-wrap: wrap;
}
.page-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 18px;
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s, background 0.15s;
white-space: nowrap;
}
.page-tab:hover {
color: var(--cobalto);
background: var(--surface-muted);
text-decoration: none;
}
.page-tab--active {
color: var(--cobalto);
border-bottom-color: var(--electrico);
font-weight: 700;
}
.page-tab--active:hover {
background: transparent;
}
@media (max-width: 520px) {
.page-tab { padding: 10px 12px; font-size: 12px; }
}
/* ---------- KPI GRID — top-of-page stats only ---------- */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
/* ---------- PAGE SECTION — every block of content lives in one ---------- */
.page-section {
background: var(--surface-card);
border: 1px solid var(--nube);
border-radius: 14px;
margin-bottom: 24px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.page-section-header {
padding: 16px 22px;
border-bottom: 1px solid var(--nube);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.page-section-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 16px !important;
color: var(--tinta) !important;
margin: 0 !important;
letter-spacing: -0.2px;
}
.page-section-meta {
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--acero);
}
.page-section-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.page-section-body {
padding: 18px 22px;
}
.page-section--flush .page-section-body { padding: 0; }
.page-section--flush table { margin-bottom: 0 !important; }
/* ---------- BACKWARD COMPAT — legacy header classes map to .page-header ---------- */
.welcome-header,
.module-header { /* CSS rules below repeat for legacy markup, kept for back-compat */ }
/* ============================================================
PAGE HEADER (encabezado de cada módulo)
============================================================ */
.welcome-header,
.page-header,
.module-header {
background: var(--cobalto) !important;
background-image: none !important;
color: #fff !important;
border-radius: 14px !important;
padding: 24px 28px !important;
margin: 24px 0 24px !important;
position: relative !important;
overflow: hidden !important;
border: none !important;
}
.welcome-header::before,
.page-header::before,
.module-header::before {
content: "";
position: absolute;
right: -40px; top: -20px;
width: 240px; height: 160px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: 0.06;
transform: rotate(-12deg);
pointer-events: none;
}
.welcome-header > *, .page-header > *, .module-header > * { position: relative; z-index: 2; }
.welcome-header h1, .welcome-header h2, .welcome-header h3,
.page-header h1, .page-header h2, .page-header h3,
.module-header h1, .module-header h2, .module-header h3 {
color: #fff !important;
margin: 0 0 4px !important;
font-weight: 900 !important;
letter-spacing: -0.6px !important;
}
.welcome-header h1, .page-header h1, .module-header h1 { font-size: 24px !important; }
.welcome-header p, .page-header p, .module-header p {
color: var(--cobalto-100) !important;
font-size: 14px !important;
margin: 0 !important;
}
/* Headers verdes/cyan/violeta legacy → cobalto */
.bg-success.text-white,
.bg-info.text-white,
.bg-primary.text-white {
background: var(--cobalto) !important;
color: #fff !important;
}
/* Page title bars compactas (variante alternativa) */
.user-badge,
.usuario-badge {
background: rgba(232, 255, 53, 0.15) !important;
color: var(--electrico) !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
padding: 4px 9px !important;
border-radius: 5px !important;
margin-left: 8px;
vertical-align: middle;
display: inline-block;
}
/* ============================================================
STATS CARDS — sistema unificado
============================================================ */
.stats-card,
.stat-card {
background: var(--cobalto) !important;
background-image: none !important;
border: none !important;
border-radius: 14px !important;
color: #fff !important;
padding: 20px 22px !important;
box-shadow: var(--shadow-md) !important;
transition: transform 0.2s, box-shadow 0.2s !important;
position: relative;
overflow: hidden;
min-height: 110px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stats-card:hover, .stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg) !important;
}
.stats-card.bg-primary, .stat-card.bg-primary,
.stats-card.bg-gradient-primary { background: var(--cobalto) !important; color: #fff !important; }
.stats-card.bg-success, .stat-card.bg-success,
.stats-card.bg-gradient-success { background: var(--exito) !important; color: #fff !important; }
.stats-card.bg-warning, .stat-card.bg-warning,
.stats-card.bg-gradient-warning { background: var(--aviso) !important; color: #fff !important; }
.stats-card.bg-info, .stat-card.bg-info,
.stats-card.bg-gradient-info { background: var(--cobalto-700) !important; color: #fff !important; }
.stats-card.bg-danger, .stat-card.bg-danger,
.stats-card.bg-gradient-danger { background: var(--error) !important; color: #fff !important; }
/* Forzar TODO el texto interno blanco */
.stats-card *, .stat-card *,
.stats-card h1, .stats-card h2, .stats-card h3, .stats-card h4, .stats-card h5,
.stats-card p, .stats-card small, .stats-card span, .stats-card .text-uppercase,
.stat-card h1, .stat-card h2, .stat-card h3, .stat-card h4, .stat-card h5,
.stat-card p, .stat-card small, .stat-card span, .stat-card .text-uppercase {
color: #fff !important;
}
.stats-card .text-uppercase, .stats-card small,
.stat-card .text-uppercase, .stat-card small {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
opacity: 0.9;
}
.stats-card h1, .stats-card h2, .stats-card h3, .stats-card h4,
.stat-card h1, .stat-card h2, .stat-card h3, .stat-card h4 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: 28px !important;
letter-spacing: -1px !important;
line-height: 1.1 !important;
margin: 6px 0 4px !important;
}
.stats-card .stats-icon, .stats-card .icon,
.stat-card .stats-icon, .stat-card .icon {
font-size: 22px !important;
opacity: 0.55 !important;
position: absolute;
top: 18px;
right: 18px;
}
.stats-card .badge, .stat-card .badge {
background: rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
font-weight: 700 !important;
}
/* ============================================================
NAVBAR (en páginas que aún la usan)
============================================================ */
.navbar.bg-primary {
background: var(--cobalto) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 12px 0;
}
.navbar-brand .brand-svg { display: block; height: 26px; width: auto; }
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.85) !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
padding: 8px 14px !important;
border-radius: 6px;
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active {
color: #fff !important;
background: rgba(255, 255, 255, 0.08);
}
.dropdown-menu {
border: 1px solid var(--nube);
border-radius: 10px;
box-shadow: var(--shadow-md);
padding: 6px;
font-size: 14px;
}
.dropdown-item {
border-radius: 6px;
padding: 8px 12px;
color: var(--tinta);
font-weight: 500;
}
.dropdown-item:hover { background: var(--cobalto-50); color: var(--cobalto); }
/* ============================================================
BOTONES
============================================================ */
.btn {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
padding: 9px 18px !important;
border-radius: 8px !important;
letter-spacing: -0.1px;
transition: all 0.15s;
border-width: 1px;
line-height: 1.4;
}
.btn-lg { padding: 13px 22px !important; font-size: 15px !important; }
.btn-sm { padding: 6px 12px !important; font-size: 12.5px !important; }
.btn-primary,
.btn.btn-primary {
background-color: var(--cobalto) !important;
border-color: var(--cobalto) !important;
color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: var(--cobalto-700) !important;
border-color: var(--cobalto-700) !important;
color: #fff !important;
}
.btn-success {
background-color: var(--exito) !important;
border-color: var(--exito) !important;
color: #fff !important;
}
.btn-success:hover { background-color: #0a8c4d !important; border-color: #0a8c4d !important; }
.btn-danger {
background-color: var(--error) !important;
border-color: var(--error) !important;
color: #fff !important;
}
.btn-warning {
background-color: var(--aviso) !important;
border-color: var(--aviso) !important;
color: #4A2D00 !important;
}
.btn-info {
background-color: var(--cobalto-700) !important;
border-color: var(--cobalto-700) !important;
color: #fff !important;
}
.btn-info:hover { background-color: var(--cobalto-900) !important; border-color: var(--cobalto-900) !important; }
.btn-outline-primary {
color: var(--cobalto) !important;
border-color: var(--cobalto) !important;
background: transparent !important;
}
.btn-outline-primary:hover { background: var(--cobalto) !important; color: #fff !important; }
.btn-outline-success { color: var(--exito) !important; border-color: var(--exito) !important; }
.btn-outline-success:hover { background: var(--exito) !important; color: #fff !important; }
.btn-outline-danger { color: var(--error) !important; border-color: var(--error) !important; }
.btn-outline-danger:hover { background: var(--error) !important; color: #fff !important; }
.btn-outline-secondary {
color: var(--acero) !important;
border-color: var(--nube) !important;
background: var(--surface-card) !important;
}
.btn-outline-secondary:hover { background: var(--niebla) !important; color: var(--tinta) !important; }
.btn-electrico {
background: var(--electrico) !important;
border-color: var(--electrico) !important;
color: var(--cobalto) !important;
font-weight: 800 !important;
}
.btn-electrico:hover { background: var(--electrico-700) !important; color: #fff !important; }
.btn-whatsapp { background: var(--whatsapp) !important; border-color: var(--whatsapp) !important; color: #fff !important; }
.btn-whatsapp:hover { background: #128C7E !important; }
/* Iconos de acción en tablas (editar/eliminar/ver) — uniformes */
.btn.btn-sm i, .btn.btn-sm .fas, .btn.btn-sm .bi { font-size: 13px; }
/* ============================================================
CARDS
============================================================ */
.card {
background: var(--surface-card) !important;
background-image: none !important;
border: 1px solid var(--nube) !important;
border-radius: 14px !important;
box-shadow: var(--shadow-sm) !important;
margin-bottom: 16px;
}
.card-header {
background: var(--surface-card) !important;
background-image: none !important;
border-bottom: 1px solid var(--nube) !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
color: var(--tinta) !important;
padding: 16px 20px !important;
border-radius: 14px 14px 0 0 !important;
font-size: 15px;
}
.card-body { padding: 20px !important; }
.card-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
color: var(--tinta) !important;
}
.table-card { border-radius: 14px !important; box-shadow: var(--shadow-md) !important; border: 1px solid var(--nube) !important; }
/* ============================================================
FORMS
============================================================ */
.form-label {
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 13px !important;
color: var(--tinta) !important;
margin-bottom: 6px !important;
}
.form-control, .form-select {
border: 1px solid var(--border-soft) !important;
border-radius: 8px !important;
padding: 10px 14px !important;
font-size: 14px !important;
color: var(--text-strong) !important;
background: var(--surface-input) !important;
font-family: 'Roboto', sans-serif !important;
transition: border-color 0.15s, box-shadow 0.15s, background 0.2s, color 0.2s;
}
.form-control::placeholder, .form-select::placeholder {
color: var(--text-muted) !important;
opacity: 0.7;
}
.form-control:focus, .form-select:focus {
border-color: var(--cobalto) !important;
box-shadow: 0 0 0 3px rgba(0, 47, 135, 0.1) !important;
outline: 0 !important;
}
.form-control::placeholder { color: var(--acero) !important; opacity: 0.6 !important; }
.input-group-text {
background: var(--niebla) !important;
border: 1px solid var(--nube) !important;
color: var(--acero) !important;
font-size: 13px !important;
}
textarea.form-control { min-height: 90px; }
/* Form check (radio/checkbox) */
.form-check-input:checked { background-color: var(--cobalto) !important; border-color: var(--cobalto) !important; }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(0, 47, 135, 0.1) !important; }
/* Botones tipo "selector" (Duración, Forma de pago) */
.btn-check + .btn-outline-success,
.btn-check + .btn-outline-primary {
background: var(--surface-card) !important;
border: 1px solid var(--nube) !important;
color: var(--tinta) !important;
}
.btn-check:checked + .btn-outline-success,
.btn-check:checked + .btn-outline-primary {
background: var(--cobalto) !important;
border-color: var(--cobalto) !important;
color: #fff !important;
}
/* ============================================================
TABLES
============================================================ */
.table {
--bs-table-color: var(--tinta);
--bs-table-bg: #fff;
--bs-table-border-color: var(--nube);
margin-bottom: 0 !important;
font-family: 'Roboto', sans-serif !important;
}
.table > thead {
background: var(--niebla) !important;
}
.table > thead > tr > th {
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
color: var(--acero) !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
padding: 12px 14px !important;
border-bottom: 1px solid var(--nube) !important;
white-space: nowrap;
background: var(--niebla) !important;
}
.table > tbody > tr > td {
padding: 13px 14px !important;
font-size: 14px !important;
vertical-align: middle !important;
border-bottom: 1px solid var(--nube) !important;
}
.table-hover > tbody > tr:hover > * { background: var(--cobalto-50) !important; }
/* DataTables wrappers */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
border: 1px solid var(--nube) !important;
border-radius: 8px !important;
padding: 6px 12px !important;
font-size: 13px !important;
color: var(--tinta) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 6px !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 13px !important;
padding: 6px 12px !important;
margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: var(--cobalto) !important;
color: #fff !important;
border-color: var(--cobalto) !important;
}
/* ============================================================
BADGES
============================================================ */
.badge {
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
padding: 5px 10px !important;
border-radius: 6px !important;
text-transform: uppercase !important;
vertical-align: middle;
}
.badge.bg-primary { background: var(--cobalto-50) !important; color: var(--cobalto) !important; }
.badge.bg-success { background: var(--exito-bg) !important; color: var(--exito-text) !important; }
.badge.bg-warning { background: var(--aviso-bg) !important; color: var(--aviso-text) !important; }
.badge.bg-danger { background: var(--error-bg) !important; color: var(--error-text) !important; }
.badge.bg-info { background: var(--info-bg) !important; color: var(--info-text) !important; }
.badge.bg-secondary { background: var(--niebla) !important; color: var(--acero) !important; }
.badge-electrico { background: var(--electrico) !important; color: var(--cobalto) !important; font-weight: 800 !important; }
/* ============================================================
ALERTS
============================================================ */
.alert {
border: 1px solid transparent !important;
border-radius: 10px !important;
padding: 14px 18px !important;
font-size: 14px !important;
font-family: 'Roboto', sans-serif !important;
}
.alert-primary { background: var(--cobalto-50) !important; border-color: var(--cobalto-100) !important; color: var(--cobalto) !important; }
.alert-success { background: var(--exito-bg) !important; border-color: #BBF7D0 !important; color: var(--exito-text) !important; }
.alert-warning { background: var(--aviso-bg) !important; border-color: #FDE68A !important; color: var(--aviso-text) !important; }
.alert-danger { background: var(--error-bg) !important; border-color: #FECACA !important; color: var(--error-text) !important; }
.alert-info { background: var(--info-bg) !important; border-color: #BFDBFE !important; color: var(--info-text) !important; }
/* ============================================================
FOOTER
============================================================ */
footer.bg-dark, footer {
background: var(--cobalto-900) !important;
color: var(--cobalto-100) !important;
padding: 24px !important;
margin-top: 48px;
font-size: 13px;
}
footer a { color: var(--electrico) !important; }
/* ============================================================
MODALS
============================================================ */
.modal-content {
border: none !important;
border-radius: 14px !important;
box-shadow: 0 24px 60px rgba(10, 23, 51, 0.25) !important;
}
.modal-header {
border-bottom: 1px solid var(--nube) !important;
padding: 18px 22px !important;
}
.modal-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
color: var(--tinta) !important;
}
.modal-body { padding: 22px !important; font-family: 'Roboto', sans-serif !important; }
.modal-footer { border-top: 1px solid var(--nube) !important; padding: 16px 22px !important; }
/* ============================================================
AUTH PAGES (login)
============================================================ */
.auth-page {
min-height: 100vh;
background: var(--cobalto) !important;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
position: relative;
overflow: hidden;
}
.auth-page::before {
content: "";
position: absolute;
left: -120px; bottom: -80px;
width: 540px; height: 280px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: 0.06;
pointer-events: none;
}
/* ============================================================
UTILS
============================================================ */
.text-cobalto { color: var(--cobalto) !important; }
.text-electrico { color: var(--electrico) !important; }
.text-acero { color: var(--acero) !important; }
.text-success-brand { color: var(--exito) !important; }
.text-danger-brand { color: var(--error) !important; }
.bg-cobalto { background: var(--cobalto) !important; color: #fff !important; }
.bg-electrico { background: var(--electrico) !important; color: var(--cobalto) !important; }
.bg-niebla { background: var(--niebla) !important; }
.bg-nieve { background: var(--nieve) !important; }
/* Forzar Montserrat en headings de cualquier color */
.text-success > h1, .text-success > h2, .text-success > h3,
.text-info > h1, .text-info > h2, .text-info > h3,
.text-warning > h1, .text-warning > h2, .text-warning > h3 {
color: inherit !important;
}
/* Eliminar fondos purple/violeta legacy */
[style*="background: linear-gradient(135deg, #667eea"],
[style*="background: linear-gradient(135deg, #764ba2"],
[style*="667eea"],
[style*="764ba2"] {
background: var(--cobalto) !important;
background-image: none !important;
color: #fff !important;
}
/* ============================================================
BACKWARD COMPAT — color mappings legacy
============================================================ */
:root {
--primary: var(--cobalto);
--secondary: var(--pizarra);
--success: var(--exito);
--warning: var(--aviso);
--danger: var(--error);
--info: var(--cobalto-700);
--primary-color: var(--cobalto);
--secondary-color: var(--cobalto-700);
--verde-primario: var(--cobalto);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.stats-card h1, .stats-card h2, .stats-card h3,
.stat-card h1, .stat-card h2, .stat-card h3 { font-size: 22px !important; }
.welcome-header, .page-header { padding: 20px 22px !important; }
.welcome-header h1, .page-header h1 { font-size: 20px !important; }
.container, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
}
/* ============================================================
DARK THEME — component-level overrides
Pattern: dark outer canvas, light cards. Almost every component
keeps its light-mode styling automatically because it sits inside
.page-section / .card / .stats-card / .modal-content — all of
which still render on a light surface in dark mode. The
.page-header has its OWN fixed cobalto background + white text,
so it works in both themes without intervention.
============================================================ */
/* Cards "lift" off the dark canvas with a real shadow. In light mode
the elevation is subtle; in dark, it matters more for visual
hierarchy so the eye registers each card as its own surface. */
:root[data-theme="dark"] .page-section,
:root[data-theme="dark"] .page-filters,
:root[data-theme="dark"] .card {
box-shadow: var(--shadow-md);
}
/* The user-menu dropdown that opens from the topbar — light card
floating over the dark cobalto topbar. Stronger shadow makes it
feel detached from the bar. */
:root[data-theme="dark"] .app-topbar-menu {
box-shadow: var(--shadow-lg);
}
/* Theme toggle button in the topbar — distinct from app-topbar-link
so it can show as a circular icon button. Sun/moon swap based on
data-theme so it always shows the OPPOSITE icon (the action). */
.app-topbar-theme {
background: rgba(255, 255, 255, 0.08);
border: none;
color: #fff;
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
padding: 0;
transition: background 0.15s, transform 0.15s;
}
.app-topbar-theme:hover {
background: rgba(232, 255, 53, 0.15);
transform: rotate(-15deg);
}
.app-topbar-theme .icon-sun { display: none; }
.app-topbar-theme .icon-moon { display: inline-block; }
:root[data-theme="dark"] .app-topbar-theme .icon-sun { display: inline-block; }
:root[data-theme="dark"] .app-topbar-theme .icon-moon { display: none; }
/* ============================================================
DEMO MODE — entrance animations for screen recordings
Activated by adding `is-demo-mode` to . Only fires the
first paint on each page load (or replay). Zero impact when
demo is OFF since the selectors are scoped under the body class.
Pattern: every primary block fades in from below with a small
stagger. Numbers are animated separately via demo-mode.js.
============================================================ */
@keyframes fr-demo-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fr-demo-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fr-demo-slide-right {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
/* Reduce motion for users who set the OS preference, even in demo. */
@media (prefers-reduced-motion: reduce) {
body.is-demo-mode * { animation: none !important; }
}
/* Page chrome arrives first, biggest hierarchy element. */
body.is-demo-mode .page-header {
animation: fr-demo-rise 0.55s ease-out backwards;
}
/* KPI cards stagger left → right. The :nth-child delays make the
cards "land" sequentially while the numbers count up inside them. */
body.is-demo-mode .kpi-grid > * {
animation: fr-demo-rise 0.55s ease-out backwards;
}
body.is-demo-mode .kpi-grid > :nth-child(1) { animation-delay: 0.10s; }
body.is-demo-mode .kpi-grid > :nth-child(2) { animation-delay: 0.20s; }
body.is-demo-mode .kpi-grid > :nth-child(3) { animation-delay: 0.30s; }
body.is-demo-mode .kpi-grid > :nth-child(4) { animation-delay: 0.40s; }
body.is-demo-mode .kpi-grid > :nth-child(5) { animation-delay: 0.50s; }
/* Page tabs (e.g. Churrasqueras) ride in from the left after the header. */
body.is-demo-mode .page-tabs {
animation: fr-demo-slide-right 0.45s ease-out 0.55s backwards;
}
/* Filter row + page-section blocks come in after the KPI cards. */
body.is-demo-mode .page-filters {
animation: fr-demo-rise 0.55s ease-out 0.65s backwards;
}
body.is-demo-mode .page-section,
body.is-demo-mode .page-section-wrap > .page-section {
animation: fr-demo-rise 0.55s ease-out 0.80s backwards;
}
/* Table rows stagger in last so the user can SEE rows materialise.
We cap at :nth-child(12) so massive tables don't take forever; the
rest of the rows appear at the same delay as the 12th. */
body.is-demo-mode .page-section table tbody tr {
animation: fr-demo-rise 0.40s ease-out backwards;
}
body.is-demo-mode .page-section table tbody tr:nth-child(1) { animation-delay: 0.95s; }
body.is-demo-mode .page-section table tbody tr:nth-child(2) { animation-delay: 1.05s; }
body.is-demo-mode .page-section table tbody tr:nth-child(3) { animation-delay: 1.15s; }
body.is-demo-mode .page-section table tbody tr:nth-child(4) { animation-delay: 1.25s; }
body.is-demo-mode .page-section table tbody tr:nth-child(5) { animation-delay: 1.35s; }
body.is-demo-mode .page-section table tbody tr:nth-child(6) { animation-delay: 1.45s; }
body.is-demo-mode .page-section table tbody tr:nth-child(7) { animation-delay: 1.55s; }
body.is-demo-mode .page-section table tbody tr:nth-child(8) { animation-delay: 1.65s; }
body.is-demo-mode .page-section table tbody tr:nth-child(9) { animation-delay: 1.75s; }
body.is-demo-mode .page-section table tbody tr:nth-child(10) { animation-delay: 1.85s; }
body.is-demo-mode .page-section table tbody tr:nth-child(11) { animation-delay: 1.95s; }
body.is-demo-mode .page-section table tbody tr:nth-child(n+12) { animation-delay: 2.05s; }
/* cancha.php (public booking widget) — animate hero, then the reserva block.
The cancha picker / day picker / slot grid render their children with
their own internal stagger so this only handles the section-level fade. */
body.is-demo-mode section.hero {
animation: fr-demo-rise 0.6s ease-out backwards;
}
body.is-demo-mode section.reserva {
animation: fr-demo-rise 0.6s ease-out 0.4s backwards;
}
body.is-demo-mode .cancha-picker > * {
animation: fr-demo-rise 0.45s ease-out backwards;
}
body.is-demo-mode .cancha-picker > :nth-child(1) { animation-delay: 0.7s; }
body.is-demo-mode .cancha-picker > :nth-child(2) { animation-delay: 0.78s; }
body.is-demo-mode .cancha-picker > :nth-child(3) { animation-delay: 0.86s; }
body.is-demo-mode .cancha-picker > :nth-child(4) { animation-delay: 0.94s; }
body.is-demo-mode .cancha-picker > :nth-child(n+5) { animation-delay: 1.0s; }
body.is-demo-mode .day-picker > * {
animation: fr-demo-rise 0.4s ease-out backwards;
}
body.is-demo-mode .day-picker > :nth-child(1) { animation-delay: 1.05s; }
body.is-demo-mode .day-picker > :nth-child(2) { animation-delay: 1.10s; }
body.is-demo-mode .day-picker > :nth-child(3) { animation-delay: 1.15s; }
body.is-demo-mode .day-picker > :nth-child(4) { animation-delay: 1.20s; }
body.is-demo-mode .day-picker > :nth-child(5) { animation-delay: 1.25s; }
body.is-demo-mode .day-picker > :nth-child(6) { animation-delay: 1.30s; }
body.is-demo-mode .day-picker > :nth-child(7) { animation-delay: 1.35s; }
body.is-demo-mode .slots > * {
animation: fr-demo-fade 0.35s ease-out backwards;
}
/* Slots cascade quickly (40ms apart) — they're small and many. */
body.is-demo-mode .slots > :nth-child(1) { animation-delay: 1.45s; }
body.is-demo-mode .slots > :nth-child(2) { animation-delay: 1.49s; }
body.is-demo-mode .slots > :nth-child(3) { animation-delay: 1.53s; }
body.is-demo-mode .slots > :nth-child(4) { animation-delay: 1.57s; }
body.is-demo-mode .slots > :nth-child(5) { animation-delay: 1.61s; }
body.is-demo-mode .slots > :nth-child(6) { animation-delay: 1.65s; }
body.is-demo-mode .slots > :nth-child(7) { animation-delay: 1.69s; }
body.is-demo-mode .slots > :nth-child(8) { animation-delay: 1.73s; }
body.is-demo-mode .slots > :nth-child(9) { animation-delay: 1.77s; }
body.is-demo-mode .slots > :nth-child(10) { animation-delay: 1.81s; }
body.is-demo-mode .slots > :nth-child(n+11){ animation-delay: 1.85s; }
/* ============================================================
DASHBOARD-SPECIFIC DEMO PACING
The default demo timings (above) are tight (~100ms staggers) so
normal listar pages feel snappy. The dashboard is the showcase
page for the recording, so we slow it down to 2 SECONDS between
visual lines: header → KPIs → "Mi pagina publica" → "Proximas
reservas". Each line lands clearly before the next, giving the
editor breathing room to cut.
============================================================ */
body.is-demo-mode.is-dashboard-demo .page-header {
animation: fr-demo-rise 0.7s ease-out 0s backwards;
}
/* KPI grid line — t=2s. Cards within still micro-stagger 120ms. */
body.is-demo-mode.is-dashboard-demo .kpi-grid > * {
animation: fr-demo-rise 0.6s ease-out backwards;
}
body.is-demo-mode.is-dashboard-demo .kpi-grid > :nth-child(1) { animation-delay: 2.00s; }
body.is-demo-mode.is-dashboard-demo .kpi-grid > :nth-child(2) { animation-delay: 2.12s; }
body.is-demo-mode.is-dashboard-demo .kpi-grid > :nth-child(3) { animation-delay: 2.24s; }
body.is-demo-mode.is-dashboard-demo .kpi-grid > :nth-child(4) { animation-delay: 2.36s; }
body.is-demo-mode.is-dashboard-demo .kpi-grid > :nth-child(5) { animation-delay: 2.48s; }
/* "Mi pagina publica" widget — t=4s. It's the only .page-section.mb-3
that lives directly under main.page on the dashboard. */
body.is-demo-mode.is-dashboard-demo main.page > .page-section.mb-3 {
animation: fr-demo-rise 0.6s ease-out 4.0s backwards;
}
/* "Proximas reservas" section — t=6s. Lives inside the .row.g-3 grid. */
body.is-demo-mode.is-dashboard-demo main.page > .row > .col-12 > .page-section {
animation: fr-demo-rise 0.6s ease-out 6.0s backwards;
}
/* Override the default table-row stagger so dashboard rows wait until
the section has finished landing (6.0s + 0.6s = 6.6s start). */
body.is-demo-mode.is-dashboard-demo main.page > .row .page-section table tbody tr {
animation: fr-demo-rise 0.4s ease-out backwards;
}
body.is-demo-mode.is-dashboard-demo main.page > .row .page-section table tbody tr:nth-child(1) { animation-delay: 6.70s; }
body.is-demo-mode.is-dashboard-demo main.page > .row .page-section table tbody tr:nth-child(2) { animation-delay: 6.85s; }
body.is-demo-mode.is-dashboard-demo main.page > .row .page-section table tbody tr:nth-child(3) { animation-delay: 7.00s; }
body.is-demo-mode.is-dashboard-demo main.page > .row .page-section table tbody tr:nth-child(4) { animation-delay: 7.15s; }
body.is-demo-mode.is-dashboard-demo main.page > .row .page-section table tbody tr:nth-child(5) { animation-delay: 7.30s; }
body.is-demo-mode.is-dashboard-demo main.page > .row .page-section table tbody tr:nth-child(6) { animation-delay: 7.45s; }
body.is-demo-mode.is-dashboard-demo main.page > .row .page-section table tbody tr:nth-child(7) { animation-delay: 7.60s; }
body.is-demo-mode.is-dashboard-demo main.page > .row .page-section table tbody tr:nth-child(8) { animation-delay: 7.75s; }
body.is-demo-mode.is-dashboard-demo main.page > .row .page-section table tbody tr:nth-child(n+9){ animation-delay: 7.90s; }
/* Floating "Repetir" button */
#fr-demo-replay {
position: fixed;
bottom: 86px; /* sits above the WhatsApp FAB */
right: 20px;
z-index: 9998;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: var(--cobalto);
color: #fff;
border: none;
border-radius: 999px;
font-family: 'Roboto', sans-serif;
font-weight: 600;
font-size: 12px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(0, 47, 135, 0.35);
transition: transform 0.15s, box-shadow 0.15s;
}
#fr-demo-replay:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0, 47, 135, 0.45);
}
#fr-demo-replay svg { flex-shrink: 0; }
@media (max-width: 520px) {
#fr-demo-replay { right: 14px; bottom: 78px; padding: 9px 11px; }
#fr-demo-replay span { display: none; }
}
/* ============================================================
PRINT
============================================================ */
@media print {
body { padding-left: 0 !important; }
.navbar, .sidebar, .toggle-btn, footer, .no-print, #overlay { display: none !important; }
/* Force white in print regardless of theme — paper is always white */
body { background: #fff !important; color: #000 !important; }
:root[data-theme="dark"] { color-scheme: light !important; }
}