/* Cargado globalmente via UNFOLD["STYLES"] (apps/admin_ui/theme.py). */

/* El h3 es el título de cada item de un StackedInline (unfold
   unfold/helpers/edit_inline/stacked_title.html). Fondo más oscuro y acento
   para distinguirlo de los headers de secciones colapsables (bg-base-50). */
[data-inline-type="stacked"] .form-row > h3 {
    background-color: #e4e4e7;
    border-bottom: 1px solid #d4d4d8;
    border-left: 3px solid #c5141c;
}

.dark [data-inline-type="stacked"] .form-row > h3 {
    background-color: #2a2a30;
    border-bottom-color: #3f3f46;
}

.sync-historical-button {
    padding: 5px 14px;
    font-size: 12px;
    line-height: 1.4;
}

/* Unfold dimensiona todo en rem: bajar el font-size raíz escala la UI
   completa en pantallas chicas (1366x768, 1280x720). */
@media (max-width: 1536px), (max-height: 820px) {
    html {
        font-size: 14px;
    }

    /* .container clampea por breakpoints que evalúan rem a los 16px
       iniciales: con el raíz achicado dejaría el contenido angosto y
       centrado con bordes muertos. */
    .container {
        max-width: 100%;
    }

    /* La sidebar de unfold no escala con rem: Alpine le pone el ancho en px
       por inline style (resizable, persistido en localStorage), asi que se
       pisa con !important. El wrapper (ancestro con el mismo inline width)
       se alcanza con :has. */
    #nav-sidebar,
    div:has(> div > #nav-sidebar) {
        width: 220px !important;
    }
}

@media (max-width: 1366px), (max-height: 740px) {
    html {
        font-size: 13px;
    }

    #nav-sidebar,
    div:has(> div > #nav-sidebar) {
        width: 190px !important;
    }
}