/* Estilos compartidos por todas las páginas del portal (login, header, nav, tablas, modales). */
:root { color-scheme: light; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background: #f1f5f9; color: #0f172a; min-height: 100vh; }
.oculto { display: none !important; }

#vistaLogin { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f172a; }
.tarjetaLogin { background: #fff; border-radius: 16px; padding: 40px; width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,.4); text-align: center; }
.tarjetaLogin .logo-login { height: 56px; width: 56px; border-radius: 12px; display: block; margin: 0 auto 14px; }
.tarjetaLogin h1 { font-size: 22px; margin: 0 0 4px; }
.tarjetaLogin input, .tarjetaLogin button { text-align: left; }
.tarjetaLogin p.sub { color: #64748b; font-size: 13px; margin: 0 0 24px; }
.tarjetaLogin input { width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.tarjetaLogin button { width: 100%; padding: 11px; border: none; border-radius: 8px; background: #2563eb; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.tarjetaLogin button:hover { background: #1d4ed8; }
.tarjetaLogin .volver { background: transparent; color: #64748b; font-weight: 500; margin-top: 6px; }
.tarjetaLogin .volver:hover { background: #f1f5f9; color: #0f172a; }
#errorLogin { color: #dc2626; font-size: 13px; margin-top: 10px; min-height: 16px; }

header {
  background: #fff; color: #0f172a; padding: 11px 24px; display: flex; justify-content: space-between;
  align-items: center; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 30;
}
header .marca { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
header .marca-logo { height: 28px; width: 28px; border-radius: 8px; display: block; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
header .usuario { font-size: 12px; color: #64748b; background: #f1f5f9; padding: 5px 11px; border-radius: 999px; font-weight: 500; }
header button {
  background: #fff; border: 1px solid #e2e8f0; color: #334155; padding: 7px 13px; border-radius: 999px;
  cursor: pointer; font-size: 12px; font-weight: 600; transition: background .12s, border-color .12s, color .12s;
}
header button:hover { background: #f8fafc; border-color: #cbd5e1; }
header #campanitaAlertas { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

.nav-rapida {
  background: #fff; padding: 0 24px; display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid #e5e7eb; position: sticky; top: 53px; z-index: 29;
}
.nav-rapida a {
  color: #64748b; text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 11px 12px;
  border-bottom: 2px solid transparent; transition: color .12s, border-color .12s;
}
.nav-rapida a:hover { color: #0f172a; }
.nav-rapida a.activo { color: #2563eb; border-bottom-color: #2563eb; }
.nav-rapida a.nav-alerta { color: #d97706; }
.nav-rapida a.nav-alerta:hover { color: #b45309; }

main { max-width: 1400px; margin: 0 auto; padding: 28px; }
.panel { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.panel h2 { margin: 0 0 14px; font-size: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 8px; border-bottom: 2px solid #e2e8f0; color: #64748b; font-weight: 600; cursor: default; }
th.ordenable { cursor: pointer; }
th.ordenable:hover { color: #2563eb; }
td { padding: 8px; border-bottom: 1px solid #f1f5f9; }
.saldo-positivo { color: #dc2626; font-weight: 600; }
.saldo-cero { color: #16a34a; font-weight: 600; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge.credito { background: #fef3c7; color: #92400e; }
.badge.contado { background: #dbeafe; color: #1e40af; }
.badge.prepago { background: #dcfce7; color: #166534; }
.badge.inactivo { background: #fee2e2; color: #991b1b; }
.saldo-disponible { color: #16a34a; font-weight: 600; }

/* HWID largo (32 caracteres hex) oculto por defecto detrás de un botón de ojito — ver
   toggleHwid() en cliente-ver.html. Ancho fijo con monospace para que el botón no salte de
   posición al alternar entre la versión corta y la completa. */
.hwid-valor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.icono-ojo {
  background: none; border: none; cursor: pointer; font-size: 13px; padding: 0 2px;
  vertical-align: middle; line-height: 1;
}

.form-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.form-fila input, .form-fila select { padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; }
.form-fila button { padding: 8px 14px; border: none; border-radius: 6px; background: #2563eb; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
.form-fila button:hover { background: #1d4ed8; }
.form-fila button.secundario { background: #64748b; }
.accion-link {
  display: inline-flex; align-items: center; background: #eff6ff; border: 1px solid #dbeafe;
  color: #1d4ed8; cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 4px 10px;
  border-radius: 6px; text-decoration: none; transition: background .12s, border-color .12s;
}
.accion-link:hover { background: #dbeafe; border-color: #bfdbfe; }
.accion-link:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
/* Botones de eliminar/revocar reutilizan la misma pastilla, en tono rojo */
.accion-link[style*="color:#b91c1c"], .accion-link[style*="color: #b91c1c"] {
  background: #fef2f2 !important; border-color: #fecaca !important; color: #b91c1c !important;
}
.accion-link[style*="color:#b91c1c"]:hover, .accion-link[style*="color: #b91c1c"]:hover { background: #fee2e2 !important; }
.volver-link {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600;
  color: #475569; text-decoration: none; background: #f1f5f9; border: 1px solid #e2e8f0;
  padding: 4px 10px; border-radius: 6px; margin-left: 10px; vertical-align: middle;
}
.volver-link:hover { background: #e2e8f0; }
.mensaje { font-size: 13px; margin: 8px 0; padding: 8px 12px; border-radius: 6px; }
.mensaje.ok { background: #dcfce7; color: #166534; }
.mensaje.error { background: #fee2e2; color: #991b1b; }
select#selectCliente { min-width: 220px; }

.overlay-ficha { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.overlay-ficha.abierta { display: flex; }
.modal-ficha { background: #fff; border-radius: 12px; max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 24px; }
.modal-ficha h2 { margin: 0 0 4px; font-size: 17px; }
.modal-ficha .cerrar { float: right; background: none; border: none; font-size: 18px; cursor: pointer; color: #64748b; }
.modal-ficha.grande { max-width: 900px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 12px 0; }
.grid-2 label { display: block; font-size: 11.5px; color: #64748b; margin-bottom: 2px; }
.grid-2 input, .grid-2 select { width: 100%; padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; }
.seccion-ficha { border-top: 1px solid #e2e8f0; padding-top: 12px; margin-top: 12px; }
.seccion-ficha h3 { font-size: 13px; margin: 0 0 8px; color: #334155; }

#mapaRegistro { height: 260px; border-radius: 8px; margin: 10px 0; }
#mapaClientes { height: 360px; border-radius: 8px; }
#mapaVerCliente { height: 260px; border-radius: 8px; margin: 10px 0; }
textarea.direccion-completa { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical; }
.pin-pendiente { color: #b45309; font-size: 12px; }
.pin-listo { color: #16a34a; font-size: 12px; font-weight: 600; }

/* Stat tiles (panel de Ventas) */
.stat-tiles { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-tile { flex: 1; min-width: 140px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
.stat-tile .label { font-size: 11.5px; color: #64748b; margin-bottom: 4px; }
.stat-tile .valor { font-size: 24px; font-weight: 600; color: #0b0b0b; }

/* Diálogos propios del panel (zdAlert/zdConfirm/zdPrompt en common.js) — reemplazan
   alert()/confirm()/prompt() nativos para que ninguna ventana ajena al sistema aparezca. */
.zd-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.6); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.zd-modal-caja {
  background: #fff; border-radius: 14px; max-width: 420px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px;
}
.zd-modal-cuerpo { font-size: 14.5px; color: #0f172a; white-space: pre-wrap; line-height: 1.5; }
.zd-modal-input { padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; outline: none; }
.zd-modal-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.zd-modal-botones { display: flex; justify-content: flex-end; gap: 8px; }
.zd-modal-btn {
  padding: 8px 16px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff;
  color: #475569; font-weight: 600; font-size: 13px; cursor: pointer;
}
.zd-modal-btn:hover { background: #f8fafc; }
.zd-modal-btn-primario { background: #2563eb; border-color: #2563eb; color: #fff; }
.zd-modal-btn-primario:hover { background: #1d4ed8; }

/* Responsivo — el panel se instala como app en el celular (Panel ZDPOS) pero todo este archivo
   estaba pensado solo para escritorio: sin esto, las tablas anchas (9 columnas en "Ver cliente")
   empujan el ancho de la página entera y el encabezado/menú se salen de la pantalla en vez de
   acomodarse. Las tablas se vuelven scrolleables horizontalmente EN SÍ MISMAS (display:block +
   overflow-x:auto directo sobre <table>, sin tocar el HTML de cada página) en vez de reventar el
   layout completo. */
@media (max-width: 720px) {
  main { padding: 14px; }
  header { padding: 10px 14px; flex-wrap: wrap; gap: 8px; row-gap: 6px; position: static; }
  header .marca { font-size: 14px; }
  header > div { gap: 8px !important; flex-wrap: wrap; }
  .nav-rapida { position: static; }
  header button { padding: 5px 9px; font-size: 11px; }
  .nav-rapida { padding: 8px 14px; gap: 12px; }
  .nav-rapida a { font-size: 12px; }
  .panel { padding: 14px; border-radius: 8px; }

  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  thead, tbody, tr { display: table; width: 100%; table-layout: auto; }

  /* Tabla "Cajas" (9 columnas: Caja/HWID/Último latido/...) es la peor para scroll lateral en el
     celular — el usuario pidió explícitamente que en vez de arrastrar hacia la derecha para ver
     cada columna, cada caja se muestre apilada hacia abajo (scroll vertical normal). Reemplaza el
     comportamiento genérico de arriba solo para las tablas marcadas con esta clase, sin tocar el
     resto de tablas del portal. */
  table.tabla-cajas-movil { display: block; overflow-x: visible; white-space: normal; }
  table.tabla-cajas-movil thead { display: none; }
  table.tabla-cajas-movil, table.tabla-cajas-movil tbody { display: block; width: 100%; }
  table.tabla-cajas-movil tr {
    display: block; width: 100%; border: 1px solid #e2e8f0; border-radius: 8px;
    margin-bottom: 10px; padding: 4px 0;
  }
  table.tabla-cajas-movil td {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    text-align: right; border-bottom: 1px solid #f1f5f9; padding: 7px 10px;
  }
  table.tabla-cajas-movil td:last-child { border-bottom: none; }
  table.tabla-cajas-movil td::before {
    content: attr(data-label); font-weight: 600; color: #64748b; text-align: left;
    flex-shrink: 0;
  }

  .grid-2 { grid-template-columns: 1fr; }
  .form-fila { flex-direction: column; align-items: stretch; }
  .form-fila input, .form-fila select, .form-fila button { width: 100% !important; }
  select#selectCliente { min-width: 0; width: 100%; }

  .tarjetaLogin { width: 90vw; max-width: 340px; padding: 28px 24px; }
  .modal-ficha, .modal-ficha.grande { max-width: 94vw; padding: 18px; }
  #mapaClientes { height: 260px; }
}

/* 🆕 2026-08-25: contador (badge) de errores pendientes en la pestaña "Errores" del menú. */
.badge-nav {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}
.badge-nav.oculto { display: none; }