/* Panel GESTISOL (docs/23-panel.md). Móvil primero; escritorio desde 960 px (menú lateral en vez de la barra inferior).
   Colores con contraste AA; el estado nunca se comunica solo con color (siempre con texto). */
:root {
    --verde: #0B5D4B;
    --verde-oscuro: #08463A;
    --verde-claro: #CDE6DE;
    --fondo: #F2F4F3;
    --fondo-2: #F6F7F6;
    --superficie: #FFFFFF;
    --tinta: #15201C;
    --tinta-2: #3A4642;
    --tenue: #4F5B57;
    --linea: #DCE2DF;
    --linea-suave: #EDF0EE;
    --ok: #1D7A45;
    --ok-fondo: #E3F2E8;
    --ok-tinta: #17643A;
    --aten: #9A5200;
    --aten-fondo: #FDF0DC;
    --aten-borde: #F2D3A6;
    --aten-tinta: #7A4100;
    --aten-texto: #3D2300;
    --aten-punto: #C47A12;
    --falla: #B42318;
    --falla-fuerte: #8F1B12;
    --falla-fondo: #FDE8E6;
    --gris-estado: #2F3B37;
    --fuente: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-num: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
    --radio: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--fuente); -webkit-text-size-adjust: 100%; }
button, input { font: inherit; }
a { color: var(--verde); }
a:hover { color: var(--verde-oscuro); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
h1, h2 { margin: 0; }
/* Blazor enfoca el título al navegar (lectores de pantalla); el foco del título no lleva anillo: no es un control */
h1:focus { outline: none; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Carga inicial y error de Blazor */
.carga { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--tenue); }
.marca-g { width: 40px; height: 40px; border-radius: 12px; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-num); font-weight: 700; font-size: 20px; }
#blazor-error-ui { display: none; position: fixed; inset: auto 0 0 0; padding: 14px 16px; background: var(--falla-fondo); color: var(--falla-fuerte); z-index: 10; }
#blazor-error-ui .reload { margin-left: 8px; }

/* Marco: menú lateral (escritorio) + contenido + barra inferior (móvil) */
.marco { display: flex; min-height: 100dvh; }
.lateral { display: none; }
.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pagina { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 4px 16px calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.cabecera { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; width: 100%; max-width: 1240px; margin: 0 auto; }
.cabecera .titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecera .nombre { font-family: var(--fuente-num); font-weight: 700; font-size: 17px; }
.cabecera .sub { font-size: 12px; color: var(--tenue); }
.cabecera .marca-g { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
.boton-icono { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #D5DCD9; background: var(--superficie); color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.boton-icono:disabled { opacity: .6; cursor: progress; }

.barra-inferior { position: fixed; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); background: var(--superficie); padding: 6px 8px calc(10px + env(safe-area-inset-bottom)); z-index: 5; }
.barra-inferior a, .barra-inferior button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; text-decoration: none; color: var(--tenue); font-size: 12px; background: none; border: 0; cursor: pointer; }
.barra-inferior .activo { color: var(--verde); font-weight: 600; }

/* Tarjetas */
.tarjeta { background: var(--superficie); border-radius: var(--radio); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta h2 { font-size: 15px; font-weight: 600; }
.tarjeta .encabezado { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nota { font-size: 12px; color: var(--tenue); }
.chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.chip.aten { color: var(--aten-tinta); background: var(--aten-fondo); }
.chip.ok { color: var(--ok-tinta); background: var(--ok-fondo); }
.chip.falla { color: var(--falla-fuerte); background: var(--falla-fondo); }
.chip.gris { color: var(--gris-estado); background: #E9EEEC; }

/* Estado general */
.estado { border-radius: var(--radio); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.estado .nivel { display: flex; align-items: center; gap: 10px; font-family: var(--fuente-num); font-weight: 700; font-size: 13px; letter-spacing: 1.2px; }
.estado .titular { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; }
.estado ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; }
.punto-estado { position: relative; width: 14px; height: 14px; display: inline-block; flex: none; }
.punto-estado .halo, .punto-estado .centro { position: absolute; border-radius: 50%; }
.punto-estado .halo { inset: 0; opacity: .4; }
.punto-estado .centro { inset: 3px; }
.estado.OK { background: var(--ok-fondo); border: 1px solid #BFE0CB; color: #10402A; }
.estado.OK .halo, .estado.OK .centro { background: var(--ok); }
.estado.ATENCION { background: var(--aten-fondo); border: 1px solid var(--aten-borde); color: var(--aten-texto); }
.estado.ATENCION .nivel { color: var(--aten-tinta); }
.estado.ATENCION .halo { background: var(--aten-punto); }
.estado.ATENCION .centro { background: var(--aten); }
.estado.FALLA, .estado.SIN_DATOS { background: var(--falla-fuerte); color: #fff; }
.estado.FALLA .halo, .estado.FALLA .centro, .estado.SIN_DATOS .halo, .estado.SIN_DATOS .centro { background: #fff; }
.estado.FALLA ul, .estado.SIN_DATOS ul { color: #FCE3DF; }
.para-sistemas { font-size: 13px; }
.para-sistemas summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.para-sistemas ul { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 4px; word-break: break-word; }

/* Números */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cifra { display: flex; flex-direction: column; gap: 2px; }
.cifra .valor { font-family: var(--fuente-num); font-weight: 700; font-size: 34px; line-height: 1; }
.cifra .rotulo { font-size: 12px; color: var(--tenue); }
.cifra.aten .valor { color: var(--aten); }
.barra-24h { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #E6EAE8; gap: 2px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--tenue); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* Pedidos por hora */
.grafico { display: flex; align-items: flex-end; gap: 4px; height: 120px; border-bottom: 1px solid var(--linea); }
.grafico .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.grafico .col span { font-size: 11px; font-weight: 600; }
.grafico .col i { display: block; width: 100%; max-width: 40px; background: var(--verde); border-radius: 4px 4px 1px 1px; min-height: 2px; }
.grafico .col.vacia i { background: #E3E8E5; }
.horas { display: flex; gap: 4px; font-size: 10px; color: var(--tenue); }
.horas span { flex: 1; text-align: center; min-width: 0; }

/* Para atender */
.pendiente { background: var(--fondo-2); border-radius: 14px; padding: 4px 12px; }
.pendiente > button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--tinta); min-height: 48px; }
.pendiente .num-pedido { font-family: var(--fuente-num); font-weight: 700; font-size: 15px; }
.pendiente .motivo { flex: 1; font-size: 14px; }
.pendiente p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
/* Reprocesar desde el panel (docs/26): ayuda, confirmación (si aprueba una regla) y botón a todo el ancho en celular. */
.reprocesar { display: flex; flex-direction: column; gap: 10px; padding: 0 0 12px; }
.reprocesar .check { align-items: flex-start; line-height: 1.4; }
.reprocesar .campo-config { flex: none; }
.reprocesar .check input { flex: none; margin-top: 2px; }
.reprocesar .boton-principal { width: 100%; }
@media (min-width: 960px) { .reprocesar .boton-principal { width: auto; align-self: flex-start; padding: 0 20px; } }
/* Pagos por verificar (docs/25): pedido, medio, monto y antigüedad; resaltado si pasó un día sin confirmar. */
.por-verificar { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "num medio monto" "nota nota nota"; gap: 2px 10px; align-items: baseline; background: var(--fondo-2); border-radius: 14px; padding: 10px 12px; }
.por-verificar .num-pedido { grid-area: num; font-family: var(--fuente-num); font-weight: 700; font-size: 15px; }
.por-verificar .medio { grid-area: medio; font-size: 14px; color: var(--tinta-2); min-width: 0; overflow-wrap: anywhere; }
.por-verificar .monto { grid-area: monto; font-family: var(--fuente-num); font-weight: 600; font-size: 15px; }
.por-verificar .nota { grid-area: nota; }
.por-verificar.atrasado { background: var(--aten-fondo); }
.por-verificar.atrasado .nota { color: var(--aten-texto); font-weight: 600; }
.por-verificar .enlace-shopify { margin-left: 8px; display: inline-block; padding: 6px 0; color: var(--verde); font-weight: 600; text-decoration: underline; }
.vacio { font-size: 14px; color: var(--tenue); margin: 0; }

/* Procesos */
.proceso { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--linea-suave); }
.proceso:first-of-type { border-top: 0; }
.proceso .ind { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.proceso .ind.OK { background: var(--ok); }
.proceso .ind.ATENCION { background: var(--aten-punto); }
.proceso .ind.FALLA { background: var(--falla); }
.proceso .que { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.proceso .que span:first-child { font-size: 14px; }
.proceso .que span + span { font-size: 12px; color: var(--tenue); }
.proceso .cuando { font-size: 12px; color: var(--tenue); text-align: right; }
.proceso .cuando.FALLA { color: var(--falla-fuerte); font-weight: 600; }

/* Pestañas de Actividad */
.pestanas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: #E3E8E5; border-radius: 12px; padding: 4px; position: relative; isolation: isolate; }
.pestanas .indicador { position: absolute; top: 4px; left: 4px; height: 40px; width: calc((100% - 16px) / 3); border-radius: 9px; background: var(--superficie); z-index: -1; }
.pestanas button { height: 40px; border: 0; background: none; border-radius: 9px; font-size: 14px; color: var(--tenue); cursor: pointer; }
.pestanas button[aria-selected="true"] { color: var(--tinta); font-weight: 600; }
.alerta { background: var(--superficie); border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; }
.alerta .sigla { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-num); font-weight: 700; font-size: 13px; }
.alerta .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.alerta .linea1 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.alerta .linea1 b { letter-spacing: .4px; }
.alerta .texto { font-size: 14px; line-height: 1.4; word-break: break-word; }
.CRITICO .sigla, .CRITICO b { color: var(--falla-fuerte); } .CRITICO .sigla { background: var(--falla-fondo); }
.RESUELTO .sigla, .RESUELTO b { color: var(--ok-tinta); } .RESUELTO .sigla { background: var(--ok-fondo); }
.REVISION .sigla, .REVISION b { color: var(--aten-tinta); } .REVISION .sigla { background: var(--aten-fondo); }
.REPORTE .sigla, .REPORTE b, .AVISO .sigla, .AVISO b { color: var(--gris-estado); } .REPORTE .sigla, .AVISO .sigla { background: #E9EEEC; }

/* Ingreso */
.ingreso { min-height: 100dvh; display: flex; flex-direction: column; background: var(--verde); }
.ingreso .marca { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 32px 28px 36px; color: #fff; }
.ingreso .marca .marca-g { width: 56px; height: 56px; border-radius: 16px; background: #fff; color: var(--verde); font-size: 28px; }
.ingreso .marca strong { font-family: var(--fuente-num); font-size: 32px; letter-spacing: .3px; }
.ingreso .marca span { font-size: 16px; line-height: 1.4; color: var(--verde-claro); }
.ingreso form { background: var(--fondo); border-radius: 28px 28px 0 0; padding: 28px 24px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.ingreso h1 { font-size: 22px; font-weight: 600; }
.ingreso .ayuda { margin: 0; font-size: 14px; line-height: 1.45; color: var(--tenue); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; font-weight: 600; }
.campo input { height: 50px; border-radius: 12px; border: 1px solid #C9D2CE; background: #fff; padding: 0 14px; font-size: 16px; color: var(--tinta); width: 100%; }
.campo input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(11, 93, 75, .18); }
.clave { position: relative; }
.clave input { padding-right: 52px; }
.clave button { position: absolute; right: 3px; top: 3px; width: 44px; height: 44px; border: 0; background: none; color: var(--tenue); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.error-ingreso { margin: 0; font-size: 13px; line-height: 1.4; color: var(--falla-fuerte); background: var(--falla-fondo); border-radius: 10px; padding: 10px 12px; }
.boton-principal { height: 52px; border-radius: 14px; border: 0; background: var(--verde); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.boton-principal:disabled { opacity: .7; cursor: progress; }
.pie-ingreso { display: flex; gap: 10px; font-size: 12px; line-height: 1.45; color: var(--tenue); }

/* Configuración (docs/24) */
.barra-inferior.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pestanas-config { display: flex; gap: 6px; overflow-x: auto; padding: 4px; background: #E3E8E5; border-radius: 12px; scrollbar-width: none; }
.pestanas-config::-webkit-scrollbar { display: none; }
.pestanas-config button { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--tenue); font-size: 14px; cursor: pointer; white-space: nowrap; }
.pestanas-config button[aria-selected="true"] { background: var(--superficie); color: var(--tinta); font-weight: 600; }
.pestanas-config .sin-guardar { color: var(--aten-tinta); font-weight: 700; }
@media (max-width: 600px) {   /* en el celular las pestañas en 3 columnas (7 desde Envíos): la elegida siempre a la vista, sin desplazar */
    .pestanas-config { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
    .pestanas-config button { padding: 0 6px; white-space: normal; line-height: 1.15; font-size: 13px; }
}
.ayuda-config { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
.aviso { margin: 0; font-size: 13px; line-height: 1.45; color: var(--aten-texto); background: var(--aten-fondo); border-radius: 10px; padding: 10px 12px; }
.vigente { margin: 0; font-size: 14px; }
.fila-config { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 12px; border-radius: 14px; background: var(--fondo-2); }
.campo-config { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 0; font-size: 12px; color: var(--tenue); }
.campo-config.ancho { flex: 2 1 220px; }
.tarjeta > .campo-config { flex: none; }   /* en la tarjeta (columna) la base de 220px estiraba el alto */
.lista-vendedores { border: 0; margin: 0; padding: 0; min-width: 0; }
.lista-vendedores legend { font-size: 12px; color: var(--tenue); padding: 0 0 4px; }
.opciones-vendedor { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; padding: 4px; border: 1px solid #C9D2CE; border-radius: 12px; background: #fff; overscroll-behavior: contain; }
.opcion-vendedor { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 9px; cursor: pointer; }
.opcion-vendedor input { width: 20px; height: 20px; flex: none; accent-color: var(--verde); }
.opcion-vendedor span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; color: var(--tinta); }
.opcion-vendedor strong { font-weight: 600; overflow-wrap: anywhere; }
.opcion-vendedor small { font-size: 12px; color: var(--tenue); }
.opcion-vendedor.elegido { background: var(--ok-fondo, #E4F2EC); }
.opcion-vendedor:focus-within { box-shadow: 0 0 0 3px rgba(11, 93, 75, .18); }
.lista-vendedores:disabled .opcion-vendedor { cursor: default; opacity: .6; }
.campo-config input, .campo-config select { min-height: 44px; border-radius: 10px; border: 1px solid #C9D2CE; background: #fff; padding: 0 10px; font-size: 15px; font-family: inherit; color: var(--tinta); width: 100%; }
.campo-config select[size] { padding: 6px; min-height: 0; }
.campo-config input:focus, .campo-config select:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(11, 93, 75, .18); }
.check { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; color: var(--tinta); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--verde); }
.tipos { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 14px; flex: 1 1 100%; }
.tipos legend { font-size: 12px; color: var(--tenue); padding: 0; }
.boton-secundario { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid #C9D2CE; background: #fff; color: var(--verde); font-weight: 600; cursor: pointer; }
.enlace { border: 0; background: none; color: var(--verde); font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0 2px; min-height: 0; }
.interruptor { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 16px; font-weight: 600; cursor: pointer; }
.interruptor input { width: 52px; height: 30px; accent-color: var(--verde); }
.confirmar .fila-guardar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.confirmar .boton-principal { flex: 1 1 180px; }
.exito { margin: 0; font-size: 13px; color: var(--ok-tinta); background: var(--ok-fondo); border-radius: 10px; padding: 10px 12px; }
.cambio { border-top: 1px solid var(--linea-suave); padding: 10px 0; }
.cambio summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 14px; flex-wrap: wrap; }
.cambio pre { margin: 4px 0 10px; padding: 10px; background: var(--fondo-2); border-radius: 10px; font-size: 12px; white-space: pre-wrap; word-break: break-word; }

/* Escritorio */
@media (min-width: 960px) {
    .barra-inferior { display: none; }
    .lateral { display: flex; flex-direction: column; gap: 28px; width: 240px; flex: none; background: var(--verde); color: #fff; padding: 28px 20px; position: sticky; top: 0; height: 100dvh; }
    .lateral .marca { display: flex; align-items: center; gap: 12px; }
    .lateral .marca .marca-g { background: #fff; color: var(--verde); }
    .lateral .marca strong { font-family: var(--fuente-num); font-size: 18px; display: block; }
    .lateral .marca span { font-size: 12px; color: var(--verde-claro); }
    .lateral nav { display: flex; flex-direction: column; gap: 4px; }
    .lateral nav a, .lateral nav button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: #E2F1EC; text-decoration: none; font-size: 14px; background: none; border: 0; cursor: pointer; text-align: left; }
    .lateral nav .activo { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
    .lateral .pie { margin-top: auto; font-size: 12px; line-height: 1.45; color: var(--verde-claro); }
    .cabecera { padding: 28px 40px 12px; }
    .cabecera .marca-g { display: none; }
    .cabecera .nombre { font-family: var(--fuente); font-size: 26px; font-weight: 600; }
    .pagina { padding: 4px 40px 40px; gap: 20px; }
    .rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
    .estado .titular { font-size: 22px; }
    .ingreso { flex-direction: row; }
    .ingreso .marca { justify-content: center; padding: 64px; }
    .ingreso form { width: 460px; border-radius: 0; justify-content: center; padding: 64px 48px; }
}
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}