/* 
========================================================================
   BOOTSTRAP 5 ADMIN TEMPLATE - SPARK ADMIN
   DESIGN SYSTEM & CUSTOM STYLESHEET
   Developed with premium UI/UX standards

   Template Name: Spark Admin
   Version: 1.0 
   Author: Spark Admin Team 
   Email: hello.sparkadmin@gmail.com
   URL: https://sparkadmin.web.id
========================================================================
*/

/* ---------------------------------------------------------------------
   TABLE OF CONTENTS
   ---------------------------------------------------------------------
   1. Google Fonts CDN Import (Plus Jakarta Sans)
   2. Design System Variables
   3. Base Overrides & Typography
   4. Sidebar Component (.sidebar-wrapper)
   5. Main Wrapper Layout
   6. Custom Header / Navbar Component
   7. Page Title & Controls Row
   8. Cards & Styling Components
   9. Custom List (Transaction List Table replacement)
   10. Custom Progress & Bar Chart Custom Layouts
   11. Right Panel Component & Layout
   12. Responsive Adjustments
   13. Login Page Styles (.login-wrapper)
   14. Flatpickr Theme Customization (Spark Admin Styles)
   15. Dropdown Component Styles (Reusable)
   16. Footer Component Styles
   17. Navbar Profile Dropdown Styles
   18. Reusable Premium Table Component
   19. Custom Premium Form Elements Design System
   20. Reusable Custom Buttons & Alerts Design System
   21. Error 404 Page Styling Layout
   22. Keyframe Animations & Overlays
   23. Reusable Helper & Utility Classes (Zero Inline Style Policy)
   24. Transaction List Component
--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   1. Google Fonts CDN Import (Plus Jakarta Sans)
--------------------------------------------------------------------- */

/* La tipografía (Poppins) se autohospeda en assets/fonts/fonts.css: sin
   peticiones a Google Fonts, misma familia que el sitio público. */

/* ---------------------------------------------------------------------
   2. Design System Variables
--------------------------------------------------------------------- */
:root {
    color-scheme: light;
    /* Colors — paleta "Alterna digital" del Sistema de Citas */
    --bs-body-bg: #F3F6F0; /* Canvas background: warm grayish-green */
    --bs-body-font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --brand-forest-dark: #013F16;     /* Core sidebar/brand background */
    --brand-forest-medium: #0B5423;   /* Alert banner / dark card BG */
    --brand-forest-light: #146334;    /* Interactive elements in dark mode */
    --brand-lime: #B0F536;            /* Lime accent highlight */
    --brand-lime-hover: #c3ff5c;
    --brand-lime-translucent: rgba(176, 245, 54, 0.15);

    --text-main: #0B130F;             /* Dark headers, main labels */
    --text-muted-green: #6C7E75;      /* Secondary labels, muted details */
    --text-sidebar-muted: #86A18F;    /* Sidebar inactive link labels */

    --card-background: #FFFFFF;
    --border-light: #E9EFEF;
    --border-dark-green: rgba(255, 255, 255, 0.1);
    --bg-sutil: #F8FAF9;       /* fondos casi-blancos: hover de botones, inputs, filas alternas */
    --bg-hover-fila: #f7faf3; /* hover de filas de tabla / items de lista */
    --navbar-bg: rgba(244, 246, 245, 0.85);

    /* System Colors */
    --sys-green: #22C55E;
    --sys-green-bg: #DCFCE7;
    --sys-red: #EF4444;
    --sys-red-bg: #FEE2E2;
    --sys-orange: #F7931E;            /* Naranja "Alterna digital": solo alertas/badges */
    --sys-orange-bg: #FDECD3;

    /* Layout Configurations */
    --sidebar-width: 280px;
    --navbar-height: 80px;

    /* Border Radii */
    --radius-xxl: 24px;
    --radius-xl: 18px;
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 6px;

    /* Box Shadows */
    --shadow-sm: 0 2px 8px rgba(11, 19, 15, 0.02);
    --shadow-md: 0 10px 30px rgba(11, 19, 15, 0.04);
    --shadow-lg: 0 20px 50px rgba(11, 19, 15, 0.08);
}

/*
 * Modo oscuro: se activa con <html data-tema="oscuro">. Redefine solo las
 * variables (el resto del CSS ya las usa via var(...)), así que no hace
 * falta duplicar reglas — misma paleta institucional, adaptada a fondo
 * oscuro en vez de inventar colores nuevos.
 */
[data-tema="oscuro"] {
    color-scheme: dark;
    --bs-body-bg: #0c130f;

    --brand-forest-light: #2c9457;
    --brand-lime-translucent: rgba(176, 245, 54, 0.12);

    --text-main: #EAF2EC;
    --text-muted-green: #93a89b;
    --text-sidebar-muted: #7c9686;

    --card-background: #131e18;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-dark-green: rgba(255, 255, 255, 0.08);
    --bg-sutil: #1a271f;
    --bg-hover-fila: #182419;
    --navbar-bg: rgba(12, 19, 15, 0.85);

    --sys-green-bg: rgba(34, 197, 94, 0.16);
    --sys-red-bg: rgba(239, 68, 68, 0.16);
    --sys-orange-bg: rgba(247, 147, 30, 0.18);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.4);

    /* Bootstrap trae su propio sistema de temas (--bs-body-color, etc.),
       separado del de esta app (usa [data-bs-theme], nosotros [data-tema]) —
       por eso tablas, formularios, dropdowns y modales de Bootstrap seguían
       con su texto negro de fábrica aunque el fondo ya fuera oscuro. Se
       conectan sus variables a las de la app en vez de duplicar cada regla. */
    --bs-body-color: var(--text-main);
    --bs-body-color-rgb: 234, 242, 236;
    --bs-emphasis-color: var(--text-main);
    --bs-heading-color: var(--text-main);
    --bs-secondary-color: var(--text-muted-green);
    --bs-tertiary-color: var(--text-muted-green);
    --bs-border-color: var(--border-light);
    --bs-border-color-translucent: var(--border-light);
    --bs-secondary-bg: var(--bg-sutil);
    --bs-tertiary-bg: var(--bg-sutil);
}

/* ---------------------------------------------------------------------
   3. Base Overrides & Typography
--------------------------------------------------------------------- */
body {
    background-color: var(--bs-body-bg);
    color: var(--text-main);
    font-family: var(--bs-body-font-family);
    font-size: 0.925rem;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
    /* Sin esto, cualquier elemento un poco más ancho que la pantalla (una
       tabla, una tarjeta) hace que TODA la página se pueda deslizar de lado
       a lado en móvil — muy incómodo al intentar solo bajar/subir. Las
       tablas conservan su propio scroll horizontal vía .table-responsive
       (overflow-x: auto), así que no se pierde poder verlas completas. */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: -0.025em;
}

a {
    color: var(--acento-texto);
    text-decoration: none;
    transition: all 0.25s ease-in-out;
}
a:hover {
    color: var(--brand-lime-hover);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(11, 19, 15, 0.15);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 19, 15, 0.28);
}
[data-tema="oscuro"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}
[data-tema="oscuro"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}
/* El sidebar tiene fondo verde oscuro fijo en los dos temas — su scrollbar
   siempre necesita el thumb claro, nunca el oscuro de arriba. */
.sidebar-wrapper ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}
.sidebar-wrapper ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* Firefox no soporta ::-webkit-scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(11, 19, 15, 0.15) transparent; }
[data-tema="oscuro"] * { scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
.sidebar-wrapper * { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }

/* ---------------------------------------------------------------------
   4. Sidebar Component (.sidebar-wrapper)
   Extremely dark sidebar layout
--------------------------------------------------------------------- */
.sidebar-wrapper {
    width: var(--sidebar-width);
    background-color: var(--brand-forest-dark);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    border-right: 1px solid var(--border-dark-green);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 2.5rem;
    padding-left: 0.5rem;
    text-decoration: none;
    transition: color 0.25s ease;
}

.sidebar-brand:hover {
    color: #FFFFFF;
}

.sidebar-brand i {
    color: var(--brand-lime);
    font-size: 1.5rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.sidebar-brand:hover i {
    transform: scale(1.1) rotate(90deg);
    color: var(--brand-lime-hover);
}

.sidebar-menu-section {
    margin-bottom: 1.75rem;
}

.sidebar-menu-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-sidebar-muted);
    padding-left: 0.75rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.sidebar-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu-item {
    margin-bottom: 0.35rem;
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    font-size: 0.95rem;
    color: var(--text-sidebar-muted);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.sidebar-menu-link i {
    font-size: 1.15rem;
    transition: color 0.2s ease;
}

/* Active State & Hover States */
.sidebar-menu-link:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.03);
}

.sidebar-menu-link.active {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

/* Vertical indicator border on left edge */
.sidebar-menu-link.active::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 15%;
    height: 70%;
    width: 4px;
    background-color: var(--brand-lime);
    border-radius: 0 4px 4px 0;
}

.sidebar-menu-link.active i {
    color: var(--brand-lime);
}

.sidebar-menu-badge {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--brand-lime);
    color: var(--brand-forest-dark);
    padding: 0.15rem 0.5rem;
    border-radius: 50rem;
}

/* Dropdown Caret Styling */
.sidebar-menu-link .dropdown-caret {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.sidebar-menu-link[aria-expanded="true"] .dropdown-caret {
    transform: rotate(180deg);
}

/* Submenu layout */
.sidebar-submenu {
    list-style: none;
    padding-left: 2.5rem;
    margin: 0.25rem 0 0.5rem 0;
}

.sidebar-submenu-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    color: var(--text-sidebar-muted);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
}

.sidebar-submenu-link i { font-size: 0.95rem; }

.sidebar-submenu-link:hover {
    color: #FFFFFF;
}

.sidebar-submenu-link.active {
    color: #FFFFFF;
    font-weight: 700;
}

/* Bottom Profile Card in Sidebar */
.sidebar-profile {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: rgba(255, 255, 255, 0.03);
    padding: 0.85rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-dark-green);
    color: #FFFFFF;
}

.sidebar-profile-img {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background-color: var(--brand-forest-medium);
}

.sidebar-profile-info {
    flex-grow: 1;
    min-width: 0; /* allows text truncation */
}

.sidebar-profile-name {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-profile-email {
    font-size: 0.75rem;
    color: var(--text-sidebar-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

/* Minimized Sidebar Adjustments */
body.sidebar-minimized {
    --sidebar-width: 80px;
}

body.sidebar-minimized .sidebar-wrapper {
    padding: 2rem 0.75rem;
    align-items: center;
}

body.sidebar-minimized .sidebar-brand span,
body.sidebar-minimized .sidebar-menu-title,
body.sidebar-minimized .sidebar-menu-link span,
body.sidebar-minimized .sidebar-menu-badge,
body.sidebar-minimized .dropdown-caret,
body.sidebar-minimized .sidebar-submenu,
body.sidebar-minimized .sidebar-profile-info {
    display: none !important;
}

body.sidebar-minimized .sidebar-brand {
    padding-left: 0;
    justify-content: center;
    width: 100%;
}

body.sidebar-minimized .sidebar-menu-link {
    justify-content: center;
    padding: 0.75rem;
}

body.sidebar-minimized .sidebar-menu-link.active::before {
    left: -0.75rem;
}

body.sidebar-minimized .sidebar-menu-link i {
    font-size: 1.35rem;
}

body.sidebar-minimized .sidebar-profile {
    padding: 0.5rem;
    justify-content: center;
    border: none;
    background-color: transparent;
}

/* ---------------------------------------------------------------------
   5. Main Wrapper Layout
--------------------------------------------------------------------- */
.main-wrapper {
    margin-left: var(--sidebar-width);
    padding: 2rem 2.5rem;
    min-height: 100vh;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------
   6. Custom Header / Navbar Component
--------------------------------------------------------------------- */
.navbar-custom {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--navbar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-top: -2rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    padding: 1.25rem 2.5rem;
    border-bottom: 1px solid var(--border-light);
    display: grid !important;
    grid-template-columns: 1fr 480px 1fr !important;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1.5rem;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Quick Actions Dropdown Button */
.btn-quick-action {
    background-color: var(--brand-forest-medium);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.5rem 1.15rem;
    font-size: 0.825rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}


.btn-quick-action:hover {
    background-color: var(--brand-forest-dark);
    color: #FFFFFF;
    box-shadow: 0 4px 12px var(--brand-lime-translucent);
}

.btn-quick-action:focus {
    outline: none;
}

.btn-quick-action.dropdown-toggle::after {
    display: none !important;
}

.btn-quick-action i {
    font-size: 0.85rem;
    transition: transform 0.25s ease;
}

.btn-quick-action:hover i {
    transform: rotate(90deg);
}

/* Custom Dropdown Menu styles */
.dropdown-menu-quick-action {
    background-color: var(--card-background) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 0.5rem 0 !important;
    margin-top: 0.5rem !important;
    border: none !important;
    animation: dropdownFadeIn 0.2s ease;
}


.dropdown-menu-quick-action .dropdown-header {
    font-size: 0.725rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted-green);
    padding: 0.5rem 1.25rem 0.25rem;
}

.dropdown-menu-quick-action .dropdown-item {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    padding: 0.55rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: all 0.2s ease-in-out;
}

.dropdown-menu-quick-action .dropdown-item i {
    font-size: 0.95rem;
    color: var(--text-muted-green);
    transition: color 0.2s;
}

.dropdown-menu-quick-action .dropdown-item:hover {
    background-color: var(--bs-body-bg);
    color: var(--acento-texto);
}

.dropdown-menu-quick-action .dropdown-item:hover i {
    color: var(--acento-texto);
}

.dropdown-menu-quick-action .dropdown-divider {
    border-color: var(--border-light);
    margin: 0.4rem 0;
}

.navbar-title-dropdown {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
}

.navbar-search-wrapper {
    width: 480px;
    max-width: 100%;
    position: relative;
    /* Antes centrada a la mitad exacta de la barra (margin: 0 auto) — se
       recorre hacia la izquierda, más cerca del logo/menú, en vez de quedar
       a medio camino del ancho completo. */
    margin: 0 auto 0 0;
}

.navbar-search-input {
    width: 100%;
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: 50rem;
    padding: 0.65rem 1.25rem;
    padding-right: 2.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    outline: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease-in-out;
}

.navbar-search-input:focus {
    border-color: rgba(5, 28, 18, 0.25);
    box-shadow: 0 4px 12px rgba(11, 19, 15, 0.05);
}

.navbar-search-btn {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted-green);
    padding: 0;
    display: flex;
    align-items: center;
}

.navbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.navbar-action-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.navbar-action-btn:hover {
    background-color: var(--border-light);
    color: var(--acento-texto);
}

.navbar-action-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    background-color: var(--sys-green);
    border-radius: 50rem;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
    animation: statusPulse 2s infinite;
}

.navbar-actions .dropdown-toggle::after {
    display: none !important;
}

/* Custom Dropdown Notifications */
.dropdown-menu-notification {
    width: 320px;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 0.5rem !important;
    border: none !important;
    animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}



.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.notification-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.btn-clear-all {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--acento-texto);
    transition: color 0.2s;
    outline: none;
}

.btn-clear-all:hover {
    color: var(--brand-lime-hover);
}

.notification-list {
    max-height: 260px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s ease;
    text-decoration: none;
}

.notification-item:hover {
    background-color: var(--bs-body-bg);
}

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

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

.notification-text {
    font-size: 0.8rem;
    color: var(--text-main);
    margin-bottom: 0.15rem;
    line-height: 1.35;
}

.notification-time {
    font-size: 0.725rem;
    color: var(--text-muted-green);
}

.notification-unread-dot {
    width: 6px;
    height: 6px;
    border-radius: 50rem;
    background-color: var(--sys-green);
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.notification-footer {
    display: block;
    text-align: center;
    padding: 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--acento-texto);
    text-decoration: none;
    transition: all 0.25s ease-in-out;
}

.notification-footer:hover {
    color: var(--brand-lime-hover);
}

.btn-dark-custom {
    background-color: var(--text-main);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-md);
    border: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease-in-out;
}

.btn-dark-custom:hover {
    background-color: #000000;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn-dark-custom .icon-wrap {
    width: 20px;
    height: 20px;
    border-radius: 50rem;
    background-color: var(--card-background);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* Mobile Sidebar Toggle Button */
.sidebar-toggle-btn {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

/* Desktop Sidebar Toggle Button */
.btn-desktop-toggle {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.btn-desktop-toggle:hover {
    background-color: var(--border-light);
    color: var(--acento-texto);
}

/* ---------------------------------------------------------------------
   7. Page Title & Controls Row
--------------------------------------------------------------------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.page-title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted-green);
    margin-bottom: 0;
}

.btn-date-picker {
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.55rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.btn-date-picker:hover {
    background-color: var(--border-light);
}

/* ---------------------------------------------------------------------
   8. Cards & Styling Components
--------------------------------------------------------------------- */
.card {
    background-color: var(--card-background);
    border: none;
    border-radius: var(--radius-xxl);
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.5rem;
    position: relative;
}

/* Las tablas dentro de una card sí necesitan poder desbordarse con scroll
   horizontal en pantallas angostas (el overflow:hidden de arriba es solo
   para recortar elementos decorativos, no para tablas). */
.card .table-responsive {
    margin: 0 -1.75rem;
    padding: 0 1.75rem;
    width: calc(100% + 3.5rem);
    /* "Sombras de scroll": solo se ven en el borde donde de verdad hay más
       tabla oculta, para que quede claro que se puede deslizar en vez de
       parecer que el contenido nada más se corta. */
    background:
        linear-gradient(to right, var(--card-background) 30%, rgba(255, 255, 255, 0)) 0 0,
        linear-gradient(to left, var(--card-background) 30%, rgba(255, 255, 255, 0)) 100% 0,
        linear-gradient(to right, rgba(11, 19, 15, 0.12), rgba(255, 255, 255, 0)) 0 0,
        linear-gradient(to left, rgba(11, 19, 15, 0.12), rgba(255, 255, 255, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 1.75rem 100%, 1.75rem 100%, 0.75rem 100%, 0.75rem 100%;
    background-attachment: local, local, scroll, scroll;
}
.card .table-responsive table td,
.card .table-responsive table th {
    white-space: nowrap;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.card-header > .d-flex {
    flex-wrap: wrap;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0;
}

.card-more-btn {
    background: none;
    border: none;
    color: var(--text-muted-green);
    font-size: 1.15rem;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Stat-specific cards */
.card-stat {
    height: 100%;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted-green);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 0.75rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.785rem;
    font-weight: 600;
}

.trend-up {
    color: var(--sys-green);
}

.trend-down {
    color: var(--sys-red);
}

/* Alert Dark Green Card */
.alert-green-card {
    background-color: var(--brand-forest-medium);
    color: #FFFFFF;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 165px;
    position: relative;
    overflow: hidden;
}

/* Geometric green visual element in bottom right of Alert Card */
.alert-green-bg-shape {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    opacity: 0.95;
    pointer-events: none;
    z-index: 1;
    transform: rotate(15deg);
    transition: transform 0.4s ease-in-out;
}

/* Subtle micro-animation on hover */
.alert-green-card:hover .alert-green-bg-shape {
    transform: rotate(45deg) scale(1.05);
}

.alert-green-card .stat-value {
    color: #FFFFFF;
}

.alert-green-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 50rem;
    margin-bottom: 1.25rem;
}

.alert-green-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--sys-red);
    border-radius: 50rem;
    animation: redPulse 2s infinite;
}

@keyframes redPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.alert-green-date {
    font-size: 0.75rem;
    color: var(--text-sidebar-muted);
    opacity: 0.8;
    margin-bottom: 0.35rem;
}

.alert-green-text {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.alert-green-link {
    color: var(--brand-lime);
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.alert-green-link:hover {
    color: #FFFFFF;
}

.alert-green-link i {
    transition: transform 0.25s ease;
}

.alert-green-link:hover i {
    transform: translateX(3px);
}

/* ---------------------------------------------------------------------
   9. Custom List (Transaction List Table replacement)
--------------------------------------------------------------------- */
.custom-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Interruptor estilo iOS (Ajustes del iPhone) para activar/desactivar */
.switch-ios {
    position: relative;
    width: 51px;
    height: 31px;
    min-width: 51px;
    border-radius: 999px;
    background-color: #e9e9ea;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    flex-shrink: 0;
}
.switch-ios.switch-on {
    background-color: #34c759;
}
.switch-ios-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
    transition: left 0.2s ease-in-out;
}
.switch-ios.switch-on .switch-ios-thumb {
    left: 22px;
}
.switch-ios:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.switch-ios:focus-visible {
    outline: 2px solid var(--brand-forest-medium);
    outline-offset: 2px;
}
/* Variante chica, para interruptores secundarios (ej. "Solo lectura" junto al de acceso). */
.switch-ios-sm {
    width: 38px;
    height: 23px;
    min-width: 38px;
}
.switch-ios-sm .switch-ios-thumb {
    width: 19px;
    height: 19px;
}
.switch-ios-sm.switch-on .switch-ios-thumb {
    left: 17px;
}

/* Spinner de los "botones de carga" al enviar un formulario */
.spinner-carga {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -0.15em;
    animation: girar-spinner 0.6s linear infinite;
}
.btn-outline-dark .spinner-carga,
.btn-outline-danger .spinner-carga,
.btn-link .spinner-carga {
    border-color: rgba(0, 0, 0, 0.25);
    border-top-color: currentColor;
}
@keyframes girar-spinner {
    to { transform: rotate(360deg); }
}
button[aria-busy="true"] {
    cursor: progress;
    opacity: 0.85;
}

/* Overlay de carga a pantalla completa del panel: aparece justo al enviar
   un formulario de guardar/actualizar/eliminar (o al confirmar una acción),
   para que el refresco de página que sigue no se sienta trabado — se queda
   visible hasta que la siguiente página termina de cargar. */
.carga-overlay-admin {
    --carga-duracion: 1.6s;
    --carga-profundidad: 8px;
    --carga-punto-color: var(--brand-forest-medium);
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(1, 63, 22, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.carga-overlay-admin.visible {
    opacity: 1;
    pointer-events: all;
}
[data-tema="oscuro"] .carga-overlay-admin {
    --carga-punto-color: var(--brand-lime);
}
.carga-overlay-admin .carga-caja {
    position: relative;
    width: 90px;
    height: 90px;
    background: var(--card-background);
    border-radius: 14px;
    animation: carga-caja-girar var(--carga-duracion) ease-in-out infinite;
}
.carga-overlay-admin .carga-punto {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: var(--carga-punto-color) 3px solid;
}
.carga-overlay-admin .carga-punto:nth-of-type(1) { animation: carga-punto-1 var(--carga-duracion) ease-in-out infinite; }
.carga-overlay-admin .carga-punto:nth-of-type(2) { animation: carga-punto-2 var(--carga-duracion) ease-in-out infinite; }
.carga-overlay-admin .carga-punto:nth-of-type(3) { animation: carga-punto-3 var(--carga-duracion) ease-in-out infinite; }
@keyframes carga-punto-1 {
    0% { transform: translate(15px, 50px); width: 55px; }
    25% { transform: translate(15px, 50px); width: 20px; }
    50% { transform: translate(15px, 50px); height: 20px; }
    75% { transform: translate(15px, 15px); height: 55px; }
    100% { transform: translate(15px, 15px); height: 20px; }
}
@keyframes carga-punto-2 {
    0% { transform: translate(50px, 15px); height: 20px; }
    25% { transform: translate(50px, 15px); height: 55px; }
    50% { transform: translate(50px, 50px); height: 20px; width: 20px; }
    75% { transform: translate(50px, 50px); width: 20px; }
    100% { width: 55px; transform: translate(15px, 50px); }
}
@keyframes carga-punto-3 {
    0% { transform: translate(15px, 15px); }
    25% { transform: translate(15px, 15px); width: 20px; }
    50% { width: 55px; transform: translate(15px, 15px); }
    75% { width: 20px; transform: translate(50px, 15px); }
    100% { transform: translate(50px, 15px); }
}
@keyframes carga-caja-girar {
    0% { transform: rotate(0deg); box-shadow: 0px var(--carga-profundidad) 0px rgba(1, 63, 22, .2), 0px var(--carga-profundidad) 25px rgba(1, 63, 22, .1); }
    25% { transform: rotate(90deg); box-shadow: var(--carga-profundidad) 0 0px rgba(1, 63, 22, .2), var(--carga-profundidad) 0 25px rgba(1, 63, 22, .1); }
    50% { transform: rotate(180deg); box-shadow: 0 calc(var(--carga-profundidad) * -1) 0px rgba(1, 63, 22, .2), 0 calc(var(--carga-profundidad) * -1) 25px rgba(1, 63, 22, .1); }
    75% { transform: rotate(270deg); box-shadow: calc(var(--carga-profundidad) * -1) 0px 0px rgba(1, 63, 22, .2), calc(var(--carga-profundidad) * -1) 0px 25px rgba(1, 63, 22, .1); }
    100% { transform: rotate(360deg); box-shadow: 0px var(--carga-profundidad) 0px rgba(1, 63, 22, .2), 0px var(--carga-profundidad) 25px rgba(1, 63, 22, .1); }
}

.custom-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem;
    background-color: var(--card-background);
    border-radius: var(--radius-xl);
    transition: background-color 0.2s ease-in-out;
}

.custom-list-item:hover {
    background-color: var(--bs-body-bg);
}

.item-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.item-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50rem;
    background-color: var(--bs-body-bg);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.item-info {
    min-width: 0;
}

.item-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-sub {
    font-size: 0.75rem;
    color: var(--text-muted-green);
    margin-bottom: 0;
}

.item-status-wrapper {
    text-align: right;
    flex-shrink: 0;
}

.item-status {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.item-status.completed {
    color: var(--acento-texto);
}

.item-status.pending {
    color: var(--text-muted-green);
    opacity: 0.8;
}

.item-hash {
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--text-muted-green);
    opacity: 0.7;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   10. Custom Progress & Bar Chart Custom Layouts
--------------------------------------------------------------------- */
.progress-container {
    margin-bottom: 1.25rem;
}

.progress-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.progress-label {
    color: var(--text-main);
}

.progress-value {
    color: var(--text-muted-green);
}

.progress {
    height: 10px !important;
    background-color: var(--bs-body-bg) !important;
    border-radius: 50rem !important;
    overflow: hidden !important;
}

.progress-bar {
    height: 100% !important;
    border-radius: 50rem !important;
    transition: width 0.6s ease !important;
}

.bg-forest-medium {
    background-color: var(--brand-forest-medium);
}

.bg-lime-accent {
    background-color: var(--brand-lime);
}

.bg-brand-orange {
    background-color: var(--sys-orange);
}

/* ---------------------------------------------------------------------
   11. Right Panel Component & Layout
--------------------------------------------------------------------- */
.right-panel-wrapper {
    height: auto;
}

/* Donut Chart legend styling */
.chart-legends-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bs-body-bg);
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    margin-top: 1.5rem;
    gap: 0.5rem;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50rem;
    display: inline-block;
}

/* Promo Banner Card */
.promo-banner-card {
    background-color: #E2E8DF; /* Soft light olive-sage */
    border-radius: var(--radius-xxl);
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.promo-banner-card {
    min-height: 250px;
}

/* Geometric green visual element in bottom right */
.promo-banner-bg-shape {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 140px;
    height: 140px;
    opacity: 0.95;
    pointer-events: none;
}

.promo-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--brand-forest-dark);
    margin-bottom: 0.75rem;
    max-width: 80%;
    z-index: 2;
}

.promo-desc {
    font-size: 0.85rem;
    color: var(--acento-texto);
    opacity: 0.85;
    line-height: 1.4;
    margin-bottom: auto;
    max-width: 80%;
    z-index: 2;
}

.btn-promo {
    background-color: var(--brand-forest-dark);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    text-align: center;
    border: none;
    width: 100%;
    margin-top: 1.5rem;
    z-index: 2;
    transition: all 0.25s ease;
}

.btn-promo:hover {
    background-color: #000000;
    color: #FFFFFF;
}

/* ---------------------------------------------------------------------
   12. Responsive Adjustments
--------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .sidebar-wrapper {
        transform: translateX(-100%);
    }
    
    .sidebar-wrapper.show {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    
    .main-wrapper {
        margin-left: 0;
        padding: 1.5rem 1.5rem;
    }
    
    .sidebar-toggle-btn {
        display: flex;
    }
    
    .navbar-search-wrapper {
        order: 3;
        max-width: 100%;
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .navbar-custom {
        display: flex !important;
        margin-top: -1.5rem;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding: 1rem 1.5rem;
        flex-wrap: wrap;
        gap: 0.75rem;
        /* Sin esto, el hamburger y los íconos (modo oscuro/campana/perfil)
           quedaban amontonados del lado izquierdo con todo el resto de la
           barra vacío — separa los íconos hacia la derecha. */
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .btn-date-picker {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------
   14. Flatpickr Theme Customization (Spark Admin Styles)
--------------------------------------------------------------------- */
.flatpickr-calendar {
    background: var(--card-background) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    width: 324px !important;
    padding: 16px 14px 10px 14px !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #FFFFFF !important;
}

/* Month and Year navigation banner */
.flatpickr-months {
    position: relative !important;
    height: 40px !important;
    align-items: center !important;
}

.flatpickr-month {
    height: 40px !important;
    color: var(--text-main) !important;
}

.flatpickr-current-month {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    height: 40px !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months {
    font-weight: 700 !important;
    color: var(--text-main) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 4px 8px !important;
    font-size: 1.05rem !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months:hover {
    background: var(--bs-body-bg) !important;
}

.flatpickr-current-month input.cur-year {
    font-weight: 700 !important;
    color: var(--text-main) !important;
    font-size: 1.05rem !important;
    padding: 4px 6px !important;
    border-radius: var(--radius-md) !important;
    width: 55px !important;
    cursor: pointer !important;
}

.flatpickr-current-month input.cur-year:hover {
    background: var(--bs-body-bg) !important;
}

/* Hide default numeric scroll spinner arrows */
.numInputWrapper span {
    display: none !important;
}

/* Center navigation chevrons and style with hover circle */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    color: var(--text-main) !important;
    fill: var(--text-main) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background-color: var(--bs-body-bg) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 12px !important;
    height: 12px !important;
}

/* Weekday labels row */
.flatpickr-weekdays {
    height: 30px !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
}

span.flatpickr-weekday {
    font-weight: 700 !important;
    color: var(--text-sidebar-muted) !important;
    font-size: 0.8rem !important;
    opacity: 0.85;
}

/* Days container layout */
.flatpickr-innerContainer {
    margin-top: 6px !important;
}

.flatpickr-days {
    width: 294px !important;
}

.dayContainer {
    width: 294px !important;
    min-width: 294px !important;
    max-width: 294px !important;
    gap: 2px 0px !important;
}

/* Day grid cell elements */
.flatpickr-day {
    font-weight: 600 !important;
    color: var(--text-main) !important;
    border-radius: 50rem !important;
    height: 38px !important;
    line-height: 38px !important;
    max-width: 38px !important;
    font-size: 0.85rem !important;
    transition: all 0.15s ease !important;
    border: none !important;
    margin: 0 auto !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background-color: var(--bs-body-bg) !important;
    color: var(--acento-texto) !important;
    border-radius: 50rem !important;
}

/* Selected endpoints styling */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background-color: var(--brand-forest-medium) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(5, 28, 18, 0.25) !important;
}

.flatpickr-day.startRange {
    border-radius: 50rem 0 0 50rem !important;
}

.flatpickr-day.endRange {
    border-radius: 0 50rem 50rem 0 !important;
}

.flatpickr-day.startRange.endRange {
    border-radius: 50rem !important;
}

/* Selected in-range days styling */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
    background-color: #E1FCD2 !important;
    color: var(--acento-texto) !important;
    border-radius: 0 !important;
}

/* Disabled and adjacent month days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #CBD5E1 !important;
    background: transparent !important;
}

/* ---------------------------------------------------------------------
   15. Dropdown Component Styles (Reusable)
--------------------------------------------------------------------- */
.dropdown-menu-custom {
    background: var(--card-background) !important;
    border: 1px solid rgba(11, 19, 15, 0.05) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 8px 6px !important;
    min-width: 170px !important;
    margin-top: 6px !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--border-light) !important;
    z-index: 1050 !important;
}

.dropdown-menu-custom .dropdown-item {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-muted-green) !important;
    padding: 8px 12px !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
}

.dropdown-menu-custom .dropdown-item i {
    font-size: 1rem !important;
}

.dropdown-menu-custom .dropdown-item:hover,
.dropdown-menu-custom .dropdown-item:focus {
    background-color: var(--bs-body-bg) !important;
    color: var(--text-main) !important;
}

.dropdown-menu-custom .dropdown-item.text-danger:hover {
    background-color: var(--sys-red-bg) !important;
    color: var(--sys-red) !important;
}

.dropdown-menu-custom .dropdown-divider {
    border-top: 1px solid var(--border-light) !important;
    margin: 6px 0 !important;
    opacity: 1 !important;
}

/* Custom ApexCharts Hover Overrides for Lime-Yellow Color (#B4F105) */
.apexcharts-bar-area[fill="#B4F105"]:hover,
.apexcharts-bar-area[fill="#b4f105"]:hover,
.apexcharts-pie-area[fill="#B4F105"]:hover,
.apexcharts-pie-area[fill="#b4f105"]:hover {
    fill: #c1f824 !important;
}

/* ---------------------------------------------------------------------
   16. Footer Component Styles
--------------------------------------------------------------------- */
.footer-custom {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(11, 19, 15, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted-green);
    transition: all 0.3s ease;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer-logo {
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.footer-logo i {
    color: var(--acento-texto);
    font-size: 0.95rem;
    display: inline-block;
    animation: rotateLogo 12s linear infinite;
}

@keyframes rotateLogo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.footer-separator {
    color: var(--border-light);
    opacity: 0.6;
    user-select: none;
}

.footer-copy {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.footer-heart {
    font-size: 0.75rem;
    display: inline-block;
    animation: heartBeat 1.5s ease infinite;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.footer-right {
    display: flex;
    align-items: center;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-link {
    color: var(--text-muted-green);
    font-weight: 600;
    transition: color 0.25s ease-in-out;
    text-decoration: none;
}

.footer-link:hover {
    color: var(--brand-forest-dark);
    text-decoration: none;
}


.footer-link .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--sys-green);
    border-radius: 50%;
    margin-left: 0.35rem;
    vertical-align: middle;
    box-shadow: 0 0 6px var(--sys-green);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@media (max-width: 768px) {
    .footer-custom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 1.5rem;
        gap: 1rem;
    }
    
    .footer-left {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
    
    .footer-separator {
        display: none;
    }
    
    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* ---------------------------------------------------------------------
   13. Login Page Styles (.login-wrapper)
--------------------------------------------------------------------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-body-bg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Geometric background decoration */
.login-bg-shape {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--brand-lime-translucent) 0%, rgba(180, 241, 5, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.login-bg-shape-1 {
    top: -50px;
    left: -50px;
}
.login-bg-shape-2 {
    bottom: -100px;
    right: -50px;
    width: 400px;
    height: 400px;
}

.login-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xxl);
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
    box-shadow: var(--shadow-lg);
    z-index: 1;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 30px 60px rgba(11, 19, 15, 0.12);
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-forest-dark);
    margin-bottom: 1.5rem;
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-brand i {
    color: var(--acento-texto);
    font-size: 1.75rem;
    animation: rotateLogo 15s linear infinite;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-brand:hover,
.login-brand:hover i {
    color: var(--brand-lime-hover);
}

.login-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 0.35rem;
    letter-spacing: -0.02em;
}

.login-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted-green);
    text-align: center;
    margin-bottom: 2rem;
}

.login-form-group {
    margin-bottom: 1.25rem;
    position: relative;
}

.login-form-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    display: block;
}

.login-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-group i.input-icon {
    position: absolute;
    left: 1.25rem;
    color: var(--text-muted-green);
    font-size: 1.1rem;
    pointer-events: none;
    transition: color 0.25s ease;
}

.login-input {
    width: 100%;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 0.8rem 1.25rem 0.8rem 2.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    outline: none;
    transition: all 0.25s ease-in-out;
}

/* Adjust padding for password field to fit eye toggle */
.login-input-password {
    padding-right: 2.85rem;
}

.login-input:focus {
    background-color: var(--card-background);
    border-color: var(--brand-forest-medium);
    box-shadow: 0 0 0 4px var(--brand-lime-translucent);
}

.login-input:focus + i.input-icon {
    color: var(--acento-texto);
}

.password-toggle-btn {
    position: absolute;
    right: 1.25rem;
    background: none;
    border: none;
    color: var(--text-muted-green);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.password-toggle-btn:hover {
    color: var(--acento-texto);
}

/* Reutiliza el botón de ojito fuera del login (ej. tarjetas con .form-control) */
.login-input-group .form-control.pwd-input {
    padding-right: 2.5rem;
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    font-size: 0.825rem;
}

/* Custom Checkbox Styling */
.custom-control-label {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted-green);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

.custom-checkbox-input {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--text-muted-green);
    appearance: none;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    background-color: transparent;
}

.custom-checkbox-input:checked {
    background-color: var(--brand-forest-medium);
    border-color: var(--brand-forest-medium);
}

.custom-checkbox-input:checked::before {
    content: "\f272"; /* check icon in bootstrap-icons font */
    font-family: "bootstrap-icons";
    font-weight: 900;
    font-size: 0.7rem;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.forgot-password-link {
    color: var(--acento-texto);
    font-weight: 600;
    text-decoration: none;
}

.forgot-password-link:hover {
    color: var(--brand-lime-hover);
    text-decoration: underline;
}

.btn-login {
    background-color: var(--brand-forest-medium);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.85rem;
    font-weight: 700;
    font-size: 0.95rem;
    width: 100%;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-login:hover {
    background-color: var(--brand-forest-dark);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--brand-lime-translucent);
}

.btn-login i {
    font-size: 1rem;
    transition: transform 0.25s ease;
}

.btn-login:hover i {
    transform: translateX(3px);
}

.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted-green);
    margin: 1.75rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-light);
}

.login-divider:not(:empty)::before {
    margin-right: .75rem;
}

.login-divider:not(:empty)::after {
    margin-left: .75rem;
}

.social-login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.btn-social {
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    border-radius: var(--radius-lg);
    padding: 0.7rem;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.btn-social:hover {
    background-color: var(--bs-body-bg);
    border-color: rgba(0, 0, 0, 0.1);
}

.btn-social i {
    font-size: 1.1rem;
}

.login-footer-text {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted-green);
    font-weight: 600;
    margin-bottom: 0;
}

.login-footer-text a {
    color: var(--acento-texto);
    font-weight: 700;
}

.login-footer-text a:hover {
    color: var(--brand-lime-hover);
    text-decoration: underline;
}

/* =====================================================================
   16. Navbar Profile Dropdown Styles
   ===================================================================== */
.navbar-profile-btn {
    background: transparent;
    border: none;
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-radius: var(--radius-lg);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.navbar-profile-btn:hover {
    background-color: var(--bs-body-bg);
}

.navbar-profile-btn:focus {
    outline: none;
}

.navbar-profile-btn.dropdown-toggle::after {
    display: none !important;
}

.navbar-profile-img {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    transition: border-color 0.2s;
}

.navbar-profile-btn:hover .navbar-profile-img {
    border-color: var(--brand-lime-hover);
}

.navbar-profile-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main);
    transition: color 0.2s;
}

.navbar-profile-btn:hover .navbar-profile-name {
    color: var(--acento-texto);
}

.navbar-profile-caret {
    font-size: 0.75rem;
    color: var(--text-muted-green);
    transition: transform 0.2s, color 0.2s;
}

.navbar-profile-btn:hover .navbar-profile-caret {
    color: var(--acento-texto);
}

.navbar-profile-btn[aria-expanded="true"] .navbar-profile-caret {
    transform: rotate(180deg);
}

/* Botones de solo ícono del navbar (modo oscuro, notificaciones): antes eran
   íconos sueltos sin ningún fondo, muy planos junto al selector de sitio y el
   avatar de perfil, que sí tienen su "chip" con fondo y sombra — mismo look
   que ya usan los botones de colapsar/mostrar el menú (.btn-desktop-toggle),
   para que todos los botones del navbar se vean consistentes. */
.navbar-icon-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-lg);
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    font-size: 1.1rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.25s ease;
}
.navbar-icon-btn:hover {
    background-color: var(--border-light);
    color: var(--acento-texto);
}
.navbar-icon-btn:focus {
    outline: none;
}
.navbar-icon-btn.dropdown-toggle::after {
    display: none !important;
}

/* Custom Dropdown Menu for Profile */
.dropdown-menu-profile {
    width: 200px;
    background-color: var(--card-background) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 0.5rem 0 !important;
    margin-top: 0.5rem !important;
    border: none !important;
    animation: dropdownFadeIn 0.2s ease;
}


.dropdown-menu-profile .dropdown-header {
    font-size: 0.725rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-green);
    padding: 0.65rem 1.25rem 0.35rem;
}

.dropdown-menu-profile .dropdown-item {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    padding: 0.65rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease-in-out;
}

.dropdown-menu-profile .dropdown-item i {
    font-size: 1.05rem;
    color: var(--text-muted-green);
    transition: color 0.2s;
}

.dropdown-menu-profile .dropdown-item:hover {
    background-color: var(--bs-body-bg);
    color: var(--acento-texto);
}

.dropdown-menu-profile .dropdown-item:hover i {
    color: var(--acento-texto);
}

.dropdown-menu-profile .dropdown-divider {
    border-color: var(--border-light);
    margin: 0.4rem 0;
}

/* ---------------------------------------------------------------------
   18. Reusable Premium Table Component
--------------------------------------------------------------------- */
.table-card-custom {
    background-color: var(--card-background);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(11, 19, 15, 0.06) !important;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.25rem !important; /* Pushes the main footer down to create breathing space */
    width: 100%;
}

.table-custom {
    width: 100%;
    margin-bottom: 0;
    vertical-align: middle;
    border-collapse: collapse;
}

.table-custom th,
.table-custom td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(11, 19, 15, 0.05);
    white-space: nowrap;
}

.table-custom th {
    background-color: var(--bg-sutil);
    color: var(--text-muted-green);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(11, 19, 15, 0.08);
}

.table-custom tbody tr {
    transition: background-color 0.2s ease-in-out;
}

.table-custom tbody tr:hover {
    background-color: rgba(180, 241, 5, 0.03); /* Soft brand-lime-glow transparent hover */
}

.table-custom tbody tr:last-child td {
    border-bottom: none;
}

/* User/Product visual info cell */
.table-user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background-color: var(--brand-forest-medium);
}

.table-user-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.875rem;
}

.table-user-sub {
    font-size: 0.75rem;
    color: var(--text-muted-green);
}

/* Badge styles */
.badge-table {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50rem;
}

.badge-table::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50rem;
}

.badge-table.success {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--sys-green);
}
.badge-table.success::before {
    background-color: var(--sys-green);
}

.badge-table.pending {
    background-color: rgba(249, 115, 22, 0.1);
    color: var(--sys-orange);
}
.badge-table.pending::before {
    background-color: var(--sys-orange);
}

.badge-table.failed {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--sys-red);
}
.badge-table.failed::before {
    background-color: var(--sys-red);
}

/* Table Controls Top bar */
.table-header-control {
    background-color: var(--card-background);
    padding: 1.25rem;
    border-bottom: 1px solid rgba(11, 19, 15, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-search-box {
    position: relative;
    max-width: 320px;
    flex-grow: 1;
}

.table-search-input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    font-size: 0.85rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(11, 19, 15, 0.1);
    background-color: #FDFDFD;
    transition: all 0.2s ease-in-out;
}

.table-search-input:focus {
    outline: none;
    border-color: var(--brand-forest-medium);
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.08);
}

.table-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted-green);
    font-size: 0.85rem;
}

/* Table Actions dropdown/filters */
.table-filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-table-action {
    background-color: var(--card-background);
    border: 1px solid rgba(11, 19, 15, 0.1);
    color: var(--brand-forest-dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease-in-out;
}

.btn-table-action:hover {
    background-color: var(--bg-sutil);
    border-color: var(--brand-forest-medium);
}

/* Action button items in table cell */
.table-btn-action {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(11, 19, 15, 0.08);
    background-color: var(--card-background);
    color: var(--brand-forest-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.table-btn-action:hover {
    background-color: var(--brand-forest-medium);
    color: #FFFFFF;
    border-color: var(--brand-forest-medium);
}

.table-btn-action.delete:hover {
    background-color: var(--sys-red);
    color: #FFFFFF;
    border-color: var(--sys-red);
}

/* Table Footer Pagination */
.table-footer-control {
    background-color: var(--card-background);
    padding: 1.25rem;
    border-top: 1px solid rgba(11, 19, 15, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-pagination-info {
    font-size: 0.85rem;
    color: var(--text-muted-green);
}

/* Custom column styles */
.table-order-id {
    font-weight: 700;
    color: var(--text-main);
}

.table-product-name {
    font-weight: 600;
    color: var(--text-main);
}

.table-amount {
    font-weight: 700;
    color: var(--text-main);
}

/* Custom Table pagination overrides */
.table-footer-control .pagination .page-link {
    border-radius: var(--radius-md);
    color: var(--brand-forest-dark);
    background-color: transparent;
    transition: all 0.25s ease-in-out;
}

.table-footer-control .pagination .page-link:hover {
    background-color: var(--bg-sutil);
    color: var(--acento-texto);
}

.table-footer-control .pagination .page-item.active .page-link {
    background-color: var(--brand-forest-medium) !important;
    color: #FFFFFF !important;
}

.table-footer-control .pagination .page-item.disabled .page-link {
    opacity: 0.5;
    color: var(--text-muted-green);
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   19. Custom Premium Form Elements Design System
--------------------------------------------------------------------- */
.form-label-custom {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.form-control-custom {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-main);
    background-color: var(--card-background);
    background-clip: padding-box;
    border: 1px solid rgba(11, 19, 15, 0.12);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control-custom:focus {
    color: var(--text-main);
    background-color: var(--card-background);
    border-color: var(--brand-forest-medium);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.08);
}

.form-control-custom::placeholder {
    color: var(--text-muted-green);
    opacity: 0.5;
}

.form-control-custom:disabled,
.form-control-custom[readonly] {
    background-color: var(--bg-sutil);
    border-color: rgba(11, 19, 15, 0.06);
    color: var(--text-muted-green);
    opacity: 0.8;
    cursor: not-allowed;
}

/* Sizing overrides */
.form-control-custom-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    border-radius: var(--radius-md);
}

.form-control-custom-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    border-radius: var(--radius-xl);
}

/* Select overrides */
.form-select-custom {
    display: block;
    width: 100%;
    padding: 0.6rem 2.25rem 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-main);
    background-color: var(--card-background);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23072F1F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 10px;
    border: 1px solid rgba(11, 19, 15, 0.12);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    appearance: none;
}

.form-select-custom:focus {
    border-color: var(--brand-forest-medium);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.08);
}

.form-select-custom:disabled {
    background-color: var(--bg-sutil);
    border-color: rgba(11, 19, 15, 0.06);
    color: var(--text-muted-green);
    opacity: 0.8;
    cursor: not-allowed;
}

/* Custom Checkbox & Radios */
.form-check-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-check-input-custom {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 0;
    vertical-align: top;
    background-color: var(--card-background);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(11, 19, 15, 0.15);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.form-check-input-custom[type="checkbox"] {
    border-radius: var(--radius-md);
}

.form-check-input-custom[type="radio"] {
    border-radius: 50rem;
}

.form-check-input-custom:focus {
    outline: 0;
    border-color: var(--brand-lime-hover);
    box-shadow: 0 0 0 3px var(--brand-lime-translucent);
}

.form-check-input-custom:checked {
    background-color: var(--brand-lime);
    border-color: var(--brand-lime);
}

.form-check-input-custom[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23072F1F' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input-custom[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='3.5' fill='%23072F1F'/%3e%3c/svg%3e");
}

.form-check-input-custom:disabled {
    background-color: var(--bg-sutil);
    border-color: rgba(11, 19, 15, 0.06);
    opacity: 0.8;
    cursor: not-allowed;
}

/* Custom switch button style */
.form-switch-custom {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-switch-input-custom {
    width: 38px;
    height: 20px;
    border-radius: 50rem;
    background-color: rgba(11, 19, 15, 0.1);
    position: relative;
    border: 1px solid rgba(11, 19, 15, 0.08);
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    appearance: none;
    outline: none;
}

.form-switch-input-custom::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50rem;
    left: 1px;
    top: 1px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(11, 19, 15, 0.15);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-switch-input-custom:checked {
    background-color: var(--brand-forest-medium);
    border-color: var(--brand-forest-medium);
}

.form-switch-input-custom:checked::before {
    transform: translateX(18px);
}

.form-switch-input-custom:focus {
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.08);
}

.form-switch-input-custom:disabled {
    background-color: var(--bg-sutil);
    border-color: rgba(11, 19, 15, 0.06);
    opacity: 0.8;
    cursor: not-allowed;
}

/* Input group styles */
.input-group-custom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(11, 19, 15, 0.12);
    background-color: var(--card-background);
    overflow: hidden;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.input-group-custom:focus-within {
    border-color: var(--brand-forest-medium);
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.08);
}

.input-group-text-custom {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-muted-green);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bg-sutil);
}

.input-group-custom .form-control-custom {
    border: none !important;
    border-radius: 0 !important;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    padding-left: 0.75rem;
}

.input-group-custom .form-control-custom:focus {
    box-shadow: none !important;
}

/* Validation styles */
.form-control-custom.is-invalid-custom {
    border-color: var(--sys-red) !important;
}

.form-control-custom.is-invalid-custom:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08) !important;
}

.form-control-custom.is-valid-custom {
    border-color: var(--sys-green) !important;
}

.form-control-custom.is-valid-custom:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.08) !important;
}

.form-feedback-custom {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.form-feedback-custom.invalid-custom {
    color: var(--sys-red);
}

.form-feedback-custom.valid-custom {
    color: var(--sys-green);
}

/* ---------------------------------------------------------------------
   20. Reusable Custom Buttons & Alerts Design System
--------------------------------------------------------------------- */
/* Custom Buttons base style */
.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
}

.btn-custom:active {
    transform: scale(0.97);
}

.btn-custom:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.15);
}

/* Custom Buttons sizing variants */
.btn-custom-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    border-radius: var(--radius-md);
}

.btn-custom-lg {
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    border-radius: var(--radius-xl);
}

/* Custom Buttons color variants */
.btn-custom-primary {
    background-color: var(--brand-forest-medium);
    border-color: var(--brand-forest-medium);
    color: #FFFFFF;
}

.btn-custom-primary:hover {
    background-color: var(--brand-forest-dark);
    border-color: var(--brand-forest-dark);
    color: #FFFFFF;
}

.btn-custom-secondary {
    background-color: var(--brand-lime);
    border-color: var(--brand-lime);
    color: #072F1F;
}

.btn-custom-secondary:hover {
    background-color: var(--brand-lime-hover);
    border-color: var(--brand-lime-hover);
    color: #072F1F;
}

.btn-custom-light {
    background-color: var(--bg-sutil);
    border-color: rgba(11, 19, 15, 0.08);
    color: var(--brand-forest-dark);
}

.btn-custom-light:hover {
    background-color: #EEF2F0;
    border-color: rgba(11, 19, 15, 0.12);
    color: var(--brand-forest-dark);
}

.btn-custom-danger {
    background-color: var(--sys-red);
    border-color: var(--sys-red);
    color: #FFFFFF;
}

.btn-custom-danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #FFFFFF;
}

.btn-custom-warning {
    background-color: #F59E0B;
    border-color: #F59E0B;
    color: #FFFFFF;
}

.btn-custom-warning:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: #FFFFFF;
}

/* Custom Buttons outline variants */
.btn-custom-outline-primary {
    background-color: transparent;
    border-color: var(--brand-forest-medium);
    color: var(--acento-texto);
}

.btn-custom-outline-primary:hover {
    background-color: var(--brand-forest-medium);
    color: #FFFFFF;
}

.btn-custom-outline-secondary {
    background-color: transparent;
    border-color: var(--brand-lime-hover);
    color: var(--brand-forest-dark);
}

.btn-custom-outline-secondary:hover {
    background-color: var(--brand-lime);
    border-color: var(--brand-lime);
    color: #072F1F;
}

.btn-custom-outline-danger {
    background-color: transparent;
    border-color: var(--sys-red);
    color: var(--sys-red);
}

.btn-custom-outline-danger:hover {
    background-color: var(--sys-red);
    color: #FFFFFF;
}

/* Custom alert components */
.alert-custom {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert-custom-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.alert-custom-content {
    flex-grow: 1;
}

.alert-custom-close {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    opacity: 0.5;
}

.alert-custom-close:hover {
    opacity: 1;
    background-color: rgba(11, 19, 15, 0.05);
}

/* Alert theme variations */
.alert-custom-primary {
    background-color: rgba(7, 47, 31, 0.04);
    border-color: rgba(7, 47, 31, 0.08);
    color: var(--brand-forest-dark);
}

.alert-custom-success {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.alert-custom-danger {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.alert-custom-warning {
    background-color: #fffbeb;
    border-color: #fef3c7;
    color: #92400e;
}

.alert-custom-info {
    background-color: #f0f9ff;
    border-color: #bae6fd;
    color: #075985;
}

/* ---------------------------------------------------------------------
   21. Error 404 Page Styling Layout
--------------------------------------------------------------------- */
.error-card-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem;
    min-height: 480px;
    background-color: var(--card-background);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(11, 19, 15, 0.06) !important;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.error-title-huge {
    font-size: 7.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-forest-dark);
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.error-title-huge .bi-asterisk {
    font-size: 5.5rem;
    color: var(--brand-lime);
    display: inline-block;
    animation: asteriskSpin 20s infinite linear;
}

.error-subtitle {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.error-desc {
    max-width: 480px;
    font-size: 0.95rem;
    color: var(--text-muted-green);
    margin-bottom: 2.25rem;
    line-height: 1.6;
}

.error-actions-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

@keyframes asteriskSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------------
   23. Reusable Helper & Utility Classes (Zero Inline Style Policy)
--------------------------------------------------------------------- */
.z-index-2 {
    z-index: 2 !important;
}

.sparkline-card-footer {
    margin-left: -1.75rem;
    margin-right: -1.75rem;
    margin-bottom: -1.75rem;
    margin-top: 1.25rem;
    overflow: hidden;
    border-bottom-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}

.chart-legend-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted-green);
}

.stat-value-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
}

.fs-xs {
    font-size: 0.75rem !important;
}

.w-38 {
    width: 38% !important;
}

.w-45 {
    width: 45% !important;
}

.w-50 {
    width: 50% !important;
}

.w-65 {
    width: 65% !important;
}

.w-75 {
    width: 75% !important;
}

.w-85 {
    width: 85% !important;
}


.empty-state-icon {
    font-size: 3.5rem;
    opacity: 0.25;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(5, 28, 18, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1025;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

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

/* ---------------------------------------------------------------------
   24. Transaction List Component
--------------------------------------------------------------------- */
.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.transaction-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background-color: var(--bs-body-bg);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease-in-out;
}

.transaction-item:hover {
    background-color: rgba(5, 28, 18, 0.06);
}

.transaction-icon {
    width: 44px;
    height: 44px;
    border-radius: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-right: 0.85rem;
}

.transaction-info {
    flex-grow: 1;
    min-width: 0;
}

.transaction-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-date {
    font-size: 0.75rem;
    color: var(--text-muted-green);
    margin-bottom: 0;
}

.transaction-amount {
    font-size: 0.875rem;
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
    margin-left: 0.85rem;
}

.bg-forest-light {
    background-color: var(--brand-forest-dark) !important;
}

.text-lime {
    color: var(--brand-lime) !important;
}

/* ---------------------------------------------------------------------
   25. Avatar de iniciales (sustituye fotos de stock)
--------------------------------------------------------------------- */
.avatar-iniciales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}
.sidebar-profile-img.avatar-iniciales { width: 42px; height: 42px; font-size: 0.9rem; }
.navbar-profile-img.avatar-iniciales { width: 34px; height: 34px; font-size: 0.8rem; }
.avatar-grande.avatar-iniciales { width: 110px; height: 110px; font-size: 2.25rem; }

/* ---------------------------------------------------------------------
   26. Logo real en el sidebar (imagen completa normal, símbolo cuando el
   sidebar está minimizado)
--------------------------------------------------------------------- */
.sidebar-brand-logo { height: 54px; width: auto; max-width: 100%; object-fit: contain; }
.sidebar-brand-icono { display: none; height: 34px; width: 34px; object-fit: contain; }
body.sidebar-minimized .sidebar-brand-logo { display: none; }
body.sidebar-minimized .sidebar-brand-icono { display: block; }

/* ---------------------------------------------------------------------
   27. Tabla responsiva de usuarios: en vez de exigir scroll lateral en
   pantallas angostas (por el white-space:nowrap de las celdas), cada fila
   se convierte en una tarjeta apilada con el nombre de cada columna al
   lado de su valor.
--------------------------------------------------------------------- */
@media (max-width: 960px) {
    .tabla-usuarios-movil thead { display: none; }
    .tabla-usuarios-movil, .tabla-usuarios-movil tbody, .tabla-usuarios-movil tr, .tabla-usuarios-movil td {
        display: block; width: 100%;
    }
    .tabla-usuarios-movil tr {
        border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 0.9rem 1rem; margin-bottom: 0.85rem;
    }
    .tabla-usuarios-movil td {
        padding: 0.4rem 0; border: none;
        display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: right;
    }
    /* ".card .table-responsive table td" (más arriba en este archivo) fuerza
       nowrap con más especificidad que la regla de aquí arriba — sin superarla
       a propósito, el texto largo (correos, nombres de rol) se sale de la
       tarjeta en vez de acomodarse en la tarjeta apilada de esta vista. */
    .card .table-responsive .tabla-usuarios-movil td {
        white-space: normal;
    }
    .tabla-usuarios-movil td[data-label]:not([data-label=""])::before {
        content: attr(data-label); font-weight: 700; color: var(--text-muted-green); font-size: 0.8rem; text-align: left;
    }
    .tabla-usuarios-movil td[data-label="Nombre"] { flex-direction: column; align-items: flex-start; text-align: left; }
    .tabla-usuarios-movil td[data-label="Nombre"]::before { margin-bottom: 0.2rem; }
    .tabla-usuarios-movil td[data-label=""] { justify-content: flex-end; padding-top: 0.6rem; border-top: 1px dashed var(--border-light); margin-top: 0.4rem; }
    /* El nombre/correo va junto al avatar en una fila flex — sin min-width:0
       un correo largo (sin espacios donde cortar) se sale de la tarjeta en
       vez de respetar su ancho, que es el bug que se estaba viendo. */
    .tabla-usuarios-movil td[data-label="Nombre"] .d-flex { max-width: 100%; }
    .tabla-usuarios-movil td[data-label="Nombre"] .d-flex > div { min-width: 0; overflow-wrap: anywhere; }
}



/* ---------------------------------------------------------------------
   28. Rediseño del panel (2026): componentes propios del Sistema de Citas
   (se apilan sobre el tema Spark; todo lo de abajo gana por orden).
--------------------------------------------------------------------- */
:root {
    --marca-verde: #0e682f;
    --marca-verde-medio: #12813b;
    --marca-lima: #95c01e;
    --marca-lima-suave: #e6f2da;
    --gradiente-marca: linear-gradient(135deg, #12813b, #0e682f);
    --sombra-marca: 0 8px 20px rgba(14, 104, 47, 0.25);
    --ambar: #b45309; --ambar-bg: #fef3c7;
    --azul: #1d4ed8; --azul-bg: #dbeafe;
    --rojo: #b91c1c; --rojo-bg: #fee2e2;
    --gris: #4b5563; --gris-bg: #eef2f0;
    --verde: #15803d; --verde-bg: #dcfce7;
    --morado: #6d28d9; --morado-bg: #ede9fe;
    /* Texto de acento (links, íconos, folios) sobre el fondo de página/tarjeta
       — separado de --marca-verde/--brand-forest-medium porque esas dos se
       usan también como fondo/borde de bloques de color sólido, que no deben
       aclararse en modo oscuro; solo el TEXTO necesita aclararse ahí. */
    --acento-texto: #0e682f;
}

/* Modo oscuro para las variables del rediseño 2026 (badges de estatus, stats, etc.) */
[data-tema="oscuro"] {
    --ambar: #fbbf24; --ambar-bg: rgba(180, 83, 9, 0.22);
    --azul: #60a5fa; --azul-bg: rgba(29, 78, 216, 0.22);
    --rojo: #f87171; --rojo-bg: rgba(185, 28, 28, 0.22);
    --gris: #9ca3af; --gris-bg: rgba(75, 85, 99, 0.22);
    --verde: #4ade80; --verde-bg: rgba(21, 128, 61, 0.22);
    --morado: #a78bfa; --morado-bg: rgba(109, 40, 217, 0.22);
    --marca-lima-suave: rgba(149, 192, 30, 0.16);
    --marca-verde-medio: #6ee7a3;
    --acento-texto: #4ade80;
}

body { font-weight: 400; letter-spacing: 0; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }
a:hover { color: var(--marca-verde-medio); }

/* Botones */
.btn { border-radius: var(--radius-md); font-weight: 600; }
.btn-marca {
    background-image: var(--gradiente-marca);
    color: #fff !important;
    border: none;
    box-shadow: var(--sombra-marca);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-marca:hover, .btn-marca:focus { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(14, 104, 47, 0.32); }
.btn-marca:disabled { opacity: 0.6; box-shadow: none; transform: none; }
.btn-outline-dark { border-color: rgba(11, 19, 15, 0.18); color: var(--text-main); background: var(--card-background); }
.btn-outline-dark:hover { background: var(--text-main); border-color: var(--text-main); color: var(--card-background); }
.btn-outline-secondary { border-color: rgba(11, 19, 15, 0.14); color: var(--text-muted-green); background: var(--card-background); }
[data-tema="oscuro"] .btn-outline-dark { border-color: rgba(255, 255, 255, 0.18); }
[data-tema="oscuro"] .btn-outline-secondary { border-color: rgba(255, 255, 255, 0.14); }
.btn-outline-danger { background: var(--card-background); }
.btn-link { color: var(--acento-texto); text-decoration: none; }
.btn-link:hover { color: var(--marca-verde-medio); text-decoration: underline; }
.btn-success { background: var(--verde); border-color: var(--verde); }
.btn-info { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-info:hover { background: #1e40af; border-color: #1e40af; color: #fff; }
.btn-danger { background: var(--rojo); border-color: var(--rojo); }

/* Encabezado de página */
.page-header { align-items: center; margin-bottom: 1.75rem; }
.page-title { font-size: 1.55rem; }
.page-subtitle { font-size: 0.875rem; }
.page-header-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Tarjetas */
.card {
    border: 1px solid rgba(11, 19, 15, 0.05);
    box-shadow: 0 6px 20px rgba(11, 19, 15, 0.04);
    border-radius: 20px;
}
.card-title { display: inline-flex; align-items: center; gap: 0.5rem; }
.card-title i { color: var(--acento-texto); }
.card .card-header .text-muted { font-size: 0.8rem; }
/* Bootstrap trae .text-muted con un gris fijo que no sigue el tema — con
   fondo oscuro casi no se distingue. Se ata a la misma variable que usa el
   resto del panel para texto secundario. */
.text-muted { color: var(--text-muted-green) !important; }

/* Tarjetas de estadística */
.stat-tarjeta {
    display: flex;
    flex-direction: row; /* el .card de Bootstrap es columna: aquí el ícono va a la izquierda del texto, no encima */
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem 1.4rem;
    height: 100%;
    margin-bottom: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.stat-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: inherit; }
.stat-icono {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.stat-verde .stat-icono { background: var(--verde-bg); color: var(--verde); }
.stat-ambar .stat-icono { background: var(--ambar-bg); color: var(--ambar); }
.stat-azul .stat-icono { background: var(--azul-bg); color: var(--azul); }
.stat-rojo .stat-icono { background: var(--rojo-bg); color: var(--rojo); }
.stat-cuerpo { min-width: 0; }
.stat-tarjeta .stat-value { font-size: 1.85rem; margin-bottom: 0.1rem; }
.stat-tarjeta .stat-label { margin-bottom: 0.1rem; font-size: 0.82rem; font-weight: 600; }
.stat-nota { font-size: 0.75rem; color: var(--text-muted-green); }
.stat-nota strong { color: var(--text-main); }

/* Accesos rápidos */
.acciones-rapidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.6rem; }
.accion-rapida {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.9rem;
    border-radius: 16px;
    background: var(--card-background);
    border: 1px solid rgba(11, 19, 15, 0.06);
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.85rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.accion-rapida i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--marca-lima-suave);
    color: var(--acento-texto);
    font-size: 1.1rem;
}
.accion-rapida:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; color: var(--acento-texto); }

/* Agenda de hoy */
.agenda-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.agenda-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: var(--bs-body-bg);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}
.agenda-item:hover { background: var(--marca-lima-suave); color: inherit; }
.agenda-hora {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--acento-texto);
    background: var(--card-background);
    border-radius: 10px;
    padding: 0.35rem 0.55rem;
    min-width: 78px;
    text-align: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}
.agenda-info { min-width: 0; flex: 1; }
.agenda-nombre { display: block; font-weight: 700; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-sub { display: block; font-size: 0.75rem; color: var(--text-muted-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pendientes por atender */
.pendiente-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px dashed var(--border-light); }
.pendiente-item:last-child { border-bottom: none; padding-bottom: 0; }
.pendiente-icono { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-size: 1rem; }
.pendiente-ambar .pendiente-icono { background: var(--ambar-bg); color: var(--ambar); }
.pendiente-rojo .pendiente-icono { background: var(--rojo-bg); color: var(--rojo); }
.pendiente-azul .pendiente-icono { background: var(--azul-bg); color: var(--azul); }
.pendiente-info { min-width: 0; flex: 1; font-size: 0.85rem; }
.pendiente-info a { font-weight: 700; color: var(--text-main); }
.pendiente-info a:hover { color: var(--acento-texto); }
.pendiente-sub { font-size: 0.75rem; color: var(--text-muted-green); }

/* Badges de estatus */
.badge-estatus {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 50rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background: var(--gris-bg);
    color: var(--gris);
}
.badge-estatus::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.badge-estatus-pendiente, .badge-estatus-abierta, .badge-estatus-proxima { background: var(--ambar-bg); color: var(--ambar); }
.badge-estatus-confirmada, .badge-estatus-enviado, .badge-estatus-revisada, .badge-estatus-academico { background: var(--azul-bg); color: var(--azul); }
.badge-estatus-atendida, .badge-estatus-atendido, .badge-estatus-vigente, .badge-estatus-activo, .badge-estatus-publico { background: var(--verde-bg); color: var(--verde); }
.badge-estatus-no_asistio, .badge-estatus-conducta { background: var(--rojo-bg); color: var(--rojo); }
.badge-estatus-psicologia { background: var(--morado-bg); color: var(--morado); }
/* Credenciales: caducó hace menos de 30 días (amarillo, sigue valiendo) y vencida por falta de renovación (gris). */
.badge-estatus-renovar { background: #fdf3dc; color: #8a5a00; }
.badge-estatus-vencida-gris { background: #eef0f2; color: #4b5260; }
/* Tipos de sesión de Psicología */
.badge-estatus-primera_vez { background: var(--ambar-bg); color: var(--ambar); }
.badge-estatus-seguimiento { background: var(--azul-bg); color: var(--azul); }
.badge-estatus-canalizacion { background: var(--rojo-bg); color: var(--rojo); }
.badge-estatus-cierre { background: var(--verde-bg); color: var(--verde); }
.badge { font-weight: 700; border-radius: 50rem; padding: 0.35rem 0.65rem; }

/* Tablas */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted-green);
    font-weight: 700;
    padding: 0.7rem 0.75rem;
}
.table tbody td { padding: 0.85rem 0.75rem; border-bottom: 1px solid var(--border-light); font-size: 0.875rem; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background-color: var(--bg-hover-fila); }
.table td code { background: var(--gris-bg); padding: 0.15rem 0.45rem; border-radius: 6px; color: var(--acento-texto); font-weight: 700; font-size: 0.8rem; }
.table td .btn-sm, .table td .btn-sm i { font-size: 0.78rem; }
.table td.d-flex { align-items: center; }

/* Formularios y filtros */
.login-form-label, .form-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted-green); font-weight: 700; margin-bottom: 0.4rem; display: block; }
.form-control, .form-select { border-radius: 12px; border-color: var(--border-light); padding: 0.6rem 0.9rem; font-size: 0.9rem; background: var(--bg-sutil); color: var(--text-main); }
.form-control:focus, .form-select:focus { border-color: var(--marca-verde); box-shadow: 0 0 0 4px rgba(149, 192, 30, 0.2); background: var(--card-background); }
.form-control-sm, .form-select-sm { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
.form-check-input:checked { background-color: var(--marca-verde); border-color: var(--marca-verde); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(149, 192, 30, 0.2); border-color: var(--marca-verde); }
.horario-chip { cursor: pointer; }
.horario-chip.active { background: var(--marca-verde); color: #fff; border-color: var(--marca-verde); }

/* Estado vacío */
.estado-vacio { text-align: center; padding: 2.25rem 1rem; color: var(--text-muted-green); }
/* Solo el ícono ilustrativo grande (el primer <i>, fuera de cualquier botón)
   — sin el :not(.btn *) esto también agrandaba el ícono del botón de acción
   que va debajo ("+ Nuevo registro"), poniéndolo en su propia línea y
   volviendo el botón gigante. */
.estado-vacio > i { font-size: 2.4rem; display: block; margin-bottom: 0.5rem; color: var(--marca-lima); }
.estado-vacio strong { display: block; color: var(--text-main); font-size: 1rem; margin-bottom: 0.25rem; }
.estado-vacio p { margin: 0 0 0.9rem; font-size: 0.88rem; }

/* Alertas */
.alert { border-radius: 14px; border: none; font-size: 0.9rem; }
.alert-danger { background: var(--rojo-bg); color: #991b1b; }
.alert-info { background: var(--azul-bg); color: #1e3a8a; }
.alert-success { background: var(--verde-bg); color: #166534; }

/* Listas custom */
.custom-list-item { border: 1px solid rgba(11, 19, 15, 0.05); }
.custom-list-item:hover { background-color: var(--bg-hover-fila); }
.item-icon-wrapper { background: var(--marca-lima-suave); color: var(--acento-texto); border-radius: 14px; }

/* Detalle (dl) */
dl.row dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-green); font-weight: 700; padding-top: 0.2rem; }
/* Bootstrap no le pone color propio a <dd> — sin esto hereda el gris casi
   negro por defecto (#212529), que sobre fondo oscuro queda casi invisible.
   Estas listas de detalle (dl.row) se usan en casi todas las pantallas
   "Ver" del panel (citas, boletos, citatorios...). */
dl.row dd { margin-bottom: 0.65rem; font-size: 0.9rem; color: var(--text-main); }

/* Sidebar */
.sidebar-brand { margin-bottom: 1.75rem; }
.sidebar-menu-link { padding: 0.65rem 0.85rem; font-size: 0.9rem; }
.sidebar-menu-link:hover { transform: translateX(2px); }
.sidebar-menu-link.active { background: rgba(255, 255, 255, 0.08); }
.sidebar-profile { background: rgba(255, 255, 255, 0.05); padding: 0; overflow: hidden; }
.sidebar-profile-link { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1; padding: 0.85rem; text-decoration: none; color: #fff; transition: background-color 0.2s ease; }
.sidebar-profile-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
body.sidebar-minimized .sidebar-profile-link { padding: 0.5rem; justify-content: center; }

/* Navbar */
.navbar-custom { grid-template-columns: auto 1fr auto !important; padding: 0.9rem 2.5rem; }
.navbar-hoy { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text-muted-green); font-weight: 600; }
.navbar-hoy i { color: var(--acento-texto); }
.navbar-actions { display: flex; align-items: center; justify-content: flex-end; }
@media (max-width: 1200px) { .navbar-hoy { display: none; } }

/* Footer */
.footer-custom { font-size: 0.8rem; }

/* Login */
.login-wrapper {
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(149, 192, 30, 0.35), transparent 60%),
        linear-gradient(135deg, #0e682f, #0a4a22);
}
.login-bg-shape { background: radial-gradient(circle, rgba(149, 192, 30, 0.35) 0%, rgba(149, 192, 30, 0) 70%); }
.login-card { border: none; }
.login-title { font-size: 1.4rem; }
.btn-login { background-image: var(--gradiente-marca); border-radius: var(--radius-md); box-shadow: var(--sombra-marca); }
.btn-login:hover { background-image: var(--gradiente-marca); box-shadow: 0 12px 26px rgba(14, 104, 47, 0.32); }
.login-volver { text-align: center; margin-top: 1.25rem; font-size: 0.82rem; }
.login-volver a { color: var(--acento-texto); font-weight: 600; }

/* Notificaciones */
.dropdown-menu-custom .dropdown-item-text { font-size: 0.85rem; }

@media (max-width: 768px) {
    .stat-tarjeta { padding: 1.1rem 1.2rem; }
    .page-title { font-size: 1.3rem; }
    .card { padding: 1.25rem; }
    .card .table-responsive { margin: 0 -1.25rem; padding: 0 1.25rem; width: calc(100% + 2.5rem); }
}

/* SweetAlert2 (confirmaciones y toasts) trae su propio blanco fijo — se ata
   al tema del panel para que los modales de confirmar/eliminar no rompan
   la vista en modo oscuro. */
[data-tema="oscuro"] .swal2-popup {
    background: var(--card-background);
    color: var(--text-main);
}
[data-tema="oscuro"] .swal2-html-container,
[data-tema="oscuro"] .swal2-title {
    color: var(--text-main);
}
[data-tema="oscuro"] .swal2-cancel {
    background: var(--bg-sutil) !important;
    color: var(--text-main) !important;
}
[data-tema="oscuro"] .swal2-toast {
    background: var(--card-background) !important;
    color: var(--text-main) !important;
}

/* El botón "Seleccionar archivo" de <input type="file"> lo pinta el propio
   navegador (no es CSS normal) — sin esto queda blanco con texto negro
   fijo, como un parche fuera de lugar en un formulario oscuro. */
[data-tema="oscuro"] input[type="file"]::file-selector-button,
[data-tema="oscuro"] input[type="file"]::-webkit-file-upload-button {
    background: var(--bg-sutil);
    color: var(--text-main);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.75rem;
    margin-right: 0.75rem;
}

/* ---------------------------------------------------------------------
   29. Burbuja flotante de Patty AI — presente en todo el panel (menos en
   la propia pantalla de Patty), para que cualquiera con acceso al módulo
   pueda preguntarle algo sin salir de donde está.
--------------------------------------------------------------------- */
#patty-burbuja { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; }
#patty-burbuja-boton {
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--gradiente-marca); color: #fff; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg); transition: transform 0.2s ease;
}
#patty-burbuja-boton:hover { transform: translateY(-2px) scale(1.04); }
/* Cara de Patty configurable (admin/patty/configurar.php): si Administración
   del Sistema subió una foto, se acomoda dentro del círculo ya existente en
   vez del ícono; si no, el ícono se queda igual que siempre. */
.patty-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.patty-avatar-img-grande { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto 0.5rem; }
#patty-burbuja.abierta #patty-burbuja-boton { display: none; }
#patty-burbuja-panel {
    position: fixed; right: 1.25rem; bottom: 1.25rem; width: 340px; max-width: 92vw;
    height: 480px; max-height: 75vh; background: var(--card-background); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border-light);
    display: flex; flex-direction: column; overflow: hidden;
}
.patty-burbuja-header {
    display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem;
    background: var(--gradiente-marca); color: #fff; font-weight: 700; flex-shrink: 0;
}
.patty-burbuja-header a, .patty-burbuja-header button {
    background: none; border: none; color: #fff; opacity: 0.85; padding: 0.15rem 0.3rem; cursor: pointer; display: inline-flex;
}
.patty-burbuja-header a:hover, .patty-burbuja-header button:hover { opacity: 1; }
.patty-burbuja-chat { flex: 1; overflow-y: auto; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; }
.patty-burbuja-bienvenida { margin: auto; text-align: center; color: var(--text-muted-green); font-size: 0.85rem; max-width: 250px; }
.patty-burbuja-bienvenida i { font-size: 1.5rem; color: var(--acento-texto); display: block; margin-bottom: 0.4rem; }
.patty-burbuja-msg { display: flex; }
.patty-burbuja-msg-assistant { justify-content: flex-start; }
.patty-burbuja-msg-user { justify-content: flex-end; }
.patty-burbuja-msg .burbuja {
    max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.45; white-space: pre-wrap;
}
.patty-burbuja-msg-assistant .burbuja { background: var(--bg-sutil); color: var(--text-main); border-bottom-left-radius: 3px; }
.patty-burbuja-msg-user .burbuja { background: var(--brand-forest-medium); color: #fff; border-bottom-right-radius: 3px; }
.patty-burbuja-form { display: flex; gap: 0.4rem; padding: 0.65rem; border-top: 1px solid var(--border-light); flex-shrink: 0; }
.patty-burbuja-form input[type="text"] {
    flex: 1; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 0.5rem 0.75rem;
    background: var(--bg-sutil); color: var(--text-main); font-size: 0.85rem;
}
.patty-burbuja-form input[type="text"]:focus { outline: none; border-color: var(--marca-verde); }
.patty-burbuja-form button {
    width: 38px; border: none; border-radius: var(--radius-md); background: var(--marca-verde); color: #fff; cursor: pointer;
}
.patty-burbuja-form button:disabled { opacity: 0.6; cursor: default; }
.patty-burbuja-puntos { display: inline-flex; gap: 3px; align-items: center; }
.patty-burbuja-puntos span {
    width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted-green); animation: patty-parpadeo 1.1s infinite ease-in-out;
}
.patty-burbuja-puntos span:nth-child(2) { animation-delay: 0.15s; }
.patty-burbuja-puntos span:nth-child(3) { animation-delay: 0.3s; }
@media (max-width: 480px) {
    #patty-burbuja, #patty-burbuja-panel { right: 0.75rem; bottom: 0.75rem; }
    #patty-burbuja-panel { width: calc(100vw - 1.5rem); }
}

/* ---------------------------------------------------------------------
   Credenciales escolares: galería de diseños + tabla optimizada
--------------------------------------------------------------------- */
.creds-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
.creds-preset-card {
    background: var(--bg-sutil); border: 2px solid transparent; border-radius: var(--radius-md);
    padding: 0.6rem; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 0.5rem;
    transition: border-color 0.15s, transform 0.15s;
}
.creds-preset-card:hover { transform: translateY(-2px); }
.creds-preset-card.activo { border-color: var(--marca-verde); }
.creds-preset-mini {
    aspect-ratio: 1.586 / 1; border-radius: 8px; position: relative; overflow: hidden;
    padding: 0.5rem 0.6rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.creds-preset-mini-linea { height: 5px; border-radius: 3px; }
.creds-preset-mini-qr {
    position: absolute; top: 0.5rem; right: 0.5rem; width: 18px; height: 18px; border-radius: 3px;
    background: #fff repeating-linear-gradient(45deg, #0e682f 0 2px, transparent 2px 4px);
}
.creds-preset-nombre { font-size: 0.8rem; font-weight: 700; color: var(--text-main); }
.creds-preset-nombre i { color: var(--marca-verde); }

.creds-avatar {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.creds-avatar-icono {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: var(--verde-bg); color: var(--verde); font-weight: 700; font-size: 0.85rem;
}
.creds-th-icono { margin-right: 0.35rem; opacity: 0.65; }
.creds-fila-acciones { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }

/* Celdas con varias líneas (badge + texto) dentro de la tabla que se vuelve tarjeta en móvil: un solo bloque, que se acomoda. */
.creds-celda-bloque { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; min-width: 0; }
.creds-badge-envuelto { white-space: normal !important; text-align: left; max-width: 100%; }
.creds-caja-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@media (max-width: 960px) {
    .tabla-credenciales td .creds-celda-bloque,
    .tabla-usuarios-movil td .creds-celda-bloque { align-items: flex-end; text-align: right; min-width: 0; max-width: 100%; }
    .tabla-usuarios-movil td .creds-caja-acciones { flex-direction: column; align-items: stretch; width: 100%; }
    .tabla-usuarios-movil td .creds-caja-acciones form { width: 100%; }
    .tabla-usuarios-movil td .creds-caja-acciones .btn,
    .tabla-usuarios-movil td .creds-caja-acciones .form-select { max-width: 100%; }
    .tabla-usuarios-movil td:has(.creds-caja-acciones) { display: block; }
}

.creds-designer-cta { border-left: 4px solid var(--marca-verde); background: var(--verde-bg); }

/* ---------------------------------------------------------------------
   Credenciales: modo diseñador libre
--------------------------------------------------------------------- */
.creds-disenador { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; padding-top: 1rem; }
.creds-disenador-toolbar { width: 190px; flex-shrink: 0; }
.creds-disenador-toolbar-titulo { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted-green); margin-bottom: 0.5rem; }
.creds-disenador-lienzo-wrap { flex: 1 1 320px; max-width: 560px; perspective: 1400px; }
.creds-disenador-lienzo {
    position: relative; width: 100%; aspect-ratio: 85.6 / 54; border-radius: 10px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18); background: #0e682f center/cover no-repeat; user-select: none;
}
/* Volteo tipo tarjeta al cambiar entre Frente/Reverso (ver cambiarLado() en credenciales-disenador.js) */
.creds-lienzo-volteando { animation: creds-flip 0.5s ease; }
@keyframes creds-flip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}
.creds-disenador-propiedades { width: 230px; flex-shrink: 0; background: var(--bg-sutil); border-radius: 10px; padding: 0.9rem; font-size: 0.85rem; }
.creds-disenador-propiedades label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted-green); display: block; margin: 0.6rem 0 0.2rem; }
.creds-disenador-propiedades label:first-child { margin-top: 0; }

.el-disenador { position: absolute; cursor: move; box-sizing: border-box; outline: 1px dashed rgba(0,0,0,0); }
.el-disenador:hover { outline: 1px dashed rgba(37, 99, 235, 0.5); }
.el-disenador.seleccionado { outline: 2px solid #2563eb; z-index: 100; }
.el-disenador .creds-handle {
    position: absolute; width: 11px; height: 11px; background: #2563eb; border: 1.5px solid #fff;
    border-radius: 2px; display: none; z-index: 101;
}
.el-disenador.seleccionado .creds-handle { display: block; }
.creds-handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.creds-handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.creds-handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.creds-handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.creds-el-borrar {
    position: absolute; top: -11px; right: -11px; width: 19px; height: 19px; border-radius: 50%;
    background: #dc2626; color: #fff; display: none; align-items: center; justify-content: center;
    font-size: 11px; cursor: pointer; z-index: 102; line-height: 1;
}
.el-disenador.seleccionado .creds-el-borrar { display: flex; }

/* ---------------------------------------------------------------------
   Campanita de notificaciones: temblor cuando hay algo nuevo sin leer
--------------------------------------------------------------------- */
@keyframes campana-temblor {
    0%, 100% { transform: rotate(0); }
    10%, 30%, 50%, 70% { transform: rotate(-14deg); }
    20%, 40%, 60%, 80% { transform: rotate(14deg); }
    90% { transform: rotate(-6deg); }
}
.campana-agitando { display: inline-block; transform-origin: top center; animation: campana-temblor 0.7s ease-in-out; animation-iteration-count: 2; }
.dropdown-item-link { display: block; color: inherit; text-decoration: none; }
.dropdown-item-link:hover { color: inherit; }

/* ---------------------------------------------------------------------
   Subnav de pestañas dentro de un módulo (ej. Alumnos: Inicio/Lista/Importar)
--------------------------------------------------------------------- */
.subnav-modulo .nav-link { color: var(--text-muted-green); font-weight: 600; border-radius: var(--radius-lg); }
.subnav-modulo .nav-link:hover { color: var(--brand-forest-medium); background: var(--bg-sutil); }
.subnav-modulo .nav-link.active { color: #fff; background: var(--brand-forest-medium); }

/* Selector de vista dentro de una página (ej. Citas: Próximas/Hoy/Historial) —
   un segundo nivel más discreto que la subnav del módulo, nunca el azul de Bootstrap. */
.nav-pills:not(.subnav-modulo) { display: inline-flex; flex-wrap: nowrap; gap: 3px; padding: 4px; background: var(--verde-bg); border-radius: 14px; max-width: 100%; overflow-x: auto; }
.nav-pills:not(.subnav-modulo) .nav-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.95rem; border-radius: 10px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted-green); white-space: nowrap; transition: background .15s, color .15s; }
.nav-pills:not(.subnav-modulo) .nav-link:hover { color: var(--text-main); }
.nav-pills:not(.subnav-modulo) .nav-link.active { background: var(--card-background); color: var(--marca-verde); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.nav-pills:not(.subnav-modulo) .nav-link:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; }
/* Botón "Mandar por WhatsApp" (verde oscuro: el verde claro de WhatsApp con letra blanca casi no se lee) */
.btn-whatsapp { background: #128c4a; border-color: #128c4a; color: #fff; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #0f7a40; border-color: #0f7a40; color: #fff; }

/* Ayuda: recorrido guiado y manual de Psicología (apartados desplegables) */
.ayuda-recorrido { background: linear-gradient(120deg, var(--verde-bg), var(--card-background) 70%); }
.ayuda-recorrido-icono { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: var(--marca-verde); color: #fff; font-size: 1.3rem; }
.ayuda-modulo { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem; border-radius: 14px; background: var(--bg-sutil); height: 100%; }
.ayuda-modulo-icono { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--verde-bg); color: var(--marca-verde); font-size: 1.1rem; }
.ayuda-subs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.ayuda-sub { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--card-background); border: 1px solid var(--border-light); color: var(--text-main); text-decoration: none; }
a.ayuda-sub:hover { border-color: var(--marca-verde); color: var(--marca-verde); }
.ayuda-sub i { color: var(--marca-verde); }
.manual-item { border: 1px solid var(--border-light); border-radius: 14px; margin-bottom: 0.6rem; background: var(--card-background); transition: border-color .15s, box-shadow .15s; }
.manual-item[open] { border-color: var(--marca-verde); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06)); }
.manual-item > summary { list-style: none; display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1rem; cursor: pointer; }
.manual-item > summary::-webkit-details-marker { display: none; }
.manual-item > summary:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; border-radius: 14px; }
.manual-icono { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--verde-bg); color: var(--marca-verde); font-size: 1.1rem; }
.manual-titulo { flex: 1; min-width: 0; }
.manual-titulo strong { display: block; font-size: 0.95rem; }
.manual-titulo small { display: block; color: var(--text-muted-green); font-size: 0.8rem; line-height: 1.4; }
.manual-flecha { color: var(--text-muted-green); transition: transform .2s; }
.manual-item[open] .manual-flecha { transform: rotate(180deg); }
.manual-cuerpo { padding: 0 1rem 1rem 4.1rem; font-size: 0.9rem; }
.manual-cuerpo ol { padding-left: 1.1rem; margin-bottom: 0.75rem; }
.manual-cuerpo ol li { margin-bottom: 0.4rem; line-height: 1.5; }
.manual-cuerpo ol li::marker { color: var(--marca-verde); font-weight: 700; }
.manual-tip { background: var(--bg-sutil); border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.84rem; color: var(--text-muted-green); }
.manual-tip i { color: var(--marca-verde); }
.manual-ejemplos { padding-left: 1.1rem; margin-bottom: 0.75rem; }
.manual-ejemplos li { font-style: italic; margin-bottom: 0.25rem; }
@media (max-width: 575px) { .manual-cuerpo { padding-left: 1rem; } }

/* Ausencias del personal: cada día como ficha con su botón para quitarla */
.ausencia-chip { display: inline-flex; align-items: center; gap: 0.2rem; background: #fdecea; color: #8a1f1f; border-radius: 999px; padding: 0.25rem 0.5rem 0.25rem 0.7rem; font-size: 0.8rem; font-weight: 600; margin: 0; }
.ausencia-chip .btn { color: inherit; line-height: 1; }
[data-tema="oscuro"] .ausencia-chip { background: rgba(192, 57, 43, .22); color: #f3b1a8; }

/* ¿Olvidaste tu contraseña?: pasos y las 6 cajitas del código */
.recuperar-pasos { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.recuperar-pasos span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; color: #9aa79f; }
.recuperar-pasos span + span::before { content: ''; width: 14px; height: 2px; background: #d7e2da; margin-right: 0.2rem; }
.recuperar-pasos b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e8efe9; color: #6b7a70; font-size: 0.72rem; }
.recuperar-pasos span.actual { color: #0e682f; }
.recuperar-pasos span.actual b { background: #0e682f; color: #fff; }
.recuperar-pasos span.hecho b { background: #95c01e; color: #fff; }
.codigo-cajas { display: flex; justify-content: center; gap: 0.5rem; margin: 0.4rem 0 1.4rem; }
.codigo-caja { width: 46px; height: 58px; border-radius: 12px; border: 2px solid #d7e2da; background: #f7faf7; text-align: center; font-size: 1.6rem; font-weight: 700; color: #0e682f; font-family: 'Courier New', monospace; transition: border-color .15s, box-shadow .15s; }
.codigo-caja:focus { outline: none; border-color: #0e682f; box-shadow: 0 0 0 4px rgba(149, 192, 30, 0.25); background: #fff; }
@media (max-width: 400px) { .codigo-cajas { gap: 0.3rem; } .codigo-caja { width: 40px; height: 52px; font-size: 1.4rem; } }

/* Calendario escolar (Ajustes): días sin clases y fines de semana */
.cal-escolar .psico-cal-dia.sin-clases { background: #fdecea; }
.cal-escolar .psico-cal-dia.sin-clases .psico-cal-punto { background: #c0392b; }
.cal-escolar .psico-cal-dia.fin-semana:not(.sin-clases) { background: transparent; border: 1px dashed var(--border-light); }
[data-tema="oscuro"] .cal-escolar .psico-cal-dia.sin-clases { background: rgba(192, 57, 43, .22); }
.cal-muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-left: 4px; }
.cal-muestra.sin-clases { background: #fdecea; border: 1px solid #e8a39b; }
.cal-muestra.fin-semana { border: 1px dashed var(--text-muted-green); }

/* Mis horarios de citas: modo (con/sin tipo) y horas como fichas */
.horario-modo { position: relative; cursor: pointer; }
.horario-modo input { position: absolute; opacity: 0; }
.horario-modo span { display: block; height: 100%; border: 2px solid var(--border-light); border-radius: 14px; padding: 0.85rem 1rem; transition: border-color .15s, background .15s; }
.horario-modo small { display: block; color: var(--text-muted-green); margin-top: 0.2rem; }
.horario-modo input:checked + span { border-color: var(--marca-verde); background: var(--verde-bg); }
.horario-modo input:focus-visible + span { outline: 2px solid var(--marca-verde); outline-offset: 2px; }
.horario-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.horario-hora { cursor: pointer; }
.horario-hora input { position: absolute; opacity: 0; }
.horario-hora span { display: block; text-align: center; padding: 0.45rem 0.3rem; border-radius: 10px; border: 1px solid var(--border-light); background: var(--bg-sutil); font-size: 0.85rem; font-weight: 600; color: var(--text-muted-green); transition: all .12s; }
.horario-hora input:checked + span { background: var(--marca-verde); border-color: var(--marca-verde); color: #fff; }
.horario-hora input:focus-visible + span { outline: 2px solid var(--marca-verde); outline-offset: 2px; }

/* Psicología: "Nueva sesión/evaluación…" primero pide elegir al alumno */
.psico-nuevo-alumno .form-select { min-width: 200px; max-width: 280px; }
@media (max-width: 575px) { .psico-nuevo-alumno { width: 100%; } .psico-nuevo-alumno .form-select { max-width: none; flex: 1; min-width: 0; } }

/* Psicología · Mi agenda: calendario del mes (lunes a domingo) */
.psico-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.psico-cal-dow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted-green); text-align: center; padding: 4px 0; }
.psico-cal-dia { font: inherit; text-align: left; width: 100%; cursor: pointer; }
button.psico-cal-dia:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; }
.psico-cal-dia.pasado:not(.hoy):not(.seleccionado) { opacity: .6; }
.psico-cal-ev.recordatorio { background: #fdf3d7; color: #7a5a00; }
[data-tema="oscuro"] .psico-cal-ev.recordatorio { background: rgba(245, 190, 60, .18); color: #f5d27a; }
.psico-cal-detalle .agenda-lista { margin-bottom: 1rem; }
.psico-recordatorio-form { border-top: 1px dashed var(--border-light); padding-top: 1rem; margin-top: auto; }
.psico-cal-dia { position: relative; min-height: 92px; padding: 6px; border-radius: 10px; background: var(--bg-sutil); color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 2px; overflow: hidden; border: 2px solid transparent; transition: border-color .15s; }
.psico-cal-dia:hover { border-color: var(--marca-lima); color: inherit; }
.psico-cal-dia.vacio { background: transparent; }
.psico-cal-dia.hoy .psico-cal-num { background: var(--marca-verde); color: #fff; }
.psico-cal-dia.seleccionado { border-color: var(--marca-verde); }
.psico-cal-num { font-size: 0.8rem; font-weight: 700; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.psico-cal-ev { font-size: 0.7rem; line-height: 1.25; background: var(--verde-bg); color: var(--marca-verde); border-radius: 5px; padding: 1px 4px; display: flex; gap: 3px; min-width: 0; }
.psico-cal-ev > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psico-cal-ev.vencido { background: #fdecea; color: #8a1f1f; }
.psico-cal-mas { font-size: 0.68rem; color: var(--text-muted-green); padding-left: 4px; }
.psico-cal-punto { display: none; }
@media (max-width: 767px) {
    .psico-cal-dia { min-height: 48px; align-items: center; padding: 4px 2px; }
    .psico-cal-ev, .psico-cal-mas { display: none; }
    .psico-cal-punto { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--marca-verde); color: #fff; font-size: 0.65rem; font-weight: 700; }
}

@media (max-width: 575px) { .nav-pills:not(.subnav-modulo) { display: flex; } .nav-pills:not(.subnav-modulo) .nav-item { flex: 1; } .nav-pills:not(.subnav-modulo) .nav-link { justify-content: center; width: 100%; padding: 0.45rem 0.5rem; font-size: 0.8rem; } .nav-pills:not(.subnav-modulo) .nav-link > i { display: none; } }

/* Tipo de cita (académico/conducta) — badge en listados y botones al registrar */
.badge-cita-tipo { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.badge-cita-academico { background: var(--verde-bg); color: var(--verde); }
.badge-cita-visita { background: var(--azul-bg); color: var(--azul); }
.badge-cita-general { background: var(--bg-sutil); color: var(--text-main); border: 1px solid var(--border-light); }
.tipo-cita-chip.tipo-chip-visita.active { background: var(--azul); border-color: var(--azul); color: #fff; }
.badge-cita-conducta { background: var(--morado-bg); color: var(--morado); }
.tipo-cita-chip.tipo-chip-academico.active { background: var(--verde-bg); border-color: var(--verde); color: var(--verde); }
.tipo-cita-chip.tipo-chip-conducta.active { background: var(--morado-bg); border-color: var(--morado); color: var(--morado); }

/* Tarjetas de estadísticas (tablero de Alumnos) */
.stat-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stat-mini-card { background: var(--card-background); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1rem 1.1rem; }
.stat-mini-card .stat-mini-valor { font-size: 1.7rem; font-weight: 700; color: var(--text-main); line-height: 1.1; }
.stat-mini-card .stat-mini-etiqueta { font-size: 0.82rem; color: var(--text-muted-green); margin-top: 0.15rem; }
@media (max-width: 575px) {
    /* Dos por fila en el celular: así "Visitas hoy" y la lista quedan a la vista sin bajar tanto. */
    .stat-mini-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .stat-mini-card { padding: 0.75rem 0.85rem; }
    .stat-mini-card .stat-mini-valor { font-size: 1.4rem; }
}
.stat-mini-card.stat-mini-destacada { border-color: var(--marca-verde); background: var(--verde-bg); }
.stat-mini-card.stat-mini-destacada .stat-mini-valor { color: var(--marca-verde); }
.visitas-hoy .agenda-nombre, .visitas-hoy .agenda-sub { display: block; white-space: normal; overflow: visible; }
.visitas-hoy .agenda-item .badge-estatus { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 575px) {
    /* En el celular: hora y estado arriba, y el detalle de la visita completo debajo (no apretado en una columna angosta). */
    .visitas-hoy .agenda-item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "h b" "i i"; gap: 0.5rem 0.75rem; align-items: center; }
    .visitas-hoy .agenda-item > .agenda-hora { grid-area: h; }
    .visitas-hoy .agenda-item > .badge-estatus { grid-area: b; justify-self: end; }
    .visitas-hoy .agenda-item > .agenda-info { grid-area: i; }
}
.agenda-item.agenda-item-ahora { box-shadow: inset 4px 0 0 var(--marca-verde); background: var(--verde-bg); }


/* ---------- Ventana de primer acceso (términos / cambio de contraseña) ---------- */
body.pa-abierto { overflow: hidden; }
.pa-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(11, 40, 22, 0.38); -webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1); }
.pa-modal { width: 100%; max-width: 720px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--card-background, #fff);
  border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; border: 1px solid rgba(255,255,255,.4); }
.pa-head { display: flex; gap: 14px; align-items: flex-start; padding: 22px 26px 16px; border-bottom: 1px solid var(--border-light, #e9efef); }
.pa-head h2 { font-size: 1.25rem; margin: 0 0 4px; font-weight: 700; }
.pa-head p { margin: 0; color: var(--gris, #6b7a70); font-size: .9rem; }
.pa-icono { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; background: var(--verde-bg, #e6f2da); color: var(--verde, #0e682f); }
.pa-scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px 26px 20px; min-height: 160px; outline: none; scroll-behavior: smooth; }
.pa-scroll h3.pa-doc { position: sticky; top: 0; background: var(--card-background, #fff); z-index: 1; margin: 0; padding: 14px 0 8px; font-size: 1.05rem; color: var(--verde, #0e682f); border-bottom: 2px solid var(--verde-bg, #e6f2da); }
.pa-scroll h2 { font-size: 1rem; margin: 22px 0 8px; }
.pa-scroll h3:not(.pa-doc) { font-size: .95rem; margin: 14px 0 6px; }
.pa-scroll p, .pa-scroll li { font-size: .9rem; line-height: 1.65; }
.pa-scroll .legal-sensible { background: var(--ambar-bg, #fdf3e7); border-radius: 12px; padding: 12px 16px; font-size: .88rem; }
.pa-scroll .legal-contacto { list-style: none; padding-left: 0; }
.pa-fin { text-align: center; color: var(--verde, #0e682f); font-weight: 600; margin-top: 18px; }
.pa-foot, .pa-cuerpo { padding: 16px 26px 22px; border-top: 1px solid var(--border-light, #e9efef); }
.pa-cuerpo { border-top: 0; }
.pa-ayuda { margin: 0 0 10px; font-size: .85rem; color: var(--ambar, #b45309); font-weight: 600; }
.pa-ayuda.pa-ok { color: var(--verde, #0e682f); }
.pa-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin-bottom: 14px; }
.pa-check input { margin-top: 3px; width: 18px; height: 18px; }
.pa-botones { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.pa-salir { margin-right: auto; font-size: .85rem; color: var(--gris, #6b7a70); }
.pa-form-pass { display: flex; flex-direction: column; gap: 12px; }
.pa-form-pass label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; }
.pa-form-pass label small { font-weight: 400; color: var(--gris, #6b7a70); }
.pa-nota { background: var(--azul-bg, #e8f0fb); border-radius: 12px; padding: 14px 16px; font-size: .9rem; line-height: 1.6; margin-bottom: 16px; }
.pa-nota ul { margin: 8px 0 0; padding-left: 1.2rem; }
[data-tema="oscuro"] .pa-modal { border-color: rgba(255,255,255,.08); }

/* Botón "Regresar" global (layout.php) */
.regresar-wrap { padding: 0 0 0.75rem; }
.btn-regresar { display: inline-flex; align-items: center; gap: 0.35rem; }
@media print { .regresar-wrap { display: none; } }


/* ---------------------------------------------------------------------
   Reportes
--------------------------------------------------------------------- */
.reporte-categoria-titulo { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.reporte-categoria-titulo i { color: var(--marca-verde); }
.reporte-tarjeta { padding: 1rem 1.1rem; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.reporte-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--marca-verde); color: inherit; }
.reporte-icono { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--verde-bg); color: var(--marca-verde); font-size: 1.2rem; }
.reporte-tabla { font-size: 0.85rem; }
.reporte-tabla th { white-space: nowrap; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted-green); }
.reporte-tabla td { vertical-align: top; }
/* El texto largo (conceptos, descripciones) se acomoda en varias líneas en vez de una sola de miles de píxeles. */
.card .table-responsive .reporte-tabla td { white-space: normal; min-width: 5.5rem; max-width: 22rem; overflow-wrap: anywhere; }
.card .table-responsive .reporte-tabla td.text-end { white-space: nowrap; min-width: 0; }
@media (max-width: 575px) { .reporte-tabla { font-size: 0.8rem; } }

/* ---------------------------------------------------------------------
   Roles y permisos estilo Discord: árbol de permisos + vista previa del menú + aviso translúcido
--------------------------------------------------------------------- */
.permisos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; padding-bottom: 5rem; }
.permisos-vista { position: sticky; top: 76px; }
@media (max-width: 1000px) { .permisos-layout { grid-template-columns: 1fr; } .permisos-vista { position: static; order: -1; } }

.perm-grupo { margin-bottom: 1.1rem; }
.perm-grupo-titulo { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted-green); margin: 0 0 0.45rem 0.2rem; }
.perm-modulo { border: 1px solid var(--border-light); border-radius: 14px; margin-bottom: 0.5rem; background: var(--card-background); transition: border-color 0.15s ease, background-color 0.15s ease; }
.perm-modulo.perm-on { border-color: rgba(14, 104, 47, 0.35); background: linear-gradient(0deg, rgba(14, 104, 47, 0.04), rgba(14, 104, 47, 0.04)), var(--card-background); }
.perm-modulo.perm-bloqueado { opacity: 0.7; }
.perm-fila { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem; }
.perm-icono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--verde-bg); color: var(--marca-verde); }
.perm-info { flex: 1; min-width: 0; }
.perm-nombre { font-weight: 700; font-size: 0.92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.perm-sub { font-size: 0.76rem; color: var(--text-muted-green); margin-top: 0.1rem; }
.perm-controles { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.perm-lectura { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--text-muted-green); }
.perm-pest-btn { font-size: 0.75rem; padding: 0.2rem 0.55rem; }
.perm-etiqueta { font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; letter-spacing: 0.02em; }
.perm-etiqueta-ambar { background: #fff1d6; color: #8a5a00; }
.perm-etiqueta-gris { background: #eceff0; color: #5b6b65; }
.perm-pestanas { border-top: 1px dashed var(--border-light); padding: 0.4rem 0.8rem 0.6rem 3.4rem; }
.perm-pestana { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.25rem 0; font-size: 0.85rem; }
.perm-pestana.perm-off { color: var(--text-muted-green); text-decoration: line-through; }
@media (max-width: 575px) {
    .perm-fila { flex-wrap: wrap; }
    .perm-controles { width: 100%; justify-content: space-between; }
    .perm-pestanas { padding-left: 0.8rem; }
}

/* Vista previa: el menú lateral tal como lo vería ese rol */
.perm-preview { background: linear-gradient(170deg, #0b4d24, #123a20); color: #fff; border-radius: 16px; padding: 0.9rem 0.8rem; font-size: 0.85rem; max-height: 62vh; overflow-y: auto; }
.pv-marca { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; padding: 0.1rem 0.4rem 0.7rem; margin-bottom: 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.pv-item, .pv-grupo { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.55rem; border-radius: 10px; color: rgba(255, 255, 255, 0.92); }
.pv-item:hover, .pv-grupo:hover { background: rgba(255, 255, 255, 0.08); }
.pv-item i:first-child, .pv-grupo i:first-child { width: 1.1rem; text-align: center; opacity: 0.9; }
.pv-grupo { font-weight: 700; }
.pv-caret { margin-left: auto; font-size: 0.7rem; opacity: 0.6; }
.pv-sub { margin-left: 0.85rem; padding-left: 0.5rem; border-left: 1px solid rgba(255, 255, 255, 0.16); margin-bottom: 0.2rem; }
.pv-solover { margin-left: auto; font-style: normal; font-size: 0.62rem; background: rgba(255, 255, 255, 0.16); padding: 0.05rem 0.4rem; border-radius: 999px; }
.pv-pestanas { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0 0.55rem 0.35rem 2.35rem; }
.pv-chip { font-size: 0.64rem; background: rgba(149, 192, 30, 0.22); color: #dff0b6; border-radius: 999px; padding: 0.05rem 0.5rem; }
.pv-chip-off { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.4); text-decoration: line-through; }
.perm-bloqueados { margin-top: 0.9rem; }
.perm-bloqueados-titulo { font-weight: 700; font-size: 0.82rem; color: #8a1f1f; margin-bottom: 0.2rem; }
.perm-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.perm-chip-bloq { font-size: 0.72rem; background: #f7e6e6; color: #8a1f1f; border-radius: 999px; padding: 0.15rem 0.6rem; }

/* Barra de cambios pendientes */
.perm-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); border-top: 1px solid var(--border-light); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.1); }
.perm-barra[hidden] { display: none; }
@media (min-width: 1200px) { .perm-barra { left: 280px; } }
.perm-aviso { position: fixed; left: 50%; bottom: 5.5rem; transform: translate(-50%, 20px); z-index: 1000; background: #123a20; color: #fff; padding: 0.6rem 1rem; border-radius: 12px; font-size: 0.84rem; opacity: 0; pointer-events: none; transition: all 0.25s ease; max-width: 90vw; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.perm-aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* Modal con fondo transparente (cristal esmerilado) */
body.modal-cristal-abierto .modal-backdrop { background: rgba(8, 40, 20, 0.35); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 1; }
.modal-cristal .modal-content { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 22px; box-shadow: 0 30px 80px rgba(8, 40, 20, 0.35); }
.modal-cristal .modal-title { font-weight: 800; }
.perm-res-titulo { display: flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; font-weight: 800; margin: 0.9rem 0 0.3rem; }
.perm-res-mas { color: #0e682f; }
.perm-res-menos { color: #a12a2a; }
.perm-lista { list-style: none; margin: 0; padding: 0; }
.perm-lista li { font-size: 0.88rem; padding: 0.15rem 0; display: flex; align-items: center; gap: 0.45rem; }
.perm-alerta { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1rem; padding: 0.8rem 0.9rem; border-radius: 14px; background: rgba(214, 60, 60, 0.12); color: #7a1c1c; font-size: 0.86rem; line-height: 1.45; }
.perm-alerta i { font-size: 1.15rem; margin-top: 0.1rem; }
.perm-alerta-ambar { background: rgba(240, 180, 41, 0.18); color: #6b4a00; }
.perm-alerta-suave { background: rgba(14, 104, 47, 0.1); color: #0a4a22; }

/* Tarjetas de roles */
.rol-tarjeta { padding: 1rem 1.1rem; }
.rol-modulos { display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 1.6rem; }
.rol-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; background: var(--verde-bg); color: var(--marca-verde); border-radius: 999px; padding: 0.15rem 0.55rem; }
.rol-chip-mas { background: #eceff0; color: #5b6b65; }

/* Módulos: pestañas anidadas bajo su módulo */
.modulo-pestanas { margin: -0.25rem 0 0.6rem 3.4rem; padding: 0.4rem 0.9rem; border-left: 2px solid var(--verde-bg); background: rgba(14, 104, 47, 0.03); border-radius: 0 12px 12px 0; }
.modulo-pestanas-titulo { font-size: 0.75rem; font-weight: 700; color: var(--text-muted-green); margin-bottom: 0.2rem; }
.modulo-pestana { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.2rem 0; font-size: 0.86rem; }
@media (max-width: 575px) { .modulo-pestanas { margin-left: 0.5rem; } }

/* ---------------------------------------------------------------------
   Roles: atajos, nivel de acceso y vista previa "ver como este rol"
--------------------------------------------------------------------- */
.perm-atajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem; margin: 0 0 1rem; }
.perm-atajo { display: flex; align-items: center; gap: 0.7rem; text-align: left; border: 1px solid var(--border-light); background: var(--card-background); border-radius: 14px; padding: 0.65rem 0.8rem; cursor: pointer; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.perm-atajo:hover { border-color: var(--marca-verde); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.perm-atajo > i { font-size: 1.25rem; color: var(--marca-verde); }
.perm-atajo strong { display: block; font-size: 0.86rem; }
.perm-atajo small { display: block; font-size: 0.71rem; color: var(--text-muted-green); line-height: 1.3; }
.perm-atajo-super { background: linear-gradient(135deg, #123a20, #0e682f); color: #fff; border-color: transparent; }
.perm-atajo-super > i, .perm-atajo-super small { color: #dff0b6; }
.perm-atajo-super:hover { border-color: #95c01e; }

.perm-seg { display: inline-flex; background: var(--verde-bg); border-radius: 12px; padding: 3px; gap: 2px; }
.perm-seg-b { display: inline-flex; align-items: center; gap: 0.3rem; border: 0; background: transparent; border-radius: 9px; padding: 0.3rem 0.6rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted-green); cursor: pointer; white-space: nowrap; }
.perm-seg-b:hover:not(:disabled) { color: var(--text-main); }
.perm-seg-b.on.perm-seg-0 { background: #fff; color: #8a1f1f; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.perm-seg-b.on.perm-seg-1 { background: #fff; color: #7a5a00; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.perm-seg-b.on.perm-seg-2 { background: var(--marca-verde); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.perm-seg-b:disabled { opacity: .45; cursor: not-allowed; }
.perm-seg-b:focus-visible, .switch-ios:focus-visible, .perm-atajo:focus-visible { outline: 2px solid #1d6ff2; outline-offset: 2px; }
@media (max-width: 575px) { .perm-seg { width: 100%; } .perm-seg-b { flex: 1; justify-content: center; padding: 0.4rem 0.2rem; } .perm-seg-b span { display: none; } .perm-seg-b.on span { display: inline; } }

/* Que la burbuja de Patty no tape la barra de cambios */
.perm-barra { padding-right: 5.5rem; }

/* Ventana de vista previa */
.vp-modal .modal-content { overflow: hidden; }
.vp-selector { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; margin-right: 0.5rem; }
.vp-selector label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted-green); margin: 0; white-space: nowrap; }
.vp-selector select { max-width: 260px; }
.vp-ayuda { font-size: 0.86rem; color: var(--text-muted-green); margin-bottom: 0.7rem; }
.vp-ventana { border: 1px solid rgba(0,0,0,.12); border-radius: 16px; overflow: hidden; background: #f3f6f4; box-shadow: 0 18px 50px rgba(8, 40, 20, 0.25); }
.vp-barra { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.8rem; background: #e6ebe8; border-bottom: 1px solid rgba(0,0,0,.08); }
.vp-puntos { display: inline-flex; gap: 5px; } .vp-puntos i { width: 10px; height: 10px; border-radius: 50%; background: #c4cdc8; display: block; }
.vp-puntos i:nth-child(1) { background: #ef6a5e; } .vp-puntos i:nth-child(2) { background: #f4bf4f; } .vp-puntos i:nth-child(3) { background: #61c554; }
.vp-url { flex: 1; display: flex; align-items: center; gap: 0.35rem; background: #fff; border-radius: 999px; padding: 0.2rem 0.3rem 0.2rem 0.75rem; font-size: 0.82rem; min-width: 0; }
.vp-url i { color: #0e682f; font-size: 0.75rem; } #vp-host { color: #6b7a70; white-space: nowrap; }
.vp-url input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 0.82rem; font-family: ui-monospace, Menlo, monospace; }
.vp-cuerpo { display: grid; grid-template-columns: 210px 1fr; min-height: 380px; max-height: 60vh; }
.vp-menu { background: linear-gradient(170deg, #0b4d24, #123a20); color: #fff; padding: 0.7rem 0.55rem; overflow-y: auto; font-size: 0.82rem; }
.vp-item, .vp-grupo { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.55rem; border-radius: 9px; color: rgba(255,255,255,.9); text-decoration: none; }
.vp-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.vp-item.vp-activo { background: rgba(149,192,30,.28); color: #fff; font-weight: 700; }
.vp-item i:first-child, .vp-grupo i:first-child { width: 1.1rem; text-align: center; }
.vp-item em { margin-left: auto; font-style: normal; font-size: 0.6rem; background: rgba(255,255,255,.18); padding: 0.05rem 0.4rem; border-radius: 999px; }
.vp-grupo { font-weight: 700; opacity: .85; margin-top: 0.2rem; } .vp-caret { margin-left: auto; font-size: 0.65rem; opacity: .6; }
.vp-sub { margin-left: 0.8rem; padding-left: 0.4rem; border-left: 1px solid rgba(255,255,255,.16); }
.vp-contenido { padding: 1rem 1.1rem; overflow-y: auto; background: #f3f6f4; }
.vp-saludo h4 { font-size: 1.05rem; font-weight: 800; margin: 0; } .vp-saludo p { font-size: 0.78rem; color: #6b7a70; margin: 0 0 0.8rem; }
.vp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin-bottom: 0.8rem; }
.vp-tile { display: flex; gap: 0.6rem; align-items: center; background: #fff; border-radius: 14px; padding: 0.65rem 0.75rem; border: 1px solid rgba(0,0,0,.05); }
.vp-tile-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.vp-c-verde .vp-tile-ico { background: #e3f3e8; color: #0e682f; } .vp-c-ambar .vp-tile-ico { background: #fff1d6; color: #8a5a00; }
.vp-c-rojo .vp-tile-ico { background: #f7e0e0; color: #a12a2a; } .vp-c-azul .vp-tile-ico { background: #e0ebfa; color: #1d5fbf; }
.vp-tile-valor { font-size: 1.15rem; font-weight: 800; line-height: 1.1; } .vp-tile-etq { font-size: 0.72rem; font-weight: 600; } .vp-tile-nota { font-size: 0.64rem; color: #6b7a70; }
.vp-card { background: #fff; border-radius: 14px; padding: 0.7rem 0.85rem; margin-bottom: 0.6rem; border: 1px solid rgba(0,0,0,.05); }
.vp-card-t { font-size: 0.8rem; font-weight: 800; margin-bottom: 0.4rem; display: flex; gap: 0.4rem; align-items: center; }
.vp-fila { display: flex; gap: 0.6rem; align-items: center; font-size: 0.76rem; padding: 0.25rem 0; border-top: 1px dashed rgba(0,0,0,.07); }
.vp-fila b { min-width: 4.6rem; color: #0e682f; } .vp-fila em { margin-left: auto; font-style: normal; font-size: 0.66rem; background: #eef2ee; padding: 0.05rem 0.5rem; border-radius: 999px; }
.vp-accesos { display: flex; flex-wrap: wrap; gap: 0.4rem; } .vp-acceso { font-size: 0.73rem; background: #eaf3ec; color: #0e682f; border-radius: 10px; padding: 0.3rem 0.6rem; display: inline-flex; gap: 0.35rem; align-items: center; }
.vp-vacio { background: #fff; border: 1px dashed rgba(0,0,0,.15); border-radius: 14px; padding: 1rem; font-size: 0.8rem; color: #6b7a70; margin-bottom: 0.6rem; }
.vp-banner { display: flex; gap: 0.5rem; align-items: center; font-size: 0.78rem; background: #e3f3e8; color: #0a4a22; border-radius: 12px; padding: 0.5rem 0.7rem; margin-bottom: 0.6rem; }
.vp-banner-ver { background: #fff1d6; color: #6b4a00; }
.vp-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .vp-tab { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 999px; background: #e9eeea; color: #35503f; text-decoration: none; }
.vp-tab.vp-tab-on { background: #0e682f; color: #fff; } .vp-nota { font-size: 0.72rem; color: #6b7a70; }
.vp-acciones { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.vp-btn { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: #0e682f; color: #fff; border-radius: 10px; padding: 0.35rem 0.8rem; font-size: 0.76rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.vp-btn:disabled { opacity: .4; cursor: not-allowed; } .vp-btn-sec { background: #e9eeea; color: #35503f; } .vp-btn-claro { background: rgba(255,255,255,.14); color: #fff; }
.vp-esqueleto i { display: block; height: 12px; border-radius: 6px; background: #e9eeea; margin-bottom: 0.5rem; } .vp-esqueleto i:nth-child(2) { width: 82%; } .vp-esqueleto i:nth-child(3) { width: 64%; } .vp-esqueleto i:nth-child(4) { width: 90%; }
.vp-403 { background: linear-gradient(to top, #0e682f, #083d1a 70%, #052a12); color: #fff; border-radius: 16px; text-align: center; padding: 2rem 1.2rem; }
.vp-403-codigo { font-size: 3.6rem; font-weight: 800; line-height: 1; background: linear-gradient(180deg, #fff 20%, #95c01e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vp-403-titulo { font-size: 1.15rem; font-weight: 800; margin: 0.4rem 0; } .vp-403 p { font-size: 0.82rem; opacity: .85; max-width: 420px; margin: 0 auto 1rem; }
.vp-403-acc { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .vp-403 .vp-btn { background: #95c01e; color: #0a2e14; }
.vp-403 .vp-btn-claro { background: rgba(255,255,255,.16); color: #fff; }
.vp-urls { margin-top: 0.8rem; font-size: 0.82rem; } .vp-urls summary { cursor: pointer; font-weight: 700; }
.vp-tabla { width: 100%; font-size: 0.76rem; margin-top: 0.5rem; border-collapse: collapse; } .vp-tabla th { text-align: left; padding: 0.3rem 0.5rem; color: #6b7a70; }
.vp-tabla td { padding: 0.25rem 0.5rem; border-top: 1px solid rgba(0,0,0,.06); } .vp-tr-sub td:first-child { padding-left: 1.3rem; }
.vp-pill { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; } .vp-pill-ok { background: #e3f3e8; color: #0a4a22; } .vp-pill-no { background: #f7e0e0; color: #8a1f1f; }
@media (max-width: 767px) { .vp-cuerpo { grid-template-columns: 1fr; max-height: none; } .vp-menu { max-height: 190px; } .vp-selector { margin-left: 0; width: 100%; order: 3; } .vp-modal .modal-header { flex-wrap: wrap; } }

/* Interruptor de vista en el encabezado de una tarjeta (Tarjetas | Gráficas, Botones | Lista) */
.vista-interruptor { display: inline-flex; padding: 3px; gap: 2px; background: var(--verde-bg); border-radius: 999px; }
.vista-boton {
    border: 0; background: transparent; color: var(--text-muted-green); font: inherit; font-size: 0.78rem; font-weight: 600;
    padding: 0.32rem 0.8rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.vista-boton:hover { color: var(--text-main); }
.vista-boton.activo { background: #fff; color: var(--verde); box-shadow: 0 1px 4px rgba(11, 19, 15, 0.12); }
.vista-boton:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.card-header:has(> .vista-interruptor) { flex-wrap: wrap; gap: 0.6rem; }

/* Todo el sistema: dos vistas del mismo bloque */
.card[data-vista-tarjeta="sistema"][data-vista="tarjetas"] .vista-solo-graficas,
.card[data-vista-tarjeta="sistema"][data-vista="graficas"] .vista-solo-tarjetas { display: none; }
.stat-verde { --stat-color: var(--verde); }
.stat-ambar { --stat-color: var(--ambar); }
.stat-azul { --stat-color: var(--azul); }
.stat-rojo { --stat-color: var(--rojo); }
.grafica-modulo { display: block; padding: 1.1rem 1.2rem; text-decoration: none; color: inherit; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease; }
a.grafica-modulo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: inherit; }
.grafica-modulo-cab { display: flex; align-items: center; gap: 0.75rem; }
.grafica-modulo-cab .stat-icono { width: 40px; height: 40px; border-radius: 12px; font-size: 1.1rem; }
.grafica-modulo-titulo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.grafica-modulo-valor { font-size: 1.5rem; font-weight: 700; color: var(--text-main); }
.grafica-modulo-pie { display: block; margin-top: 0.15rem; }

/* Accesos rápidos: vista de lista compacta */
.card[data-vista-tarjeta^="accesos"][data-vista="lista"] .acciones-rapidas { grid-template-columns: 1fr; gap: 0.35rem; }
.card[data-vista-tarjeta^="accesos"][data-vista="lista"] .accion-rapida {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.75rem; padding: 0.55rem 0.9rem; text-align: left;
}
.card[data-vista-tarjeta^="accesos"][data-vista="lista"] .accion-rapida i { width: 32px; height: 32px; font-size: 1rem; margin: 0; flex-shrink: 0; }

/* Inicio: vista compacta (por defecto) o completa */
.inicio-barra { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin: -0.25rem 0 1rem; font-size: 0.8rem; }
.inicio-vista[data-vista="compacta"] .solo-completa { display: none; }
.inicio-vista[data-vista="compacta"] .tiles-recorte-card:not(.expandido) .tiles-recorte > :nth-child(n+9) { display: none; }
.tiles-mas { display: none; justify-content: center; margin-top: 1rem; }
.inicio-vista[data-vista="compacta"] .tiles-mas { display: flex; }
.tiles-mas .bi { transition: transform 0.2s ease; }
.tiles-recorte-card.expandido .tiles-mas .bi { transform: rotate(180deg); }
.stat-tarjeta .stat-cuerpo { flex: 1; }
.stat-tarjeta .stat-icono { width: 46px; height: 46px; }

/* Gráficas (ApexCharts con el diseño de Preline) */
.grafica-apex { width: 100%; min-height: 1px; }
.apexcharts-tooltip, .apexcharts-tooltip.apexcharts-theme-light, .apexcharts-tooltip.apexcharts-theme-dark { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.gr-tip { min-width: 9rem; padding: 0.55rem 0.75rem; background: var(--card-background, #fff); color: var(--text-main); border: 1px solid rgba(11, 19, 15, 0.09); border-radius: 10px; box-shadow: 0 8px 24px rgba(11, 19, 15, 0.14); font-size: 0.78rem; }
[data-tema="oscuro"] .gr-tip { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.gr-tip-titulo { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted-green); margin-bottom: 0.3rem; }
.gr-tip-fila { display: flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0; }
.gr-tip-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gr-tip-nombre { color: var(--text-muted-green); }
.gr-tip-valor { margin-left: auto; padding-left: 1rem; font-weight: 700; color: var(--text-main); }
.mini-apex { width: 100%; flex: 0 0 100%; min-height: 44px; margin-top: 0.2rem; color: var(--stat-color, var(--verde)); }
.grafica-modulo .grafica-grande { min-height: 190px; margin-top: 0.6rem; }
.apexcharts-legend-text { color: var(--text-muted-green) !important; }
.footer-version { font-size: 0.75rem; color: var(--text-muted-green); letter-spacing: 0.02em; }

/* Lista de alumnos: 5 columnas compactas que se acomodan (sin scroll lateral) y, en pantallas angostas, tarjetas */
.card .table-responsive .tabla-alumnos td, .card .table-responsive .tabla-alumnos th { white-space: normal; vertical-align: middle; }
.tabla-alumnos { table-layout: auto; }
.tabla-alumnos .col-alumno { min-width: 210px; }
.tabla-alumnos .alumno-nombre { font-weight: 600; display: block; overflow-wrap: anywhere; }
.tabla-alumnos .alumno-ids { display: block; font-size: 0.75rem; overflow-wrap: anywhere; }
.tabla-alumnos .alumno-curp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.02em; }
.tabla-alumnos .alumno-nivel { font-weight: 600; }
.tabla-alumnos .alumno-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.tabla-alumnos .alumno-chip { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: var(--verde-bg); color: var(--verde); }
.tabla-alumnos .alumno-chip-suave { background: var(--gris-bg); color: var(--gris); }
.tabla-alumnos .alumno-tutor { display: block; overflow-wrap: anywhere; }
.tabla-alumnos .alumno-tel { font-size: 0.78rem; color: var(--text-muted-green); text-decoration: none; }
.tabla-alumnos .alumno-tel:hover { color: var(--acento-texto); }
.tabla-alumnos .col-dinero { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tabla-alumnos .alumno-estatus { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex-wrap: nowrap; }
.tabla-alumnos .alumno-acciones { display: inline-flex; align-items: center; gap: 0.5rem; }
.tabla-alumnos .alumno-acciones form { margin: 0; }
.tabla-alumnos .fila-baja .alumno-nombre { color: var(--text-muted-green); }
@media (max-width: 1180px) {
    .tabla-alumnos .col-estatus { min-width: 150px; }
    .tabla-alumnos .alumno-estatus { flex-direction: column; align-items: flex-end; gap: 0.4rem; }
}
@media (max-width: 960px) {
    /* Cada alumno = una tarjeta compacta: nombre arriba; abajo, en dos columnas, nivel/turno · tutor y colegiatura · estatus */
    .card .table-responsive .tabla-alumnos tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1rem; padding: 0.9rem 1rem; }
    .card .table-responsive .tabla-alumnos td { display: block; padding: 0; text-align: left; min-width: 0; width: auto; border: 0; }
    .tabla-alumnos td[data-label]:not([data-label=""])::before {
        display: block; margin-bottom: 0.15rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-green);
    }
    .tabla-alumnos td.col-alumno { grid-column: 1 / -1; padding-bottom: 0.35rem; border-bottom: 1px dashed var(--border-light); }
    .tabla-alumnos td.col-alumno[data-label]:not([data-label=""])::before { display: none; }
    .tabla-alumnos .alumno-nombre { font-size: 1rem; }
    .tabla-alumnos .alumno-chips { justify-content: flex-start; }
    .tabla-alumnos td.col-dinero { text-align: left !important; }
    .tabla-alumnos td.col-estatus { grid-column: 2; align-self: end; }
    .tabla-alumnos .alumno-estatus { flex-direction: row; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: 0.5rem; }
    .tabla-alumnos tr.fila-baja { opacity: 0.82; }
}
@media (max-width: 560px) {
    /* Nivel y tutor a todo lo ancho; colegiatura y estatus quedan lado a lado en una sola fila */
    .card .table-responsive .tabla-alumnos tr { grid-template-columns: auto 1fr; align-items: end; }
    .tabla-alumnos td.col-nivel, .tabla-alumnos td.col-tutor { grid-column: 1 / -1; }
    .tabla-alumnos .alumno-estatus { justify-content: flex-end; flex-wrap: nowrap; gap: 0.4rem; }
    .tabla-alumnos .alumno-estatus .badge-estatus { order: -1; margin-right: auto; }
}

/* Lista de citas: 6 columnas compactas que se acomodan y, en pantallas angostas, tarjetas (igual que Alumnos) */
.card .table-responsive .tabla-citas td, .card .table-responsive .tabla-citas th { white-space: normal; vertical-align: middle; }
.tabla-citas .col-cita { min-width: 150px; }
.tabla-citas .cita-folio { display: inline-block; font-weight: 600; }
.tabla-citas .cita-fecha { display: block; font-size: 0.78rem; color: var(--text-muted-green); margin-top: 0.1rem; }
.tabla-citas .cita-nombre { display: block; overflow-wrap: anywhere; }
.tabla-citas .cita-badges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
.tabla-citas .col-estado { text-align: right; }
.tabla-citas .col-ver { white-space: nowrap !important; }
@media (max-width: 960px) {
    .card .table-responsive .tabla-citas tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1rem; padding: 0.9rem 1rem; align-items: start; }
    .card .table-responsive .tabla-citas td { display: block; padding: 0; text-align: left; min-width: 0; width: auto; border: 0; }
    .tabla-citas td[data-label]:not([data-label=""])::before {
        display: block; margin-bottom: 0.15rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-green);
    }
    .tabla-citas td.col-cita::before { display: none !important; }
    .tabla-citas td.col-cita { grid-column: 1; }
    .tabla-citas td.col-estado { grid-column: 2; grid-row: 1; text-align: right; }
    .tabla-citas td.col-con { grid-column: 1 / -1; }
    .tabla-citas td.col-ver { grid-column: 1 / -1; text-align: right; border-top: 1px dashed var(--border-light); padding-top: 0.6rem; }
    .tabla-citas .cita-badges { justify-content: flex-end; }
}
@media (max-width: 460px) {
    .card .table-responsive .tabla-citas tr { grid-template-columns: 1fr; }
    .tabla-citas td.col-estado { grid-column: 1; grid-row: auto; text-align: left; }
    .tabla-citas .cita-badges { justify-content: flex-start; }
}

/* Grados y coordinadores (ajustes/grados): casillas en forma de pastilla */
.grado-chip { position: relative; cursor: pointer; margin: 0; }
.grado-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.grado-chip span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1.5px solid var(--bs-border-color, #e2dccd); font-size: 0.85rem; font-weight: 600; background: #fff; color: #17301f; transition: background .15s ease, border-color .15s ease; }
.grado-chip input:checked + span { background: #e6f2ea; border-color: #0e682f; color: #0e682f; }
.grado-chip input:checked + span::before { content: "\2713"; font-weight: 700; }
.grado-chip input:focus-visible + span { outline: 2px solid #0e682f; outline-offset: 2px; }
[data-tema="oscuro"] .grado-chip span { background: transparent; color: inherit; }
[data-tema="oscuro"] .grado-chip input:checked + span { background: rgba(14,104,47,.25); color: #9fd9b0; border-color: #3fa35f; }

/* Citas nuevas (lista de Citas): verde que "late" hasta que la persona abre la cita */
.tabla-citas .cita-agendada { display: block; font-size: 0.72rem; color: var(--text-muted-green); margin-top: 0.1rem; }
.tabla-citas .cita-fecha i, .tabla-citas .cita-agendada i { margin-right: 0.15rem; }
.tabla-citas tr.cita-nueva > td { background: #e3f7e8; }
.tabla-citas tr.cita-nueva > td:first-child { box-shadow: inset 4px 0 0 #16a34a; }
.cita-badge-nueva { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #16a34a; color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; vertical-align: middle; animation: cita-nueva-latido 1.6s ease-in-out infinite; }
.cita-punto-nuevo { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; animation: cita-nueva-parpadeo 1.2s ease-in-out infinite; }
.cita-badge-nueva .cita-punto-nuevo { background: #bbf7d0; }
.cita-nuevas-contador { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.6rem; padding: 0.15rem 0.65rem; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.cita-nuevas-contador:hover { background: #bbf7d0; color: #166534; }
.cita-nuevas-contador.activo { background: #16a34a; color: #fff; }
.nav-pills-sm { padding: 3px; }
.nav-pills-sm .nav-link { padding: 0.3rem 0.75rem; font-size: 0.8rem; }
@keyframes cita-nueva-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes cita-nueva-latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .cita-badge-nueva, .cita-punto-nuevo { animation: none; } }
[data-tema="oscuro"] .tabla-citas tr.cita-nueva > td { background: rgba(22, 163, 74, 0.16); }
[data-tema="oscuro"] .cita-nuevas-contador { background: rgba(22, 163, 74, 0.2); color: #86efac; }
.custom-list-item.cita-nueva-item { background: #e3f7e8; box-shadow: inset 4px 0 0 #16a34a; }
[data-tema="oscuro"] .custom-list-item.cita-nueva-item { background: rgba(22, 163, 74, 0.16); }

/* Portería: la persona ya está en la puerta de la escuela */
.badge-en-puerta { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: #0e682f; color: #fff; font-size: 0.72rem; font-weight: 700; white-space: nowrap; animation: cita-nueva-latido 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .badge-en-puerta { animation: none; } }
.custom-list-item.porteria-llego { background: #eef8f0; }
[data-tema="oscuro"] .custom-list-item.porteria-llego { background: rgba(22, 163, 74, 0.14); }
.porteria-ficha { border-width: 2px !important; }

/* Marketing → Gaceta (admin/gacetas) */
.gaceta-form-grid { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; }
.gaceta-zona { position: relative; display: block; aspect-ratio: 8.5 / 11; border: 2px dashed #b9d59a; border-radius: 14px; background: #f6faf0; cursor: pointer; overflow: hidden; transition: border-color .2s, background .2s; margin: 0; }
.gaceta-zona:hover, .gaceta-zona.arrastrando { border-color: #0e682f; background: #eaf4dd; }
.gaceta-zona.con-error { border-color: #dc3545; background: #fdf0f1; }
.gaceta-zona input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.gaceta-zona-vacia { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; padding: 1rem; color: #0e682f; }
.gaceta-zona-vacia i { font-size: 2.6rem; }
.gaceta-zona-vacia small { color: #6c757d; }
.gaceta-zona.con-error .gaceta-zona-vacia { color: #b02a37; }
.gaceta-zona-vista { position: absolute; inset: 0; display: block; }
.gaceta-zona-vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gaceta-zona-vista small { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.65rem; background: linear-gradient(transparent, rgba(0,0,0,0.75)); color: #fff; font-size: 0.75rem; font-weight: 600; }
.gaceta-zona.leyendo .gaceta-zona-vista { background: linear-gradient(100deg, #eef4e6 30%, #f8fbf4 50%, #eef4e6 70%); background-size: 300% 100%; animation: gaceta-adm-brillo 1.3s linear infinite; }
@keyframes gaceta-adm-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.gaceta-zona-vacia[hidden], .gaceta-zona-vista[hidden], .gaceta-subiendo[hidden] { display: none; }
.gaceta-liga-previa { background: #f6faf0; border-radius: 10px; padding: 0.6rem 0.85rem; font-size: 0.85rem; color: #495057; word-break: break-all; }
.gaceta-liga-previa strong { color: #0e682f; }
.gaceta-subiendo { margin-top: 0.6rem; }
.gaceta-subiendo span { display: block; height: 6px; border-radius: 6px; background: #e6f2da; overflow: hidden; }
.gaceta-subiendo b { display: block; height: 100%; width: 0; background: #0e682f; transition: width .2s; }
.gaceta-subiendo small { display: block; margin-top: 0.3rem; color: #6c757d; }

.gaceta-admin-lista { display: grid; gap: 0.85rem; }
.gaceta-admin-item { display: grid; grid-template-columns: 74px 1fr auto; gap: 1rem; align-items: center; padding: 0.85rem; border: 1px solid #edf0ea; border-radius: 14px; background: #fff; }
.gaceta-admin-item.borrador { background: #fafaf8; }
.gaceta-admin-item.borrador .gaceta-admin-portada { opacity: 0.55; }
.gaceta-admin-portada { display: block; aspect-ratio: 8.5 / 11; border-radius: 3px 8px 8px 3px; overflow: hidden; background: #0e682f; box-shadow: 3px 3px 0 -1px #f1eee4, 3px 3px 0 0 #d9d3c3, 6px 8px 14px rgba(14,104,47,0.18); }
.gaceta-admin-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gaceta-admin-portada span { display: grid; place-items: center; height: 100%; color: #c9e37a; font-size: 1.6rem; }
.gaceta-admin-info strong { font-size: 1.05rem; }
.gaceta-admin-liga { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.gaceta-admin-liga code { background: #f2f7ec; color: #0e682f; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.8rem; word-break: break-all; }
.gaceta-admin-acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
@media (max-width: 767px) {
  .gaceta-form-grid { grid-template-columns: 1fr; }
  .gaceta-zona { width: 100%; max-width: 220px; margin: 0 auto; }
  .gaceta-admin-item { grid-template-columns: 64px 1fr; }
  .gaceta-admin-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}
.gaceta-preparando { margin-top: 0.45rem; max-width: 420px; }
.gaceta-preparando[hidden] { display: none; }
.gaceta-preparando span { display: block; height: 5px; border-radius: 5px; background: #e6f2da; overflow: hidden; }
.gaceta-preparando b { display: block; height: 100%; width: 0; background: #0e682f; transition: width .3s; }
.gaceta-preparando small { display: block; margin-top: 0.25rem; color: #6c757d; font-size: 0.78rem; }
.gaceta-preparando.lista span { display: none; }
.gaceta-preparando.lista small { color: #0e682f; font-weight: 600; }
.gaceta-preparando.con-error small { color: #b02a37; }
.gaceta-compartir-interno { grid-column: 1 / -1; padding: 1rem 1.1rem; border-radius: 14px; background: #f2f7ec; border: 1px solid #d6e8c3; }
.gaceta-compartir-titulo { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0e682f; margin-bottom: 0.35rem; }
.gaceta-liga-grande { font-size: 1.3rem; font-weight: 700; color: #0a4a22; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; margin-bottom: 0.65rem; }
.gaceta-compartir-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gaceta-compartir-botones .btn { flex: 1 1 180px; justify-content: center; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.btn-whatsapp { background: #1fa855; border-color: #1fa855; color: #fff; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #178a45; border-color: #178a45; color: #fff; }

/* Psicología → Reportes: estadísticas por periodo (admin/psicologia/reportes.php) */
.psico-rep-pestanas { gap: 0.4rem; flex-wrap: wrap; }
.psico-rep-pestanas .nav-link { border-radius: 999px; font-weight: 600; color: var(--text-main); background: var(--card-background); border: 1px solid var(--border-light); padding: 0.5rem 1.1rem; }
.psico-rep-pestanas .nav-link.active { background: #0e682f; border-color: #0e682f; color: #fff; }
.psico-rep-filtros { display: flex; flex-direction: column; gap: 0.9rem; }
.psico-rep-chips { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; background: var(--bg-sutil); padding: 0.3rem; border-radius: 999px; }
.psico-rep-chip { padding: 0.42rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.88rem; color: var(--text-main); text-decoration: none; }
.psico-rep-chip:hover { background: rgba(14,104,47,0.08); color: var(--text-main); }
.psico-rep-chip.activo { background: #0e682f; color: #fff; box-shadow: 0 4px 10px rgba(14,104,47,0.25); }
.psico-rep-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.psico-rep-flecha { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-light); color: var(--text-main); text-decoration: none; font-size: 1.05rem; }
.psico-rep-flecha:hover { background: rgba(14,104,47,0.08); color: var(--text-main); }
.psico-rep-flecha.desactivada { opacity: 0.35; }
.psico-rep-etiqueta { display: flex; flex-direction: column; line-height: 1.2; min-width: 200px; }
.psico-rep-etiqueta strong { font-size: 1.15rem; }
.psico-rep-etiqueta small { color: var(--text-muted-green); }
.psico-rep-tabla th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted-green); font-weight: 700; }
.psico-rep-barrita { height: 4px; border-radius: 4px; background: rgba(14,104,47,0.1); margin-top: 0.35rem; max-width: 220px; overflow: hidden; }
.psico-rep-barrita b { display: block; height: 100%; background: #0e682f; border-radius: 4px; }
@media (max-width: 575px) {
  .psico-rep-periodo .btn { width: 100%; justify-content: center; }
  .psico-rep-chips { width: 100%; justify-content: space-between; }
  .psico-rep-chip { padding: 0.42rem 0.7rem; font-size: 0.82rem; }
}

/* Modo demo (rol Demo, app/demo.php): aviso fijo para que nunca se confunda con el sistema real */
.demo-franja { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3000; display: inline-flex; align-items: center; gap: 0.45rem; max-width: calc(100vw - 120px); padding: 0.55rem 0.6rem 0.55rem 1rem; border-radius: 999px; background: #b45309; color: #fff; font-size: 0.85rem; box-shadow: 0 10px 28px rgba(180, 83, 9, 0.35); }
.demo-franja i { font-size: 1.05rem; }
.demo-franja strong { white-space: nowrap; }
.demo-franja-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.92; }
.demo-franja a { margin-left: 0.35rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: #fff; color: #b45309; font-weight: 700; text-decoration: none; white-space: nowrap; }
.demo-franja a:hover { background: #fef3c7; color: #92400e; }
@media (max-width: 767px) { .demo-franja-texto { display: none; } .demo-franja { bottom: 10px; } }
body.en-demo .footer-custom { padding-bottom: 4rem; }

/* Herramientas (admin/herramientas): St. Patrick Tools */
.herr-logo { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #0e682f; color: #c9e37a; font-size: 1.6rem; flex: none; }
.herr-clave-nueva { margin-bottom: 1rem; padding: 1.1rem; border-radius: 14px; background: #ecf7e4; border: 1px solid #cfe7bd; text-align: center; }
.herr-clave-nueva small { display: block; color: #0e682f; font-weight: 600; }
.herr-clave { margin: 0.5rem 0 0.8rem; font: 700 clamp(1.4rem, 5vw, 2.1rem) ui-monospace, Menlo, monospace; letter-spacing: 0.12em; color: #0a4a22; user-select: all; }
.herr-clave-nota { margin: 0.7rem 0 0; font-size: 0.8rem; color: #5b6b5e; }
.herr-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.herr-item { display: flex; gap: 0.75rem; align-items: center; padding: 0.7rem; border-radius: 12px; border: 1px solid var(--border-light); color: inherit; text-decoration: none; }
.herr-item:hover { background: var(--bg-hover-fila); color: inherit; }
.herr-item span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.herr-item strong { display: block; font-size: 0.92rem; }
.herr-item small { display: block; color: var(--text-muted-green); font-size: 0.78rem; line-height: 1.35; }

/* ---------- Credencialización (credenciales por tipo, Personal, Alumnos y tutores) ---------- */
.cred-pestanas { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.cred-pestana { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: 999px; border: 1.5px solid var(--border-light); background: var(--card-background); color: var(--text-main); font-weight: 600; font-size: 0.88rem; text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
.cred-pestana i { color: var(--c, var(--text-muted-green)); }
.cred-pestana:hover { border-color: var(--c, var(--text-muted-green)); transform: translateY(-1px); color: var(--text-main); }
.cred-pestana.activa { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 30%, transparent); }
.cred-pestana.activa i { color: #fff; }
.cred-pestana-diseno { margin-left: auto; border-style: dashed; color: var(--text-muted-green); }
.cred-banda { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.95rem 1.1rem; margin-bottom: 1rem; border-radius: 16px; background: var(--cc); border-left: 5px solid var(--c); }
.cred-banda > i { font-size: 1.6rem; color: var(--c); line-height: 1; }
.cred-banda strong { display: block; color: var(--c); }
.cred-banda span { font-size: 0.86rem; color: var(--text-main); opacity: 0.85; }
.cred-tipo-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--cc); color: var(--c); font-size: 0.72rem; font-weight: 700; }
.cred-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.cred-resumen-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; padding: 0.9rem 1rem; border-radius: 16px; background: var(--card-background); border: 1px solid var(--border-light); text-decoration: none; color: var(--text-main); box-shadow: 0 4px 14px rgba(14, 40, 24, 0.04); transition: transform .15s, border-color .15s; }
a.cred-resumen-item:hover { transform: translateY(-2px); border-color: var(--c); color: var(--text-main); }
.cred-resumen-item i { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; color: var(--c); background: rgba(14, 104, 47, .1); background: color-mix(in srgb, var(--c) 12%, transparent); }
.cred-resumen-item strong { font-size: 1.35rem; line-height: 1.1; }
.cred-resumen-item span { font-size: 0.8rem; color: var(--text-muted-green); }
.cred-tipo-elegir { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cred-tipo-opcion { cursor: pointer; }
.cred-tipo-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.cred-tipo-opcion span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.65rem 1.1rem; border-radius: 14px; border: 2px solid var(--border-light); font-weight: 600; transition: all .15s; }
.cred-tipo-opcion span i { color: var(--c); }
.cred-tipo-opcion input:checked + span { border-color: var(--c); background: var(--cc); color: var(--c); }
.cred-tipo-opcion input:focus-visible + span { outline: 3px solid rgba(14, 104, 47, .4); outline: 3px solid color-mix(in srgb, var(--c) 40%, transparent); outline-offset: 2px; }
.cred-pasos { margin: 0 0 1rem; padding-left: 1.2rem; font-size: 0.88rem; color: var(--text-main); }
.cred-pasos li { margin-bottom: 0.45rem; }
.fila-inactiva td { opacity: 0.55; }
@media (max-width: 640px) { .cred-pestana-diseno { margin-left: 0; } }
.familias-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.familias-cifras div { padding: 0.7rem 0.85rem; border-radius: 14px; background: var(--bg-sutil); border: 1px solid var(--border-light); }
.familias-cifras b { display: block; font-size: 1.3rem; line-height: 1.1; }
.familias-cifras span { font-size: 0.78rem; color: var(--text-muted-green); }
.familias-tutor { font-size: 0.86rem; margin: 0.1rem 0; }
.familias-sin-tutor { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.familias-sin-tutor span { display: inline-flex; flex-direction: column; padding: 0.4rem 0.75rem; border-radius: 12px; background: #fdecea; color: #8a1f1f; font-size: 0.85rem; font-weight: 600; }
.familias-sin-tutor small { font-weight: 400; opacity: 0.8; font-size: 0.74rem; }
.porteria-credencial { border-top: 5px solid var(--c); }
.porteria-credencial-cabeza { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.porteria-credencial-cabeza span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--c); }
.porteria-credencial-cabeza strong { color: var(--c); }
.porteria-credencial-foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: rgba(14, 104, 47, .08); background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); }
.porteria-credencial-hijo { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.8rem; border-radius: 14px; border: 1.5px solid rgba(14, 104, 47, .25); border: 1.5px solid color-mix(in srgb, var(--c) 25%, transparent); background: rgba(14, 104, 47, .04); background: color-mix(in srgb, var(--c) 5%, transparent); }
.porteria-credencial-hijo b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; flex: none; }
.cred-planteles { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.cred-plantel { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1rem; border-radius: 14px; border: 1.5px solid var(--border-light); background: var(--card-background); color: var(--text-main); text-decoration: none; font-weight: 600; font-size: 0.88rem; transition: border-color .15s, background .15s; }
.cred-plantel i { font-size: 1.1rem; color: var(--text-muted-green); }
.cred-plantel span { display: flex; flex-direction: column; line-height: 1.15; }
.cred-plantel small { font-weight: 400; font-size: 0.72rem; color: var(--text-muted-green); }
.cred-plantel:hover { border-color: #0e682f; color: var(--text-main); }
.cred-plantel.activo { background: #0a4a22; border-color: #0a4a22; color: #fff; }
.cred-plantel.activo i, .cred-plantel.activo small { color: #c9e37a; }
@media (max-width: 575.98px) {
  /* En el celular los planteles van en una sola fila que se desliza, para no ocupar media pantalla. */
  .cred-planteles { flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 2px 4px 4px; scrollbar-width: none; }
  .cred-planteles::-webkit-scrollbar { display: none; }
  .cred-planteles::after { content: ''; flex: 0 0 12px; } /* el último plantel no queda pegado/cortado en la orilla */
  .cred-plantel { flex-shrink: 0; padding: 0.5rem 0.8rem; }
}

/* Alumnos y tutores: personas autorizadas por alumno */
.familias-alumno { border: 1.5px solid var(--border-light); border-radius: 16px; padding: .9rem 1rem; margin-top: .8rem; }
.familias-alumno-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.familias-alumno-cabeza small { color: var(--text-muted-green); }
.familias-persona { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem 0; border-top: 1px dashed var(--border-light); }
.familias-agregar { margin-top: .6rem; }
.familias-agregar summary { cursor: pointer; font-weight: 600; color: #0e682f; font-size: .88rem; }

/* Vigencias de credenciales ("licencias") */
.vig-estado { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .82rem; color: var(--c); }
.vig-barra { height: 6px; border-radius: 99px; background: var(--border-light); margin-top: .35rem; overflow: hidden; }
.vig-barra span { display: block; height: 100%; border-radius: 99px; }
.cred-resumen-item.activo { outline: 2px solid var(--c); outline-offset: -2px; }

/* Ventana de plantillas del Modo diseñador (Generar al azar / Desde Canva) */
.cred-ventana { position: fixed; inset: 0; z-index: 2000; background: rgba(5, 25, 12, 0.55); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(3px); }
.cred-ventana[hidden] { display: none; }
.cred-ventana-caja { width: min(1100px, 100%); height: min(88vh, 900px); background: var(--card-background, #fff); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: credVentanaEntra .25s ease; }
.cred-ventana-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-light); }
.cred-ventana-caja iframe { flex: 1; width: 100%; border: 0; }
@keyframes credVentanaEntra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.creds-sin-guardar { box-shadow: 0 0 0 3px rgba(149, 192, 30, .55); animation: credLatido 1.6s ease-in-out infinite; }
@keyframes credLatido { 50% { box-shadow: 0 0 0 6px rgba(149, 192, 30, .25); } }

/* Ventana "Así quedaron" al generar credenciales: tarjetas que entran en cascada y se voltean */
.recien-ventana { position: fixed; inset: 0; z-index: 2100; background: rgba(5, 25, 12, .6); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: recienFondo .25s ease; }
.recien-ventana.saliendo { opacity: 0; transition: opacity .25s ease; }
.recien-caja { width: min(1080px, 100%); max-height: 92vh; overflow: auto; background: var(--card-background, #fff); border-radius: 22px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: recienEntra .35s cubic-bezier(.2,.9,.3,1.2); }
.recien-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.recien-cabeza strong { display: block; font-size: 1.15rem; }
.recien-cabeza span { color: var(--text-muted-green); font-size: .88rem; }
.recien-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; perspective: 1400px; }
.recien-item { margin: 0; opacity: 0; animation: recienTarjeta .55s ease forwards; }
.recien-item:nth-child(2) { animation-delay: .08s } .recien-item:nth-child(3) { animation-delay: .16s } .recien-item:nth-child(4) { animation-delay: .24s }
.recien-item:nth-child(5) { animation-delay: .32s } .recien-item:nth-child(6) { animation-delay: .4s } .recien-item:nth-child(7) { animation-delay: .48s } .recien-item:nth-child(8) { animation-delay: .56s }
.recien-item figcaption { margin-top: 8px; font-weight: 600; font-size: .88rem; text-align: center; }
.recien-item figcaption small { display: block; font-weight: 400; color: var(--text-muted-green); font-family: monospace; }
.recien-flip { all: unset; cursor: pointer; display: block; width: 100%; aspect-ratio: 85.6 / 53.98; position: relative; }
.recien-escala { position: absolute; top: 0; left: 0; transform-origin: top left; width: 85.6mm; height: 53.98mm; }
.recien-giro { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.4,.2,.2,1); }
.recien-flip.volteada .recien-giro { transform: rotateY(180deg); }
.recien-giro .tarjeta { position: absolute; inset: 0; width: 85.6mm; height: 53.98mm; overflow: hidden; border-radius: 3mm; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.22); font-family: 'Poppins', sans-serif; }
.recien-giro .cara-reverso { transform: rotateY(180deg); }
.recien-giro .t-qr { background: #fff; border-radius: 1.6mm; padding: .5mm; box-sizing: border-box; }
.recien-giro .t-qr svg { width: 100%; height: 100%; display: block; }
.recien-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@keyframes recienFondo { from { opacity: 0; } }
@keyframes recienEntra { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes recienTarjeta { from { opacity: 0; transform: translateY(26px) rotateX(18deg); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   Login dividido (2026-10, estilo Edumon): foto de los alumnos sobre el verde del colegio a la izquierda y el
   formulario a la derecha sobre fondo claro. En pantallas angostas se queda solo el formulario.
--------------------------------------------------------------------- */
.login-wrapper.login-dividido { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 0; align-items: stretch; background: var(--bs-body-bg); }
.login-dividido .login-card { align-self: center; justify-self: center; margin: 2.5rem 0; box-shadow: none; border: 0; background: transparent; width: min(440px, calc(100% - 3rem)); max-width: none; padding: 1rem; }
.login-dividido .login-card:hover { transform: none; box-shadow: none; }
.login-dividido .login-brand { justify-content: flex-start; }
.login-dividido .login-title { font-size: 2rem; text-align: left; margin-top: 1.25rem; }
.login-dividido .login-subtitle { text-align: left; font-size: 0.98rem; margin-bottom: 2rem; }
.login-dividido .login-input { min-height: 54px; border-radius: 14px; background: #fff; border: 1.5px solid #dfe7e1; font-size: 1rem; }
.login-dividido .login-input:focus { border-color: #0e682f; box-shadow: 0 0 0 4px rgba(149, 192, 30, 0.22); }
.login-dividido .btn-login { min-height: 56px; border-radius: 999px; font-size: 1.02rem; }
.login-dividido .login-volver { text-align: left; }
.login-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 3rem 3.25rem 0; color: #fff;
  background: radial-gradient(700px 420px at 90% 0%, rgba(149, 192, 30, 0.38), transparent 60%), linear-gradient(150deg, #12813b 0%, #0e682f 45%, #0a4a22 100%); }
.login-visual-logo { height: 46px; width: auto; align-self: flex-start; position: relative; z-index: 2; }
.login-visual-texto { position: relative; z-index: 2; max-width: 460px; margin: 2.5rem 0 1.5rem; }
.login-visual-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #c9e37a; margin-bottom: 0.75rem; }
.login-visual h2 { font-family: 'Poppins', system-ui, sans-serif; font-size: 2.6rem; line-height: 1.12; font-weight: 700; margin: 0 0 0.9rem; color: #fff; }
.login-visual p { color: rgba(255, 255, 255, 0.82); font-size: 1.02rem; line-height: 1.6; margin: 0 0 1.25rem; }
.login-visual ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.login-visual li { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.95rem; }
.login-visual li i { color: #95c01e; }
.login-visual-marco { position: relative; z-index: 2; width: min(100%, 500px); align-self: center; margin-top: auto; padding: 2.25rem 1.5rem 0; border-radius: 260px 260px 0 0; background: linear-gradient(180deg, #f4f9ee 0%, #e6f2da 100%); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18); }
.login-visual-foto { display: block; width: 100%; height: auto; }
.login-visual-circulo { position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; }
.login-visual-circulo-1 { width: 460px; height: 460px; right: -120px; bottom: -120px; background: rgba(149, 192, 30, 0.22); }
.login-visual-circulo-2 { width: 220px; height: 220px; left: -70px; top: 38%; border: 2px dashed rgba(255, 255, 255, 0.22); }
@media (max-width: 960px) {
  .login-wrapper.login-dividido { grid-template-columns: 1fr; background: radial-gradient(700px 400px at 90% -10%, rgba(149, 192, 30, 0.3), transparent 60%), linear-gradient(135deg, #0e682f, #0a4a22); }
  .login-visual { display: none; }
  .login-dividido .login-card { background: var(--card-background); border-radius: var(--radius-xxl); box-shadow: var(--shadow-lg); padding: 2rem 1.5rem; margin: 1.25rem 0; width: min(440px, calc(100% - 2rem)); }
  .login-dividido .login-title { font-size: 1.6rem; }
}
[data-tema="oscuro"] .login-wrapper.login-dividido { background: var(--bs-body-bg); }
[data-tema="oscuro"] .login-dividido .login-input { background: var(--bg-sutil); border-color: var(--border-light); }

/* Mensualidades de Psicología (Pagos de Psicología y expedientes) */
.badge-estatus-pagado { background: var(--verde-bg); color: var(--verde); }
.badge-estatus-debe { background: var(--rojo-bg); color: var(--rojo); }
.badge-estatus-por_pagar { background: var(--ambar-bg, #fef3c7); color: var(--ambar, #b45309); }
.badge-estatus-exento { background: var(--azul-bg); color: var(--azul); }
.badge-estatus-no_aplica { background: var(--gris-bg); color: var(--gris); }
.psico-pago-mes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--borde, #e5ebe7); }
.psico-pago-mes:last-child { border-bottom: 0; }
.psico-pago-mes-nombre { font-weight: 700; min-width: 9.5rem; }
.psico-pago-mes-info { flex: 1 1 12rem; font-size: 0.82rem; color: var(--texto-suave, #5b6b62); }
.psico-pago-mes form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.psico-pago-mes .form-select, .psico-pago-mes .form-control { width: auto; min-width: 8.5rem; padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.85rem; }
.psico-pago-meses-mini { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Psicología → Pagos: tabla alumno × mes (la primera columna se queda fija al deslizar en el celular) */
.psico-pagos-tabla table th[scope="row"] { position: sticky; left: 0; background: var(--card-background, #fff); z-index: 1; min-width: 11rem; white-space: normal; }
/* Bootstrap pinta color y fondo de cada celda con sus variables: se cambian esas para que gane el color del estado. */
.psico-pagos-tabla .table td[class*="psico-celda-"] { min-width: 8.5rem; vertical-align: middle; }
.psico-celda-pago { display: block; font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.psico-celda-pago .bi { font-size: 1rem; vertical-align: -0.12em; }
.psico-celda-sesiones { display: block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--gris, #6b7280); white-space: nowrap; }
.psico-celda-sesiones.completas { color: var(--verde); font-weight: 700; }
.psico-puntos { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 0.25rem; }
.psico-puntos i { width: 8px; height: 8px; border-radius: 50%; background: #dfe6e1; display: inline-block; }
.psico-puntos i.si { background: var(--verde); }
.psico-pagos-tabla .table td.psico-celda-pagado { --bs-table-color-state: var(--verde); color: var(--verde); }
.psico-pagos-tabla .table td.psico-celda-exento { --bs-table-color-state: var(--azul); color: var(--azul); }
.psico-pagos-tabla .table td.psico-celda-debe { --bs-table-color-state: var(--rojo); --bs-table-bg-state: rgba(220, 38, 38, 0.05); color: var(--rojo); }
.psico-pagos-tabla .table td.psico-celda-por_pagar { --bs-table-color-state: #b45309; --bs-table-bg-state: rgba(217, 119, 6, 0.06); color: #b45309; }
.psico-pagos-tabla .table td.psico-celda-pagado { --bs-table-bg-state: rgba(22, 163, 74, 0.05); }

/* Ticket de pago de un mes: botones grandes, a la derecha en computadora y a todo lo ancho en el celular. */
.psico-ticket-botones { display: flex; gap: 0.5rem; margin-left: auto; }
.psico-ticket-botones .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; font-weight: 700; border-radius: 12px; }
.psico-ticket-botones .btn .bi { font-size: 1.1rem; }
@media (max-width: 575.98px) {
    .psico-ticket-botones { width: 100%; }
    .psico-ticket-botones .btn { flex: 1; justify-content: center; }
}
/* Ventana "Ver pagos" */
.ver-pagos-resumen { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: 0.85rem 1rem; border-radius: 14px; background: var(--bg-sutil, #f4f8f1); margin-bottom: 0.85rem; }
.ver-pagos-meses .card { box-shadow: none; border: 0; padding: 0; margin: 0; background: transparent; }
.ver-pagos-meses .card-header { padding-left: 0; padding-right: 0; }

/* Novedades del sistema al iniciar sesión (app/anuncios.php, includes/_modal-anuncio.php): presentación por diapositivas */
body.anuncio-abierto { overflow: hidden; }
.nv-overlay { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(4, 24, 13, .62); backdrop-filter: blur(8px); animation: nv-entra .25s ease; }
.nv-overlay.nv-saliendo { opacity: 0; transition: opacity .2s ease; }
.nv-modal { position: relative; width: min(640px, 100%); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; overflow: hidden;
    background: var(--card-background, #fff); border-radius: 30px; box-shadow: 0 40px 100px rgba(0, 0, 0, .4); animation: nv-sube .4s cubic-bezier(.2, .9, .3, 1.15); }
.nv-arriba { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; color: #fff; }
.nv-etiqueta { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .16);
    font-size: .74rem; font-weight: 700; backdrop-filter: blur(4px); }
.nv-contador { margin-left: auto; font-size: .78rem; font-weight: 700; opacity: .85; }
.nv-cerrar { width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; }
.nv-cerrar:hover { background: rgba(255, 255, 255, .28); }
.nv-pista { flex: 1; overflow-y: auto; }
.nv-diapo.nv-desde-der { animation: nv-der .35s ease; }
.nv-diapo.nv-desde-izq { animation: nv-izq .35s ease; }
.nv-portada { position: relative; overflow: hidden; padding: 4.2rem 2rem 1.8rem; text-align: center; color: #fff;
    background: linear-gradient(150deg, var(--c1), var(--c2));
    background: radial-gradient(500px 240px at 85% -10%, color-mix(in srgb, var(--c3) 55%, transparent), transparent 60%), linear-gradient(150deg, var(--c1), var(--c2)); }
.nv-aro { position: absolute; width: 260px; height: 260px; right: -90px; top: -90px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .18); }
.nv-aro-2 { width: 160px; height: 160px; left: -60px; right: auto; top: auto; bottom: -70px; border-style: solid; border-color: rgba(255, 255, 255, .1); }
.nv-icono { position: relative; width: 84px; height: 84px; margin: 0 auto 1rem; border-radius: 28px; display: grid; place-items: center; overflow: hidden;
    background: rgba(255, 255, 255, .16); box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 14px 30px rgba(0, 0, 0, .2); font-size: 2.4rem; animation: nv-flota 4s ease-in-out infinite; }
.nv-icono .nv-icono-img, .nv-icono img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.nv-saludo { margin: 0 0 .25rem; font-size: .85rem; color: rgba(255, 255, 255, .8); }
.nv-portada h2 { position: relative; margin: 0; color: #fff !important; font-size: clamp(1.45rem, 3.6vw, 1.95rem); font-weight: 800; letter-spacing: -.01em; }
.nv-cuerpo { padding: 1.4rem 1.8rem 1.2rem; }
.nv-ejemplo { margin: 0 0 1rem; }
.nv-ejemplo img { display: block; width: 100%; aspect-ratio: 1200 / 680; object-fit: cover; border-radius: 14px; border: 1px solid var(--border-light, #dfe7e2);
    box-shadow: 0 6px 18px rgba(6, 51, 26, .08); }
.nv-ejemplo figcaption { margin-top: .35rem; font-size: .72rem; color: var(--text-muted-green, #5b6b5e); text-align: center; }
.nv-texto { margin: 0 0 1rem; font-size: .98rem; line-height: 1.65; color: var(--text-main, #14261b); }
.nv-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.nv-cap { display: flex; gap: .65rem; padding: .75rem; border-radius: 16px; background: var(--bg-sutil, #f4f8f1); opacity: 0; animation: nv-cap .4s ease forwards;
    animation-delay: calc(.06s * var(--k) + .15s); }
.nv-cap > i { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #0e682f; color: #fff; }
.nv-cap strong { display: block; font-size: .86rem; }
.nv-cap span { display: block; font-size: .76rem; line-height: 1.4; color: var(--text-muted-green, #5b6b5e); }
.nv-puntos { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.nv-puntos li { display: flex; gap: .55rem; font-size: .9rem; line-height: 1.5; color: var(--text-main, #14261b); }
.nv-puntos .bi { color: var(--c1, #0e682f); margin-top: .15rem; }
.nv-probar { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: 999px; background: rgba(14, 104, 47, .1); background: color-mix(in srgb, var(--c1) 10%, transparent);
    color: var(--c1, #0e682f); font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .15s, gap .15s; }
.nv-probar:hover { background: rgba(14, 104, 47, .16); background: color-mix(in srgb, var(--c1) 18%, transparent); color: var(--c1); gap: .7rem; }
.nv-abajo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.8rem 1.3rem; border-top: 1px solid var(--border-light, #e5ece1); }
.nv-puntitos { display: flex; gap: .4rem; }
.nv-puntito { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--border-light, #d6e0d9); transition: width .25s, background .25s; }
.nv-puntito.activo { width: 26px; background: #0e682f; }
.nv-botones { display: flex; gap: .5rem; }
.nv-botones .btn { border-radius: 999px; padding-left: 1.1rem; padding-right: 1.1rem; font-weight: 700; }
@keyframes nv-entra { from { opacity: 0; } }
@keyframes nv-sube { from { transform: translateY(28px) scale(.96); opacity: 0; } }
@keyframes nv-der { from { opacity: 0; transform: translateX(30px); } }
@keyframes nv-izq { from { opacity: 0; transform: translateX(-30px); } }
@keyframes nv-cap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nv-flota { 50% { transform: translateY(-5px); } }
@media (max-width: 575.98px) {
    .nv-portada { padding: 4rem 1.2rem 1.4rem; }
    .nv-cuerpo { padding: 1.1rem 1.2rem 1rem; }
    .nv-abajo { flex-direction: column-reverse; align-items: stretch; padding: .8rem 1.2rem 1.1rem; }
    .nv-puntitos { justify-content: center; }
    .nv-botones .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .nv-overlay, .nv-modal, .nv-cap, .nv-icono, .nv-diapo { animation: none !important; opacity: 1; } }
/* Que la presentación quepa en la pantalla y "Siguiente" se vea sin bajar: la imagen nunca pasa de ~30% del alto
   (se achica sin recortarse), y en el iPhone se mide con dvh para que la barra de Safari no tape los botones. */
.nv-modal { max-height: calc(100dvh - 2rem); }
.nv-ejemplo img { width: auto; height: auto; max-width: 100%; max-height: min(30vh, 280px); aspect-ratio: auto; margin: 0 auto; }
/* La diapositiva con la lista de lo que hace Patty: más ancha, para que las tarjetas vayan en 3 columnas y no haya que bajar. */
.nv-modal:has(.nv-diapo:not([hidden]) .nv-caps) { width: min(860px, 100%); }
.nv-modal:has(.nv-diapo:not([hidden]) .nv-caps) .nv-caps { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-height: 860px) {
    .nv-portada { padding: 3.3rem 2rem 1.1rem; }
    .nv-icono { width: 64px; height: 64px; margin-bottom: .6rem; border-radius: 22px; }
    .nv-portada h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
    .nv-cuerpo { padding-top: 1rem; }
    .nv-abajo { padding-top: .7rem; padding-bottom: .9rem; }
}
@media (max-width: 575.98px) {
    .nv-overlay { padding: .6rem; }
    .nv-modal { max-height: calc(100dvh - 1.2rem); }
    .nv-ejemplo img { max-height: 24vh; }
    .nv-modal .nv-caps, .nv-modal:has(.nv-diapo:not([hidden]) .nv-caps) .nv-caps { grid-template-columns: 1fr 1fr; gap: .45rem; }
    .nv-cap { padding: .55rem; gap: .5rem; align-items: center; }
    .nv-cap > i { flex-basis: 28px; height: 28px; border-radius: 9px; font-size: .85rem; }
    .nv-cap strong { font-size: .78rem; line-height: 1.25; }
    .nv-cap span { display: none; }
}

/* Archivos en el chat de Patty: vista previa antes de mandar y dentro de los mensajes */
.patty-adjunto-previa { display: flex; align-items: center; gap: .5rem; padding: .5rem; margin-top: .5rem; border: 1px dashed var(--border-light, #d9e4dc); border-radius: 14px; }
.patty-adjunto-quitar { border: 0; background: transparent; color: var(--text-muted, #5b6b62); padding: .25rem .4rem; border-radius: 8px; margin-left: auto; }
.patty-adjunto-quitar:hover { background: rgba(0, 0, 0, .06); }
.patty-adjunto { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; text-decoration: none; }
.patty-adjunto-img img { display: block; max-width: 220px; max-height: 180px; border-radius: 12px; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.patty-adjunto-doc { padding: .45rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .85); color: #0e682f; font-weight: 600; font-size: .85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patty-adjunto-doc .bi { font-size: 1.15rem; }
.patty-burbuja .patty-adjunto, .burbuja .patty-adjunto { margin-top: .4rem; display: flex; }
.patty-burbuja-clip { border: 0; background: transparent; color: var(--text-muted, #5b6b62); font-size: 1.1rem; padding: 0 .35rem; }
.patty-burbuja-clip:hover { color: #0e682f; }

/* Burbuja de Patty 2026-10 (v1.0.0): más amplia, encabezado con su cara y estado, mensajes y caja de texto renovados */
#patty-burbuja-panel { width: 390px; height: 580px; max-height: 80vh; border-radius: 24px; }
.patty-burbuja-header { padding: .8rem 1rem; background: radial-gradient(260px 120px at 90% -30%, rgba(149, 192, 30, .45), transparent 60%), linear-gradient(135deg, #0e682f, #06331a); }
.patty-burbuja-titulo { display: inline-flex; align-items: center; gap: .6rem; }
.patty-burbuja-titulo strong { display: block; font-size: .98rem; line-height: 1.1; }
.patty-burbuja-titulo small { display: block; font-weight: 500; font-size: .72rem; opacity: .85; }
.patty-burbuja-cara { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .15); display: grid; place-items: center; overflow: hidden; font-size: 1.05rem; }
.patty-en-linea { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #b0f536; margin-right: .15rem; vertical-align: 1px; }
.patty-burbuja-chat { padding: 1rem; gap: .7rem; background: linear-gradient(180deg, var(--bg-sutil, #f4f8f1), transparent 120px); }
.patty-burbuja-msg .burbuja { max-width: 86%; padding: .6rem .85rem; border-radius: 16px; font-size: .86rem; line-height: 1.5; animation: patty-aparece-b .2s ease; }
.patty-burbuja-msg-assistant .burbuja { background: var(--card-background, #fff); border: 1px solid var(--border-light, #e5ece1); border-bottom-left-radius: 5px; box-shadow: 0 2px 8px rgba(6, 51, 26, .05); }
.patty-burbuja-msg-user .burbuja { background: linear-gradient(135deg, #12813b, #0e682f); border-bottom-right-radius: 5px; box-shadow: 0 3px 10px rgba(14, 104, 47, .2); }
.patty-burbuja-form { align-items: center; margin: .5rem .7rem .7rem; padding: .25rem .25rem .25rem .35rem; border: 1px solid var(--border-light, #e5ece1); border-radius: 999px; background: var(--card-background, #fff); }
.patty-burbuja-form input[type="text"] { border: 0; background: transparent; padding: .45rem .3rem; }
.patty-burbuja-form button[type="submit"] { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #12813b, #0e682f); }
.patty-burbuja-form .patty-burbuja-clip { width: 34px; height: 34px; border-radius: 50%; background: transparent; color: var(--text-muted-green, #5b6b5e); }
.patty-burbuja-form .patty-burbuja-clip:hover { background: var(--bg-sutil, #f4f8f1); color: #0e682f; }
#patty-burbuja-panel > .patty-adjunto-previa { margin: 0 .7rem; }
@keyframes patty-aparece-b { from { opacity: 0; transform: translateY(5px); } }
@media (max-width: 480px) { #patty-burbuja-panel { height: 75vh; } }
/* Las respuestas de Patty ya traen sus saltos como <br> (patty_formatear): sin pre-wrap, si no cada salto se ve doble. */
.patty-msg-assistant .patty-burbuja, .patty-burbuja-msg-assistant .burbuja { white-space: normal; }

/* Cuadrito de archivo (estilo Gemini): ícono del formato o miniatura, nombre y "PDF · 245 KB" — chat de Patty */
.patty-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.patty-chip { display: inline-flex; align-items: center; gap: .65rem; max-width: 300px; padding: .45rem .75rem .45rem .45rem; border: 1px solid var(--border-light, #dfe7e2);
    border-radius: 14px; background: var(--card-background, #fff); color: var(--text-main, #14261b); text-decoration: none; position: relative;
    box-shadow: 0 1px 4px rgba(6, 51, 26, .05); transition: border-color .15s, box-shadow .15s; }
a.patty-chip:hover { border-color: rgba(14, 104, 47, .4); box-shadow: 0 4px 12px rgba(6, 51, 26, .08); color: var(--text-main, #14261b); }
.patty-chip-ico { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; display: grid; place-items: center; font-size: .66rem; font-weight: 800;
    letter-spacing: .03em; color: #fff; background: #64748b; overflow: hidden; }
.patty-ico-pdf { background: #dc2626; }
.patty-ico-txt { background: #475569; }
.patty-ico-docx { background: #2b5fb8; }
.patty-ico-xlsx { background: #1f8a4c; }
.patty-ico-csv { background: #0f766e; }
.patty-chip-tool .patty-chip-ico { font-size: 1.15rem; }
.patty-chip-ir { margin-left: .15rem; color: var(--text-muted-green, #5b6b5e); font-size: .95rem; }
a.patty-chip:hover .patty-chip-ir { color: #0e682f; }
.patty-entregas { margin: .65rem 0 0; }
.patty-entrega { display: inline-flex; align-items: center; gap: .35rem; }
.patty-chip-correo { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border-light, #dfe7e2); background: var(--card-background, #fff);
    color: var(--text-muted-green, #5b6b5e); display: grid; place-items: center; font-size: 1rem; padding: 0; transition: border-color .15s, color .15s, background .15s; }
.patty-chip-correo:hover { border-color: rgba(14, 104, 47, .4); color: #0e682f; }
.patty-chip-correo.enviado { background: #dcfce7; border-color: #86efac; color: #166534; }
.patty-ico-img { background: var(--bg-sutil, #f1f5ef); }
.patty-chip-ico img { width: 100%; height: 100%; object-fit: cover; }
.patty-chip-txt { display: grid; min-width: 0; line-height: 1.25; }
.patty-chip .patty-chip-txt strong { font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.patty-chip .patty-chip-txt small { font-size: .72rem; color: var(--text-muted-green, #5b6b5e); }
.patty-chip-caducado { opacity: .6; }
.patty-chip-quitar { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border: 0; border-radius: 50%; display: grid; place-items: center;
    background: #14261b; color: #fff; font-size: .85rem; padding: 0; }
.patty-chip-quitar:hover { background: #b91c1c; }
.patty-burbuja-msg .burbuja .patty-chip { max-width: 240px; }
.patty-burbuja-msg .burbuja p { margin: 0 0 .4rem; }
.patty-burbuja-msg .burbuja p:last-child { margin: 0; }
.patty-burbuja-msg .burbuja ul, .patty-burbuja-msg .burbuja ol { margin: .2rem 0 .4rem; padding-left: 1.1rem; }
.patty-burbuja-msg .burbuja h4 { font-size: .9rem; font-weight: 800; margin: .5rem 0 .25rem; }

/* === Sin huecos (8 oct 2026): el contenido usa todo el ancho de la pantalla ===
   En una cuadrícula de tarjetas (.row con columnas que traen una .card), si la última fila queda incompleta sus
   tarjetas se estiran para llenarla, en vez de dejar un espacio vacío a la derecha. Las filas de formularios no se
   tocan (sus columnas no traen tarjetas). */
.row > [class*="col-"]:not(.col-auto):not([class*="col-auto"]):has(> .card, > a.card, > .stat-tarjeta) { flex-grow: 1; }

/* Encabezado de cada página en pantalla angosta (8 oct 2026): antes quedaba centrado (la regla general
   "align-items: center" le ganaba a la del celular) — el título se veía corrido y el botón ("← Caja") suelto en medio.
   Ahora: título y descripción a la izquierda, y los botones abajo, también a la izquierda. */
@media (max-width: 768px) {
    .page-header { flex-direction: column; align-items: stretch; gap: .85rem; margin-bottom: 1.4rem; }
    .page-header > div:first-child { text-align: left; }
    .page-header-acciones { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------
   Patty: personajito (máscara blanca con cuernitos, ojos negros, capa con trébol) dentro de una burbuja de cristal
   líquido de la que suben burbujitas. Parpadea, mira y saluda (admin.js). No estorba: es chica, se transparenta al
   desplazarse y el saludo sale como mucho cada 20 minutos. Su ventana de chat usa el mismo cristal.
--------------------------------------------------------------------- */
#patty-burbuja-boton.patty-orbe {
    position: relative; width: 64px; height: 64px; padding: 0; border-radius: 50%; overflow: visible;
    background: transparent; box-shadow: none; isolation: isolate; color: #fff;
    animation: patty-flotar 6s ease-in-out infinite; transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .3s;
    touch-action: none; cursor: grab;
}
.patty-orbe-liquido {
    position: absolute; inset: 0; z-index: -1;
    border-radius: 47% 53% 52% 48% / 52% 46% 54% 48%;
    background:
        radial-gradient(120% 90% at 30% 18%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 40%),
        radial-gradient(90% 70% at 70% 95%, rgba(149,192,30,.45) 0%, rgba(149,192,30,0) 60%),
        linear-gradient(160deg, rgba(86,178,124,.8) 0%, rgba(22,112,60,.86) 52%, rgba(6,56,28,.94) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 14px 32px -8px rgba(6,51,26,.5), 0 2px 6px rgba(6,51,26,.25),
                inset 0 2px 4px rgba(255,255,255,.7), inset 0 -10px 18px rgba(0,0,0,.22);
    animation: patty-liquido 14s ease-in-out infinite;
}
.patty-orbe-interior { position: absolute; inset: 2px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.patty-orbe-avatar { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; }
.patty-orbe-brillo {
    position: absolute; top: 7px; left: 12px; width: 22px; height: 10px; border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)); transform: rotate(-26deg); pointer-events: none;
}
/* El personaje */
.patty-pj { display: block; overflow: visible; }
.patty-pj-orbe { width: 92%; height: 92%; }
.patty-pj .pp-flota { animation: pp-flota 5s ease-in-out infinite; }
.patty-pj .pp-sombra { transform-box: fill-box; transform-origin: center; animation: pp-sombra 5s ease-in-out infinite; }
.patty-pj .pp-cabeza { transform: translate(calc(var(--patty-x, 0px) * 1.6), calc(var(--patty-y, 0px) * 1.4)); transition: transform .4s ease-out; }
.patty-pj .pp-ojos { transform: translate(calc(var(--patty-px, 0px) * 1.5), calc(var(--patty-py, 0px) * 1.3)); transition: transform .3s ease-out; }
.patty-pj .pp-ojo { transform-box: fill-box; transform-origin: center; transition: transform .09s ease-in; }
.patty-pj .pp-cachete { transition: opacity .3s; }
.patty-orbe.parpadea .pp-ojo { transform: scaleY(.08); }
.patty-orbe:hover .pp-ojo, .patty-orbe.contenta .pp-ojo { transform: scaleY(.7); }
.patty-orbe:hover .pp-cachete, .patty-orbe.contenta .pp-cachete { opacity: .75; }
.patty-pj-avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 35% 25%, #ffffff, #eef5ec 75%); border: 1px solid rgba(14,104,47,.12);
    box-shadow: 0 6px 16px -6px rgba(6,51,26,.35), inset 0 1px 0 #fff; }
.patty-pj-avatar .patty-pj { width: 104%; height: 104%; }
/* Burbujitas que suben dentro de la burbuja */
.patty-burbujitas { position: absolute; inset: 0; pointer-events: none; }
.patty-burbujitas i {
    position: absolute; bottom: -8px; width: 5px; height: 5px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 60%, rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.55); animation: patty-sube 7s ease-in infinite; opacity: 0;
}
.patty-burbujitas i:nth-child(1) { left: 14%; animation-delay: 0s; }
.patty-burbujitas i:nth-child(2) { left: 74%; width: 4px; height: 4px; animation-delay: 2.4s; animation-duration: 8s; }
.patty-burbujitas i:nth-child(3) { left: 30%; width: 3px; height: 3px; animation-delay: 4.6s; }
.patty-burbujitas i:nth-child(4) { left: 84%; width: 5px; height: 5px; animation-delay: 6s; animation-duration: 9s; }
.patty-burbujitas i:nth-child(n+5) { display: none; } /* tranquila: solo 4 burbujitas */

.patty-orbe:hover, .patty-orbe:focus-visible { transform: translateY(-3px) scale(1.07); animation-play-state: paused; }
.patty-orbe:active { transform: scale(.94); }
#patty-burbuja.en-scroll .patty-orbe { opacity: .45; transform: scale(.9); }
#patty-burbuja.arrastrando { transition: none; }
#patty-burbuja.arrastrando .patty-orbe { cursor: grabbing; transform: scale(1.1); animation: none; }
#patty-burbuja.arrastrando .patty-globo { display: none; }
#patty-burbuja.acomodando { transition: left .35s cubic-bezier(.34,1.3,.64,1), right .35s cubic-bezier(.34,1.3,.64,1), bottom .35s ease; }
#patty-burbuja.a-la-izq .patty-globo { right: auto; left: -4px; border-radius: 18px 18px 18px 6px; }
#patty-burbuja.a-la-izq .patty-globo::after { right: auto; left: 24px; }
/* Mientras "habla" (bip-bip) da saltitos */
.patty-orbe.hablando .patty-pj .pp-cabeza { animation: pp-habla .11s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center bottom; }
@keyframes pp-habla { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-2.5px) scaleY(1.04); } }
#patty-burbuja.a-la-izq #patty-burbuja-panel { right: auto; left: 1.25rem; }
/* Con su carita (por defecto) Patty va sola, flotando, sin la burbuja verde ni burbujitas */
#patty-burbuja.solo-cara .patty-orbe-liquido, #patty-burbuja.solo-cara .patty-orbe-brillo, #patty-burbuja.solo-cara .patty-burbujitas { display: none; }
#patty-burbuja.solo-cara .patty-orbe-interior { overflow: visible; inset: 0; }
#patty-burbuja.solo-cara .patty-pj-orbe { width: 132%; height: 132%; filter: drop-shadow(0 8px 12px rgba(6,51,26,.22)) drop-shadow(0 1px 2px rgba(6,51,26,.18)); }
[data-tema="oscuro"] #patty-burbuja.solo-cara .patty-pj-orbe { filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
#patty-burbuja.en-scroll .patty-globo { opacity: 0; pointer-events: none; }

/* Globito de saludo (cristal) */
.patty-globo {
    position: absolute; right: -4px; bottom: 76px; width: max-content; max-width: 250px;
    padding: .65rem 3.2rem .7rem .9rem; border-radius: 18px 18px 6px 18px;
    background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,.7); box-shadow: 0 12px 32px -8px rgba(6,51,26,.35), inset 0 1px 0 rgba(255,255,255,.8);
    color: #14261b; font-size: .86rem; line-height: 1.35; cursor: pointer;
    animation: patty-globo-entra .45s cubic-bezier(.34,1.56,.64,1) both; transition: opacity .3s;
}
.patty-globo strong { color: #0e682f; }
.patty-globo-botones { position: absolute; top: 4px; right: 4px; display: flex; gap: 0; }
.patty-globo::after { content: ""; position: absolute; right: 24px; bottom: -7px; width: 14px; height: 14px; transform: rotate(45deg);
    background: inherit; border-right: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.7); border-radius: 0 0 4px 0; }
.patty-globo .bi-lightbulb { color: #d39e00; }
.patty-globo-accion { display: block; margin-top: .3rem; font-weight: 700; color: #0e682f; font-size: .8rem; }
[data-tema="oscuro"] .patty-globo-accion { color: #95c01e; }
.patty-globo-x { border: 0; background: transparent; color: #5b6b5e; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; }
.patty-globo-x:hover { background: rgba(0,0,0,.06); }
.patty-globo.sale { animation: patty-globo-sale .3s ease-in both; }
[data-tema="oscuro"] .patty-globo { background: rgba(20,38,27,.78); border-color: rgba(255,255,255,.12); color: #e6f2da; }
[data-tema="oscuro"] .patty-globo strong { color: #95c01e; }
[data-tema="oscuro"] .patty-globo-x { color: #c9dcc0; }

/* Ventana de chat de Patty: el mismo cristal, con burbujitas en el encabezado */
#patty-burbuja-panel {
    background: rgba(255,255,255,.8) !important; -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid rgba(255,255,255,.7) !important; border-radius: 26px !important; overflow: hidden;
    box-shadow: 0 24px 60px -16px rgba(6,51,26,.45), inset 0 1px 0 rgba(255,255,255,.9) !important;
    animation: patty-panel-entra .38s cubic-bezier(.34,1.4,.64,1) both;
}
[data-tema="oscuro"] #patty-burbuja-panel { background: rgba(14,30,21,.82) !important; border-color: rgba(255,255,255,.1) !important; }
#patty-burbuja-panel .patty-burbuja-header {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(150deg, rgba(30,120,66,.92), rgba(6,51,26,.95)) !important;
}
#patty-burbuja-panel .patty-burbuja-header::before, #patty-burbuja-panel .patty-burbuja-header::after {
    content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(255,255,255,.08) 65%); border: 1px solid rgba(255,255,255,.35);
    animation: patty-sube-largo 6s ease-in infinite;
}
#patty-burbuja-panel .patty-burbuja-header::before { width: 9px; height: 9px; right: 30%; bottom: -12px; }
#patty-burbuja-panel .patty-burbuja-header::after { width: 6px; height: 6px; right: 58%; bottom: -12px; animation-delay: 2.6s; animation-duration: 7s; }
.patty-burbuja-cara .patty-pj-avatar { width: 34px; height: 34px; }
.patty-burbuja-bienvenida .patty-pj-avatar { width: 84px; height: 84px; margin: 0 auto .7rem; box-shadow: 0 14px 30px -10px rgba(6,51,26,.4), inset 0 1px 0 #fff; }
#patty-burbuja-panel .patty-burbuja-msg-assistant .burbuja { background: rgba(255,255,255,.75); border: 1px solid rgba(14,104,47,.1); }
[data-tema="oscuro"] #patty-burbuja-panel .patty-burbuja-msg-assistant .burbuja { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.08); }
#patty-burbuja-panel .patty-burbuja-form { background: rgba(255,255,255,.5); }
[data-tema="oscuro"] #patty-burbuja-panel .patty-burbuja-form { background: rgba(255,255,255,.04); }

@keyframes pp-flota { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2.5px); } }
@keyframes pp-sombra { 0%, 100% { transform: scaleX(1); opacity: .3; } 50% { transform: scaleX(.78); opacity: .16; } }
@keyframes patty-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes patty-liquido {
    0%, 100% { border-radius: 47% 53% 52% 48% / 52% 46% 54% 48%; }
    25% { border-radius: 53% 47% 46% 54% / 47% 54% 46% 53%; }
    50% { border-radius: 50% 50% 55% 45% / 55% 50% 50% 45%; }
    75% { border-radius: 45% 55% 49% 51% / 48% 52% 48% 52%; }
}
@keyframes patty-sube {
    0% { transform: translate(0, 0) scale(.6); opacity: 0; }
    15% { opacity: .9; }
    50% { transform: translate(3px, -34px) scale(1); }
    85% { opacity: .7; }
    100% { transform: translate(-2px, -70px) scale(1.15); opacity: 0; }
}
@keyframes patty-sube-largo {
    0% { transform: translate(0, 0) scale(.6); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: translate(-6px, -80px) scale(1.2); opacity: 0; }
}
@keyframes patty-globo-entra { from { opacity: 0; transform: translateY(8px) scale(.9); transform-origin: bottom right; } to { opacity: 1; transform: none; } }
@keyframes patty-globo-sale { to { opacity: 0; transform: translateY(6px) scale(.95); } }
@keyframes patty-panel-entra { from { opacity: 0; transform: translateY(14px) scale(.96); transform-origin: bottom right; } to { opacity: 1; transform: none; } }
@media (max-width: 768px) {
    #patty-burbuja-boton.patty-orbe { width: 56px; height: 56px; }
    .patty-globo { bottom: 68px; max-width: min(230px, 70vw); font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
    #patty-burbuja-boton.patty-orbe, .patty-orbe-liquido, .patty-globo, .patty-burbujitas i, #patty-burbuja-panel, .patty-pj .pp-flota, .patty-pj .pp-sombra,
    #patty-burbuja-panel .patty-burbuja-header::before, #patty-burbuja-panel .patty-burbuja-header::after { animation: none; }
    .patty-burbujitas { display: none; }
}

/* Expresiones de Patty (como EVE): data-expr en la burbuja (o en su carita del chat) cambia sus ojitos */
.patty-pj .pp-ex { opacity: 0; transition: opacity .12s; }
.patty-pj .pp-ojos { transition: opacity .12s; }
[data-expr] .patty-pj .pp-ojos, [data-expr] .patty-pj .pp-cachete { opacity: 0; }
[data-expr="feliz"] .pp-ex-feliz, [data-expr="grito"] .pp-ex-grito, [data-expr="mareo"] .pp-ex-mareo, [data-expr="dormida"] .pp-ex-dormida,
[data-expr="sorpresa"] .pp-ex-sorpresa, [data-expr="guino"] .pp-ex-guino, [data-expr="curiosa"] .pp-ex-curiosa, [data-expr="pensando"] .pp-ex-pensando,
[data-expr="estrellas"] .pp-ex-estrellas, [data-expr="enamorada"] .pp-ex-enamorada, [data-expr="triste"] .pp-ex-triste,
[data-expr="enojada"] .pp-ex-enojada, [data-expr="risa"] .pp-ex-risa { opacity: 1; }
[data-expr="feliz"] .patty-pj .pp-cachete, [data-expr="estrellas"] .patty-pj .pp-cachete, [data-expr="enamorada"] .patty-pj .pp-cachete,
[data-expr="risa"] .patty-pj .pp-cachete, [data-expr="guino"] .patty-pj .pp-cachete { opacity: .85; }
[data-expr="enojada"] .patty-pj .pp-cachete { opacity: .9; fill: #ff6b6b; }
.patty-pj .pp-cabeza, .patty-pj .pp-ex-enamorada path, .patty-pj .pp-estrella, .patty-pj .pp-puntos circle { transform-box: fill-box; transform-origin: center; }
[data-expr="feliz"] .pp-cabeza, [data-expr="estrellas"] .pp-cabeza { animation: pp-brinco .45s cubic-bezier(.34,1.8,.64,1); transform-origin: center bottom; }
[data-expr="risa"] .pp-cabeza { animation: pp-risa .16s ease-in-out 6 alternate; transform-origin: center bottom; }
[data-expr="grito"] .pp-cabeza { animation: pp-tiembla .08s linear infinite; }
[data-expr="enojada"] .pp-cabeza { animation: pp-tiembla .1s linear 5; }
[data-expr="curiosa"] .pp-cabeza { transform: rotate(-8deg); transition: transform .3s; }
[data-expr="triste"] .pp-cabeza { transform: translateY(2px) scaleY(.97); transition: transform .3s; }
[data-expr="mareo"] .pp-espiral { transform-box: fill-box; transform-origin: center; animation: pp-espiral 1.1s linear infinite; }
[data-expr="mareo"] .pp-cabeza { animation: pp-mareo 1.6s ease-in-out infinite; transform-origin: center bottom; }
[data-expr="risa"] .pp-lagrima { transform-box: fill-box; transform-origin: center top; animation: pp-lagrima .9s ease-in infinite; }
@keyframes pp-espiral { to { transform: rotate(360deg); } }
@keyframes pp-lagrima { 0% { opacity: 0; transform: translateY(-2px) scale(.6); } 30% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }
[data-expr="enamorada"] .pp-ex-enamorada path { animation: pp-late .6s ease-in-out infinite; }
[data-expr="estrellas"] .pp-estrella { animation: pp-gira 1.6s ease-in-out infinite; }
[data-expr="pensando"] .pp-puntos circle { animation: pp-punto 1.2s ease-in-out infinite; opacity: .3; }
[data-expr="pensando"] .pp-puntos circle:nth-child(2) { animation-delay: .2s; }
[data-expr="pensando"] .pp-puntos circle:nth-child(3) { animation-delay: .4s; }
[data-expr="dormida"] .pp-flota { animation-duration: 7s; }
[data-expr="dormida"] .pp-zz text { animation: pp-zz 2.4s ease-in-out infinite; }
[data-expr="dormida"] .pp-zz text + text { animation-delay: .8s; }
.patty-burbuja-cara .patty-pj-avatar .patty-pj { overflow: visible; }
@keyframes pp-brinco { 0% { transform: scale(1, 1); } 35% { transform: scale(1.08, .9) translateY(2px); } 70% { transform: scale(.96, 1.06) translateY(-4px); } 100% { transform: none; } }
@keyframes pp-risa { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-2.5px) rotate(2deg); } }
@keyframes pp-tiembla { 0% { transform: translate(-1.6px, .6px); } 50% { transform: translate(1.6px, -.6px); } 100% { transform: translate(-1.6px, .6px); } }
@keyframes pp-mareo { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes pp-late { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.22); } }
@keyframes pp-gira { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(18deg) scale(1.1); } }
@keyframes pp-punto { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes pp-zz { 0% { opacity: 0; transform: translateY(4px); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
    [data-expr] .pp-cabeza, [data-expr] .pp-espiral, [data-expr] .pp-lagrima, [data-expr] .pp-zz text, [data-expr] .pp-ex path, [data-expr] .pp-puntos circle { animation: none; }
}
.patty-globo .bi-bell { color: #0e682f; }
[data-tema="oscuro"] .patty-globo .bi-bell { color: #95c01e; }

/* Patty en el chat, encabezados y novedades: solo su carita (sin cuadro ni círculo de fondo) y siempre viva:
   flota, parpadea y echa miradas (la burbuja flotante lo hace con admin.js). */
.patty-pj-avatar { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; border-radius: 0 !important; }
.patty-pj-avatar .patty-pj { width: 150% !important; height: 150% !important; margin: -25%; overflow: visible; filter: drop-shadow(0 3px 5px rgba(6, 51, 26, .18)); }
.pc-av:has(.patty-pj-avatar), .patty-burbuja-cara:has(.patty-pj-avatar), .nv-icono:has(.patty-pj-avatar),
.pa-avatar:has(.patty-pj-avatar), .pa-personaje-cara:has(.patty-pj) { background: transparent !important; box-shadow: none !important; border: 0 !important; overflow: visible !important; }
.patty-burbuja-bienvenida .patty-pj-avatar { box-shadow: none !important; }
.patty-pj-avatar .pp-ojo, .pa-personaje-cara .pp-ojo { transform-box: fill-box; transform-origin: center; animation: pp-parpadeo 4.2s infinite; }
.patty-pj-avatar .pp-ojos, .pa-personaje-cara .pp-ojos { animation: pp-mirar 8s ease-in-out infinite; }
.patty-pj-avatar .pp-ojo + .pp-ojo { animation-delay: .02s; }
[data-expr] .patty-pj-avatar .pp-ojos { animation: none; }
@keyframes pp-parpadeo { 0%, 92%, 97%, 100% { transform: scaleY(1); } 94.5% { transform: scaleY(.08); } }
@keyframes pp-mirar { 0%, 18%, 100% { transform: translate(0, 0); } 25%, 40% { transform: translate(3px, -1px); } 48%, 62% { transform: translate(-3px, 1px); } 70%, 85% { transform: translate(1px, 2px); } }
@media (prefers-reduced-motion: reduce) { .patty-pj-avatar .pp-ojo, .patty-pj-avatar .pp-ojos, .pa-personaje-cara .pp-ojo, .pa-personaje-cara .pp-ojos { animation: none; } }

/* =====================================================================================================================
   Inicio "pro" (admin/index.php, v1.5): encabezado tipo banner con Patty y acciones, y todo más junto — sin huecos
   entre tarjetas ni tarjetas vacías gigantes. Solo afecta al Inicio (.inicio-hero / .inicio-vista).
   ===================================================================================================================== */
body:has(.inicio-hero) .page-header { display: none; }
.inicio-hero {
    position: relative; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
    padding: 1.4rem 1.6rem; margin-bottom: 0.9rem; border-radius: 20px;
    background: radial-gradient(120% 140% at 100% 0%, #2a7a45 0%, var(--brand-forest-medium) 45%, var(--brand-forest-dark) 100%);
    color: #fff; box-shadow: 0 14px 34px rgba(1, 63, 22, 0.22);
}
.inicio-hero::before, .inicio-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.inicio-hero::before { width: 360px; height: 360px; right: -90px; top: -190px; border: 2px solid rgba(255, 255, 255, 0.08); }
.inicio-hero::after { width: 220px; height: 220px; right: 140px; bottom: -150px; border: 2px dashed rgba(176, 245, 54, 0.2); }
.inicio-hero-texto { position: relative; z-index: 1; flex: 1 1 420px; min-width: 0; }
.inicio-hero-fecha { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); }
.inicio-hero h1 { margin: 0.15rem 0 0.7rem; font-size: 1.65rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.inicio-hero-patty { display: flex; align-items: center; gap: 0.75rem; }
.inicio-hero-cara { width: 52px; height: 52px; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); }
.inicio-hero-cara .patty-pj { width: 100%; height: 100%; }
.inicio-hero-pendientes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; }
.inicio-hero-dice { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-lime); margin-right: 0.15rem; }
.inicio-hero-tranquilo { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); }
.inicio-hero-pendiente {
    display: inline-flex; align-items: center; gap: 0.2rem; max-width: 100%;
    padding: 0.32rem 0.55rem 0.32rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 0.78rem; font-weight: 500; text-align: left; cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.inicio-hero-pendiente:hover { background: rgba(176, 245, 54, 0.18); border-color: rgba(176, 245, 54, 0.5); transform: translateY(-1px); }
.inicio-hero-pendiente i { color: var(--brand-lime); font-size: 1.05rem; }
.inicio-hero-acciones { position: relative; z-index: 1; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.inicio-hero-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.inicio-hero-texto { flex-basis: 360px; }
.inicio-hero .btn-lima { background: var(--brand-lime); color: var(--brand-forest-dark); font-weight: 700; border: 0; border-radius: 12px; padding: 0.55rem 1rem; }
.inicio-hero .btn-lima:hover { background: var(--brand-lime-hover); color: var(--brand-forest-dark); transform: translateY(-1px); }
.inicio-hero .btn-hero { background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 0.55rem 1rem; }
.inicio-hero .btn-hero:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.inicio-hero-vista { display: flex; justify-content: flex-end; }
.inicio-hero .vista-interruptor { background: rgba(0, 0, 0, 0.18); border-color: transparent; }
.inicio-hero .vista-boton { color: rgba(255, 255, 255, 0.75); }
.inicio-hero .vista-boton.activo { background: #fff; color: var(--brand-forest-dark); }

/* Todo junto: menos aire entre tarjetas y dentro de ellas */
.inicio-vista .row { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }
.inicio-vista .row.mb-4 { margin-bottom: 0.75rem !important; }
.inicio-vista > .card, .inicio-vista .card.mb-0 + .card { margin-bottom: 0.75rem; }
.inicio-vista .card { border-radius: 16px; }
.inicio-vista .card-header { padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
.inicio-vista .stat-tarjeta { padding: 0.9rem 1rem; gap: 0.8rem; }
.inicio-vista .stat-tarjeta .stat-icono { width: 40px; height: 40px; border-radius: 12px; font-size: 1.1rem; }
.inicio-vista .stat-tarjeta .stat-value { font-size: 1.55rem; line-height: 1.1; }
.inicio-vista .card[data-vista="botones"] .acciones-rapidas { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.inicio-vista .card[data-vista="botones"] .accion-rapida { flex: 1 1 175px; } /* la última fila se estira: sin huecos al final */
.inicio-vista .accion-rapida { padding: 0.5rem 0.7rem; border-radius: 12px; }
/* Estados vacíos del Inicio en una sola línea (no un cuadro grande en blanco) */
.inicio-vista .estado-vacio { display: flex; align-items: center; justify-content: center; gap: 0.6rem; text-align: left; padding: 0.9rem 0.5rem; }
.inicio-vista .estado-vacio > i { font-size: 1.5rem; margin: 0; display: inline-block; }
.inicio-vista .estado-vacio strong { margin: 0; font-size: 0.9rem; white-space: nowrap; }
.inicio-vista .estado-vacio p { margin: 0; font-size: 0.8rem; }
.inicio-vista .estado-vacio .btn { display: none; }
.inicio-vista .grafica-apex { min-height: 0; }

@media (max-width: 767.98px) {
    .inicio-hero { padding: 1.1rem; border-radius: 16px; }
    .inicio-hero h1 { font-size: 1.35rem; }
    .inicio-vista .card[data-vista="botones"] .accion-rapida { flex-basis: 40%; }
    .inicio-hero-acciones { align-items: flex-start; width: 100%; }
    .inicio-hero-botones, .inicio-hero-vista { justify-content: flex-start; }
}

/* Patty guía en pantalla (admin.js → pattyGuiar) */
#patty-guia-capa { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
#patty-guia-capa .pg-foco { position: fixed; left: 0; top: 0; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(6, 25, 14, .55), 0 0 0 3px #95c01e, 0 0 24px 6px rgba(149, 192, 30, .55);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), width .45s, height .45s, opacity .3s; animation: pg-latido 1.6s ease-in-out infinite; }
@keyframes pg-latido { 50% { box-shadow: 0 0 0 9999px rgba(6, 25, 14, .55), 0 0 0 5px #95c01e, 0 0 34px 10px rgba(149, 192, 30, .65); } }
#patty-guia-capa .pg-cara { position: fixed; left: 0; top: 0; width: 64px; height: 64px; transition: transform .7s cubic-bezier(.34, 1.4, .64, 1); filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
#patty-guia-capa .pg-cara svg { width: 64px; height: 64px; }
#patty-guia-capa .pg-tarjeta { position: fixed; left: 0; top: 0; width: 340px; max-width: calc(100vw - 24px); background: #fff; color: #14261b; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28); pointer-events: auto; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
#patty-guia-capa .pg-titulo { font-weight: 800; color: #0e682f; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
#patty-guia-capa .pg-texto { font-size: .98rem; line-height: 1.45; }
#patty-guia-capa .pg-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 8px; font-size: .8rem; color: #6b7a70; }
#patty-guia-capa .pg-pie button { border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 700; cursor: pointer; background: #eef4ea; color: #0e682f; }
#patty-guia-capa .pg-pie .pg-sig { background: #0e682f; color: #fff; }
#patty-guia-capa .pg-pie button:disabled { opacity: .4; cursor: default; }

/* Patty trabajando (admin.js → pattyEstadoTrabajo): cara pensando y un mundito que le da vueltas cuando busca */
body[data-patty-trabajo] .pc-top .pc-av, body[data-patty-trabajo] #patty-escribiendo .pc-av, body[data-patty-trabajo] .patty-burbuja-cara,
body[data-patty-trabajo] #patty-burbuja-escribiendo .patty-burbuja-av { overflow: visible; position: relative; }
body[data-patty-trabajo] .pc-top .patty-pj .pp-ojos, body[data-patty-trabajo] #patty-escribiendo .patty-pj .pp-ojos,
body[data-patty-trabajo] .patty-burbuja-cara .patty-pj .pp-ojos, body[data-patty-trabajo] #patty-burbuja-escribiendo .patty-pj .pp-ojos { opacity: 0; }
body[data-patty-trabajo] .pc-top .patty-pj .pp-ex-pensando, body[data-patty-trabajo] #patty-escribiendo .patty-pj .pp-ex-pensando,
body[data-patty-trabajo] .patty-burbuja-cara .patty-pj .pp-ex-pensando, body[data-patty-trabajo] #patty-burbuja-escribiendo .patty-pj .pp-ex-pensando { opacity: 1; }
body[data-patty-trabajo] .patty-pj .pp-puntos circle { animation: pp-idea 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
body[data-patty-trabajo] .patty-pj .pp-puntos circle:nth-child(2) { animation-delay: .2s; }
body[data-patty-trabajo] .patty-pj .pp-puntos circle:nth-child(3) { animation-delay: .4s; }
@keyframes pp-idea { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
body[data-patty-trabajo="pensando"] .pc-top .pp-cabeza, body[data-patty-trabajo="pensando"] .patty-burbuja-cara .pp-cabeza,
body[data-patty-trabajo="pensando"] #patty-escribiendo .pp-cabeza { animation: pp-medita 2.4s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; }
@keyframes pp-medita { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
/* El mundito: órbita alrededor de la cabeza; él gira sobre sí mismo (los continentes pasan) y sale con ondas de señal */
.pp-orbita { position: absolute; inset: -9px; pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .35s; }
.pp-mundo { position: absolute; left: 50%; top: -6px; width: 38%; max-width: 26px; min-width: 15px; aspect-ratio: 1; transform: translateX(-50%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.pp-mundo svg { width: 100%; height: 100%; display: block; }
.pp-mundo-tierra { animation: pp-gira-tierra 2.2s linear infinite; }
@keyframes pp-gira-tierra { from { transform: translateX(0); } to { transform: translateX(-24px); } }
body[data-patty-trabajo="mundo"] .pp-orbita { opacity: 1; transform: scale(1); animation: pp-orbita 3.2s linear infinite; }
body[data-patty-trabajo="mundo"] .pp-orbita .pp-mundo { animation: pp-contra 3.2s linear infinite; }
@keyframes pp-contra { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(-360deg); } }
@keyframes pp-orbita { to { transform: rotate(360deg); } }
.pp-ondas { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.pp-ondas i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(47,155,224,.55); }
body[data-patty-trabajo="mundo"] .pp-ondas { opacity: 1; }
body[data-patty-trabajo="mundo"] .pp-ondas i { animation: pp-onda 1.6s ease-out infinite; }
body[data-patty-trabajo="mundo"] .pp-ondas i:nth-child(2) { animation-delay: .8s; }
@keyframes pp-onda { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.pp-trabajando-punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2f9be0; margin-right: 2px; animation: pp-idea 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  body[data-patty-trabajo] .pp-orbita, body[data-patty-trabajo] .pp-orbita .pp-mundo, .pp-mundo-tierra, .pp-ondas i, body[data-patty-trabajo] .pp-cabeza { animation: none !important; }
}
.patty-boton-guia { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; border: 0; border-radius: 999px; padding: .45rem .9rem; font-weight: 700; font-size: .85rem;
  background: linear-gradient(135deg, #95c01e, #0e682f); color: #fff; cursor: pointer; box-shadow: 0 6px 14px -6px rgba(14,104,47,.6); }
.patty-boton-guia:hover { filter: brightness(1.06); }

/* Carita chiquita de Patty junto a sus respuestas en la burbuja */
.patty-burbuja-msg-assistant { align-items: flex-end; gap: .45rem; }
.patty-burbuja-av { width: 28px; height: 28px; min-width: 28px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; margin-bottom: 2px; }
.patty-burbuja-av .patty-pj-avatar { width: 28px; height: 28px; }
.patty-burbuja-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.patty-burbuja-av i { font-size: .95rem; color: var(--brand-forest-medium, #0e682f); }
.patty-burbuja-msg-assistant .burbuja { max-width: calc(86% - 32px); }

/* La carita de Patty en lugar del robotito (Conversaciones, historial, tickets, manual) */
.patty-icono-titulo { display: inline-grid; place-items: center; width: 28px; height: 28px; vertical-align: middle; margin-right: .2rem; overflow: hidden; border-radius: 50%; }
.patty-icono-titulo .patty-pj-avatar, .patty-icono-manual .patty-pj-avatar { width: 100%; height: 100%; }
.patty-icono-titulo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.patty-icono-manual { overflow: hidden; padding: 0 !important; }

/* Ícono "bi-patty": la burbujita blanca de Patty con sus ojitos, en cualquier <i class="bi bi-patty"> (menú, pestañas,
   accesos rápidos, tickets, tutorial, Novedades…). El módulo patty siempre lo usa (app/menu.php → modulo_con_icono). */
.bi-patty::before {
  content: "" !important; display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15 17 70 66'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23e3eee0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='19' y='25' width='62' height='50' rx='22' fill='url(%23g)' stroke='%23b9d1b2' stroke-width='2'/%3E%3Crect x='27' y='29' width='22' height='5' rx='2.5' fill='%23fff'/%3E%3Crect x='36' y='42' width='8' height='16' rx='4' fill='%230b3a1f'/%3E%3Crect x='56' y='42' width='8' height='16' rx='4' fill='%230b3a1f'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(3, 32, 15, .25));
}

/* Campanita: el cuadro se acomoda al tamaño de la pantalla (ancho cómodo en computadora, casi toda la pantalla en celular) */
.dropdown-menu-custom.notif-menu { width: min(400px, calc(100vw - 24px)); min-width: 0 !important; z-index: 2500 !important; max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 6px !important; }
.notif-menu .dropdown-header { position: sticky; top: -6px; z-index: 1; background: var(--card-background, #fff); padding: 10px 10px 6px; font-weight: 700; color: var(--text-main); }
.notif-menu .notif-item { padding: 0 !important; }
.notif-menu .notif-item > a, .notif-menu .notif-item > .notif-cabeza { display: block; padding: 10px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.notif-menu .notif-item > a:hover { background: var(--bg-sutil, #f4f8f1); }
.notif-menu .notif-item + .notif-item { border-top: 1px solid var(--border-light, #e9efef); }
.notif-menu .notif-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: 3px; }
.notif-menu .notif-titulo { font-size: .88rem; line-height: 1.3; color: var(--text-main); overflow-wrap: anywhere; }
.notif-menu .notif-cabeza .badge { flex-shrink: 0; font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.notif-menu .notif-texto { font-size: .82rem; line-height: 1.45; color: var(--text-muted-green, #5b6b5e); overflow-wrap: anywhere; }
.notif-menu .notif-fecha { font-size: .72rem; color: var(--text-muted-green, #8a968f); margin-top: 4px; }
.notif-menu .notif-leida { opacity: .7; }
@media (max-width: 575.98px) {
  .dropdown-menu-custom.notif-menu { position: fixed !important; left: 12px !important; right: 12px !important; top: var(--notif-top, 64px) !important; transform: none !important; width: auto; max-height: calc(100dvh - var(--notif-top, 64px) - 12px); }
}

/* =====================================================================================================================
   Fluidez y vidrio (estilo Apple): curvas suaves, menús y ventanas de vidrio esmerilado, lo de atrás se desenfoca
   cuando abres algo (para que no estorbe), entradas suaves de la página y botones que responden al toque.
   Quien pidió "reducir movimiento" en su equipo lo ve todo quieto.
   ===================================================================================================================== */
:root {
  --ease-apple: cubic-bezier(.2, .8, .2, 1);
  --ease-resorte: cubic-bezier(.34, 1.3, .64, 1);
  --vidrio: rgba(255, 255, 255, .86);
  --vidrio-borde: rgba(255, 255, 255, .6);
  --vidrio-sombra: 0 24px 60px -14px rgba(6, 40, 20, .3), 0 0 0 .5px rgba(6, 40, 20, .08);
}
[data-tema="oscuro"] {
  --vidrio: rgba(24, 34, 28, .86);
  --vidrio-borde: rgba(255, 255, 255, .08);
  --vidrio-sombra: 0 24px 60px -14px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .06);
}

/* Encabezado: vidrio más claro y, en celular, todo en una sola fila (menú a la izquierda, íconos a la derecha) */
.navbar-custom { backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); transition: box-shadow .3s var(--ease-apple); }
@media (max-width: 1199.98px) {
  .navbar-custom { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .65rem 1rem !important; margin: -1.5rem -1.5rem 1.25rem !important; }
  .navbar-search-wrapper { display: none !important; }
  .navbar-actions { gap: .45rem; }
  .navbar-actions > .dropdown.ms-2 { margin-left: 0 !important; }
  .navbar-left .sidebar-toggle-btn { margin-right: 0 !important; }
}
@media (max-width: 575.98px) {
  .navbar-icon-btn, .navbar-left .sidebar-toggle-btn { width: 40px; height: 40px; border-radius: 13px; }
  .navbar-profile-btn .bi-chevron-down { display: none; }
  .navbar-profile-btn { padding: 0 !important; gap: 0 !important; }
}

/* Menús desplegables (campanita, perfil y demás): vidrio esmerilado y abren con un resorte suave */
.dropdown-menu-custom { background: var(--vidrio) !important; backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--vidrio-borde) !important; box-shadow: var(--vidrio-sombra) !important; border-radius: 18px !important; transform-origin: top right; }
.dropdown-menu-custom.show { animation: apple-abre .34s var(--ease-resorte); }
@keyframes apple-abre { from { opacity: 0; scale: .92; translate: 0 -8px; } }
.dropdown-menu-custom .dropdown-item { border-radius: 10px; transition: background-color .18s var(--ease-apple), color .18s; }
.notif-menu .dropdown-header { background: var(--vidrio); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  z-index: 3; margin: -6px -6px 0; padding: 12px 16px 8px; border-radius: 18px 18px 0 0; border-bottom: 1px solid var(--border-light, #e9efef); }
.notif-menu .dropdown-header + li .dropdown-divider { display: none; } /* el título ya trae su línea; al bajar, lo de abajo pasa por detrás */
.notif-menu .notif-item { animation: apple-entra .4s var(--ease-apple) both; }
.notif-menu .notif-item:nth-child(4) { animation-delay: .03s; } .notif-menu .notif-item:nth-child(5) { animation-delay: .06s; }
.notif-menu .notif-item:nth-child(6) { animation-delay: .09s; } .notif-menu .notif-item:nth-child(n+7) { animation-delay: .12s; }
.notif-menu .notif-item:not(.notif-leida) .notif-titulo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2f9be0; margin-right: 6px; vertical-align: .12em; }
.notif-menu .dropdown-header .btn-link { text-decoration: none; font-weight: 600; color: var(--acento-texto, #0e682f); }

/* Lo de atrás se desenfoca cuando abres un menú del encabezado o el menú lateral en celular: así no estorba */
.main-wrapper > :not(.navbar-custom) { transition: filter .35s var(--ease-apple), opacity .35s var(--ease-apple); }
body.capa-abierta .main-wrapper > :not(.navbar-custom) { filter: blur(5px) saturate(.9); opacity: .75; pointer-events: none; }
body.capa-abierta .navbar-custom { z-index: 1045; } /* el menú abierto queda por encima de la carita flotante de Patty */
#patty-burbuja { transition: filter .35s var(--ease-apple), opacity .35s var(--ease-apple); }
body.capa-abierta #patty-burbuja { filter: blur(4px); opacity: .5; pointer-events: none; }
.sidebar-overlay { backdrop-filter: blur(8px) saturate(.9); -webkit-backdrop-filter: blur(8px) saturate(.9); background-color: rgba(5, 28, 18, .28);
  transition: opacity .35s var(--ease-apple), visibility .35s var(--ease-apple); }

/* Ventanas (modales): vidrio detrás, la ventana sube con resorte */
.modal-backdrop { background-color: rgba(8, 40, 20, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-backdrop.show { opacity: 1; }
.modal.fade .modal-dialog { transition: transform .42s var(--ease-resorte), opacity .25s var(--ease-apple); transform: translateY(18px) scale(.96); opacity: 0; }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.modal-content { border-radius: 22px; border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-sombra); }

/* La página entra suave (de abajo hacia arriba, una sección tras otra) */
.main-wrapper > :not(.navbar-custom):not(script):not(style) { animation: apple-entra .5s var(--ease-apple) backwards; } /* "backwards": al terminar no deja nada puesto (las ventanas fijas de adentro se quedan en su lugar) */
.main-wrapper > :nth-child(3) { animation-delay: .04s; } .main-wrapper > :nth-child(4) { animation-delay: .08s; }
.main-wrapper > :nth-child(5) { animation-delay: .12s; } .main-wrapper > :nth-child(n+6) { animation-delay: .16s; }
@keyframes apple-entra { from { opacity: 0; translate: 0 10px; } }
.alert { animation: apple-entra .4s var(--ease-apple) both; }

/* Botones y tarjetas que responden al toque */
.btn, .navbar-icon-btn, .sidebar-toggle-btn, .accion-rapida, .sidebar-menu-link, .nav-link, .patty-boton-guia {
  transition: background-color .2s var(--ease-apple), color .2s var(--ease-apple), box-shadow .25s var(--ease-apple), border-color .2s, scale .18s var(--ease-apple), translate .25s var(--ease-apple); }
.btn:active, .navbar-icon-btn:active, .sidebar-toggle-btn:active, .accion-rapida:active, .patty-boton-guia:active { scale: .96; }
.accion-rapida:hover, a.stat-card:hover, .card-link-hover:hover { translate: 0 -2px; box-shadow: 0 12px 26px -12px rgba(6, 51, 26, .3); }
.form-control, .form-select { transition: border-color .2s var(--ease-apple), box-shadow .25s var(--ease-apple); }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 4px rgba(149, 192, 30, .22); }

/* Patty: su ventanita también de vidrio */
#patty-burbuja-panel { backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }

/* Cambiar de página: fundido suave del contenido; el menú lateral, el encabezado y Patty se quedan quietos (Chrome, Edge y Safari recientes; los demás cambian normal) */
@view-transition { navigation: auto; }
.navbar-custom { view-transition-name: encabezado; }
.sidebar-wrapper { view-transition-name: menu-lateral; }
#patty-burbuja { view-transition-name: patty-burbuja; }
::view-transition-old(root) { animation: vt-sale .16s var(--ease-apple) both; }
::view-transition-new(root) { animation: vt-entra .3s var(--ease-apple) both; }
@keyframes vt-sale { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .dropdown-menu-custom.show, .notif-menu .notif-item, .main-wrapper > *, .alert { animation: none !important; }
  .modal.fade .modal-dialog { transition: opacity .15s linear; transform: none; }
  body.capa-abierta .main-wrapper > :not(.navbar-custom) { filter: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Menú lateral en celular y tableta: cajón flotante con esquinas redondeadas que entra con la curva de iOS; lo de atrás
   se desenfoca; las opciones aparecen una tras otra; ✕ arriba a la derecha (admin.js → menuMovil) */
:root { --ease-ios: cubic-bezier(.32, .72, 0, 1); }
.sidebar-cerrar { display: none; }
@media (max-width: 1200px) {
  .sidebar-wrapper { top: 10px; left: 10px; height: calc(100dvh - 20px); width: min(300px, calc(100vw - 56px)); border-radius: 26px; border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(165deg, #0b5423 0%, var(--brand-forest-dark, #013f16) 55%, #022a10 100%);
    transform: translateX(calc(-100% - 24px)); transition: transform .52s var(--ease-ios), box-shadow .52s var(--ease-ios) !important; padding: 1.4rem 1.1rem; overflow: hidden; }
  .sidebar-wrapper.show { transform: none; box-shadow: 0 30px 80px -10px rgba(2, 30, 12, .55), 0 0 0 .5px rgba(255, 255, 255, .06); }
  .sidebar-cerrar { display: grid; place-items: center; position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: .95rem; z-index: 2; transition: background-color .2s var(--ease-apple), scale .18s var(--ease-apple), rotate .4s var(--ease-ios); }
  .sidebar-cerrar:hover { background: rgba(255, 255, 255, .2); }
  .sidebar-cerrar:active { scale: .92; }
  body.menu-movil-abierto .sidebar-cerrar { rotate: 90deg; }
  /* lo de atrás: desenfocado y un poco más chico, como cuando se abre una hoja en el iPhone */
  .main-wrapper { transition: filter .45s var(--ease-ios), opacity .45s var(--ease-ios), scale .5s var(--ease-ios) !important; transform-origin: right center; }
  body.menu-movil-abierto .main-wrapper { filter: blur(6px) saturate(.85); opacity: .7; scale: .97; pointer-events: none; }
  body.menu-movil-abierto #patty-burbuja { filter: blur(4px); opacity: .4; pointer-events: none; }
  body.menu-movil-abierto { overflow: hidden; }
  body.menu-movil-abierto .sidebar-brand, body.menu-movil-abierto .sidebar-menu-title, body.menu-movil-abierto .sidebar-menu-item,
  body.menu-movil-abierto .sidebar-wrapper > :last-child { animation: menu-item-entra .5s var(--ease-ios) backwards; }
  body.menu-movil-abierto .sidebar-menu-item:nth-child(1) { animation-delay: .04s; } body.menu-movil-abierto .sidebar-menu-item:nth-child(2) { animation-delay: .07s; }
  body.menu-movil-abierto .sidebar-menu-item:nth-child(3) { animation-delay: .1s; } body.menu-movil-abierto .sidebar-menu-item:nth-child(4) { animation-delay: .13s; }
  body.menu-movil-abierto .sidebar-menu-item:nth-child(5) { animation-delay: .16s; } body.menu-movil-abierto .sidebar-menu-item:nth-child(6) { animation-delay: .19s; }
  body.menu-movil-abierto .sidebar-menu-item:nth-child(7) { animation-delay: .22s; } body.menu-movil-abierto .sidebar-menu-item:nth-child(8) { animation-delay: .25s; }
  body.menu-movil-abierto .sidebar-menu-item:nth-child(n+9) { animation-delay: .28s; }
  body.menu-movil-abierto .sidebar-wrapper > :last-child { animation-delay: .2s; }
}
@keyframes menu-item-entra { from { opacity: 0; translate: -14px 0; } }
/* En computadora el menú se encoge y crece con la misma curva suave */
.sidebar-wrapper, .main-wrapper { transition-timing-function: var(--ease-ios); }
.sidebar-menu-link { position: relative; }
.sidebar-menu-link:active { scale: .97; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-wrapper, .main-wrapper, .sidebar-cerrar { transition: none !important; }
  body.menu-movil-abierto .sidebar-menu-item, body.menu-movil-abierto .sidebar-brand, body.menu-movil-abierto .sidebar-menu-title { animation: none !important; }
  body.menu-movil-abierto .main-wrapper { scale: 1; }
}

/* Respuestas de Patty con estructura (app/patty.php → patty_formatear / patty_tabla_html): secciones de color, tablas
   bonitas (en espacios angostos se vuelven tarjetas) y estatus como pastillas */
.patty-seccion { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .55rem; padding: .45rem .75rem; border-radius: 12px; font-size: .92rem; font-weight: 800; letter-spacing: .01em; width: fit-content; max-width: 100%; }
.patty-seccion-icono { font-size: .8rem; line-height: 1; }
.patty-seccion-rojo { background: #fdecec; color: #9f2a2a; } .patty-seccion-ambar { background: #fff4dc; color: #8a5a00; }
.patty-seccion-verde { background: #e9f6e2; color: #2f6b12; } .patty-seccion-azul { background: #e7f1fe; color: #1d4ed8; } .patty-seccion-neutro { background: #eef3ee; color: #1f3327; }
[data-tema="oscuro"] .patty-seccion-rojo { background: rgba(214,69,69,.16); color: #f4a3a3; } [data-tema="oscuro"] .patty-seccion-ambar { background: rgba(227,160,8,.16); color: #f5cf73; }
[data-tema="oscuro"] .patty-seccion-verde { background: rgba(111,163,18,.18); color: #b9e07a; } [data-tema="oscuro"] .patty-seccion-azul { background: rgba(59,130,246,.18); color: #9cc3ff; }
[data-tema="oscuro"] .patty-seccion-neutro { background: rgba(255,255,255,.07); color: #dfe9e2; }
.patty-titulo { font-size: .98rem; font-weight: 800; margin: 1rem 0 .4rem; }
.patty-hr { border: 0; height: 1px; background: var(--border-light, #e5ece1); margin: 1rem 0; opacity: 1; }

.patty-tabla-wrap { container-type: inline-size; margin: .6rem 0 .9rem; border: 1px solid var(--border-light, #e5ece1); border-radius: 14px; overflow: hidden;
  background: var(--card-background, #fff); box-shadow: 0 6px 18px -12px rgba(6, 51, 26, .25); animation: apple-entra .45s var(--ease-apple, ease) backwards; }
.patty-tabla-wrap > table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.patty-tabla thead th { background: linear-gradient(180deg, #0f6a31, #0b5423); color: #fff; font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .6rem .75rem; text-align: left; white-space: nowrap; }
.patty-tabla tbody td { padding: .6rem .75rem; border-top: 1px solid var(--border-light, #edf2ec); vertical-align: top; color: var(--text-main); }
.patty-tabla tbody tr:nth-child(even) td { background: rgba(14, 104, 47, .035); }
.patty-tabla tbody tr { transition: background-color .2s var(--ease-apple, ease); }
.patty-tabla tbody tr:hover td { background: rgba(149, 192, 30, .1); }
.patty-tabla .patty-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.patty-vacio { color: var(--text-muted-green, #9aa69f); }
.patty-tabla-pie { padding: .4rem .75rem; font-size: .72rem; color: var(--text-muted-green, #6b7a70); border-top: 1px solid var(--border-light, #edf2ec); background: rgba(14, 104, 47, .03); }
.patty-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.patty-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.patty-pill-verde { background: #e6f5df; color: #2f6b12; } .patty-pill-ambar { background: #fff1d6; color: #8a5a00; }
.patty-pill-rojo { background: #fde8e8; color: #a12d2d; } .patty-pill-azul { background: #e5effd; color: #1e4fbf; }
[data-tema="oscuro"] .patty-tabla-wrap { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
[data-tema="oscuro"] .patty-pill-verde { background: rgba(111,163,18,.2); color: #b9e07a; } [data-tema="oscuro"] .patty-pill-ambar { background: rgba(227,160,8,.2); color: #f5cf73; }
[data-tema="oscuro"] .patty-pill-rojo { background: rgba(214,69,69,.2); color: #f4a3a3; } [data-tema="oscuro"] .patty-pill-azul { background: rgba(59,130,246,.2); color: #9cc3ff; }
/* Angosto (la burbuja de Patty, el celular): cada renglón es una tarjeta con "Columna: dato" */
@container (max-width: 560px) {
  .patty-tabla thead { display: none; }
  .patty-tabla, .patty-tabla tbody, .patty-tabla tr, .patty-tabla td { display: block; width: 100%; }
  .patty-tabla tbody tr { padding: .55rem .75rem; border-top: 1px solid var(--border-light, #edf2ec); }
  .patty-tabla tbody tr:first-child { border-top: 0; }
  .patty-tabla tbody tr:nth-child(even) td, .patty-tabla tbody tr:hover td { background: none; }
  .patty-tabla tbody tr:nth-child(even) { background: rgba(14, 104, 47, .035); }
  .patty-tabla tbody td { display: flex; justify-content: space-between; gap: .75rem; padding: .2rem 0; border: 0; text-align: right; }
  .patty-tabla tbody td::before { content: attr(data-col); color: var(--text-muted-green, #6b7a70); font-size: .74rem; font-weight: 600; text-align: left; flex-shrink: 0; padding-top: .1rem; }
  .patty-tabla tbody td:first-child { font-weight: 800; }
}

/* Menú lateral en computadora: el mismo cajón flotante del celular (esquinas redondeadas, degradado, sombra), separado
   de la orilla. Minimizado (solo íconos) también flota. La opción activa es una pastilla con su rayita lima adentro. */
@media (min-width: 1201px) {
  .sidebar-wrapper { top: 12px; left: 12px; height: calc(100vh - 24px); height: calc(100dvh - 24px); border-radius: 26px; border: 1px solid rgba(255, 255, 255, .08) !important;
    background: linear-gradient(165deg, #0b5423 0%, var(--brand-forest-dark, #013f16) 55%, #022a10 100%); box-shadow: 0 24px 60px -18px rgba(2, 30, 12, .45);
    padding: 1.5rem 1.1rem; overflow: hidden; transition: width .45s var(--ease-ios), padding .45s var(--ease-ios) !important; }
  .main-wrapper { margin-left: calc(var(--sidebar-width) + 24px); transition: margin-left .45s var(--ease-ios) !important; }
  body.sidebar-minimized .sidebar-wrapper { padding: 1.5rem .7rem; }
}
.sidebar-menu-link { transition: background-color .22s var(--ease-apple), color .22s var(--ease-apple), translate .25s var(--ease-apple), scale .18s var(--ease-apple) !important; }
.sidebar-menu-link:hover { background-color: rgba(255, 255, 255, .07); color: #fff; }
@media (hover: hover) { .sidebar-menu-link:hover { translate: 2px 0; } body.sidebar-minimized .sidebar-menu-link:hover { translate: none; } }
.sidebar-menu-link.active { background: linear-gradient(90deg, rgba(176, 245, 54, .16), rgba(255, 255, 255, .06)); color: #fff; box-shadow: inset 0 0 0 1px rgba(176, 245, 54, .14); }
.sidebar-menu-link.active::before { left: 6px !important; top: 22% !important; height: 56% !important; width: 3px !important; border-radius: 3px !important; }
body.sidebar-minimized .sidebar-menu-link.active::before { display: none; }
.sidebar-menu-link .bi-patty::before { filter: none; }

/* La carita de Patty no entra al copiar texto (sus "z z" de dormida se colaban al seleccionar la conversación) */
.patty-pj, .patty-pj-avatar, .pc-av, .patty-burbuja-av, .patty-burbuja-cara { -webkit-user-select: none; user-select: none; }