/* Shared settings for the application, login and isolated style preview. */
:is(body, .appearance-preview) {
    --appearance-surface: #fff;
    --appearance-text: #122033;
    --appearance-muted: #65758b;
    --appearance-line: #dce3eb;
    --appearance-background: var(--cief-fondo-sistema);
    --appearance-radius: 0px;
    --appearance-accent: #0b7fbd;
    --appearance-accent-hover: #096a9e;
    --appearance-accent-soft: #e6f6fd;
    --appearance-menu: #fff;
    --appearance-menu-text: #122033;
    --appearance-menu-width: 290px;
}
[data-color-acento="indigo"] { --appearance-accent: #5144ad; --appearance-accent-hover: #403588; --appearance-accent-soft: #eeebfc; }
[data-color-acento="verde"] { --appearance-accent: #227044; --appearance-accent-hover: #195735; --appearance-accent-soft: #e8f4ec; }
[data-color-acento="petroleo"] { --appearance-accent: #166779; --appearance-accent-hover: #104e5c; --appearance-accent-soft: #e5f3f5; }
[data-tema-visual="institucional"] { --appearance-surface: #fff; --appearance-line: #cedeea; }
[data-tema-visual="moderno"] { --appearance-surface: #fff; --appearance-line: #dce3f1; --appearance-background: #f0f3fa; }
[data-tema-visual="minimalista"] { --appearance-surface: #fff; --appearance-line: #e1e1e1; --appearance-background: #fafafa; }
[data-tema-visual="oscuro"] {
    color-scheme: dark;
    --appearance-surface: #1c2b3e;
    --appearance-text: #edf3fa;
    --appearance-muted: #b4c3d5;
    --appearance-line: #41516a;
    --appearance-background: #101b2b;
    --appearance-menu: #142135;
    --appearance-menu-text: #edf3fa;
    --cief-tinta: #edf3fa;
    --cief-tinta-suave: #b4c3d5;
    --cief-azul-marino: #edf3fa;
}
[data-menu-tono="claro"] { --appearance-menu: #fff; --appearance-menu-text: #122033; }
[data-menu-tono="oscuro"] { --appearance-menu: #142135; --appearance-menu-text: #edf3fa; }
[data-menu-ancho="compacto"] { --appearance-menu-width: 250px; }
[data-tamano-texto="pequeno"] { font-size: 14px; }
[data-tamano-texto="normal"] { font-size: 16px; }
[data-tamano-texto="grande"] { font-size: 18px; }
[data-tamano-texto] :is(.form-control, .form-select, .btn, .form-label, .table) { font-size: 1em; }
[data-bordes-visual="rectos"] { --appearance-radius: 0px; }
[data-bordes-visual="suaves"] { --appearance-radius: 8px; }
[data-bordes-visual="redondeados"] { --appearance-radius: 18px; }
[data-bordes-visual]:not([data-bordes-visual="actual"]) :is(.card, .form-control, .form-select, .modal-content, .alert, .dropdown-menu) { border-radius: var(--appearance-radius) !important; }
[data-sombras-visual="ninguna"] :is(.card, .auth-card, .auth-shell, .modal-content, .app-sidebar) { box-shadow: none; }
[data-sombras-visual="sutiles"] :is(.card, .auth-card, .auth-shell, .modal-content) { box-shadow: 0 4px 16px #071a3710; }
[data-sombras-visual="marcadas"] :is(.card, .auth-card, .auth-shell, .modal-content) { box-shadow: 0 12px 32px #071a3728; }
[data-densidad-visual="compacta"] .card-body { padding: 14px; }
[data-densidad-visual="compacta"] :is(.table > :not(caption) > * > *, .form-control, .form-select) { padding-block: 6px; }
[data-densidad-visual="comoda"] .card-body { padding: 28px; }
[data-densidad-visual="comoda"] :is(.table > :not(caption) > * > *, .form-control, .form-select) { padding-block: 14px; }

body[data-tema-visual]:not([data-tema-visual="actual"]):not(.auth-page) { background: var(--appearance-background); color: var(--appearance-text); }
[data-tema-visual]:not([data-tema-visual="actual"]) :is(.card, .card-header, .card-footer, .modal-content, .dropdown-menu, .app-topbar, .auth-card, .cief-login .auth-shell) {
    background: var(--appearance-surface) !important;
    color: var(--appearance-text);
    border-color: var(--appearance-line);
}
[data-tema-visual]:not([data-tema-visual="actual"]) :is(.form-control, .form-select, .input-group-text) { background-color: var(--appearance-surface); color: var(--appearance-text); border-color: var(--appearance-line); }
[data-tema-visual="oscuro"] :is(.text-secondary, .text-muted, .form-text, .auth-title span) { color: var(--appearance-muted) !important; }
[data-tema-visual="oscuro"] :is(.bg-white, .bg-light, .user-menu-header, .user-menu-status, .user-button, .user-menu, .auth-shell) { background: var(--appearance-surface) !important; color: var(--appearance-text); }
[data-tema-visual="oscuro"] :is(.dropdown-item, .modal-title, .page-title, .form-label) { color: var(--appearance-text); }
[data-tema-visual="oscuro"] .dropdown-item:hover { background: #2e4058; }
[data-tema-visual="oscuro"] .table { --bs-table-color: #edf3fa; --bs-table-bg: #1c2b3e; --bs-table-striped-bg: #24354a; --bs-table-striped-color: #edf3fa; --bs-table-hover-bg: #30435c; --bs-table-hover-color: #fff; border-color: #41516a; }
[data-tema-visual="oscuro"] .table :is(th, td) { color: var(--bs-table-color); background-color: var(--bs-table-bg); border-color: #41516a; }
[data-tema-visual="oscuro"] .form-control::placeholder { color: #b4c3d5; }
[data-tema-visual="oscuro"] .btn-light { background: #293c54; color: #edf3fa; border-color: #41516a; }
[data-tema-visual="oscuro"] .text-primary { color: #85cdff !important; }
[data-tema-visual="oscuro"] .btn-close { filter: invert(1) grayscale(100%); }
[data-tema-visual="oscuro"] .login-visual::after { background: var(--appearance-surface); }
[data-tema-visual="oscuro"].cief-login .password-control .btn { background: var(--appearance-surface); color: var(--appearance-text); border-color: var(--appearance-line); }

[data-color-acento] .btn-primary {
    --bs-btn-bg: var(--appearance-accent);
    --bs-btn-border-color: var(--appearance-accent);
    background: var(--appearance-accent);
    border-color: var(--appearance-accent);
    color: #fff;
}
[data-color-acento] .btn-primary:is(:hover, :active, :focus-visible) { background: var(--appearance-accent-hover); border-color: var(--appearance-accent-hover); color: #fff; }
[data-color-acento]:not([data-tema-visual="oscuro"]) .text-primary { color: var(--appearance-accent) !important; }
[data-color-acento] .btn-outline-primary { color: var(--appearance-accent); border-color: var(--appearance-accent); }
[data-color-acento] .btn-outline-primary:hover { background: var(--appearance-accent); color: #fff; }
[data-color-acento] :is(.form-control, .form-select):focus { border-color: var(--appearance-accent); box-shadow: 0 0 0 3px var(--appearance-accent-soft); }
[data-color-acento] .form-check-input:checked { background-color: var(--appearance-accent); border-color: var(--appearance-accent); }
[data-menu-tono] :is(.app-sidebar, .app-mobile-menu, .appearance-demo-menu) { background: var(--appearance-menu); color: var(--appearance-menu-text); }
[data-menu-tono] :is(.sidebar-nav a, .app-brand strong, .app-brand small) { color: var(--appearance-menu-text); }
[data-menu-tono] .sidebar-nav a:hover { color: var(--appearance-accent); background: var(--appearance-accent-soft); }
[data-menu-activo="solido"] :is(.sidebar-nav a.active, .appearance-demo-active) { background: var(--appearance-accent); color: #fff; }
[data-menu-activo="linea"] :is(.sidebar-nav a.active, .appearance-demo-active) { background: var(--appearance-accent-soft); color: var(--appearance-accent); box-shadow: inset 4px 0 var(--appearance-accent); border-radius: 4px; }
@media (min-width: 992px) {
    [data-menu-ancho] .app-sidebar { width: var(--appearance-menu-width); }
    [data-menu-ancho] .app-main { padding-left: var(--appearance-menu-width); }
    [data-menu-ancho="compacto"] .app-brand { min-width: 0; }
}
[data-login-diseno="centrado"].cief-login .auth-shell { display: block; width: min(100%, 520px); min-height: auto; }
[data-login-diseno="centrado"] .login-visual { display: none; }
[data-login-diseno="centrado"] .auth-title > p { display: block; }
[data-logo-login="grande"].auth-page .auth-brand img { width: 160px; height: 160px; }

[data-animaciones-visual="sutiles"] { --appearance-duration: 160ms; --appearance-distance: 3px; }
[data-animaciones-visual="moderadas"] { --appearance-duration: 280ms; --appearance-distance: 8px; }
[data-animaciones-visual]:not([data-animaciones-visual="ninguna"]) :is(.btn, .sidebar-nav a) { transition: background-color var(--appearance-duration), box-shadow var(--appearance-duration); }
[data-animaciones-visual]:not([data-animaciones-visual="ninguna"]) :is(.app-shell, .auth-card, .dropdown-menu.show, .appearance-demo-content) { animation: appearance-enter var(--appearance-duration) ease-out; }
@keyframes appearance-enter { from { opacity: .5; transform: translateY(var(--appearance-distance)); } to { opacity: 1; transform: none; } }
[data-animaciones-visual="ninguna"] :is(.btn, .sidebar-nav a, .modal, .modal-dialog, .offcanvas, .collapsing, .fade, .dropdown-menu) { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    body *, body *::before, body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.appearance-preview { display: grid; grid-template-columns: minmax(120px, 25%) 1fr; overflow: hidden; border: 1px solid var(--appearance-line); border-radius: 16px; background: var(--appearance-background); color: var(--appearance-text); font-family: var(--cief-fuente-base); }
.appearance-preview h4 { font-family: var(--cief-fuente-titulos); }
.appearance-demo-menu { display: flex; flex-direction: column; gap: 8px; padding: 20px 12px; }
.appearance-demo-menu strong { padding: 12px; margin-bottom: 12px; }
.appearance-demo-menu span { display: block; padding: 12px; border-radius: 8px; overflow-wrap: anywhere; }
.appearance-demo-active { background: var(--appearance-accent-soft); color: var(--appearance-accent); }
.appearance-demo-content { min-width: 0; padding: 24px; }
.appearance-preview .card { margin: 0; }
@media (max-width: 575.98px) {
    .appearance-preview { grid-template-columns: 1fr; }
    .appearance-demo-menu { flex-direction: row; flex-wrap: wrap; padding: 10px; }
    .appearance-demo-menu strong { width: 100%; margin: 0; }
    .appearance-demo-content { padding: 14px; }
}
@media print {
    body[data-tema-visual="oscuro"] { background: #fff; color: #000; }
    body[data-tema-visual="oscuro"] :is(.card, .card-body, .table, th, td) { background: #fff !important; color: #000 !important; }
}