/* Vantastic CloudERP — CSS base del host (D-10).
   Solo reset, tipografía y tokens mínimos. El design system "Cobalto Elegante" se incorpora en la Fase 7. */
:root {
    --em-cobalt: #1a4fba;
    --em-cobalt-deep: #0f3494;
    --em-cobalt-light: #2d6ae0;
    --em-cobalt-pale: #e8eef9;
    --em-cobalt-subtle: #f0f4fb;
    --vt-text: #1f2937;
    --vt-muted: #64748b;
    --vt-bg: #f6f8fc;

    /* D-51 — Escala única de capas (z-index). Todo overlay/modal usa estas variables; nunca un número suelto.
       Un modal que se abre DESDE otro modal sube un nivel (--z-modal-2, --z-modal-3). Diálogos (alerta/confirmación)
       y toasts quedan siempre por encima de cualquier modal; la reconexión, por encima de todo. */
    --z-desplegable: 60;     /* listas de autocompletado / menús dentro de su contenedor */
    --z-shell: 1200;         /* sidebar, barra inferior móvil, drawer (erp-shell.css: 1200–1301) */
    --z-shell-tip: 1400;     /* tooltip del menú contraído */
    --z-pagina-carga: 2500;  /* carga de una página (overlay de su contenido) */
    --z-modal: 3000;         /* modal nivel 1 (abierto desde una página) */
    --z-modal-2: 3300;       /* modal abierto desde otro modal */
    --z-modal-3: 3600;       /* tercer nivel */
    --z-modal-4: 3700;       /* cuarto nivel (Fase 9.4: Guía → envío → MdCobranza → cliente/correo/SUNAT) */
    --z-modal-5: 3800;       /* quinto nivel (Fase 9.4: … → alta de cliente → ubigeo) */
    --z-bloqueo: 3900;       /* progreso/carga bloqueante (ICargaService, cierre, apertura) */
    --z-dialogo: 4000;       /* alerta/confirmación (IDialogoService): sobre cualquier modal */
    --z-toast: 4500;         /* notificaciones */
    --z-splash: 9000;        /* splash del arranque */
    --z-reconexion: 9500;    /* "Reconectando…" del circuito */
    --z-error-ui: 9600;      /* barra de error de Blazor */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 14px;
    color: var(--vt-text);
    background: var(--vt-bg);
}

.vt-root { min-height: 100vh; }

.vt-panel { max-width: 720px; margin: 48px auto; padding: 24px 28px; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.vt-panel h1 { margin: 0 0 8px; font-size: 20px; color: var(--em-cobalt-deep); }
.vt-panel a { color: var(--em-cobalt); }
.vt-muted { color: var(--vt-muted); }

.vt-tabla { width: 100%; border-collapse: collapse; margin-top: 12px; }
.vt-tabla th, .vt-tabla td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--em-cobalt-pale); }
.vt-tabla th { width: 40%; color: var(--vt-muted); font-weight: 600; }

/* Reconexión del circuito (App.razor) */
#components-reconnect-modal { display: none; position: fixed; inset: 0; z-index: var(--z-reconexion); background: rgba(15,23,42,.35); align-items: flex-start; justify-content: center; padding-top: 18vh; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
#components-reconnect-modal .rc-box { background: #fff; border-radius: 14px; padding: 18px 22px; max-width: 440px; box-shadow: 0 20px 50px rgba(15,52,148,.25); border-top: 4px solid var(--em-cobalt); font-size: 14px; }
#components-reconnect-modal p { margin: 0; display: none; align-items: center; gap: 10px; }
#components-reconnect-modal.components-reconnect-show .rc-show,
#components-reconnect-modal.components-reconnect-failed .rc-failed,
#components-reconnect-modal.components-reconnect-rejected .rc-rejected { display: flex; }
#components-reconnect-modal button { border: none; border-radius: 5px; background: var(--em-cobalt); color: #fff; font-weight: 600; padding: 5px 12px; cursor: pointer; }
.rc-spin { width: 16px; height: 16px; border: 2px solid var(--em-cobalt-pale); border-top-color: var(--em-cobalt); border-radius: 50%; animation: rc-giro .8s linear infinite; }
@keyframes rc-giro { to { transform: rotate(360deg); } }

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: var(--z-error-ui);
    padding: 10px 16px; background: #fff7e6; box-shadow: 0 -1px 4px rgba(0,0,0,.15);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

/* D-56 (rev. 42) — mientras la hoja de estilos de una pantalla termina de cargar, su contenedor no se pinta
   (js/core/guardia-estilos.js). visibility: no mueve el diseño ni detiene Blazor; el tope es 1,5 s. */
[data-vt-esperando] { visibility: hidden !important; }
/* rev. 44 — barra fina mientras se espera una hoja (guardia-estilos.js). visibility:visible para verse aunque el contenedor
   (o el body) esté oculto. */
.vt-barra-estilos { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-bloqueo, 9000); visibility: visible !important;
    pointer-events: none; overflow: hidden; background: rgba(26,79,186,.12); }
.vt-barra-estilos::before { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: #1a4fba;
    animation: vt-barra-estilos 1s ease-in-out infinite; }
@keyframes vt-barra-estilos { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .vt-barra-estilos::before { animation: none; left: 0; width: 100%; opacity: .5; } }