/* Operador PDA — overrides scoped (clon de pilarica-pda.css) */
/* ============================================
   Operador PDA — estilos compartidos
   ============================================
   Extracción de las clases ESTRUCTURALES y de COMPONENTES de las pantallas de
   Recepción de almacén (`PurchaseOrders.razor.css` + `PurchaseOrderDetail.razor.css`),
   trasladadas a CSS global para que las pantallas de Envío / Palés / Consulta
   las hereden automáticamente y mantengan consistencia visual con Recepción.

   Nota: los `.razor.css` scoped de Recepción siguen funcionando porque el scoping
   genera un atributo único `[b-xxxxx]` que NO está en este CSS global. Misma
   clase, dos especificidades — el global aplica solo donde no hay scope.
*/

/* ============================================
   Scope `.operador-pda` — accesibilidad PDA
   ============================================
   Redeclaramos los tokens de texto/separador SOLO dentro del wrapper Operador
   (`<div class="tentalo-app operador-pda">`). Subimos contraste para presbicia
   leve y entorno de almacén (cumple WCAG 2.2 AA — 4.5:1 mínimo).

   Fuera de `.operador-pda` los tokens globales de `tentalo-app.css` permanecen
   intactos → cero impacto en Ventas/Tentalo/Logística/Comercio/Home/etc.

   Origen → destino (ratio sobre #f4f4f4 fondo Operador):
     --tentalo-text-secondary   #5a6a7a → #43536b   (5.13 → 7.39:1, AAA)
     --tentalo-text-tertiary    #8a9aaa → #56657a   (2.61 → 5.79:1, AA — antes fallaba)
     --tentalo-text-quaternary  #b0b8c0 → #7a8595   (1.78 → 3.46:1, decorativo AA large)
     --tentalo-separator-opaque #d0d4d8 → #b9bfc6   (mejora visibilidad de bordes)
*/
.operador-pda {
    --tentalo-text-secondary: #2c3e54;       /* aún más oscuro — datos secundarios bien contrastados sobre fondo claro */
    --tentalo-text-tertiary: #3d4f66;        /* prácticamente legible como primary */
    --tentalo-text-quaternary: #5a6a7a;      /* lo que antes era secondary, ahora aceptable para decoración */
    --tentalo-separator-opaque: #a8b0b8;     /* bordes más visibles */
}

/* Dark mode: el texto blanco ya cumple AAA, solo subimos contraste del tertiary
   gris-claro para que datos secundarios (fechas, lotes, qty) no se pierdan en el
   fondo oscuro. */
@media (prefers-color-scheme: dark) {
    .operador-pda {
        --tentalo-text-tertiary: #c8d2dc;   /* 4.1:1 → 8.5:1 sobre #0a1520 */
    }
}

/* Reserva espacio al final del scroll de Preparación cuando hay palé anclado, para que
   el último pedido no quede tapado por la barra. La clase `pp-has-pinned` la añade
   PendingSalesOrders al wrapper .operador-pda solo si hay palé anclado. */
.operador-pda.pp-has-pinned .tentalo-content {
    padding-bottom: calc(108px + var(--tentalo-safe-bottom, 0px));
}

/* Mientras hay palé anclado, sube los toasts (componente Toast → `.feedback-toast`) por encima
   de la barra flotante para que no la tapen. La variable se hereda al toast porque está dentro
   de este wrapper en el DOM; ~64px ≈ alto de la barra + un pequeño margen. */
.operador-pda.pp-has-pinned {
    --pp-toast-lift: 80px;
}

/* Empty state global (Operador). Antes vivía solo en `PurchaseOrders.razor.css`
   (scoped) — al usarse desde otras vistas se quedaba sin estilo. Lo subimos al
   global para garantizar centrado consistente. */
.operador-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--tentalo-text-secondary, #6b7280);
    gap: 16px;
    text-align: center;
}

/* ============================================
   Overrides scoped a `.operador-pda`
   ============================================
   Subimos tamaños de clases COMPARTIDAS (`tentalo-header-*`, `tentalo-empty-*`,
   etc. — definidas en `tentalo-app.css`) solo dentro del wrapper Operador para
   no afectar Ventas/Tentalo/Logística/Comercio/Home. Mismas reglas, mayor
   especificidad por el ancestro `.operador-pda`.
*/
.operador-pda .tentalo-header-title {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Títulos (h1/h2/h3) NO son texto editable: el navegador muestra el cursor
   "texto" (I-beam) sobre cualquier texto seleccionable. Forzamos el puntero
   normal (flecha) solo dentro del módulo Operador — páginas (`.operador-pda`)
   y menú principal PDA (`.operador-home-content`). */
.operador-pda h1,
.operador-pda h2,
.operador-pda h3,
.operador-pda .tentalo-header-title,
.operador-home h1,
.operador-home h2,
.operador-home h3,
.operador-home .tentalo-header-title,
.operador-home .tentalo-menu-label {
    cursor: default;
}

/* Ocultar el pie de versión SOLO en el menú principal Operador. */
.operador-home .tentalo-version-footer {
    display: none;
}

.operador-pda .tentalo-empty-inline {
    font-size: 0.9375rem;
    color: var(--tentalo-text-secondary);
}

.operador-pda .tentalo-loading-container p {
    font-size: 1rem;
    color: var(--tentalo-text-secondary);
    font-weight: 500;
}

.operador-pda .busy-message {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tentalo-text-primary);
}

/* Badge "IMPRESO" (visible en Pedidos preparados) — texto pequeño, hay que subirlo */
/* Chips del header (`.po-card-tags`) — altura y padding UNIFICADOS para los 3
   (`.po-card-route` + `.po-card-cash-badge` + `.po-card-printed-badge`) para que no
   se vean amontonados / desproporcionados al renderizarse juntos. */
.operador-pda .po-card-route,
.operador-pda .po-card-cash-badge,
.operador-pda .po-card-printed-badge,
.operador-pda .po-card-weight {
    font-size: 0.875rem;
    font-weight: 700;
    padding: 5px 11px;
    height: 28px;
    line-height: 1;
}

/* Descripción de línea (item desc) en cards de líneas: texto crítico para identificar
   el producto en la PDA, debe leerse de un vistazo. */
.operador-pda .po-line-desc {
    font-size: 1.0625rem;
    color: var(--tentalo-text-primary);
    font-weight: 600;
    line-height: 1.35;
}

.operador-pda .po-line-meta {
    font-size: 1.0625rem;
    color: var(--tentalo-text-secondary);
    font-weight: 500;
    line-height: 1.35;
}

/* Number / item code en cards de línea */
.operador-pda .po-line-item {
    font-size: 1.125rem;
    font-weight: 700;
}

.operador-pda .po-line-qty {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--tentalo-text-primary);
}

/* Input de búsqueda + inputs en general: que no se vea raquítico */
.operador-pda .po-search-input,
.operador-pda .po-line-input {
    font-size: 1.0625rem;
    min-height: 48px;
}

/* Placeholder de inputs en PDA Operador: el gris-claro default de los browsers
   (~#A0A0A0 con opacity 0.54) no cumple WCAG en almacén. Forzamos un gris
   medio oscuro con opacity 1 para que se lea desde lejos. */
.operador-pda .po-search-input::placeholder,
.operador-pda .po-line-input::placeholder,
.operador-pda input::placeholder {
    color: #5a6a7a;
    opacity: 1;
}

/* ============================================
   Ficha de palé — botonera (2026-08-12)
   ============================================
   Va AQUÍ y no en el .razor.css del componente a propósito. La alternativa era ganar por
   especificidad desde el CSS aislado ([b-hash]) para pisar reglas de pilarica-pda.css sin tocarlas;
   funciona, pero es un truco que hay que explicar cada vez. Con el scope `.operador-pda` la
   intención se lee sola: esto es de Operador y no puede caer en PILARICA, que comparte esa hoja.

   Requisito: la página tiene que llevar `<div class="tentalo-app operador-pda">`. Lo cumplen todas
   las de Operador menos ActaEntradaForm y AlbaranScanner, que se renderizan a pantalla completa.
*/

/* Footer fijo de DOS huecos: acción principal + "Más". El hueco derecho es siempre el mismo, así que
   ningún botón cambia de sitio al cambiar el estado del palé — que era lo que hacía fallar al
   operario, que pulsa por posición memorizada y no leyendo. */
.operador-pda .po-cta-footer-split {
    display: flex;
    gap: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* 56 px: se pulsa con guantes y con una sola mano, por encima del mínimo de 44-48. */
.operador-pda .po-cta-footer-split > .recep-btn-large {
    min-height: 56px;
}

.operador-pda .po-cta-footer-split > .recep-btn-primary,
.operador-pda .po-cta-footer-split > .recep-btn-secondary:not(.po-cta-more) {
    flex: 1;
    width: auto;
}

.operador-pda .po-cta-more {
    flex: 0 0 88px;
    width: 88px;
}

/* "Cerrar palé" al final del contenido, con aire por delante para que no se lea como parte de la
   lista ni se pulse de rebote tras tocar una línea. */
.operador-pda .po-pallet-close-zone {
    margin: 24px 12px 8px;
}

/* Hoja "Más acciones": botones iguales entre sí a propósito — son alternativas de una lista, no una
   jerarquía que el operario tenga que descifrar. */
.operador-pda .po-mas-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

/* El botón de acción de línea medía 40x40, por debajo de los 44 pt de Apple y los 48 dp de Material.
   Con guantes eso es un fallo de puntería. Se sube para TODO Operador —lo usan también el conteo de
   inventario y la expedición—, nunca para PILARICA. */
.operador-pda .po-line-delete-btn {
    width: 48px;
    height: 48px;
}

/* Rejilla ETIQUETA / VALOR para el detalle de una línea.
   Copiada del patrón que ya usan Consulta y Mov. ubicaciones en su CSS aislado. Aquí va con scope de
   Operador para no hacer una cuarta copia; las dos pantallas de antes siguen ganando con su [b-hash]
   y no se enteran. Resuelve un problema real: cuando los datos van seguidos separados por puntos, el
   texto envuelve donde le toca y el mismo dato aparece en un sitio distinto en cada tarjeta — el
   operario tiene que releer para saber qué está mirando. Con la etiqueta en columna fija, no. */
.operador-pda .ci-attrs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tentalo-separator-opaque, #E2E6EB);
}

.operador-pda .ci-attr-label {
    align-self: center;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #41506A;
}

.operador-pda .ci-attr-value {
    font-size: 1rem;
    font-weight: 600;
    color: #16243A;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* Un valor que es una AUSENCIA se pinta como tal. Sin esto se lee igual que un dato bueno: la regla
   de aviso vive en la hoja compartida con una sola clase y pierde por especificidad contra
   `.operador-pda .ci-attr-value`. Comprobado en el entorno de pruebas — "Sin declarar" salía en el
   mismo azul oscuro que el resto. Mismo ámbar que .po-line-meta--warning, no un color nuevo. */
.operador-pda .ci-attr-value.po-line-meta--warning {
    color: #b45309;
}

/* Estado LISTA de una expedición: los palés esperan en la playa y el cliente ya ha registrado su
   albarán. Es un estado propio del circuito 4 que Pilarica no tiene, así que su chip no existe en la
   hoja compartida.

   Ámbar deliberado, ni azul de "abierta" ni verde de "expedida": es una espera, y además es la
   ventana en la que el stock del cliente y el nuestro NO cuadran. Que llame la atención es el punto.
   Mismo ámbar que .po-line-meta--warning, no un color nuevo. */
.operador-pda .po-status-ready {
    background: rgba(180, 83, 9, 0.12);
    color: #7c2d12;
    border: 1px solid rgba(180, 83, 9, 0.40);
}

/* Posición de la píldora para el filtro LISTA, tercero de cuatro.
   La hoja compartida ya coloca `all` (0), `Open` (100%) y `Shipped` (300%) — los reutilizamos tal
   cual—, pero `Ready` no existe en Pilarica, así que sin esta regla la píldora se quedaba en la
   primera posición mientras el texto activo era otro. Va aquí y no en la hoja compartida porque el
   estado es solo del operador. */
.operador-pda .po-cash-toggle[data-active="Ready"] .po-cash-toggle-pill {
    transform: translateX(200%);
}

/* Zona táctil de la flecha de volver y del "+" de crear expedición: 40x40 reales, por debajo de los
   44pt de Apple HIG y los 48dp de Material, y encima en la esquina de la pantalla. Con guantes se
   falla. Se agranda con padding negativo —misma técnica que el botón de quitar palé de arriba— para
   no mover ni un píxel el dibujo ni tocar la hoja compartida. */
.operador-pda .tentalo-back-btn,
.operador-pda .tentalo-header-action {
    padding: 12px;
    margin: -12px;
}

/* ══ FIRMA DEL TRANSPORTISTA ═══════════════════════════════════════════════════════════════════
   Modal a pantalla casi completa: firmar con el dedo en un recuadro pequeño sale mal, y esta es la
   única pantalla de la PDA que va a tocar alguien que no es el operario — un transportista que no
   conoce la app y que la usa una vez. Todo grande y con una sola cosa que hacer.

   Vive aquí y no en la hoja compartida porque Pilarica no recoge firmas: allí la expedición no se
   entrega en mano a un tercero. */
.operador-pda .firma-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(11, 18, 32, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.operador-pda .firma-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    width: 100%;
    max-width: 620px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.operador-pda .firma-titulo {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #16243A;
}

.operador-pda .firma-ayuda {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: #41506A;
}

/* `touch-action: none` es lo que hace que el trazo funcione: sin ello el navegador interpreta el
   arrastre del dedo como scroll y la firma sale a trozos o no sale. */
.operador-pda .firma-canvas {
    display: block;
    width: 100%;
    height: 220px;
    touch-action: none;
    background: #fff;
    border: 2px dashed #9AA6BC;
    border-radius: 10px;
    cursor: crosshair;
}

.operador-pda .firma-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

/* "Guardar firma" ocupa la fila entera: es la acción de la pantalla, y separarla de "Borrar" y
   "Cancelar" evita que un dedo con prisa cancele lo que acaba de firmar. */
.operador-pda .firma-acciones > :last-child {
    grid-column: 1 / -1;
}

@media (min-height: 720px) {
    .operador-pda .firma-canvas { height: 300px; }
}