/* =====================================================================
   Sistema Control de Despachos Valentino — Diseño web
   Lenguaje visual adoptado del sistema de seguimiento TRADEL
   (header navy, barra secundaria, tarjetas resumen, tabla densa).
   ===================================================================== */
:root {
  --primary:    #1a365d;   /* navy principal */
  --primary-lt: #2a4a7f;   /* navy claro (barra secundaria) */
  --accent:     #3182ce;   /* azul de acento */
  --bg:         #d3dae5;   /* fondo azul-gris */
  --card:       #ffffff;
  --border:     #e2e8f0;
  --text:       #2d3748;
  --muted:      #718096;
  --success:    #38a169;
  --danger:     #e53e3e;
  --warning:    #dd6b20;
  --purple:     #6b46c1;
  --gray:       #718096;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg); color: var(--text); font-size: 13px;
  height: 100vh; overflow: hidden; display: flex; flex-direction: column;
}

/* ══════════════ HEADER ══════════════ */
.header {
  background: var(--primary); color: #fff;
  padding: 0 24px; height: 58px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  position: sticky; top: 0; z-index: 200;
}
.header-left { display: flex; align-items: center; gap: 14px; }
.brand-logo { display: flex; align-items: center; }
.brand-logo img { height: 42px; width: auto; display: block; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 10px;
  background: #fff; color: var(--primary);
  font-weight: 900; font-size: 24px;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.divider-v { width: 1px; height: 38px; background: rgba(255,255,255,.25); }
.header-title h1 { font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.header-title .sub { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 1px; letter-spacing: .5px; }
.header-right { display: flex; align-items: center; gap: 16px; }
#currentDate { font-size: 11px; color: rgba(255,255,255,.7); text-transform: capitalize; }

/* Usuario en sesión + botón cerrar sesión */
.user-box { display: flex; align-items: center; gap: 8px; }
.user-ico { font-size: 14px; }
#userName { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .2px; }
.btn-logout {
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.10);
  color: #fff; font-size: 11px; font-weight: 600; padding: 5px 11px;
  border-radius: 6px; cursor: pointer; transition: background .15s;
}
.btn-logout:hover { background: rgba(255,255,255,.22); }

/* ══════════════ LOGIN GATE (primera ventana) ══════════════ */
#loginGate {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a365d 0%, #2b6cb0 100%);
}
#loginGate.show { display: flex; }
.login-card {
  background: #fff; border-radius: 14px; padding: 30px 30px 34px;
  width: 360px; max-width: 92vw;
  box-shadow: 0 18px 60px rgba(0,0,0,.35); text-align: center;
}
.brand-logo--login { justify-content: center; margin-bottom: 6px; }
.brand-logo--login img { height: auto; width: 240px; max-width: 100%; }
.login-card h2 { font-size: 16px; font-weight: 800; color: #1a202c; margin: 8px 0 2px; }
.login-card p { font-size: 12px; color: #718096; margin: 0 0 18px; }
.login-card label {
  display: block; text-align: left; font-size: 12px; font-weight: 600;
  color: #4a5568; margin-bottom: 4px;
}
.login-card select, .login-card input {
  width: 100%; padding: 10px; margin-bottom: 14px; box-sizing: border-box;
  border: 1px solid #cbd5e0; border-radius: 7px; font-size: 14px;
  font-family: inherit;
}
.login-card select:focus, .login-card input:focus {
  outline: none; border-color: #3182ce; box-shadow: 0 0 0 3px rgba(49,130,206,.15);
}
.login-card > button {
  width: 100%; padding: 11px; border: none; border-radius: 7px;
  background: #2b6cb0; color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.login-card > button:hover { background: #2c5282; }
#gateErr { color: #c53030; font-size: 12px; min-height: 16px; margin-bottom: 8px; }
.pass-wrap { display: flex; gap: 6px; align-items: stretch; margin-bottom: 14px; }
.pass-wrap input { margin-bottom: 0 !important; flex: 1; }
.pass-toggle {
  flex: 0 0 auto; width: auto; padding: 0 12px;
  border: 1px solid #cbd5e0; border-radius: 7px;
  background: #edf2f7; color: #2d3748;
  font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap; user-select: none;
}
.pass-toggle:hover { background: #e2e8f0; }
.pass-toggle:active { background: #cbd5e0; }

/* ══════════════ BARRA SECUNDARIA ══════════════ */
.subbar {
  background: var(--primary-lt); padding: 9px 24px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.subbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-field {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: rgba(255,255,255,.8);
}

/* ══════════════ BOTONES ══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 11px; border: none; border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: Arial, Helvetica, sans-serif; transition: filter .15s, background .15s;
  white-space: nowrap; line-height: 1.4; width: auto; flex: 0 0 auto;
}
.btn:hover { filter: brightness(1.03); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
/* El atributo `hidden` debe ocultar SIEMPRE: cualquier clase que fije `display`
   (.btn, .cierre-badge, etc.) gana sobre el `display:none` que el navegador da a
   [hidden]. Esta regla global lo garantiza para todo elemento marcado hidden
   desde JS (botones Finalizada/Editar/Guardar y el badge de estado incluidos). */
[hidden] { display: none !important; }

/* Botones estilo "contorno suave" (adoptado del Sistema de Seguimiento de
   Guías, según referencia): fondo blanco con un ligero tinte del color, borde
   del color y texto/ícono del color. El color comunica la acción: verde =
   agregar/guardar, azul = descargar/PDF/Excel, gris = cerrar/cancelar,
   rojo = eliminar, morado = destacado. NO aplica al menú "Operaciones"
   (usa .btn-gray, que va sobre la barra oscura y se mantiene igual). */
.btn-green   { background: #eef8f1; color: #2f7a4d; border: 1px solid #a7e0bf; }
.btn-green:hover  { background: #e2f4e8; filter: none; }
.btn-blue    { background: #eef5fd; color: #2b6cb0; border: 1px solid #a9d3f5; }
.btn-blue:hover   { background: #e1eefb; filter: none; }
.btn-red     { background: #fdeded; color: #c53030; border: 1px solid #f5b7b7; }
.btn-red:hover    { background: #fbdede; filter: none; }
.btn-purple  { background: #f3eefb; color: #6b46c1; border: 1px solid #cbb6ec; }
.btn-purple:hover { background: #ebe1f8; filter: none; }
.btn-gray    { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-gray:hover   { filter: brightness(1.12); }
.btn-gray-lt { background: #f7fafc; color: #566172; border: 1px solid #cbd5e0; }
.btn-gray-lt:hover { background: #edf2f7; color: var(--text); filter: none; }
.btn-ghost   { background: #eef5fd; color: #2b6cb0; border: 1px solid #a9d3f5; }
.btn-ghost:hover { background: #e1eefb; filter: none; }
/* Botón Cerrar ubicado en la cabecera del modal (donde iba la "X") */
.btn-cerrar { background: #f7fafc; color: var(--muted); border: 1px solid var(--border); padding: 4px 12px; font-size: 12px; font-weight: 700; }
.btn-cerrar:hover { background: #edf2f7; color: var(--text); filter: none; }
/* Botones solo-icono (Guardar / Eliminar) */
.btn-ico { padding: 4px 7px; font-size: 14px; line-height: 1; border-radius: 6px; }

/* ══════════════ MENÚ DESPLEGABLE (Operaciones) ══════════════ */
.menu { position: relative; display: inline-flex; }
.menu-caret { font-size: 10px; }
.menu-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 200px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(26,54,93,.22);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.menu-list[hidden] { display: none; }
/* El menú Operaciones está pegado al borde derecho: su lista se abre hacia
   la izquierda para que "Gestionar Destinos" no quede fuera de pantalla. */
#menu-operaciones .menu-list { left: auto; right: 0; }
/* El menú Exportar del bloque "Resumen del periodo" se ajusta al ancho del
   bloque (left+right en vez de min-width) para que no sobresalga por la
   izquierda. El bloque tiene un mínimo que alcanza para "Descargar Excel". */
#menu-export-resumen .menu-list { left: 0; right: 0; min-width: 0; }
/* Separador entre "Descargar Excel" y "Guardar PDF": la línea suelta se ve poco. */
#menu-export-resumen-list .menu-item + .menu-item {
  border-top: 1px solid #c3d0e2; margin-top: 3px; padding-top: 11px;
}

/* Botón Exportar dentro del bloque "Resumen del periodo" (antes de las cifras). */
.menu-export-stat { display: flex; margin-bottom: 2px; }
.menu-export-stat > .btn { width: 100%; }
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; border: none; border-radius: 6px; background: transparent;
  color: var(--text); font: 700 12px Arial, Helvetica, sans-serif;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.menu-item:hover { background: #ebf2fb; color: var(--primary); }
/* Separador más visible entre las opciones del menú "Operaciones". Se dibuja
   sobre cada opción visible que tenga otra opción visible encima, de modo que
   no aparezca una línea suelta arriba de la primera (aunque "Usuarios" esté
   oculto para roles que no son admin). */
#menu-operaciones-list .menu-item:not([hidden]) + .menu-item:not([hidden]) {
  border-top: 1px solid #c3d0e2; margin-top: 3px; padding-top: 11px;
}
.btn-sm { padding: 4px 9px; font-size: 11px; border-radius: 6px; }

/* Botón "Exportar" (junto a "Despachos registrados") — más visible */
.btn-export {
  background: linear-gradient(180deg, #38a169, #2f855a);
  color: #fff; border: 1px solid #276749;
  padding: 6px 14px; font-size: 12px; font-weight: 800;
  border-radius: 7px; display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 2px 5px rgba(47,133,90,.35); letter-spacing: .3px;
}
.btn-export:hover { filter: brightness(1.07); box-shadow: 0 3px 8px rgba(47,133,90,.45); }
.btn-export .btn-export-ico { font-size: 15px; line-height: 1; }
.btn-export[aria-expanded="true"] { filter: brightness(.95); }
.menu-item .mi-ico { font-size: 14px; }

.icon-btn {
  border: none; background: transparent; cursor: pointer; font-size: 14px;
  width: 28px; height: 26px; border-radius: 5px; line-height: 1; transition: background .15s;
}
.icon-btn:hover { background: #e2e8f0; }

/* ══════════════ PESTAÑAS ══════════════ */
.tabs {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 24px 0; flex: 0 0 auto;
}
.tab {
  border: 1px solid var(--border); border-bottom: none;
  background: var(--accent); color: #fff;
  padding: 9px 20px; border-radius: 9px 9px 0 0;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  display: inline-flex; align-items: center; gap: 7px;
  transition: filter .15s, background .15s; white-space: nowrap;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.12);
}
/* Pestaña alineada a la derecha de la fila (misma altura). */
.tab-derecha { margin-left: auto; }
.tab:hover { filter: brightness(1.08); }
.tab .tab-ico { font-size: 14px; }
.tab.active {
  background: #fff; color: var(--primary);
  border-color: var(--border);
  box-shadow: 0 -3px 8px rgba(26,54,93,.12);
  position: relative; z-index: 2; cursor: default;
}
.tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--accent); border-radius: 9px 9px 0 0;
}

/* ══════════════ PANELES (contenido de cada pestaña) ══════════════ */
.panel {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.panel[hidden] { display: none; }

/* ══════════════ FILA DE FILTROS ══════════════ */
.filtros {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 24px; padding: 9px 14px; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--border);
  border-radius: 0 8px 8px 8px; box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.filtros-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .6px;
  color: var(--primary); text-transform: uppercase;
}
.filtro-search {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; padding: 0 10px; height: 30px; min-width: 200px;
}
.filtro-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(49,130,206,.2); }
.filtro-search .fs-ico { color: var(--muted); font-size: 12px; }
.filtro-search input {
  border: none; outline: none; background: transparent;
  font-size: 12px; font-family: Arial, Helvetica, sans-serif;
  color: var(--text); width: 100%; height: 100%;
}
.filtro-rango {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 4px 0 10px; border-left: 1px dashed var(--border);
}
.filtro-rango .fr-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  color: var(--muted); text-transform: uppercase;
}
.filtro-rango .fr-sep { color: var(--muted); }
.filtros .fi { height: 30px; padding: 3px 8px; }
.filtro-total { min-width: 150px; }
/* Pegado a "Buscar Total" (a su derecha), separado solo por el gap de la fila. */
#btn-limpiar { margin-left: 0; }

/* Búsquedas por columna embebidas en la tabla "Resumen por quincena": van
   dentro del table-wrap, por lo que se anula el margen lateral de .filtros. */
.filtros-graf { margin: 0 0 12px; border-radius: 8px; }
.filtro-graf-mes { min-width: 190px; }
.filtro-graf-quin { min-width: 140px; }
.filtro-graf-total { min-width: 160px; }

/* ══════════════ CIERRE DE QUINCENA (Finalizada / Editar) ══════════════ */
/* Grupo de botones pegado al extremo derecho de la fila de filtros. */
.cierre-box {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
}
/* Botón naranja "Finalizada" (mismo estilo de contorno suave que los demás). */
.btn-orange { background: #fff3e6; color: #c05621; border: 1px solid #f6c68a; }
.btn-orange:hover { background: #ffe9d3; filter: none; }
/* Indicador del estado actual de la quincena. */
.cierre-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.cierre-badge.finalizada { background: #fdeded; color: #c53030; border: 1px solid #f5b7b7; }
.cierre-badge.edicion    { background: #fff7e6; color: #b7791f; border: 1px solid #f0d089; }

/* Estado BLOQUEADO: se aplica a los paneles Despachos y Resumen cuando la
   quincena está finalizada. Oculta los botones de acción de cada fila y marca
   como "no editable" las tablas (el doble-clic queda desactivado desde JS). */
.panel.q-bloqueada .acciones-cell .icon-btn { display: none; }
.panel.q-bloqueada #tbody tr,
.panel.q-bloqueada #tbody-n tr,
.panel.q-bloqueada #tb-abonos tr { cursor: default; }
/* Cinta sutil para reforzar que la quincena está cerrada. */
.panel.q-bloqueada .table-scroll { position: relative; }

/* ══════════════ TARJETAS RESUMEN ══════════════ */
.cards { padding: 10px 24px 4px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.cards-title {
  font-size: 10px; font-weight: 800; color: var(--primary);
  text-transform: uppercase; letter-spacing: .4px;
}
.cards-row { display: flex; gap: 12px; align-items: stretch; }
.card {
  flex: 1; background: #f4f6f9; border-radius: 6px; padding: 8px 14px;
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.card-num { font-size: 22px; font-weight: 800; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); }
.card-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.c-desp   { border-left-color: var(--accent);  } .c-desp  .card-num { color: var(--accent);  }
.c-peso   { border-left-color: var(--purple);  } .c-peso  .card-num { color: var(--purple);  }
.c-costo  { border-left-color: var(--warning); } .c-costo .card-num { color: var(--warning); }
.c-igv    { border-left-color: var(--gray);    } .c-igv   .card-num { color: var(--gray);    }
.c-total  { border-left-color: var(--success); } .c-total .card-num { color: var(--success); }

/* ══════════════ RESUMEN: cuadros despacho/abonos/clientes ══════════════ */
/* La pestaña Resumen apila varios bloques: se desplaza como un todo. */
#panel-resumen { overflow-y: auto; }
#panel-resumen .table-wrap { flex: 0 0 auto; }

/* ══════════════ RESUMEN Y GRÁFICOS ══════════════ */
/* Igual que Resumen: los bloques se apilan y la pestaña entera hace scroll. */
#panel-graficos { overflow-y: auto; }
#panel-graficos .table-wrap { flex: 0 0 auto; }

.graf-wrap {
  margin: 10px 24px 16px; background: var(--card); border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); overflow: hidden; flex: 0 0 auto;
}
.graf-metricas { display: flex; gap: 6px; flex-wrap: wrap; }
.graf-chip {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: #eef2f8; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; transition: background .12s, color .12s;
}
.graf-chip:hover { background: #e2e9f4; }
.graf-chip.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Fondo azul oscuro (estilo tablero financiero) para el área del gráfico: un
   degradado con un leve resplandor arriba a la derecha. Sobre él, los textos y
   la grilla van en tonos claros para que se lean bien. */
.graf-chart-scroll { overflow-x: auto; padding: 12px 16px 16px; border-top: 1px solid var(--border);
  background: radial-gradient(120% 130% at 78% 8%, #17427a 0%, #0d2a52 42%, #071a35 100%); }
.graf-svg { display: block; }
/* Grilla y eje recesivos: no compiten con las barras. */
.graf-grid { stroke: rgba(255,255,255,.10); stroke-width: 1; stroke-dasharray: 3 4; }
.graf-baseline { stroke: rgba(255,255,255,.28); stroke-width: 1.5; }
.graf-axis { fill: #9fb8dc; font-size: 10px; font-variant-numeric: tabular-nums; }
/* Barra: degradado (definido en el SVG) + sombra suave; realce al pasar el mouse. */
.graf-bar { transition: filter .12s, opacity .12s; opacity: .95;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.graf-bar-hit { fill: transparent; transition: fill .12s; }
.graf-bar-g { cursor: default; }
.graf-bar-g:hover .graf-bar-hit { fill: rgba(255,255,255,.06); }
.graf-bar-g:hover .graf-bar { opacity: 1; filter: drop-shadow(0 3px 7px rgba(0,0,0,.5)); }
.graf-val { fill: #f2f7ff; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.graf-bar-g:hover .graf-val { fill: #bfe3ff; }
.graf-xlbl { fill: #dce8fb; font-size: 10.5px; font-weight: 600; }
.graf-xanio { fill: #93a9cc; font-size: 9.5px; }

/* ══════════════ PESTAÑA OPERARIO ══════════════ */
#panel-operario { overflow-y: auto; }
.op-wrap { padding: 12px 24px 24px; display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
/* Botón grande (didáctico) */
.btn-lg { padding: 11px 22px; font-size: 14px; border-radius: 9px; }

/* Tarjeta didáctica de instrucciones */
.op-guia {
  background: linear-gradient(135deg, #eef3fb 0%, #e7f0fa 100%);
  border: 1px solid #cddcf0; border-left: 5px solid var(--accent);
  border-radius: 10px; padding: 16px 18px;
}
.op-guia-head { display: flex; gap: 14px; align-items: flex-start; }
.op-guia-ico { font-size: 32px; line-height: 1; flex: 0 0 auto; }
.op-guia-txt h3 { margin: 0 0 3px; color: var(--primary); font-size: 17px; }
.op-guia-txt p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.5; }
.op-pasos { margin: 12px 0 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
  grid-auto-flow: column; gap: 8px 28px; }
.op-pasos li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px;
  color: var(--text); line-height: 1.4; white-space: nowrap; }
.op-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; align-self: center; }

/* Barra: fecha del día + botón que abre la ventana de registro */
.op-bar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 12px 16px; }
.op-fecha-box { display: flex; flex-direction: column; gap: 4px; }
.op-fecha-box label { font-size: 12px; font-weight: 700; color: var(--primary); }
.op-fecha-box .fi { height: 38px; font-size: 14px; font-weight: 700; }
/* Grupo de acciones (Exportar + Nueva Línea) pegado a la derecha de la barra. */
.op-bar-acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.op-req { color: var(--danger); font-weight: 800; }

/* Encabezado del día */
.op-dia-titulo { margin: 4px 2px 0; color: var(--primary); font-size: 15px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* Bloques por cliente / grupo (Nico en uno, Valentino en otro…) */
#op-bloques { display: flex; flex-direction: column; gap: 14px; }
.op-bloque { background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.op-bloque-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: #eef3fb;
  border-bottom: 1px solid var(--border); }
.op-bloque-nom { font-size: 15px; font-weight: 800; color: var(--primary); }
.op-bloque-sub { font-size: 12px; font-weight: 600; color: var(--muted); }
/* Botón "Importar" (solo bloque Valentino): pegado al lado derecho del título. */
.op-importar { margin-left: auto; align-self: center; }
.op-bloque .table-scroll { overflow-x: auto; }
.op-tabla { width: 100%; }
.op-tabla th, .op-tabla td { white-space: nowrap; }
.op-tabla .acciones { text-align: right; width: 1%; }
/* Columna de selección (solo bloque Valentino) para importar a Despachos. */
.op-tabla .op-check-cell { width: 1%; text-align: center; padding-left: 12px; padding-right: 6px; }
.op-check, .op-check-all { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); vertical-align: middle; margin: 0; }

@media (max-width: 620px) {
  .op-wrap { padding: 10px 12px 20px; }
  .op-bar-acciones { margin-left: 0; width: 100%; }
  .op-bar-acciones .menu, .op-bar-acciones #btn-op-nuevo { flex: 1 1 0; }
  .op-bar-acciones #btn-export-op { width: 100%; }
  .op-pasos { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .op-pasos li { white-space: normal; }
}

/* La ventana de registro del operario reutiliza el modal estándar (.campo/.fi) */
#modal-operario .campo-hint { font-weight: 400; }

/* ══════════════ MODO OPERARIO (acceso desde el celular) ══════════════
   El rol "operario" entra desde su celular y SOLO usa la pestaña Operario.
   Se oculta el resto de la interfaz (otras pestañas, barra de periodo y menú
   Operaciones) y se optimiza el diseño para una pantalla angosta y táctil. */
body.modo-operario .subbar,
body.modo-operario .tabs { display: none; }

/* El panel ocupa todo el ancho disponible y el header se compacta. */
body.modo-operario .op-wrap { max-width: 100%; margin: 0 auto; }
body.modo-operario .header { padding: 0 14px; }
body.modo-operario .header-title .sub { display: none; }

@media (max-width: 640px) {
  body.modo-operario .header { height: 52px; }
  body.modo-operario .header-title h1 { font-size: 14px; }
  body.modo-operario #currentDate { display: none; }
  body.modo-operario .brand-logo img { height: 34px; }
  /* Controles grandes: más fáciles de tocar con el dedo. */
  body.modo-operario .op-fecha-box { width: 100%; }
  body.modo-operario .op-fecha-box .fi { height: 44px; font-size: 16px; }
  body.modo-operario .op-bar-acciones .btn { padding: 13px 18px; font-size: 15px; }
}

/* ══════════════ MODO EJECUTIVO(A) (rol "ejecutivo") ══════════════
   El rol "ejecutivo(a)" (p. ej. Nicole) SOLO usa la pestaña Nicole: la
   administra por completo. Se ocultan las demás pestañas y el menú Operaciones;
   se conserva la barra de periodo (Año/Mes/Quincena), que la pestaña Nicole
   necesita. El bloqueo real lo hace el servidor (app_web.py: exigir_permiso). */
/* El ejecutivo(a) solo ve las pestañas del cliente Nicole: sus despachos, su
   Resumen y sus Estadísticas. */
body.modo-ejecutivo .tab:not([data-tab="nicole"]):not([data-tab="resumen-nicole"]):not([data-tab="graficos-nicole"]) { display: none; }
body.modo-ejecutivo #menu-operaciones { display: none; }

/* Menú "Operaciones" propio de Nicole (sus catálogos separados): solo aparece
   en las pestañas de Nicole. En ese contexto se oculta el de Valentino para no
   mostrar dos menús a la vez (admin/usuario ven el de Valentino en las demás
   pestañas; el ejecutivo(a) solo ve el de Nicole, siempre en contexto Nicole). */
#menu-operaciones-nicole { display: none; }
body.contexto-nicole #menu-operaciones-nicole { display: block; }
body.contexto-nicole #menu-operaciones { display: none; }

/* ══════════════ BOTONES DE VISTA (grupos de pestañas) ══════════════
   Agrupan las pestañas para no mostrarlas todas juntas. Solo los ven el
   administrador y el rol "usuario" (body.puede-vistas). El estilo (tarjetas de
   colores pastel con borde y texto del mismo tono) sigue la imagen de
   referencia. Cada botón activa un grupo de pestañas (body.grupo-*). */
.vistas { display: none; gap: 8px; }
body.puede-vistas .vistas { display: flex; }
.vista-btn {
  border: 2px solid; border-radius: 10px;
  padding: 6px 16px; min-width: 96px;
  font-size: 12px; font-weight: 800; letter-spacing: .4px;
  font-family: Arial, Helvetica, sans-serif; cursor: pointer;
  text-transform: uppercase; line-height: 1.3;
  transition: filter .15s, transform .05s, box-shadow .15s;
}
.vista-btn:hover { filter: brightness(1.04); }
.vista-btn:active { transform: translateY(1px); }
.vista-btn.active { box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.22); }

/* Colores por vista (fondo pastel · borde y texto del mismo tono). */
.vista-valentino { background:#fff3e0; border-color:#f0a742; color:#b9770e; }
.vista-operario  { background:#e6f0fb; border-color:#6ba7de; color:#2c6cae; }
.vista-ejecutivo { background:#efe9f9; border-color:#a488d6; color:#6b4fa8; }
.vista-conta     { background:#fce6e6; border-color:#df8f8f; color:#b23b3b; }

/* Vista activa: fondo un poco más intenso para destacarla. */
.vista-valentino.active { background:#fbe3bf; }
.vista-operario.active  { background:#cfe2f7; }
.vista-ejecutivo.active { background:#e0d5f3; }
.vista-conta.active     { background:#f7cfcf; }

/* Cada vista muestra solo su conjunto de pestañas (aplica a admin/usuario, los
   únicos con clase de grupo en el <body>). */
/* Valentino → todo menos las pestañas de Nicole ni Conta. */
body.grupo-valentino .tab[data-tab="nicole"],
body.grupo-valentino .tab[data-tab="resumen-nicole"],
body.grupo-valentino .tab[data-tab="graficos-nicole"],
body.grupo-valentino .tab[data-tab="conta"],
body.grupo-valentino .tab[data-tab="conta-resumen"],
body.grupo-valentino .tab[data-tab="operario"] { display: none; }
/* Operario → solo la pestaña Operario. */
body.grupo-operario .tab:not([data-tab="operario"]) { display: none; }
/* Ejecutivo → solo las pestañas de Nicole. */
body.grupo-ejecutivo .tab:not([data-tab="nicole"]):not([data-tab="resumen-nicole"]):not([data-tab="graficos-nicole"]) { display: none; }
/* Conta → sus pestañas: Conta (detalle) y Resumen (por factura/quincena). */
body.grupo-conta .tab:not([data-tab="conta"]):not([data-tab="conta-resumen"]) { display: none; }

/* Placeholder de la vista Conta (sección aún sin funciones). */
.conta-placeholder {
  text-align: center; color: #718096;
  padding: 60px 20px; margin: 24px;
  background: #fff; border: 1px dashed var(--border); border-radius: 12px;
}
.conta-placeholder .conta-ico { font-size: 46px; }
.conta-placeholder h3 { margin: 10px 0 4px; color: var(--primary); }
.conta-placeholder p { margin: 0; font-size: 13px; }

/* En celulares, cualquier ventana (modal) ocupa toda la pantalla y sus campos
   pasan a UNA sola columna: más legibles y fáciles de llenar con el pulgar.
   El modal de confirmación se mantiene pequeño y centrado. */
@media (max-width: 640px) {
  /* La ventana se ancla arriba y ocupa la altura VISIBLE real del móvil
     (100dvh descuenta la barra de direcciones del navegador). Antes usaba
     min-height:100% (= 100vh, incluye el área bajo la barra del navegador),
     por lo que el pie con los botones (Agregar/Guardar) quedaba por debajo de
     la pantalla y no se podía tocar. Ahora el cuerpo hace scroll interno y el
     pie queda SIEMPRE fijo y visible dentro de la pantalla. */
  .modal-backdrop { padding: 0; align-items: start; }
  .modal:not(.modal-confirm) {
    width: 100%; max-width: 100%;
    height: 100dvh; max-height: 100dvh; min-height: 0;
    border-radius: 0; display: flex; flex-direction: column;
  }
  .modal:not(.modal-confirm) .modal-body {
    grid-template-columns: 1fr; overflow-y: auto; flex: 1 1 auto; min-height: 0;
  }
  .modal:not(.modal-confirm) .modal-foot { flex: 0 0 auto; }
  /* 16px evita que iOS haga zoom automático al enfocar un campo. */
  .fi { font-size: 16px; }
}

/* Facturación por cliente por quincena */
.resumen-tabla-fact .fact-mes, .resumen-tabla-fact .fact-q {
  vertical-align: middle; background: #f7fafc; border-right: 1px solid var(--border);
}
.resumen-tabla-fact .fact-q { font-weight: 700; color: var(--primary); }
.resumen-tabla-fact tr.fact-fin-grupo > td { border-bottom: 2px solid #cbd5e0; }

/* DIFERENCIA: es de la quincena (no de cada cliente), por eso va en una sola
   celda que abarca sus filas, centrada como MES y QUINCENA. Se ubica antes de
   BULTOS y se separa de las columnas de importes con un borde. */
.resumen-tabla-fact .fact-dif {
  vertical-align: middle; background: #f7fafc; border-right: 1px solid var(--border);
}

/* Cierre de cada MES facturado: fila con los totales de ese mes. Se distingue
   de las filas de clientes y de los TOTALES GENERALES del pie. */
.resumen-tabla-fact tr.fact-tot-mes > td {
  background: #edf2f7; font-weight: 800; color: var(--primary);
  border-top: 2px solid #cbd5e0; border-bottom: 2px solid #cbd5e0;
}
.resumen-tabla-fact tr.fact-tot-mes .tot-label { text-align: left; letter-spacing: .3px; }

/* TOTALES GENERALES (pie de la tabla de facturación): banda navy sólida con
   texto blanco, para diferenciarla de los totales de cada mes. */
.resumen-tabla-fact tr#fact-totales > td,
.resumen-tabla-fact tr#cr-totales > td {
  background: var(--primary); color: #fff; border-top: 2px solid #0f2540;
}
.resumen-tabla-fact tr#fact-totales .tot-label,
.resumen-tabla-fact tr#cr-totales .tot-label { color: #fff; }

.resumen-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
  justify-content: start; gap: 12px; margin: 10px 24px 4px; align-items: start;
}
/* Bloque vertical "Resumen del periodo" a la derecha (conteos apilados). */
/* El mínimo lo fija el menú Exportar: con menos ancho, "Descargar Excel" no
   entra y el menú se sale del bloque. */
.rbox-stats { min-width: 212px; }
.stats-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.stat {
  background: #f4f6f9; border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: 7px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.stat-num { font-size: 20px; font-weight: 800; line-height: 1.15; text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); }
.stat.s-desp   { border-left-color: var(--accent);  } .stat.s-desp   .stat-num { color: var(--accent);  }
.stat.s-bultos { border-left-color: var(--purple);  } .stat.s-bultos .stat-num { color: var(--purple);  }
.stat.s-peso   { border-left-color: var(--warning); } .stat.s-peso   .stat-num { color: var(--warning); }
.stat.s-pesocol { border-left-color: var(--primary); } .stat.s-pesocol .stat-num { color: var(--primary); }
.stat.s-total  { border-left-color: var(--success); } .stat.s-total  .stat-num { color: var(--success); }
.stat.s-prom   { border-left-color: var(--primary); } .stat.s-prom   .stat-num { color: var(--primary); }
/* Cuadros con columnas de ancho fijo, ajustadas a los datos (no estiradas). */
.rtable-fit { table-layout: fixed; }
.rtable-fit th, .rtable-fit td { overflow: hidden; text-overflow: ellipsis; }
/* La tabla usa exactamente la suma de anchos del colgroup (no estira al 100%),
   así el cuadro de abonos se ajusta a sus columnas sin espacio libre. */
.rbox-wide .rtable-fit { width: auto; }
/* Los cuadros de cliente se colocan como celdas de la propia .resumen-grid
   (misma fila que Despacho/Abonos), justo después de "Resumen de abonos por día". */
#clientes-box { display: contents; }
.clientes-vacio { color: var(--muted); font-size: 12.5px; margin: 6px 0; align-self: center; }

.rbox {
  background: var(--card); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.12);
  overflow: hidden; display: flex; flex-direction: column;
}
.rbox-head {
  background: var(--primary); color: #fff; padding: 9px 14px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.rbox-hint { font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #b9cbe4; }
/* Zona derecha del encabezado del cuadro de abonos: promedio + botón. */
.rbox-head-right { display: flex; align-items: center; gap: 10px; }
/* Botón mínimo (cuadrito "D"/"A") para ocultar/mostrar la columna Diferencia.
   Tamaño fijo pequeño para no alterar el alto ni el diseño del encabezado. */
.btn-toggle-dif {
  flex: none; width: 18px; height: 18px; padding: 0; margin: -2px 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; line-height: 1; font-family: inherit;
  color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px; cursor: pointer;
}
.btn-toggle-dif:hover { background: rgba(255,255,255,.30); }
.btn-toggle-dif[aria-pressed="true"] { background: #fff; color: var(--primary); border-color: #fff; }
/* Columna Diferencia oculta: se colapsa su ancho y se ocultan sus celdas, sin
   afectar los totales ni el promedio (esos se siguen calculando en el servidor). */
/* El <col> también se quita: si solo se ocultan las celdas, el colgroup sigue
   declarando 5 columnas para 4 visibles y sobra una columna fantasma (la franja
   vacía a la derecha), además de correr los anchos una posición. Con display:none
   el col sale del mapa de columnas y los anchos vuelven a calzar. */
#tabla-abonos.sin-dif col.col-dif,
#tabla-abonos.sin-dif th.c-dif,
#tabla-abonos.sin-dif td.c-dif { display: none; }
/* Ya sin la columna, la tabla queda un poco más angosta que el encabezado, que
   es el mínimo del cuadro. min-width la estira esos pocos píxeles para que no
   reaparezca una franja vacía (el % no afecta el cálculo del ancho del cuadro). */
#tabla-abonos.sin-dif { min-width: 100%; }
/* Sin scroll: la quincena nunca pasa de ~16 filas, se muestran todas fijas. */
.rbox-scroll { overflow: visible; max-height: none; }
.rtable tbody td { cursor: default; }
/* Domingos: fecha en rojo (sin negrita) en los cuadros del resumen. */
.rtable td.dom { color: #c53030; }
.rbox-wide .rtable tbody tr { cursor: pointer; }

/* Diferencia negativa (abono menor al despacho): alerta en rojo. */
td.dif-neg, .num.dif-neg { background: #fed7d7; color: #c53030; font-weight: 800; }
tfoot td.dif-neg { background: #fed7d7; color: #c53030; }

/* Día marcado "NO DESPACHOS": ceros informativos en rojo (no son un dato
   faltante ni suman en los totales). */
.rtable td.cero-nd { color: #c53030; font-weight: 700; }
.rtable td.nd-lbl { color: #c53030; font-weight: 400; letter-spacing: .3px; }

/* Bloque de facturación (BASE / IGV / TOTAL) al pie de cada cuadro de cliente.
   Los cuadros de cliente se estiran a la altura de la fila para que sus pies
   (TOTAL / BASE / IGV / TOTAL / TOTAL BULTOS / TOTAL PESOS) queden alineados a
   la misma altura entre todas las tarjetas. El espacio sobrante lo absorbe la
   tabla de fechas (.rbox-scroll), no los bloques de totales. */
.cbox { min-width: 205px; align-self: stretch; }
.cbox .rbox-scroll { flex: 1 1 auto; }
.cbox .cbox-fact, .cbox .cbox-bp { flex: 0 0 auto; }
.cbox-fact { padding: 8px 14px 12px; border-top: 2px solid var(--primary); background: #f4f6f9; }
.cbox-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; padding: 3px 0; font-variant-numeric: tabular-nums;
}
.cbox-row > span:first-child { color: var(--muted); font-weight: 700; letter-spacing: .5px; }
.cbox-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.cbox-total > span { color: var(--primary); font-weight: 800; font-size: 14px; }
.cbox-bp { padding: 8px 14px 12px; border-top: 2px solid var(--accent); background: #eef3fb; }
.cbox-bp .cbox-row > span:last-child { color: var(--primary); font-weight: 800; font-size: 14px; }

/* ══════════════ TABLA ══════════════ */
.table-wrap {
  margin: 10px 24px 16px; background: var(--card); border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); overflow: hidden;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.table-bar {
  padding: 10px 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.table-bar h3 { font-size: 13px; font-weight: 700; color: var(--primary); }
.table-bar-left { display: flex; gap: 12px; align-items: center; }
.table-bar-right { display: flex; gap: 8px; align-items: center; }
.rec-count {
  font-size: 11.5px; color: var(--muted); font-weight: 600;
  background: #eef2f8; border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px;
}
.table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }

table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th {
  background: #2d3748; color: #fff; padding: 9px 8px; text-align: left;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap; position: sticky; top: 0; z-index: 10; vertical-align: middle;
}
thead th.num { text-align: right; }
thead th.auto { background: #24405f; color: #d7e2f0; }
thead th.acciones { text-align: center; }

/* Encabezado RAZÓN SOCIAL con botón de filtro (#) */
th.th-razon { white-space: nowrap; }
th.th-razon .th-razon-txt { vertical-align: middle; }
.th-filtro {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 6px; vertical-align: middle;
  border: 1px solid rgba(255,255,255,.35); border-radius: 4px;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
}
.th-filtro:hover { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.6); }
.th-filtro:active { transform: scale(.92); }
.th-filtro.activo {
  background: #38a169; border-color: #2f855a; color: #fff;
  box-shadow: 0 0 0 2px rgba(56,161,105,.35);
}

/* Popup de filtro por razón social */
.pop-razon {
  position: fixed; z-index: 500; width: 260px; max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(26,54,93,.25); padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.pop-razon[hidden] { display: none; }
.pr-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; }
.pr-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(49,130,206,.2); }
.pr-search-ico { font-size: 12px; opacity: .7; }
.pr-search input { border: 0; outline: 0; width: 100%; font-size: 12px; color: var(--primary); background: transparent; }
.pr-acts { display: flex; gap: 12px; padding: 0 2px; }
.pr-link { background: none; border: 0; padding: 0; color: var(--accent); font-size: 11px; font-weight: 700; cursor: pointer; }
.pr-link:hover { text-decoration: underline; }
.pr-lista { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; }
.pr-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; font-size: 12px; color: var(--primary); cursor: pointer; }
.pr-item:hover { background: #ebf2fb; }
.pr-item + .pr-item { border-top: 1px solid #eef1f5; }
.pr-item input { cursor: pointer; accent-color: var(--accent); }
.pr-item-vacio span { font-style: italic; color: #64748b; }
.pr-vacio { padding: 10px; font-size: 12px; color: #64748b; text-align: center; }
.pr-foot { display: flex; justify-content: flex-end; gap: 8px; }
.pr-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--primary); font-size: 12px; font-weight: 700; cursor: pointer; }
.pr-btn:hover { background: #f1f5fb; }
.pr-btn-ok { background: #38a169; border-color: #2f855a; color: #fff; }
.pr-btn-ok:hover { background: #2f855a; }

tbody tr { border-bottom: 1px solid #cbd3de; transition: background .1s, box-shadow .1s; }
tbody tr:nth-child(even) { background: #f4f6f9; }
tbody tr:hover {
  background: #c9e0ff !important;
  box-shadow: inset 3px 0 0 var(--accent), 0 1px 6px rgba(26,54,93,.22);
}
tbody td { padding: 3px 8px; vertical-align: middle; white-space: nowrap; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.auto { background: #eef2f8; color: #5b6472; }
tbody tr:hover td.auto { background: #c9e0ff; }
.os-cell { font-family: 'Courier New', monospace; font-weight: 700; color: var(--primary); font-size: 11.5px; }

/* Filas con N° de OS duplicado: resaltadas en ámbar (advertencia). */
tbody tr.dup-os td { background: #ffe9a8 !important; box-shadow: inset 0 0 0 9999px rgba(0,0,0,0); }
tbody tr.dup-os td.auto { background: #ffdf87 !important; }
tbody tr.dup-os:hover td { background: #ffd766 !important; }
tbody tr.dup-os { box-shadow: inset 3px 0 0 var(--warning); }
tbody tr.dup-os .os-cell { color: #9c4221; font-weight: 800; }

/* Fila seleccionada (clic en cualquier celda): resaltada en ámbar hasta elegir otra. */
tbody tr.fila-sel td,
tbody tr.fila-sel td.auto { background: #ffc02e !important; color: #4a3600; }
tbody tr.fila-sel:hover td,
tbody tr.fila-sel:hover td.auto { background: #ffb300 !important; }
tbody tr.fila-sel { box-shadow: inset 4px 0 0 #ff8f00, 0 1px 6px rgba(0,0,0,.18) !important; }
tbody tr.fila-sel .os-cell { color: #7a3d00; }

.estado { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 3px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.estado.RECIBIDO { background: #c6f6d5; color: #276749; }
.estado.PENDIENTE { background: #feebc8; color: #c05621; }
.acciones-cell { text-align: center; white-space: nowrap; }

tfoot td {
  position: sticky; bottom: 0; background: #dbe3ef;
  font-weight: 800; padding: 9px 8px; border-top: 2px solid var(--primary); font-size: 12px;
}
tfoot .tot-label { color: var(--primary); letter-spacing: 1px; }
tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td.auto { color: #5b6472; }

/* ══════════════ ESTADO VACÍO ══════════════ */
.empty { text-align: center; padding: 56px 20px; color: var(--muted); font-size: 13px; }
.empty .ico { display: block; font-size: 46px; margin-bottom: 12px; }

/* ══════════════ SCROLLBARS (gruesas, siempre visibles) ══════════════ */
.table-scroll { scrollbar-width: auto; scrollbar-color: #8a98ac #e2e8f0; }
.table-scroll::-webkit-scrollbar { width: 14px; height: 16px; }
.table-scroll::-webkit-scrollbar-track { background: #e2e8f0; }
.table-scroll::-webkit-scrollbar-thumb { background: #8a98ac; border-radius: 8px; border: 3px solid #e2e8f0; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }
.table-scroll::-webkit-scrollbar-corner { background: #e2e8f0; }

/* ══════════════ CAMPOS (.fi) ══════════════ */
.fi {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px; background: #fff; color: var(--text);
  font-family: Arial, Helvetica, sans-serif; height: 33px;
}
.fi:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(49,130,206,.2); }
/* Campo obligatorio sin llenar al intentar guardar un despacho. */
.fi.campo-invalido { border-color: var(--danger); background: #fff5f5; box-shadow: 0 0 0 2px rgba(197,48,48,.15); }
.os-input.campo-invalido, .campo-invalido .os-input { border-color: var(--danger); }
.fi-anio { width: 84px; }

/* Campos de la barra secundaria (Año / Mes / Quincena): misma altura que los botones */
.subbar .fi { height: 29px; padding: 3px 8px; }

/* ══════════════ MODAL ══════════════ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(17,24,39,.55);
  display: grid; place-items: center; z-index: 500; padding: 16px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--card); border-radius: 12px; width: 470px; max-width: 100%;
  box-shadow: 0 18px 60px rgba(0,0,0,.35); overflow: hidden; animation: pop .14s ease-out;
}
.modal-lg { width: 640px; }
@keyframes pop { from { transform: scale(.97) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Encabezado estilo "Sistema de Seguimiento de Guías" (TRADEL): título en
   negrita oscura directamente sobre el panel blanco, SIN barra de color de
   fondo, con una fina línea inferior de separación. Es el diseño por defecto
   de TODAS las ventanas (comparten .modal-head). */
.modal-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 20px 11px; background: transparent; color: var(--text);
  border-bottom: 1px solid var(--border); cursor: grab;
}
.modal-head h2 { font-size: 16px; font-weight: 800; line-height: 1.15; color: #1a202c; display: flex; align-items: center; gap: 8px; }
/* Icono pequeño a la izquierda del título de cada ventana; usa el mismo
   emoji/ícono del botón que la abre (ver referencia del sistema TRADEL). */
.modal-ico { font-size: 18px; line-height: 1; flex: none; }
/* Botón de cierre claro (✕) visible sobre blanco */
.modal-x {
  background: #f7fafc; border: 1px solid var(--border); color: var(--muted);
  font-size: 18px; cursor: pointer; line-height: 1; border-radius: 6px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  padding: 0; opacity: 1; transition: background .12s, color .12s;
}
.modal-x:hover { background: #edf2f7; color: var(--text); }

.modal-body { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.modal-body-block { display: block; }

/* Ventana "Importar liquidación" (Conta): Año · Mes · Quincena en una fila, y
   el selector de archivo abarcando todo el ancho. */
.modal-import { width: 470px; max-width: 94vw; }
.modal-import .modal-body { grid-template-columns: 1fr 1fr 1fr; }
.modal-import .ic-hint { grid-column: 1 / -1; margin: 0 0 2px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.modal-import .campo-full { grid-column: 1 / -1; }
.ic-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ic-file-name { font-size: 13px; color: var(--muted); }
.ic-file-name.tiene { color: var(--primary); font-weight: 700; }

/* Modal de confirmación propio (reemplaza a confirm() nativo) */
.modal-confirm { width: 360px; max-width: 92vw; }
.modal-confirm .modal-body { display: block; }
.confirm-msg { margin: 4px 0 18px; font-size: 14px; color: var(--text); line-height: 1.35; }
.confirm-acc { display: flex; justify-content: flex-end; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.campo label { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.campo .fi { width: 100%; }

/* Bordes más notorios en los campos del modal "Nuevo despacho" */
#modal-despacho .fi,
#modal-despacho .os-input { border: 2px solid #334155; }
#modal-despacho .os-input .fi { border: none; }
#modal-despacho .os-input span { border-right: 2px solid #334155; }

/* Al saltar con TAB entre campos del modal, resaltar el foco con un anillo
   más notorio (más grueso y con más opacidad que el resto de la app). */
#modal-despacho .fi:focus,
#modal-despacho .os-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(49,130,206,.5);
}

/* N° de OS: prefijo + input ajustado a los 8 dígitos */
.os-input {
  display: inline-flex; align-items: stretch; height: 33px;
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden; width: max-content;
}
.os-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(49,130,206,.2); }
.os-input span {
  display: flex; align-items: center; padding: 0 10px;
  background: #edf1f6; font-weight: 700; color: var(--primary);
  border-right: 1px solid var(--border); font-family: 'Courier New', monospace;
}
.os-input .fi { border: none; border-radius: 0; width: 11ch; box-shadow: none; height: 100%; font-family: 'Courier New', monospace; }
.os-input .fi:focus { box-shadow: none; }

/* Campos ajustados a su contenido */
#d-razon { width: 220px; max-width: 100%; }

.modal-msg { padding: 0 20px; color: var(--danger); font-size: 12px; min-height: 16px; font-weight: 600; }
.modal-msg.ok { color: var(--success); }
.modal-foot {
  padding: 12px 20px 16px; display: flex; justify-content: flex-end; gap: 10px;
  border-top: 1px solid var(--border);
}

/* ══════════════ Modal: bloques a exportar ══════════════ */
.mx-intro { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.mx-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mx-op {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 7px; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.mx-op:hover { background: #ebf2fb; border-color: #b9cbe4; }
.mx-op input { width: 15px; height: 15px; cursor: pointer; }
/* Sin clientes en el periodo no hay nada que exportar en ese bloque. */
.mx-op.mx-off { opacity: .5; cursor: not-allowed; }
.mx-op.mx-off:hover { background: transparent; border-color: var(--border); }
/* Detalle bajo el nombre del cuadro de factura (fechas y total del cliente). */
.mc-det { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }

/* ══════════════ Mini tabla destinos ══════════════ */
.mini-scroll { max-height: 320px; border: 1px solid var(--border); border-radius: 6px; }
.mini-tabla { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.mini-tabla th {
  background: #2d3748; color: #fff; padding: 2px 6px; text-align: left;
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  position: sticky; top: 0; z-index: 2;
}
.mini-tabla th { border: 1px solid #000; }
.mini-tabla td { padding: 2px 6px; border: 1px solid #000; vertical-align: top; }
.mini-tabla tr:nth-child(even) { background: #f4f6f9; }
.mini-tabla input[type=text], .mini-tabla input[type=number], .mini-tabla input:not([type]), .mini-tabla textarea {
  width: 100%; box-sizing: border-box; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px;
}
.mini-tabla textarea {
  font-family: inherit; resize: none; line-height: 1.2; display: block;
}
/* Ocultar las flechitas del spinner en los campos numéricos (ahorra ancho) */
.mini-tabla input[type=number] { -moz-appearance: textfield; }
.mini-tabla input[type=number]::-webkit-outer-spin-button,
.mini-tabla input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Campos bloqueados: se ven como texto plano hasta el doble clic */
.mini-tabla input.locked, .mini-tabla textarea.locked {
  border-color: transparent; background: transparent; cursor: default; color: var(--text);
}
.mini-tabla input.editando, .mini-tabla textarea.editando {
  border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 2px rgba(49,130,206,.2);
}
.mini-tabla input[type=checkbox].locked { cursor: default; }

/* Ventanas más anchas para ver toda la información */
#modal-destinos .modal { width: 470px; }
/* Clientes de Valentino y de Ejecutivo comparten el mismo ancho, para que la
   columna "Dirección" se vea igual de amplia en ambas (punto 4.1). */
#modal-clientes .modal,
#modal-clientes-nicole .modal { width: 940px; }

/* Anchos de columna — Destinos */
.mini-tabla-dest .c-sigla  { width: 54px; }
.mini-tabla-dest .c-tarifa { width: 78px; }
.mini-tabla-dest .c-activo { width: 50px; }
.mini-tabla-dest .c-acc    { width: 76px; }
.mini-tabla-dest .c-nombre { width: 132px; } /* al mínimo: el nombre más largo mide ~65px */
.mini-tabla-dest .inp-num  { text-align: right; font-variant-numeric: tabular-nums; }

/* Anchos de columna — Clientes */
.mini-tabla-cli .c-razon { width: 240px; }
.mini-tabla-cli .c-corto { width: 130px; }
.mini-tabla-cli .c-ruc   { width: 106px; }
.mini-tabla-cli .c-acc   { width: 44px; }
/* .c-direccion toma el resto (ancho) y permite 2 líneas */
.mini-tabla-cli td:nth-child(3) input { font-variant-numeric: tabular-nums; }

/* Anchos de columna — Usuarios */
.mini-tabla-usr .c-usuario { width: 160px; }
.mini-tabla-usr .c-rol     { width: 150px; }
.mini-tabla-usr .c-creado  { width: 150px; }
.mini-tabla-usr .c-acc     { width: 90px; }
.mini-tabla-usr .fi-rol { width: 100%; padding: 3px 4px; font-size: 12px; }
.mini-tabla-usr .usr-creado { color: var(--muted); font-variant-numeric: tabular-nums; }
.usr-yo { color: var(--accent); font-weight: 700; font-size: 11px; }

.mini-tabla td:last-child { white-space: nowrap; }

.dest-form { display: flex; gap: 8px; margin-bottom: 14px; }
.dest-form .fi { flex: 1; min-width: 0; }
.dest-form .fi:first-child { max-width: 140px; }
.dest-form .fi-tarifa { flex: 0 0 92px; max-width: 92px; text-align: right; }
/* Campo de clave con botón "Ver" dentro de un formulario en fila */
.dest-form .pass-wrap-inline { flex: 1; min-width: 0; margin-bottom: 0; }
.dest-form #usr-rol { flex: 0 0 130px; max-width: 130px; }
.pass-wrap-inline .pass-toggle { padding: 0 10px; }

/* Aclaración pequeña junto a la etiqueta de un campo (p. ej. "(según destino)") */
.campo-hint { font-weight: 400; font-size: 10px; color: #718096; letter-spacing: .3px; }

/* ══════════════ Toast ══════════════ */
/* Aparece en línea, justo después del campo "Quincena" de la barra.
   Sin fondo: solo el ícono de check + el texto. El texto copia el estilo del
   subtítulo ".sub" ("Registro de despachos por quincena"). */
.toast {
  align-self: center; display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; box-shadow: none; padding: 0; white-space: nowrap;
  font-size: 11px; font-weight: 400; letter-spacing: .5px;
  color: rgba(255,255,255,.65);
  animation: toast-in .18s ease-out;
}
.toast::before {
  content: "✓"; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  background: #22a45d; color: #fff; font-size: 12px; font-weight: 900;
}
.toast[hidden] { display: none; }
.toast.err { color: #ffc4c4; }
.toast.err::before { content: "!"; background: var(--danger); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════ Responsivo ══════════════ */
@media (max-width: 760px) {
  .cards-row { flex-wrap: wrap; }
  .card { min-width: 130px; }
  .modal-body { grid-template-columns: 1fr; }
  .table-wrap, .cards, .subbar { margin-left: 10px; margin-right: 10px; }
}

/* ══════════════ Selección de celdas (tipo Excel) ══════════════ */
/* Se marcan celdas de una misma columna (clic+arrastre / Shift / Ctrl) y el
   recuadro flotante muestra suma, promedio, mínimo, máximo y cantidad. */
td.celda-sel {
  background: #cfe0f7 !important;
  box-shadow: inset 0 0 0 1px #6d9fe0;
}
body.sel-arrastre { user-select: none; -webkit-user-select: none; cursor: cell; }

.sel-stats {
  position: fixed; right: 18px; bottom: 18px; z-index: 600;
  min-width: 190px; padding: 10px 12px;
  background: #fff; border: 1px solid #cbd5e0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 30, 60, .18);
  font-size: 12px; color: #2d3748;
  animation: toast-in .15s ease-out;
}
.sel-stats[hidden] { display: none; }
.sel-stats .ss-fila {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 3px 0; white-space: nowrap;
}
.sel-stats .ss-fila span { color: #718096; }
.sel-stats .ss-fila b { font-variant-numeric: tabular-nums; }
.sel-stats .ss-pie {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid #edf2f7;
  font-size: 10px; color: #a0aec0; letter-spacing: .3px;
}

/* ===== Pestaña Nicole/Ejecutivo: modelo de FACTURAS ===== */
/* Las pestañas Resumen y Estadísticas del Ejecutivo se rehicieron sobre el
   monto de las facturas (ya no están ocultas). */

/* Modal de factura (compacto: campos manuales angostos + lista de OS alineada) */
.modal-factura { width: 600px; max-width: 95vw; }
/* Punto 2: los campos que se llenan a mano (Cliente, N° de factura, Monto y
   Fecha) no ocupan todo el ancho de su columna. */
.modal-factura .modal-body > .campo:not(.campo-os) .fi { max-width: 250px; }
/* Grilla compartida por el encabezado y las filas de OS, así los títulos quedan
   siempre alineados con su columna (punto 3.7). Anchos pensados para: N° de OS
   ~8 dígitos, Destino solo la sigla (~4), Bultos 3 dígitos, Peso ~8 (1211.50). */
.campo-os { grid-column: 1 / -1; margin-top: 4px; --os-grid: 130px 112px 72px 62px 96px 34px; }
.os-lista-head {
  display: grid; grid-template-columns: var(--os-grid); gap: 8px;
  font-size: 10px; font-weight: 700; color: #718096; letter-spacing: .3px;
  padding: 0 2px 4px; align-items: end;
}
.os-lista-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-lista { display: flex; flex-direction: column; gap: 6px; }
.os-fila { display: grid; grid-template-columns: var(--os-grid); gap: 8px; align-items: center; }
.os-fila .fi { margin: 0; min-width: 0; }
.os-fila .os-dest { text-align: center; }
.os-fila .os-bul, .os-fila .os-peso { text-align: right; font-variant-numeric: tabular-nums; }
.os-fila .os-del {
  border: 1px solid #e2e8f0; background: #fff; color: #c53030;
  border-radius: 8px; height: 32px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.os-fila .os-del:hover { background: #fff5f5; border-color: #fc8181; }
.btn-os-add { margin-top: 8px; width: 100%; }

/* Celdas multilínea de OS / FECHA OS en la tabla de facturas */
#tabla-n td.os-multi, #tabla-n td.fos-multi,
#tabla-n td.dest-multi, #tabla-n td.bul-multi, #tabla-n td.peso-multi { white-space: pre-line; line-height: 1.5; }

/* =====================================================================
   RESPONSIVE — VISTA EN CELULAR (≤ 640px)
   Acomoda TODA la interfaz para pantallas angostas SIN alterar el diseño
   de PC: cada regla vive dentro de esta media query, así que en pantallas
   grandes nada de esto aplica. Cubre las cuatro vistas (Valentino,
   Operario, Ejecutivo y Conta) porque actúa sobre los componentes comunes:
   login, header, barra de periodo, pestañas, filtros y barras de tabla.
   ===================================================================== */
@media (max-width: 640px) {

  /* ---------- LOGIN ---------- */
  /* La tarjeta ya es angosta (max-width:92vw). Solo se ajusta el relleno y
     el tamaño de fuente de los campos a 16px para que iOS no haga zoom al
     enfocarlos. */
  .login-card { padding: 24px 20px 26px; }
  .login-card select, .login-card input { font-size: 16px; }

  /* ---------- HEADER ---------- */
  /* Menos margen lateral (se aprovecha el ancho) y título más compacto. Se
     ocultan el subtítulo, la línea divisoria y la fecha para dejar sitio al
     nombre de usuario y al botón "Cerrar sesión". */
  .header { padding: 0 12px; height: 54px; }
  .header-left { gap: 8px; min-width: 0; }
  .header-title h1 { font-size: 13px; line-height: 1.15; }
  .header-title .sub { display: none; }
  .brand-logo img { height: 32px; }
  .divider-v { display: none; }
  .header-right { gap: 8px; }
  #currentDate { display: none; }
  .btn-logout { padding: 5px 9px; font-size: 10.5px; }

  /* ---------- BARRA DE PERIODO (subbar) ---------- */
  /* En vez de repartir los grupos con grandes espacios (space-between), se
     alinean a la izquierda y se apilan en filas. Año/Mes/Quincena comparten
     el ancho en una sola fila; los botones de vista van 2 por fila. */
  .subbar { padding: 8px 12px; justify-content: flex-start; row-gap: 8px; }
  .subbar-group { gap: 8px; }
  .subbar-group:first-child { width: 100%; }
  .sb-field { flex: 1 1 0; min-width: 0; }
  .subbar .fi { width: 100%; }
  .vistas { width: 100%; }
  .vista-btn { flex: 1 1 44%; min-width: 0; padding: 8px 6px; }
  /* El menú Operaciones no se sale de la pantalla por la derecha. */
  .menu-list { max-width: calc(100vw - 20px); }

  /* ---------- PESTAÑAS ---------- */
  /* Se mantienen en UNA sola fila que se desliza horizontalmente con el
     dedo. Antes, con body{overflow:hidden}, las pestañas que no cabían
     quedaban recortadas e inalcanzables. */
  .tabs {
    padding: 6px 10px 0; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 8px 13px; font-size: 12px; flex: 0 0 auto; }
  /* La pestaña "Estadísticas" deja de empujarse a la derecha para que todas
     fluyan seguidas y se puedan deslizar. */
  .tab-derecha { margin-left: 0; }

  /* ---------- FILTROS ---------- */
  /* Se permiten en varias líneas y el buscador ocupa todo el ancho. */
  .filtros { margin: 0 10px; padding: 8px 10px; gap: 8px; }
  .filtro-search { min-width: 0; flex: 1 1 100%; }
  .filtro-total { min-width: 0; flex: 1 1 100%; }
  .filtro-rango { border-left: none; padding-left: 0; }

  /* ---------- BARRAS Y ENVOLTORIO DE TABLA ---------- */
  /* Menos margen lateral; la barra superior de la tabla (título + acciones)
     se acomoda en varias líneas. El scroll horizontal de la tabla en sí ya
     lo maneja .table-scroll. */
  .table-wrap, .cards { margin-left: 10px; margin-right: 10px; }
  .table-bar { flex-wrap: wrap; gap: 8px; row-gap: 8px; }
  .table-bar-left, .table-bar-right { flex-wrap: wrap; }

  /* ---------- SCROLL VERTICAL DE TODA LA PÁGINA ----------
     Este es el arreglo clave para "ver más información hacia abajo".
     En PC la app es de altura fija (body 100vh, overflow:hidden) y cada
     tabla hace scroll DENTRO de su recuadro; en el celular ese recuadro
     queda tan bajo que solo se ve la primera fila. Aquí liberamos la
     altura: el documento completo crece con el contenido y se desliza con
     el dedo (igual que la pestaña Operario). El scroll HORIZONTAL de las
     tablas anchas sigue dentro de .table-scroll. */
  html, body { height: auto; }
  body { min-height: 100dvh; overflow: visible; }
  /* Cada panel/recuadro toma su altura natural (según el contenido) en vez
     de estirarse a un alto fijo que recortaba las filas. */
  .panel { flex: 0 0 auto; }
  .table-wrap { flex: 0 0 auto; min-height: 0; }
  .table-scroll { flex: 0 0 auto; min-height: 0; overflow-x: auto; overflow-y: visible; }
  /* El encabezado de la tabla se desliza junto con las filas (sin "sticky"),
     para que no se superponga con el header de la app al deslizar la página. */
  thead th { position: static; }
}