:root {
    /* Tema Principal por Defecto: Esmeralda & Grafito */
    --primary: #059669;
    --primary-hover: #047857;
    --primary-soft: rgba(16, 185, 129, 0.14);
    --primary-text: #059669;
    --sidebar-bg: #071f18;
    --sidebar-border: #0f3529;
    --app-bg: #f3f6f4;
    --card-bg: #ffffff;
    --card-border: #dce5e0;
    --input-bg: #f8faf9;
    --text-main: #111827;
    --text-muted: #5f6f65;
}

[data-theme="terracotta"] {
    --primary: #ea580c;
    --primary-hover: #c2410c;
    --primary-soft: rgba(234, 88, 12, 0.14);
    --primary-text: #ea580c;
    --sidebar-bg: #23140d;
    --sidebar-border: #3b2318;
    --app-bg: #faf6f3;
    --card-bg: #ffffff;
    --card-border: #eadcd3;
    --input-bg: #fdfaf8;
    --text-main: #1c1917;
    --text-muted: #78716c;
}

[data-theme="ocean"] {
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --primary-soft: rgba(2, 132, 199, 0.14);
    --primary-text: #0284c7;
    --sidebar-bg: #082032;
    --sidebar-border: #123752;
    --app-bg: #f0f6fa;
    --card-bg: #ffffff;
    --card-border: #d5e4ef;
    --input-bg: #f7fbfe;
    --text-main: #0f172a;
    --text-muted: #52667a;
}

[data-theme="coral"] {
    --primary: #e11d48;
    --primary-hover: #be123c;
    --primary-soft: rgba(225, 29, 72, 0.14);
    --primary-text: #e11d48;
    --sidebar-bg: #240b15;
    --sidebar-border: #3d1424;
    --app-bg: #faf3f5;
    --card-bg: #ffffff;
    --card-border: #ebd8de;
    --input-bg: #fdf8fa;
    --text-main: #1f1216;
    --text-muted: #755b63;
}

[data-theme="dark"] {
    --primary: #10b981;
    --primary-hover: #059669;
    --primary-soft: rgba(16, 185, 129, 0.18);
    --primary-text: #34d399;
    --sidebar-bg: #090d16;
    --sidebar-border: #1e293b;
    --app-bg: #0f172a;
    --card-bg: #1e293b;
    --card-border: #334155;
    --input-bg: #0f172a;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
}

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--app-bg);
    color: var(--text-main);
    overscroll-behavior-y: contain;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Clases utilitarias vinculadas a las variables CSS del tema */
.theme-sidebar {
    background-color: var(--sidebar-bg);
    border-color: var(--sidebar-border);
}
.theme-sidebar-border {
    border-color: var(--sidebar-border);
}
.theme-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-main);
}
.theme-input {
    background-color: var(--input-bg);
    border-color: var(--card-border);
    color: var(--text-main);
}
.theme-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-soft);
}
.theme-text-main {
    color: var(--text-main);
}
.theme-text-muted {
    color: var(--text-muted);
}
.theme-btn-primary {
    background-color: var(--primary);
    color: #ffffff;
}
.theme-btn-primary:hover {
    background-color: var(--primary-hover);
}
.theme-btn-soft {
    background-color: var(--primary-soft);
    color: var(--primary-text);
}
.theme-text-primary {
    color: var(--primary-text);
}
.theme-border-primary {
    border-color: var(--primary);
}
.theme-divider {
    border-color: var(--card-border);
}

/* Flechas de la barra inferior móvil: se difuminan sobre los botones */
.mobile-nav-fade-left {
    background: linear-gradient(to right, var(--card-bg) 55%, transparent);
}
.mobile-nav-fade-right {
    background: linear-gradient(to left, var(--card-bg) 55%, transparent);
}

/* Scrollbars personalizados */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.7);
}

.view-section {
    animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media print {
    body * {
        visibility: hidden;
    }
    #receiptModalContent, #receiptModalContent * {
        visibility: visible;
    }
    #receiptModalContent {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
    .no-print {
        display: none !important;
    }
}

/* Panel de plataforma: acciones ocultas según el rol de la sesión (el servidor también las rechaza) */
body[data-role="operador"] .requires-admin,
body[data-role="lectura"] .requires-admin,
body[data-role="lectura"] .requires-operador,
body[data-role="operador"] [data-action^="plan-"],
body[data-role="operador"] [data-action^="coupon-"],
body[data-role="lectura"] [data-action^="plan-"],
body[data-role="lectura"] [data-action^="coupon-"],
body[data-role="lectura"] [data-action^="signup-"],
body[data-role="lectura"] [data-action="edit"],
body[data-role="lectura"] [data-action="suspend"],
body[data-role="lectura"] [data-action="reactivate"],
body[data-role="lectura"] [data-action="tenant-access"] {
    display: none !important;
}

/* Con una ventana sobrepuesta abierta la página de fondo no se desplaza (la ventana sí, si es larga) */
html.modal-open,
html.modal-open body,
html.modal-open main {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Menú tipo hamburguesa: en tablet y teléfono (también en horizontal, donde la altura es poca) el menú lateral
   se abre como panel deslizable desde el botón de la barra superior y el contenido usa todo el ancho */
.app-menu-btn,
.app-drawer-backdrop {
    display: none;
}
@media (max-width: 1023.98px), (max-height: 560px) {
    .app-shell {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }
    .app-drawer {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(18rem, 85vw) !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        justify-content: flex-start !important;
        padding-top: env(safe-area-inset-top) !important;
        padding-left: env(safe-area-inset-left);
        border-bottom-width: 0 !important;
        border-right-width: 1px !important;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 0.2s ease-out, visibility 0.2s;
        z-index: 60 !important;
    }
    body.nav-open .app-drawer {
        transform: none;
        visibility: visible;
    }
    body.nav-open .app-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, 0.55);
    }
    body.nav-open {
        overflow: hidden;
    }
    .app-drawer .app-drawer-show {
        display: block !important;
    }
    .app-drawer .app-drawer-show-flex {
        display: flex !important;
    }
    .app-drawer .app-drawer-hide {
        display: none !important;
    }
    .app-menu-btn {
        display: inline-flex;
    }
    .app-main-col {
        height: auto !important;
        overflow: visible !important;
    }
    .app-main-scroll {
        overflow: visible !important;
    }
    .app-header {
        position: sticky;
        top: 0;
        padding-top: calc(0.75rem + env(safe-area-inset-top)) !important;
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
}
/* Teléfono en horizontal: sin barra inferior (resta altura); se navega con el menú */
@media (max-height: 560px) {
    .app-bottom-nav {
        display: none !important;
    }
    .app-main-scroll {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
}

/* Plan de prueba: descargas CSV bloqueadas */
.plan-locked {
    opacity: 0.6;
}
.plan-locked::after {
    content: "\f023";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 0.4rem;
    font-size: 0.85em;
}