/* Ajustes propios sobre Metronic (assets/css/styles.css). Usar siempre las variables del tema, no colores fijos. */

/* Inter se carga en index.html; Metronic por defecto usa la fuente del sistema. */
:root {
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Fondo del tema en toda la ventana: evita la franja blanca debajo del contenido en modo oscuro */
html, body {
    background-color: var(--muted);
}

/* Utilidades de Tailwind que usan las páginas pero no vienen en el styles.css precompilado de Metronic.
   Sacar cuando Tailwind se compile sobre los .razor. */
.min-h-dvh {
    min-height: 100dvh;
}

/* Etiquetas de los filtros de listados (Pedidos, Facturas): separadas de su campo */
.filter-label {
    margin-bottom: .375rem;
}

/* Importes y cantidades alineados en columnas */
.kt-table td, .kt-table th, .tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Celular/tablet: con texto menor a 16px iOS hace zoom al enfocar un campo */
@media (max-width: 767.98px) {
    input:not([type=checkbox]):not([type=radio]),
    select,
    textarea,
    .kt-input,
    .kt-select {
        font-size: 16px;
    }
}

/* Pantallas táctiles: áreas de toque de al menos 44px */
@media (pointer: coarse) {
    .kt-btn {
        min-height: 44px;
    }

    .kt-btn-icon {
        min-width: 44px;
    }
}

/* Páginas sin menú (login, elegir empresa): ocupan toda la pantalla */
.blank-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100dvh;
}

    .blank-layout > * {
        flex: 1 0 auto;
        width: 100%;
    }

h1:focus {
    outline: none;
}

/* Validación de formularios de Blazor (EditForm) */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-green-600, #16a34a);
}

.invalid {
    outline: 1px solid var(--destructive);
}

.validation-message {
    color: var(--destructive);
}

.blazor-error-boundary {
    background: var(--destructive);
    padding: 1rem;
    color: var(--primary-foreground, #fff);
}

    .blazor-error-boundary::after {
        content: "Ocurrió un error al mostrar esta sección. Recargá la página.";
    }