/* ==========================================================================
   PORTAL — estándar visual del admin v7 (02/11/2026)
   Tokens del sistema de diseño del admin (optopus-admin/docs/rediseno/optopus-ds.css):
   menú azul marino, fondo gris claro, tarjetas blancas, UN azul de marca.
   Verde/ámbar/rojo SOLO con significado. SOLO DISEÑO: no cambia cálculos,
   rutas, permisos ni lo que se envía.
   Todo va dentro de @media screen: la impresión (tickets 80 mm, consolidado)
   no cambia.
   ========================================================================== */
:root {
  --marino: #0F172A; --menu: #1a2742; --fondo: #F4F5F7; --tarjeta: #FFFFFF; --linea: #E7E9EE; --fila-alterna: #F8F9FB;
  --tinta: #0F172A; --tinta-2: #475467; --tinta-3: #667085; --apagado: #A0A7B4; --apagado-fondo: #EEF0F3;
  --marca: #3B5BFD; --marca-hover: #2F4BE6; --marca-suave: #ECF0FF; --marca-tinta: #2A3FC4;
  --bien: #15803D; --bien-fondo: #DCFCE7;
  --atencion: #B45309; --atencion-fondo: #FEF3C7; --atencion-marca: #F59E0B;
  --problema: #B91C1C; --problema-fondo: #FEE2E2; --problema-marca: #EF4444;
  --serie-1: #3344BA; --serie-2: #4D70FF; --serie-3: #8EA5FA; --serie-gris: #C9CED8;
  --fuente: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-heroe: 22px; --r-tarjeta: 16px; --r-interno: 10px; --r-pildora: 999px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
  --sombra-heroe: 0 10px 30px rgba(59, 91, 253, .28);
}

@media screen {
  /* ---------- Base y marco (todas las pantallas) ---------- */
  body { font-family: var(--fuente); background: var(--fondo); color: var(--tinta); -webkit-font-smoothing: antialiased; }
  .portal-header { background: var(--tarjeta); border-bottom: 1px solid var(--linea); }
  .ph-brand .ph-octo .ico { color: var(--marca); }
  .ph-meta { color: var(--tinta-3); }

  /* Menú lateral azul marino, como el admin */
  .sidebar { background: var(--menu); border-right: 0; }
  .sidebar .menu-item { color: rgba(255, 255, 255, .78); }
  .sidebar .menu-item:hover { background: rgba(255, 255, 255, .07); }
  .sidebar .menu-item.active { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 3px 0 0 #4f9cf9; }
  .sidebar .menu-item .mi-arrow { color: rgba(255, 255, 255, .45); }
  .sidebar .submenu-item { color: rgba(255, 255, 255, .7); }
  .sidebar .submenu-item:hover { background: rgba(255, 255, 255, .07); }
  .sidebar .submenu-item.active { background: rgba(255, 255, 255, .12); color: #fff; }
  .sidebar .submenu-item.active .sm-dot { color: #4f9cf9; }
  .sidebar .mi-badge { background: var(--marca); }
  .sidebar-divider, .sidebar-logout { border-color: rgba(255, 255, 255, .12); }
  .sidebar-logout .menu-item { color: #fca5a5; }
  .sidebar-logout .menu-item:hover { background: rgba(239, 68, 68, .15); color: #fecaca; }

  /* Ancho máximo centrado en pantallas grandes */
  .workspace { padding: 24px 28px; }
  .workspace > .view { max-width: 1280px; margin-left: auto; margin-right: auto; }
  .ws-header { margin-bottom: 20px; }
  .ws-breadcrumb { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--tinta-3); }
  .ws-title { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
  .ws-subtitle { color: var(--tinta-3); }
  .ws-refresh-btn { border-color: var(--linea); border-radius: var(--r-interno); }

  /* ======================================================
     INICIO (Pizarrón)
     ====================================================== */
  .pz { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; font-variant-numeric: tabular-nums; }
  .pz-heroe {
    grid-column: 1 / -1; background: var(--marca); color: #fff; border-radius: var(--r-heroe); box-shadow: var(--sombra-heroe);
    padding: 24px; display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(220px, 300px); column-gap: clamp(28px, 4vw, 64px); row-gap: 18px; align-items: center;
    position: relative; overflow: hidden;
  }
  .pz-heroe::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; border: 34px solid rgba(255, 255, 255, .07); pointer-events: none; }
  .pz-etq { font-size: 13px; color: rgba(255, 255, 255, .8); }
  .pz-cifra { font-size: 44px; font-weight: 500; letter-spacing: -.02em; line-height: 1.05; margin: 6px 0 8px; white-space: nowrap; }
  .pz-cifra small { font-size: 18px; font-weight: 400; opacity: .8; margin-right: 4px; }
  .pz-pie { font-size: 13px; color: rgba(255, 255, 255, .8); }
  .pz-lineas { margin: 0; position: relative; z-index: 1; }
  .pz-lineas > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 13px; }
  .pz-lineas > div:first-child { border-top: 0; }
  .pz-lineas dt { color: rgba(255, 255, 255, .82); }
  .pz-lineas dd { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
  .pz-dif { padding: 1px 8px; border-radius: var(--r-pildora); }
  .pz-dif.atencion { background: #fff; color: var(--atencion); }
  .pz-dif.problema { background: #fff; color: var(--problema); }
  .pz-deposito { position: relative; z-index: 1; background: #fff; color: var(--tinta); border-radius: var(--r-interno); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
  .pz-deposito span { font-size: 13px; font-weight: 600; color: var(--marca-tinta); }
  .pz-deposito b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
  .pz-deposito b small { font-size: 13px; color: var(--tinta-3); font-weight: 400; }
  .pz-cobro { grid-column: 1 / -1; position: relative; z-index: 1; }
  .pz-barra { display: flex; gap: 2px; height: 10px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .12); }
  .pz-barra i, .pz-ley i { display: block; }
  .pz-barra i { height: 100%; min-width: 3px; }
  .pz-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, .85); }
  .pz-ley span { display: inline-flex; align-items: center; gap: 6px; }
  .pz-ley i { width: 9px; height: 9px; border-radius: 2px; }
  .pz .efe { background: #fff; } .pz .tar { background: var(--marino); } .pz .transf { background: #A9B8FF; } .pz .depch { background: rgba(255, 255, 255, .45); }

  .pz-tarjeta { background: var(--tarjeta); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); padding: 20px; min-width: 0; grid-column: span 5; display: flex; flex-direction: column; }
  .pz-equipo { grid-column: span 7; }
  .pz-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  .pz-cab h2 { font-size: 15px; font-weight: 600; margin-right: auto; }
  .pz-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pildora); white-space: nowrap; }
  .pz-estado .ico { width: 14px; height: 14px; }
  .pz-estado.bien { color: var(--bien); background: var(--bien-fondo); }
  .pz-estado.atencion { color: var(--atencion); background: var(--atencion-fondo); }
  .pz-nota { font-size: 14px; color: var(--tinta-2); margin: 0 0 16px; }
  .pz-boton { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--marca); color: #fff; border: 0; border-radius: var(--r-interno); padding: 10px 16px; font-size: 14px; font-weight: 600; }
  .pz-boton:hover { background: var(--marca-hover); }
  .pz-boton .ico { width: 16px; height: 16px; }
  .pz-mio { display: grid; gap: 0; }
  .pz-mio > div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 2px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--tinta-2); }
  .pz-mio > div:first-child { border-top: 0; }
  .pz-mio b { font-size: 17px; font-weight: 600; color: var(--tinta); white-space: nowrap; }
  .pz-dif-txt { font-weight: 600; white-space: nowrap; }
  .pz-dif-txt.atencion { color: var(--atencion) !important; } .pz-dif-txt.problema { color: var(--problema) !important; }
  .pz-lista { list-style: none; margin: 0; padding: 0; font-size: 14px; }
  .pz-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; gap: 14px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--linea); }
  .pz-lista li:first-child { border-top: 0; }
  .pz-lista li.yo .quien { font-weight: 600; }
  .pz-lista .quien small { display: block; font-size: 12px; color: var(--tinta-3); }
  .pz-lista .fact { font-weight: 500; text-align: right; }
  .pz-lista .pz-dif-txt { text-align: right; }
  #pizarronMsgConsolidar { margin: 14px 0 0 !important; border-radius: var(--r-interno) !important; font-size: 13px !important; }

  /* ======================================================
     MI CIERRE DE CAJA
     ====================================================== */
  #view-cierre { font-variant-numeric: tabular-nums; }
  #view-cierre .grid { gap: 16px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  #view-cierre .card, #view-cierre .ing-wrap, #view-cierre .nota-wrap { background: var(--tarjeta); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); border: 0; }
  #view-cierre .card-h, #view-cierre .ing-title, #view-cierre .nota-wrap label {
    background: transparent; border: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta);
  }
  #view-cierre .card-h { padding: 18px 20px 4px; }
  #view-cierre .card-b { padding: 8px 20px 18px; }
  #view-cierre input:focus, #view-cierre textarea:focus { outline: none; border-color: var(--marca) !important; box-shadow: 0 0 0 3px var(--marca-suave) !important; }

  /* Conteo de billetes: campos del tamaño justo */
  #view-cierre .b-row { grid-template-columns: 56px 12px 88px 12px minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--fila-alterna); }
  #view-cierre .b-d { font-weight: 600; color: var(--tinta); font-size: 14px; text-align: right; }
  #view-cierre .b-x { color: var(--apagado); }
  #view-cierre .b-i { height: 34px; padding: 4px 8px; border: 1px solid var(--linea); border-radius: 8px; font-size: 15px; font-weight: 600; text-align: center; background: var(--fila-alterna); }
  #view-cierre .b-t { color: var(--tinta-2); font-weight: 500; font-size: 14px; }
  #view-cierre .b-total { grid-template-columns: 1fr auto; border-top: 1px solid var(--linea); margin-top: 6px; padding-top: 12px; }
  #view-cierre .b-tl { font-weight: 600; font-size: 14px; }
  #view-cierre .b-tv { color: var(--tinta); font-weight: 600; font-size: 20px; }

  /* Resumen del día: filas limpias; solo el Cuadre (dato del sistema) lleva el azul de marca */
  #view-cierre .r-row, #view-cierre .r-banco, #view-cierre .r-cuadre, #view-cierre .kpi {
    grid-template-columns: minmax(0, 1fr) 168px; gap: 12px; padding: 8px 2px; margin: 0; background: transparent; border: 0; border-top: 1px solid var(--linea); border-radius: 0;
  }
  #view-cierre .card-b > .r-row:first-child { border-top: 0; }
  #view-cierre .r-l, #view-cierre .r-banco-l, #view-cierre .kpi .l { color: var(--tinta-2); font-weight: 500; font-size: 14px; }
  #view-cierre .r-banco-l small, #view-cierre .kpi .l small, #view-cierre .r-cuadre-sub { color: var(--tinta-3); font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; }
  #view-cierre .r-i, #view-cierre .r-cuadre-input { height: 38px; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 8px; font-size: 16px; font-weight: 600; background: var(--fila-alterna); color: var(--tinta); text-align: right; }
  #view-cierre .r-banco-v, #view-cierre .kpi .v { background: transparent; border: 0; padding: 6px 12px; color: var(--tinta); font-size: 16px; font-weight: 600; text-align: right; }
  #view-cierre .r-cuadre { background: var(--marca-suave); border-radius: var(--r-interno); border-top: 0; padding: 10px 12px; margin: 8px 0; }
  #view-cierre .r-cuadre-title { color: var(--marca-tinta); font-weight: 600; font-size: 14px; }
  #view-cierre .r-cuadre-input { background: #fff; border: 1.5px solid var(--marca); color: var(--tinta); }
  #view-cierre .kpi-deposito .v { font-size: 18px; }

  /* Diferencia: grande, con signo y color según la magnitud */
  #view-cierre .kpi-diff { grid-template-columns: minmax(0, 1fr) auto; background: var(--fila-alterna); border-radius: var(--r-interno); border-top: 0; padding: 14px 16px; margin-top: 10px; }
  #view-cierre .kpi-diff .l { color: var(--tinta); font-weight: 600; font-size: 15px; }
  #view-cierre .kpi-diff .v { font-size: 30px; font-weight: 600; letter-spacing: -.01em; padding: 0; color: var(--tinta); background: transparent; border: 0; white-space: nowrap; }
  #view-cierre .kpi-diff.faltante .v { background: transparent; border: 0; }
  #view-cierre .kpi-diff.dif-atencion { background: var(--atencion-fondo); }
  #view-cierre .kpi-diff.dif-atencion .v, #view-cierre .kpi-diff.dif-atencion .dif-que { color: var(--atencion); }
  #view-cierre .kpi-diff.dif-problema { background: var(--problema-fondo); }
  #view-cierre .kpi-diff.dif-problema .v, #view-cierre .kpi-diff.dif-problema .dif-que { color: var(--problema); }
  #view-cierre .dif-que { font-size: 12px; font-weight: 600; color: var(--tinta-3); margin-left: 6px; }

  /* Traer y validar desde EPS: el azul de marca, sin degradado */
  #view-cierre .eps-btn { background: var(--marca); box-shadow: none; border-radius: var(--r-interno); font-weight: 600; }
  #view-cierre .eps-btn:hover:not(:disabled) { background: var(--marca-hover); transform: none; box-shadow: none; }
  #view-cierre .eps-box { margin: 10px 0; }

  /* Ingresos por banco */
  #view-cierre .ing-wrap { padding: 18px 20px; }
  #view-cierre .ing-count { color: var(--tinta-3); font-size: 12px; }
  #view-cierre .ing-add { background: var(--marca); border-radius: var(--r-interno); padding: 8px 14px; }
  #view-cierre .ing-add:hover { background: var(--marca-hover); }
  #view-cierre .ing-list { min-height: 0; }
  #view-cierre .ing-empty { font-style: normal; color: var(--tinta-3); padding: 6px 0 2px; text-align: left; }
  #view-cierre .ing-item { border-bottom: 1px solid var(--linea); }
  #view-cierre .ing-tipo { background: var(--apagado-fondo) !important; color: var(--tinta-2) !important; border-radius: var(--r-pildora); }
  #view-cierre .ing-tot-card { background: var(--fila-alterna); border-radius: var(--r-interno); padding: 10px 12px; }
  #view-cierre .ing-tot-l { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--tinta-3); }
  #view-cierre .ing-tot-v { font-size: 15px; font-weight: 600; }
  #view-cierre .ing-tot-card.grand { background: var(--marino); }

  /* Nota */
  #view-cierre .nota-wrap { padding: 18px 20px; }
  #view-cierre .nota-wrap textarea { border: 1px solid var(--linea); border-radius: var(--r-interno); background: var(--fila-alterna); font-size: 14px; }

  /* Facturación total del cajero: la tarjeta azul de marca (antes verde) */
  #view-cierre .fact-bar { background: var(--marca); box-shadow: var(--sombra-heroe); border-radius: var(--r-tarjeta); padding: 20px 24px; }
  #view-cierre .fact-bar-l { font-weight: 600; font-size: 14px; text-transform: none; }
  #view-cierre .fact-bar-l small { color: rgba(255, 255, 255, .8); font-weight: 400; }
  #view-cierre .fact-bar-v { font-weight: 600; font-size: 32px; letter-spacing: -.01em; }

  /* Acciones */
  #view-cierre .btn-clear, #view-cierre .btn-send, #view-cierre .ing-add { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  #view-cierre .ing-head { gap: 12px; }
  #view-cierre .btn-clear { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-interno); color: var(--tinta-2); font-weight: 600; }
  #view-cierre .btn-send { background: var(--marca); box-shadow: none; border-radius: var(--r-interno); font-weight: 600; letter-spacing: .01em; padding: 12px 28px; }
  #view-cierre .btn-send:hover { background: var(--marca-hover); }

  /* ======================================================
     EPS: SIN TRANSFERENCIA · CONDUCES · ERROR EN PESO
     Mismas tarjetas que Mi cierre. Verde/ámbar/rojo solo donde ya
     significaban algo (válido, aviso, error, sobrepeso).
     ====================================================== */
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) .card { background: var(--tarjeta); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); border: 0; }
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) .card-h {
    background: transparent; border: 0; padding: 18px 20px 4px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta);
    display: flex; align-items: center; gap: 8px;
  }
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) .card-h .ico { color: var(--marca); }
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) .card-b { padding: 10px 20px 20px; }
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) :is(.ops-field label, .ep-field label) { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--tinta-2); }
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) :is(.ops-field input, .ops-field textarea, .ep-field input[type="text"], .ep-field input[type="number"]) {
    border: 1px solid var(--linea); border-radius: var(--r-interno); background: var(--fila-alterna); color: var(--tinta); font-family: inherit;
  }
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) :is(.ops-field input, .ops-field textarea, .ep-field input):focus,
  :is(#view-sin-transferencia, #view-organizar-conduce) .ops-numbered-textarea:focus-within { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); background: #fff; }
  :is(#view-sin-transferencia, #view-organizar-conduce) .ops-numbered-textarea { border-color: var(--linea); border-radius: var(--r-interno); }
  :is(#view-sin-transferencia, #view-organizar-conduce) .ops-numbered-textarea textarea { background: transparent; border: 0; }
  :is(#view-sin-transferencia, #view-organizar-conduce) .ops-field input[readonly] { background: var(--apagado-fondo); color: var(--tinta-2); font-weight: 600; }
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) :is(.ops-field small, .ep-field small) { color: var(--tinta-3); }
  /* La validación en vivo del MIO conserva su verde/rojo */
  #view-error-peso .ep-field input.mio-valid { border-color: var(--bien); background: var(--bien-fondo); }
  #view-error-peso .ep-field input.mio-invalid { border-color: var(--problema-marca); background: var(--problema-fondo); }

  /* Avisos de arriba: informativos, sin color de alarma */
  :is(#view-sin-transferencia, #view-organizar-conduce) .ops-banner { background: var(--marca-suave); border: 0; border-radius: var(--r-tarjeta); color: var(--marca-tinta); }
  :is(#view-sin-transferencia, #view-organizar-conduce) .ops-banner .ico { color: var(--marca); }
  #view-error-peso .ep-hint { background: var(--marca-suave); border-left: 0; border-radius: var(--r-interno); color: var(--marca-tinta); }

  /* Contadores de MIOs: número grande, color solo si significa algo */
  #view-sin-transferencia .ops-kpi { background: var(--fila-alterna); border: 0; border-radius: var(--r-interno); }
  #view-sin-transferencia .ops-kpi span { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--tinta-3); }
  #view-sin-transferencia .ops-kpi strong { font-size: 24px; font-weight: 600; color: var(--tinta); }
  #view-sin-transferencia .ops-kpi.ok strong { color: var(--bien); }
  #view-sin-transferencia .ops-kpi.danger strong { color: var(--problema); }
  :is(#view-sin-transferencia, #view-organizar-conduce) .ops-validation { border-radius: var(--r-interno); }
  :is(#view-sin-transferencia, #view-organizar-conduce) :is(.ops-validation.empty, .ops-preview-empty) { background: var(--fila-alterna); border: 1px dashed var(--linea); color: var(--tinta-3); }
  :is(#view-sin-transferencia, #view-organizar-conduce) .ops-report { border-color: var(--linea); border-radius: var(--r-interno); }
  :is(#view-sin-transferencia, #view-organizar-conduce) .ops-report-head { background: var(--marino); }
  #view-organizar-conduce .ops-steps li.done { color: var(--bien); }
  #view-organizar-conduce .ops-steps li.pending { color: var(--tinta-3); }

  /* Error en Peso: pestañas como pastillas, la activa en azul de marca */
  #view-error-peso .ep-chip { border-color: var(--linea); border-radius: var(--r-pildora); color: var(--tinta-2); }
  #view-error-peso .ep-chip.active { background: var(--marca); border-color: var(--marca); color: #fff; }
  #view-error-peso .ep-chip-badge { background: var(--apagado-fondo); color: var(--tinta-2); }
  #view-error-peso .ep-chip-badge.alert { background: var(--atencion-fondo); color: var(--atencion); }
  #view-error-peso .ep-chip-badge.danger { background: var(--problema-fondo); color: var(--problema); }
  #view-error-peso .ep-chip.active .ep-chip-badge { background: rgba(255, 255, 255, .25); color: #fff; }
  #view-error-peso .ep-diferencia { border: 0; border-radius: var(--r-interno); background: var(--fila-alterna); }
  #view-error-peso .ep-diferencia.sobre { background: var(--problema-fondo); }
  #view-error-peso .ep-diferencia.sub { background: var(--atencion-fondo); }
  #view-error-peso .ep-dif-l { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--tinta); }
  #view-error-peso .ep-diferencia.sobre :is(.ep-dif-l, .ep-dif-l small, .ep-dif-v) { color: var(--problema); }
  #view-error-peso .ep-diferencia.sub :is(.ep-dif-l, .ep-dif-l small, .ep-dif-v) { color: var(--atencion); }
  #view-error-peso .ep-dif-v { border: 0; background: transparent; font-size: 26px; font-weight: 600; padding: 4px 0; }
  #view-error-peso .ep-fotos-input { border-color: var(--linea); border-radius: var(--r-interno); background: var(--fila-alterna); }
  #view-error-peso .ep-item { border-color: var(--linea); border-radius: var(--r-interno); }
  #view-error-peso .btn-volver-reportar { background: var(--marca); border-radius: var(--r-interno); }
  #view-error-peso .ep-status-info { background: var(--marca-suave); color: var(--marca-tinta); }

  /* Botones de enviar: azul de marca, sin degradado ni sombra verde */
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) :is(.btn-clear, .btn-send) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) .btn-clear { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-interno); color: var(--tinta-2); font-weight: 600; }
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) .btn-send { background: var(--marca); box-shadow: none; border-radius: var(--r-interno); font-weight: 600; padding: 12px 28px; }
  :is(#view-sin-transferencia, #view-organizar-conduce, #view-error-peso) .btn-send:hover { background: var(--marca-hover); transform: none; box-shadow: none; }

  /* ---------- Celular y tablet ---------- */
  @media (max-width: 900px) {
    .pz-heroe { grid-template-columns: minmax(0, 1fr); padding: 20px; }
    .pz-cifra { font-size: 36px; }
    .pz-tarjeta, .pz-equipo { grid-column: 1 / -1; }
    #view-cierre .grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 768px) {
    .workspace { padding: 16px; }
    .pz-lista li { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
    #view-cierre .r-row, #view-cierre .r-banco, #view-cierre .r-cuadre, #view-cierre .kpi { grid-template-columns: minmax(0, 1fr) 140px; }
    #view-cierre .kpi-diff { grid-template-columns: minmax(0, 1fr) auto; }
    #view-cierre .kpi-diff .v { font-size: 26px; }
    #view-cierre .fact-bar-v { font-size: 26px; }
    #view-cierre .b-row { grid-template-columns: 52px 10px 84px 10px minmax(0, 1fr); }
  }
}