/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Mfe Compras — Estilos propios (sin dependencias de MudBlazor)
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════════════════════
 * DESIGN TOKENS — Paleta de colores y constantes globales
 * Usar siempre var(--nombre) en lugar de valores hardcodeados.
 * ══════════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Marca / Brand ─────────────────────────────────────────────────────── */
    --color-primary:          #003399;   /* Azul corporativo principal          */
    --color-primary-dark:     #012d5e;   /* Hover / gradiente oscuro            */
    --color-primary-light:    #0055cc;   /* Gradiente claro / links activos     */
    --color-primary-muted:    #3366bb;   /* Variante suavizada (íconos, badges) */
    --color-primary-subtle:   #e6ebf7;   /* Fondos tinted muy sutiles           */

    /* ── Fondos / Backgrounds ──────────────────────────────────────────────── */
    --color-bg-page:          #f0f4fa;   /* Fondo global de la aplicación       */
    --color-bg-secondary:     #f8f9fb;   /* Paneles, headers de sección         */
    --color-bg-tertiary:      #fafbfc;   /* Tablas, formularios internos        */
    --color-bg-surface:       #ffffff;   /* Tarjetas, modales, superficie base  */
    --color-bg-overlay:       rgba(255, 255, 255, 0.9); /* Loading overlay      */

    /* ── Texto ─────────────────────────────────────────────────────────────── */
    --color-text:             #333333;   /* Texto principal                     */
    --color-text-secondary:   #666666;   /* Subtítulos, placeholders            */
    --color-text-muted:       #999999;   /* Deshabilitado, metadata             */
    --color-text-on-primary:  #ffffff;   /* Texto sobre fondo primario          */
    --color-text-brand:       #2c3e6b;   /* Texto en celdas / tono azul oscuro  */
    --color-text-title:       #003399;   /* Títulos de sección destacados       */

    /* ── Bordes ────────────────────────────────────────────────────────────── */
    --color-border:           #dde3f0;   /* Borde estándar (inputs, cards)      */
    --color-border-subtle:    #e8ecf5;   /* Separador de filas, divisores       */
    --color-border-focus:     #003399;   /* Anillo de foco (inputs activos)     */

    /* ── Tabla ─────────────────────────────────────────────────────────────── */
    --color-table-header-bg:  #003399;   /* Fondo encabezado de columna         */
    --color-table-header-text:#ffffff;   /* Texto encabezado                    */
    --color-table-row-odd:    #ffffff;   /* Fila impar                          */
    --color-table-row-even:   #eef2fb;   /* Fila par (stripe)                   */
    --color-table-row-hover:  #d6e0f7;   /* Fila al hacer hover                 */
    --color-table-cell-text:  #2c3e6b;   /* Texto de celdas                     */
    --color-table-border:     #e8ecf5;   /* Línea inferior de celda             */

    /* ── Botón primario ────────────────────────────────────────────────────── */
    --color-btn-primary-from:       #003399;
    --color-btn-primary-to:         #0055cc;
    --color-btn-primary-hover-from: #012d5e;
    --color-btn-primary-hover-to:   #003399;
    --color-btn-primary-text:       #ffffff;

    /* ── Botón secundario ──────────────────────────────────────────────────── */
    --color-btn-secondary-text:       #666666;
    --color-btn-secondary-border:     #dde3f0;
    --color-btn-secondary-hover-text: #003399;
    --color-btn-secondary-hover-bg:   rgba(0, 51, 153, 0.05);

    /* ── Botón peligro ─────────────────────────────────────────────────────── */
    --color-btn-danger-bg:       #c0392b;
    --color-btn-danger-hover-bg: #922b21;
    --color-btn-danger-text:     #ffffff;

    /* ── Semánticos — estados ──────────────────────────────────────────────── */
    --color-success:        #2e7d32;
    --color-success-bg:     #e8f5e9;
    --color-success-border: #a5d6a7;

    --color-warning:        #e65100;
    --color-warning-bg:     #fff3e0;
    --color-warning-border: #ffcc80;

    --color-danger:         #b32121;
    --color-danger-bg:      #fdecea;
    --color-danger-border:  #ef9a9a;

    --color-info:           #0277bd;
    --color-info-bg:        #e1f5fe;
    --color-info-border:    #81d4fa;

    /* ── Sombras ───────────────────────────────────────────────────────────── */
    --shadow-xs:      0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-sm:      0 2px 4px rgba(0, 51, 153, 0.12);
    --shadow-md:      0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:      0 4px 12px rgba(0, 51, 153, 0.10);
    --shadow-xl:      0 8px 24px rgba(0, 51, 153, 0.15);
    --shadow-nav:     0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-btn:     0 2px 4px rgba(0, 51, 153, 0.20);
    --shadow-btn-hover: 0 4px 8px rgba(0, 51, 153, 0.30);
    --shadow-focus:   0 0 0 3px rgba(0, 51, 153, 0.15);

    /* ── Radios ────────────────────────────────────────────────────────────── */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* ── Tipografía ────────────────────────────────────────────────────────── */
    --font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs:  1.1rem;
    --font-size-sm:  1.3rem;
    --font-size-md:  1.4rem;
    --font-size-lg:  1.6rem;
    --font-size-xl:  1.8rem;
    --font-size-2xl: 2.2rem;

    /* ── Espaciado ─────────────────────────────────────────────────────────── */
    --space-xs:  0.4rem;
    --space-sm:  0.8rem;
    --space-md:  1.2rem;
    --space-lg:  1.6rem;
    --space-xl:  2.0rem;
    --space-2xl: 3.0rem;

    /* ── Transiciones ──────────────────────────────────────────────────────── */
    --transition-fast:    all 0.15s ease-in-out;
    --transition-default: all 0.20s ease-in-out;
    --transition-slow:    all 0.35s ease-in-out;

    /* ── Z-index ───────────────────────────────────────────────────────────── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   500;
    --z-modal:     600;
    --z-toast:     800;
    --z-error-ui: 1000;
}
 #compras-mfe-layout .mud.svg-icon {
    height: 2rem;
    width: 2rem;
 }

#compras-mfe-layout .guest-card > svg {
    font-size: 1.4rem;
    color: var(--color-primary);
    height: 3.2rem;
    width: 3.2rem;
}

#compras-mfe-layout .mud-button-filled-size-small,
#compras-mfe-layout .mud-button-text-size-small {
    font-size: 1.3rem;
}

#compras-mfe-layout .mud-button-filled-size-large,
#compras-mfe-layout .mud-button-text-size-large {
    font-size: 1.5rem;
}

#compras-mfe-layout .paginacion-content div {
    font-size: 1.4rem;
}

#compras-mfe-layout .mud-input-label-inputcontrol,
.mud-input-control > .mud-input-control-input-container > label.mud-input-label-inputcontrol {
    font-size: 1.6rem;
    overflow: visible;
}

.mud-input.mud-input-outlined>fieldset.mud-input-outlined-border legend {
    font-size: 1.2rem;
}

/* ── Reset de conflictos con PanoramaShared/styles.css ── */

.mud-button-root, .mud-icon-button {
    /* width: unset;
    height: unset;
    box-shadow: none;
    background-color: unset;
    color: unset;
    font-size: unset;
    padding: unset;
    border-radius: unset;
    transition: unset; */
}

a.mud-nav-link, a.mud-button-root, a.mud-tab, .mud-tabs a,
.mud-breadcrumb-item a, .mud-chip a {
    font-size: inherit;
    padding: unset;
    border-radius: unset;
    display: unset;
    transition: unset;
}

.mud-typography h1, .mud-typography h2, .mud-typography h3,
h1.mud-typography, h2.mud-typography, h3.mud-typography {
    font-family: inherit;
}

/* ── Layout principal MFE ── */

.compras-layout {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background, #f0f4fa);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Navegación ── */

.compras-navigation {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

/* ── Contenido principal ── */

.compras-content {
    flex: 1;
    /* padding: 2.4rem; */
    overflow-y: auto;
    background-color: var(--color-background, #f0f4fa);
}

/* ── Responsive design ── */

@media (max-width: 768px) {
    .compras-header {
        padding: 1rem 1.6rem;
    }

    .compras-title {
        font-size: 1.6rem;
    }

    .compras-tabs .mud-tabs-toolbar {
        padding: 0 1rem;
    }

    .compras-tabs .mud-tab {
        padding: 1rem 1.2rem;
        font-size: 1.3rem;
    }

    .tab-submenu {
        padding: 0 1rem;
        flex-wrap: wrap;
    }

    .tab-link {
        padding: 0.8rem 1.2rem;
        font-size: 1.3rem;
    }

    .compras-content {
        padding: 1.6rem;
    }
}

@media (max-width: 480px) {
    .tab-submenu {
        flex-direction: column;
        gap: 0;
    }

    .tab-link {
        border-radius: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .tab-link:last-child {
        border-bottom: none;
    }
}

/* ── Estados de carga y utilidades ── */

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.content-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    margin-bottom: 2rem;
}

.content-title {
    color: #333;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.6rem;
}

.content-subtitle {
    color: #666;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 1.2rem;
}

/* ── Blazor error UI (conservado del original) ── */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

/* ── Splash Screen de carga inicial ─────────────────────────────────────── */

.splash-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(150deg, #003399 0%, #012d5e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-card {
    background: white;
    border-radius: 20px;
    padding: 3.2rem 4rem;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    width: 90%;
    max-width: 380px;
}

.splash-icon {
    margin-bottom: 1.6rem;
}

.splash-icon svg {
    width: 80px;
    height: 80px;
}

.splash-title {
    font-family: var(--font-family);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.4rem;
}

.splash-subtitle {
    font-family: var(--font-family);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 2.8rem;
}

.splash-progress-track {
    height: 6px;
    background: var(--color-primary-subtle);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.splash-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius-pill);
    width: var(--blazor-load-percentage, 0%);
    transition: width 0.1s ease-out;
}

.splash-status {
    font-family: var(--font-family);
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin: 0;
}

.splash-status::after {
    content: var(--blazor-load-percentage-text, "Cargando...");
}