/* Estilos propios BackOffice V4 */

/* Oculta el tooltip de trial de Smart.Blazor y su watermark fijo.
   Ninguno se usa en la app. */
smart-tooltip,
.smart-tooltip,
.smart-tooltip-content,
#smart-watermark {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* Fuente global Tahoma 10 en la app (base) */
html, body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
}

/* Grids y componentes de Smart: sobreescribimos las variables CSS internas
   en vez de forzar font-family con !important sobre "smart-grid *".
   Así el motor de iconos de Smart (que también usa una variable interna
   --smart-font-family-icon: smart-icons) sigue funcionando y los iconos
   de sort/filter/menu se ven correctamente. */
.smart-grid, smart-grid,
.smart-pager, smart-pager,
.smart-menu, smart-menu,
.smart-window, smart-window,
.smart-button, smart-button,
.smart-text-box, smart-text-box,
.smart-password-text-box, smart-password-text-box,
.smart-drop-down-list, smart-drop-down-list {
    --smart-font-family: Tahoma, Geneva, sans-serif;
    --smart-font-size: 10px;
    --smart-grid-cell-font-size: 10px;
    --smart-grid-column-font-size: 10px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
}

input, select, textarea, button {
    font-family: Tahoma, Geneva, sans-serif;
}

/* Fondo verde para celdas modificadas — el pintado real se hace por inline
   `!important` desde JS (_pintarCelda), en el cell y sus hijos directos, para
   ganar al inline que Smart pone en los <span> internos. Estos selectores
   sirven como refuerzo estilístico y para casos sin JS. */
.celda-modificada,
smart-grid .celda-modificada {
    background-color: #a4e4a4 !important;
    background: #a4e4a4 !important;
}

/* Cabeceras en negrita. Smart Grid renderiza cada cabecera como
   <smart-grid-column data-field="...">, no como una celda de datos (esas viven
   en las filas), así que este selector sólo afecta al label del header, no al
   valor de las celdas.
   Columnas: Reference, Price Limit, Competition, Turbo, Notes. */
/* Rayado tipo pijama en los Smart Grid: una fila blanca, otra gris muy claro.
   Smart marca las filas alternas con el atributo `alternation-index="1"` cuando
   Appearance.AlternationCount = 2. Las que llevan `alternation-index="0"` (o
   ninguno) se dejan en blanco para que las modificadas (background verde) y las
   celdas con Estilo* sigan viéndose bien. */
smart-grid [alternation-index="1"],
smart-grid [alternation-index="1"] > [data-field],
smart-grid tr[alternation-index="1"],
smart-grid tr[alternation-index="1"] > td {
    background-color: #f4f6f9 !important;
}

smart-grid-column[data-field="Reference"],
smart-grid-column[data-field="Reference"] .smart-grid-column-label,
smart-grid-column[data-field="Reference"] > *,
smart-grid-column[data-field="PrecioLimite"],
smart-grid-column[data-field="PrecioLimite"] .smart-grid-column-label,
smart-grid-column[data-field="PrecioLimite"] > *,
smart-grid-column[data-field="strTipoDeVenta"],
smart-grid-column[data-field="strTipoDeVenta"] .smart-grid-column-label,
smart-grid-column[data-field="strTipoDeVenta"] > *,
smart-grid-column[data-field="Turbo"],
smart-grid-column[data-field="Turbo"] .smart-grid-column-label,
smart-grid-column[data-field="Turbo"] > *,
smart-grid-column[data-field="Notes"],
smart-grid-column[data-field="Notes"] .smart-grid-column-label,
smart-grid-column[data-field="Notes"] > * {
    font-weight: 700 !important;
}

.fondoamarillo { background-color: yellow; }
.fondonaranja { background-color: orange; }
.fondoblanco { background-color: white; }
.fondoazul { background-color: deepskyblue; }
.fuenterojo { color: red !important; }

.overlay-cargando {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.7);
    z-index: 9999;
}

.spinner-cargando {
    width: 3rem;
    height: 3rem;
    border: 4px solid #dee2e6;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Barra fina de progreso indeterminado mientras hay peticiones a la API en curso */
.barra-peticiones-api {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(13, 110, 253, 0.15);
    z-index: 100000;
    pointer-events: none;
    overflow: hidden;
}
.barra-peticiones-api-indicador {
    position: absolute;
    top: 0; bottom: 0;
    width: 35%;
    background: #0d6efd;
    animation: barra-peticiones-anim 1.1s linear infinite;
}
@keyframes barra-peticiones-anim {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

/* Título/cabecera dentro de una ventana modal */
.ventana-titulo {
    padding: 6px 10px;
    background-color: #0d6efd;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid #0a58ca;
    margin: -1px -1px 0 -1px;
}

/* Menú superior azul */
.menu-azul {
    background-color: #0d6efd !important;
    color: #fff !important;
}
.menu-azul .smart-menu-items-group,
.menu-azul smart-menu-items-group,
.menu-azul smart-menu-item {
    background-color: #0d6efd !important;
    color: #fff !important;
}
.menu-azul smart-menu-item:hover,
.menu-azul .smart-menu-item:hover {
    background-color: #0b5ed7 !important;
    color: #fff !important;
}