/* ============================================================================
   PlanVallejo · estilos globales
   Lenguaje visual: Asiscomex (Microsoft Fluent — primario #0078D4, fondo #f5f7fa).
   ========================================================================== */

:root {
    --navbar-height: 64px;
    --navbar-bg: #ffffff;
    --navbar-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    /*--primary-color: #6750A4;*/
    --primary-color: #007FFF;
    --primary-color-hover: #553c9a;
    --primary-color-soft: rgba(103,80,164,0.08);
    --tertiary-color: #7c4dff;
    --success-color: #21a366;
    --hover-bg: #f5f5f5;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --bg-page: #f5f7fa;
    --border-soft: rgba(0,0,0,0.06);
}

/* Tabs estilo AsiscomexCI: indicador morado fuerte + uppercase */
::deep .mud-tabs .mud-tab {
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    font-weight: 600 !important;
    min-width: 120px;
}
::deep .mud-tabs-panels { padding: 24px 0 0 0; }

/* Botones rectangulares consistentes con el showcase AsiscomexCI */
.btn-action-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.btn-action-row .mud-button {
    text-transform: none;
    letter-spacing: 0.2px;
    min-width: 96px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    height: 40px;
}

/* Mantener color en botones disabled — el legacy AsiscomexCI usa color con
   reducción de opacidad, no gris plano. */
.btn-action-row .mud-button.mud-button-filled.mud-disabled {
    opacity: 0.55 !important;
    color: #ffffff !important;
    pointer-events: none;
}
.btn-action-row .mud-button.mud-button-filled.mud-disabled.mud-button-filled-tertiary { background-color: #7c4dff !important; }
.btn-action-row .mud-button.mud-button-filled.mud-disabled.mud-button-filled-success  { background-color: #22c55e !important; }
.btn-action-row .mud-button.mud-button-filled.mud-disabled.mud-button-filled-secondary { background-color: #ec4899 !important; }
.btn-action-row .mud-button.mud-button-filled.mud-disabled.mud-button-filled-error    { background-color: #ef4444 !important; }

/* Inputs: incrementar altura y forzar peso normal en valores (legacy AsiscomexCI) */
.mud-input-outlined-border { border-radius: 8px !important; }
.mud-input-control.mud-input-control-margin-none .mud-input-outlined .mud-input { padding-top: 14px !important; padding-bottom: 14px !important; }

/* Texto del input/select/numeric/autocomplete: peso 400 (no bold) */
.mud-input-slot,
.mud-input-slot input,
.mud-select-input,
.mud-input-outlined .mud-input-slot input,
.mud-autocomplete .mud-input input,
.mud-numeric-field input { font-weight: 400 !important; }

/* Tabs: fondo blanco, texto gris para inactivos, morado + subrayado para el activo */
.mud-tabs .mud-tab { color: var(--text-secondary) !important; opacity: 1 !important; }
.mud-tabs .mud-tab.mud-tab-active { color: var(--primary-color) !important; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, .btn-link { color: var(--primary-color); }
a:hover { color: var(--primary-color-hover); }

h1, h2, h3, h4, h5, h6 { color: var(--text-primary); margin: 0; }

/* Validación de formularios Blazor */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; font-size: 12px; }

/* Error boundary */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "Ha ocurrido un error inesperado." }

/* Scrollbar personalizado (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* Fix de z-index para MudBlazor (consistente con AsiscomexCI) */
.mud-appbar { z-index: 1100 !important; }
.mud-drawer { z-index: 1100 !important; }
.mud-overlay { z-index: 1050 !important; }
main { position: relative !important; z-index: 1 !important; }

/* Animación de entrada para contenido */
.page-fade-in { animation: pageFadeIn 0.3s ease-out; }
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Helper JS para descarga de archivos generados desde el servidor */
/* (requerido por las páginas de Reportes — Excel / PDF) */

/* Utilidad: elevation soft personalizada */
.elevation-soft {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Los estilos del ThemeSwitcherDrawer (panel "Cambiar tema") viven INLINE
   en Components/Shared/ThemeSwitcherDrawer.razor para evitar problemas de
   cache del navegador con app.css. */