/* =========================================================
   MASTER GLOBAL - BASE ESTRUCTURAL Y NAVEGACIÓN
   ========================================================= */

        :root {
            --cerebr-primary: #6535ff;
            --cerebr-secondary: #aa35f4;
            --cerebr-coral: #ff546c;
            --cerebr-cyan: #24d6e5;
            --cerebr-lime: #d8f32a;
            --cerebr-dark: #071445;
            --cerebr-text: #152044;
            --cerebr-muted: #7b839e;
            --cerebr-white: #ffffff;
            --cerebr-light: #f8f8ff;
            --cerebr-gradient: linear-gradient( 100deg, #5534ff 0%, #ae35ee 48%, #ff526a 100% );
            --cerebr-shadow: 0 22px 60px rgba(72, 44, 180, 0.16);
            --cerebr-radius: 26px;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
            scroll-behavior: smooth;
        }

        body {
            min-height: 100vh;
            margin: 0;
            overflow-x: hidden;
            font-family: "Inter", sans-serif;
            color: var(--cerebr-text);
            background: radial-gradient( circle at 15% 12%, rgba(101, 53, 255, 0.08), transparent 28% ), radial-gradient( circle at 88% 15%, rgba(255, 84, 108, 0.10), transparent 25% ), #ffffff;
        }

        button,
        input,
        select,
        textarea {
            font-family: inherit;
        }

        a {
            color: var(--cerebr-primary);
            text-decoration: none;
            transition: color 0.2s ease;
        }

            a:hover {
                color: var(--cerebr-coral);
            }

        /* Contenedor principal */
        .cerebr-page {
            position: relative;
            min-height: 100vh;
            isolation: isolate;
        }

        .cerebr-content {
            position: relative;
            z-index: 2;
            min-height: 100vh;
        }

        /* Decoración global */
        .cerebr-shape {
            position: fixed;
            z-index: -1;
            pointer-events: none;
            opacity: 0.9;
            filter: blur(0.2px);
        }

        .cerebr-shape-left {
            width: 420px;
            height: 420px;
            left: -210px;
            bottom: -190px;
            border-radius: 50%;
            background: linear-gradient( 135deg, #5b38ff, #245de8 );
        }

        .cerebr-shape-right {
            width: 310px;
            height: 310px;
            right: -150px;
            top: -155px;
            border-radius: 45% 55% 62% 38%;
            background: linear-gradient( 135deg, #ff5571, #ff8390 );
        }

        /* Tarjetas */
        .cerebr-card {
            background: rgba(255, 255, 255, 0.90);
            border: 1px solid rgba(255, 255, 255, 0.95);
            border-radius: var(--cerebr-radius);
            box-shadow: var(--cerebr-shadow);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        /* Botón principal */
        .btn-cerebr {
            min-height: 54px;
            padding: 0.8rem 1.5rem;
            border: 0;
            border-radius: 15px;
            color: #ffffff;
            font-weight: 700;
            background: var(--cerebr-gradient);
            box-shadow: 0 12px 28px rgba(111, 53, 255, 0.25);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

            .btn-cerebr:hover,
            .btn-cerebr:focus {
                color: #ffffff;
                transform: translateY(-2px);
                box-shadow: 0 16px 34px rgba(111, 53, 255, 0.34);
            }

        /* Botón secundario */
        .btn-cerebr-outline {
            min-height: 52px;
            padding: 0.8rem 1.5rem;
            color: var(--cerebr-primary);
            font-weight: 700;
            background: #ffffff;
            border: 2px solid var(--cerebr-primary);
            border-radius: 15px;
            transition: all 0.2s ease;
        }

            .btn-cerebr-outline:hover {
                color: #ffffff;
                background: var(--cerebr-primary);
            }

        /* Campos */
        .cerebr-input {
            min-height: 54px;
            border: 1px solid #dfe2ef;
            border-radius: 14px;
            color: var(--cerebr-text);
            background-color: #ffffff;
            box-shadow: none;
        }

            .cerebr-input:focus {
                border-color: var(--cerebr-primary);
                box-shadow: 0 0 0 0.22rem rgba(101, 53, 255, 0.13);
            }

        /* WhatsApp */
        .cerebr-whatsapp {
            position: fixed;
            right: 22px;
            bottom: 22px;
            z-index: 1050;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            color: #ffffff;
            font-size: 1.75rem;
            background: #15ba61;
            border-radius: 50%;
            box-shadow: 0 12px 28px rgba(21, 186, 97, 0.32);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

            .cerebr-whatsapp:hover {
                color: #ffffff;
                transform: translateY(-3px) scale(1.04);
                box-shadow: 0 16px 32px rgba(21, 186, 97, 0.40);
            }

        /* Cargador */
        .cerebr-loader {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(5px);
        }

            .cerebr-loader.is-visible {
                display: flex;
            }

        .cerebr-loader-ring {
            width: 52px;
            height: 52px;
            border: 5px solid rgba(101, 53, 255, 0.15);
            border-top-color: var(--cerebr-primary);
            border-radius: 50%;
            animation: cerebrSpin 0.8s linear infinite;
        }

        @keyframes cerebrSpin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Accesibilidad */
        :focus-visible {
            outline: 3px solid rgba(36, 214, 229, 0.55);
            outline-offset: 3px;
        }

        /* Celular */
        @media (max-width: 767.98px) {
            :root {
                --cerebr-radius: 20px;
            }

            .cerebr-shape-left {
                width: 240px;
                height: 240px;
                left: -130px;
                bottom: -100px;
            }

            .cerebr-shape-right {
                width: 190px;
                height: 190px;
                right: -100px;
                top: -95px;
            }

            .cerebr-whatsapp {
                width: 52px;
                height: 52px;
                right: 15px;
                bottom: 15px;
                font-size: 1.55rem;
            }

            .btn-cerebr,
            .btn-cerebr-outline,
            .cerebr-input {
                min-height: 50px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                transition: none !important;
                animation-duration: 0.01ms !important;
            }
        }


        /* Modal global de CerebrApp */
        .cerebr-modal {
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(7, 20, 66, .58);
            backdrop-filter: blur(5px);
        }

            .cerebr-modal.show {
                display: flex;
            }

        .cerebr-modal-card {
            width: min(100%, 380px);
            padding: 30px;
            color: #071442;
            background: #fff;
            border-radius: 22px;
            text-align: center;
            box-shadow: 0 25px 60px rgba(7, 20, 66, .25);
            animation: cerebr-modal-enter .2s ease-out;
        }

        .cerebr-modal-icon {
            display: grid;
            place-items: center;
            width: 54px;
            height: 54px;
            margin: 0 auto 17px;
            color: #fff;
            font-size: 1.35rem;
            border-radius: 17px;
            background: linear-gradient(135deg, #6537ff, #f54279);
        }

        .cerebr-modal-card strong,
        .cerebr-modal-card span {
            display: block;
        }

        .cerebr-modal-card strong {
            margin-bottom: 7px;
            font-size: 1.1rem;
        }

        .cerebr-modal-card span {
            color: #818ba9;
            font-size: .84rem;
            line-height: 1.5;
        }

        .cerebr-modal-spinner {
            display: none;
            width: 48px;
            height: 48px;
            margin: 0 auto 17px;
            border: 5px solid #eee9ff;
            border-top-color: #6537ff;
            border-right-color: #f54279;
            border-radius: 50%;
            animation: cerebr-modal-spin .8s linear infinite;
        }

        .cerebr-modal.processing .cerebr-modal-spinner {
            display: block;
        }

        .cerebr-modal.processing .cerebr-modal-icon {
            display: none;
        }

        .cerebr-modal-actions {
            display: flex;
            gap: 10px;
            margin-top: 23px;
        }

        .cerebr-modal-button {
            flex: 1;
            min-height: 45px;
            padding: 10px 16px;
            border: 0;
            border-radius: 13px;
            font-weight: 800;
            cursor: pointer;
        }

            .cerebr-modal-button.cancel {
                color: #6537ff;
                background: #f0ecff;
            }

            .cerebr-modal-button.confirm {
                color: #fff;
                background: linear-gradient(135deg, #6537ff, #f54279);
                box-shadow: 0 10px 22px rgba(101, 55, 255, .20);
            }

        .cerebr-modal.processing .cerebr-modal-actions {
            display: none;
        }

        @keyframes cerebr-modal-spin {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes cerebr-modal-enter {
            from {
                opacity: 0;
                transform: translateY(8px) scale(.97);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @media (max-width: 575.98px) {
            .cerebr-modal-card {
                padding: 26px 20px;
            }

            .cerebr-modal-actions {
                flex-direction: column-reverse;
            }
        }

        /* Navegación interna global */
        .dashboard-shell {
            display: flex;
            min-height: 100vh;
        }

        .dashboard-sidebar {
            position: fixed;
            inset: 0 auto 0 0;
            z-index: 1040;
            display: flex;
            flex-direction: column;
            width: 270px;
            height: 100vh;
            padding: 26px 18px;
            overflow-y: auto;
            color: #fff;
            background: linear-gradient( 165deg, #071445 0%, #301b91 52%, #6832f5 100% );
            transition: transform .25s ease;
        }

            .dashboard-sidebar::-webkit-scrollbar {
                display: none;
                width: 0;
                height: 0;
            }

        .dashboard-brand {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 0 10px 27px;
            color: #fff;
        }

            .dashboard-brand:hover {
                color: #fff;
            }

        .dashboard-brand-icon {
            display: grid;
            place-items: center;
            width: 45px;
            height: 45px;
            font-size: 1.45rem;
            border-radius: 15px;
            background: var(--cerebr-gradient);
        }

        .dashboard-brand-name {
            font-size: 1.45rem;
            font-weight: 800;
            letter-spacing: -1px;
        }

        .sidebar-label {
            margin: 12px 13px 9px;
            color: rgba(255, 255, 255, .52);
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: 1.3px;
            text-transform: uppercase;
        }

        .dashboard-menu,
        .dashboard-submenu {
            margin: 0;
            list-style: none;
        }

        .dashboard-menu {
            display: flex;
            flex-direction: column;
            gap: 7px;
            padding: 0;
        }

            .dashboard-menu a {
                display: flex;
                align-items: center;
                gap: 13px;
                min-height: 48px;
                padding: 10px 15px;
                color: rgba(255, 255, 255, .78);
                font-size: .92rem;
                font-weight: 600;
                border-radius: 14px;
                transition: all .2s ease;
            }

                .dashboard-menu a i {
                    width: 24px;
                    font-size: 1.15rem;
                }

                .dashboard-menu a:hover,
                .dashboard-menu a.active {
                    color: #fff;
                    background: linear-gradient( 100deg, rgba(112, 68, 255, .95), rgba(240, 65, 167, .88) );
                    transform: translateX(3px);
                }

        .dashboard-submenu {
            display: grid;
            gap: 3px;
            margin: 3px 0 8px;
            padding: 0 0 0 34px;
        }

            .dashboard-submenu a {
                min-height: 38px;
                padding: 9px 12px;
                font-size: .86rem;
                border-radius: 10px;
            }

        .sidebar-footer {
            margin-top: auto;
            padding-top: 20px;
        }

        .sidebar-user {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 11px;
            padding: 13px;
            background: rgba(255, 255, 255, .09);
            border: 1px solid rgba(255, 255, 255, .10);
            border-radius: 15px;
        }

        .sidebar-avatar {
            display: grid;
            place-items: center;
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            color: #fff;
            font-size: 1.2rem;
            border-radius: 13px;
            background: var(--cerebr-gradient);
        }

        .sidebar-user-info {
            min-width: 0;
        }

            .sidebar-user-info strong {
                display: block;
                max-width: 145px;
                overflow: hidden;
                color: #fff;
                font-size: .82rem;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .sidebar-user-info small {
                color: rgba(255, 255, 255, .55);
            }

        .logout-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            min-height: 43px;
            color: #fff;
            font-weight: 600;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .13);
            border-radius: 13px;
        }

            .logout-button:hover {
                color: #fff;
                background: rgba(255, 84, 108, .35);
            }

        .dashboard-main {
            width: calc(100% - 270px);
            min-height: 100vh;
            margin-left: 270px;
            background: #f7f8ff;
        }

        .cerebr-public-main {
            width: 100%;
            min-height: 100vh;
        }

        .dashboard-topbar {
            position: sticky;
            top: 0;
            z-index: 1020;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 76px;
            padding: 12px 30px;
            background: rgba(255, 255, 255, .88);
            border-bottom: 1px solid #eceefa;
            backdrop-filter: blur(15px);
        }

        .mobile-menu-button {
            display: none;
            width: 43px;
            height: 43px;
            color: var(--cerebr-dark);
            font-size: 1.4rem;
            background: #f2f1ff;
            border: 1px solid #dcd8ff;
            border-radius: 13px;
        }

            .mobile-menu-button i {
                display: block;
                color: inherit;
                font-size: 1.65rem;
                line-height: 1;
            }

        .topbar-title h1 {
            margin: 0;
            color: var(--cerebr-dark);
            font-size: 1.45rem;
            font-weight: 800;
        }

        .topbar-title p {
            margin: 2px 0 0;
            color: var(--cerebr-muted);
            font-size: .82rem;
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
        }

        .theme-switcher {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
            flex-wrap: nowrap;
            gap: 6px;
        }

        .theme-button {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            padding: 0;
            color: #5e6680;
            font-size: 1rem;
            background: #fff;
            border: 1px solid #e6e8f3;
            border-radius: 12px;
            box-shadow: 0 5px 14px rgba(35, 43, 92, .06);
            cursor: pointer;
            transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }

        .theme-button:hover {
            color: #6535ff;
            border-color: #cfc5ff;
            box-shadow: 0 8px 18px rgba(101, 53, 255, .14);
            transform: translateY(-1px);
        }

        .theme-button.is-active {
            color: #fff;
            background: var(--cerebr-gradient);
            border-color: transparent;
            box-shadow: 0 7px 18px rgba(101, 53, 255, .25);
        }

        .theme-button[data-theme-value="cerebrapp"] {
            color: #fff;
            background: var(--cerebr-gradient);
            border-color: transparent;
        }

        .theme-button[data-theme-value="dark"] {
            color: #5146a6;
            background: #f2f0ff;
        }

        .theme-button-batman {
            color: #f5c518;
            background: #17191d;
            border-color: #2d3036;
        }

        .theme-button-batman svg {
            width: 19px;
            height: 14px;
            fill: currentColor;
        }

        .theme-button.is-active[data-theme-value="cerebrapp"] {
            color: #fff;
            background: var(--cerebr-gradient);
        }

        .theme-button.is-active[data-theme-value="dark"] {
            color: #fff;
            background: linear-gradient(135deg, #4f46a5, #171b33);
        }

        .topbar-user {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            padding: 6px 11px 6px 7px;
            background: #fff;
            border: 1px solid #e6e8f3;
            border-radius: 14px;
        }

        .topbar-user-avatar {
            display: grid;
            place-items: center;
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            color: #fff;
            font-size: 1rem;
            background: var(--cerebr-gradient);
            border-radius: 11px;
            overflow: hidden;
        }

        .topbar-user-avatar img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .topbar-user-info {
            display: block;
            min-width: 0;
            line-height: 1.15;
        }

            .topbar-user-info strong,
            .topbar-user-info small {
                display: block;
            }

            .topbar-user-info strong {
                max-width: 180px;
                overflow: hidden;
                color: var(--cerebr-dark);
                font-size: .8rem;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .topbar-user-info small {
                margin-top: 2px;
                color: var(--cerebr-muted);
                font-size: .67rem;
            }

        .topbar-icon {
            position: relative;
            display: grid;
            place-items: center;
            width: 43px;
            height: 43px;
            color: var(--cerebr-dark);
            font-size: 1.15rem;
            background: #fff;
            border: 1px solid #e6e8f3;
            border-radius: 13px;
        }

        .topbar-notifications {
            position: relative;
        }

        .notification-count {
            position: absolute;
            top: -6px;
            right: -6px;
            display: grid;
            place-items: center;
            min-width: 20px;
            height: 20px;
            padding: 0 5px;
            color: #fff;
            font-size: .62rem;
            font-weight: 900;
            line-height: 1;
            background: var(--cerebr-coral);
            border: 2px solid #fff;
            border-radius: 999px;
        }

        .notification-panel {
            position: absolute;
            top: calc(100% + 12px);
            right: 0;
            z-index: 1100;
            display: none;
            width: min(390px, calc(100vw - 24px));
            overflow: hidden;
            background: #fff;
            border: 1px solid #e6e8f3;
            border-radius: 18px;
            box-shadow: 0 22px 55px rgba(20, 28, 75, .20);
        }

            .notification-panel.is-open {
                display: block;
            }

        .notification-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding: 16px 18px;
            border-bottom: 1px solid #eceefa;
        }

            .notification-panel-header strong,
            .notification-panel-header small {
                display: block;
            }

            .notification-panel-header strong {
                color: var(--cerebr-dark);
                font-size: .95rem;
            }

            .notification-panel-header small {
                margin-top: 2px;
                color: var(--cerebr-muted);
                font-size: .7rem;
            }

        .notification-total {
            display: grid;
            place-items: center;
            min-width: 31px;
            height: 31px;
            padding: 0 8px;
            color: var(--cerebr-primary);
            font-size: .75rem;
            font-weight: 900;
            background: #eee9ff;
            border-radius: 999px;
        }

        .notification-list {
            max-height: min(430px, 62vh);
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-color: rgba(101, 53, 255, .4) transparent;
            scrollbar-width: thin;
        }

        .notification-item {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            padding: 13px 16px;
            color: var(--cerebr-text);
            border-bottom: 1px solid #f0f1f7;
            transition: background .2s ease;
        }

            .notification-item:hover {
                color: var(--cerebr-text);
                background: #fafaff;
            }

            .notification-item.is-overdue {
                background: #fff8f9;
            }

        .notification-item-icon {
            display: grid;
            place-items: center;
            flex: 0 0 38px;
            width: 38px;
            height: 38px;
            color: var(--cerebr-primary);
            background: #eee9ff;
            border-radius: 12px;
        }

            .notification-item.is-overdue .notification-item-icon {
                color: #c52745;
                background: #ffe8ed;
            }

        .notification-item-content {
            display: block;
            min-width: 0;
            flex: 1;
        }

            .notification-item-content strong,
            .notification-item-content small,
            .notification-item-type,
            .notification-item-date {
                display: block;
            }

            .notification-item-content strong {
                overflow: hidden;
                color: var(--cerebr-dark);
                font-size: .79rem;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .notification-item-content small {
                margin-top: 3px;
                overflow: hidden;
                color: var(--cerebr-muted);
                font-size: .68rem;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        .notification-item-type {
            margin-bottom: 3px;
            color: var(--cerebr-primary);
            font-size: .61rem;
            font-weight: 900;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .notification-item-date {
            margin-top: 6px;
            color: #16734b;
            font-size: .66rem;
            font-weight: 800;
        }

        .notification-item.is-overdue .notification-item-date {
            color: #bd2743;
        }

        .notification-empty {
            display: grid;
            place-items: center;
            gap: 8px;
            min-height: 150px;
            padding: 25px;
            color: var(--cerebr-muted);
            font-size: .78rem;
            text-align: center;
        }

            .notification-empty i {
                color: var(--cerebr-primary);
                font-size: 2rem;
            }

        .notification-panel-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 13px 16px;
            font-size: .75rem;
            font-weight: 800;
            border-top: 1px solid #eceefa;
        }

        .dashboard-content {
            min-height: calc(100vh - 76px);
            padding: 30px;
        }

        .sidebar-overlay {
            position: fixed;
            inset: 0;
            z-index: 1030;
            display: none;
            background: rgba(7, 20, 69, .58);
            backdrop-filter: blur(3px);
        }

            .sidebar-overlay.is-visible {
                display: block;
            }

        body.menu-abierto {
            overflow: hidden;
        }

        @media (max-width: 991.98px) {
            .dashboard-sidebar {
                transform: translateX(-100%);
            }

                .dashboard-sidebar.is-open {
                    transform: translateX(0);
                }

            .dashboard-main {
                width: 100%;
                margin-left: 0;
                padding-top: 76px;
            }

            .mobile-menu-button {
                display: grid;
                place-items: center;
            }

            .dashboard-topbar {
                position: fixed;
                top: 0;
                right: 0;
                left: 0;
                width: 100%;
                padding: 12px 18px;
                box-shadow: 0 8px 24px rgba(7, 20, 66, .10);
            }

            .dashboard-content {
                padding: 22px 18px;
            }
        }

        @media (max-width: 575.98px) {
            .dashboard-sidebar {
                width: min(86vw, 290px);
            }

            .dashboard-topbar {
                min-height: 68px;
                padding: 10px 13px;
            }

            .dashboard-main {
                padding-top: 68px;
            }

            .topbar-title h1 {
                font-size: 1.08rem;
            }

            .topbar-title p {
                display: none;
            }

            .topbar-user {
                gap: 7px;
                padding-right: 8px;
            }

            .topbar-user-info strong {
                max-width: 105px;
            }

            .topbar-user-info small {
                display: none;
            }

            .dashboard-content {
                min-height: calc(100vh - 68px);
                padding: 18px 12px;
            }
        }

        @media (max-width: 420px) {
            .topbar-user-avatar {
                display: grid;
                flex-basis: 32px;
                width: 32px;
                height: 32px;
            }

            .topbar-user {
                padding: 5px;
            }

            .topbar-user-info {
                display: none;
            }

            .dashboard-topbar {
                gap: 7px;
            }

            .topbar-title {
                max-width: 74px;
            }

            .topbar-title h1 {
                overflow: hidden;
                font-size: .96rem;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .topbar-actions {
                gap: 5px;
            }

            .theme-switcher {
                gap: 4px;
            }

            .theme-button {
                width: 28px;
                height: 32px;
                font-size: .78rem;
                border-radius: 10px;
                box-shadow: none;
            }

            .theme-button-batman svg {
                width: 15px;
                height: 11px;
            }

            .notification-panel {
                position: fixed;
                top: 72px;
                right: 10px;
                left: 10px;
                width: auto;
            }
        }

/* =========================================================
   TEMAS: OSCURO Y BATMAN
   ========================================================= */

html[data-cerebr-theme="dark"],
html[data-cerebr-theme="batman"] {
    color-scheme: dark;
    --theme-bg: #0d1220;
    --theme-surface: #171e2e;
    --theme-surface-soft: #20283a;
    --theme-border: #303a50;
    --theme-text: #f4f7ff;
    --theme-muted: #aab4cb;
}

html[data-cerebr-theme="dark"] {
    --cerebr-primary: #9b7cff;
    --cerebr-secondary: #c06cff;
    --cerebr-coral: #ff6f91;
    --cerebr-dark: #f4f7ff;
    --cerebr-text: #e7ecf8;
    --cerebr-muted: #aab4cb;
    --cerebr-white: #171e2e;
    --cerebr-light: #20283a;
    --cerebr-gradient: linear-gradient(100deg, #7452ff 0%, #9b45df 50%, #e64f7c 100%);
}

html[data-cerebr-theme="batman"] {
    --theme-bg: #08090b;
    --theme-surface: #15171b;
    --theme-surface-soft: #202329;
    --theme-border: #393d45;
    --theme-text: #f4f4f2;
    --theme-muted: #b3b5b9;
    --cerebr-primary: #f5c518;
    --cerebr-secondary: #ffd84a;
    --cerebr-coral: #f5c518;
    --cerebr-dark: #f4f4f2;
    --cerebr-text: #e8e8e5;
    --cerebr-muted: #b3b5b9;
    --cerebr-white: #15171b;
    --cerebr-light: #202329;
    --cerebr-gradient: linear-gradient(100deg, #111318 0%, #292d34 58%, #f5c518 100%);
}

html[data-cerebr-theme="dark"] body,
html[data-cerebr-theme="batman"] body {
    color: var(--theme-text);
    background: var(--theme-bg);
}

html[data-cerebr-theme="dark"] .dashboard-main,
html[data-cerebr-theme="dark"] .dashboard-content,
html[data-cerebr-theme="batman"] .dashboard-main,
html[data-cerebr-theme="batman"] .dashboard-content {
    background-color: var(--theme-bg);
}

html[data-cerebr-theme="dark"] .dashboard-topbar,
html[data-cerebr-theme="dark"] .topbar-user,
html[data-cerebr-theme="dark"] .topbar-icon,
html[data-cerebr-theme="dark"] .notification-panel,
html[data-cerebr-theme="batman"] .dashboard-topbar,
html[data-cerebr-theme="batman"] .topbar-user,
html[data-cerebr-theme="batman"] .topbar-icon,
html[data-cerebr-theme="batman"] .notification-panel {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] .theme-button {
    color: #d7dcff;
    background: #20283a;
    border-color: #303a50;
}

html[data-cerebr-theme="batman"] .theme-button {
    color: #d8d8d5;
    background: #202329;
    border-color: #393d45;
}

html[data-cerebr-theme="dark"] .mobile-menu-button {
    color: #ffffff;
    background: #252f43;
    border-color: #46536d;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

html[data-cerebr-theme="batman"] .mobile-menu-button {
    color: #f5c518;
    background: #202329;
    border-color: #4a505a;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}

html[data-cerebr-theme="batman"] .theme-button-batman {
    color: #f5c518;
    background: #0b0c0e;
}

html[data-cerebr-theme="dark"] :is(.cerebr-card, .agenda-card, .catalog-card, .client-form-card, .client-related-card, .clients-card, .concept-list-card, .detail-card, .detail-mode-card, .entity-card, .file-card, .files-card, .image-card, .limit-card, .login-card, .module-card, .plan-card, .project-card, .project-mode-card, .projects-card, .quote-card, .quote-history-card, .quotes-card, .recovery-card, .register-card, .reset-card, .search-card, .settings-card, .stat-card, .storage-card, .success-card, .upload-card, .usage-history-card, .whatsapp-loading-card, .dashboard-panel),
html[data-cerebr-theme="batman"] :is(.cerebr-card, .agenda-card, .catalog-card, .client-form-card, .client-related-card, .clients-card, .concept-list-card, .detail-card, .detail-mode-card, .entity-card, .file-card, .files-card, .image-card, .limit-card, .login-card, .module-card, .plan-card, .project-card, .project-mode-card, .projects-card, .quote-card, .quote-history-card, .quotes-card, .recovery-card, .register-card, .reset-card, .search-card, .settings-card, .stat-card, .storage-card, .success-card, .upload-card, .usage-history-card, .whatsapp-loading-card, .dashboard-panel) {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(input, select, textarea, .form-control, .form-control-custom, .field-control),
html[data-cerebr-theme="batman"] :is(input, select, textarea, .form-control, .form-control-custom, .field-control) {
    color: var(--theme-text);
    background-color: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(h1, h2, h3, h4, h5, h6, strong, th, label, .settings-title, .settings-card-title),
html[data-cerebr-theme="batman"] :is(h1, h2, h3, h4, h5, h6, strong, th, label, .settings-title, .settings-card-title) {
    color: var(--theme-text);
}

html[data-cerebr-theme="dark"] :is(p, small, td, .settings-subtitle, .settings-card-text),
html[data-cerebr-theme="batman"] :is(p, small, td, .settings-subtitle, .settings-card-text) {
    color: var(--theme-muted);
}

html[data-cerebr-theme="dark"] :is(table, th, td, .notification-item, .notification-panel-header, .notification-panel-footer),
html[data-cerebr-theme="batman"] :is(table, th, td, .notification-item, .notification-panel-header, .notification-panel-footer) {
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] .notification-item,
html[data-cerebr-theme="batman"] .notification-item {
    background: var(--theme-surface);
}

html[data-cerebr-theme="dark"] .cerebr-modal-card,
html[data-cerebr-theme="batman"] .cerebr-modal-card {
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
}

html[data-cerebr-theme="batman"] a,
html[data-cerebr-theme="batman"] .theme-button:hover {
    color: #f5c518;
}

html[data-cerebr-theme="batman"] .theme-button.is-active {
    color: #090a0c;
    background: #f5c518;
}

        /* Tipos de mensaje global */
        .cerebr-modal.notification
        .cerebr-modal-button.cancel {
            display: none;
        }

        .cerebr-modal.notification
        .cerebr-modal-actions {
            justify-content: center;
        }

        .cerebr-modal.notification
        .cerebr-modal-button.confirm {
            flex: 0 1 180px;
        }

        .cerebr-modal.success
        .cerebr-modal-icon {
            background: linear-gradient(135deg, #12a365, #26d58a);
        }

        .cerebr-modal.error
        .cerebr-modal-icon {
            background: linear-gradient(135deg, #d72f4c, #ff6278);
        }

        .cerebr-modal.warning
        .cerebr-modal-icon {
            background: linear-gradient(135deg, #f39b17, #ffc247);
        }

        .cerebr-modal.info
        .cerebr-modal-icon {
            background: linear-gradient(135deg, #3267e3, #27c4e8);
        }



        .quote-history-card {
            padding: 25px;
            background: #fff;
            border: 1px solid #eceefa;
            border-radius: 20px;
            box-shadow: 0 12px 30px rgba(31,34,80,.05);
        }

        .quote-history-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eceefa;
        }

        .quote-history-title {
            display: flex;
            align-items: center;
            gap: 11px;
            margin: 0;
            color: var(--cerebr-dark);
            font-size: 1rem;
            font-weight: 800;
        }

        .quote-history-count {
            padding: 6px 11px;
            color: var(--cerebr-primary);
            font-size: .72rem;
            font-weight: 800;
            background: #eee9ff;
            border-radius: 999px;
        }

        .quote-history-table-wrap {
            overflow-x: auto;
        }

        .quote-history-table {
            width: 100%;
            min-width: 760px;
            border-collapse: collapse;
        }

            .quote-history-table th {
                padding: 12px 14px;
                color: var(--cerebr-muted);
                font-size: .7rem;
                font-weight: 800;
                text-align: left;
                text-transform: uppercase;
                background: #f8f8fd;
            }

            .quote-history-table td {
                padding: 15px 14px;
                color: var(--cerebr-text);
                font-size: .84rem;
                border-bottom: 1px solid #eceefa;
                vertical-align: middle;
            }

            .quote-history-table tr:last-child td {
                border-bottom: 0;
            }

        .quote-history-folio {
            color: var(--cerebr-dark);
            font-weight: 800;
        }

        .quote-history-total {
            color: var(--cerebr-dark);
            font-weight: 850;
        }

        .quote-history-status {
            display: inline-block;
            padding: 6px 10px;
            font-size: .68rem;
            font-weight: 850;
            border-radius: 999px;
        }

        .quote-history-action {
            display: inline-grid;
            place-items: center;
            width: 39px;
            height: 39px;
            color: var(--cerebr-primary);
            background: #f0ecff;
            border-radius: 11px;
            text-decoration: none;
        }

            .quote-history-action:hover {
                color: #fff;
                background: var(--cerebr-gradient);
            }

        .quote-history-empty {
            padding: 25px 15px;
            color: var(--cerebr-muted);
            text-align: center;
            background: #fafaff;
            border: 1px dashed #dcdff0;
            border-radius: 15px;
        }

            .quote-history-empty i {
                display: block;
                margin-bottom: 8px;
                color: var(--cerebr-primary);
                font-size: 1.8rem;
            }

        @media (max-width: 575.98px) {
            .quote-history-card {
                padding: 20px 15px;
            }

            .quote-history-header {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        .client-logo-box {
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 22px;
            align-items: center;
            padding: 20px;
            background: #f8f7ff;
            border: 1px solid #e2ddff;
            border-radius: 17px;
        }

        .client-logo-preview {
            display: grid;
            place-items: center;
            width: 150px;
            height: 110px;
            overflow: hidden;
            background: #fff;
            border: 1px dashed #cfc7ff;
            border-radius: 14px;
        }

            .client-logo-preview img {
                display: block;
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }

        .client-logo-data strong,
        .client-logo-data span {
            display: block;
        }

        .client-logo-data strong {
            color: var(--cerebr-dark);
            font-size: .95rem;
        }

        .client-logo-data span {
            margin-top: 5px;
            color: var(--cerebr-muted);
            font-size: .8rem;
        }

        .client-logo-remove {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-top: 13px;
            color: #a51d35;
            font-size: .82rem;
            font-weight: 700;
        }

            .client-logo-remove input {
                width: 18px;
                height: 18px;
                accent-color: #dc3545;
            }

        @media (max-width: 575.98px) {
            .client-logo-box {
                grid-template-columns: 1fr;
            }

            .client-logo-preview {
                width: 100%;
            }
        }

        .quote-client-logo-option {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 16px 18px;
            background: #f8f7ff;
            border: 1px solid #e1dcff;
            border-radius: 15px;
        }

            .quote-client-logo-option input[type="checkbox"] {
                flex-shrink: 0;
                width: 20px;
                height: 20px;
                margin-top: 2px;
                accent-color: var(--cerebr-primary);
            }

        .quote-client-logo-text {
            display: block;
            cursor: pointer;
        }

            .quote-client-logo-text strong,
            .quote-client-logo-text span {
                display: block;
            }

            .quote-client-logo-text strong {
                color: var(--cerebr-dark);
                font-size: .9rem;
            }

            .quote-client-logo-text span {
                margin-top: 4px;
                color: var(--cerebr-muted);
                font-size: .78rem;
            }

        .quote-client-logo-option.logo-unavailable {
            background: #f7f7fa;
            border-color: #e4e5ec;
            opacity: .75;
        }

        .concept-row.quote-concept-grid {
            grid-template-columns: minmax(150px, 1fr) minmax(210px, 1.4fr) 75px 75px 105px 115px 84px !important;
        }

        @media screen and (max-width: 767.98px) {
            .concept-row.quote-concept-grid {
                grid-template-columns: 1fr 78px !important;
            }
        }

    /* =========================================================
   CEREBRAPP - COMPONENTES GLOBALES REUTILIZABLES
   ========================================================= */

    .entity-page

{
    padding: 32px 0 60px;
}

.entity-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.entity-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.entity-header-content {
    min-width: 0;
}

.entity-back {
    color: var(--cerebr-primary);
    font-weight: 750;
    text-decoration: none;
}

    .entity-back:hover {
        color: var(--cerebr-secondary);
    }

.entity-title {
    color: var(--cerebr-dark);
    font-size: clamp(2.1rem, 5vw, 3rem);
    font-weight: 850;
    letter-spacing: -1.7px;
    margin: 9px 0 3px;
}

.entity-subtitle {
    color: #818ba9;
    font-size: 1.05rem;
    margin: 0;
}

.entity-primary-button {
    min-height: 54px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient( 110deg, var(--cerebr-primary), var(--cerebr-secondary), var(--cerebr-coral) );
    box-shadow: 0 16px 30px rgba(101, 53, 255, 0.22);
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .entity-primary-button:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 19px 34px rgba(101, 53, 255, 0.28);
    }

.entity-message {
    display: block;
    margin-bottom: 18px;
    padding: 14px 17px;
    border-radius: 14px;
    font-weight: 650;
}

    .entity-message.success {
        color: #087a52;
        background: #dcf8ec;
        border: 1px solid #b7ecd7;
    }

    .entity-message.error {
        color: #bd2943;
        background: #fff0f3;
        border: 1px solid #ffc9d3;
    }

.entity-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 15px;
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid #e4e8f4;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 13px 34px rgba(38, 49, 99, 0.06);
}

.entity-search {
    position: relative;
}

    .entity-search i {
        position: absolute;
        left: 17px;
        top: 50%;
        z-index: 2;
        color: #8a95b4;
        transform: translateY(-50%);
        pointer-events: none;
    }

.entity-control {
    width: 100%;
    min-height: 50px;
    padding: 11px 16px;
    border: 1px solid #dce2f0;
    border-radius: 14px;
    color: var(--cerebr-dark);
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.entity-search .entity-control {
    padding-left: 46px;
}

.entity-control:focus {
    border-color: var(--cerebr-primary);
    box-shadow: 0 0 0 4px rgba(101, 53, 255, 0.11);
}

.entity-card {
    overflow: hidden;
    border: 1px solid #e4e8f4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(38, 49, 99, 0.07);
}

.entity-card-header {
    min-height: 72px;
    padding: 17px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #e8ebf5;
}

.entity-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cerebr-dark);
    font-weight: 800;
}

.entity-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient( 135deg, var(--cerebr-primary), var(--cerebr-secondary), var(--cerebr-coral) );
}

.entity-counter {
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--cerebr-primary);
    background: #eee9ff;
    font-size: 0.83rem;
    font-weight: 800;
}

.entity-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.entity-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

    .entity-table th {
        padding: 15px 18px;
        color: #7c86a5;
        background: #f7f7fc;
        font-size: 0.76rem;
        font-weight: 850;
        text-transform: uppercase;
    }

    .entity-table td {
        padding: 17px 18px;
        border-bottom: 1px solid #e9ecf5;
        color: var(--cerebr-dark);
        vertical-align: middle;
    }

    .entity-table tbody tr:last-child td {
        border-bottom: 0;
    }

.entity-name {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 235px;
}

.entity-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient( 135deg, var(--cerebr-primary), var(--cerebr-secondary), var(--cerebr-coral) );
    font-size: 1.15rem;
}

    .entity-avatar img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #fff;
    }

.entity-name strong {
    display: block;
    color: var(--cerebr-dark);
    font-weight: 800;
}

.entity-secondary-text {
    display: block;
    margin-top: 3px;
    color: #8791ae;
    font-size: 0.84rem;
}

.entity-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 850;
}

    .entity-status.active {
        color: #087a52;
        background: #d9f7e9;
    }

    .entity-status.inactive {
        color: #bf2944;
        background: #ffe4e9;
    }

    .entity-status.default {
        color: var(--cerebr-primary);
        background: #eee9ff;
    }

.entity-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.entity-action {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 13px;
    color: var(--cerebr-primary);
    background: #f0ecff;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

    .entity-action:hover {
        color: var(--cerebr-primary);
        background: #e5ddff;
        transform: translateY(-1px);
    }

    .entity-action.danger {
        color: #d92849;
        background: #ffe8ed;
    }

.entity-empty {
    padding: 55px 25px;
    text-align: center;
    color: #8490ae;
}

.entity-empty-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    color: var(--cerebr-primary);
    background: #eee9ff;
    font-size: 1.6rem;
}

.entity-empty h3 {
    margin: 0 0 7px;
    color: var(--cerebr-dark);
    font-size: 1.15rem;
    font-weight: 800;
}

.entity-empty p {
    margin: 0 0 18px;
}

/* Formularios reutilizables */

.entity-form {
    overflow: hidden;
    padding: 24px;
    border: 1px solid #e4e8f4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(38, 49, 99, 0.07);
}

.entity-section {
    padding: 22px 0;
    border-bottom: 1px solid #e8ebf5;
}

    .entity-section:first-child {
        padding-top: 0;
    }

    .entity-section:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

.entity-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}

.entity-section-title {
    margin: 0;
    color: var(--cerebr-dark);
    font-size: 1rem;
    font-weight: 850;
}

.entity-section-text {
    margin: 3px 0 0;
    color: #8791ae;
    font-size: 0.88rem;
}

.entity-label {
    display: block;
    margin-bottom: 7px;
    color: var(--cerebr-dark);
    font-size: 0.86rem;
    font-weight: 750;
}

.entity-validation {
    display: block;
    margin-top: 6px;
    color: #d92849;
    font-size: 0.8rem;
    font-weight: 650;
}

.entity-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
}

.entity-secondary-button {
    min-height: 50px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcdff0;
    border-radius: 14px;
    color: var(--cerebr-primary);
    background: #fff;
    font-weight: 800;
    text-decoration: none;
}

    .entity-secondary-button:hover {
        color: var(--cerebr-primary);
        background: #f7f5ff;
    }

/* Logotipos reutilizables */

.entity-logo-current {
    margin-top: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--theme-text, var(--cerebr-dark));
    border: 1px solid var(--theme-border, #e2e6f2);
    border-radius: 16px;
    background: var(--theme-surface-soft, #fafaff);
}

.entity-logo-preview {
    width: 74px;
    height: 74px;
    padding: 7px;
    object-fit: contain;
    border: 1px solid var(--theme-border, #e3e6ef);
    border-radius: 14px;
    background: var(--theme-surface, #fff);
}

.entity-choice-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) );
    gap: 12px;
    margin: 0;
    padding: 0;
}

    .entity-choice-list li {
        min-height: 52px;
        display: flex;
        align-items: center;
        padding: 13px 15px;
        border: 1px solid #dfe3f0;
        border-radius: 14px;
        color: var(--cerebr-dark);
        background: #fafaff;
        font-weight: 700;
    }

    .entity-choice-list input[type="checkbox"] {
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        margin: 0 10px 0 0;
        accent-color: var(--cerebr-primary);
        cursor: pointer;
    }

    .entity-choice-list label {
        margin: 0;
        cursor: pointer;
    }

@media screen and (max-width: 767.98px) {
    .entity-page {
        padding: 22px 0 42px;
    }

    .entity-header {
        align-items: stretch;
        flex-direction: column;
    }

    .entity-primary-button {
        width: 100%;
    }

    .entity-toolbar {
        grid-template-columns: 1fr;
    }

    .entity-card-header {
        align-items: flex-start;
    }

    .entity-form {
        padding: 18px;
    }

    .entity-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

        .entity-form-actions > * {
            width: 100%;
        }
}

.entity-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    color: var(--cerebr-dark);
    font-weight: 700;
    cursor: pointer;
}

    .entity-checkbox input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        margin: 0;
        margin-right: 8px;
        accent-color: var(--cerebr-primary);
        cursor: pointer;
    }

    .entity-checkbox label {
        width: auto;
        margin: 0;
        line-height: 1.35;
        cursor: pointer;
    }


.public-quote-company-logo {
    display: block;
    width: auto;
    max-width: 220px;
    max-height: 85px;
    object-fit: contain;
}

.public-quote-cerebr-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

html.cerebr-modal-open,
body.cerebr-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

    body.cerebr-modal-open .dashboard-main,
    body.cerebr-modal-open .cerebr-public-main {
        overflow: hidden !important;
    }

#cerebrModal.show {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Scroll interno reutilizable para listados */
.cerebr-scroll-list {
    max-height: clamp(320px, 48vh, 520px);
    padding-right: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: rgba(101, 53, 255, .45) transparent;
    scrollbar-width: thin;
}

    .cerebr-scroll-list::-webkit-scrollbar {
        width: 7px;
    }

    .cerebr-scroll-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .cerebr-scroll-list::-webkit-scrollbar-thumb {
        background: rgba(101, 53, 255, .35);
        border-radius: 20px;
    }

        .cerebr-scroll-list::-webkit-scrollbar-thumb:hover {
            background: rgba(101, 53, 255, .55);
        }

@media (max-width: 575.98px) {
    .cerebr-scroll-list {
        max-height: 380px;
        padding-right: 5px;
    }
}

/* =====================================================
   DETALLE DE PROYECTO · CONTINUIDAD E HISTORIAL
   ===================================================== */
.project-continuity-card {
    display: grid;
    gap: 1.1rem;
}

.project-continuity-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.project-continuity-copy {
    margin: .35rem 0 0;
    color: var(--theme-muted, #8e98ad);
}

.project-continuity-state {
    flex: 0 0 auto;
    padding: .45rem .75rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #7137f5, #ef357f);
    font-size: .78rem;
    font-weight: 800;
}

.project-continuity-grid {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(300px, 1.3fr);
    gap: 1rem;
    align-items: start;
}

.project-continuity-reason textarea {
    min-height: 92px;
    resize: vertical;
}

.project-continuity-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.project-continuity-actions .btn {
    min-height: 44px;
    border-radius: .8rem;
    padding: .7rem 1rem;
    font-weight: 800;
}

.project-action-reprogram {
    color: #fff;
    background: linear-gradient(135deg, #7048e8, #4d79c7);
}

.project-action-finish {
    color: #073d2d;
    background: #c9f7e7;
}

.project-action-cancel {
    color: #b71745;
    border: 1px solid rgba(239, 53, 127, .35);
    background: rgba(239, 53, 127, .08);
}

.project-history {
    border-top: 1px solid var(--theme-border, #344056);
    padding-top: 1rem;
}

.project-history h3 {
    margin: 0 0 .85rem;
    color: var(--theme-text, #f4f6fb);
    font-size: 1rem;
    font-weight: 800;
}

.project-history-item {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: .8rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--theme-border, #344056);
}

.project-history-item strong,
.project-history-item small {
    display: block;
}

.project-history-item small {
    margin-top: .25rem;
    color: var(--theme-muted, #8e98ad);
}

.project-history-badge {
    align-self: start;
    padding: .4rem .6rem;
    border-radius: 999px;
    text-align: center;
    font-size: .72rem;
    font-weight: 850;
}

.project-history-badge.is-rescheduled { color: #b99cff; background: rgba(112,72,232,.16); }
.project-history-badge.is-finished { color: #0c8b61; background: #d8f8eb; }
.project-history-badge.is-cancelled { color: #d82959; background: #ffe4ec; }

/* =====================================================
   AGENDA · SOLICITUDES DE CAMBIO
   ===================================================== */
.agenda-change-card {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--theme-border, #e1e4ef);
    border-radius: 1.15rem;
    background: var(--theme-surface, #ffffff);
}

.agenda-change-title {
    margin-left: .4rem;
    color: var(--theme-muted, #7b839e);
    font-size: .88rem;
    font-weight: 650;
}

.agenda-change-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    gap: .9rem;
    margin-top: 1rem;
}

.agenda-change-reason {
    grid-column: 1 / -1;
}

.agenda-change-reason textarea {
    min-height: 88px;
    resize: vertical;
}

.agenda-change-actions,
.agenda-request-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: 1rem;
}

.agenda-change-secondary {
    color: var(--theme-text, #152044);
    border: 1px solid var(--theme-border, #e1e4ef);
    background: transparent;
}

.agenda-request-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--theme-border, #e1e4ef);
}

.agenda-request-main strong,
.agenda-request-main span,
.agenda-request-main small {
    display: block;
}

.agenda-request-main span,
.agenda-request-main small {
    margin-top: .2rem;
    color: var(--theme-muted, #7b839e);
}

.agenda-request-main p {
    margin: .55rem 0 0;
    color: var(--theme-text, #152044);
}

.agenda-request-actions {
    align-items: flex-start;
    margin: 0;
}

.agenda-request-approve {
    color: #075d40;
    background: #d8f8eb;
    font-weight: 800;
}

.agenda-request-reject {
    color: #d82959;
    border: 1px solid rgba(216,41,89,.35);
    background: rgba(216,41,89,.08);
    font-weight: 800;
}

.agenda-change-history-item {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: .8rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--theme-border, #e1e4ef);
}

.agenda-change-history-item strong,
.agenda-change-history-item small {
    display: block;
}

.agenda-change-history-item p {
    margin: .3rem 0;
}

.agenda-change-history-item small {
    color: var(--theme-muted, #7b839e);
}

/* Agenda: contraste del historial compatible con los tres temas. */
.agenda-page .agenda-change-card:has(.agenda-change-history-item) :is(
    .section-title,
    h2,
    h3,
    .agenda-change-history-item strong
) {
    color: var(--theme-text, #152044) !important;
}

.agenda-page .agenda-change-card:has(.agenda-change-history-item) :is(
    .agenda-change-history-item p,
    .agenda-change-history-item span:not(.agenda-change-status)
) {
    color: var(--theme-text, #152044) !important;
}

.agenda-page .agenda-change-card:has(.agenda-change-history-item) .agenda-change-history-item small {
    color: var(--theme-muted, #7b839e) !important;
    opacity: 1;
}

.agenda-change-status {
    align-self: start;
    padding: .4rem .6rem;
    border-radius: 999px;
    text-align: center;
    color: #8b5cf6;
    background: rgba(139,92,246,.14);
    font-size: .7rem;
    font-weight: 850;
}

.agenda-change-status.is-approved { color: #087657; background: #d8f8eb; }
.agenda-change-status.is-rejected { color: #d82959; background: #ffe4ec; }

/* Contraste puntual: cliente relacionado y próximas actividades */
html[data-cerebr-theme="dark"] .detail-page :is(
    .client-related-heading h2,
    .client-related-name,
    .client-related-value
),
html[data-cerebr-theme="batman"] .detail-page :is(
    .client-related-heading h2,
    .client-related-name,
    .client-related-value
) {
    color: var(--theme-text) !important;
}

html[data-cerebr-theme="dark"] .detail-page :is(
    .client-related-heading p,
    .client-related-label,
    .client-related-rfc
),
html[data-cerebr-theme="batman"] .detail-page :is(
    .client-related-heading p,
    .client-related-label,
    .client-related-rfc
) {
    color: var(--theme-muted) !important;
}

html[data-cerebr-theme="dark"] .detail-page .client-related-header,
html[data-cerebr-theme="batman"] .detail-page .client-related-header {
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] .dashboard-panel :is(.agenda-item, .bg-light),
html[data-cerebr-theme="batman"] .dashboard-panel :is(.agenda-item, .bg-light) {
    color: var(--theme-text) !important;
    background: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

html[data-cerebr-theme="dark"] .dashboard-panel .agenda-item :is(strong, .project-info strong),
html[data-cerebr-theme="batman"] .dashboard-panel .agenda-item :is(strong, .project-info strong) {
    color: var(--theme-text) !important;
}

html[data-cerebr-theme="dark"] .dashboard-panel .agenda-item :is(small, .project-info small),
html[data-cerebr-theme="batman"] .dashboard-panel .agenda-item :is(small, .project-info small) {
    color: var(--theme-muted) !important;
}

/* Dashboard genera el nombre del proyecto con Bootstrap: small text-muted. */
html[data-cerebr-theme="dark"] .dashboard-panel .agenda-item .text-muted,
html[data-cerebr-theme="batman"] .dashboard-panel .agenda-item .text-muted {
    color: var(--theme-muted) !important;
    opacity: 1 !important;
}

/* Historial de cotizaciones: Empresa y Cliente usan text-muted de Bootstrap. */
html[data-cerebr-theme="dark"] .quote-history-table .text-muted,
html[data-cerebr-theme="batman"] .quote-history-table .text-muted {
    color: var(--theme-muted) !important;
    opacity: 1 !important;
}

/* Cotización: opción de logotipo compatible con Noche y Batman. */
html[data-cerebr-theme="dark"] .quote-page .quote-client-logo-option,
html[data-cerebr-theme="batman"] .quote-page .quote-client-logo-option {
    color: var(--theme-text) !important;
    background: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

html[data-cerebr-theme="dark"] .quote-page .quote-client-logo-text strong,
html[data-cerebr-theme="batman"] .quote-page .quote-client-logo-text strong {
    color: var(--theme-text) !important;
}

html[data-cerebr-theme="dark"] .quote-page .quote-client-logo-text span,
html[data-cerebr-theme="batman"] .quote-page .quote-client-logo-text span {
    color: var(--theme-muted) !important;
    opacity: 1 !important;
}

html[data-cerebr-theme="dark"] .quote-page .quote-client-logo-option.logo-unavailable,
html[data-cerebr-theme="batman"] .quote-page .quote-client-logo-option.logo-unavailable {
    background: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
    opacity: .78;
}

/* El dato secundario puede renderizarse como span/div según la actividad. */
html[data-cerebr-theme="dark"] .dashboard-panel .agenda-item .project-info,
html[data-cerebr-theme="dark"] .dashboard-panel .agenda-item .project-info :is(span, div, p),
html[data-cerebr-theme="batman"] .dashboard-panel .agenda-item .project-info,
html[data-cerebr-theme="batman"] .dashboard-panel .agenda-item .project-info :is(span, div, p) {
    color: var(--theme-muted) !important;
}

html[data-cerebr-theme="dark"] .dashboard-panel .agenda-item .project-info strong,
html[data-cerebr-theme="batman"] .dashboard-panel .agenda-item .project-info strong {
    color: var(--theme-text) !important;
}

html[data-cerebr-theme="dark"] .dashboard-panel .agenda-item .project-info :is(.text-primary, .text-info, a),
html[data-cerebr-theme="batman"] .dashboard-panel .agenda-item .project-info :is(.text-primary, .text-info, a) {
    color: var(--theme-accent) !important;
}

.activity-button.activity-change {
    color: #8b5cf6;
}

@media (max-width: 991.98px) {
    .agenda-change-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .agenda-change-grid,
    .agenda-request-item,
    .agenda-change-history-item {
        grid-template-columns: 1fr;
    }

    .agenda-change-actions,
    .agenda-request-actions {
        flex-direction: column;
    }

    .agenda-change-actions .btn,
    .agenda-request-actions .btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .project-continuity-header,
    .project-continuity-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .project-continuity-grid {
        grid-template-columns: 1fr;
    }

    .project-continuity-actions .btn {
        width: 100%;
        text-align: center;
    }

    .project-history-item {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.welcome-panel {
    position: relative;
    overflow: hidden;
    margin-bottom: 26px;
    padding: 30px;
    color: #ffffff;
    border-radius: 25px;
    background: linear-gradient( 105deg, #5734ff 0%, #9d38ef 55%, #ff536d 100% );
    box-shadow: 0 20px 45px rgba(91, 54, 220, .20);
}

    .welcome-panel::after {
        content: "🚀";
        position: absolute;
        right: 40px;
        bottom: -18px;
        font-size: 8rem;
        transform: rotate(-10deg);
        filter: drop-shadow(0 15px 15px rgba(30, 10, 90, .25));
    }

    .welcome-panel h2 {
        position: relative;
        z-index: 2;
        margin-bottom: 8px;
        font-size: clamp(1.7rem, 3vw, 2.5rem);
        font-weight: 800;
    }

    .welcome-panel p {
        position: relative;
        z-index: 2;
        max-width: 610px;
        margin-bottom: 22px;
        color: rgba(255, 255, 255, .82);
    }

.welcome-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 18px;
    color: var(--cerebr-primary);
    font-weight: 700;
    background: #ffffff;
    border-radius: 13px;
}

    .welcome-button:hover {
        color: var(--cerebr-coral);
        transform: translateY(-2px);
    }

.stat-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #eceefa;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(31, 34, 80, .06);
    transition: transform .2s ease;
}

    .stat-card:hover {
        transform: translateY(-4px);
    }

.stat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.stat-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    color: #ffffff;
    font-size: 1.35rem;
    border-radius: 15px;
}

.stat-purple {
    background: linear-gradient(145deg, #6237ff, #a03cf2);
}

.stat-coral {
    background: linear-gradient(145deg, #ff526d, #ff886e);
}

.stat-cyan {
    background: linear-gradient(145deg, #00aec5, #38d8dc);
}

.stat-yellow {
    background: linear-gradient(145deg, #f5a900, #ffd44a);
}

.stat-number {
    margin: 20px 0 3px;
    color: var(--cerebr-dark);
    font-size: 2rem;
    font-weight: 800;
}

.stat-label {
    margin: 0;
    color: var(--cerebr-muted);
    font-size: .87rem;
}

.stat-link {
    display: inline-block;
    margin-top: 15px;
    font-size: .8rem;
    font-weight: 700;
}

.dashboard-panel {
    height: 100%;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #eceefa;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(31, 34, 80, .05);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

    .panel-header h3 {
        margin: 0;
        color: var(--cerebr-dark);
        font-size: 1rem;
        font-weight: 800;
    }

.project-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid #eef0f7;
}

    .project-item:last-child {
        border-bottom: 0;
    }

.project-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    color: var(--cerebr-primary);
    font-size: 1.1rem;
    background: #f0edff;
    border-radius: 13px;
}

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

    .project-info strong {
        display: block;
        overflow: hidden;
        color: var(--cerebr-dark);
        font-size: .87rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .project-info small {
        color: var(--cerebr-muted);
        font-size: .75rem;
    }

.project-status {
    padding: 5px 9px;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 20px;
}

.status-progress {
    color: #6535ff;
    background: #eee9ff;
}

.status-draft {
    color: #6033d7;
    background: #eee9ff;
}

.status-quoted {
    color: #006f80;
    background: #dffaff;
}

.status-approved {
    color: #087447;
    background: #ddf8eb;
}

.status-rejected {
    color: #a51d35;
    background: #ffe5e9;
}

.status-process {
    color: #1456b8;
    background: #e2edff;
}

.status-finished {
    color: #305f13;
    background: #e8f7dc;
}

.agenda-item {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
    padding: 13px;
    background: #f8f8ff;
    border-radius: 15px;
}

.agenda-date {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: #ffffff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    background: var(--cerebr-gradient);
    border-radius: 13px;
}

    .agenda-date strong {
        display: block;
        font-size: 1.1rem;
    }

@media (max-width: 575.98px) {
    .welcome-panel {
        padding: 24px 20px 115px;
    }

        .welcome-panel::after {
            right: 20px;
            font-size: 6.5rem;
        }

    .stat-card,
    .dashboard-panel {
        padding: 18px;
    }
}

/* =========================================================
   PROYECTOS
   ========================================================= */

.projects-page {
    min-height: 100vh;
    padding: 32px 18px;
    background: #f7f8ff;
}

.projects-container {
    width: 100%;
    max-width: 1250px;
    margin: auto;
}

.projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.projects-title {
    margin: 0;
    color: var(--cerebr-dark);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -1.5px;
}

.projects-subtitle {
    margin: 5px 0 0;
    color: var(--cerebr-muted);
}

.projects-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.projects-page .search-container {
    position: relative;
    flex-grow: 1;
}

.projects-page .search-icon {
    position: absolute;
    top: 50%;
    left: 17px;
    color: var(--cerebr-muted);
    transform: translateY(-50%);
}

.projects-page .search-input {
    min-height: 48px;
    padding-left: 45px;
    border: 1px solid #e0e3ef;
    border-radius: 14px;
}

.projects-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eceefa;
    border-radius: 21px;
    box-shadow: 0 15px 40px rgba(30, 35, 90, .07);
}

.projects-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 22px;
    border-bottom: 1px solid #eceefa;
}

    .projects-card-header h2 {
        margin: 0;
        color: var(--cerebr-dark);
        font-size: 1rem;
        font-weight: 800;
    }

.projects-count {
    padding: 5px 11px;
    color: var(--cerebr-primary);
    font-size: .75rem;
    font-weight: 700;
    background: #eeeaff;
    border-radius: 20px;
}

.projects-page .project-row {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(120px, 1fr) 180px;
    align-items: center;
    gap: 15px;
    padding: 17px 22px;
    border-bottom: 1px solid #eef0f7;
    transition: background .2s ease;
}

    .projects-page .project-row:hover {
        background: #fafaff;
    }

    .projects-page .project-row:last-child {
        border-bottom: 0;
    }

.project-row-header {
    color: var(--cerebr-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    background: #fafaff;
}

.project-main {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.projects-page .project-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 47px;
    height: 47px;
    color: #ffffff;
    font-size: 1.25rem;
    border-radius: 15px;
    background: var(--cerebr-gradient);
}

.project-name {
    display: block;
    overflow: hidden;
    color: var(--cerebr-dark);
    font-size: .9rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-folio {
    display: block;
    margin-top: 3px;
    color: var(--cerebr-muted);
    font-size: .75rem;
}

.project-client {
    display: block;
    margin-top: 3px;
    color: #818ba9;
    font-size: .76rem;
    font-weight: 600;
}

.project-value {
    color: var(--cerebr-text);
    font-size: .82rem;
}

.status-badge {
    display: inline-block;
    padding: 6px 10px;
    font-size: .68rem;
    font-weight: 800;
    border-radius: 20px;
}

.status-review {
    color: #986000;
    background: #fff3cc;
}

.status-cancelled {
    color: #a51d35;
    background: #ffe5e9;
}

.project-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.projects-page .action-button {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    color: var(--cerebr-primary);
    background: #f1eeff;
    border-radius: 11px;
    transition: all .2s ease;
}

    .projects-page .action-button:hover {
        color: #ffffff;
        background: var(--cerebr-primary);
        transform: translateY(-2px);
    }

.projects-page .action-delete {
    color: #c62943;
    background: #ffe9ed;
}

    .projects-page .action-delete:hover {
        color: #ffffff;
        background: #d73550;
    }

.empty-projects {
    padding: 65px 20px;
    text-align: center;
}

    .empty-projects i {
        color: var(--cerebr-primary);
        font-size: 4rem;
    }

    .empty-projects h3 {
        margin-top: 17px;
        color: var(--cerebr-dark);
        font-size: 1.2rem;
        font-weight: 800;
    }

    .empty-projects p {
        color: var(--cerebr-muted);
    }

@media (max-width: 991.98px) {
    .projects-page .project-row-header {
        display: none;
    }

    .projects-page .project-row {
        grid-template-columns: 1fr auto;
        gap: 11px;
    }

    .projects-page .project-main {
        grid-column: 1;
    }

    .projects-page .project-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .projects-page .project-value,
    .projects-page .project-status-container {
        grid-column: 1 / -1;
        padding-left: 60px;
    }
}

@media (max-width: 575.98px) {
    .projects-page {
        padding: 22px 12px;
    }

    .projects-header {
        align-items: stretch;
        flex-direction: column;
    }

        .projects-header .btn {
            width: 100%;
        }

    .projects-toolbar {
        flex-direction: column;
    }

    .projects-page .search-container {
        width: 100%;
    }

    .projects-page .project-row {
        padding: 17px 15px;
    }

    .projects-page .project-value,
    .projects-page .project-status-container {
        padding-left: 0;
    }

    .projects-card-header {
        padding: 17px 15px;
    }
}

/* =========================================================
   NUEVO PROYECTO
   ========================================================= */

.project-page {
    min-height: 100vh;
    padding: 35px 18px;
    background: #f7f8ff;
}

.project-page .project-container {
    width: 100%;
    max-width: 1050px;
    margin: auto;
}

.project-page .project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.project-page .project-title {
    margin: 0;
    color: var(--cerebr-dark);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -1.5px;
}

.project-page .project-subtitle {
    margin: 5px 0 0;
    color: var(--cerebr-muted);
}

.project-page .back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 16px;
    color: var(--cerebr-primary);
    font-weight: 700;
    background: #ffffff;
    border: 1px solid #e3e5f2;
    border-radius: 13px;
}

.project-page .project-card {
    padding: 32px;
}

.project-page .section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;
    padding-bottom: 13px;
    color: var(--cerebr-dark);
    font-size: 1.05rem;
    font-weight: 800;
    border-bottom: 1px solid #eceefa;
}

.project-page .section-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #ffffff;
    border-radius: 12px;
    background: var(--cerebr-gradient);
}

.project-page .field-label {
    margin-bottom: 7px;
    color: var(--cerebr-dark);
    font-size: .88rem;
    font-weight: 700;
}

.form-label-custom {
    display: block;
    margin-bottom: 7px;
    color: var(--cerebr-dark);
    font-size: .88rem;
    font-weight: 700;
}

.form-control-custom {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 11px 14px;
    color: var(--cerebr-text);
    background-color: #ffffff;
    border: 1px solid #dfe2ee;
    border-radius: 13px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .form-control-custom:focus {
        border-color: var(--cerebr-primary);
        box-shadow: 0 0 0 .2rem rgba(101, 53, 255, .12);
    }

.field-help {
    display: block;
    margin-top: 6px;
    color: var(--cerebr-muted);
    font-size: .8rem;
    line-height: 1.45;
}

.project-page .required-mark {
    color: var(--cerebr-coral);
}

.project-page .project-input {
    min-height: 50px;
    padding: 11px 14px;
    color: var(--cerebr-text);
    background: #ffffff;
    border: 1px solid #dfe2ee;
    border-radius: 13px;
}

    .project-page .project-input:focus {
        border-color: var(--cerebr-primary);
        box-shadow: 0 0 0 .2rem rgba(101, 53, 255, .12);
    }

.project-page textarea.project-input {
    min-height: 120px;
    resize: vertical;
}

.project-page .validation-message {
    display: block;
    margin-top: 5px;
    color: #d52c47;
    font-size: .78rem;
    font-weight: 600;
}

.project-page .form-message {
    display: block;
    margin-bottom: 20px;
    padding: 13px 16px;
    border-radius: 13px;
    font-weight: 600;
}

.project-page .form-message-error {
    color: #a51d35;
    background: #fff0f3;
    border: 1px solid #ffc7d1;
}

.project-page .form-message-success {
    color: #087447;
    background: #e8fff4;
    border: 1px solid #a8ebcc;
}

.project-page .project-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #eceefa;
}

.project-page .project-mode-card {
    margin-top: 24px;
    padding: 18px;
    background: #f5f2ff;
    border: 1px solid #ddd4ff;
    border-radius: 16px;
}

.project-page .project-mode-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .project-page .project-mode-check input[type="checkbox"] {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 3px;
        accent-color: var(--cerebr-primary);
        cursor: pointer;
    }

    .project-page .project-mode-check label {
        cursor: pointer;
    }

    .project-page .project-mode-check strong,
    .project-page .project-mode-check span {
        display: block;
    }

    .project-page .project-mode-check strong {
        color: var(--cerebr-dark);
        font-size: .92rem;
    }

    .project-page .project-mode-check span {
        margin-top: 4px;
        color: var(--cerebr-muted);
        font-size: .8rem;
        line-height: 1.5;
    }

@media (max-width: 575.98px) {
    .project-page {
        padding: 22px 13px;
    }

    .project-page .project-header {
        align-items: flex-start;
        flex-direction: column-reverse;
    }

    .project-page .project-card {
        padding: 23px 17px;
    }

    .project-page .project-actions {
        flex-direction: column-reverse;
    }

        .project-page .project-actions .btn {
            width: 100%;
        }
}

/* =========================================================
   DETALLE DEL PROYECTO
   ========================================================= */

.detail-page {
    min-height: 100vh;
    padding: 32px 18px;
    background: #f7f8ff;
}

.detail-page .detail-container {
    width: 100%;
    max-width: 1150px;
    margin: auto;
}

.detail-page .detail-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    padding: 30px;
    color: #ffffff;
    border-radius: 25px;
    background: var(--cerebr-gradient);
    box-shadow: 0 20px 45px rgba(91, 54, 220, .18);
}

    .detail-page .detail-header::after {
        content: "🚀";
        position: absolute;
        right: 40px;
        bottom: -25px;
        font-size: 7rem;
        transform: rotate(-10deg);
    }

.detail-page .detail-header-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
}

.detail-page .back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .86);
    font-weight: 700;
}

    .detail-page .back-link:hover {
        color: #ffffff;
    }

.detail-page .project-folio {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 12px;
    color: inherit;
    font-size: .75rem;
    font-weight: 800;
    background: rgba(255, 255, 255, .17);
    border-radius: 20px;
}

.detail-page .project-title {
    margin: 0;
    color: inherit;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -2px;
}

.detail-page .project-date {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .78);
}

.detail-page .status-badge {
    display: inline-block;
    margin-top: 17px;
    padding: 7px 13px;
    font-size: .72rem;
    font-weight: 800;
    border-radius: 20px;
}

.detail-page .detail-card {
    height: 100%;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #eceefa;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(31, 34, 80, .05);
}

.detail-page .card-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 21px;
    padding-bottom: 14px;
    color: var(--cerebr-dark);
    font-size: 1rem;
    font-weight: 800;
    border-bottom: 1px solid #eceefa;
}

.detail-page .card-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    color: #ffffff;
    border-radius: 12px;
    background: var(--cerebr-gradient);
}

.detail-page .detail-field {
    margin-bottom: 19px;
}

    .detail-page .detail-field:last-child {
        margin-bottom: 0;
    }

.detail-page .detail-label {
    display: block;
    margin-bottom: 5px;
    color: var(--cerebr-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.detail-page .detail-value {
    display: block;
    color: var(--cerebr-text);
    font-size: .9rem;
    font-weight: 600;
}

.detail-page .description-value {
    line-height: 1.7;
    white-space: pre-line;
}

.detail-page .module-card {
    display: flex;
    align-items: center;
    gap: 17px;
    height: 100%;
    padding: 22px;
    color: var(--cerebr-text);
    background: #ffffff;
    border: 1px solid #eceefa;
    border-radius: 19px;
    box-shadow: 0 12px 30px rgba(31, 34, 80, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .detail-page .module-card:hover {
        color: var(--cerebr-text);
        transform: translateY(-4px);
        box-shadow: 0 18px 35px rgba(31, 34, 80, .10);
    }

.detail-page .module-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    color: #ffffff;
    font-size: 1.45rem;
    border-radius: 17px;
}

.detail-page .module-files {
    background: linear-gradient(145deg, #00aec5, #36d9dc);
}

.detail-page .module-quote {
    background: linear-gradient(145deg, #6737ff, #ee44a5);
}

.detail-page .module-card strong {
    display: block;
    color: var(--cerebr-dark);
}

.detail-page .module-card small {
    color: var(--cerebr-muted);
}

.detail-page .module-arrow {
    margin-left: auto;
    color: var(--cerebr-primary);
    font-size: 1.3rem;
}

.detail-page .error-panel {
    max-width: 700px;
    margin: 80px auto;
    padding: 40px 25px;
    text-align: center;
}

.detail-page .client-related-card {
    margin-bottom: 25px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e9f5;
    border-radius: 22px;
    box-shadow: 0 14px 35px rgba(35, 43, 92, .06);
}

.detail-page .client-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e8ebf5;
}

.detail-page .client-related-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-page .client-related-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    color: #ffffff;
    border-radius: 12px;
    background: linear-gradient(135deg, #6334ff, #f54279);
}

.detail-page .client-related-heading h2 {
    margin: 0;
    color: #071442;
    font-size: 1.03rem;
    font-weight: 850;
}

.detail-page .client-related-heading p {
    margin: 2px 0 0;
    color: #8790ab;
    font-size: .8rem;
}

.detail-page .client-related-content {
    display: grid;
    grid-template-columns: 1.1fr 1.5fr auto;
    align-items: center;
    gap: 25px;
}

.detail-page .client-related-label {
    display: block;
    margin-bottom: 5px;
    color: #7f89a7;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.detail-page .client-related-name {
    display: block;
    color: #071442;
    font-size: 1.08rem;
    font-weight: 850;
}

.detail-page .client-related-rfc {
    display: block;
    margin-top: 4px;
    color: #7f89a7;
    font-size: .8rem;
}

.detail-page .client-related-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}

.detail-page .client-related-value {
    color: #17234d;
    font-size: .84rem;
    font-weight: 750;
    word-break: break-word;
}

.detail-page .client-related-actions {
    display: flex;
    gap: 8px;
}

.detail-page .client-related-button {
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    width: 42px;
    height: 42px;
    color: #6537ff;
    font-size: 0;
    text-decoration: none;
    background: #f0ecff;
    border-radius: 12px;
}

    .detail-page .client-related-button i {
        font-size: 1rem;
    }

    .detail-page .client-related-button.whatsapp {
        color: #128c55;
        background: #e5f8ef;
    }

    .detail-page .client-related-button.email {
        color: #1265c7;
        background: #e8f2ff;
    }

.detail-page .client-related-status {
    padding: 6px 10px;
    font-size: .7rem;
    font-weight: 850;
    border-radius: 999px;
}

.detail-page .client-related-active {
    color: #087443;
    background: #daf7e9;
}

.detail-page .client-related-inactive {
    color: #b4233c;
    background: #ffe5ea;
}

.detail-page .client-related-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #8a6b2a;
    background: #fffaf0;
    border-color: #f3dfad;
}

    .detail-page .client-related-empty i {
        font-size: 1.5rem;
    }

    .detail-page .client-related-empty strong,
    .detail-page .client-related-empty span {
        display: block;
    }

    .detail-page .client-related-empty span {
        margin-top: 3px;
        color: #9a8969;
        font-size: .8rem;
    }

.detail-page .detail-edit-input {
    min-height: 48px;
    margin-top: 7px;
    border: 1px solid #dfe2ef;
    border-radius: 13px;
}

    .detail-page .detail-edit-input:focus {
        border-color: var(--cerebr-primary);
        box-shadow: 0 0 0 .2rem rgba(101, 53, 255, .12);
    }

.detail-page .detail-mode-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    background: #f5f2ff;
    border: 1px solid #ddd4ff;
    border-radius: 16px;
}

.detail-page .detail-mode-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .detail-page .detail-mode-check input[type="checkbox"] {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 3px;
        accent-color: var(--cerebr-primary);
        cursor: pointer;
    }

    .detail-page .detail-mode-check label {
        cursor: pointer;
    }

    .detail-page .detail-mode-check strong,
    .detail-page .detail-mode-check span {
        display: block;
    }

    .detail-page .detail-mode-check strong {
        color: var(--cerebr-dark);
        font-size: .9rem;
    }

    .detail-page .detail-mode-check span {
        margin-top: 4px;
        color: var(--cerebr-muted);
        font-size: .8rem;
    }

@media (max-width: 991px) {
    .detail-page .client-related-content {
        grid-template-columns: 1fr;
    }

    .detail-page .client-related-data {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .detail-page .detail-mode-card {
        align-items: stretch;
        flex-direction: column;
    }

        .detail-page .detail-mode-card .btn {
            width: 100%;
        }
}

@media (max-width: 575.98px) {
    .detail-page {
        padding: 20px 12px;
    }

    .detail-page .detail-header {
        padding: 24px 20px 105px;
    }

        .detail-page .detail-header::after {
            right: 20px;
            font-size: 6rem;
        }

    .detail-page .detail-card {
        padding: 21px 17px;
    }

    .detail-page .client-related-data {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ARCHIVOS DEL PROYECTO
   ========================================================= */

.files-page {
    min-height: 100vh;
    padding: 32px 18px;
    background: #f7f8ff;
}

.files-page .files-container {
    width: 100%;
    max-width: 1150px;
    margin: auto;
}

.files-page .files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.files-page .files-title {
    margin: 5px 0;
    color: var(--cerebr-dark);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
}

.files-page .upload-card,
.files-page .files-card {
    padding: 25px;
    background: #ffffff;
    border: 1px solid #eceefa;
    border-radius: 21px;
    box-shadow: 0 14px 35px rgba(31, 34, 80, .06);
}

.files-page .section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    color: var(--cerebr-dark);
    font-size: 1rem;
    font-weight: 800;
}

.files-page .section-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: #ffffff;
    border-radius: 13px;
    background: var(--cerebr-gradient);
}

.files-page .upload-zone {
    padding: 25px;
    text-align: center;
    background: #fafaff;
    border: 2px dashed #cfc9ff;
    border-radius: 17px;
}

    .files-page .upload-zone > i {
        color: var(--cerebr-primary);
        font-size: 2.8rem;
    }

.files-page .file-input {
    min-height: 48px;
    border: 1px solid #dfe2ee;
    border-radius: 13px;
}

.files-page .form-message {
    display: block;
    margin-bottom: 18px;
    padding: 12px 15px;
    font-weight: 600;
    border-radius: 12px;
}

.files-page .message-success {
    color: #087447;
    background: #e8fff4;
    border: 1px solid #a8ebcc;
}

.files-page .message-error {
    color: #a51d35;
    background: #fff0f3;
    border: 1px solid #ffc7d1;
}

.files-page .file-item {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eef0f7;
}

    .files-page .file-item:last-child {
        border-bottom: 0;
    }

.files-page .file-preview {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 58px;
    height: 58px;
    color: var(--cerebr-primary);
    font-size: 1.7rem;
    background: #f0edff;
    border-radius: 15px;
}

    .files-page .file-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.files-page .file-name {
    display: block;
    overflow: hidden;
    max-width: 650px;
    color: var(--cerebr-dark);
    font-size: .88rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-page .file-meta {
    display: block;
    margin-top: 4px;
    color: var(--cerebr-muted);
    font-size: .74rem;
}

.files-page .file-description {
    display: block;
    margin-top: 4px;
    color: var(--cerebr-text);
    font-size: .78rem;
}

.files-page .file-actions {
    display: flex;
    gap: 7px;
}

.files-page .file-action {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--cerebr-primary);
    background: #f0edff;
    border: 0;
    border-radius: 11px;
}

    .files-page .file-action:hover {
        color: #ffffff;
        background: var(--cerebr-primary);
    }

.files-page .file-delete {
    color: #c62943;
    background: #ffe9ed;
}

    .files-page .file-delete:hover {
        color: #ffffff;
        background: #d73550;
    }

.files-page .empty-files {
    padding: 50px 20px;
    color: var(--cerebr-muted);
    text-align: center;
}

    .files-page .empty-files i {
        display: block;
        margin-bottom: 12px;
        color: var(--cerebr-primary);
        font-size: 3.5rem;
    }

@media (max-width: 575.98px) {
    .files-page {
        padding: 20px 12px;
    }

    .files-page .files-header {
        align-items: stretch;
        flex-direction: column;
    }

    .files-page .upload-card,
    .files-page .files-card {
        padding: 20px 15px;
    }

    .files-page .file-item {
        grid-template-columns: 52px 1fr;
    }

    .files-page .file-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* =========================================================
   COTIZACIÓN DEL PROYECTO
   ========================================================= */

.quote-page {
    min-height: 100vh;
    padding: 30px 16px;
    background: #f7f8ff;
}

.quote-page .quote-container {
    width: 100%;
    max-width: 1250px;
    margin: auto;
}

.quote-page .quote-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    padding: 28px;
    color: #ffffff;
    border-radius: 24px;
    background: var(--cerebr-gradient);
    box-shadow: 0 18px 40px rgba(91, 54, 220, .18);
}

.quote-page .quote-title {
    margin: 8px 0 4px;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 900;
}

.quote-page .quote-folio {
    display: inline-block;
    padding: 6px 12px;
    font-size: .75rem;
    font-weight: 800;
    background: rgba(255, 255, 255, .18);
    border-radius: 20px;
}

.quote-page .quote-card {
    height: 100%;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #eceefa;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(31, 34, 80, .06);
}

.quote-page .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--cerebr-dark);
    font-size: 1rem;
    font-weight: 800;
}

.quote-page .section-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    color: #ffffff;
    border-radius: 12px;
    background: var(--cerebr-gradient);
}

.quote-page .quote-input {
    min-height: 48px;
    border: 1px solid #dfe2ee;
    border-radius: 13px;
}

.quote-page textarea.quote-input {
    min-height: 90px;
    resize: vertical;
}

.quote-page .field-label {
    margin-bottom: 6px;
    color: var(--cerebr-dark);
    font-size: .8rem;
    font-weight: 700;
}

.quote-page .concept-row {
    display: grid !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #eef0f7;
    box-sizing: border-box;
}

    .quote-page .concept-row > * {
        min-width: 0;
        box-sizing: border-box;
    }

.quote-page .concept-header {
    color: var(--cerebr-muted);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    background: #fafaff;
}

.quote-page .concept-name {
    display: block;
    color: var(--cerebr-dark);
    font-size: .86rem;
    font-weight: 800;
}

.quote-page .concept-description {
    display: block;
    color: var(--cerebr-muted);
    font-size: .73rem;
}

.quote-page .concept-value {
    color: var(--cerebr-text);
    font-size: .8rem;
}

.quote-page .concept-amount {
    color: var(--cerebr-dark);
    font-weight: 800;
}

.quote-page .summary {
    max-width: 410px;
    margin-left: auto;
}

.quote-page .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    color: var(--cerebr-muted);
    border-bottom: 1px solid #eef0f7;
}

.quote-page .summary-total {
    margin-top: 8px;
    padding: 16px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 800;
    background: var(--cerebr-gradient);
    border-radius: 14px;
}

.quote-page .quote-message {
    display: block;
    margin-bottom: 18px;
    padding: 12px 15px;
    font-weight: 600;
    border-radius: 12px;
}

.quote-page .message-success {
    color: #087447;
    background: #e8fff4;
    border: 1px solid #a8ebcc;
}

.quote-page .message-error {
    color: #a51d35;
    background: #fff0f3;
    border: 1px solid #ffc7d1;
}

.quote-page .empty-concepts {
    padding: 45px 20px;
    color: var(--cerebr-muted);
    text-align: center;
}

.quote-page .quote-status {
    display: inline-block;
    padding: 7px 13px;
    font-size: .72rem;
    font-weight: 800;
    border-radius: 20px;
}

.quote-page .commercial-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.quote-page .btn-accept {
    color: #ffffff;
    background: linear-gradient(135deg, #08a966, #24d39a);
    border: 0;
}

.quote-page .btn-reject {
    color: #c62943;
    background: #ffe9ed;
    border: 1px solid #ffc9d2;
}

.quote-page .quote-client-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px;
}

.quote-page .quote-client-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    color: #ffffff;
    font-size: .75rem;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
}

    .quote-page .quote-client-item i {
        font-size: .8rem;
    }

.quote-page .btn-whatsapp-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
    background: linear-gradient(100deg, #17a668, #20c77c);
    border: 0;
    border-radius: 13px;
    box-shadow: 0 12px 24px rgba(23, 166, 104, .20);
}

    .quote-page .btn-whatsapp-quote:hover {
        color: #ffffff;
        transform: translateY(-1px);
    }

.quote-page .whatsapp-loading {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(7, 20, 66, .58);
    backdrop-filter: blur(5px);
}

    .quote-page .whatsapp-loading.show {
        display: flex;
    }

.quote-page .whatsapp-loading-card {
    width: min(100%, 360px);
    padding: 30px;
    color: #071442;
    text-align: center;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(7, 20, 66, .25);
}

    .quote-page .whatsapp-loading-card strong,
    .quote-page .whatsapp-loading-card span {
        display: block;
    }

    .quote-page .whatsapp-loading-card strong {
        margin-bottom: 7px;
        font-size: 1.1rem;
    }

    .quote-page .whatsapp-loading-card span {
        color: #818ba9;
        font-size: .82rem;
        line-height: 1.5;
    }

.quote-page .whatsapp-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 17px;
    border: 5px solid #eee9ff;
    border-top-color: #6537ff;
    border-right-color: #f54279;
    border-radius: 50%;
    animation: whatsapp-spin .8s linear infinite;
}

@keyframes whatsapp-spin {
    to {
        transform: rotate(360deg);
    }
}

.quote-page .concept-form-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100%;
    margin-top: 20px;
}

    .quote-page .concept-form-actions .btn-add-concept,
    .quote-page .concept-form-actions .btn-cancel-edit {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto !important;
        min-height: 46px;
        margin: 0 !important;
        padding: 11px 22px;
        font-size: .9rem;
        font-weight: 800;
        line-height: 1;
        text-decoration: none !important;
        white-space: nowrap;
        border-radius: 13px;
        box-sizing: border-box;
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

.quote-page .btn-add-concept {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6537ff, #f54279);
    border: 0;
    box-shadow: 0 10px 22px rgba(101, 55, 255, .20);
}

    .quote-page .btn-add-concept:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 13px 26px rgba(101, 55, 255, .28);
    }

.quote-page .btn-cancel-edit {
    color: #6537ff !important;
    background: #f3efff;
    border: 1px solid #ddd3ff;
}

    .quote-page .btn-cancel-edit:hover {
        color: #ffffff !important;
        background: #6537ff;
        border-color: #6537ff;
    }

.quote-page .concept-row .delete-container {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    overflow: hidden;
    width: 84px;
    min-width: 84px;
    max-width: 84px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.quote-page .concept-row .edit-button,
.quote-page .concept-row .delete-button {
    display: inline-flex !important;
    flex: 0 0 36px !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    border-radius: 11px;
    box-sizing: border-box;
    transition: transform .2s ease, background .2s ease;
}

.quote-page .edit-button {
    color: #6537ff !important;
    background: #eee9ff;
    border: 1px solid #ddd3ff;
}

    .quote-page .edit-button:hover {
        color: #ffffff !important;
        background: #6537ff;
        border-color: #6537ff;
        transform: translateY(-1px);
    }

.quote-page .delete-button {
    color: #e83255 !important;
    background: #ffe9ee;
    border: 1px solid #ffd5df;
}

    .quote-page .delete-button:hover {
        color: #ffffff !important;
        background: #e83255;
        border-color: #e83255;
        transform: translateY(-1px);
    }

@media screen and (max-width: 767.98px) {
    .quote-page {
        overflow-x: hidden;
        width: 100%;
        padding: 20px 10px;
        box-sizing: border-box;
    }

    .quote-page .quote-container,
    .quote-page .quote-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .quote-page .quote-card {
        overflow: hidden;
        padding: 20px 16px;
    }

    .quote-page .concept-form-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .quote-page .concept-form-actions .btn-add-concept,
    .quote-page .concept-form-actions .btn-cancel-edit {
        width: auto !important;
        margin: 0 !important;
    }

    .quote-page .concept-row.concept-header {
        display: none !important;
    }

    .quote-page article.concept-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 78px !important;
        grid-template-rows: auto !important;
        align-items: start !important;
        column-gap: 10px !important;
        row-gap: 7px !important;
        overflow: hidden !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 16px 0 !important;
        box-sizing: border-box !important;
    }

    .quote-page article.concept-row > div:not(.delete-container) {
        grid-column: 1 !important;
        grid-row: auto !important;
        overflow-wrap: anywhere;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .quote-page article.concept-row > .delete-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        overflow: visible !important;
        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .quote-page article.concept-row .edit-button,
    .quote-page article.concept-row .delete-button {
        position: static !important;
        display: inline-flex !important;
        flex: 0 0 36px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .quote-page .concept-name,
    .quote-page .concept-description,
    .quote-page .concept-value {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    .quote-page .quote-header,
    .quote-page .quote-card {
        padding: 20px 16px;
    }
}

/* =========================================================
   LISTADO DE COTIZACIONES
   ========================================================= */

.quotes-page {
    min-height: 100vh;
    padding: 32px 18px;
    background: #f7f8ff;
}

.quotes-page .quotes-container {
    width: 100%;
    max-width: 1250px;
    margin: auto;
}

.quotes-page .quotes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.quotes-page .quotes-title {
    margin: 5px 0;
    color: var(--cerebr-dark);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 900;
    letter-spacing: -2px;
}

.quotes-page .search-container {
    position: relative;
    margin-bottom: 22px;
}

.quotes-page .search-icon {
    position: absolute;
    top: 50%;
    left: 17px;
    color: var(--cerebr-muted);
    transform: translateY(-50%);
}

.quotes-page .search-input {
    min-height: 50px;
    padding-left: 46px;
    border: 1px solid #dfe2ee;
    border-radius: 14px;
}

.quotes-page .quotes-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eceefa;
    border-radius: 21px;
    box-shadow: 0 14px 35px rgba(31, 34, 80, .06);
}

.quotes-page .quotes-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 22px;
    border-bottom: 1px solid #eceefa;
}

    .quotes-page .quotes-card-header h2 {
        margin: 0;
        color: var(--cerebr-dark);
        font-size: 1rem;
        font-weight: 800;
    }

.quotes-page .quotes-count {
    padding: 5px 11px;
    color: var(--cerebr-primary);
    font-size: .75rem;
    font-weight: 700;
    background: #eeeaff;
    border-radius: 20px;
}

.quotes-page .quote-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(210px, 1.8fr) 120px 120px 130px 115px 145px;
    align-items: center;
    gap: 13px;
    padding: 17px 22px;
    border-bottom: 1px solid #eef0f7;
    transition: background .2s ease;
}

    .quotes-page .quote-row:hover {
        background: #fafaff;
    }

    .quotes-page .quote-row:last-child {
        border-bottom: 0;
    }

.quotes-page .quote-row-header {
    color: var(--cerebr-muted);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    background: #fafaff;
}

.quotes-page .quote-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.quotes-page .quote-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    color: #ffffff;
    font-size: 1.2rem;
    background: var(--cerebr-gradient);
    border-radius: 14px;
}

.quotes-page .quote-folio {
    display: block;
    color: var(--cerebr-dark);
    font-size: .84rem;
    font-weight: 800;
}

.quotes-page .quote-version {
    display: block;
    margin-top: 3px;
    color: var(--cerebr-muted);
    font-size: .71rem;
}

.quotes-page .project-name {
    display: block;
    overflow: hidden;
    color: var(--cerebr-dark);
    font-size: .83rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quotes-page .project-folio {
    color: var(--cerebr-muted);
    font-size: .71rem;
}

.quotes-page .quote-value {
    color: var(--cerebr-text);
    font-size: .78rem;
}

.quotes-page .quote-total {
    color: var(--cerebr-dark);
    font-size: .87rem;
    font-weight: 800;
}

.quotes-page .status-badge {
    display: inline-block;
    padding: 6px 10px;
    font-size: .67rem;
    font-weight: 800;
    border-radius: 20px;
}

.quotes-page .quote-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.quotes-page .quote-action {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    color: var(--cerebr-primary);
    background: #f0edff;
    border-radius: 11px;
    transition: all .2s ease;
}

    .quotes-page .quote-action:hover {
        color: #ffffff;
        background: var(--cerebr-primary);
        transform: translateY(-2px);
    }

.quotes-page .quote-pdf {
    color: #c62943;
    background: #ffe9ed;
}

    .quotes-page .quote-pdf:hover {
        background: #d73550;
    }

.quotes-page .empty-quotes {
    padding: 60px 20px;
    color: var(--cerebr-muted);
    text-align: center;
}

    .quotes-page .empty-quotes i {
        display: block;
        margin-bottom: 14px;
        color: var(--cerebr-primary);
        font-size: 4rem;
    }

@media (max-width: 1100px) {
    .quotes-page .quote-row-header {
        display: none;
    }

    .quotes-page .quote-row {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .quotes-page .quote-main {
        grid-column: 1;
    }

    .quotes-page .quote-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .quotes-page .quote-row > .quote-value,
    .quotes-page .quote-row > .quote-total,
    .quotes-page .quote-row > .status-container,
    .quotes-page .quote-row > .project-container {
        grid-column: 1 / -1;
        padding-left: 57px;
    }
}

@media (max-width: 575.98px) {
    .quotes-page {
        padding: 20px 11px;
    }

    .quotes-page .quotes-header {
        align-items: stretch;
        flex-direction: column;
    }

    .quotes-page .quotes-card-header,
    .quotes-page .quote-row {
        padding-right: 15px;
        padding-left: 15px;
    }

    .quotes-page .quote-row > .quote-value,
    .quotes-page .quote-row > .quote-total,
    .quotes-page .quote-row > .status-container,
    .quotes-page .quote-row > .project-container {
        padding-left: 0;
    }
}

/* =========================================================
   AGENDA
   ========================================================= */

.agenda-page {
    min-height: 100vh;
    padding: 30px 16px;
    background: #f7f8ff;
}

.agenda-page .agenda-container {
    width: 100%;
    max-width: 1250px;
    margin: auto;
}

.agenda-page .agenda-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.agenda-page .agenda-title {
    margin: 5px 0;
    color: var(--cerebr-dark);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 900;
    letter-spacing: -2px;
}

.agenda-page .agenda-card {
    padding: 24px;
    background: #ffffff;
    border: 1px solid #eceefa;
    border-radius: 21px;
    box-shadow: 0 14px 35px rgba(31, 34, 80, .06);
}

.agenda-page .section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    color: var(--cerebr-dark);
    font-size: 1rem;
    font-weight: 800;
}

.agenda-page .section-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: #ffffff;
    background: var(--cerebr-gradient);
    border-radius: 13px;
}

.agenda-page .agenda-input {
    min-height: 48px;
    border: 1px solid #dfe2ee;
    border-radius: 13px;
}

.agenda-page textarea.agenda-input {
    min-height: 90px;
    resize: vertical;
}

.agenda-page .field-label {
    margin-bottom: 6px;
    color: var(--cerebr-dark);
    font-size: .8rem;
    font-weight: 700;
}

.agenda-page .agenda-message {
    display: block;
    margin-bottom: 18px;
    padding: 12px 15px;
    font-weight: 600;
    border-radius: 12px;
}

.agenda-page .message-success {
    color: #087447;
    background: #e8fff4;
    border: 1px solid #a8ebcc;
}

.agenda-page .message-error {
    color: #a51d35;
    background: #fff0f3;
    border: 1px solid #ffc7d1;
}

.agenda-page .filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(190px, 1fr) 170px 170px auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 22px;
}

.agenda-page .filter-clear {
    display: inline-grid;
    place-items: center;
    width: 48px;
    min-height: 48px;
    color: #6535ff;
    background: #ffffff;
    border: 1px solid #6535ff;
    border-radius: 13px;
}

.agenda-page .activity-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 17px;
    padding: 17px 0;
    border-bottom: 1px solid #eef0f7;
}

    .agenda-page .activity-item:last-child {
        border-bottom: 0;
    }

.agenda-page .activity-date {
    display: grid;
    place-items: center;
    width: 67px;
    height: 67px;
    color: #ffffff;
    text-align: center;
    background: var(--cerebr-gradient);
    border-radius: 18px;
}

    .agenda-page .activity-date strong {
        display: block;
        font-size: 1.25rem;
        line-height: 1;
    }

    .agenda-page .activity-date span {
        font-size: .67rem;
        font-weight: 700;
        text-transform: uppercase;
    }

.agenda-page .activity-date-pending {
    color: var(--cerebr-primary);
    background: #eeeaff;
}

.agenda-page .activity-main {
    min-width: 0;
}

.agenda-page .activity-title {
    margin: 0;
    color: var(--cerebr-dark);
    font-size: .92rem;
    font-weight: 800;
}

.agenda-page .activity-project {
    display: block;
    margin-top: 4px;
    color: var(--cerebr-primary);
    font-size: .75rem;
    font-weight: 700;
}

.agenda-page .activity-description {
    display: block;
    margin-top: 5px;
    color: var(--cerebr-muted);
    font-size: .77rem;
}

.agenda-page .activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 7px;
    color: var(--cerebr-muted);
    font-size: .73rem;
}

.agenda-page .activity-status {
    display: inline-block;
    padding: 6px 10px;
    font-size: .67rem;
    font-weight: 800;
    border-radius: 20px;
}

.agenda-page .status-pending {
    color: #986000;
    background: #fff3cc;
}

.agenda-page .status-completed {
    color: #087447;
    background: #ddf8eb;
}

.agenda-page .activity-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.agenda-page .activity-button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--cerebr-primary);
    background: #f0edff;
    border: 0;
    border-radius: 11px;
}

.agenda-page .activity-complete {
    color: #087447;
    background: #ddf8eb;
}

.agenda-page .activity-delete {
    color: #c62943;
    background: #ffe9ed;
}

.agenda-page .empty-agenda {
    padding: 55px 20px;
    color: var(--cerebr-muted);
    text-align: center;
}

    .agenda-page .empty-agenda i {
        display: block;
        margin-bottom: 14px;
        color: var(--cerebr-primary);
        font-size: 4rem;
    }

.agenda-page #sinResultadosAgenda {
    display: none;
}

@media (max-width: 1099.98px) {
    .agenda-page .filter-bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .agenda-page .filter-clear {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .agenda-page .agenda-header {
        align-items: stretch;
        flex-direction: column;
    }

    .agenda-page .filter-bar {
        grid-template-columns: 1fr;
    }

    .agenda-page .activity-item {
        grid-template-columns: 58px 1fr;
        align-items: start;
    }

    .agenda-page .activity-date {
        width: 56px;
        height: 56px;
        border-radius: 15px;
    }

    .agenda-page .activity-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 575.98px) {
    .agenda-page {
        padding: 20px 11px;
    }

    .agenda-page .agenda-card {
        padding: 20px 15px;
    }
}

/* =========================================================
   CLIENTES
   ========================================================= */

.clients-page {
    padding: 32px 0 60px;
}

.clients-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.clients-back {
    color: #6537ff;
    font-weight: 750;
    text-decoration: none;
}

.clients-title {
    color: #071442;
    font-size: clamp(2.1rem, 5vw, 3rem);
    font-weight: 850;
    letter-spacing: -1.7px;
    margin: 9px 0 3px;
}

.clients-subtitle {
    color: #818ba9;
    font-size: 1.05rem;
    margin: 0;
}

.btn-new-client {
    min-height: 54px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 15px;
    background: linear-gradient(100deg, #6334ff, #f54279);
    box-shadow: 0 15px 28px rgba(105, 55, 255, .22);
    transition: .2s ease;
}

.btn-new-client:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(105, 55, 255, .28);
}

.clients-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    margin-bottom: 22px;
}

.search-card,
.limit-card,
.clients-card {
    background: #fff;
    border: 1px solid #e5e9f5;
    box-shadow: 0 14px 35px rgba(35, 43, 92, .06);
}

.search-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px auto;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
}

.search-control {
    position: relative;
}

.search-control i {
    position: absolute;
    left: 16px;
    top: 50%;
    color: #929bb8;
    transform: translateY(-50%);
}

.client-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    color: #17234d;
    background: #fff;
    border: 1px solid #dce1f0;
    border-radius: 12px;
    outline: none;
    transition: .2s ease;
}

.search-control .client-input {
    padding-left: 43px;
}

.client-input:focus {
    border-color: #6537ff;
    box-shadow: 0 0 0 4px rgba(101, 55, 255, .10);
}

.btn-search {
    min-width: 48px;
    min-height: 48px;
    padding: 0 18px;
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-weight: 750;
    background: #6537ff;
}

.limit-card {
    padding: 17px 19px;
    border-radius: 18px;
}

.limit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.limit-title {
    color: #17234d;
    font-size: .84rem;
    font-weight: 800;
}

.limit-value {
    color: #6537ff;
    font-size: .84rem;
    font-weight: 850;
}

.limit-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #eceefa;
}

.limit-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6334ff, #f54279);
}

.limit-help {
    display: block;
    color: #8a93ae;
    font-size: .72rem;
    margin-top: 9px;
}

.clients-card {
    overflow: hidden;
    border-radius: 22px;
}

.clients-card-header {
    min-height: 72px;
    padding: 17px 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #edf0f8;
}

.clients-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clients-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(135deg, #6334ff, #f54279);
}

.clients-card-title {
    color: #071442;
    font-size: 1.02rem;
    font-weight: 850;
    margin: 0;
}

.clients-count {
    padding: 7px 12px;
    color: #6537ff;
    background: #eee9ff;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 850;
}

.clients-table {
    width: 100%;
    border-collapse: collapse;
}

.clients-table th {
    padding: 14px 18px;
    color: #7e88a7;
    background: #f8f8fc;
    border-bottom: 1px solid #e8ebf5;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.clients-table td {
    padding: 17px 18px;
    color: #263252;
    border-bottom: 1px solid #edf0f7;
    font-size: .86rem;
    vertical-align: middle;
}

.clients-table tbody tr:last-child td {
    border-bottom: 0;
}

.client-main {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 240px;
}

.client-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 15px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #6334ff, #f54279);
}

.client-name {
    display: block;
    color: #071442;
    font-weight: 850;
    margin-bottom: 3px;
}

.client-rfc,
.client-secondary {
    display: block;
    color: #8790ab;
    font-size: .76rem;
}

.client-contact {
    color: #17234d;
    font-weight: 700;
}

.whatsapp-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #138b55;
    font-weight: 750;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 850;
}

.status-active {
    color: #087443;
    background: #daf7e9;
}

.status-inactive {
    color: #b4233c;
    background: #ffe5ea;
}

.client-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    white-space: nowrap;
}

.client-action {
    width: 39px;
    height: 39px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #6537ff;
    background: #f0ecff;
    border: 0;
    border-radius: 11px;
    text-decoration: none;
    transition: .2s ease;
}

.client-action:hover {
    color: #fff;
    background: #6537ff;
}

.action-whatsapp {
    color: #128c55;
    background: #e5f8ef;
}

.action-whatsapp:hover {
    color: #fff;
    background: #16a366;
}

.action-delete {
    color: #e62f50;
    background: #ffe9ed;
}

.action-delete:hover {
    color: #fff;
    background: #e62f50;
}

.action-restore {
    color: #087443;
    background: #e2f8ed;
}

.message-box {
    display: block;
    padding: 13px 16px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-size: .87rem;
    font-weight: 700;
}

.message-success {
    color: #087443;
    background: #e9fbf2;
    border: 1px solid #9ce5c1;
}

.message-error {
    color: #b4233c;
    background: #fff0f3;
    border: 1px solid #ffc4ce;
}

.empty-clients {
    padding: 65px 22px;
    text-align: center;
}

.empty-icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    color: #6537ff;
    background: #eee9ff;
    border-radius: 25px;
    font-size: 2rem;
}

.empty-title {
    color: #071442;
    font-size: 1.25rem;
    font-weight: 850;
    margin-bottom: 7px;
}

.empty-text {
    max-width: 430px;
    margin: 0 auto 20px;
    color: #8790ab;
}

.client-results-hidden {
    display: none;
}

@media (max-width: 991px) {
    .clients-summary {
        grid-template-columns: 1fr;
    }

    .clients-table-wrap {
        overflow-x: auto;
    }

    .clients-table {
        min-width: 940px;
    }
}

@media (max-width: 767px) {
    .clients-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .btn-new-client {
        width: 100%;
    }

    .search-card {
        grid-template-columns: 1fr;
    }

    .btn-search {
        width: 100%;
    }
}

@media screen and (max-width: 767.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .quote-page,
    .quote-container,
    .quote-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    div.concept-row.concept-header {
        display: none !important;
    }

    article.concept-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 16px 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    article.concept-row > div {
        display: block;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    article.concept-row > .delete-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        align-self: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 6px !important;
        padding-right: 2px !important;
        overflow: visible !important;
    }

    article.concept-row .edit-button,
    article.concept-row .delete-button {
        position: static !important;
        display: inline-flex !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        transform: none !important;
    }
}


/* =========================================================
   NUEVO CLIENTE
   ========================================================= */

.client-form-page {
    padding: 32px 0 60px;
}

.client-form-page .client-form-container {
    max-width: 1080px;
    margin: 0 auto;
}

.client-form-page .client-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 27px;
}

.client-form-page .client-back {
    color: #6537ff;
    font-weight: 750;
    text-decoration: none;
}

.client-form-page .client-form-title {
    color: #071442;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 850;
    letter-spacing: -1.6px;
    margin: 9px 0 3px;
}

.client-form-page .client-form-subtitle {
    color: #818ba9;
    font-size: 1.03rem;
    margin: 0;
}

.client-form-page .client-header-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 21px;
    font-size: 1.65rem;
    background: linear-gradient(135deg, #6334ff, #f54279);
    box-shadow: 0 14px 30px rgba(100, 53, 255, .22);
}

.client-form-page .client-form-card {
    padding: 25px;
    margin-bottom: 23px;
    background: #fff;
    border: 1px solid #e5e9f5;
    border-radius: 22px;
    box-shadow: 0 14px 35px rgba(35, 43, 92, .06);
}

.client-form-page .section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 23px;
}

.client-form-page .section-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(135deg, #6334ff, #f54279);
}

.client-form-page .section-title {
    color: #071442;
    font-size: 1.02rem;
    font-weight: 850;
    margin: 0;
}

.client-form-page .section-text {
    color: #8992ac;
    font-size: .82rem;
    margin: 2px 0 0;
}

.client-form-page .field-label {
    display: block;
    color: #17234d;
    font-size: .82rem;
    font-weight: 800;
    margin-bottom: 7px;
}

.client-form-page .field-control {
    width: 100%;
    min-height: 49px;
    padding: 10px 14px;
    color: #17234d;
    background: #fff;
    border: 1px solid #dce1f0;
    border-radius: 12px;
    outline: none;
    transition: .2s ease;
}

.client-form-page textarea.field-control {
    min-height: 105px;
    resize: vertical;
}

.client-form-page .field-control:focus {
    border-color: #6537ff;
    box-shadow: 0 0 0 4px rgba(101, 55, 255, .10);
}

.client-form-page .field-help {
    display: block;
    color: #9099b3;
    font-size: .73rem;
    margin-top: 6px;
}

.client-form-page .validation-message {
    display: block;
    color: #dc3545;
    font-size: .76rem;
    margin-top: 5px;
}

.client-form-page .whatsapp-box {
    height: 100%;
    padding: 18px;
    color: #176a48;
    background: #ecfbf4;
    border: 1px solid #b7ebd2;
    border-radius: 15px;
}

.client-form-page .whatsapp-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #087443;
    font-weight: 850;
    margin-bottom: 9px;
}

.client-form-page .whatsapp-box p {
    color: #56816e;
    font-size: .78rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.client-form-page .whatsapp-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #176a48;
    font-size: .8rem;
    font-weight: 750;
}

.client-form-page .whatsapp-check input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    accent-color: #17a768;
}

.client-form-page .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.client-form-page .btn-cancel {
    min-height: 49px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6537ff;
    background: #fff;
    border: 1px solid #6537ff;
    border-radius: 13px;
    font-weight: 800;
    text-decoration: none;
}

.client-form-page .btn-save {
    min-height: 49px;
    padding: 0 25px;
    color: #fff;
    border: 0;
    border-radius: 13px;
    font-weight: 800;
    background: linear-gradient(100deg, #6334ff, #f54279);
    box-shadow: 0 13px 25px rgba(105, 55, 255, .20);
}

.client-form-page .message-box {
    display: block;
    padding: 13px 16px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-size: .87rem;
    font-weight: 700;
}

.client-form-page .message-success {
    color: #087443;
    background: #e9fbf2;
    border: 1px solid #9ce5c1;
}

.client-form-page .message-error {
    color: #b4233c;
    background: #fff0f3;
    border: 1px solid #ffc4ce;
}

@media (max-width: 575px) {
    .client-form-page .client-form-header {
        align-items: flex-start;
    }

    .client-form-page .client-header-icon {
        width: 54px;
        height: 54px;
        border-radius: 17px;
        font-size: 1.3rem;
    }

    .client-form-page .client-form-card {
        padding: 19px;
        border-radius: 18px;
    }

    .client-form-page .form-actions {
        flex-direction: column-reverse;
    }

    .client-form-page .btn-cancel,
    .client-form-page .btn-save {
        width: 100%;
    }
}

/* =========================================================
   CONFIGURACIÓN
   ========================================================= */

.settings-page {
    padding: 32px 0 60px;
}

.settings-page .settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.settings-page .settings-back {
    color: #6435ff;
    font-weight: 700;
    text-decoration: none;
}

.settings-page .settings-title {
    color: #071442;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    margin: 10px 0 4px;
}

.settings-page .settings-subtitle {
    color: #818ba9;
    font-size: 1.05rem;
    margin: 0;
}

.settings-page .settings-avatar {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 14px 30px rgba(100, 53, 255, .25);
    background: linear-gradient(135deg, #6334ff, #f54279);
    overflow: hidden;
}

.settings-page .settings-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.settings-page .settings-profile-upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
}

.settings-page .settings-file {
    padding: 7px 10px;
}

.settings-page .settings-file-help {
    display: block;
    margin-top: 7px;
    color: #818ba9;
    font-size: .76rem;
}

.settings-page .settings-profile-actions {
    display: flex;
    gap: 10px;
}

.settings-page .settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
    gap: 24px;
    align-items: start;
}

.settings-page .settings-column {
    display: grid;
    gap: 24px;
}

.settings-page .settings-card {
    background: #fff;
    border: 1px solid #e8ebf7;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(35, 43, 92, .06);
}

.settings-page .settings-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.settings-page .settings-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #6334ff, #f54279);
}

.settings-page .settings-card-title {
    color: #071442;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.settings-page .settings-card-text {
    color: #818ba9;
    font-size: .87rem;
    margin: 2px 0 0;
}

.settings-page .form-label-custom {
    display: block;
    color: #17234d;
    font-size: .82rem;
    font-weight: 750;
    margin-bottom: 7px;
}

.settings-page .form-control-custom {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    color: #17234d;
    background: #fff;
    border: 1px solid #dce1f0;
    border-radius: 12px;
    outline: none;
    transition: .2s ease;
}

.settings-page .form-control-custom:focus {
    border-color: #6b39ff;
    box-shadow: 0 0 0 4px rgba(107, 57, 255, .10);
}

.settings-page .form-control-custom:disabled,
.settings-page .form-control-custom[readonly] {
    color: #7e88a7;
    background: #f5f6fb;
}

.settings-page .validation-message {
    display: block;
    color: #dc3545;
    font-size: .78rem;
    margin-top: 5px;
}

.settings-page .btn-gradient {
    min-height: 48px;
    padding: 0 22px;
    color: #fff;
    border: 0;
    border-radius: 13px;
    font-weight: 750;
    background: linear-gradient(100deg, #6334ff, #f54279);
    box-shadow: 0 12px 24px rgba(109, 54, 255, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}

.settings-page .btn-gradient:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(109, 54, 255, .25);
}

.settings-page .btn-outline-purple {
    min-height: 46px;
    padding: 0 20px;
    color: #6435ff;
    background: #fff;
    border: 1px solid #6435ff;
    border-radius: 13px;
    font-weight: 750;
}

.settings-page .plan-card {
    overflow: hidden;
    padding: 0;
}

.settings-page .plan-banner {
    position: relative;
    padding: 28px 24px;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(120deg, #6031ff, #a930eb 55%, #f54279);
}

.settings-page .plan-banner::after {
    content: "";
    position: absolute;
    width: 135px;
    height: 135px;
    right: -45px;
    top: -55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
}

.settings-page .plan-label {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: .85;
}

.settings-page .plan-name {
    display: block;
    font-size: 2rem;
    font-weight: 850;
    line-height: 1;
    margin-top: 9px;
}

.settings-page .plan-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 6px 11px;
    font-size: .75rem;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
}

.settings-page .plan-content {
    padding: 22px 24px 24px;
}

.settings-page .plan-date {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #edf0f8;
    color: #7f89a7;
    font-size: .83rem;
}

.settings-page .plan-date strong {
    color: #17234d;
}

.settings-page .usage-item {
    margin-bottom: 18px;
}

.settings-page .usage-item:last-child {
    margin-bottom: 0;
}

.settings-page .usage-info {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #17234d;
    font-size: .82rem;
    font-weight: 750;
    margin-bottom: 7px;
}

.settings-page .usage-info span:last-child {
    color: #7d87a5;
    font-weight: 650;
}

.settings-page .usage-track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #edeffa;
}

.settings-page .usage-bar {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #6334ff, #f54279);
}

.settings-page .message-box {
    display: block;
    padding: 13px 16px;
    margin-bottom: 22px;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 650;
}

.settings-page .message-success {
    color: #087443;
    background: #e9fbf2;
    border: 1px solid #9ce5c1;
}

.settings-page .message-error {
    color: #b4233c;
    background: #fff0f3;
    border: 1px solid #ffc4ce;
}

.settings-page .security-note {
    display: flex;
    gap: 10px;
    padding: 13px;
    margin-bottom: 18px;
    color: #68588d;
    font-size: .82rem;
    line-height: 1.5;
    border-radius: 12px;
    background: #f7f3ff;
}

@media (max-width: 991px) {
    .settings-page .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-page .settings-side {
        order: -1;
    }
}

@media (max-width: 575px) {
    .settings-page {
        padding-top: 20px;
    }

    .settings-page .settings-header {
        align-items: flex-start;
    }

    .settings-page .settings-avatar {
        width: 54px;
        height: 54px;
        border-radius: 17px;
        font-size: 1.35rem;
    }

    .settings-page .settings-card {
        padding: 19px;
        border-radius: 18px;
    }

    .settings-page .plan-card {
        padding: 0;
    }

    .settings-page .btn-gradient,
    .settings-page .btn-outline-purple {
        width: 100%;
    }

    .settings-page .settings-profile-upload {
        grid-template-columns: 1fr;
    }

    .settings-page .settings-profile-actions {
        flex-direction: column;
    }
}

.settings-page .settings-tag-value {
    display: flex;
    align-items: center;
    color: #4f2bd7;
    background: #f5f2ff;
    border-color: #dcd4ff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.settings-page .settings-tag-help {
    display: block;
    margin-top: 6px;
    color: #818ba9;
    font-size: .75rem;
}

/* =========================================================
   ARCHIVOS GENERALES
   ========================================================= */

.files-library-page {
            padding: 32px 0 55px;
        }

.files-library-page .files-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 28px;
        }

.files-library-page .files-back {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 12px;
            color: #6535ff;
            font-weight: 700;
            text-decoration: none;
        }

.files-library-page .files-title {
            margin: 0;
            color: var(--cerebr-dark);
            font-size: clamp(2rem, 5vw, 3.15rem);
            font-weight: 900;
            letter-spacing: -.045em;
        }

.files-library-page .files-subtitle {
            margin: 5px 0 0;
            color: var(--cerebr-muted);
            font-size: 1.05rem;
        }

.files-library-page .storage-card {
            min-width: 225px;
            padding: 18px 20px;
            color: #fff;
            border-radius: 18px;
            background: var(--cerebr-gradient);
            box-shadow: 0 15px 32px rgba(101, 53, 255, .20);
        }

.files-library-page .storage-label {
            display: block;
            margin-bottom: 4px;
            font-size: .75rem;
            font-weight: 800;
            text-transform: uppercase;
            opacity: .85;
        }

.files-library-page .storage-value {
            display: block;
            font-size: 1.15rem;
            font-weight: 900;
        }

.files-library-page .storage-progress {
            height: 6px;
            margin-top: 10px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255, 255, 255, .25);
        }

.files-library-page .storage-progress span {
                display: block;
                width: 0;
                height: 100%;
                border-radius: inherit;
                background: #fff;
                transition: width .3s ease;
            }

.files-library-page .files-card {
            padding: 22px;
            margin-bottom: 24px;
        }

.files-library-page .section-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 20px;
        }

.files-library-page .section-title {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0;
            color: var(--cerebr-dark);
            font-size: 1rem;
            font-weight: 900;
        }

.files-library-page .section-icon {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            color: #fff;
            border-radius: 12px;
            background: var(--cerebr-gradient);
        }

.files-library-page .files-count {
            padding: 7px 12px;
            color: #6535ff;
            font-size: .78rem;
            font-weight: 800;
            border-radius: 999px;
            background: #f0eaff;
        }

.files-library-page .filters-grid {
            display: grid;
            grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(155px, 1fr)) auto;
            gap: 12px;
            align-items: end;
        }

.files-library-page .filter-label {
            display: block;
            margin-bottom: 6px;
            color: var(--cerebr-dark);
            font-size: .76rem;
            font-weight: 800;
        }

.files-library-page .file-control {
            min-height: 49px;
            border: 1px solid #dfe2ee;
            border-radius: 13px;
        }

.files-library-page .filter-actions {
            display: flex;
            gap: 8px;
        }

.files-library-page .btn-filter,
.files-library-page .btn-clear {
            min-height: 49px;
            padding: 0 20px;
            border-radius: 13px;
            font-weight: 800;
        }

.files-library-page .btn-filter {
            color: #fff;
            border: 0;
            background: var(--cerebr-gradient);
        }

.files-library-page .btn-clear {
            display: inline-grid;
            place-items: center;
            color: #6535ff;
            border: 1px solid #6535ff;
            background: #fff;
            text-decoration: none;
        }

.files-library-page .files-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

.files-library-page .file-card {
            display: flex;
            min-width: 0;
            overflow: hidden;
            border: 1px solid #e4e7f2;
            border-radius: 19px;
            background: #fff;
            box-shadow: 0 12px 30px rgba(20, 31, 77, .06);
        }

.files-library-page .file-preview {
            position: relative;
            flex: 0 0 155px;
            min-height: 175px;
            overflow: hidden;
            background: #f2f1fa;
        }

.files-library-page .file-preview img {
                width: 100%;
                height: 100%;
                min-height: 175px;
                object-fit: cover;
            }

.files-library-page .file-document {
            display: grid;
            place-items: center;
            width: 100%;
            height: 100%;
            min-height: 175px;
            color: #6535ff;
            font-size: 3.2rem;
            background: radial-gradient( circle at top left, rgba(101, 53, 255, .13), transparent 55% ), #f4f2fb;
        }

.files-library-page .file-extension {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 5px 8px;
            color: #fff;
            font-size: .65rem;
            font-weight: 900;
            text-transform: uppercase;
            border-radius: 8px;
            background: rgba(15, 27, 73, .78);
        }

.files-library-page .file-main-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 5px 8px;
            color: #087447;
            font-size: .63rem;
            font-weight: 900;
            border-radius: 8px;
            background: #dff8ec;
        }

.files-library-page .file-body {
            display: flex;
            flex: 1;
            min-width: 0;
            flex-direction: column;
            padding: 17px;
        }

.files-library-page .file-name {
            display: block;
            overflow: hidden;
            margin-bottom: 5px;
            color: var(--cerebr-dark);
            font-weight: 900;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.files-library-page .file-description {
            min-height: 38px;
            margin-bottom: 12px;
            overflow: hidden;
            color: var(--cerebr-muted);
            font-size: .82rem;
            line-height: 1.4;
        }

.files-library-page .file-reference {
            display: grid;
            gap: 5px;
            margin-bottom: 12px;
            font-size: .76rem;
        }

.files-library-page .file-reference a,
.files-library-page .file-reference span {
                overflow: hidden;
                color: #6535ff;
                font-weight: 700;
                text-decoration: none;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

.files-library-page .file-meta {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding-top: 12px;
            margin-top: auto;
            color: var(--cerebr-muted);
            font-size: .7rem;
            border-top: 1px solid #edf0f7;
        }

.files-library-page .file-actions {
            display: flex;
            gap: 8px;
            margin-top: 14px;
        }

.files-library-page .file-action {
            display: inline-grid;
            place-items: center;
            width: 36px;
            height: 36px;
            color: #6535ff;
            border: 0;
            border-radius: 11px;
            background: #f0eaff;
            text-decoration: none;
        }

.files-library-page .file-action.download {
                color: #087447;
                background: #e3f9ef;
            }

.files-library-page .file-action.delete {
                color: #d72649;
                background: #ffe8ed;
            }

.files-library-page .empty-files {
            padding: 65px 20px;
            color: var(--cerebr-muted);
            text-align: center;
        }

.files-library-page .empty-files i {
                display: block;
                margin-bottom: 15px;
                color: #6535ff;
                font-size: 3.5rem;
            }

.files-library-page .empty-files h3 {
                color: var(--cerebr-dark);
                font-weight: 900;
            }

        @media (max-width: 1199.98px) {
.files-library-page .filters-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

.files-library-page .filter-actions {
                grid-column: 1 / -1;
            }

.files-library-page .files-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
.files-library-page {
                padding-top: 22px;
            }

.files-library-page .files-header {
                align-items: stretch;
                flex-direction: column;
            }

.files-library-page .storage-card {
                min-width: 0;
            }

.files-library-page .filters-grid {
                grid-template-columns: 1fr;
            }

.files-library-page .filter-actions {
                grid-column: auto;
            }

.files-library-page .btn-filter {
                flex: 1;
            }

.files-library-page .files-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 479.98px) {
.files-library-page .files-card {
                padding: 17px;
            }

.files-library-page .file-card {
                flex-direction: column;
            }

.files-library-page .file-preview {
                flex-basis: auto;
                min-height: 190px;
            }

.files-library-page .file-preview img,
.files-library-page .file-document {
                    min-height: 190px;
                }
        }

.files-library-page .files-results-hidden {
    display: none;
}

/* =========================================================
   CATÁLOGO DE IMÁGENES
   ========================================================= */

.catalog-page {
            padding: 32px 0 60px;
        }

.catalog-page .catalog-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 22px;
            margin-bottom: 25px;
        }

.catalog-page .catalog-back {
            color: #6537ff;
            font-weight: 750;
            text-decoration: none;
        }

.catalog-page .catalog-title {
            color: #071442;
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 850;
            letter-spacing: -1.6px;
            margin: 8px 0 3px;
        }

.catalog-page .catalog-subtitle {
            color: #818ba9;
            font-size: 1.03rem;
            margin: 0;
        }

.catalog-page .catalog-plan {
            min-width: 220px;
            padding: 15px 18px;
            color: #fff;
            border-radius: 17px;
            background: linear-gradient(110deg, #6334ff, #f54279);
            box-shadow: 0 14px 27px rgba(100, 53, 255, .20);
        }

.catalog-page .catalog-plan span {
                display: block;
                font-size: .72rem;
                font-weight: 750;
                opacity: .85;
            }

.catalog-page .catalog-plan strong {
                display: block;
                font-size: 1.05rem;
                margin-top: 4px;
            }

.catalog-page .catalog-card {
            padding: 24px;
            margin-bottom: 23px;
            background: #fff;
            border: 1px solid #e5e9f5;
            border-radius: 22px;
            box-shadow: 0 14px 35px rgba(35, 43, 92, .06);
        }

.catalog-page .catalog-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 22px;
        }

.catalog-page .catalog-heading {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.catalog-page .catalog-icon {
            width: 39px;
            height: 39px;
            display: grid;
            place-items: center;
            flex: 0 0 39px;
            color: #fff;
            border-radius: 12px;
            background: linear-gradient(135deg, #6334ff, #f54279);
        }

.catalog-page .catalog-heading h2 {
            color: #071442;
            font-size: 1.03rem;
            font-weight: 850;
            margin: 0;
        }

.catalog-page .catalog-heading p {
            color: #8992ac;
            font-size: .8rem;
            margin: 2px 0 0;
        }

.catalog-page .catalog-field-label {
            display: block;
            color: #17234d;
            font-size: .8rem;
            font-weight: 800;
            margin-bottom: 7px;
        }

.catalog-page .catalog-control {
            width: 100%;
            min-height: 48px;
            padding: 10px 14px;
            color: #17234d;
            background: #fff;
            border: 1px solid #dce1f0;
            border-radius: 12px;
            outline: none;
            transition: .2s ease;
        }

.catalog-page textarea.catalog-control {
            min-height: 92px;
            resize: vertical;
        }

.catalog-page .catalog-control:focus {
            border-color: #6537ff;
            box-shadow: 0 0 0 4px rgba(101, 55, 255, .10);
        }

.catalog-page .catalog-upload-zone {
            height: 100%;
            min-height: 150px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border: 1.5px dashed #c9bcff;
            border-radius: 16px;
            background: #faf9ff;
        }

.catalog-page .catalog-upload-zone i {
                display: block;
                color: #6537ff;
                font-size: 2rem;
                margin-bottom: 7px;
            }

.catalog-page .catalog-upload-zone strong {
                display: block;
                color: #071442;
                margin-bottom: 4px;
            }

.catalog-page .catalog-upload-zone span {
                display: block;
                color: #8b94ae;
                font-size: .76rem;
                margin-bottom: 14px;
            }

.catalog-page .catalog-share-check {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            padding: 13px 15px;
            color: #176a48;
            background: #ecfbf4;
            border: 1px solid #b7ebd2;
            border-radius: 12px;
            font-size: .8rem;
            font-weight: 700;
        }

.catalog-page .catalog-share-check input {
                width: 18px;
                height: 18px;
                accent-color: #17a768;
            }

.catalog-page .btn-catalog-primary {
            min-height: 48px;
            padding: 0 23px;
            color: #fff;
            border: 0;
            border-radius: 13px;
            font-weight: 800;
            background: linear-gradient(100deg, #6334ff, #f54279);
            box-shadow: 0 13px 25px rgba(105, 55, 255, .20);
        }

.catalog-page .catalog-filter {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 260px;
            gap: 12px;
        }

.catalog-page .catalog-filter-empty {
            display: none;
            padding: 45px 20px;
            color: #8790ab;
            text-align: center;
        }

.catalog-page .catalog-filter-empty i {
                display: block;
                margin-bottom: 10px;
                color: #6537ff;
                font-size: 2.2rem;
            }

.catalog-page .catalog-filter-empty strong {
                display: block;
                color: #071442;
                margin-bottom: 5px;
            }

.catalog-page .catalog-count {
            padding: 7px 12px;
            color: #6537ff;
            background: #eee9ff;
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 850;
        }

.catalog-page .catalog-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

.catalog-page .image-card {
            overflow: hidden;
            border: 1px solid #e5e9f5;
            border-radius: 18px;
            background: #fff;
            transition: .2s ease;
        }

.catalog-page .image-card:hover {
                transform: translateY(-3px);
                box-shadow: 0 16px 30px rgba(35, 43, 92, .10);
            }

.catalog-page .image-preview {
            position: relative;
            height: 210px;
            overflow: hidden;
            background: #f0f1f8;
        }

.catalog-page .image-preview img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
            }

.catalog-page .image-category {
            position: absolute;
            left: 12px;
            top: 12px;
            padding: 6px 10px;
            color: #fff;
            background: rgba(7, 20, 66, .72);
            backdrop-filter: blur(8px);
            border-radius: 999px;
            font-size: .68rem;
            font-weight: 800;
        }

.catalog-page .image-share-status {
            position: absolute;
            right: 12px;
            top: 12px;
            width: 31px;
            height: 31px;
            display: grid;
            place-items: center;
            color: #087443;
            background: #dff8eb;
            border-radius: 10px;
        }

.catalog-page .image-body {
            padding: 16px;
        }

.catalog-page .image-title {
            display: block;
            color: #071442;
            font-size: .96rem;
            font-weight: 850;
            margin-bottom: 5px;
        }

.catalog-page .image-client {
            display: block;
            color: #6537ff;
            font-size: .76rem;
            font-weight: 750;
            margin-bottom: 8px;
        }

.catalog-page .image-description {
            height: 38px;
            overflow: hidden;
            color: #8790ab;
            font-size: .75rem;
            line-height: 1.45;
            margin-bottom: 12px;
        }

.catalog-page .image-meta {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding-top: 11px;
            color: #8a93ad;
            border-top: 1px solid #edf0f7;
            font-size: .7rem;
        }

.catalog-page .image-actions {
            display: flex;
            gap: 7px;
            padding: 0 16px 16px;
        }

.catalog-page .image-action {
            width: 39px;
            height: 39px;
            display: inline-grid;
            place-items: center;
            padding: 0;
            color: #6537ff;
            background: #f0ecff;
            border: 0;
            border-radius: 11px;
            text-decoration: none;
        }

.catalog-page .image-action.whatsapp {
                color: #128c55;
                background: #e5f8ef;
            }

.catalog-page .image-action.delete {
                color: #e62f50;
                background: #ffe9ed;
            }

.catalog-page .empty-catalog {
            padding: 65px 20px;
            text-align: center;
        }

.catalog-page .empty-catalog i {
                display: block;
                color: #6537ff;
                font-size: 3rem;
                margin-bottom: 13px;
            }

.catalog-page .empty-catalog strong {
                display: block;
                color: #071442;
                font-size: 1.15rem;
                margin-bottom: 6px;
            }

.catalog-page .empty-catalog span {
                color: #8790ab;
            }

.catalog-page .message-box {
            display: block;
            padding: 13px 16px;
            margin-bottom: 20px;
            border-radius: 12px;
            font-size: .87rem;
            font-weight: 700;
        }

.catalog-page .message-success {
            color: #087443;
            background: #e9fbf2;
            border: 1px solid #9ce5c1;
        }

.catalog-page .message-error {
            color: #b4233c;
            background: #fff0f3;
            border: 1px solid #ffc4ce;
        }

.catalog-page .validation-message {
            display: block;
            color: #dc3545;
            font-size: .75rem;
            margin-top: 5px;
        }

        @media (max-width: 991px) {
.catalog-page .catalog-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

.catalog-page .catalog-filter {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 650px) {
.catalog-page .catalog-header {
                align-items: flex-start;
                flex-direction: column;
            }

.catalog-page .catalog-plan {
                width: 100%;
            }

.catalog-page .catalog-grid,
.catalog-page .catalog-filter {
                grid-template-columns: 1fr;
            }

.catalog-page .btn-catalog-primary {
                width: 100%;
            }
        }

/* =========================================================
   CATÁLOGO DE CONCEPTOS
   ========================================================= */

.concepts-page {
            padding: 32px 0 60px;
        }

.concepts-page .concepts-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 26px;
        }

.concepts-page .concepts-back {
            color: #6537ff;
            font-weight: 750;
            text-decoration: none;
        }

.concepts-page .concepts-title {
            color: #071442;
            font-size: clamp(2.1rem, 5vw, 3rem);
            font-weight: 850;
            letter-spacing: -1.7px;
            margin: 9px 0 3px;
        }

.concepts-page .concepts-subtitle {
            color: #818ba9;
            font-size: 1.05rem;
            margin: 0;
        }

.concepts-page .concept-message {
            display: block;
            margin-bottom: 20px;
            padding: 14px 17px;
            border-radius: 13px;
            font-weight: 700;
        }

.concepts-page .concept-message-success {
            color: #087447;
            background: #e8fff4;
            border: 1px solid #a8ebcc;
        }

.concepts-page .concept-message-error {
            color: #a51d35;
            background: #fff0f3;
            border: 1px solid #ffc7d1;
        }

.concepts-page .catalog-layout {
            display: grid;
            grid-template-columns: minmax(280px, .75fr) minmax(420px, 1.25fr);
            gap: 22px;
            align-items: start;
        }

.concepts-page .catalog-card {
            overflow: hidden;
            padding: 25px;
            background: #fff;
            border: 1px solid #e5e8f4;
            border-radius: 23px;
            box-shadow: 0 16px 38px rgba(42, 49, 99, .08);
        }

.concepts-page .catalog-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 17px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e9ebf5;
        }

.concepts-page .catalog-icon {
            display: grid;
            place-items: center;
            flex: 0 0 42px;
            width: 42px;
            height: 42px;
            color: #fff;
            font-size: 1.05rem;
            border-radius: 13px;
            background: linear-gradient( 135deg, #6535ff, #f54279 );
        }

.concepts-page .catalog-heading {
            min-width: 0;
        }

.concepts-page .catalog-card-title {
            color: #071442;
            font-size: 1rem;
            font-weight: 850;
            margin: 0;
        }

.concepts-page .catalog-card-subtitle {
            color: #8791ae;
            font-size: .82rem;
            margin: 2px 0 0;
        }

.concepts-page .catalog-field {
            margin-bottom: 15px;
        }

.concepts-page .catalog-label {
            display: block;
            margin-bottom: 6px;
            color: #17234f;
            font-size: .8rem;
            font-weight: 800;
        }

.concepts-page .catalog-control {
            width: 100%;
            min-height: 48px;
            padding: 11px 13px;
            color: #17234f;
            background: #fff;
            border: 1px solid #dfe3f1;
            border-radius: 12px;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
        }

.concepts-page .catalog-control:focus {
                border-color: #7146ff;
                box-shadow: 0 0 0 4px rgba(101, 53, 255, .10);
            }

.concepts-page textarea.catalog-control {
            min-height: 92px;
            resize: vertical;
        }

.concepts-page .catalog-validation {
            display: block;
            margin-top: 5px;
            color: #c22a48;
            font-size: .76rem;
            font-weight: 700;
        }

.concepts-page .catalog-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 19px;
        }

.concepts-page .btn-catalog-primary,
.concepts-page .btn-catalog-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            padding: 10px 18px;
            font-weight: 800;
            border-radius: 12px;
            cursor: pointer;
        }

.concepts-page .btn-catalog-primary {
            color: #fff;
            border: 0;
            background: linear-gradient( 135deg, #6535ff, #f54279 );
            box-shadow: 0 10px 24px rgba(101, 53, 255, .18);
        }

.concepts-page .btn-catalog-secondary {
            color: #6535ff;
            background: #fff;
            border: 1px solid #754cff;
        }

.concepts-page .concept-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 14px;
        }

.concepts-page .field-full {
            grid-column: 1 / -1;
        }

.concepts-page .families-list {
            display: grid;
            gap: 10px;
            margin-top: 23px;
        }

.concepts-page .family-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 13px;
            background: #f8f8ff;
            border: 1px solid #ebeafd;
            border-radius: 13px;
        }

.concepts-page .family-info {
            min-width: 0;
        }

.concepts-page .family-name {
            display: block;
            overflow: hidden;
            color: #111d49;
            font-size: .88rem;
            font-weight: 850;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.concepts-page .family-description {
            display: block;
            overflow: hidden;
            margin-top: 2px;
            color: #8791ae;
            font-size: .75rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.concepts-page .catalog-mini-actions {
            display: flex;
            gap: 7px;
        }

.concepts-page .catalog-mini-button {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            padding: 0;
            color: #6535ff;
            background: #eee9ff;
            border: 0;
            border-radius: 10px;
        }

.concepts-page .catalog-mini-button.delete {
                color: #e62d53;
                background: #ffe8ee;
            }

.concepts-page .catalog-empty {
            padding: 30px 15px;
            color: #8791ae;
            text-align: center;
        }

.concepts-page .catalog-empty i {
                display: block;
                margin-bottom: 8px;
                color: #7650ff;
                font-size: 2rem;
            }

.concepts-page .concept-list-card {
            margin-top: 22px;
        }

.concepts-page .concept-filter {
            display: grid;
            grid-template-columns:
                minmax(220px, 1fr)
                minmax(190px, .55fr)
                minmax(150px, .4fr)
                auto;
            gap: 11px;
            margin-bottom: 22px;
        }

.concepts-page .filter-clear {
            display: inline-grid;
            place-items: center;
            width: 48px;
            min-height: 48px;
            padding: 0;
            color: #6535ff;
            background: #fff;
            border: 1px solid #6535ff;
            border-radius: 12px;
            cursor: pointer;
            transition:
                color .2s ease,
                background .2s ease;
        }

.concepts-page .filter-clear:hover {
                color: #fff;
                background: #6535ff;
            }

.concepts-page .btn-filter {
            min-height: 48px;
            padding: 10px 20px;
            color: #fff;
            font-weight: 800;
            border: 0;
            border-radius: 12px;
            background: linear-gradient( 135deg, #6535ff, #f54279 );
        }

.concepts-page .concept-list-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding-bottom: 17px;
            margin-bottom: 7px;
            border-bottom: 1px solid #e9ebf5;
        }

.concepts-page .concept-count {
            padding: 7px 11px;
            color: #6535ff;
            font-size: .75rem;
            font-weight: 850;
            background: #eee9ff;
            border-radius: 999px;
        }

.concepts-page .concept-table-wrap {
            overflow-x: auto;
        }

.concepts-page .concept-table {
            width: 100%;
            min-width: 850px;
            border-collapse: collapse;
        }

.concepts-page .concept-table th {
                padding: 13px 11px;
                color: #818ba9;
                font-size: .71rem;
                font-weight: 850;
                text-align: left;
                text-transform: uppercase;
                background: #f8f8fd;
            }

.concepts-page .concept-table td {
                padding: 15px 11px;
                color: #263257;
                font-size: .84rem;
                vertical-align: middle;
                border-bottom: 1px solid #eceef6;
            }

.concepts-page .concept-name {
            display: block;
            color: #101c48;
            font-weight: 850;
        }

.concepts-page .concept-description {
            display: block;
            max-width: 310px;
            overflow: hidden;
            margin-top: 3px;
            color: #8791ae;
            font-size: .76rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.concepts-page .concept-family {
            display: inline-flex;
            padding: 6px 9px;
            color: #6535ff;
            font-size: .72rem;
            font-weight: 800;
            background: #eee9ff;
            border-radius: 999px;
        }

.concepts-page .concept-status {
            display: inline-flex;
            padding: 6px 9px;
            color: #087447;
            font-size: .7rem;
            font-weight: 850;
            background: #dcf9ea;
            border-radius: 999px;
        }

.concepts-page .concept-status.inactive {
                color: #a51d35;
                background: #ffe7ed;
            }

.concepts-page .price-value {
            color: #101c48;
            font-weight: 850;
            white-space: nowrap;
        }

        @media (max-width: 991.98px) {
.concepts-page .catalog-layout {
                grid-template-columns: 1fr;
            }

.concepts-page .concept-filter {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 767.98px) {
.concepts-page .concepts-header {
                align-items: flex-start;
                flex-direction: column;
            }

.concepts-page .concept-form-grid,
.concepts-page .concept-filter {
                grid-template-columns: 1fr;
            }

.concepts-page .field-full {
                grid-column: auto;
            }

.concepts-page .catalog-card {
                padding: 20px 16px;
                border-radius: 18px;
            }

.concepts-page .catalog-actions {
                flex-direction: column-reverse;
            }

.concepts-page .btn-catalog-primary,
.concepts-page .btn-catalog-secondary,
.concepts-page .btn-filter {
                width: 100%;
            }

.concepts-page .filter-clear {
                width: 100%;
            }
        }

.concepts-page .concept-list-heading {
    border: 0;
    margin: 0;
    padding: 0;
}

.concepts-page .concept-results-hidden {
    display: none;
}

/* =========================================================
   INICIO DE SESIÓN
   ========================================================= */

.login-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 35px 5%;
        }

.login-page .login-container {
            width: 100%;
            max-width: 1450px;
            margin: auto;
        }

        /* Marca */
.login-page .cerebr-brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 42px;
            color: var(--cerebr-dark);
        }

.login-page .brand-icon {
            display: grid;
            place-items: center;
            width: 55px;
            height: 55px;
            color: white;
            font-size: 1.8rem;
            border-radius: 18px;
            background: var(--cerebr-gradient);
            box-shadow: 0 12px 26px rgba(101,53,255,.23);
        }

.login-page .brand-name {
            margin: 0;
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -1.5px;
        }

.login-page .brand-name span {
                color: var(--cerebr-primary);
            }

        /* Presentación */
.login-page .login-presentation {
            position: relative;
            padding-right: 40px;
        }

.login-page .login-title {
            max-width: 620px;
            margin: 0;
            color: var(--cerebr-dark);
            font-size: clamp(3rem, 5vw, 5.8rem);
            font-weight: 900;
            line-height: .94;
            letter-spacing: -5px;
        }

.login-page .login-title span {
                background: linear-gradient( 90deg, var(--cerebr-coral), #ff7890 );
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
            }

.login-page .title-line {
            width: 180px;
            height: 10px;
            margin-top: 25px;
            border-radius: 20px;
            background: var(--cerebr-gradient);
            transform: rotate(-2deg);
        }

        /* Ilustración */
.login-page .idea-illustration {
            position: relative;
            width: 430px;
            height: 350px;
            margin: -70px 0 0 43%;
        }

.login-page .brain-light {
            position: absolute;
            inset: 30px auto auto 65px;
            display: grid;
            place-items: center;
            width: 230px;
            height: 230px;
            font-size: 8.5rem;
            border-radius: 45% 55% 52% 48%;
            background: linear-gradient(145deg, #8564ff, #5226d7);
            box-shadow: 25px 30px 55px rgba(76,40,190,.24), inset 15px 15px 35px rgba(255,255,255,.25);
            transform: rotate(-5deg);
        }

.login-page .brain-light::after {
                content: "";
                position: absolute;
                bottom: -60px;
                width: 65px;
                height: 75px;
                border-radius: 5px 5px 25px 25px;
                background: repeating-linear-gradient( to bottom, #dfd9ed 0, #dfd9ed 9px, #7b6b9d 10px, #7b6b9d 16px );
            }

.login-page .brain-emoji {
            filter: drop-shadow(0 10px 12px rgba(25,10,90,.28));
        }

.login-page .floating-shape {
            position: absolute;
            display: grid;
            place-items: center;
            border-radius: 24px;
            box-shadow: 0 18px 35px rgba(80,45,190,.18);
        }

.login-page .shape-chart {
            right: 20px;
            bottom: 15px;
            width: 125px;
            height: 105px;
            color: var(--cerebr-primary);
            font-size: 3.2rem;
            background: rgba(255,255,255,.92);
            transform: rotate(8deg);
        }

.login-page .shape-rocket {
            right: 25px;
            top: 5px;
            font-size: 4.4rem;
            transform: rotate(10deg);
        }

.login-page .shape-step {
            left: 0;
            bottom: 10px;
            color: white;
            font-size: 3.4rem;
            background: linear-gradient(145deg, #5834ff, #8f3df4);
            width: 110px;
            height: 105px;
        }

        /* Login */
.login-page .login-card {
            width: 100%;
            max-width: 590px;
            margin-left: auto;
            padding: 48px 52px;
            overflow: hidden;
        }

.login-page .login-card::before {
                content: "";
                position: absolute;
                top: -70px;
                right: -75px;
                width: 190px;
                height: 190px;
                border-radius: 50%;
                background: var(--cerebr-gradient);
                opacity: .15;
            }

.login-page .login-heading {
            margin-bottom: 32px;
        }

.login-page .login-heading h2 {
                margin-bottom: 7px;
                color: var(--cerebr-dark);
                font-weight: 800;
            }

.login-page .login-heading p {
                margin: 0;
                color: var(--cerebr-muted);
            }

.login-page .field-label {
            margin-bottom: 8px;
            color: var(--cerebr-dark);
            font-weight: 700;
        }

.login-page .login-input-group {
            position: relative;
            margin-bottom: 22px;
        }

.login-page .login-input-icon {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            display: grid;
            place-items: center;
            width: 60px;
            height: 56px;
            color: white;
            font-size: 1.35rem;
            border-radius: 14px 0 0 14px;
            background: linear-gradient(145deg, #7755ff, #5324ed);
        }

.login-page .login-input {
            width: 100%;
            min-height: 56px;
            padding: 12px 55px 12px 78px;
        }

.login-page .password-toggle {
            position: absolute;
            top: 50%;
            right: 15px;
            z-index: 6;
            border: 0;
            color: var(--cerebr-dark);
            font-size: 1.35rem;
            background: transparent;
            transform: translateY(-50%);
        }

.login-page .login-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            margin: 4px 0 28px;
        }

.login-page .remember-box {
            display: flex;
            align-items: center;
            gap: 8px;
        }

.login-page .remember-box input {
                width: 20px;
                height: 20px;
                accent-color: var(--cerebr-primary);
            }

.login-page .forgot-link {
            color: var(--cerebr-primary);
            font-size: .92rem;
            font-weight: 600;
        }

.login-page .login-message {
            display: block;
            margin-bottom: 16px;
            padding: 11px 14px;
            color: #b42335;
            font-size: .9rem;
            font-weight: 600;
            background: #fff1f3;
            border: 1px solid #ffc7cf;
            border-radius: 12px;
        }

.login-page .button-arrow {
            float: right;
            display: grid;
            place-items: center;
            width: 35px;
            height: 35px;
            margin-top: -5px;
            color: var(--cerebr-primary);
            border-radius: 50%;
            background: white;
        }

.login-page .whatsapp-help {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            max-width: 390px;
            margin: 25px 0 0 auto;
            padding: 13px 18px;
            color: var(--cerebr-text);
            border-radius: 50px;
            background: rgba(255,255,255,.85);
            box-shadow: 0 12px 30px rgba(40,35,90,.10);
        }

.login-page .whatsapp-help i {
                color: #10b95b;
                font-size: 2rem;
            }

        /* Tablet y celular */
        @media (max-width: 991.98px) {
.login-page {
                padding: 25px 18px;
            }

.login-page .login-presentation {
                padding: 0;
                text-align: center;
            }

.login-page .cerebr-brand {
                margin-bottom: 25px;
            }

.login-page .login-title {
                max-width: 700px;
                margin: auto;
                font-size: clamp(2.6rem, 8vw, 4.5rem);
                line-height: 1;
                letter-spacing: -3px;
            }

.login-page .title-line {
                margin: 20px auto;
            }

.login-page .idea-illustration {
                width: 320px;
                height: 250px;
                margin: 10px auto 40px;
                transform: scale(.85);
            }

.login-page .login-card {
                max-width: 620px;
                margin: auto;
            }

.login-page .whatsapp-help {
                margin: 22px auto 0;
            }
        }

        @media (max-width: 575.98px) {
.login-page {
                align-items: flex-start;
                padding: 20px 14px 35px;
            }

.login-page .cerebr-brand {
                width: 100%;
                justify-content: center;
            }

.login-page .brand-icon {
                width: 45px;
                height: 45px;
                border-radius: 14px;
            }

.login-page .brand-name {
                font-size: 1.65rem;
            }

.login-page .login-title {
                font-size: 2.65rem;
                letter-spacing: -2px;
            }

.login-page .idea-illustration {
                width: 270px;
                height: 205px;
                margin-top: 18px;
                margin-bottom: 25px;
                transform: scale(.72);
                transform-origin: top center;
            }

.login-page .login-card {
                margin-top: -38px;
                padding: 30px 20px;
                border-radius: 23px;
            }

.login-page .login-options {
                align-items: flex-start;
            }

.login-page .forgot-link {
                max-width: 145px;
                text-align: right;
            }

.login-page .whatsapp-help {
                font-size: .82rem;
            }
        }

/* =========================================================
   REGISTRO DE CUENTA
   ========================================================= */

.register-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 35px 18px;
        }

.register-page .register-container {
            width: 100%;
            max-width: 1150px;
            margin: auto;
        }

.register-page .register-brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 30px;
            color: var(--cerebr-dark);
        }

.register-page .brand-icon {
            display: grid;
            place-items: center;
            width: 52px;
            height: 52px;
            color: #fff;
            font-size: 1.6rem;
            border-radius: 17px;
            background: var(--cerebr-gradient);
        }

.register-page .brand-name {
            margin: 0;
            font-size: 1.9rem;
            font-weight: 900;
        }

.register-page .brand-name span {
            color: var(--cerebr-primary);
        }

.register-page .register-presentation h1 {
            max-width: 520px;
            margin-bottom: 18px;
            color: var(--cerebr-dark);
            font-size: clamp(2.5rem, 5vw, 4.8rem);
            font-weight: 900;
            line-height: .98;
            letter-spacing: -4px;
        }

.register-page .register-presentation h1 span {
            color: var(--cerebr-coral);
        }

.register-page .register-presentation p {
            max-width: 500px;
            color: var(--cerebr-muted);
            font-size: 1rem;
            line-height: 1.7;
        }

.register-page .register-benefits {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-top: 28px;
        }

.register-page .register-benefit {
            display: flex;
            align-items: center;
            gap: 11px;
            color: var(--cerebr-text);
            font-weight: 600;
        }

.register-page .register-benefit i {
            display: grid;
            place-items: center;
            width: 35px;
            height: 35px;
            color: #fff;
            border-radius: 11px;
            background: var(--cerebr-gradient);
        }

.register-page .register-card {
            max-width: 590px;
            margin-left: auto;
            padding: 35px;
        }

.register-page .register-card h2 {
            color: var(--cerebr-dark);
            font-weight: 900;
        }

.register-page .field-label {
            margin-bottom: 6px;
            color: var(--cerebr-dark);
            font-size: .82rem;
            font-weight: 700;
        }

.register-page .register-input {
            min-height: 50px;
            border: 1px solid #dfe2ee;
            border-radius: 13px;
        }

.register-page .password-container {
            position: relative;
        }

.register-page .password-container .register-input {
            padding-right: 48px;
        }

.register-page .password-button {
            position: absolute;
            top: 50%;
            right: 14px;
            border: 0;
            color: var(--cerebr-dark);
            background: transparent;
            transform: translateY(-50%);
        }

.register-page .validation-message {
            display: block;
            margin-top: 4px;
            color: #c62943;
            font-size: .75rem;
            font-weight: 600;
        }

.register-page .register-message {
            display: block;
            margin-bottom: 18px;
            padding: 12px 15px;
            color: #a51d35;
            background: #fff0f3;
            border: 1px solid #ffc7d1;
            border-radius: 12px;
            font-weight: 600;
        }

.register-page .success-card {
            max-width: 570px;
            margin: auto;
            padding: 50px 30px;
            text-align: center;
        }

.register-page .success-icon {
            display: grid;
            place-items: center;
            width: 80px;
            height: 80px;
            margin: 0 auto 22px;
            color: #fff;
            font-size: 2.5rem;
            border-radius: 25px;
            background: linear-gradient(145deg, #08a966, #24d39a);
        }

        @media (max-width: 991.98px) {
.register-page .register-presentation {
                margin-bottom: 35px;
                text-align: center;
            }

.register-page .register-presentation h1,
.register-page .register-presentation p {
                margin-left: auto;
                margin-right: auto;
            }

.register-page .register-benefits {
                align-items: center;
            }

.register-page .register-card {
                margin: auto;
            }
        }

        @media (max-width: 575.98px) {
.register-page {
                padding: 20px 12px;
            }

.register-page .register-brand {
                justify-content: center;
                width: 100%;
            }

.register-page .register-presentation h1 {
                font-size: 2.6rem;
                letter-spacing: -2px;
            }

.register-page .register-card {
                padding: 27px 18px;
            }
        }

/* =========================================================
   RECUPERAR CONTRASEÑA
   ========================================================= */

.recovery-page {
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 25px 15px;
        }

.recovery-page .recovery-card {
            width: 100%;
            max-width: 520px;
            padding: 38px;
        }

.recovery-page .recovery-icon {
            display: grid;
            place-items: center;
            width: 70px;
            height: 70px;
            margin: 0 auto 20px;
            color: #fff;
            font-size: 2rem;
            border-radius: 22px;
            background: var(--cerebr-gradient);
            box-shadow: 0 15px 30px rgba(101, 53, 255, .24);
        }

.recovery-page .recovery-title {
            color: var(--cerebr-dark);
            font-weight: 900;
            text-align: center;
        }

.recovery-page .recovery-subtitle {
            margin-bottom: 28px;
            color: var(--cerebr-muted);
            text-align: center;
        }

.recovery-page .field-label {
            display: block;
            margin-bottom: 6px;
            color: var(--cerebr-dark);
            font-size: .82rem;
            font-weight: 700;
        }

.recovery-page .recovery-input {
            min-height: 51px;
            border: 1px solid #dfe2ee;
            border-radius: 13px;
        }

.recovery-page .recovery-message {
            display: block;
            margin-bottom: 18px;
            padding: 13px 15px;
            border-radius: 12px;
            font-weight: 600;
        }

.recovery-page .message-error {
            color: #a51d35;
            background: #fff0f3;
            border: 1px solid #ffc7d1;
        }

.recovery-page .message-success {
            color: #087447;
            background: #e8fff4;
            border: 1px solid #a8ebcc;
        }

        @media (max-width: 575.98px) {
.recovery-page .recovery-card {
                padding: 30px 19px;
            }
        }

/* =========================================================
   RESTABLECER CONTRASEÑA
   ========================================================= */

.reset-page {
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 25px 15px;
        }

.reset-page .reset-card {
            width: 100%;
            max-width: 520px;
            padding: 38px;
        }

.reset-page .reset-icon {
            display: grid;
            place-items: center;
            width: 70px;
            height: 70px;
            margin: 0 auto 20px;
            color: #fff;
            font-size: 2rem;
            border-radius: 22px;
            background: var(--cerebr-gradient);
            box-shadow: 0 15px 30px rgba(101,53,255,.24);
        }

.reset-page .reset-title {
            color: var(--cerebr-dark);
            font-weight: 900;
            text-align: center;
        }

.reset-page .reset-subtitle {
            margin-bottom: 27px;
            color: var(--cerebr-muted);
            text-align: center;
        }

.reset-page .field-label {
            margin-bottom: 6px;
            color: var(--cerebr-dark);
            font-size: .82rem;
            font-weight: 700;
        }

.reset-page .password-container {
            position: relative;
        }

.reset-page .reset-input {
            min-height: 51px;
            padding-right: 48px;
            border: 1px solid #dfe2ee;
            border-radius: 13px;
        }

.reset-page .password-button {
            position: absolute;
            top: 50%;
            right: 14px;
            border: 0;
            color: var(--cerebr-dark);
            background: transparent;
            transform: translateY(-50%);
        }

.reset-page .validation-message {
            display: block;
            margin-top: 5px;
            color: #c62943;
            font-size: .75rem;
            font-weight: 600;
        }

.reset-page .reset-message {
            display: block;
            margin-bottom: 18px;
            padding: 13px 15px;
            color: #a51d35;
            background: #fff0f3;
            border: 1px solid #ffc7d1;
            border-radius: 12px;
            font-weight: 600;
        }

.reset-page .result-panel {
            text-align: center;
        }

.reset-page .result-icon {
            display: grid;
            place-items: center;
            width: 78px;
            height: 78px;
            margin: 0 auto 20px;
            color: #fff;
            font-size: 2.3rem;
            border-radius: 24px;
        }

.reset-page .result-success {
            background: linear-gradient(145deg, #08a966, #24d39a);
        }

.reset-page .result-error {
            background: linear-gradient(145deg, #d73550, #ff7187);
        }

        @media (max-width: 575.98px) {
.reset-page .reset-card {
                padding: 30px 19px;
            }
        }

/* =========================================================
   COTIZACIÓN PÚBLICA
   ========================================================= */

.public-quote-page,
.public-quote-page * {
            box-sizing: border-box;
        }

.public-quote-page {
            min-height: 100vh;
            margin: 0;
            padding: 30px 16px;
            color: #17234d;
            background: radial-gradient( circle at top left, rgba(101, 55, 255, .12), transparent 32% ), radial-gradient( circle at bottom right, rgba(245, 66, 121, .12), transparent 32% ), #f6f7fc;
            font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

.public-quote-page .quote-wrapper {
            width: min(100%, 940px);
            margin: 0 auto;
        }

.public-quote-page .quote-brand {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            color: #071442;
            font-size: 1.25rem;
            font-weight: 850;
        }

.public-quote-page .brand-icon {
            width: 43px;
            height: 43px;
            display: grid;
            place-items: center;
            color: #fff;
            border-radius: 13px;
            background: linear-gradient( 135deg, #6334ff, #f54279 );
        }

.public-quote-page .quote-card {
            overflow: hidden;
            background: #fff;
            border: 1px solid #e5e8f4;
            border-radius: 25px;
            box-shadow: 0 25px 60px rgba(30, 39, 86, .10);
        }

.public-quote-page .quote-header {
            padding: 30px;
            color: #fff;
            background: linear-gradient( 110deg, #6334ff, #a52fe9 50%, #f54279 );
        }

.public-quote-page .quote-label {
            display: block;
            font-size: .72rem;
            font-weight: 850;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            opacity: .85;
        }

.public-quote-page .quote-title {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 850;
            letter-spacing: -1px;
            margin: 7px 0 3px;
        }

.public-quote-page .quote-project {
            display: block;
            font-size: 1rem;
            margin-bottom: 17px;
            opacity: .93;
        }

.public-quote-page .quote-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

.public-quote-page .quote-tag {
            display: inline-flex;
            padding: 7px 11px;
            color: #fff;
            background: rgba(255, 255, 255, .17);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 999px;
            font-size: .73rem;
            font-weight: 800;
        }

.public-quote-page .quote-section {
            padding: 25px 30px;
            border-bottom: 1px solid #edf0f7;
        }

.public-quote-page .quote-section-title {
            color: #071442;
            font-size: 1rem;
            font-weight: 850;
            margin: 0 0 17px;
        }

.public-quote-page .quote-info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

.public-quote-page .info-label {
            display: block;
            color: #818ba9;
            font-size: .7rem;
            font-weight: 850;
            text-transform: uppercase;
            margin-bottom: 5px;
        }

.public-quote-page .info-value {
            color: #17234d;
            font-size: .9rem;
            font-weight: 750;
        }

.public-quote-page .quote-table-wrap {
            overflow-x: auto;
        }

.public-quote-page .quote-table {
            width: 100%;
            min-width: 650px;
            border-collapse: collapse;
        }

.public-quote-page .quote-table th {
                padding: 12px;
                color: #7e88a7;
                background: #f7f8fc;
                border-bottom: 1px solid #e8ebf5;
                font-size: .68rem;
                text-align: left;
                text-transform: uppercase;
            }

.public-quote-page .quote-table td {
                padding: 14px 12px;
                border-bottom: 1px solid #edf0f7;
                font-size: .82rem;
            }

.public-quote-page .concept-title {
            display: block;
            color: #071442;
            font-weight: 850;
        }

.public-quote-page .concept-description {
            display: block;
            color: #8790ab;
            font-size: .72rem;
            margin-top: 3px;
        }

.public-quote-page .text-right {
            text-align: right !important;
        }

.public-quote-page .quote-totals {
            width: min(100%, 380px);
            margin: 22px 0 0 auto;
        }

.public-quote-page .total-row {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            padding: 10px 0;
            color: #77829f;
            border-bottom: 1px solid #edf0f7;
            font-size: .86rem;
        }

.public-quote-page .grand-total {
            padding: 14px 16px;
            margin-top: 8px;
            color: #fff;
            background: linear-gradient( 100deg, #6334ff, #f54279 );
            border: 0;
            border-radius: 13px;
            font-size: 1.05rem;
            font-weight: 850;
        }

.public-quote-page .quote-observations {
            color: #687493;
            line-height: 1.65;
            white-space: pre-line;
        }

.public-quote-page .quote-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 25px 30px;
        }

.public-quote-page .quote-button {
            min-height: 48px;
            padding: 0 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: linear-gradient( 100deg, #6334ff, #f54279 );
            border: 0;
            border-radius: 13px;
            font-weight: 800;
            text-decoration: none;
            cursor: pointer;
        }

.public-quote-page .quote-button-secondary {
            color: #6537ff;
            background: #fff;
            border: 1px solid #6537ff;
        }

.public-quote-page .quote-footer {
            color: #8a93ac;
            font-size: .74rem;
            text-align: center;
            margin-top: 17px;
        }

.public-quote-page .unavailable {
            padding: 55px 25px;
            text-align: center;
            background: #fff;
            border: 1px solid #e5e8f4;
            border-radius: 25px;
            box-shadow: 0 25px 60px rgba(30, 39, 86, .10);
        }

.public-quote-page .unavailable-icon {
            width: 72px;
            height: 72px;
            display: grid;
            place-items: center;
            margin: 0 auto 17px;
            color: #6537ff;
            background: #eee9ff;
            border-radius: 22px;
            font-size: 2rem;
        }

.public-quote-page .unavailable h1 {
            color: #071442;
            font-size: 1.45rem;
            margin: 0 0 8px;
        }

.public-quote-page .unavailable p {
            color: #818ba9;
            line-height: 1.55;
            margin: 0;
        }

        @media (max-width: 650px) {
.public-quote-page {
                padding: 17px 10px;
            }

.public-quote-page .quote-header,
.public-quote-page .quote-section,
.public-quote-page .quote-actions {
                padding: 21px;
            }

.public-quote-page .quote-info-grid {
                grid-template-columns: 1fr;
            }

.public-quote-page .quote-actions {
                flex-direction: column;
            }

.public-quote-page .quote-button {
                width: 100%;
            }
        }

        @media print {
.public-quote-page {
                padding: 0;
                background: #fff;
            }

.public-quote-page .quote-brand,
.public-quote-page .quote-actions,
.public-quote-page .quote-footer {
                display: none;
            }

.public-quote-page .quote-card {
                border: 0;
                box-shadow: none;
            }
        }

/* =========================================================
   HISTORIAL DE CONSUMO
   ========================================================= */

.usage-history-page {
    padding: 34px 0 64px;
}

.usage-history-container {
    width: min(100% - 32px, 1220px);
    margin: 0 auto;
}

.usage-history-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.usage-history-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--cerebr-primary);
    font-weight: 750;
    text-decoration: none;
}

.usage-history-back:hover {
    color: var(--cerebr-secondary);
}

.usage-history-title {
    margin: 0;
    color: var(--cerebr-dark);
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -1.5px;
}

.usage-history-subtitle {
    margin: 6px 0 0;
    color: var(--cerebr-muted);
    font-size: 1rem;
}

.usage-history-header-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    color: #fff;
    background: var(--cerebr-gradient);
    border-radius: 20px;
    box-shadow: 0 15px 32px rgba(101, 55, 255, .22);
    font-size: 1.7rem;
}

.usage-history-summary,
.usage-history-card {
    background: #fff;
    border: 1px solid #e4e8f4;
    border-radius: 24px;
    box-shadow: 0 16px 42px rgba(38, 49, 99, .07);
}

.usage-history-summary {
    margin-bottom: 24px;
    padding: 24px;
}

.usage-history-summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.usage-history-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #8790ab;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.usage-history-period {
    display: block;
    color: var(--cerebr-dark);
    font-size: 1.35rem;
    font-weight: 850;
}

.usage-history-summary-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--cerebr-primary);
    background: #eee9ff;
    border-radius: 13px;
    font-size: 1.15rem;
}

.usage-history-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.usage-history-metric {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px;
    background: #f8f8fd;
    border: 1px solid #eceef7;
    border-radius: 18px;
}

.usage-history-metric-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 1rem;
}

.metric-clients {
    color: #6537ff;
    background: #ece7ff;
}

.metric-images {
    color: #cc2d70;
    background: #ffe7f1;
}

.metric-storage {
    color: #087a52;
    background: #ddf8ec;
}

.metric-whatsapp {
    color: #128c55;
    background: #e1f8ed;
}

.metric-quotes {
    color: #006f91;
    background: #def6fc;
}

.usage-history-metric-label {
    min-height: 34px;
    color: #7f89a7;
    font-size: .76rem;
    font-weight: 750;
}

.usage-history-metric-value {
    display: block;
    margin-top: 5px;
    color: var(--cerebr-dark);
    font-size: 1.45rem;
    font-weight: 900;
}

.usage-history-delta {
    display: block;
    margin-top: 7px;
    color: #8a93ad;
    font-size: .67rem;
    line-height: 1.35;
}

.usage-history-card {
    overflow: hidden;
}

.usage-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #e8ebf4;
}

.usage-history-toolbar h2 {
    margin: 0 0 4px;
    color: var(--cerebr-dark);
    font-size: 1.05rem;
    font-weight: 850;
}

.usage-history-toolbar p {
    margin: 0;
    color: #8790ab;
    font-size: .8rem;
}

.usage-history-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.usage-history-filter label {
    color: var(--cerebr-dark);
    font-size: .78rem;
    font-weight: 750;
}

.usage-history-select {
    min-width: 112px;
    min-height: 42px;
    padding: 0 34px 0 13px;
    color: var(--cerebr-dark);
    background-color: #fff;
    border: 1px solid #dfe3ef;
    border-radius: 12px;
    font-weight: 700;
}

.usage-history-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.usage-history-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}

.usage-history-table th {
    padding: 14px 18px;
    color: #7e88a7;
    background: #f8f8fc;
    border-bottom: 1px solid #e8ebf5;
    font-size: .69rem;
    font-weight: 850;
    text-align: left;
    text-transform: uppercase;
}

.usage-history-table td {
    padding: 17px 18px;
    color: #263252;
    border-bottom: 1px solid #edf0f7;
    font-size: .82rem;
}

.usage-history-table tbody tr:last-child td {
    border-bottom: 0;
}

.usage-history-table tbody tr:hover {
    background: #fbfaff;
}

.usage-history-table strong {
    color: var(--cerebr-dark);
}

.usage-history-empty {
    padding: 60px 24px;
    text-align: center;
}

.usage-history-empty-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    color: var(--cerebr-primary);
    background: #eee9ff;
    border-radius: 21px;
    font-size: 1.65rem;
}

.usage-history-empty h3 {
    margin: 0 0 6px;
    color: var(--cerebr-dark);
    font-size: 1.08rem;
    font-weight: 850;
}

.usage-history-empty p {
    margin: 0;
    color: #8790ab;
    font-size: .85rem;
}

.usage-history-access {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding: 13px 15px;
    color: var(--cerebr-primary);
    background: #f4f1ff;
    border: 1px solid #e4ddff;
    border-radius: 13px;
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}

.usage-history-access span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.usage-history-access:hover {
    color: var(--cerebr-primary);
    background: #ebe5ff;
    transform: translateY(-1px);
}

@media (max-width: 1100px) {
    .usage-history-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .usage-history-page {
        padding: 24px 0 48px;
    }

    .usage-history-container {
        width: min(100% - 20px, 1220px);
    }

    .usage-history-header {
        align-items: flex-start;
    }

    .usage-history-header-icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 17px;
        font-size: 1.3rem;
    }

    .usage-history-title {
        font-size: 2rem;
    }

    .usage-history-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .usage-history-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .usage-history-filter,
    .usage-history-select {
        width: 100%;
    }

    .usage-history-filter {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .usage-history-header-icon {
        display: none;
    }

    .usage-history-summary {
        padding: 18px;
    }

    .usage-history-metrics {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   AJUSTE FINAL DE PALETAS - PRIORIDAD SOBRE CADA MÓDULO
   ========================================================= */

html[data-cerebr-theme="dark"] {
    --theme-bg: #0d1320;
    --theme-surface: #161f2e;
    --theme-surface-soft: #1d2839;
    --theme-border: #2b3950;
    --theme-text: #edf3ff;
    --theme-muted: #9eabc1;
}

html[data-cerebr-theme="batman"] {
    --theme-bg: #0d0f12;
    --theme-surface: #171a1f;
    --theme-surface-soft: #20242b;
    --theme-border: #343a44;
    --theme-text: #f3f1e8;
    --theme-muted: #a8adb6;
}

html[data-cerebr-theme="dark"] body,
html[data-cerebr-theme="dark"] .dashboard-main,
html[data-cerebr-theme="dark"] .dashboard-content,
html[data-cerebr-theme="dark"] .dashboard-content > main,
html[data-cerebr-theme="dark"] main[class*="-page"],
html[data-cerebr-theme="batman"] body,
html[data-cerebr-theme="batman"] .dashboard-main,
html[data-cerebr-theme="batman"] .dashboard-content,
html[data-cerebr-theme="batman"] .dashboard-content > main,
html[data-cerebr-theme="batman"] main[class*="-page"] {
    color: var(--theme-text);
    background: var(--theme-bg);
}

html[data-cerebr-theme="dark"] .dashboard-sidebar {
    background: linear-gradient(180deg, #111a2d 0%, #18243a 55%, #24345a 100%);
}

html[data-cerebr-theme="batman"] .dashboard-sidebar {
    background: linear-gradient(180deg, #08090b 0%, #12151a 58%, #20242b 100%);
}

html[data-cerebr-theme="batman"] .dashboard-brand-icon,
html[data-cerebr-theme="batman"] .sidebar-avatar {
    color: #111318;
    background: linear-gradient(135deg, #ffe35a, #f5c518);
}

html[data-cerebr-theme="batman"] .dashboard-brand-name,
html[data-cerebr-theme="batman"] .dashboard-menu a:hover {
    color: #f5c518;
}

html[data-cerebr-theme="batman"] .dashboard-menu a.active {
    color: #111318;
    background: linear-gradient(100deg, #f5c518, #ffe46a);
    box-shadow: 0 10px 24px rgba(245, 197, 24, .18);
}

html[data-cerebr-theme="dark"] .dashboard-menu a.active {
    color: #fff;
    background: linear-gradient(100deg, #6558d9, #3c6bb5);
}

html[data-cerebr-theme="dark"] :is(.dashboard-topbar, .topbar-user, .topbar-icon, .notification-panel),
html[data-cerebr-theme="batman"] :is(.dashboard-topbar, .topbar-user, .topbar-icon, .notification-panel) {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(.quotes-page, .projects-page, .agenda-page, .settings-page, .clients-page, .files-library-page, .catalog-page, .concept-page, .detail-page, .quote-page),
html[data-cerebr-theme="batman"] :is(.quotes-page, .projects-page, .agenda-page, .settings-page, .clients-page, .files-library-page, .catalog-page, .concept-page, .detail-page, .quote-page) {
    background: var(--theme-bg);
}

html[data-cerebr-theme="dark"] :is(.quotes-card, .projects-card, .agenda-card, .settings-card, .clients-card, .files-card, .catalog-card, .concept-list-card, .detail-card, .quote-card, .stat-card, .dashboard-panel, .entity-card, .upload-card, .storage-card),
html[data-cerebr-theme="batman"] :is(.quotes-card, .projects-card, .agenda-card, .settings-card, .clients-card, .files-card, .catalog-card, .concept-list-card, .detail-card, .quote-card, .stat-card, .dashboard-panel, .entity-card, .upload-card, .storage-card) {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}

html[data-cerebr-theme="dark"] :is(.quotes-card-header, .quote-row-header, .projects-card-header, .clients-card-header),
html[data-cerebr-theme="batman"] :is(.quotes-card-header, .quote-row-header, .projects-card-header, .clients-card-header) {
    color: var(--theme-muted);
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(.quote-row, .project-row, .notification-item),
html[data-cerebr-theme="batman"] :is(.quote-row, .project-row, .notification-item) {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(.quote-row:hover, .project-row:hover, .notification-item:hover),
html[data-cerebr-theme="batman"] :is(.quote-row:hover, .project-row:hover, .notification-item:hover) {
    background: var(--theme-surface-soft);
}

html[data-cerebr-theme="dark"] :is(.search-input, .form-control, .form-control-custom, .field-control, input, select, textarea),
html[data-cerebr-theme="batman"] :is(.search-input, .form-control, .form-control-custom, .field-control, input, select, textarea) {
    color: var(--theme-text);
    background-color: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(.quotes-title, .quote-folio, .project-name, .quote-total, .quotes-card-header h2, h1, h2, h3, h4, label, strong),
html[data-cerebr-theme="batman"] :is(.quotes-title, .quote-folio, .project-name, .quote-total, .quotes-card-header h2, h1, h2, h3, h4, label, strong) {
    color: var(--theme-text);
}

html[data-cerebr-theme="dark"] :is(.quote-version, .project-folio, .quote-value, p, small),
html[data-cerebr-theme="batman"] :is(.quote-version, .project-folio, .quote-value, p, small) {
    color: var(--theme-muted);
}

html[data-cerebr-theme="batman"] :is(.quotes-count, .notification-total) {
    color: #16181c;
    background: #f5c518;
}

html[data-cerebr-theme="batman"] .quote-icon {
    color: #111318;
    background: linear-gradient(135deg, #ffe35a, #f5c518 70%, #887000);
}

html[data-cerebr-theme="batman"] .quote-action {
    color: #f5c518;
    background: #272b32;
}

html[data-cerebr-theme="batman"] .quote-action:hover {
    color: #111318;
    background: #f5c518;
}

html[data-cerebr-theme="batman"] .notification-panel-footer,
html[data-cerebr-theme="batman"] a {
    color: #f5c518;
}

html[data-cerebr-theme="dark"] .notification-panel-footer {
    color: #a997ff;
}

html[data-cerebr-theme="dark"] ::placeholder,
html[data-cerebr-theme="batman"] ::placeholder {
    color: var(--theme-muted);
    opacity: .8;
}

/* Subtítulos legibles en todos los módulos */
html[data-cerebr-theme="dark"] :is(
    .topbar-title p,
    .entity-subtitle,
    .projects-subtitle,
    .project-subtitle,
    .clients-subtitle,
    .client-form-subtitle,
    .settings-subtitle,
    .files-subtitle,
    .catalog-subtitle,
    .concepts-subtitle,
    .usage-history-subtitle,
    .recovery-subtitle,
    .reset-subtitle,
    .quotes-header p
) {
    color: #b9c7dc;
}

html[data-cerebr-theme="batman"] :is(
    .topbar-title p,
    .entity-subtitle,
    .projects-subtitle,
    .project-subtitle,
    .clients-subtitle,
    .client-form-subtitle,
    .settings-subtitle,
    .files-subtitle,
    .catalog-subtitle,
    .concepts-subtitle,
    .usage-history-subtitle,
    .recovery-subtitle,
    .reset-subtitle,
    .quotes-header p
) {
    color: #c5c8ce;
}

/* Botones de acción uniformes */
:is(
    .quote-action,
    .action-button,
    .file-action,
    .activity-button,
    .client-action,
    .image-action,
    .catalog-mini-button,
    .entity-action,
    .edit-button,
    .delete-button
) {
    display: inline-grid;
    place-items: center;
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    min-width: 37px;
    padding: 0;
    border-radius: 11px;
    line-height: 1;
}

html[data-cerebr-theme="dark"] :is(
    .quote-action,
    .action-button,
    .file-action,
    .activity-button,
    .client-action,
    .image-action,
    .catalog-mini-button,
    .entity-action,
    .edit-button,
    .delete-button
),
html[data-cerebr-theme="batman"] :is(
    .quote-action,
    .action-button,
    .file-action,
    .activity-button,
    .client-action,
    .image-action,
    .catalog-mini-button,
    .entity-action,
    .edit-button,
    .delete-button
) {
    display: inline-grid;
    place-items: center;
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    min-width: 37px;
    padding: 0;
    color: var(--cerebr-primary);
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-border);
    border-radius: 11px;
    box-shadow: none;
    line-height: 1;
    text-decoration: none;
    transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease;
}

html[data-cerebr-theme="dark"] :is(
    .quote-action,
    .action-button,
    .file-action,
    .activity-button,
    .client-action,
    .image-action,
    .catalog-mini-button,
    .entity-action,
    .edit-button,
    .delete-button
):hover {
    color: #fff;
    background: #7769e7;
    border-color: #7769e7;
    transform: translateY(-2px);
}

html[data-cerebr-theme="batman"] :is(
    .quote-action,
    .action-button,
    .file-action,
    .activity-button,
    .client-action,
    .image-action,
    .catalog-mini-button,
    .entity-action,
    .edit-button,
    .delete-button
) {
    color: #f5c518;
}

html[data-cerebr-theme="batman"] :is(
    .quote-action,
    .action-button,
    .file-action,
    .activity-button,
    .client-action,
    .image-action,
    .catalog-mini-button,
    .entity-action,
    .edit-button,
    .delete-button
):hover {
    color: #111318;
    background: #f5c518;
    border-color: #f5c518;
    transform: translateY(-2px);
}

html[data-cerebr-theme="dark"] :is(.danger, .action-delete, .file-action.delete, .image-action.delete, .delete-button, .quote-pdf),
html[data-cerebr-theme="batman"] :is(.danger, .action-delete, .file-action.delete, .image-action.delete, .delete-button, .quote-pdf) {
    color: #ff6f86;
    background: #34222a;
    border-color: #57303b;
}

/* Encabezados de tablas y superficies de filtros */
html[data-cerebr-theme="dark"] :is(thead, th, .entity-table thead, .clients-table thead),
html[data-cerebr-theme="batman"] :is(thead, th, .entity-table thead, .clients-table thead) {
    color: var(--theme-muted);
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(.entity-table td, .clients-table td),
html[data-cerebr-theme="batman"] :is(.entity-table td, .clients-table td) {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

/* Íconos estructurales de cada módulo */
html[data-cerebr-theme="dark"] :is(
    .section-icon,
    .card-icon,
    .module-icon,
    .entity-icon,
    .settings-icon,
    .client-header-icon,
    .usage-history-header-icon,
    .catalog-icon
) {
    color: #fff;
    background: linear-gradient(135deg, #7769e7, #436fae);
}

html[data-cerebr-theme="batman"] :is(
    .section-icon,
    .card-icon,
    .module-icon,
    .entity-icon,
    .settings-icon,
    .client-header-icon,
    .usage-history-header-icon,
    .catalog-icon
) {
    color: #111318;
    background: linear-gradient(135deg, #ffe35a, #f5c518);
}

/* Botones principales y contadores */
html[data-cerebr-theme="batman"] :is(.entity-primary-button, .btn-gradient, .btn-cerebr, .quotes-count) {
    color: #111318;
    background: linear-gradient(100deg, #f5c518, #ffe46a);
    border-color: transparent;
}

html[data-cerebr-theme="dark"] :is(.entity-primary-button, .btn-gradient, .btn-cerebr) {
    color: #fff;
    background: linear-gradient(100deg, #7769e7, #436fae);
    border-color: transparent;
}

/* Correcciones específicas de contraste */
html[data-cerebr-theme="dark"] :is(.client-name, .client-contact, .entity-name strong),
html[data-cerebr-theme="batman"] :is(.client-name, .client-contact, .entity-name strong) {
    color: var(--theme-text);
}

html[data-cerebr-theme="dark"] :is(.client-rfc, .entity-secondary-text),
html[data-cerebr-theme="batman"] :is(.client-rfc, .entity-secondary-text) {
    color: var(--theme-muted);
}

html[data-cerebr-theme="dark"] .entity-toolbar,
html[data-cerebr-theme="batman"] .entity-toolbar {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .16);
}

html[data-cerebr-theme="dark"] :is(.catalog-page .image-title, .catalog-page .image-client),
html[data-cerebr-theme="batman"] :is(.catalog-page .image-title, .catalog-page .image-client) {
    color: var(--theme-text);
}

html[data-cerebr-theme="dark"] .catalog-page .image-description,
html[data-cerebr-theme="batman"] .catalog-page .image-description {
    color: var(--theme-muted);
}

html[data-cerebr-theme="batman"] .catalog-page .image-client {
    color: #f5c518;
}

html[data-cerebr-theme="dark"] :is(.agenda-page .agenda-header p, .agenda-page .agenda-subtitle),
html[data-cerebr-theme="batman"] :is(.agenda-page .agenda-header p, .agenda-page .agenda-subtitle) {
    color: #c5c8ce;
}

/* Familias: scroll más compacto sin afectar otros listados */
.concepts-page .families-list.cerebr-scroll-list,
.concepts-page .cerebr-scroll-list.families-list {
    max-height: 330px;
}

@media (max-width: 575.98px) {
    .concepts-page .families-list.cerebr-scroll-list,
    .concepts-page .cerebr-scroll-list.families-list {
        max-height: 290px;
    }
}

/* Contraste final de Agenda, Cotizaciones y Conceptos en temas oscuros */
html[data-cerebr-theme="dark"] :is(
    .agenda-page .agenda-header p,
    .agenda-page .agenda-subtitle,
    .agenda-page .agenda-description,
    .quotes-page .quotes-header p,
    .quotes-page .quotes-subtitle,
    .quotes-page .quotes-description
) {
    color: #b9c7dc;
}

html[data-cerebr-theme="batman"] :is(
    .agenda-page .agenda-header p,
    .agenda-page .agenda-subtitle,
    .agenda-page .agenda-description,
    .quotes-page .quotes-header p,
    .quotes-page .quotes-subtitle,
    .quotes-page .quotes-description
) {
    color: #c5c8ce;
}

html[data-cerebr-theme="dark"] :is(
    .concepts-page .concept-table td,
    .concepts-page .concept-name,
    .concepts-page .price-value
),
html[data-cerebr-theme="batman"] :is(
    .concepts-page .concept-table td,
    .concepts-page .concept-name,
    .concepts-page .price-value
) {
    color: var(--theme-text);
}

html[data-cerebr-theme="dark"] .concepts-page .concept-description,
html[data-cerebr-theme="batman"] .concepts-page .concept-description {
    color: var(--theme-muted);
}

/* Bootstrap text-muted usa !important en estos dos subtítulos */
html[data-cerebr-theme="dark"] .agenda-page .agenda-header p.text-muted,
html[data-cerebr-theme="dark"] .quotes-page .quotes-header p.text-muted {
    color: #b9c7dc !important;
}

html[data-cerebr-theme="batman"] .agenda-page .agenda-header p.text-muted,
html[data-cerebr-theme="batman"] .quotes-page .quotes-header p.text-muted {
    color: #c5c8ce !important;
}

/* Configuración: gestión de usuarios vinculados por Tag */
.settings-page .settings-tags-header {
    align-items: center;
}

.settings-page .settings-tags-counter {
    margin-left: auto;
    padding: .45rem .75rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #7048e8, #e83e8c);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

.settings-page .settings-tag-invite {
    display: flex;
    align-items: end;
    gap: .75rem;
    margin-top: 1.25rem;
}

.settings-page .settings-tag-input {
    flex: 1;
}

.settings-page .settings-tag-invite .btn-gradient {
    min-height: 48px;
}

.settings-page .settings-tags-group {
    margin-top: 1.25rem;
    border-top: 1px solid var(--theme-border, #d9deea);
    padding-top: 1rem;
}

.settings-page .settings-tags-group-title {
    margin: 0 0 .65rem;
    color: var(--theme-text, #192238);
    font-size: .9rem;
    font-weight: 800;
}

.settings-page .settings-tags-group-title i {
    color: var(--theme-primary, #6f42e8);
}

.settings-page .settings-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--theme-border, #d9deea);
}

.settings-page .settings-tag-person {
    min-width: 0;
}

.settings-page .settings-tag-person strong,
.settings-page .settings-tag-person span {
    display: block;
}

.settings-page .settings-tag-person strong {
    color: var(--theme-text, #192238);
}

.settings-page .settings-tag-person span,
.settings-page .settings-tags-empty {
    color: var(--theme-muted, #6f7890);
    font-size: .82rem;
}

.settings-page .settings-tag-actions {
    display: flex;
    gap: .45rem;
}

.settings-page .btn-tag-action {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .65rem;
    border: 1px solid var(--theme-border, #d9deea);
    border-radius: .65rem;
    color: var(--theme-text, #192238);
    background: var(--theme-surface-2, rgba(112, 72, 232, .06));
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
}

.settings-page .btn-tag-action.is-accept {
    color: #087443;
    background: #dff9ed;
}

.settings-page .btn-tag-action.is-reject {
    color: #c92a4c;
}

.settings-page .settings-tags-empty {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed var(--theme-border, #d9deea);
    border-radius: .8rem;
}

@media (max-width: 575.98px) {
    .settings-tags-header {
        flex-wrap: wrap;
    }

    .settings-tags-counter {
        margin-left: 0;
    }

    .settings-tag-invite,
    .settings-tag-row {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-tag-actions,
    .settings-tag-actions .btn-tag-action,
    .settings-tag-row > .btn-tag-action {
        width: 100%;
    }

    .settings-tag-actions .btn-tag-action,
    .settings-tag-row > .btn-tag-action {
        justify-content: center;
    }
}

/* Contraste de los medidores de consumo en temas oscuros */
html[data-cerebr-theme="dark"] .settings-page .usage-info span:first-child {
    color: #dbe6f8 !important;
}

html[data-cerebr-theme="batman"] .settings-page .usage-info span:first-child {
    color: #f3f1e8 !important;
}

html[data-cerebr-theme="dark"] .settings-page .usage-info span:last-child,
html[data-cerebr-theme="batman"] .settings-page .usage-info span:last-child {
    color: #9fb3d4 !important;
}

/* Agenda: selección y visualización de responsables vinculados */
.agenda-page .agenda-assignee-picker {
    position: relative;
}

.agenda-page .agenda-assignee-picker summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: .7rem .9rem;
    border: 1px solid var(--theme-border, #d9deea);
    border-radius: .75rem;
    color: var(--theme-text, #192238);
    background: var(--theme-surface-2, rgba(112, 72, 232, .05));
    font-size: .88rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.agenda-page .agenda-assignee-picker summary::-webkit-details-marker {
    display: none;
}

.agenda-page .agenda-assignee-picker summary i {
    transition: transform .2s ease;
}

.agenda-page .agenda-assignee-picker[open] summary i {
    transform: rotate(180deg);
}

.agenda-page .agenda-assignee-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + .4rem);
    right: 0;
    left: 0;
    padding: .4rem;
    border: 1px solid var(--theme-border, #d9deea);
    border-radius: .8rem;
    background: var(--theme-surface, #fff);
    box-shadow: 0 18px 40px rgba(9, 18, 40, .22);
}

.agenda-page .agenda-assignees {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
    padding: .45rem;
    list-style: none;
}

.agenda-page .agenda-assignees li label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--theme-text, #192238);
    font-size: .84rem;
    font-weight: 650;
    cursor: pointer;
}

.agenda-page .agenda-assignees input {
    width: 1rem;
    height: 1rem;
    accent-color: #7048e8;
}

.agenda-page .agenda-assignees-help {
    display: block;
    margin-top: .4rem;
    color: var(--theme-muted, #6f7890);
}

.agenda-page .activity-assignees {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .55rem;
    color: var(--theme-muted, #6f7890);
    font-size: .78rem;
    font-weight: 650;
}

.agenda-page .activity-assignees i {
    color: #7048e8;
}

@media (max-width: 575.98px) {
    .agenda-page .agenda-assignees {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ADMINISTRACIÓN DE PLANES
   ========================================================= */

.admin-plans-page {
    min-height: 100%;
    padding: 1.5rem;
    color: var(--theme-text, #192238);
    background: var(--theme-bg, #f5f7fb);
}

.admin-plans-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
}

.admin-plans-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-plans-header > div {
    min-width: 0;
}

.admin-plans-title {
    margin: .35rem 0;
    color: var(--theme-text, #192238);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 800;
}

.admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.admin-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 1.2rem;
    border: 1px solid var(--theme-border, #e1e5ee);
    border-radius: 1rem;
    background: var(--theme-surface, #fff);
    box-shadow: 0 10px 30px rgba(23, 32, 56, .07);
}

.admin-summary-icon {
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: .9rem;
    color: #fff;
    background: linear-gradient(135deg, #7048e8, #4c6ef5);
    font-size: 1.25rem;
}

.admin-summary-card > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.admin-summary-label {
    color: var(--theme-muted, #6f7890);
    font-size: .82rem;
    font-weight: 650;
}

.admin-summary-value {
    color: var(--theme-text, #192238);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.15;
}

.admin-plans-card {
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--theme-border, #e1e5ee);
    border-radius: 1rem;
    background: var(--theme-surface, #fff);
    box-shadow: 0 10px 30px rgba(23, 32, 56, .07);
}

.admin-plans-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.3rem;
    border-bottom: 1px solid var(--theme-border, #e1e5ee);
}

.admin-plans-card-header h2 {
    margin: 0 0 .25rem;
    color: var(--theme-text, #192238);
    font-size: 1.05rem;
    font-weight: 800;
}

.admin-plans-card .search-container {
    margin: 1.1rem 1.3rem;
}

.admin-plans-list {
    max-height: 470px;
    overflow-x: auto;
    overflow-y: auto;
}

.admin-plan-row {
    display: grid;
    grid-template-columns:
        minmax(250px, 1.5fr)
        minmax(150px, .7fr)
        minmax(110px, .45fr)
        minmax(145px, .5fr);
    align-items: center;
    gap: 1rem;
    min-width: 760px;
    padding: 1rem 1.3rem;
    border-top: 1px solid var(--theme-border, #e8ebf2);
    transition:
        background-color .2s ease,
        transform .2s ease;
}

.admin-plan-row:hover {
    background: var(--theme-surface-soft, #f7f8fc);
}

.admin-plan-main {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.admin-plan-main > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.admin-plan-icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: .75rem;
    color: #7048e8;
    background: rgba(112, 72, 232, .12);
    font-size: 1.05rem;
}

.admin-plan-name {
    overflow: hidden;
    color: var(--theme-text, #192238);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-plan-code {
    color: var(--theme-muted, #6f7890);
    font-size: .78rem;
    font-weight: 650;
}

.admin-plan-price {
    display: flex;
    flex-direction: column;
    color: var(--theme-text, #192238);
    font-size: 1rem;
    font-weight: 800;
}

.admin-plan-price span {
    color: var(--theme-muted, #6f7890);
    font-size: .72rem;
    font-weight: 600;
}

.admin-plan-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}

.admin-plan-actions .quote-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--theme-border, #dfe3ec);
    border-radius: .65rem;
    color: #7048e8;
    background: var(--theme-surface, #fff);
    text-decoration: none;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.admin-plan-actions .quote-action:hover {
    color: #fff;
    border-color: #7048e8;
    background: #7048e8;
    transform: translateY(-1px);
}

.admin-plan-form,
.admin-assignment-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.3rem;
}

.admin-plan-form .form-group,
.admin-assignment-form .form-group {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .4rem;
}

.admin-plan-form label,
.admin-assignment-form label {
    color: var(--theme-text, #192238);
    font-size: .82rem;
    font-weight: 750;
}

.admin-plan-form-wide {
    grid-column: 1 / -1;
}

.admin-plan-check {
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: .65rem;
}

.admin-plan-check label {
    margin-left: .35rem;
    cursor: pointer;
}

.admin-plan-check input {
    width: 1rem;
    height: 1rem;
    accent-color: #7048e8;
}

.admin-plan-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .65rem;
    padding: 1rem 1.3rem 1.3rem;
    border-top: 1px solid var(--theme-border, #e1e5ee);
}

.admin-features-table {
    max-height: 540px;
    overflow: auto;
}

.admin-feature-row {
    display: grid;
    grid-template-columns:
        minmax(290px, 1.5fr)
        minmax(100px, .45fr)
        minmax(130px, .5fr)
        minmax(130px, .5fr);
    align-items: center;
    gap: 1rem;
    min-width: 760px;
    padding: .9rem 1.3rem;
    border-bottom: 1px solid var(--theme-border, #e8ebf2);
}

.admin-feature-row-header {
    position: sticky;
    z-index: 2;
    top: 0;
    color: var(--theme-muted, #6f7890);
    background: var(--theme-surface-soft, #f6f7fb);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-feature-row > div:first-of-type {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.admin-feature-name {
    color: var(--theme-text, #192238);
    font-weight: 800;
}

.admin-feature-code {
    color: #7048e8;
    font-size: .73rem;
    font-weight: 750;
}

.admin-feature-description {
    margin-top: .2rem;
    color: var(--theme-muted, #6f7890);
    font-size: .76rem;
}

.admin-feature-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-right: .3rem;
    accent-color: #7048e8;
}

.admin-feature-row label {
    color: var(--theme-text, #192238);
    font-size: .8rem;
    font-weight: 650;
}

.admin-plans-page .empty-quotes {
    padding: 3rem 1.25rem;
    text-align: center;
}

.admin-plans-page .empty-quotes > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 1rem;
    border-radius: 1rem;
    color: #7048e8;
    background: rgba(112, 72, 232, .12);
    font-size: 1.55rem;
}

.admin-plans-page .empty-quotes h3 {
    color: var(--theme-text, #192238);
    font-weight: 800;
}

.admin-plans-page .empty-quotes p {
    color: var(--theme-muted, #6f7890);
}

/* Temas Noche y Batman */

html[data-cerebr-theme="dark"] .admin-plans-page,
html[data-cerebr-theme="batman"] .admin-plans-page {
    color: var(--theme-text);
    background: var(--theme-bg);
}

html[data-cerebr-theme="dark"] :is(
    .admin-summary-card,
    .admin-plans-card,
    .admin-plan-actions .quote-action
),
html[data-cerebr-theme="batman"] :is(
    .admin-summary-card,
    .admin-plans-card,
    .admin-plan-actions .quote-action
) {
    color: var(--theme-text);
    border-color: var(--theme-border);
    background: var(--theme-surface);
}

html[data-cerebr-theme="dark"] :is(
    .admin-plan-row:hover,
    .admin-feature-row-header
),
html[data-cerebr-theme="batman"] :is(
    .admin-plan-row:hover,
    .admin-feature-row-header
) {
    background: var(--theme-surface-soft);
}

html[data-cerebr-theme="dark"] :is(
    .admin-plans-title,
    .admin-summary-value,
    .admin-plans-card-header h2,
    .admin-plan-name,
    .admin-plan-price,
    .admin-feature-name,
    .admin-plans-page label
),
html[data-cerebr-theme="batman"] :is(
    .admin-plans-title,
    .admin-summary-value,
    .admin-plans-card-header h2,
    .admin-plan-name,
    .admin-plan-price,
    .admin-feature-name,
    .admin-plans-page label
) {
    color: var(--theme-text);
}

html[data-cerebr-theme="dark"] :is(
    .admin-summary-label,
    .admin-plan-code,
    .admin-plan-price span,
    .admin-feature-description,
    .admin-plans-header .text-muted,
    .admin-plans-card-header .text-muted
),
html[data-cerebr-theme="batman"] :is(
    .admin-summary-label,
    .admin-plan-code,
    .admin-plan-price span,
    .admin-feature-description,
    .admin-plans-header .text-muted,
    .admin-plans-card-header .text-muted
) {
    color: var(--theme-muted) !important;
}

html[data-cerebr-theme="batman"] :is(
    .admin-summary-icon,
    .admin-plan-actions .quote-action:hover
) {
    color: #111;
    border-color: #f4c430;
    background: #f4c430;
}

/* Adaptación para tablet y celular */

@media (max-width: 991.98px) {
    .admin-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-plan-form,
    .admin-assignment-form {
        grid-template-columns: 1fr;
    }

    .admin-plan-form-wide {
        grid-column: auto;
    }
}

@media (max-width: 767.98px) {
    .admin-plans-page {
        padding: 1rem;
    }

    .admin-plans-header {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-plans-header .btn {
        width: 100%;
    }

    .admin-summary-grid {
        grid-template-columns: 1fr;
    }

    .admin-plans-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-plan-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .admin-plan-form-actions .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .admin-plans-page {
        padding: .75rem;
    }

    .admin-summary-card,
    .admin-plans-card-header,
    .admin-plan-form,
    .admin-assignment-form {
        padding: 1rem;
    }

    .admin-plans-card .search-container {
        margin: 1rem;
    }

    .admin-summary-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .admin-summary-value {
        font-size: 1.4rem;
    }
}


/* Administración de planes: filas completas en celular */

@media (max-width: 767.98px) {
    .admin-plans-list {
        overflow-x: hidden;
    }

    .admin-plan-row {
        grid-template-columns: minmax(0, 1fr) auto;
        min-width: 0;
        gap: .75rem;
        padding: 1rem;
    }

    .admin-plan-main {
        min-width: 0;
    }

    .admin-plan-price {
        align-items: flex-end;
        text-align: right;
    }

    .admin-plan-status {
        grid-column: 1;
        grid-row: 2;
    }

    .admin-plan-actions {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-end;
    }
}

@media (max-width: 420px) {
    .admin-plan-actions {
        gap: .3rem;
    }

        .admin-plan-actions .quote-action {
            width: 34px;
            height: 34px;
        }
}

/* =========================================================
   COTIZACIONES · FILTROS Y SCROLL (2026-08-11)
   ========================================================= */
.quotes-page .quotes-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
    gap: 12px;
    margin-bottom: 22px;
}

.quotes-page .quotes-filters .search-container {
    margin-bottom: 0;
}

.quotes-page .quotes-status-filter {
    position: relative;
}

.quotes-page .quotes-status-filter > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 16px;
    color: var(--cerebr-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.quotes-page .quotes-status-filter .form-select {
    min-height: 50px;
    padding-left: 44px;
    border: 1px solid #dfe2ee;
    border-radius: 14px;
}

.quotes-page .quotes-scroll-list {
    max-height: clamp(360px, 56vh, 610px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(101, 53, 255, .45) transparent;
    scrollbar-width: thin;
}

.quotes-page .quotes-scroll-list::-webkit-scrollbar {
    width: 7px;
}

.quotes-page .quotes-scroll-list::-webkit-scrollbar-thumb {
    background: rgba(101, 53, 255, .4);
    border-radius: 20px;
}

.quotes-page .quotes-scroll-list .quote-row-header {
    position: sticky;
    z-index: 3;
    top: 0;
}

.quotes-page .quotes-filter-empty {
    padding: 42px 20px;
    color: var(--cerebr-muted);
    text-align: center;
}

.quotes-page .quotes-filter-empty i {
    display: block;
    margin-bottom: 8px;
    color: var(--cerebr-primary);
    font-size: 1.7rem;
}

html[data-cerebr-theme="dark"] .quotes-page .quotes-status-filter .form-select,
html[data-cerebr-theme="batman"] .quotes-page .quotes-status-filter .form-select {
    color: var(--cerebr-text);
    background-color: var(--cerebr-surface);
    border-color: var(--cerebr-border);
}

/* =========================================================
   DETALLE DE PROYECTO · ACTIVIDADES (2026-08-11)
   ========================================================= */
.project-activities-card {
    display: grid;
    gap: 1rem;
}

.project-activities-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.project-activities-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0;
    color: var(--cerebr-dark);
    font-size: 1rem;
    font-weight: 800;
}

.project-activities-header p {
    margin: .55rem 0 0;
    color: var(--cerebr-muted);
    font-size: .78rem;
}

.project-activities-count {
    flex-shrink: 0;
    padding: .32rem .7rem;
    color: var(--cerebr-primary);
    font-size: .72rem;
    font-weight: 800;
    background: #eeeaff;
    border-radius: 999px;
}

.project-activities-list {
    max-height: 430px;
}

.project-activity-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e8eaf3;
}

.project-activity-item:last-child {
    border-bottom: 0;
}

.project-activity-date {
    display: grid;
    place-content: center;
    min-height: 58px;
    color: #fff;
    text-align: center;
    background: var(--cerebr-gradient);
    border-radius: 16px;
}

.project-activity-date strong {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
}

.project-activity-date span {
    margin-top: .25rem;
    font-size: .62rem;
    font-weight: 800;
}

.project-activity-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.project-activity-heading > strong {
    color: var(--cerebr-dark);
    font-size: .88rem;
}

.project-activity-content p {
    margin: .35rem 0 .55rem;
    color: var(--cerebr-muted);
    font-size: .76rem;
}

.project-activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    color: var(--cerebr-muted);
    font-size: .72rem;
}

.project-activity-meta i {
    margin-right: .25rem;
    color: var(--cerebr-primary);
}

.project-activity-status {
    flex-shrink: 0;
    padding: .3rem .62rem;
    font-size: .62rem;
    font-weight: 900;
    border-radius: 999px;
}

.project-activity-status.is-pending { color: #925f00; background: #fff0c8; }
.project-activity-status.is-progress { color: #1358ae; background: #deebff; }
.project-activity-status.is-completed { color: #087855; background: #d9f7eb; }
.project-activity-status.is-cancelled { color: #be244d; background: #ffe3eb; }

.project-activities-empty {
    padding: 2.2rem 1rem;
    color: var(--cerebr-muted);
    text-align: center;
}

.project-activities-empty i {
    display: block;
    margin-bottom: .55rem;
    color: var(--cerebr-primary);
    font-size: 1.8rem;
}

html[data-cerebr-theme="dark"] .project-activities-count,
html[data-cerebr-theme="batman"] .project-activities-count {
    color: #c9bbff;
    background: rgba(112, 72, 232, .2);
}

html[data-cerebr-theme="dark"] .project-activity-item,
html[data-cerebr-theme="batman"] .project-activity-item {
    border-bottom-color: rgba(148, 163, 184, .2);
}

@media (max-width: 575.98px) {
    .quotes-page .quotes-filters {
        grid-template-columns: 1fr;
    }

    .quotes-page .quotes-scroll-list {
        max-height: 520px;
    }

    .project-activities-header,
    .project-activity-heading {
        align-items: flex-start;
    }

    .project-activity-item {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: .75rem;
    }

    .project-activity-date {
        min-height: 52px;
        border-radius: 14px;
    }
}

/* =========================================================
   AJUSTES RESPONSIVE GLOBALES - LISTADOS MÓVILES
   Evita desbordamientos sin modificar la estructura ASPX.
   ========================================================= */

@media (max-width: 767.98px) {
    /* Contenedores generales */
    .projects-page,
    .concepts-page,
    .clients-page,
    .entity-page,
    .catalog-page,
    .files-library-page {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .projects-page .container,
    .concepts-page .container,
    .clients-page .container,
    .entity-page .container,
    .catalog-page .container,
    .files-library-page .container,
    .projects-container,
    .projects-card,
    .concept-list-card,
    .clients-card,
    .entity-card,
    .catalog-card,
    .files-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Proyectos: título y acciones en renglones independientes */
    .projects-page .project-row {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch;
        gap: 12px;
        min-width: 0;
    }

    .projects-page .project-main,
    .projects-page .project-value,
    .projects-page .project-status-container,
    .projects-page .project-actions {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-width: 0;
        padding-left: 0;
    }

    .projects-page .project-main > .min-w-0 {
        min-width: 0;
        flex: 1 1 auto;
    }

    .projects-page .project-name,
    .projects-page .project-folio,
    .projects-page .project-client {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .projects-page .project-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Tablas convertidas en tarjetas para celular */
    .clients-page .clients-table-wrap,
    .entity-page .entity-table-wrapper,
    .concepts-page .concept-table-wrap {
        overflow: visible;
    }

    .clients-page .clients-table,
    .entity-page .entity-table,
    .concepts-page .concept-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .clients-page .clients-table thead,
    .entity-page .entity-table thead,
    .concepts-page .concept-table thead {
        display: none;
    }

    .clients-page .clients-table tbody,
    .entity-page .entity-table tbody,
    .concepts-page .concept-table tbody {
        display: block;
        width: 100%;
    }

    .clients-page .clients-table tbody tr,
    .entity-page .entity-table tbody tr,
    .concepts-page .concept-table tbody tr {
        display: block;
        width: 100%;
        padding: 18px;
        border-bottom: 1px solid var(--theme-border, #e5e9f5);
        box-sizing: border-box;
    }

    .clients-page .clients-table tbody td,
    .entity-page .entity-table tbody td,
    .concepts-page .concept-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        min-width: 0;
        padding: 8px 0;
        border: 0;
        text-align: right;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }

    .clients-page .clients-table tbody td:first-child,
    .entity-page .entity-table tbody td:first-child,
    .concepts-page .concept-table tbody td:first-child {
        display: block;
        padding-top: 0;
        padding-bottom: 13px;
        text-align: left;
    }

    .clients-page .clients-table tbody td:not(:first-child)::before,
    .entity-page .entity-table tbody td:not(:first-child)::before,
    .concepts-page .concept-table tbody td:not(:first-child)::before {
        flex: 0 0 auto;
        color: var(--theme-muted, #8790ab);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    /* Etiquetas de Clientes */
    .clients-page .clients-table tbody td:nth-child(2)::before { content: "Contacto"; }
    .clients-page .clients-table tbody td:nth-child(3)::before { content: "WhatsApp"; }
    .clients-page .clients-table tbody td:nth-child(4)::before { content: "Registro"; }
    .clients-page .clients-table tbody td:nth-child(5)::before { content: "Estatus"; }
    .clients-page .clients-table tbody td:nth-child(6)::before { content: "Acciones"; }

    /* Etiquetas de Empresas */
    .entity-page .entity-table tbody td:nth-child(2)::before { content: "Contacto"; }
    .entity-page .entity-table tbody td:nth-child(3)::before { content: "Clientes"; }
    .entity-page .entity-table tbody td:nth-child(4)::before { content: "Tipo"; }
    .entity-page .entity-table tbody td:nth-child(5)::before { content: "Estatus"; }
    .entity-page .entity-table tbody td:nth-child(6)::before { content: "Acciones"; }

    /* Etiquetas de Conceptos */
    .concepts-page .concept-table tbody td:nth-child(2)::before { content: "Familia"; }
    .concepts-page .concept-table tbody td:nth-child(3)::before { content: "Código"; }
    .concepts-page .concept-table tbody td:nth-child(4)::before { content: "Unidad"; }
    .concepts-page .concept-table tbody td:nth-child(5)::before { content: "Precio"; }
    .concepts-page .concept-table tbody td:nth-child(6)::before { content: "Estatus"; }
    .concepts-page .concept-table tbody td:nth-child(7)::before { content: "Acciones"; }

    .clients-page .client-main,
    .entity-page .entity-name {
        width: 100%;
        min-width: 0;
    }

    .clients-page .client-main > div:last-child,
    .entity-page .entity-name > div:last-child {
        min-width: 0;
    }

    .clients-page .client-name,
    .clients-page .client-rfc,
    .clients-page .client-secondary,
    .entity-page .entity-name strong,
    .entity-page .entity-secondary-text,
    .concepts-page .concept-name,
    .concepts-page .concept-description {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .clients-page .client-actions,
    .entity-page .entity-actions,
    .concepts-page .catalog-mini-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* Catálogo: selector nativo contenido dentro de la tarjeta */
    .catalog-page .catalog-upload-zone,
    .catalog-page .catalog-upload-zone > div {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .catalog-page .catalog-upload-zone input[type="file"] {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        color: var(--theme-muted, #8790ab);
        font-size: .76rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .catalog-page .catalog-upload-zone input[type="file"]::file-selector-button {
        max-width: 145px;
        margin-right: 8px;
        padding: 8px 10px;
        color: #fff;
        background: #6537ff;
        border: 0;
        border-radius: 9px;
        font-weight: 750;
    }

    /* Archivos: contenido flexible sin recortes laterales */
    .files-library-page .file-card,
    .files-library-page .file-body,
    .files-library-page .file-reference,
    .files-library-page .file-meta {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .files-library-page .file-name,
    .files-library-page .file-description,
    .files-library-page .file-reference a,
    .files-library-page .file-reference span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .files-library-page .file-meta {
        flex-wrap: wrap;
    }

    /* Dashboard: tarjetas sin invadir la columna de estatus */
    .dashboard-panel .project-item,
    .dashboard-panel .agenda-item {
        min-width: 0;
    }

    .dashboard-panel .project-info,
    .dashboard-panel .project-info > * {
        min-width: 0;
        max-width: 100%;
    }

    .dashboard-panel .project-info strong,
    .dashboard-panel .project-info small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* WhatsTags: selector y tarjetas de recursos existentes */
.chat-composer { grid-template-columns: auto minmax(0, 1fr) auto; }
.chat-composer textarea { grid-column: 2; }
.chat-character-count { grid-column: 2; }
.chat-send-button { grid-column: 3; }
.chat-share-button,
.chat-resource-dialog header button {
    border: 0;
    background: transparent;
    color: var(--chat-primary);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}
.chat-share-button { grid-column: 1; grid-row: 1; width: 42px; height: 42px; border-radius: 13px; font-size: 1.2rem; align-self: center; }
.chat-share-button:hover { background: rgba(111, 45, 255, .1); }
.chat-resource-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(7, 12, 28, .56); padding: 20px; display: grid; place-items: center; }
.chat-resource-modal[hidden] { display: none !important; }
.chat-resource-dialog { width: min(680px, 100%); max-height: min(760px, 88dvh); overflow: hidden; border-radius: 24px; background: var(--cerebr-white); color: var(--chat-text); box-shadow: 0 28px 80px rgba(10, 20, 52, .25); display: flex; flex-direction: column; }
.chat-resource-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 16px; }
.chat-resource-dialog header h2 { margin: 2px 0 0; font-size: 1.3rem; }
.chat-resource-dialog header button { width: 40px; height: 40px; font-size: 1.15rem; }
.chat-resource-tabs { margin: 0 24px; padding: 4px; border-radius: 14px; background: var(--chat-soft); display: grid; grid-template-columns: repeat(3, 1fr); }
.chat-resource-tabs button { border: 0; border-radius: 11px; padding: 10px; background: transparent; color: var(--chat-muted); font-weight: 700; cursor: pointer; }
.chat-resource-tabs button.is-active { color: var(--chat-primary); background: var(--cerebr-white); box-shadow: 0 5px 16px rgba(42, 35, 95, .08); }
.chat-resource-search { margin: 14px 24px 8px; padding: 0 14px; min-height: 46px; border-radius: 14px; background: var(--chat-soft); display: flex; align-items: center; gap: 10px; }
.chat-resource-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--chat-text); }
.chat-resource-list { min-height: 180px; overflow: auto; padding: 8px 24px 24px; color: var(--chat-muted); }
.chat-resource-option { width: 100%; border: 1px solid var(--chat-border); border-radius: 16px; margin-top: 9px; padding: 13px 14px; background: var(--cerebr-white); color: var(--chat-text); display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.chat-resource-option:hover { border-color: var(--chat-primary); transform: translateY(-1px); }
.chat-resource-option > i { font-size: 1.35rem; color: var(--chat-primary); }
.chat-resource-option span { min-width: 0; display: grid; gap: 3px; }
.chat-resource-option strong, .chat-resource-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-resource-option b { color: var(--chat-primary); font-size: .78rem; }
.chat-resource-card { min-width: min(340px, 68vw); display: grid; gap: 5px; }
.chat-resource-kind { text-transform: uppercase; letter-spacing: .07em; font-size: .66rem; font-weight: 800; opacity: .78; }
.chat-resource-card > strong { font-size: .96rem; }
.chat-resource-card > span:not(.chat-resource-kind):not(.chat-resource-actions) { font-size: .78rem; opacity: .82; }
.chat-resource-actions { display: flex; gap: 14px; margin-top: 6px; }
.chat-resource-actions a { color: inherit; font-size: .78rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
html[data-cerebr-theme="dark"] .chat-resource-dialog,
html[data-cerebr-theme="dark"] .chat-resource-option,
html[data-cerebr-theme="dark"] .chat-resource-tabs button.is-active,
html[data-cerebr-theme="batman"] .chat-resource-dialog,
html[data-cerebr-theme="batman"] .chat-resource-option,
html[data-cerebr-theme="batman"] .chat-resource-tabs button.is-active { background: var(--cerebr-white); }
@media (max-width: 575.98px) {
    .chat-resource-modal { padding: 10px; align-items: end; }
    .chat-resource-dialog { max-height: 86dvh; border-radius: 22px 22px 12px 12px; }
    .chat-resource-tabs, .chat-resource-search { margin-left: 14px; margin-right: 14px; }
    .chat-resource-list { padding-left: 14px; padding-right: 14px; }
    .chat-resource-option { grid-template-columns: 30px 1fr; }
    .chat-resource-option b { display: none; }
    .chat-resource-card { min-width: min(260px, 72vw); }
}

@media (max-width: 420px) {
    .clients-page .clients-table tbody tr,
    .entity-page .entity-table tbody tr,
    .concepts-page .concept-table tbody tr {
        padding: 15px 14px;
    }

    .clients-page .clients-card-header,
    .entity-page .entity-card-header,
    .concepts-page .catalog-card-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .catalog-page .catalog-card {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Archivos: vista previa completa y proporcionada en celular */
@media (max-width: 767.98px) {
    .files-library-page .file-card {
        align-items: stretch;
        flex-direction: column;
    }

    .files-library-page .file-preview {
        display: block;
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 210px;
        min-height: 0;
        background: #f2f1fa;
        box-sizing: border-box;
    }

    .files-library-page .file-preview img,
    .files-library-page .file-document {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .files-library-page .file-preview img {
        object-fit: contain;
        object-position: center;
    }

    .files-library-page .file-document {
        display: grid;
    }
}

/* =========================================================
   CONTRASTE: CATÁLOGO DE IMÁGENES Y AYUDA DE WHATSAPP
   ========================================================= */

/* La zona de carga debe usar una superficie oscura cuando el texto global
   de los temas Noche y Batman cambia a tonos claros. */
html[data-cerebr-theme="dark"] .catalog-page .catalog-upload-zone,
html[data-cerebr-theme="batman"] .catalog-page .catalog-upload-zone {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] .catalog-page .catalog-upload-zone strong,
html[data-cerebr-theme="batman"] .catalog-page .catalog-upload-zone strong {
    color: var(--theme-text) !important;
}

html[data-cerebr-theme="dark"] .catalog-page .catalog-upload-zone span,
html[data-cerebr-theme="batman"] .catalog-page .catalog-upload-zone span {
    color: var(--theme-muted) !important;
}

/* Conserva el significado visual verde de la opción para compartir y evita
   que la regla global de etiquetas claras elimine su contraste. */
html[data-cerebr-theme="dark"] .catalog-page .catalog-share-check,
html[data-cerebr-theme="batman"] .catalog-page .catalog-share-check {
    color: #b9f6d8 !important;
    background: #17352b;
    border-color: #2d6b52;
}

html[data-cerebr-theme="dark"] .catalog-page .catalog-share-check label,
html[data-cerebr-theme="batman"] .catalog-page .catalog-share-check label {
    color: #b9f6d8 !important;
}

/* En el acceso, la ayuda flotante ya no combina texto claro con fondo claro. */
html[data-cerebr-theme="dark"] .login-page .whatsapp-help,
html[data-cerebr-theme="batman"] .login-page .whatsapp-help {
    color: var(--theme-text);
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

html[data-cerebr-theme="dark"] .login-page .whatsapp-help :is(strong, span, p),
html[data-cerebr-theme="batman"] .login-page .whatsapp-help :is(strong, span, p) {
    color: var(--theme-text) !important;
}
/* =========================================================
   FORMULARIOS DE EMPRESAS - CONTRASTE POR TEMA
   Mantiene el formulario y sus secciones dentro de la paleta
   oscura, sin afectar el tema CerebrApp original.
   ========================================================= */

html[data-cerebr-theme="dark"] .entity-page .entity-form,
html[data-cerebr-theme="batman"] .entity-page .entity-form {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}

html[data-cerebr-theme="dark"] .entity-page .entity-section,
html[data-cerebr-theme="batman"] .entity-page .entity-section {
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] .entity-page :is(.entity-section-title, .entity-label),
html[data-cerebr-theme="batman"] .entity-page :is(.entity-section-title, .entity-label) {
    color: var(--theme-text);
}

html[data-cerebr-theme="dark"] .entity-page .entity-section-text,
html[data-cerebr-theme="batman"] .entity-page .entity-section-text {
    color: var(--theme-muted);
}

html[data-cerebr-theme="dark"] .entity-page .entity-control,
html[data-cerebr-theme="batman"] .entity-page .entity-control {
    color: var(--theme-text);
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] .entity-page .entity-secondary-button,
html[data-cerebr-theme="batman"] .entity-page .entity-secondary-button {
    color: var(--theme-text);
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

/* Vista del logotipo actual en los formularios de Empresas. */
html[data-cerebr-theme="dark"] .entity-logo-current,
html[data-cerebr-theme="batman"] .entity-logo-current {
    color: var(--theme-text) !important;
    background: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

html[data-cerebr-theme="dark"] .entity-logo-current :is(strong, label),
html[data-cerebr-theme="batman"] .entity-logo-current :is(strong, label) {
    color: var(--theme-text) !important;
}

html[data-cerebr-theme="dark"] .entity-logo-current :is(span, small),
html[data-cerebr-theme="batman"] .entity-logo-current :is(span, small) {
    color: var(--theme-muted) !important;
}

html[data-cerebr-theme="dark"] .entity-logo-preview,
html[data-cerebr-theme="batman"] .entity-logo-preview {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

/* =========================================================
   GANTT DE PROYECTOS
   ========================================================= */
.gantt-page {
    min-height: 100%;
    padding: 3rem 1.5rem 4rem;
    color: #101828;
    background: #f7f8ff;
}

.gantt-container {
    width: min(1500px, 100%);
    margin: 0 auto;
}

.gantt-header,
.gantt-card-header,
.gantt-section-heading,
.gantt-summary-card,
.gantt-activity-name,
.gantt-dependency-row,
.gantt-dependency-row > div {
    display: flex;
    align-items: center;
}

.gantt-header {
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.gantt-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.gantt-subtitle,
.gantt-card-header p,
.gantt-section-heading p {
    margin: .3rem 0 0;
    color: #667085;
}

.gantt-card {
    margin-bottom: 1.25rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(52, 64, 84, .08);
}

.gantt-filters-card,
.gantt-management-grid > .gantt-card {
    padding: 1.25rem;
}

.gantt-section-heading {
    gap: .8rem;
    margin-bottom: 1rem;
}

.gantt-section-heading h2,
.gantt-card-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
}

.gantt-section-icon,
.gantt-summary-icon {
    display: grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #713cff, #e83e8c);
}

.gantt-filter-grid,
.gantt-form-grid {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(180px, 1fr));
    gap: 1rem;
    align-items: end;
}

.gantt-form-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
}

.gantt-field {
    min-width: 0;
}

.gantt-field-wide {
    grid-column: 1 / -1;
}

.gantt-field label {
    display: block;
    margin-bottom: .45rem;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.gantt-control {
    width: 100%;
    min-height: 48px;
    padding: .7rem .85rem;
    color: #101828;
    background: #f9fafb;
    border: 1px solid #d0d5dd;
    border-radius: 13px;
    outline: none;
}

.gantt-control:focus {
    border-color: #7f56d9;
    box-shadow: 0 0 0 4px rgba(127, 86, 217, .13);
}

.gantt-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.gantt-summary-card {
    gap: .85rem;
    padding: 1.1rem;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 18px;
}

.gantt-summary-card div {
    display: grid;
    gap: .15rem;
}

.gantt-summary-card span {
    color: #667085;
    font-size: .82rem;
    font-weight: 700;
}

.gantt-summary-card strong {
    font-size: 1.55rem;
    line-height: 1;
}

.gantt-summary-icon.is-total { background: linear-gradient(135deg, #1570ef, #53b1fd); }
.gantt-summary-icon.is-complete { background: linear-gradient(135deg, #039855, #32d583); }
.gantt-summary-icon.is-late { background: linear-gradient(135deg, #d92d20, #f97066); }

.gantt-card-header {
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #e4e7ec;
}

.gantt-count {
    flex: 0 0 auto;
    padding: .38rem .7rem;
    color: #6941c6;
    background: #f4ebff;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}

.gantt-table-scroll {
    overflow: auto;
    max-height: 620px;
}

.gantt-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.gantt-table th,
.gantt-table td {
    height: 62px;
    border-right: 1px solid #eaecf0;
    border-bottom: 1px solid #eaecf0;
}

.gantt-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 54px;
    color: #475467;
    background: #f2f4f7;
}

.gantt-table .gantt-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
}

.gantt-table thead .gantt-sticky {
    z-index: 5;
}

.gantt-activity-column {
    width: 330px;
    min-width: 330px;
    padding: .65rem 1rem;
    text-align: left;
    background: #fff;
}

.gantt-day-header {
    width: 54px;
    min-width: 54px;
    text-align: center;
}

.gantt-day-header span,
.gantt-day-header strong {
    display: block;
    text-transform: uppercase;
}

.gantt-day-header span { font-size: .62rem; }
.gantt-day-header strong { color: #101828; font-size: .85rem; }

.gantt-activity-name {
    justify-content: space-between;
    gap: .5rem;
}

.gantt-activity-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-activity-column small {
    display: block;
    overflow: hidden;
    margin-top: .25rem;
    color: #667085;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-predecessor i { color: #7f56d9; }

.gantt-gap {
    background-color: #fff;
    background-image: linear-gradient(90deg, transparent calc(100% - 1px), #f2f4f7 1px);
    background-size: 54px 100%;
}

.gantt-bar-cell {
    padding: .55rem .2rem;
    background: #fff;
}

.gantt-bar {
    display: flex;
    min-width: 50px;
    height: 42px;
    padding: 0 .65rem;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: #fff;
    border-radius: 11px;
    box-shadow: 0 7px 16px rgba(16, 24, 40, .14);
}

.gantt-bar span { font-size: .68rem; white-space: nowrap; }
.gantt-bar.is-pending { color: #7a2e0e; background: linear-gradient(90deg, #fedf89, #fec84b); }
.gantt-bar.is-progress { background: linear-gradient(90deg, #6941c6, #9e77ed); }
.gantt-bar.is-completed { background: linear-gradient(90deg, #027a48, #32d583); }
.gantt-bar.is-cancelled { background: repeating-linear-gradient(135deg, #98a2b3, #98a2b3 10px, #667085 10px, #667085 20px); }
.gantt-bar.is-late { background: linear-gradient(90deg, #b42318, #f04438); }

.gantt-status {
    flex: 0 0 auto;
    padding: .23rem .45rem;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 900;
}

.gantt-status.is-pending { color: #93370d; background: #fef0c7; }
.gantt-status.is-progress { color: #5925dc; background: #ebe9fe; }
.gantt-status.is-completed { color: #027a48; background: #d1fadf; }
.gantt-status.is-cancelled { color: #344054; background: #eaecf0; }
.gantt-status.is-late { color: #b42318; background: #fee4e2; }

.gantt-legend-card { padding-bottom: 1.1rem; }

.gantt-dependency-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    padding: 1.1rem 1.25rem 0;
}

.gantt-dependency-legend article {
    padding: .9rem;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 14px;
}

.gantt-dependency-legend strong {
    display: inline-grid;
    width: 36px;
    height: 30px;
    margin-right: .35rem;
    place-items: center;
    color: #fff;
    background: #6941c6;
    border-radius: 9px;
}

.gantt-dependency-legend span { font-weight: 800; }
.gantt-dependency-legend p { margin: .55rem 0 0; color: #667085; font-size: .78rem; }

.gantt-management-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.gantt-submit { min-height: 46px; align-self: end; }

.gantt-dependency-row {
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid #eaecf0;
}

.gantt-dependency-row:last-child { border-bottom: 0; }
.gantt-dependency-row > div { gap: .75rem; min-width: 0; }
.gantt-dependency-row > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-dependency-row > div span { color: #7f56d9; }

.gantt-dependency-type {
    margin-left: auto;
    padding: .3rem .55rem;
    color: #5925dc;
    background: #ebe9fe;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 900;
}

.gantt-delete-dependency {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #d92d20;
    background: #fee4e2;
    border: 1px solid #fecdca;
    border-radius: 11px;
}

.gantt-message {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.gantt-message.is-success { color: #027a48; background: #d1fadf; border: 1px solid #a6f4c5; }
.gantt-message.is-error { color: #b42318; background: #fee4e2; border: 1px solid #fecdca; }

.gantt-message.is-success :is(span, strong, label) {
    color: #027a48 !important;
}

.gantt-message.is-error :is(span, strong, label) {
    color: #b42318 !important;
}

.gantt-empty {
    display: grid;
    gap: .75rem;
    min-height: 180px;
    padding: 2rem;
    place-items: center;
    align-content: center;
    color: #667085;
    text-align: center;
}

.gantt-empty i { font-size: 2rem; color: #7f56d9; }

html[data-cerebr-theme="dark"] .gantt-page,
html[data-cerebr-theme="batman"] .gantt-page {
    color: var(--theme-text);
    background: var(--theme-page);
}

html[data-cerebr-theme="dark"] :is(.gantt-card, .gantt-summary-card, .gantt-activity-column),
html[data-cerebr-theme="batman"] :is(.gantt-card, .gantt-summary-card, .gantt-activity-column) {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(.gantt-subtitle, .gantt-card-header p, .gantt-section-heading p, .gantt-summary-card span, .gantt-activity-column small, .gantt-dependency-legend p),
html[data-cerebr-theme="batman"] :is(.gantt-subtitle, .gantt-card-header p, .gantt-section-heading p, .gantt-summary-card span, .gantt-activity-column small, .gantt-dependency-legend p) {
    color: var(--theme-muted);
}

html[data-cerebr-theme="dark"] :is(.gantt-control, .gantt-dependency-legend article),
html[data-cerebr-theme="batman"] :is(.gantt-control, .gantt-dependency-legend article) {
    color: var(--theme-text);
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(.gantt-card-header, .gantt-dependency-row, .gantt-table th, .gantt-table td),
html[data-cerebr-theme="batman"] :is(.gantt-card-header, .gantt-dependency-row, .gantt-table th, .gantt-table td) {
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] .gantt-table thead th,
html[data-cerebr-theme="batman"] .gantt-table thead th {
    color: var(--theme-muted);
    background: var(--theme-surface-soft);
}

html[data-cerebr-theme="dark"] .gantt-day-header strong,
html[data-cerebr-theme="batman"] .gantt-day-header strong {
    color: var(--theme-text);
}

html[data-cerebr-theme="dark"] :is(.gantt-gap, .gantt-bar-cell),
html[data-cerebr-theme="batman"] :is(.gantt-gap, .gantt-bar-cell) {
    background-color: var(--theme-surface);
}

@media (max-width: 1050px) {
    .gantt-summary-grid,
    .gantt-dependency-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gantt-management-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .gantt-page { padding: 1.5rem .85rem 3rem; }
    .gantt-filter-grid,
    .gantt-form-grid,
    .gantt-summary-grid,
    .gantt-dependency-legend { grid-template-columns: 1fr; }
    .gantt-field-wide { grid-column: auto; }
    .gantt-activity-column { width: 250px; min-width: 250px; }
    .gantt-card-header { align-items: flex-start; }
    .gantt-dependency-row { align-items: flex-start; flex-wrap: wrap; }
    .gantt-dependency-row > div { width: 100%; }
}
/* =========================================================
   COTIZACIÓN: IVA OPCIONAL, DESCRIPCIÓN Y WHATSAPP MANUAL
   ========================================================= */
.quote-tax-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.quote-tax-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
    color: var(--cerebr-text, #152044);
}

.quote-tax-check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #7c3aed;
}

textarea.quote-input {
    min-height: 88px;
    resize: vertical;
    line-height: 1.45;
}

.quote-whatsapp-manual {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(34, 197, 94, .35);
    border-radius: 14px;
    background: rgba(34, 197, 94, .08);
}

.quote-export-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
}

.quote-icon-action {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1.05rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
    transition: transform .18s ease, filter .18s ease;
}

.quote-icon-action:hover,
.quote-icon-action:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.quote-icon-preview { background: linear-gradient(135deg, #7c3aed, #6366f1); }
.quote-icon-pdf { background: linear-gradient(135deg, #ef4444, #e11d48); }
.quote-icon-whatsapp { background: linear-gradient(135deg, #16a34a, #10b981); }
.quote-icon-whatsapp-alt { background: linear-gradient(135deg, #64748b, #475569); }

.quote-whatsapp-alternate {
    width: min(100%, 430px);
    margin: .8rem 0 0 auto;
    padding: .9rem;
    border: 1px solid rgba(100, 116, 139, .38);
    border-radius: 14px;
    background: rgba(100, 116, 139, .09);
}

.quote-whatsapp-alternate label {
    display: block;
    margin-bottom: .45rem;
    font-weight: 800;
}

.quote-whatsapp-alternate-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
    gap: .55rem;
}

.quote-whatsapp-alternate-row .form-control {
    min-width: 0;
}

.quote-whatsapp-alternate-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #10b981);
    border-radius: 11px;
    box-shadow: 0 8px 18px rgba(16, 185, 129, .22);
    transition: transform .18s ease, filter .18s ease;
}

.quote-whatsapp-alternate-send:hover,
.quote-whatsapp-alternate-send:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.quote-whatsapp-alternate small {
    display: block;
    margin-top: .45rem;
    color: var(--muted, #94a3b8);
    line-height: 1.4;
}

.quote-whatsapp-option {
    padding: .75rem .85rem;
    margin-bottom: .7rem;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 12px;
    background: rgba(15, 23, 42, .08);
}

.quote-whatsapp-option > span {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    font-weight: 800;
    line-height: 1.3;
}

.quote-whatsapp-option > span input[type="checkbox"] {
    flex: 0 0 auto;
    order: 0;
    margin: .12rem 0 0;
}

.quote-whatsapp-option > span label {
    order: 1;
    margin: 0;
    cursor: pointer;
}

.quote-whatsapp-option small {
    margin-left: 1.6rem;
}

.quote-whatsapp-format {
    display: grid;
    gap: .55rem;
    margin-top: .8rem;
}

.quote-whatsapp-format-title {
    display: block;
    margin-bottom: .1rem;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.quote-whatsapp-radio {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .72rem .8rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 12px;
    background: rgba(15, 23, 42, .06);
    cursor: pointer;
}

.quote-whatsapp-radio:has(input[type="radio"]:checked) {
    border-color: #ef334e;
    background: rgba(239, 51, 78, .09);
    box-shadow: 0 0 0 2px rgba(239, 51, 78, .08);
}

.quote-whatsapp-radio > span:first-child {
    flex: 0 0 auto;
    margin-top: .08rem;
}

.quote-whatsapp-radio input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: #ef334e;
}

.quote-whatsapp-radio > span:last-child {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.quote-whatsapp-radio strong {
    line-height: 1.25;
}

.quote-whatsapp-radio small {
    margin: 0;
}

.quote-whatsapp-choice-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-left: auto;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #10b981);
    border-radius: 9px;
    box-shadow: 0 6px 14px rgba(16, 185, 129, .2);
}

.quote-whatsapp-send.is-hidden {
    display: none !important;
}

.quote-whatsapp-manual input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #16a34a;
}

html[data-cerebr-theme="dark"] .quote-whatsapp-option,
html[data-cerebr-theme="batman"] .quote-whatsapp-option {
    background: rgba(255, 255, 255, .035);
}

html[data-cerebr-theme="dark"] .quote-whatsapp-radio,
html[data-cerebr-theme="batman"] .quote-whatsapp-radio {
    background: rgba(255, 255, 255, .035);
}

.quote-whatsapp-manual small {
    display: block;
    margin-top: .45rem;
    color: var(--muted, #94a3b8);
}

.quote-whatsapp-manual-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: .65rem;
    margin-top: .85rem;
}

.quote-whatsapp-manual-actions .btn-whatsapp-quote,
.quote-whatsapp-manual-actions .btn {
    width: 100%;
    min-height: 44px;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

html[data-cerebr-theme="dark"] .quote-tax-check,
html[data-cerebr-theme="batman"] .quote-tax-check {
    color: var(--theme-text, #f8fafc);
}

@media (max-width: 575.98px) {
    .quote-whatsapp-manual-actions {
        grid-template-columns: 1fr;
    }

    .quote-whatsapp-manual-actions > * {
        width: 100% !important;
        justify-content: center;
    }
}
/* =========================================================
   CHAT INTERNO - SIGNALR, ESCRITORIO Y MÓVIL
   ========================================================= */

.chat-menu-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0 6px;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    background: var(--cerebr-coral);
    border-radius: 999px;
}

.chat-plan-locked {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 760px;
    margin: 1.5rem auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(101, 53, 255, 0.16);
    border-radius: 24px;
    box-shadow: var(--cerebr-shadow);
}

.chat-plan-locked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    color: #ffffff;
    font-size: 1.55rem;
    background: var(--cerebr-gradient);
    border-radius: 20px;
}

.chat-plan-locked h2 {
    margin: 0 0 0.35rem;
    color: var(--cerebr-dark);
    font-size: 1.25rem;
    font-weight: 800;
}

.chat-plan-locked p {
    margin: 0;
    color: var(--cerebr-muted);
}

.chat-shell {
    --chat-surface: rgba(255, 255, 255, 0.95);
    --chat-surface-soft: #f6f4ff;
    --chat-border: rgba(76, 59, 146, 0.14);
    --chat-text: #172044;
    --chat-muted: #77809a;
    display: grid;
    grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
    height: clamp(560px, calc(100vh - 205px), 820px);
    min-height: 560px;
    overflow: hidden;
    color: var(--chat-text);
    background: var(--chat-surface);
    border: 1px solid var(--chat-border);
    border-radius: 26px;
    box-shadow: 0 22px 60px rgba(72, 44, 180, 0.14);
}

.chat-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--chat-border);
    background: var(--chat-surface);
}

.chat-sidebar-header,
.chat-conversation-header {
    display: flex;
    align-items: center;
    min-height: 82px;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--chat-border);
}

.chat-sidebar-header {
    justify-content: space-between;
}

.chat-eyebrow {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--cerebr-primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-sidebar-header h2 {
    margin: 0;
    color: var(--chat-text);
    font-size: 1.35rem;
    font-weight: 850;
}

.chat-total-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 850;
    background: var(--cerebr-gradient);
    border-radius: 999px;
}

.chat-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1rem 1.1rem 0.8rem;
    padding: 0 0.9rem;
    color: var(--chat-muted);
    background: var(--chat-surface-soft);
    border: 1px solid transparent;
    border-radius: 14px;
}

.chat-search:focus-within {
    border-color: var(--cerebr-primary);
    box-shadow: 0 0 0 3px rgba(101, 53, 255, 0.11);
}

.chat-search input {
    width: 100%;
    min-height: 44px;
    padding: 0;
    color: var(--chat-text);
    background: transparent;
    border: 0;
    outline: 0;
}

.chat-sidebar-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin: 0 1.1rem 0.75rem;
    padding: 0.3rem;
    background: var(--chat-surface-soft);
    border-radius: 13px;
}

.chat-sidebar-tabs button {
    min-height: 36px;
    padding: 0.35rem 0.5rem;
    color: var(--chat-muted);
    font-size: 0.75rem;
    font-weight: 750;
    background: transparent;
    border: 0;
    border-radius: 10px;
}

.chat-sidebar-tabs button.is-active {
    color: var(--cerebr-primary);
    background: var(--chat-surface);
    box-shadow: 0 5px 18px rgba(60, 44, 125, 0.1);
}

.chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0.7rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(101, 53, 255, 0.35) transparent;
}

.chat-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 72px;
    padding: 0.72rem;
    color: var(--chat-text);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 16px;
    transition: background 0.18s ease, transform 0.18s ease;
}

.chat-list-item:hover,
.chat-list-item:focus-visible {
    background: var(--chat-surface-soft);
    transform: translateX(2px);
}

.chat-list-item.has-unread {
    background: color-mix(in srgb, var(--cerebr-primary) 8%, var(--chat-surface));
}

.chat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 850;
    background: var(--cerebr-gradient);
    border-radius: 15px;
}

.chat-list-item-body {
    min-width: 0;
    flex: 1;
}

.chat-list-item-top,
.chat-list-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-list-item-top strong {
    min-width: 0;
    overflow: hidden;
    color: var(--chat-text);
    font-size: 0.85rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-item-top small,
.chat-list-item-bottom small {
    color: var(--chat-muted);
    font-size: 0.68rem;
}

.chat-list-item-bottom small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-item-bottom b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    color: #ffffff;
    font-size: 0.64rem;
    background: var(--cerebr-coral);
    border-radius: 999px;
}

.chat-list-empty {
    padding: 2rem 1rem;
    color: var(--chat-muted);
    font-size: 0.8rem;
    text-align: center;
}

.chat-main {
    position: relative;
    min-width: 0;
    min-height: 0;
    background: radial-gradient(circle at 85% 8%, rgba(101, 53, 255, 0.08), transparent 25%), var(--chat-surface-soft);
}

.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

.chat-empty-state > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 1rem;
    color: #ffffff;
    font-size: 2rem;
    background: var(--cerebr-gradient);
    border-radius: 24px;
    box-shadow: 0 16px 35px rgba(101, 53, 255, 0.24);
}

.chat-empty-state h2 {
    margin: 0 0 0.35rem;
    color: var(--chat-text);
    font-size: 1.25rem;
    font-weight: 850;
}

.chat-empty-state p {
    margin: 0;
    color: var(--chat-muted);
}

.chat-conversation {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
}

.chat-conversation-header {
    gap: 0.75rem;
    background: var(--chat-surface);
}

.chat-contact-heading {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.chat-contact-heading strong {
    overflow: hidden;
    color: var(--chat-text);
    font-size: 0.92rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-contact-heading small {
    color: var(--chat-muted);
    font-size: 0.7rem;
}

.chat-connection-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--chat-muted);
    font-size: 0.66rem;
    font-weight: 750;
}

.chat-connection-state::before {
    width: 7px;
    height: 7px;
    content: "";
    background: #a5adbf;
    border-radius: 50%;
}

.chat-connection-state.is-online::before { background: #23bd75; }
.chat-connection-state.is-connecting::before { background: #f1a72d; }
.chat-connection-state.is-offline::before { background: #e05867; }

.chat-back-button {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--chat-text);
    background: var(--chat-surface-soft);
    border: 0;
    border-radius: 12px;
}

.chat-messages {
    min-height: 0;
    overflow-y: auto;
    padding: 1.3rem clamp(1rem, 3vw, 2.3rem);
    scrollbar-width: thin;
    scrollbar-color: rgba(101, 53, 255, 0.35) transparent;
}

.chat-load-older {
    display: block;
    margin: 0 auto 1rem;
    padding: 0.45rem 0.85rem;
    color: var(--cerebr-primary);
    font-size: 0.72rem;
    font-weight: 750;
    background: var(--chat-surface);
    border: 1px solid var(--chat-border);
    border-radius: 999px;
}

.chat-message {
    display: flex;
    margin: 0.32rem 0;
}

.chat-message.is-mine { justify-content: flex-end; }
.chat-message.is-theirs { justify-content: flex-start; }

.chat-message-bubble {
    max-width: min(76%, 620px);
    padding: 0.72rem 0.88rem 0.45rem;
    background: var(--chat-surface);
    border: 1px solid var(--chat-border);
    border-radius: 17px 17px 17px 5px;
    box-shadow: 0 5px 16px rgba(37, 28, 76, 0.06);
}

.chat-message.is-mine .chat-message-bubble {
    color: #ffffff;
    background: linear-gradient(135deg, var(--cerebr-primary), var(--cerebr-secondary));
    border-color: transparent;
    border-radius: 17px 17px 5px 17px;
}

.chat-message-bubble p {
    margin: 0;
    color: inherit;
    font-size: 0.88rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.chat-message-bubble small {
    display: block;
    margin-top: 0.25rem;
    color: var(--chat-muted);
    font-size: 0.61rem;
    text-align: right;
}

.chat-message.is-mine .chat-message-bubble small {
    color: rgba(255, 255, 255, 0.76);
}

.chat-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 0.3rem 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--chat-surface);
    border-top: 1px solid var(--chat-border);
}

.chat-composer textarea {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-height: 120px;
    min-height: 46px;
    resize: none;
    padding: 0.72rem 0.85rem;
    color: var(--chat-text);
    background: var(--chat-surface-soft);
    border: 1px solid transparent;
    border-radius: 14px;
    outline: 0;
}

.chat-composer textarea:focus {
    border-color: var(--cerebr-primary);
    box-shadow: 0 0 0 3px rgba(101, 53, 255, 0.1);
}

.chat-character-count {
    grid-column: 1;
    grid-row: 2;
    padding-left: 0.25rem;
    color: var(--chat-muted);
    font-size: 0.62rem;
}

.chat-send-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1;
    width: 46px;
    height: 46px;
    color: #ffffff;
    font-size: 1rem;
    background: var(--cerebr-gradient);
    border: 0;
    border-radius: 15px;
    box-shadow: 0 10px 22px rgba(101, 53, 255, 0.22);
}

.chat-send-button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.chat-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1200;
    max-width: min(380px, calc(100vw - 2rem));
    padding: 0.85rem 1rem;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    background: #25325a;
    border-radius: 13px;
    box-shadow: 0 16px 34px rgba(10, 15, 34, 0.28);
}

.chat-toast.is-error { background: #a92842; }

html[data-cerebr-theme="dark"] .chat-shell,
html[data-cerebr-theme="batman"] .chat-shell {
    --chat-surface: #171d2b;
    --chat-surface-soft: #202737;
    --chat-border: rgba(205, 214, 235, 0.13);
    --chat-text: #f1f4fb;
    --chat-muted: #b2bdd1;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

html[data-cerebr-theme="batman"] .chat-shell {
    --chat-surface: #15171b;
    --chat-surface-soft: #202329;
    --chat-border: rgba(245, 197, 24, 0.17);
    --chat-text: #f4f4f2;
    --chat-muted: #b9bbc0;
}

/* WhatsTags: contraste explícito de mensajes en Noche y Batman. */
html[data-cerebr-theme="dark"] .chat-message.is-mine .chat-message-bubble p {
    color: #ffffff !important;
}

html[data-cerebr-theme="dark"] .chat-message.is-mine .chat-message-bubble small {
    color: rgba(255, 255, 255, 0.82) !important;
}

html[data-cerebr-theme="batman"] .chat-message.is-mine .chat-message-bubble p {
    color: #111318 !important;
}

html[data-cerebr-theme="batman"] .chat-message.is-mine .chat-message-bubble small {
    color: rgba(17, 19, 24, 0.72) !important;
}

html[data-cerebr-theme="dark"] .chat-message.is-theirs .chat-message-bubble p,
html[data-cerebr-theme="batman"] .chat-message.is-theirs .chat-message-bubble p {
    color: var(--chat-text) !important;
}

html[data-cerebr-theme="dark"] .chat-message.is-theirs .chat-message-bubble small,
html[data-cerebr-theme="batman"] .chat-message.is-theirs .chat-message-bubble small {
    color: var(--chat-muted) !important;
}

html[data-cerebr-theme="dark"] .chat-plan-locked,
html[data-cerebr-theme="batman"] .chat-plan-locked {
    background: var(--cerebr-white);
    border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 767.98px) {
    .chat-shell {
        position: relative;
        display: block;
        height: calc(100dvh - 145px);
        min-height: 520px;
        border-radius: 20px;
    }

    .chat-sidebar,
    .chat-main {
        position: absolute;
        inset: 0;
    }

    .chat-sidebar {
        border-right: 0;
    }

    .chat-main {
        z-index: 2;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform 0.22s ease, visibility 0.22s ease;
    }

    .chat-shell.is-conversation-open .chat-main {
        visibility: visible;
        transform: translateX(0);
    }

    .chat-back-button {
        display: inline-flex;
    }

    .chat-connection-state {
        max-width: 76px;
        text-align: right;
    }

    .chat-message-bubble {
        max-width: 88%;
    }

    .chat-plan-locked {
        align-items: flex-start;
        margin: 0;
        padding: 1.3rem;
    }

    .chat-plan-locked-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }
}

/* =========================================================
   WHATSTAGS · TARJETAS DE RECURSOS · CORRECCION 02
   El bloque base de .chat-composer aparece despues en este CSS;
   estas reglas finales garantizan que el clip quede visible.
   ========================================================= */
.chat-composer {
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    grid-template-rows: auto auto !important;
    align-items: center;
}

.chat-share-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px;
    padding: 0;
    color: var(--cerebr-primary) !important;
    background: var(--chat-surface-soft) !important;
    border: 1px solid var(--chat-border) !important;
    border-radius: 15px !important;
    font-size: 1.15rem;
    cursor: pointer;
    visibility: visible !important;
    opacity: 1 !important;
}

.chat-share-button:hover,
.chat-share-button:focus-visible {
    color: #ffffff !important;
    background: var(--cerebr-gradient) !important;
    outline: none;
}

.chat-composer textarea {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.chat-character-count {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.chat-send-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

@media (max-width: 575.98px) {
    .chat-composer {
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: .3rem .45rem;
        padding-left: .65rem;
        padding-right: .65rem;
    }

    .chat-share-button,
    .chat-send-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
    }
}

/* =========================================================
   WHATSTAGS · BATMAN · CONTRASTE VER / DESCARGAR
   Corrección visual únicamente. No requiere DLL.
   ========================================================= */
html[data-cerebr-theme="batman"] .chat-message.is-mine .chat-resource-actions a {
    color: #111318 !important;
    text-decoration-color: #111318 !important;
    opacity: 1 !important;
}

html[data-cerebr-theme="batman"] .chat-message.is-mine .chat-resource-actions a:hover,
html[data-cerebr-theme="batman"] .chat-message.is-mine .chat-resource-actions a:focus-visible {
    color: #000000 !important;
    text-decoration-thickness: 2px;
}

/* =========================================================
   WHATSTAGS · NOTAS DE VOZ
   Grabación, preescucha y reproducción segura.
   ========================================================= */
.chat-composer {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.chat-share-button {
    grid-column: 1;
}

.chat-voice-button {
    grid-column: 2;
    grid-row: 1;
    width: 42px;
    height: 42px;
    align-self: center;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--chat-primary);
    background: transparent;
    border: 0;
    border-radius: 13px;
    font-size: 1.15rem;
    cursor: pointer;
}

.chat-voice-button:hover,
.chat-voice-button:focus-visible {
    background: rgba(111, 45, 255, .10);
}

.chat-composer textarea {
    grid-column: 3;
}

.chat-character-count {
    grid-column: 3;
}

.chat-send-button {
    grid-column: 4;
}

.chat-voice-panel {
    grid-column: 1 / -1;
    min-height: 54px;
    display: grid;
    grid-template-columns: auto minmax(150px, auto) minmax(180px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 5px 7px;
    border: 1px solid var(--chat-border);
    border-radius: 16px;
    background: var(--chat-soft);
}

.chat-voice-panel[hidden] {
    display: none !important;
}

.chat-voice-cancel,
.chat-voice-stop,
.chat-voice-send,
.chat-audio-play {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
}

.chat-voice-cancel {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--chat-muted);
    background: transparent;
}

.chat-voice-cancel:hover {
    color: #e11d48;
    background: rgba(225, 29, 72, .10);
}

.chat-voice-status {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--chat-text);
    font-size: .8rem;
}

.chat-voice-status strong {
    white-space: nowrap;
}

.chat-voice-status > span:last-child {
    min-width: 42px;
    color: var(--chat-muted);
    font-variant-numeric: tabular-nums;
}

.chat-voice-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .35);
    animation: chatVoicePulse 1.2s infinite;
}

.chat-voice-dot.is-ready {
    background: #22c55e;
    animation: none;
}

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

.chat-voice-preview {
    width: 100%;
    min-width: 0;
    height: 36px;
}

.chat-voice-stop,
.chat-voice-send {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: #fff;
}

.chat-voice-stop {
    background: #ef4444;
}

.chat-voice-send {
    background: var(--cerebr-gradient);
    box-shadow: 0 8px 20px rgba(101, 53, 255, .22);
}

.chat-audio-card {
    min-width: min(280px, 64vw);
}

.chat-audio-row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
}

.chat-audio-play {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .20);
    font-size: 1.25rem;
}

.chat-message.is-theirs .chat-audio-play {
    color: var(--chat-primary);
    background: rgba(101, 53, 255, .10);
}

.chat-audio-info {
    min-width: 80px;
    display: grid;
    gap: 2px;
}

.chat-audio-info strong {
    font-size: .86rem;
}

.chat-audio-info small {
    font-size: .72rem;
}

.chat-audio-element {
    display: none;
}

html[data-cerebr-theme="batman"] .chat-message.is-mine .chat-audio-play {
    color: #111318;
    background: rgba(0, 0, 0, .12);
}

@media (max-width: 575.98px) {
    .chat-composer {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
    }

    .chat-voice-panel {
        grid-template-columns: auto 1fr auto;
    }

    .chat-voice-status {
        grid-column: 2;
    }

    .chat-voice-preview {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .chat-voice-stop,
    .chat-voice-send {
        grid-column: 3;
        grid-row: 1;
    }

    .chat-audio-card {
        min-width: min(230px, 74vw);
    }
}

/* =========================================================
   WHATSTAGS · NOTAS DE VOZ · CORRECCION 02
   Fuerza la cuarta columna del composer para mostrar micrófono.
   ========================================================= */
.chat-composer {
    grid-template-columns: 46px 46px minmax(0, 1fr) 46px !important;
    grid-template-rows: auto auto !important;
}

.chat-share-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.chat-voice-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px;
    padding: 0;
    color: var(--cerebr-primary) !important;
    background: var(--chat-surface-soft) !important;
    border: 1px solid var(--chat-border) !important;
    border-radius: 15px !important;
    font-size: 1.15rem;
    cursor: pointer;
    visibility: visible !important;
    opacity: 1 !important;
}

.chat-voice-button:hover,
.chat-voice-button:focus-visible {
    color: #ffffff !important;
    background: var(--cerebr-gradient) !important;
    outline: none;
}

.chat-composer textarea {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

.chat-character-count {
    grid-column: 3 !important;
    grid-row: 2 !important;
}

.chat-send-button {
    grid-column: 4 !important;
    grid-row: 1 !important;
}

.chat-voice-panel {
    grid-column: 1 / -1 !important;
}

@media (max-width: 575.98px) {
    .chat-composer {
        grid-template-columns: 42px 42px minmax(0, 1fr) 42px !important;
    }

    .chat-share-button,
    .chat-voice-button,
    .chat-send-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
    }
}


/* =========================================================
   WHATSTAGS · ESTADOS DE MENSAJE + ESCRIBIENDO
   ========================================================= */
.chat-typing-state {
    display: block;
    margin-top: 2px;
    color: var(--cerebr-primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.chat-message-meta {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.chat-message-status {
    display: inline-flex;
    align-items: center;
    min-width: 16px;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    opacity: .9;
}

.chat-message-status.is-sent {
    letter-spacing: 0;
    opacity: .72;
}

.chat-message-status.is-delivered {
    opacity: .9;
}

.chat-message-status.is-read {
    color: var(--cerebr-cyan, #24d6e5);
    opacity: 1;
}

html[data-cerebr-theme="dark"] .chat-typing-state,
html[data-cerebr-theme="batman"] .chat-typing-state {
    color: var(--theme-text, #f8fafc);
}

html[data-cerebr-theme="batman"] .chat-message-status.is-read {
    color: #111318;
}


/* =========================================================
   TAGBOT 1.0 - ASISTENTE GLOBAL DE CEREBRAPP
   ========================================================= */
.tagbot-global {
    position: relative;
    z-index: 1080;
}

.tagbot-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1082;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 7px 18px 7px 7px;
    color: #fff;
    font-weight: 900;
    background: var(--cerebr-gradient);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 18px 42px rgba(83, 45, 210, .32);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.tagbot-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 23px 50px rgba(83, 45, 210, .38);
}

.tagbot-launcher-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    font-size: 1.42rem;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
}

.tagbot-launcher-text {
    letter-spacing: -.2px;
}

.tagbot-panel {
    position: fixed;
    right: 24px;
    bottom: 96px;
    z-index: 1081;
    display: flex;
    flex-direction: column;
    width: min(420px, calc(100vw - 32px));
    height: min(650px, calc(100vh - 125px));
    overflow: hidden;
    color: var(--cerebr-text);
    background: rgba(255,255,255,.99);
    border: 1px solid #e5e8f3;
    border-radius: 25px;
    box-shadow: 0 30px 75px rgba(24,30,77,.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.98);
    transform-origin: bottom right;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.tagbot-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.tagbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 68px;
    padding: 12px 14px;
    color: #fff;
    background: var(--cerebr-gradient);
}

.tagbot-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.tagbot-brand > span:last-child {
    min-width: 0;
}

.tagbot-brand strong,
.tagbot-brand small {
    display: block;
    color: #fff;
}

.tagbot-brand strong {
    font-size: 1rem;
    font-weight: 900;
}

.tagbot-brand small {
    margin-top: 2px;
    font-size: .69rem;
    opacity: .9;
}

.tagbot-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: #fff;
    font-size: 1.35rem;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 15px;
}

.tagbot-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    background: #55f29a;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(85,242,154,.14);
}

.tagbot-header-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tagbot-minimize,
.tagbot-close {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #fff;
    font-size: .95rem;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    cursor: pointer;
}

.tagbot-messages {
    flex: 1;
    min-height: 0;
    padding: 18px 16px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 82% 9%, rgba(101,53,255,.08), transparent 27%),
        linear-gradient(180deg,#fbfbff 0%,#f6f7fc 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(101,53,255,.28) transparent;
}

.tagbot-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.tagbot-welcome-bubble {
    position: relative;
    padding: 15px 16px;
    color: #1a2448;
    font-size: .82rem;
    line-height: 1.55;
    background: #fff;
    border: 1px solid #e3e6f0;
    border-radius: 17px;
    box-shadow: 0 8px 22px rgba(39,47,94,.07);
}

.tagbot-welcome-bubble strong,
.tagbot-welcome-bubble span {
    display: block;
}

.tagbot-welcome-bubble strong {
    margin-bottom: 4px;
    color: #111b40;
}

.tagbot-mascot {
    position: relative;
    width: 126px;
    height: 165px;
    margin: 0 auto;
    filter: drop-shadow(0 13px 14px rgba(80,55,180,.19));
}

.tagbot-mascot-antenna {
    position: absolute;
    top: 0;
    left: 53px;
    width: 20px;
    height: 27px;
}

.tagbot-mascot-antenna::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 10px;
    width: 3px;
    height: 18px;
    background: linear-gradient(#6849ff,#9c66ff);
    border-radius: 99px;
}

.tagbot-mascot-antenna span {
    position: absolute;
    top: 0;
    left: 4px;
    width: 13px;
    height: 13px;
    background: radial-gradient(circle at 35% 30%, #c8dcff 0 22%, #7058ff 50%, #512bd9 100%);
    border-radius: 50%;
    box-shadow: 0 0 11px rgba(91,65,255,.45);
}

.tagbot-mascot-head {
    position: absolute;
    top: 23px;
    left: 15px;
    width: 96px;
    height: 83px;
    padding: 9px;
    background: linear-gradient(145deg,#fdfdff 0%,#e9efff 55%,#cbd8ff 100%);
    border: 1px solid rgba(104,75,255,.15);
    border-radius: 38px 38px 32px 32px;
    box-shadow: inset 0 -7px 15px rgba(74,63,180,.10);
}

.tagbot-mascot-face {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 85%, #16336f 0%, #10194b 48%, #09112f 100%);
    border: 4px solid #7563ff;
    border-radius: 30px;
    box-shadow:
        inset 0 0 19px rgba(37,214,255,.18),
        0 0 0 2px rgba(255,255,255,.65);
}

.tagbot-eye {
    position: absolute;
    top: 24px;
    width: 15px;
    height: 18px;
    background: #24e9ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #24e9ff, 0 0 18px rgba(36,233,255,.65);
}

.tagbot-eye-left { left: 19px; }
.tagbot-eye-right { right: 19px; }

.tagbot-smile {
    position: absolute;
    left: 50%;
    top: 48px;
    width: 29px;
    height: 12px;
    border-bottom: 3px solid #5ef4ff;
    border-radius: 0 0 50% 50%;
    transform: translateX(-50%);
}

.tagbot-mascot-neck {
    position: absolute;
    top: 102px;
    left: 53px;
    width: 20px;
    height: 14px;
    background: linear-gradient(90deg,#cfd8f5,#fff,#b9c7ee);
    border-radius: 5px;
}

.tagbot-mascot-body {
    position: absolute;
    top: 112px;
    left: 28px;
    width: 72px;
    height: 50px;
    background: linear-gradient(145deg,#fff 0%,#dce5ff 62%,#bccaf2 100%);
    border: 1px solid rgba(99,70,255,.14);
    border-radius: 25px 25px 18px 18px;
}

.tagbot-mascot-core {
    position: absolute;
    top: 15px;
    left: 27px;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 40% 35%, #73f8ff 0 25%, #4e63ff 45%, #6e35d9 100%);
    border: 3px solid #d8e6ff;
    border-radius: 50%;
    box-shadow: 0 0 9px rgba(80,75,255,.38);
}

.tagbot-mascot-arm {
    position: absolute;
    top: 104px;
    right: 5px;
    width: 20px;
    height: 55px;
    background: linear-gradient(180deg,#eef3ff,#c3d0f5);
    border: 1px solid rgba(99,70,255,.14);
    border-radius: 12px;
    transform: rotate(-27deg);
    transform-origin: bottom center;
}

.tagbot-mascot-arm::after {
    content: "👋";
    position: absolute;
    top: -17px;
    right: -8px;
    font-size: 24px;
    transform: rotate(28deg);
}

.tagbot-help-card {
    display: grid;
    gap: 8px;
    margin: 0 0 16px auto;
    padding: 13px 15px;
    width: calc(100% - 18px);
    color: #27304f;
    font-size: .76rem;
    background: #fff;
    border: 1px solid #e3e6f0;
    border-radius: 16px;
    box-shadow: 0 7px 19px rgba(39,47,94,.05);
}

.tagbot-help-card strong {
    margin-bottom: 2px;
    color: #141e42;
}

.tagbot-help-card span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tagbot-help-card i {
    color: #16b965;
}

.tagbot-help-card small {
    margin-top: 3px;
    color: #505b79;
    font-weight: 700;
}

.tagbot-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 14px;
}

.tagbot-message-user {
    justify-content: flex-end;
}

.tagbot-mini-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: #fff;
    font-size: .9rem;
    background: var(--cerebr-gradient);
    border-radius: 11px;
}

.tagbot-bubble {
    max-width: 83%;
    padding: 12px 14px;
    color: #293252;
    font-size: .82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #fff;
    border: 1px solid #e4e7f2;
    border-radius: 16px 16px 16px 5px;
    box-shadow: 0 6px 18px rgba(39,47,94,.06);
}

.tagbot-message-user .tagbot-bubble {
    color: #fff;
    background: linear-gradient(135deg,#5f34ff,#8f35e9);
    border-color: transparent;
    border-radius: 16px 16px 5px 16px;
    box-shadow: 0 8px 20px rgba(101,64,246,.18);
}

.tagbot-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 17px 10px;
    color: var(--cerebr-muted);
    background: #f6f7fc;
}

.tagbot-typing[hidden] {
    display: none !important;
}

.tagbot-typing span {
    width: 6px;
    height: 6px;
    background: var(--cerebr-primary);
    border-radius: 50%;
    animation: tagbotPulse 1s infinite ease-in-out;
}

.tagbot-typing span:nth-child(2) { animation-delay: .14s; }
.tagbot-typing span:nth-child(3) { animation-delay: .28s; }

.tagbot-typing small {
    margin-left: 5px;
    font-size: .67rem;
}

@keyframes tagbotPulse {
    0%,80%,100% { opacity:.35; transform:translateY(0); }
    40% { opacity:1; transform:translateY(-3px); }
}

.tagbot-composer {
    display: grid;
    grid-template-columns: minmax(0,1fr) 46px;
    gap: 9px;
    padding: 12px 13px 5px;
    background: #fff;
    border-top: 1px solid #e8eaf3;
}

.tagbot-composer textarea {
    width: 100%;
    min-height: 46px;
    max-height: 110px;
    padding: 12px 14px;
    resize: none;
    color: var(--cerebr-text);
    font-size: .82rem;
    line-height: 1.35;
    background: #fff;
    border: 1.5px solid #7c53ff;
    border-radius: 14px;
    outline: none;
}

.tagbot-composer textarea:focus {
    border-color: var(--cerebr-primary);
    box-shadow: 0 0 0 3px rgba(101,53,255,.10);
}

.tagbot-composer button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: #fff;
    background: var(--cerebr-gradient);
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(101,53,255,.18);
}

.tagbot-composer button:disabled {
    opacity: .55;
    cursor: wait;
}

.tagbot-hint {
    padding: 0 13px 5px;
    color: var(--cerebr-primary);
    font-size: .6rem;
    text-align: center;
    background: #fff;
}

.tagbot-footnote {
    padding: 0 13px 11px;
    color: #8a92aa;
    font-size: .61rem;
    text-align: center;
    background: #fff;
}

/* Tema oscuro */
html[data-cerebr-theme="dark"] .tagbot-panel,
html[data-cerebr-theme="batman"] .tagbot-panel {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] .tagbot-messages,
html[data-cerebr-theme="batman"] .tagbot-messages {
    background: var(--theme-bg);
}

html[data-cerebr-theme="dark"] :is(.tagbot-welcome-bubble,.tagbot-help-card,.tagbot-bubble),
html[data-cerebr-theme="batman"] :is(.tagbot-welcome-bubble,.tagbot-help-card,.tagbot-bubble) {
    color: var(--theme-text);
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(.tagbot-welcome-bubble strong,.tagbot-help-card strong),
html[data-cerebr-theme="batman"] :is(.tagbot-welcome-bubble strong,.tagbot-help-card strong) {
    color: var(--theme-text);
}

html[data-cerebr-theme="dark"] .tagbot-message-user .tagbot-bubble {
    color:#fff;
    background:linear-gradient(135deg,#7452ff,#9b45df);
}

html[data-cerebr-theme="batman"] .tagbot-message-user .tagbot-bubble {
    color:#090a0c;
    background:#f5c518;
}

html[data-cerebr-theme="dark"] :is(.tagbot-typing,.tagbot-composer,.tagbot-hint,.tagbot-footnote),
html[data-cerebr-theme="batman"] :is(.tagbot-typing,.tagbot-composer,.tagbot-hint,.tagbot-footnote) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] .tagbot-composer textarea,
html[data-cerebr-theme="batman"] .tagbot-composer textarea {
    color: var(--theme-text);
    background: var(--theme-surface-soft);
    border-color: var(--cerebr-primary);
}

@media (max-width: 575.98px) {
    .tagbot-launcher {
        right: 14px;
        bottom: 14px;
        min-height: 52px;
        padding-right: 14px;
    }

    .tagbot-launcher-icon {
        width: 38px;
        height: 38px;
    }

    .tagbot-panel {
        right: 10px;
        bottom: 76px;
        width: calc(100vw - 20px);
        height: min(620px, calc(100dvh - 92px));
        border-radius: 20px;
    }

    .tagbot-messages {
        padding: 14px 12px;
    }

    .tagbot-welcome {
        grid-template-columns: minmax(0, 1fr) 106px;
    }

    .tagbot-mascot {
        width: 106px;
        transform: scale(.86);
        transform-origin: center;
    }

    .tagbot-bubble {
        max-width: 88%;
    }
}


/* =========================================================
   TAGBOT 1.0 - ROBOT POSTURA FIRME
   Ajuste visual solicitado: sin saludo, brazos simétricos abajo.
   ========================================================= */
.tagbot-mascot-arm,
.tagbot-mascot-arm::after {
    display: none !important;
}

.tagbot-mascot-body::before,
.tagbot-mascot-body::after {
    content: "";
    position: absolute;
    top: 7px;
    width: 15px;
    height: 37px;
    background: linear-gradient(180deg, #f7f9ff 0%, #d9e2fb 58%, #becbf0 100%);
    border: 1px solid rgba(99, 70, 255, .13);
    border-radius: 11px;
    box-shadow: inset 0 -4px 8px rgba(74, 63, 180, .06);
}

.tagbot-mascot-body::before {
    left: -10px;
    transform: rotate(5deg);
}

.tagbot-mascot-body::after {
    right: -10px;
    transform: rotate(-5deg);
}


/* =========================================================
   TAGBOT 1.0 - ADMINISTRACIÓN DE CONOCIMIENTO
   ========================================================= */
.tagbot-admin-page {
    padding: 28px;
}

.tagbot-admin-container {
    width: min(1450px, 100%);
    margin: 0 auto;
}

.tagbot-admin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px;
    margin-bottom: 18px;
    color: #fff;
    background: var(--cerebr-gradient);
    border-radius: 26px;
    box-shadow: var(--cerebr-shadow);
}

.tagbot-admin-hero h1 {
    margin: 5px 0 7px;
    color: #fff;
    font-size: clamp(1.55rem, 2vw, 2.25rem);
    font-weight: 900;
}

.tagbot-admin-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.88);
}

.tagbot-admin-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.tagbot-admin-new {
    flex: 0 0 auto;
    border-radius: 14px;
}

.tagbot-admin-alert {
    margin-bottom: 18px;
    border-radius: 16px;
}

.tagbot-admin-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.tagbot-admin-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e6e8f2);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(24,30,77,.06);
}

.tagbot-admin-summary-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: #fff;
    font-size: 1.15rem;
    background: var(--cerebr-gradient);
    border-radius: 15px;
}

.tagbot-admin-summary-card strong,
.tagbot-admin-summary-card span {
    display: block;
}

.tagbot-admin-summary-card strong {
    color: var(--theme-text, var(--cerebr-text));
    font-size: 1.45rem;
    font-weight: 900;
}

.tagbot-admin-summary-card div > span {
    margin-top: 2px;
    color: var(--theme-muted, var(--cerebr-muted));
    font-size: .78rem;
}

.tagbot-admin-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px;
    background: var(--theme-surface-soft, #f4f5fb);
    border: 1px solid var(--theme-border, #e5e8f2);
    border-radius: 16px;
}

.tagbot-admin-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    color: var(--theme-muted, #68718d);
    font-size: .78rem;
    font-weight: 800;
    border-radius: 12px;
}

.tagbot-admin-tab:hover {
    color: var(--cerebr-primary);
}

.tagbot-admin-tab.is-active {
    color: #fff;
    background: var(--cerebr-gradient);
    box-shadow: 0 8px 18px rgba(101,53,255,.16);
}

.tagbot-admin-tab-badge {
    display: grid;
    place-items: center;
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    color: var(--cerebr-primary);
    background: #fff;
    border-radius: 999px;
}

.tagbot-admin-card,
.tagbot-admin-editor {
    padding: 20px;
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e4e7f0);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(24,30,77,.06);
}

.tagbot-admin-editor {
    margin-bottom: 16px;
}

.tagbot-admin-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.tagbot-admin-section-title > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tagbot-admin-section-title h2 {
    margin: 0;
    color: var(--theme-text, var(--cerebr-text));
    font-size: 1rem;
    font-weight: 900;
}

.tagbot-admin-section-title p {
    margin: 3px 0 0;
    color: var(--theme-muted, var(--cerebr-muted));
    font-size: .73rem;
}

.tagbot-admin-section-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #fff;
    background: var(--cerebr-gradient);
    border-radius: 13px;
}

.tagbot-admin-close-editor {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--theme-muted, #737b93);
    background: var(--theme-surface-soft, #f5f6fb);
    border: 1px solid var(--theme-border, #e4e7f0);
    border-radius: 12px;
}

.tagbot-admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

.tagbot-admin-field-wide {
    grid-column: 1 / -1;
}

.tagbot-admin-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--theme-text, var(--cerebr-text));
    font-size: .72rem;
    font-weight: 800;
}

.tagbot-admin-field small {
    display: block;
    margin-top: 5px;
    color: var(--theme-muted, var(--cerebr-muted));
    font-size: .64rem;
}

.tagbot-admin-textarea {
    min-height: 130px;
    resize: vertical;
}

.tagbot-admin-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.tagbot-admin-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.tagbot-admin-search {
    position: relative;
}

.tagbot-admin-search i {
    position: absolute;
    top: 50%;
    left: 13px;
    color: var(--theme-muted, #838ba0);
    transform: translateY(-50%);
}

.tagbot-admin-search .form-control {
    padding-left: 38px;
}

.tagbot-admin-table-wrap {
    overflow-x: auto;
}

.tagbot-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .73rem;
}

.tagbot-admin-table th {
    padding: 11px 10px;
    color: var(--theme-muted, #6d7690);
    font-size: .63rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--theme-surface-soft, #f6f7fb);
    border-bottom: 1px solid var(--theme-border, #e4e7ef);
}

.tagbot-admin-table td {
    padding: 14px 10px;
    vertical-align: top;
    color: var(--theme-text, var(--cerebr-text));
    border-bottom: 1px solid var(--theme-border, #eceef4);
}

.tagbot-admin-module,
.tagbot-admin-topic,
.tagbot-admin-question,
.tagbot-admin-answer,
.tagbot-admin-keywords {
    display: block;
}

.tagbot-admin-module {
    font-size: .68rem;
    color: var(--cerebr-primary);
}

.tagbot-admin-topic {
    margin-top: 4px;
    color: var(--theme-muted, var(--cerebr-muted));
}

.tagbot-admin-question {
    margin-bottom: 5px;
    font-size: .77rem;
}

.tagbot-admin-answer {
    max-width: 720px;
    color: var(--theme-muted, #59627c);
    line-height: 1.45;
}

.tagbot-admin-keywords {
    margin-top: 7px;
    color: var(--cerebr-primary);
    font-size: .64rem;
}

.tagbot-admin-priority {
    display: inline-flex;
    padding: 5px 9px;
    color: var(--cerebr-primary);
    font-weight: 900;
    background: rgba(101,53,255,.08);
    border-radius: 999px;
}

.tagbot-admin-status {
    display: inline-flex;
    padding: 5px 9px;
    font-size: .64rem;
    font-weight: 900;
    border-radius: 999px;
}

.tagbot-admin-status.is-active {
    color: #09864a;
    background: rgba(22,185,101,.12);
}

.tagbot-admin-status.is-inactive {
    color: #a64b55;
    background: rgba(255,84,108,.11);
}

.tagbot-admin-actions-col {
    width: 105px;
}

.tagbot-admin-actions {
    white-space: nowrap;
}

.tagbot-admin-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 35px;
    height: 35px;
    margin-right: 4px;
    color: var(--cerebr-primary);
    background: rgba(101,53,255,.08);
    border-radius: 10px;
}

.tagbot-admin-empty {
    padding: 40px 20px;
    color: var(--theme-muted, var(--cerebr-muted));
    text-align: center;
}

.tagbot-admin-empty i,
.tagbot-admin-empty strong,
.tagbot-admin-empty span {
    display: block;
}

.tagbot-admin-empty i {
    margin-bottom: 9px;
    color: var(--cerebr-primary);
    font-size: 2rem;
}

.tagbot-admin-empty strong {
    color: var(--theme-text, var(--cerebr-text));
}

.tagbot-admin-empty span {
    margin-top: 4px;
    font-size: .72rem;
}

.tagbot-admin-unanswered-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.tagbot-admin-unanswered {
    padding: 16px;
    background: var(--theme-surface-soft, #f8f8fc);
    border: 1px solid var(--theme-border, #e4e7ef);
    border-radius: 17px;
}

.tagbot-admin-unanswered-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--cerebr-primary);
    font-size: .63rem;
    font-weight: 900;
}

.tagbot-admin-unanswered time {
    color: var(--theme-muted, var(--cerebr-muted));
    font-weight: 600;
}

.tagbot-admin-unanswered > strong {
    display: block;
    margin-bottom: 7px;
    color: var(--theme-text, var(--cerebr-text));
    font-size: .82rem;
}

.tagbot-admin-unanswered > p {
    min-height: 36px;
    margin-bottom: 12px;
    color: var(--theme-muted, #626b83);
    font-size: .69rem;
    line-height: 1.45;
}

html[data-cerebr-theme="dark"] .tagbot-admin-page,
html[data-cerebr-theme="batman"] .tagbot-admin-page {
    color: var(--theme-text);
}

html[data-cerebr-theme="dark"] :is(.tagbot-admin-card,.tagbot-admin-editor,.tagbot-admin-summary-card),
html[data-cerebr-theme="batman"] :is(.tagbot-admin-card,.tagbot-admin-editor,.tagbot-admin-summary-card) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-cerebr-theme="dark"] :is(.tagbot-admin-tabs,.tagbot-admin-unanswered),
html[data-cerebr-theme="batman"] :is(.tagbot-admin-tabs,.tagbot-admin-unanswered) {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

@media (max-width: 991.98px) {
    .tagbot-admin-page {
        padding: 18px;
    }

    .tagbot-admin-toolbar {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .tagbot-admin-search {
        grid-column: 1 / -1;
    }

    .tagbot-admin-unanswered-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .tagbot-admin-page {
        padding: 12px;
    }

    .tagbot-admin-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
        border-radius: 20px;
    }

    .tagbot-admin-summary {
        grid-template-columns: 1fr;
    }

    .tagbot-admin-tabs {
        flex-direction: column;
    }

    .tagbot-admin-tab {
        justify-content: flex-start;
    }

    .tagbot-admin-form-grid,
    .tagbot-admin-toolbar {
        grid-template-columns: 1fr;
    }

    .tagbot-admin-search {
        grid-column: auto;
    }

    .tagbot-admin-editor-actions {
        flex-direction: column-reverse;
    }

    .tagbot-admin-editor-actions .btn {
        width: 100%;
    }

    .tagbot-admin-table,
    .tagbot-admin-table tbody,
    .tagbot-admin-table tr,
    .tagbot-admin-table td {
        display: block;
        width: 100%;
    }

    .tagbot-admin-table thead {
        display: none;
    }

    .tagbot-admin-table tr {
        margin-bottom: 12px;
        padding: 11px;
        background: var(--theme-surface-soft, #fafafe);
        border: 1px solid var(--theme-border, #e6e8f0);
        border-radius: 15px;
    }

    .tagbot-admin-table td {
        padding: 8px 5px;
        border: 0;
    }

    .tagbot-admin-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--theme-muted, #7c849b);
        font-size: .58rem;
        font-weight: 900;
        text-transform: uppercase;
    }
}


/* =========================================================
   TAGBOT ADMIN - BUSCADOR GLOBAL ÚNICO
   ========================================================= */
.tagbot-admin-toolbar.tagbot-admin-toolbar-single {
    display: grid;
    grid-template-columns: 1fr;
}

.tagbot-admin-toolbar.tagbot-admin-toolbar-single .tagbot-admin-search {
    grid-column: 1 / -1;
    width: 100%;
}

.tagbot-admin-toolbar.tagbot-admin-toolbar-single .tagbot-admin-search .form-control {
    width: 100%;
}

/* =========================================================
   CONCEPTOS - FAMILIAS Y NUEVO CONCEPTO A LA MISMA ALTURA
   ========================================================= */
.concepts-page .catalog-layout {
    align-items: stretch;
}

.concepts-page .catalog-layout > .catalog-card {
    height: 100%;
    min-height: 0;
}

.concepts-page .families-list,
.concepts-page .families-list.cerebr-scroll-list,
.concepts-page .cerebr-scroll-list.families-list {
    max-height: 310px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-gutter: stable;
}

@media (max-width: 991.98px) {
    .concepts-page .catalog-layout {
        align-items: start;
    }

    .concepts-page .catalog-layout > .catalog-card {
        height: auto;
    }

    .concepts-page .families-list,
    .concepts-page .families-list.cerebr-scroll-list,
    .concepts-page .cerebr-scroll-list.families-list {
        max-height: 330px;
    }
}

@media (max-width: 575.98px) {
    .concepts-page .families-list,
    .concepts-page .families-list.cerebr-scroll-list,
    .concepts-page .cerebr-scroll-list.families-list {
        max-height: 290px;
    }
}


/* =========================================================
   TAGBOT ADMIN - LISTADO DE CONOCIMIENTO CON SCROLL INTERNO
   Mantiene los 90 registros cargados; sólo limita la altura visual.
   ========================================================= */
.tagbot-admin-table-wrap {
    max-height: 660px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-gutter: stable;
    border-radius: 14px;
}

.tagbot-admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--theme-surface-soft, #f6f7fb);
}

html[data-cerebr-theme="dark"] .tagbot-admin-table thead th,
html[data-cerebr-theme="batman"] .tagbot-admin-table thead th {
    background: var(--theme-surface-soft);
}

@media (max-width: 991.98px) {
    .tagbot-admin-table-wrap {
        max-height: 600px;
    }
}

@media (max-width: 575.98px) {
    .tagbot-admin-table-wrap {
        max-height: 540px;
    }

    .tagbot-admin-table thead th {
        position: static;
    }
}