html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* ========================================================= */
/* BUTTONS (.btn-amedida): color corporativo                 */
/* ========================================================= */
/* Variables y alias de marca definidos en suite-palette.css. */

/* Boton personalizado con color corporativo */
.btn-amedida {
    background-color: var(--suite-btn-brand);
    border-color: var(--suite-shell-primary-border);
    color: var(--suite-btn-text);
    border-radius: 12px;
}

    /* Hover y pulsacion con un tono ligeramente mas oscuro */
    .btn-amedida:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
        background-color: var(--suite-btn-brand-hover);
        border-color: var(--suite-btn-brand-hover);
        color: var(--suite-shell-primary-hover-text);
    }
    .btn-amedida:not(:disabled):not(.disabled):not([aria-disabled="true"]):active { color: var(--suite-shell-primary-active-text); background: var(--suite-shell-primary-active); border-color: var(--suite-shell-primary-active); }

/* ========================================================= */
/* BASE / APP BACKGROUNDS                                    */
/* ========================================================= */
:root {
    --suite-app-bg-light: var(--suite-color-background);
}

/* Por defecto (tema claro): fondo blanco */
app {
    display: block;
    height: 100%;
    min-height: 100vh;
    background-color: var(--suite-app-bg-light);
}

/* Pantallas de autenticacion: transparente para que se vea la imagen del body */
app:has(#logon-template-component),
app:has(.suite-auth-bg) {
    background-color: transparent !important;
}

/* 5. El logo del header sigue donde estaba pero ahora sobre fondo oscuro */
.header-logo {
    flex-shrink: 0;
    background: url('../images/branding/ibness-provisional.svg') center / contain no-repeat;
    width: 180px;
    height: 32px;
    margin-left: 24px;
}

/* Override en nuestra barra superior: logo alineado a la izquierda,
   sin el margin-left de la cabecera nativa. */
.amedida-topbar__logo .header-logo {
    width: 150px;
    height: 30px;
    margin-left: 0;
    background-position: left center;
}

/* Los estilos de acceso se centralizan en suite-auth.css. */

/* ========================================================= */
/* SPLASH / LOADING PANEL                                    */
/* ========================================================= */
#loadingBackground {
    background-color: transparent !important;
    background: transparent !important;
}

/* Anillos del spinner: color corporativo */
#applicationLoadingPanel .loading-border {
    border-color: rgba(var(--suite-color-primary-rgb), 0.25) !important;
}

/* Icono central del splash screen más grande */
#applicationLoadingPanel .loading-image {
    width: 160px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Modo claro: fondo blanco */
body:not(.dxbl-theme-dark) #loadingBackground {
    background-color: var(--suite-app-bg-light) !important;
}

/* Splash screen / pantalla de carga de XAF Blazor */
#applicationLoadingPanel {
    background: transparent !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

    /* Icono central del splash screen */
    #applicationLoadingPanel .loading-image {
        width: 160px !important;
        height: auto !important;
        object-fit: contain !important;
        flex: 0 0 auto !important;
    }

    /* Descriptor del producto bajo el recurso de marca local. */
    #applicationLoadingPanel .loading-caption {
        font-size: 15px !important;
        color: var(--suite-color-text) !important;
        background: none;
        width: auto !important;
        height: auto !important;
        display: block !important;
        opacity: 1 !important;
        position: static !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

 /* =========================================================
   HEADER ACTIONS REUBICADAS (tema + panel de usuario XAF)
   ========================================================= */
#suite-header-actions-slot {
    display: flex;
    align-items: center;
    gap: 6px;
}

    #suite-header-actions-slot .xaf-header-actions {
        margin-left: 0 !important;
    }

    #suite-header-actions-slot .account-container {
        padding-left: 0 !important;
        position: relative;
    }

    #suite-header-actions-slot .theme-button,
    #suite-header-actions-slot .account-button {
        display: flex;
        align-items: center;
    }

    /* El componente nativo de ajustes se integra en suite-xaf-shell.css. */

    /* -------------------------------------------------------
       Avatar de iniciales (inyectado por suiteHeaderActions.js
       sobre el .account-button nativo de XAF)
       ------------------------------------------------------- */
    .suite-avatar-initials {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: var(--suite-shell-primary);
        color: var(--suite-shell-primary-text);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        user-select: none;
        flex-shrink: 0;
        cursor: pointer;
    }

    /* -------------------------------------------------------
       Chip de empresa (creado por empresa-badge.js)
       Color TEAL del logo Vetta 360 (decisión de diseño:
       avatar = navy --suite-rust, chip = teal, para que NO
       compitan y ambos deriven de la marca).
       ------------------------------------------------------- */
    #suite-empresa-wrapper {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-right: 4px;
    }

    #suite-empresa-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 999px;
        /* Teal del logo (deriva de --suite-chip-teal / -rgb) */
        background-color: var(--suite-shell-accent-soft);
        color: var(--suite-shell-link);
        border: 1px solid var(--suite-shell-border);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        white-space: nowrap;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;

        cursor: default;
        user-select: none;
    }

    /* ========================================================= */
    /* GRID / LISTVIEW SEPARATORS (light & dark border colors)   */
    /* ========================================================= */
:root {
    --suite-grid-border-light: rgba(0, 0, 0, 0.14);
}

/* Separadores suaves tambien en modo Light */
body:not(.dxbl-theme-dark) .dxbl-grid .dxbl-grid-table,
body:not(.dxbl-theme-dark) .dxbl-grid .dxbl-grid-table > :not(caption) > * > *,
body:not(.dxbl-theme-dark) .dxbl-grid .dxbl-grid-table > tbody > tr > td,
body:not(.dxbl-theme-dark) .dxbl-grid .dxbl-grid-table > thead > tr > th,
body:not(.dxbl-theme-dark) .app .dxbl-toolbar,
body:not(.dxbl-theme-dark) .app .dxbl-toolbar .dxbl-btn,
body:not(.dxbl-theme-dark) .app .dxbl-toolbar .dxbl-edit,
body:not(.dxbl-theme-dark) .app .dxbl-toolbar .dxbl-text-edit,
body:not(.dxbl-theme-dark) .app .dxbl-toolbar .dxbl-combobox,
body:not(.dxbl-theme-dark) .app .dxbl-toolbar .dxbl-dropdown,
body:not(.dxbl-theme-dark) .app .dxbl-toolbar .dxbl-btn-group,
body:not(.dxbl-theme-dark) .app .dxbl-toolbar .dxbl-toolbar-item,
body:not(.dxbl-theme-dark) .app .dxbl-toolbar .dxbl-toolbar-separator,
body:not(.dxbl-theme-dark) .app .dxbl-toolbar .dxbl-toolbar-placeholder {
    border-color: var(--suite-grid-border-light) !important;
}

/* ========================================================= */
/* GRID ROW HOVER                                            */
/* ========================================================= */
:root {
    --suite-grid-row-hover: var(--suite-color-primary);
    --suite-grid-row-hover-rgb: var(--suite-color-primary-rgb);
}

.dxbl-grid-table > tbody > tr:hover > td,
.dxbl-grid-table > tbody > tr:hover > th {
    background-color: rgba(var(--suite-grid-row-hover-rgb), 0.10) !important;
    cursor: pointer !important;
}

/* ========================================================= */
/* SIDEBAR SEARCH BOX (light & dark)                         */
/* ========================================================= */
:root {
    --suite-sidebar-search-bg-light: rgba(0, 0, 0, 0.035);
    --suite-sidebar-search-border-light: rgba(0, 0, 0, 0.14);
    --suite-sidebar-search-focus-bg-light: rgba(0, 0, 0, 0.055);
    --suite-sidebar-search-focus-border-light: rgba(var(--suite-color-primary-rgb), 0.55);
}

/* Buscador nativo sin subrayado decorativo permanente. */
.app .sidebar .dxbl-accordion-group-header[role="search"] {
    --dxbl-text-edit-underline-color: transparent;
    --dxbl-text-edit-underline-focused-color: transparent;
}

    .app .sidebar .dxbl-accordion-group-header[role="search"] .dxbl-text-edit {
        position: relative;
        overflow: hidden;
        border-radius: 8px !important;
        padding-left: 6px;
        padding-right: 6px;
    }

/* Light */
body:not(.dxbl-theme-dark) .app .sidebar .dxbl-accordion-group-header[role="search"] .dxbl-text-edit {
    background-color: var(--suite-sidebar-search-bg-light) !important;
    border: 1px solid var(--suite-sidebar-search-border-light) !important;
}

    body:not(.dxbl-theme-dark) .app .sidebar .dxbl-accordion-group-header[role="search"] .dxbl-text-edit:focus-within {
        background-color: var(--suite-sidebar-search-focus-bg-light) !important;
        border-color: var(--suite-sidebar-search-focus-border-light) !important;
    }

/* Evita la linea inferior nativa para que no sobresalga al hacer click */
.app .sidebar .dxbl-accordion-group-header[role="search"] .dxbl-text-edit::before,
.app .sidebar .dxbl-accordion-group-header[role="search"] .dxbl-text-edit::after {
    display: none !important;
}

/* ========================================================= */
/* GRID NAVIGABLE LINK HOVER                                 */
/* ========================================================= */
:root {
    --suite-grid-link-hover-bg: rgba(var(--suite-color-primary-rgb), 0.12);
}

/* 1. Celda: sin cambio de fondo al hacer hover sobre el enlace */

/* 2. Forzamos al enlace a encogerse ligeramente al pasar por encima */
.dxbl-grid-table tbody tr td a:hover,
.xaf-object-link-content a:hover {
    background-color: var(--suite-grid-link-hover-solid) !important;
    color: var(--suite-grid-link-text) !important;
    display: inline-block !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px var(--suite-grid-link-hover-shadow) !important;
    transform: scale(0.98) !important;
    transform-origin: left center !important;
    z-index: 99 !important;
    position: relative !important;
}

/* ========================================================= */
/* THEME SWITCHER (hide custom color)                        */
/* ========================================================= */

/* El selector de idioma tiene un nombre de accion unico */
dxbl-toolbar-item[data-action-name="LanguageSwitcher"] {
    --dxbl-btn-color: var(--suite-shell-text) !important;
    --dxbl-btn-text-secondary-color: var(--suite-shell-text) !important;
    color: var(--suite-shell-text) !important;
}

/* Oculta la opcion "Custom Color" del panel de tema */
.themeswitcher-custom-color {
    display: none !important;
}

/* Oculta tambien la cabecera/label "Custom Color" en Fluent */
nav.themes-menu.themes-menu-tms.themes-fluent-header[aria-label="Fluent Custom Color"] {
    display: none !important;
}

/* La integracion de la plantilla XAF se define en suite-xaf-shell.css. */

/* =========================================================
   LIST VIEW — estilo limpio "Vetta 360"
   ---------------------------------------------------------
   Reorganiza el grid de la vista de lista de XAF para que
   tenga: cabecera gris clara, filas aireadas con separadores
   sutiles (sin líneas verticales), marco tipo "card", hover
   gris neutro, toolbar con botón primario corporativo,
   buscador y pager redondeados.
   Todo va SCOPED a .amedida-content para no afectar a login,
   popups ni grids embebidos del shell.
   Colores reutilizados: --suite-btn-brand / --suite-rust.
   ========================================================= */

/* --- Marco "card" del grid --- */
.amedida-content .dxbl-grid:not(.suite-data-grid) {
    border: 1px solid var(--suite-shell-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background-color: var(--suite-shell-surface) !important;
    margin-top: 4px;
}

/* --- Sin líneas verticales entre celdas (look limpio del referente) --- */
.amedida-content .dxbl-grid:not(.suite-data-grid) .dxbl-grid-table > thead > tr > th,
.amedida-content .dxbl-grid:not(.suite-data-grid) .dxbl-grid-table > tbody > tr > td {
    border-left: none !important;
    border-right: none !important;
}

/* --- Cabecera de columnas: gris muy claro + texto medio --- */
.amedida-content .dxbl-grid:not(.suite-data-grid) .dxbl-grid-table > thead > tr > th {
    background-color: var(--suite-shell-hover) !important;     /* slate-50 */
    color: var(--suite-shell-muted) !important;                /* slate 600 */
    font-weight: 600 !important;
    font-size: var(--suite-action-font-size) !important;
    letter-spacing: 0.01em !important;
    border-bottom: 1px solid var(--suite-shell-border) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* --- Filas aireadas + separadores horizontales muy sutiles --- */
.amedida-content .dxbl-grid:not(.suite-data-grid) .dxbl-grid-table > tbody > tr > td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--suite-shell-border) !important;  /* slate-100 */
    color: var(--suite-shell-text);
    font-size: var(--suite-control-font-size);
    vertical-align: middle;
}

/* Última fila sin línea: cierra limpio dentro de la card */
.amedida-content .dxbl-grid:not(.suite-data-grid) .dxbl-grid-table > tbody > tr:last-child > td {
    border-bottom: none !important;
}

/* --- Hover de fila: gris neutro (no naranja), como el referente --- */
.amedida-content .dxbl-grid:not(.suite-data-grid) .dxbl-grid-table > tbody > tr:hover > td,
.amedida-content .dxbl-grid:not(.suite-data-grid) .dxbl-grid-table > tbody > tr:hover > th {
    background-color: var(--suite-shell-hover) !important;
}

/* --- TOOLBAR: separación bajo la barra de acciones --- */
.amedida-content .dxbl-toolbar {
    margin-bottom: 14px !important;
    gap: 8px;
}

/* Colores de acciones principales centralizados en suite-palette.css. */
/* Resto de botones de la toolbar: esquinas suaves */
.amedida-content .dxbl-toolbar .dxbl-btn:not(.dxbl-btn-primary) {
    border-radius: 8px !important;
}

/* Buscador (FullTextSearch) redondeado + foco corporativo */
.amedida-content .dxbl-toolbar .dxbl-text-edit {
    border-radius: 8px !important;
}

.amedida-content .dxbl-toolbar .dxbl-text-edit:focus-within {
    border-color: var(--suite-shell-focus) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--suite-rust-rgb, 30, 41, 57), 0.18) !important;
}

/* Página activa: reglas compartidas de suite-palette.css. */

/* Shell: styles for native XAF nodes relocated by suiteHeaderActions.js.
   Scope stays on the destination slots; no rules for business grids or login. */
.amedida-layout #suite-header-actions-slot {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.amedida-layout #suite-header-actions-slot .suite-avatar-initials {
    width: 36px;
    height: 36px;
    color: var(--suite-shell-text);
    background: var(--suite-shell-accent-soft);
    border: 1px solid var(--suite-shell-border);
}
.amedida-layout #suite-header-actions-slot #suite-empresa-wrapper {
    min-width: 0;
    margin-right: 0;
}
.amedida-layout #suite-header-actions-slot button:focus-visible,
.amedida-layout #suite-header-actions-slot a:focus-visible {
    outline: 2px solid var(--suite-shell-focus) !important;
    outline-offset: 2px;
}
.amedida-layout #suite-header-actions-slot .account-button {
    border-radius: 50%;
}
@media (max-width: 600px) {
    .amedida-layout #suite-header-actions-slot { gap: 4px; }
}