/* Ambientación optativa: decoraciones recortadas, nunca controles dibujados.
   No modifica tablas, permisos, navegación ni el tema del contenido. */

/* MENÚ LATERAL */
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar {
    --sidebar-bg: #100e0d;
    --sidebar-surface: #17120f;
    --sidebar-hover: #352115;
    --sidebar-active: #4a2814;
    --sidebar-text: #fff3d9;
    --sidebar-muted: #e4d2bd;
    --sidebar-accent: #ffab56;
    --sidebar-border: #ba6a2d;
    background-color: var(--sidebar-bg);
    background-image: url('../img/ambientaciones/dia-muertos/sidebar-fondo.jpg?v=1');
    /* Mostrar el fondo completo arriba del cuadro de usuario, sin pasar por detrás. */
    background-size: var(--mac-sidebar-width) max(1px, calc(100% - var(--mac-sidebar-footer-height, 0px)));
    background-position: left top;
    background-repeat: no-repeat;
    border-right-color: var(--sidebar-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3), inset -1px 0 var(--sidebar-border);
}
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar::before,
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar::after { display: none; animation: none; }
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar__header { padding-top: 48px; }
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar #content_container {
    background: transparent;
    /* Dejar visible la escena inferior; las opciones siguen desplazándose arriba. */
    padding-bottom: clamp(80px, calc((100dvh - var(--mac-sidebar-footer-height, 0px)) * .2), 190px);
}
/* Opciones transparentes: conservar visible el fondo, sin recuadros. */
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar .mac-nav__row {
    background: transparent;
    border: 0;
    box-shadow: none;
}
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar .mac-nav__row:hover { background: rgba(255, 171, 86, .12); }
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar .mac-nav__item.is-current > .mac-nav__row {
    background: rgba(255, 171, 86, .18);
    box-shadow: none;
}
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar #iconMac { filter: brightness(0) saturate(100%) invert(71%) sepia(49%) saturate(1510%) hue-rotate(332deg) brightness(101%) contrast(101%); }
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar .mac-sidebar__wordmark { color: var(--sidebar-text); }
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar .mac-sidebar__search { background: #17120f; border-color: var(--sidebar-accent); }
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar .mac-sidebar__search:focus-within { box-shadow: 0 0 0 3px rgba(255, 171, 86, .25); }
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar .mac-nav__icon,
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar .mac-sidebar__search > svg,
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar .mac-sidebar__profile-chevron { color: var(--sidebar-text); }
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar .mac-sidebar__icon-button { background: #17120f; color: var(--sidebar-text); }
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar #user_image { border-color: var(--sidebar-accent); }
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar-layout #mnu .mac-sidebar__logout {
    background: #17120f;
    border-color: var(--sidebar-accent);
    color: var(--sidebar-text);
}
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar button:focus-visible,
html[data-ambientacion-menu="dia-muertos"] .mac-sidebar a:focus-visible { outline-color: var(--sidebar-accent); }

/* BARRA SUPERIOR: paleta local; no se hereda a los reportes. */
@media screen {
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header {
        --text-color: #fff3d9;
        --text-muted: #e4d2bd;
        --element-background-color: #17120f;
        --element-background-color-rgba: rgba(23, 18, 15, .98);
        --element-background-color-secondary: #241a13;
        --element-background-color-tertiary: #352115;
        --input-background-color: #17120f;
        --input-background-disabled: #241a13;
        --input-border: 1px solid #ba6a2d;
        --border-primary: #87502b;
        --border-secondary: #ba6a2d;
        --border-subtle: #ba6a2d;
        --surface-hover: #352115;
        --primary-readable-color: #ffab56;
        --focus-ring: rgba(255, 171, 86, .4);
        color: var(--text-color);
        color-scheme: dark;
        background-color: #100e0d;
        background-image: url('../img/ambientaciones/dia-muertos/topbar-fondo.jpg?v=1');
        /* Recurso a doble resolución: no estirarlo cuando la barra cambia de tamaño. */
        background-size: 1920px 47px;
        background-position: left top;
        background-repeat: no-repeat;
        border-bottom-color: var(--border-secondary);
        box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    }
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .topbar,
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-toolbar-shell { background: transparent; }
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-toolbar__center-select { background: var(--input-background-color); color: var(--text-color); }
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-toolbar__button,
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-toolbar__group .mac-toolbar__button.btn,
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-suite-trigger {
        border-color: var(--border-secondary) !important;
        background: #17120f !important;
    }
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-toolbar__button:hover,
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-toolbar__button:focus-visible,
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-toolbar__group .mac-toolbar__button.btn:hover,
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-toolbar__group .mac-toolbar__button.btn:focus-visible,
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-suite-trigger:hover,
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header .mac-suite-trigger:focus-visible {
        background: var(--surface-hover) !important;
        color: var(--primary-readable-color) !important;
        border-color: var(--primary-readable-color) !important;
    }
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header :is(.profile-image, .mac-page-header__toggle, .mac-mobile-menu-trigger):focus-visible { outline: 2px solid #ffab56; outline-offset: 2px; }
}

/* LOGIN: campos y botones reales sobre un marco sin interfaz incrustada. */
html[data-ambientacion-login="dia-muertos"] body { background: #160914; color: #fff3d9; }
html[data-ambientacion-login="dia-muertos"] body .contenedor-principal {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding: clamp(20px, 4vw, 56px);
}
html[data-ambientacion-login="dia-muertos"] body .background { background: #160914 url('../img/ambientaciones/dia-muertos/fondo-login.jpg?v=4') center / cover no-repeat; }
html[data-ambientacion-login="dia-muertos"] body .background > div { display: none; }
html[data-ambientacion-login="dia-muertos"] body .contendor-contenido {
    width: min(1440px, 100%);
    min-height: min(640px, calc(100svh - 112px));
    margin: 0 auto;
    padding: 80px 40px 100px;
    grid-template-columns: 54% 46%;
    border: 1px solid #c68b29;
    border-radius: 30px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html[data-ambientacion-login="dia-muertos"] body .contendor-contenido::before,
html[data-ambientacion-login="dia-muertos"] body .contendor-contenido::after { display: none; animation: none; }
html[data-ambientacion-login="dia-muertos"] body .login-halloween-decor {
    display: none;
}
html[data-ambientacion-login="dia-muertos"] body .contendor-contenido > .imagen,
html[data-ambientacion-login="dia-muertos"] body .contendor-contenido > .login-section { position: relative; z-index: 1; }
html[data-ambientacion-login="dia-muertos"] body .contendor-contenido .imagen { gap: 28px; }
html[data-ambientacion-login="dia-muertos"] body #logo-login { width: 92% !important; max-width: 640px !important; }
html[data-ambientacion-login="dia-muertos"] body .login-section > form { width: 100% !important; max-width: 480px; }
html[data-ambientacion-login="dia-muertos"] body .contendor-contenido .pnl_login {
    max-width: none;
    padding: 32px 26px 24px;
    border: 1px solid #e6a52d;
    background: #260e21;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    color-scheme: dark;
}
html[data-ambientacion-login="dia-muertos"] body .pnl_login .title-login { color: #fff3d9; font-size: clamp(26px, 2.5vw, 36px); margin-bottom: 28px; }
html[data-ambientacion-login="dia-muertos"] body .pnl_login .input-style {
    height: 52px;
    min-height: 52px;
    border: 1px solid #e6a52d;
    background: #3b1c32;
    color: #fff3d9;
    font-size: 16px;
}
html[data-ambientacion-login="dia-muertos"] body .pnl_login .input-style::placeholder { color: #ead7c2; }
html[data-ambientacion-login="dia-muertos"] body .pnl_login .input-style:focus { box-shadow: 0 0 0 3px rgba(255, 189, 73, .3); }
html[data-ambientacion-login="dia-muertos"] body .pnl_login .login-password-toggle { color: #fff3d9; }
html[data-ambientacion-login="dia-muertos"] body .pnl_login .login-password-toggle:hover { background: #58301f; }
html[data-ambientacion-login="dia-muertos"] body .pnl_login .btn-login { background: #ff9a08; color: #241019; font-size: 17px; font-weight: 700; text-shadow: none; }
html[data-ambientacion-login="dia-muertos"] body .pnl_login .btn-login:hover { background: #ffb128; transform: none; filter: none; }
html[data-ambientacion-login="dia-muertos"] body .login-recovery .btn-link { color: #ffcf70; }
html[data-ambientacion-login="dia-muertos"] body .pnl_login :is(button, input):focus-visible { outline: 2px solid #ffcf70; outline-offset: 3px; }

/* Zona invisible sobre la calavera del fondo; no participa en el formulario. */
.muertos-calavera { display: none; }
html[data-ambientacion-login="dia-muertos"] .muertos-calavera:not([hidden]) {
    display: block;
    position: absolute;
    z-index: 3;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 20%;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
}
html[data-ambientacion-login="dia-muertos"] .muertos-calavera:focus-visible { outline: 2px solid #ffcf70; outline-offset: -3px; }
.muertos-sorpresa {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: 0;
    padding: 48px 16px 16px;
    overflow: auto;
    border: 1px solid #e6a52d;
    border-radius: 16px;
    background: #260e21;
    color: #fff3d9;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
}
.muertos-sorpresa:not([open]) { display: none; }
.muertos-sorpresa::backdrop { background: rgba(0, 0, 0, .78); }
.muertos-sorpresa img { display: block; width: 100%; max-height: calc(100dvh - 112px); object-fit: contain; }
.muertos-sorpresa__cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.muertos-sorpresa__cerrar:hover { background: #472039; }
.muertos-sorpresa__cerrar:focus-visible { outline: 2px solid #ffcf70; outline-offset: 1px; }

@media (max-width: 849px) {
    html[data-ambientacion-login="dia-muertos"] body .contenedor-principal { padding: 16px; }
    html[data-ambientacion-login="dia-muertos"] body .contendor-contenido {
        width: min(100%, 560px);
        min-height: calc(100svh - 32px);
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 64px 22px 70px;
    }
    html[data-ambientacion-login="dia-muertos"] body .contendor-contenido .imagen { gap: 16px; }
    html[data-ambientacion-login="dia-muertos"] body .contendor-contenido .pnl_login { padding: 26px 18px 20px; }
}
@media print {
    .muertos-calavera, .muertos-sorpresa { display: none !important; }
    html[data-ambientacion-menu="dia-muertos"] .mac-sidebar,
    html[data-ambientacion-barra-superior="dia-muertos"] .mac-page-header { background-image: none; box-shadow: none; }
}