@media screen {
:root {
    --tl-surface: rgba(255, 255, 255, 0.72);
    --tl-surface-strong: rgba(255, 255, 255, 0.88);
    --tl-surface-muted: rgba(248, 250, 252, 0.8);
    --tl-text: #1f2937;
    --tl-text-muted: #4b5563;
    --tl-border: rgba(148, 163, 184, 0.48);
    --tl-primary: #2563eb;
    --tl-primary-hover: #1d4ed8;
    --tl-success: #15803d;
    --tl-danger: #dc2626;
    --tl-warning: #b45309;
    --tl-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

body {
    background-color: #e2e8f0 !important;
    color: var(--tl-text) !important;
    text-shadow: none;
}

.navbar,
.navbar.navbar-dark,
.navbar.bg-dark {
    background: var(--tl-surface-strong) !important;
    border-bottom: 1px solid var(--tl-border);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.1);
}

.navbar-brand,
.navbar .nav-link,
.navbar .nav-link.disabled {
    color: var(--tl-text) !important;
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.text-primary {
    color: var(--tl-primary) !important;
}

.navbar .nav-link.text-danger {
    color: var(--tl-danger) !important;
}

.navbar-toggler {
    border-color: var(--tl-border);
}

.container,
.container-fluid,
.card,
.offcanvas,
.list-group-item,
.dropdown-menu,
.accordion-item {
    background-color: var(--tl-surface) !important;
    border-color: var(--tl-border) !important;
    color: var(--tl-text) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.container {
    box-shadow: var(--tl-shadow);
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu {
    box-shadow: var(--tl-shadow);
}

.modal-content {
    background-color: var(--tl-surface-strong) !important;
    border-color: var(--tl-border) !important;
    color: var(--tl-text) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.accordion-button {
    background-color: var(--tl-surface-muted) !important;
    border-color: var(--tl-border) !important;
    color: var(--tl-text) !important;
}

.bg-dark,
.bg-black,
.bg-secondary {
    background-color: var(--tl-surface-strong) !important;
    color: var(--tl-text) !important;
}

.table-dark,
.table-dark > :not(caption) > * > *,
.table-dark > tbody > tr,
.table-dark > tbody > tr > td,
.table-dark > tbody > tr > th,
table.table-dark tbody tr,
table.table-dark tbody td,
table.table-dark tbody th,
.table-responsive .table-dark,
.table-responsive .table-dark > :not(caption) > * > * {
    background-color: rgba(255, 255, 255, 0.82) !important;
    border-color: var(--tl-border) !important;
    color: var(--tl-text) !important;
}

[style*="background:#000"],
[style*="background: #000"],
[style*="background:#111"],
[style*="background: #111"],
[style*="background:#222"],
[style*="background: #222"],
[style*="background:#333"],
[style*="background: #333"],
[style*="background:#212529"],
[style*="background: #212529"],
[style*="background-color:#000"],
[style*="background-color: #000"],
[style*="background-color:#222"],
[style*="background-color: #222"],
[style*="background-color:#333"],
[style*="background-color: #333"],
[style*="background-color:#212529"],
[style*="background-color: #212529"] {
    background-color: var(--tl-surface-strong) !important;
    color: var(--tl-text) !important;
}

.bg-dark *,
.bg-black *,
.bg-secondary *,
.table-dark *,
[style*="background:#000"] *,
[style*="background: #000"] *,
[style*="background:#111"] *,
[style*="background: #111"] *,
[style*="background:#222"] *,
[style*="background: #222"] *,
[style*="background:#333"] *,
[style*="background: #333"] *,
[style*="background:#212529"] *,
[style*="background: #212529"] * {
    color: inherit;
}

.text-white,
.text-white-50 {
    color: var(--tl-text) !important;
}

.ema-description-text,
.ap-description-text,
.description-text,
[class$="-description-text"],
.text-light {
    color: var(--tl-text-muted) !important;
    text-shadow: none !important;
}

.ema-caja-panel .text-warning {
    color: #92400e !important;
}

body.panel-general .container.mt-4,
body.panel-general .panel-general-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.panel-general .compact-card,
body.panel-general .compact-card:hover {
    box-shadow: none !important;
}

body.panel-general .bg-access {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
}

body.panel-general .bg-cash {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
}

body.panel-general .bg-expenses {
    background: linear-gradient(135deg, #be123c, #fb7185) !important;
}

body.panel-general .bg-monitor {
    background: linear-gradient(135deg, #0369a1, #38bdf8) !important;
}

body.panel-general .bg-stock {
    background: linear-gradient(135deg, #b45309, #f59e0b) !important;
}

body.panel-general .bg-admin {
    background: linear-gradient(135deg, #4f46e5, #818cf8) !important;
}

body.panel-general .bg-costs {
    background: linear-gradient(135deg, #047857, #34d399) !important;
}

body.panel-general .bg-commissions {
    background: linear-gradient(135deg, #c2410c, #fb923c) !important;
}

body.panel-general .compact-card.bg-access,
body.panel-general .compact-card.bg-cash,
body.panel-general .compact-card.bg-expenses,
body.panel-general .compact-card.bg-monitor,
body.panel-general .compact-card.bg-stock,
body.panel-general .compact-card.bg-admin,
body.panel-general .compact-card.bg-costs,
body.panel-general .compact-card.bg-commissions,
body.panel-general .compact-card.bg-access *,
body.panel-general .compact-card.bg-cash *,
body.panel-general .compact-card.bg-expenses *,
body.panel-general .compact-card.bg-monitor *,
body.panel-general .compact-card.bg-stock *,
body.panel-general .compact-card.bg-admin *,
body.panel-general .compact-card.bg-costs *,
body.panel-general .compact-card.bg-commissions * {
    color: #fff !important;
}

/* Keep normal screen content readable even when legacy views force light text. */
body .container [class]:not(:is(.btn, .btn *, .badge, .badge *, .navbar, .navbar *, .nav-link, .nav-link *, .total-cierre-destacado, .total-cierre-destacado *, .tl-total-contrast, .tl-total-contrast *, .fc, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .container :is(h1, h2, h3, h4, h5, h6, p, label, small, legend, td, th, caption, li, pre):not(:is(.btn *, .badge *, .total-cierre-destacado, .total-cierre-destacado *, .tl-total-contrast, .tl-total-contrast *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .modal-content [class]:not(:is(.btn, .btn *, .badge, .badge *, .total-cierre-destacado, .total-cierre-destacado *, .tl-total-contrast, .tl-total-contrast *, .fc, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .modal-content :is(h1, h2, h3, h4, h5, h6, p, label, small, legend, td, th, caption, li, pre):not(:is(.btn *, .badge *, .total-cierre-destacado, .total-cierre-destacado *, .tl-total-contrast, .tl-total-contrast *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)) {
    color: var(--tl-text) !important;
    text-shadow: none !important;
}

body .container .table tbody :is(td, th),
body .container .table thead :is(td, th) {
    color: var(--tl-text) !important;
}

.rm-light,
.rm-light .page-title,
.rm-light .form-label,
.rm-light .note,
.rm-light .meta,
.rm-light .no-results,
.rm-light .table,
.rm-light .table thead th,
.rm-light .table tbody td {
    color: var(--tl-text) !important;
    text-shadow: none !important;
}

.rm-light .card-search {
    background-color: var(--tl-surface-strong) !important;
    border-color: var(--tl-border) !important;
}

.rm-light .form-control,
.rm-light input[type="text"],
.rm-light select {
    background-color: #fff !important;
    border-color: #cbd5e1 !important;
    color: var(--tl-text) !important;
}

.rm-light .form-control::placeholder {
    color: #64748b !important;
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-info,
.btn-dark,
.btn-primary *,
.btn-success *,
.btn-danger *,
.btn-info *,
.btn-dark *,
.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-dark,
.badge.bg-primary *,
.badge.bg-success *,
.badge.bg-danger *,
.badge.bg-info *,
.badge.bg-dark * {
    color: #fff !important;
}

.btn-warning,
.btn-light,
.btn-secondary,
.btn-outline-light,
.btn-white,
.btn.bg-white,
.btn-warning *,
.btn-light *,
.btn-secondary *,
.btn-outline-light *,
.btn-white *,
.btn.bg-white * {
    color: #1e293b !important;
}

.btn.text-white,
.badge.text-white,
.navbar .text-white,
.btn-close-white {
    color: #fff !important;
}

.btn-close-white {
    filter: none;
}

.form-control,
.form-select,
textarea,
select,
input:not([type="checkbox"]):not([type="radio"]) {
    background-color: #fff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    color: var(--tl-text) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus,
input:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.18) !important;
}

/*
 * Algunas vistas heredadas agregan clases locales ".bg-dark"/".text-white" a sus propios
 * inputs/selects/textareas (estilo del tema oscuro previo). Como ".form-control.bg-dark"
 * tiene mayor especificidad que ".form-control" solo, la regla general de arriba no alcanza
 * a normalizarlos al tema claro. Se igualan aquí para que todos los campos luzcan consistentes.
 */
.form-control.bg-dark,
.form-select.bg-dark,
textarea.bg-dark,
select.bg-dark,
input.bg-dark {
    background-color: #fff !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--tl-text) !important;
}

.form-control.bg-dark:focus,
.form-select.bg-dark:focus,
textarea.bg-dark:focus,
select.bg-dark:focus,
input.bg-dark:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.18) !important;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
input:disabled,
textarea:disabled {
    background-color: #e5e7eb !important;
    color: #4b5563 !important;
}

label,
.form-label,
.form-text,
.form-check-label,
.table,
.table > :not(caption) > * > *,
.list-group-item,
.dropdown-item,
.accordion-button,
.modal-title {
    color: var(--tl-text) !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--tl-text);
    --bs-table-striped-bg: rgba(226, 232, 240, 0.58);
    --bs-table-hover-bg: rgba(191, 219, 254, 0.55);
    --bs-table-border-color: var(--tl-border);
    background-color: rgba(255, 255, 255, 0.82) !important;
    border-color: var(--tl-border) !important;
}

.table-responsive,
.table > tbody,
.table > tbody > tr,
.table > tbody > tr > td,
.table > tbody > tr > th {
    background-color: rgba(255, 255, 255, 0.82) !important;
    color: var(--tl-text) !important;
}

.table thead,
.table thead th,
.table-dark,
.table-dark > :not(caption) > * > * {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

.alert-dark,
.list-group-item-dark,
.dropdown-menu-dark,
.accordion-button:not(.collapsed),
.toast,
.popover {
    background-color: var(--tl-surface-strong) !important;
    border-color: var(--tl-border) !important;
    color: var(--tl-text) !important;
}

.btn {
    border: 1px solid transparent;
    border-radius: 0.55rem;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.12);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.48rem 0.9rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
}

.btn:active {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
    transform: translateY(0);
}

.btn-primary,
.btn-info {
    background-color: var(--tl-primary) !important;
    border-color: var(--tl-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-info:hover,
.btn-info:focus-visible {
    background-color: var(--tl-primary-hover) !important;
    border-color: var(--tl-primary-hover) !important;
    color: #fff !important;
}

.btn-success {
    background-color: var(--tl-success) !important;
    border-color: var(--tl-success) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--tl-danger) !important;
    border-color: var(--tl-danger) !important;
    color: #fff !important;
}

.btn-warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #1f2937 !important;
}

.btn-secondary,
.btn-light {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

.btn-outline-light,
.btn-white,
.btn.bg-white,
.btn.btn-light,
a.btn-outline-light,
button.btn-outline-light {
    background-color: rgba(255, 255, 255, 0.88) !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible,
.btn-white:hover,
.btn-white:focus-visible,
.btn.bg-white:hover,
.btn.bg-white:focus-visible {
    background-color: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e3a8a !important;
}

.btn-outline-light *,
.btn-white *,
.btn.bg-white *,
.btn.btn-light * {
    color: inherit !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    background-color: rgba(255, 255, 255, 0.72) !important;
}

body .container .btn[class*="btn-outline-"],
body .modal-content .btn[class*="btn-outline-"] {
    background-color: rgba(255, 255, 255, 0.88) !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

body .container .btn[class*="btn-outline-"] *,
body .modal-content .btn[class*="btn-outline-"] * {
    color: inherit !important;
}

.alert {
    border-width: 1px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.09);
}

.footer,
footer {
    background-color: var(--tl-surface-strong) !important;
    border-top: 1px solid var(--tl-border);
    color: var(--tl-text-muted) !important;
}

/*
 * Legacy views frequently force white text with local !important rules.
 * All normal application content is clear now, so make that text dark.
 * Colored controls are restored immediately below for accessible contrast.
 */
body .container [class]:not(:is(.btn, .btn *, .badge, .badge *, .compact-card, .compact-card *, .survey-btn, .survey-btn *, .total-cierre-destacado, .total-cierre-destacado *, .tl-total-contrast, .tl-total-contrast *, .fc, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .container [style*="color:#fff"]:not(:is(.btn *, .badge *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .container [style*="color: #fff"]:not(:is(.btn *, .badge *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .container [style*="color:white"]:not(:is(.btn *, .badge *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .container [style*="color: white"]:not(:is(.btn *, .badge *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .modal-content [class]:not(:is(.btn, .btn *, .badge, .badge *, .fc, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .modal-content [style*="color:#fff"]:not(:is(.btn *, .badge *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .modal-content [style*="color: #fff"]:not(:is(.btn *, .badge *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .modal-content [style*="color:white"]:not(:is(.btn *, .badge *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .modal-content [style*="color: white"]:not(:is(.btn *, .badge *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)) {
    color: var(--tl-text) !important;
    text-shadow: none !important;
}

body .container :is(h1, h2, h3, h4, h5, h6, p, label, small, legend, td, th, caption, li, pre):not(:is(.btn *, .badge *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)),
body .modal-content :is(h1, h2, h3, h4, h5, h6, p, label, small, legend, td, th, caption, li, pre):not(:is(.btn *, .badge *, .fc *, .bg-dark, .bg-dark *, .table-dark, .table-dark *)) {
    color: var(--tl-text) !important;
    text-shadow: none !important;
}

body .container .btn-primary,
body .container .btn-success,
body .container .btn-danger,
body .container .btn-info,
body .container .btn-dark,
body .modal-content .btn-primary,
body .modal-content .btn-success,
body .modal-content .btn-danger,
body .modal-content .btn-info,
body .modal-content .btn-dark,
body .container .btn-primary *,
body .container .btn-success *,
body .container .btn-danger *,
body .container .btn-info *,
body .container .btn-dark *,
body .modal-content .btn-primary *,
body .modal-content .btn-success *,
body .modal-content .btn-danger *,
body .modal-content .btn-info *,
body .modal-content .btn-dark * {
    color: #fff !important;
}

body .container .btn-warning,
body .container .btn-light,
body .container .btn-secondary,
body .container .btn-outline-light,
body .container .btn-white,
body .container .btn.bg-white,
body .modal-content .btn-warning,
body .modal-content .btn-light,
body .modal-content .btn-secondary,
body .modal-content .btn-outline-light,
body .modal-content .btn-white,
body .modal-content .btn.bg-white,
body .container .btn-warning *,
body .container .btn-light *,
body .container .btn-secondary *,
body .container .btn-outline-light *,
body .container .btn-white *,
body .container .btn.bg-white *,
body .modal-content .btn-warning *,
body .modal-content .btn-light *,
body .modal-content .btn-secondary *,
body .modal-content .btn-outline-light *,
body .modal-content .btn-white *,
body .modal-content .btn.bg-white * {
    color: #1e293b !important;
}

body .container .compact-card,
body .container .compact-card *,
body .container .survey-btn,
body .container .survey-btn * {
    color: #fff !important;
}

body .container .tl-total-contrast,
body .container .tl-total-contrast > th,
body .container .tl-total-contrast > td,
body .container .tl-total-contrast > * > th,
body .container .tl-total-contrast > * > td {
    background-color: #111 !important;
    border-color: #3f3f46 !important;
    color: #ffd700 !important;
    text-shadow: none !important;
}

@media (max-width: 767.98px) {
    .container,
    .container-fluid {
        border-radius: 0.65rem;
        padding: 1rem;
    }

    .btn {
        min-height: 2.5rem;
    }
}

/* Contenedor principal del layout (espacio donde van las tarjetas): gris translúcido */
body > .container.mt-4.animate__animated {
    background-color: rgba(203, 210, 219, 0.15) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

/* Contenedor interno de cada vista (donde van los botones/tarjetas): gris 85% translúcido */
body > .container.mt-4.animate__animated .container,
body > .container.mt-4.animate__animated .container-fluid {
    background-color: rgba(203, 210, 219, 0.15) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

/* Tarjetas de toda la app (sin color propio bg-*): gris 60% translúcido */
.card:not([class*="bg-"]),
.card.bg-dark,
.card.bg-black,
.card.bg-secondary {
    background-color: rgba(203, 210, 219, 0.4) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}
.card:not([class*="bg-"]) > .card-header,
.card:not([class*="bg-"]) > .card-footer,
.card:is(.bg-dark, .bg-black, .bg-secondary) > :is(.card-header, .card-footer) {
    background-color: rgba(203, 210, 219, 0.4) !important;
}
}