/* ══════════════════════════════════════════════════════════════════════════
   SGA Express — estilos globales
   Paleta como variables CSS: usarlas SIEMPRE en los .razor.css (no hardcodear hex).
   Diseño PDA-first: targets táctiles ≥48px, una columna, feedback grande.
   ══════════════════════════════════════════════════════════════════════════ */

/* Paleta corporativa SGA Lite: ROJO corporativo (#CC3333, el del SGA antiguo) como color principal */
:root {
    --color-primary: #CC3333;
    --color-primary-dark: #A32828;
    --color-primary-light: #FBEFEF;
    --color-accent: #CC3333;
    --color-success: #2E9E5A;
    --color-warning: #E09B30;
    --color-danger: #CC3333;
    --color-bg: #F5F6FA;
    --color-bg-hover: #FAFBFF;
    --color-surface: #FFFFFF;
    --color-text: #1A1D2B;
    --color-text-secondary: #6B7186;
    --color-border: #E0E3ED;
    --color-neutral-light: #EEEEEE; /* fondo de botones secundarios de campo (lupa) */
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, system-ui, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

h1:focus {
    outline: none;
}

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

/* ── Cabeceras de página ── */

.page-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.page-header .page-title {
    margin: 0;
}

/* ── Controles táctiles (PDA: mínimo 48px de alto) ── */

.form-control {
    min-height: 48px;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(204, 51, 51, 0.18);
}

.btn-sga-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-sga-primary:active {
    background: var(--color-primary-dark);
}

.btn-sga-primary:disabled {
    opacity: 0.65;
    cursor: default;
}

.btn-sga-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.75rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
}

.btn-sga-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 1.2rem;
    text-decoration: none;
}

/* ── Menú principal ── */

.menu-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.menu-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    color: var(--color-text);
    text-decoration: none;
}

.menu-card:active {
    background: var(--color-bg-hover);
}

.menu-card i {
    font-size: 1.8rem;
    color: var(--color-accent);
}

.menu-card-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.menu-card-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* ── Avisos grandes (el operario no lee letra pequeña) ── */

.alert-big {
    padding: 0.9rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.alert-big-danger {
    background: #FBEAEA;
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}

.alert-big-warning {
    background: #FCF3E3;
    border: 1px solid var(--color-warning);
    color: #8A5C12;
}

.alert-big-success {
    background: #E8F6EE;
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

/* ── Modal (primitiva compartida — prefijo sga- para no chocar con Bootstrap) ── */

.sga-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
}

.sga-modal {
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.sga-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    font-size: 1.05rem;
}

.sga-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
}

.sga-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

/* ── Cards de OP / pedidos y sub-líneas de lote (los "cubos" del análisis) ── */

.section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
}

.op-card,
.component-card {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    color: var(--color-text);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.op-card:active,
.component-card:active {
    background: var(--color-bg-hover);
}

.op-header-card {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    background: var(--color-surface);
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.component-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 6rem; /* hueco para el FAB */
}

.op-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.op-card-no {
    font-weight: 700;
    font-size: 1.05rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.op-card-qty {
    font-weight: 700;
    white-space: nowrap;
}

/* Las descripciones de BC vienen a veces sin espacios (referencias pegadas): sin esto
   la linea sigue recta y se sale del cubo blanco. */
.op-card-item {
    font-size: 0.95rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.op-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.component-progress {
    font-weight: 700;
    white-space: nowrap;
}

.progress-none { color: var(--color-text-secondary); }
.progress-partial { color: var(--color-warning); }
.progress-done { color: var(--color-success); }

.lot-sublines {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-primary-light);
    border-radius: 8px;
}

.lot-subline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.lot-subline i {
    color: var(--color-text-secondary);
}

.lot-subline-no {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lot-subline-qty {
    font-weight: 700;
}

/* ── FAB de escaneo (inferior derecha, análisis funcional) ── */

.fab-scan {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.8rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.fab-scan:active {
    background: var(--color-primary-dark);
}

/* ── Captura QR y editor de lotes ── */

/* Estado mientras se comprueba el lote leído (sustituye al antiguo botón "Aceptar": se valida con Enter o la lupa) */
.scan-checking {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.05rem;
}

.scan-summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border-radius: 8px;
    font-size: 0.95rem;
}

.scan-label {
    color: var(--color-text-secondary);
}

.lot-edit-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.lot-edit-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.lot-edit-no {
    font-weight: 600;
    word-break: break-all;
}

.lot-edit-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lot-edit-qty {
    flex: 1;
    text-align: right;
}

.lot-edit-save,
.lot-edit-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    font-size: 1.1rem;
    cursor: pointer;
}

.lot-edit-save {
    color: var(--color-success);
}

.lot-edit-save:disabled {
    color: var(--color-text-secondary);
    opacity: 0.5;
    cursor: default;
}

.lot-edit-delete {
    color: var(--color-danger);
}

.lot-edit-delete.armed {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

.lot-edit-confirm {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-danger);
}

/* ── Spinners y feedback de carga (obligatorio en toda llamada a la API) ── */

.sga-spinner {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    flex: none;
    border: 0.18em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sga-spin 0.7s linear infinite;
}

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

/* Carga de página: spinner grande centrado */
.sga-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.sga-loading .sga-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 0.3rem;
    color: var(--color-primary);
}

/* Overlay bloqueante: la app está trabajando — impide dobles pulsaciones */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.65);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.05rem;
}

.loading-overlay .sga-spinner {
    width: 3rem;
    height: 3rem;
    border-width: 0.35rem;
}

/* ── Toggle táctil de configuración ── */

.settings-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
}

.settings-toggle input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    accent-color: var(--color-primary);
}

/* ── Estado de carga de autorización ── */

.auth-loading {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}

/* ── Validación de formularios (plantilla Blazor) ── */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

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

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

/* ── Error UI de Blazor (plantilla) ── */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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;
    color: white;
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "Se ha producido un error.";
}

/* ── Indicador de carga WASM (plantilla) ── */

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--color-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

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

/* ── Estado del seguimiento de lotes (rojo = sin lote · ámbar = parcial · verde = completo) ── */

.component-card.line-status-none,
.op-card.line-status-none {
    border-left: 5px solid var(--color-danger);
}

.component-card.line-status-partial,
.op-card.line-status-partial {
    border-left: 5px solid var(--color-warning);
}

.component-card.line-status-done,
.op-card.line-status-done {
    border-left: 5px solid var(--color-success);
}

.op-card-status {
    display: flex;
}

.doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.doc-badge-pending {
    background: #FBEAEA;
    color: var(--color-danger);
}

.doc-badge-partial {
    background: #FDF3E4;
    color: #9A6410;
}

.doc-badge-done {
    background: #E6F4EC;
    color: var(--color-success);
}

/* Estado de la línea dentro del modal QR (para ver cómo va el seguimiento con varios lotes) */
.scan-line-status {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    border-left: 5px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.95rem;
}

.scan-line-status.line-status-none { border-left-color: var(--color-danger); }
.scan-line-status.line-status-partial { border-left-color: var(--color-warning); }
.scan-line-status.line-status-done { border-left-color: var(--color-success); }

.scan-line-status-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}


/* Aviso de sesión con empresa/entorno distintos a los configurados en el dispositivo */
.session-mismatch {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.session-mismatch strong {
    word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════════════════
   Orientación vertical (PDA)
   Se bloquea de verdad cuando la app está INSTALADA en el terminal:
   manifest.json (orientation: portrait-primary) + screen.orientation.lock en
   js/app.js. Decisión del usuario (22/09/2026): no se contragira la interfaz
   por CSS — hacerlo provocaba que la pantalla girase y volviera (parpadeo).
   En una pestaña suelta del navegador, la app gira como cualquier web.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Campo con botón de teclado y lupa (ver KeyboardField.razor) ──
   Réplica del SGA (SGA-Frontend: .input-scan__kbd + botón "search" Light de Radzen material):
   teclado gris tenue que se pone en rojo mientras está abierto; lupa en botón gris claro. */

.kb-field {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}

.kb-field .form-control {
    width: 100%;
    padding-right: 52px; /* hueco del botón de teclado */
}

.kb-field--validate .form-control {
    padding-right: 100px; /* teclado + lupa */
}

.kb-actions {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
}

.kb-toggle,
.kb-validate {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    cursor: pointer;
}

.kb-toggle svg,
.kb-validate svg {
    fill: currentColor;
}

.kb-toggle {
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    opacity: 0.55;
}

.kb-toggle svg {
    width: 26px;
    height: 26px;
}

.kb-toggle.is-active {
    color: var(--color-primary);
    opacity: 1;
}

.kb-validate {
    border-radius: 4px;
    background: var(--color-neutral-light);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.kb-validate svg {
    width: 24px;
    height: 24px;
}

.kb-validate:active {
    background: var(--color-border);
}

.kb-toggle:disabled,
.kb-validate:disabled {
    opacity: 0.3;
    cursor: default;
}