/* ============================================================
   PANEL DE NAVEGACION
============================================================ */
.theme-settings-panel {
    height: 100%;
    color: var(--neutral-foreground-rest);
    background-color: color-mix( in srgb, var(--foreground-on-accent-rest-large) 35%, var(--neutral-layer-1) 75% );
    transition: background 0.6s ease;
}

.navlink-custom {
    --neutral-fill-stealth-rest: color-mix( in srgb, var(--foreground-on-accent-rest-large) 35%, var(--neutral-layer-1) 75% );
    --neutral-fill-stealth-hover: color-mix( in srgb, var(--foreground-on-accent-rest-large) 35%, var(--neutral-layer-1) 75% );
    color: var(--neutral-foreground-rest);
}

/* ============================================================
  BODY
    background-color: var(--neutral-layer-card-container);
    background-color: var(--foreground-on-accent-rest-large);

    background: var(--foreground-on-accent-rest-large);
    background-image: linear-gradient( 135deg, color-mix(in srgb, var(--foreground-on-accent-rest-large) 90%, var(--accent-fill-rest) 10%), color-mix(in srgb, var(--foreground-on-accent-rest-large) 90%, var(--accent-fill-hover) 10%) );

============================================================ */

.main-content,
.main-content-gf {
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
}

.main-content-tr {
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--neutral-foreground-rest);
    overflow-x: hidden;
}

.main-content {
    position: relative;
    background-color: var(--neutral-layer-1);
    border-left: 1px solid var(--neutral-layer-2);
    overflow-y: auto;
}

.contenedor-global {
    position: relative;
    background-color: var(--neutral-layer-1);
    border-radius: 15px;
    margin: 0px 0px;
    margin-bottom: 10px;
    padding: 0px 0px;
    flex: 1 1 auto;
    min-height: auto;
    height: auto;
}

.contenedor-formulario {
    position: relative;
    background-color: var(--neutral-layer-2);
    border-radius: 15px;
    margin: 0px 10px;
    margin-bottom: 10px;
    padding: 25px;
    flex: 1 1 auto;
    min-height: auto;
    height: auto;
    overflow-y:hidden;
}

.contenedor-tarjeta {
    position: relative;
    background-color: var(--neutral-layer-1);
    margin: 10px 0;
    padding: 5px 10px;
    flex: 1 1 auto;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 200ms ease, box-shadow 200ms ease;
}


/* ============================================================
  FOOTER
============================================================ */
footer {
    background: var(--neutral-layer-4);
    color: var(--neutral-foreground-rest);
    align-items: center;
    padding: 10px;
}

    footer a {
        color: var(--neutral-foreground-rest);
        text-decoration: none;
    }

        footer a:focus {
            outline: 1px dashed;
            outline-offset: 3px;
        }

        footer a:hover {
            text-decoration: underline;
        }



/* CONTENEDOR PRINCIPAL (después del NavMenu) */
.layout-wrapper {
    display: flex;
    height: 100vh; /* asegurar altura completa de la ventana */
    position: relative;
    overflow: hidden;
}


/*
    background: var(--neutral-layer-card-container);
    background-image: linear-gradient( 135deg, color-mix(in srgb, var(--neutral-layer-card-container) 80%, var(--accent-fill-rest) 12%), color-mix(in srgb, var(--foreground-on-accent-rest-large) 70%, var(--accent-fill-hover) 10%) );

*/
/* ============================================================
   PANEL LATERAL — versión responsive
   El panel se posiciona dentro de su contenedor padre (no fixed),
   por eso "left: 0" coincide con el borde del área de contenido
   y no con el navmenu. El ancho ahora se define explícitamente
   por breakpoint (mobile-first) en vez de depender de
   fit-content + min/max-width, que daba un resultado poco
   predecible. Ver notas (*) más abajo para el detalle de cada
   corrección.
   ============================================================ */

.panel-lateral {
    position: absolute;
    left: 0; /* junto al navmenu: el offset ya lo aplica el contenedor padre */
    top: 0;
    box-sizing: border-box; /* (*) asegura que el padding no empuje el ancho más allá del valor definido */
    height: 100%;
    overflow-y: auto;
    z-index: 10; /* no tapa el nav */
    /* (*) "fit-content(100%)" no es una sintaxis válida para `width`
       (esa función solo existe para grid-template-columns/rows), así
       que el navegador la ignoraba y el ancho real quedaba a merced
       del algoritmo "shrink-to-fit" + min/max-width: impredecible
       entre dispositivos. Ahora cada breakpoint define un ancho
       explícito con clamp(mínimo, preferido, máximo). */
    width: clamp(260px, 88vw, 340px);
    /* (*) se quita "align-content: space-between", que no tiene
       ningún efecto sin display:flex/grid (era código muerto).
       Para distribuir el contenido del panel (p.ej. encabezado
       arriba, acciones abajo) se necesita un contenedor flex en
       columna + justify-content, no align-content. */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    background: var(--foreground-on-accent-rest-large);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--foreground-on-accent-rest-large) 90%, var(--accent-fill-rest) 10%), color-mix(in srgb, var(--foreground-on-accent-rest-large) 90%, var(--accent-fill-hover) 10%));
    background-size: 200% 200%;
    border-right: 2px solid color-mix(in srgb, var(--accent-fill-active) 50%, transparent);
    transform: translateX(-105%) scale(0.98);
    /* (*) faltaba esta línea: sin "transition" el cambio de transform
       al alternar la clase .open era instantáneo, sin animación de
       deslizamiento. Se quitó también el "filter: blur(0px)" que
       tenían ambos estados (cerrado y abierto), porque al ser el
       mismo valor en los dos no producía ningún efecto visual; solo
       agregaba costo de composición en GPU sin beneficio. */
    transition: transform var(--grd-duration, 280ms) var(--grd-ease, cubic-bezier(.16, 1, .3, 1));
}

    .panel-lateral.open {
        transform: translateX(0) scale(1);
    }

/* Tablet / pantallas medianas: el panel ya no necesita ocupar
   casi todo el ancho, pero sigue dejando una franja visible del
   overlay para que se note que hay algo detrás */
@media (min-width: 600px) {
    .panel-lateral {
        width: clamp(360px, 55vw, 420px);
        padding: 1.75rem 1.5rem;
    }
}

/* Escritorio: vuelve a la lógica original (hasta 900px), pero
   con un ancho fluido y predecible en vez de min/max-width sueltos */
@media (min-width: 960px) {
    .panel-lateral {
        width: clamp(380px, 30vw, 900px);
        padding: 2rem 1.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panel-lateral {
        transition-duration: .01ms;
    }
}

/* ---------- OVERLAY QUE OCULTA EL PANEL ---------- */
.panel-overlay {
    position: absolute;
    top: 0;
    left: var(--navmenu-width, 260px);
    width: calc(100vw - var(--navmenu-width, 260px));
    height: 100vh;
    z-index: 5; /* debajo del panel */
    transition: opacity 0.3s ease;
}

/* (*) Por debajo de 960px se asume que el navmenu colapsa a un
   menú tipo "hamburguesa" y deja de reservar espacio fijo (patrón
   habitual en layouts con sidebar). Si tu navmenu colapsa en otro
   punto distinto, ajusta este valor para que coincida; si tu CSS
   ya actualiza la variable --navmenu-width de forma dinámica en
   ese breakpoint, esta regla es redundante pero inofensiva. */
@media (max-width: 959.98px) {
    .panel-overlay {
        left: 0;
        width: 100%;
    }
}

/* =========================================================
   SELECT – Estilo Fluent UI REAL (igual a FluentSelect)
   ========================================================= */
select {
    width: 100%;
    min-height: 32px;
    padding: 6px 12px;
    padding-right: 36px;
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 4px;
    font-family: 'Exo2', sans-serif;
    font-size: 14px;
    line-height: 20px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    /* Flecha EXACTA estilo Fluent */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M6 8l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}

    select:hover {
        border-color: rgba(0,0,0,0.07);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
    }

    select:focus {
        outline: none;
        border-color: var(--accent-fill-rest);
        box-shadow: 0 0 0 1px var(--accent-fill-rest);
    }

    select option {
        padding: 8px 12px;
        font-family: 'Exo2', sans-serif;
        font-size: 14px;
    }

/* Contenedor principal */
.layoutMaestro {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.headMaestro {
    flex: 0 0 25vh;
    min-height: 120px;
}

/* Body */
.bodyMaestro {
    flex: 1 1 auto;
    height: 60vh;
    overflow-y: auto;
    padding: 0rem;
    background-color: var(--neutral-fill-input-rest);
}

/* Footer fijo */
.pieMaestro {
    flex: 0 0 15vh;
    position: sticky;
    bottom: 0;
    display: flex;
}

@media (max-height: 600px) {
    .headMaestro {
        flex: 0 0 20vh;
    }

    .pieMaestro {
        flex: 0 0 20vh;
    }

    .bodyMaestro {
        height: auto;
    }
}

/* Animación para el gradiente del panel */
@keyframes subtleGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}