/* ==================== Sistema de diseño (Rediseño Fase 1, aprobado en la Puerta 0) ====================
   Un solo CSS compartido. Tema oscuro unico. Todas las pantallas usan estas variables; los nombres de
   antes (--text-dim, --red, --radius...) se conservan para las pantallas que aun no se migran. */
:root {
  color-scheme: dark;

  /* Superficies: 4 niveles, cada uno un poco mas claro; nunca negro puro. */
  --bg: #0b0c10;
  --surface: #111319;
  --surface-2: #161921;
  --surface-3: #1d2029;
  --hover: rgba(255, 255, 255, 0.035);
  --border: #23262f;
  --border-strong: #30343f;
  --border-soft: #1a1d25;

  /* Texto: 3 niveles. --text-3 aclarado en la Puerta 0: contraste >= 4.5 sobre todas las superficies. */
  --text: #eceef3;
  --text-2: #a3a9b6;
  --text-3: #858b9a;
  --text-dim: var(--text-2);
  --text-faint: var(--text-3);

  /* Acento unico de marca/accion (indigo): boton primario, foco, pantalla activa. Texto blanco >= 4.5. */
  --accent: #5566ea;
  --accent-hover: #6676f2;
  --accent-strong: #8b9bff;
  --accent-dim: rgba(98, 113, 245, 0.15);
  --accent-soft: var(--accent-dim);
  --on-accent: #ffffff;

  /* Estados (solo semantica, nunca decoracion). Verde = pagado/ok; amarillo = parcial/pendiente;
     rojo = vencido/stock bajo/peligro; azul = informativo (p. ej. "Por vencer"). */
  --ok: #3fb984;       --ok-soft: rgba(63, 185, 132, 0.13);
  --warn: #e3a541;     --warn-soft: rgba(227, 165, 65, 0.13);
  --danger: #ef6b70;   --danger-soft: rgba(239, 107, 112, 0.13);
  --info: #6aa8ff;     --info-soft: rgba(106, 168, 255, 0.12);
  --green: var(--ok);  --green-dim: var(--ok-soft);
  --amber: var(--warn); --amber-dim: var(--warn-soft);
  --red: var(--danger); --red-dim: var(--danger-soft);

  /* Radios: 6 (internos), 8 (botones, inputs), 12 (tarjetas, tablas). */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* Espacios, base 4 px. */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */

  /* Tipografia: Inter para todo; escala 12 / 13 / 14 / 16 / 20 / 24 / 30. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;

  --tap: 44px; /* alto minimo comodo para dedo */
  --topbar: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  /* Sin overflow-x: hidden a proposito: escondia (sin barra) lo que se salia de la ventana, y asi
     quedaban botones tapados sin forma de llegar a ellos. Lo ancho se resuelve donde nace. */
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }

a { color: inherit; }

/* ==================== Login ==================== */
.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background:
    radial-gradient(600px 300px at 15% -10%, rgba(91, 110, 245, 0.12), transparent),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-md);
}
.login-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin: 0 0 0.3rem;
  color: var(--text);
}
.login-card p.sub { color: var(--text-dim); margin: 0 0 1.75rem; font-size: 0.9rem; }

/* ==================== Componentes ==================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.15rem;
  margin-bottom: 1rem;
}

button, .btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.65rem 1.1rem;
  min-height: var(--tap);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  width: 100%;
  transition: filter 0.12s ease, background 0.12s ease;
}
button:hover, .btn:hover { filter: brightness(1.1); }
button:active, .btn:active { filter: brightness(0.96); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
button.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
button.secondary:hover { background: var(--surface-3); filter: none; }
button.danger { background: var(--red); color: #fff; }
button.ghost { background: transparent; color: var(--text-dim); border-color: var(--border); }
button.ghost:hover { background: var(--surface-2); color: var(--text); filter: none; }
button.small { padding: 0.45rem 0.75rem; min-height: 38px; font-size: 0.83rem; width: auto; }
button.inline { width: auto; }

input, select {
  font: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.6rem 0.65rem;
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  width: 100%;
}
input::placeholder { color: var(--text-faint); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

label { display: block; font-size: 0.83rem; color: var(--text-dim); margin-bottom: 0.35rem; font-weight: 500; }
.field { margin-bottom: 1rem; }

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert-error { background: var(--red-dim); color: var(--red); border: 1px solid rgba(232,99,106,0.3); }
.alert-ok { background: var(--green-dim); color: var(--green); border: 1px solid rgba(63,189,138,0.3); }
.alert-warn { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(217,154,61,0.3); }

.empty {
  color: var(--text-dim);
  font-style: normal;
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.9rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.badge-danger { background: var(--red-dim); color: var(--red); }
.badge-ok { background: var(--green-dim); color: var(--green); }
.badge-warn { background: var(--amber-dim); color: var(--amber); }
.badge-neutral { background: var(--surface-3); color: var(--text-dim); font-weight: 500; }

/* ---- Tablas: en movil se ven como tarjetas apiladas, sin scroll
   horizontal. Cada <td data-label="..."> muestra su etiqueta arriba
   del valor. En pantallas anchas, vuelve a ser tabla normal. ---- */
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
thead { display: none; }
tbody, tr, td { display: block; width: 100%; }
tr {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.6rem;
}
td {
  border: none;
  padding: 0.35rem 0;
  display: block;
  text-align: left;
  /* break-word (no "anywhere"): permite partir un token muy largo si
     hace falta, pero sin reducir el ancho minimo intrinseco de la celda
     a casi cero -- "anywhere" es lo que hacia que, en modo tabla real
     (escritorio), el layout automatico comprimiera la columna hasta
     forzar una letra por linea. */
  overflow-wrap: break-word;
}
td[data-label]::before {
  content: attr(data-label);
  display: block;
  color: var(--text-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.1rem;
}

.item-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin-bottom: 0.6rem;
  background: var(--surface-2);
}
.item-row .field { margin-bottom: 0; }

.pedido-block { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.pedido-block:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.pedido-block h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.pedido-block .meta { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.75rem; }

.check-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.check-row input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; }
.check-row .info { flex: 1; }
.check-row .info .prod { font-weight: 600; }
.check-row .info .sub { color: var(--text-dim); font-size: 0.82rem; }
.check-row:last-child { border-bottom: none; }

/* Alistamiento: en celular los controles bajan debajo del producto. */
.alistar-fila { flex-wrap: wrap; }
.alistar-fila .info { min-width: 12rem; }
.alistar-acciones { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.alistar-acciones .cant-cell { width: 90px; }

.guia-fields { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.guia-fields .field { margin-bottom: 0; }

.hidden { display: none !important; }

/* ---- Catalogo completo con casillas de cantidad (acordeon por
   categoria). Componente reutilizable: Crear pedido hoy, portal del
   cliente y pedidos por WhatsApp despues. ---- */
.categoria-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  overflow: hidden;
  background: var(--surface-2);
}
.categoria-section summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
}
.categoria-section summary::-webkit-details-marker { display: none; }
.categoria-section summary::after {
  content: "+";
  color: var(--accent-strong);
  font-size: 1.2rem;
  font-weight: 700;
}
.categoria-section[open] summary::after { content: "\2212"; }
.cat-count {
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.6rem;
  margin-right: auto;
}
.categoria-body { padding: 0.25rem 1rem 0.85rem; border-top: 1px solid var(--border); }
.producto-fila {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}
.producto-fila:last-child { border-bottom: none; }
.producto-info { display: flex; flex-direction: column; }
.producto-nombre { font-weight: 500; }
.producto-sub { color: var(--text-dim); font-size: 0.8rem; }
.cant-cell { max-width: 140px; text-align: center; font-size: 1.05rem; }
.bodega-linea { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.15rem; }
.resultado-count { font-size: 0.78rem; color: var(--text-dim); margin: 0.5rem 0 0; }

/* ---- Revision de carga Excel: cada fila del archivo con su match
   sugerido y controles de correccion. ---- */
.carga-grupo { padding-top: 0.5rem; }
.carga-fila {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin-bottom: 0.75rem;
  background: var(--surface);
}
.carga-fila-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}
.carga-fila-head input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; margin-top: 0.15rem; }
.carga-fila-body { display: flex; flex-direction: column; gap: 0.6rem; padding-left: 0; }
.crear-nuevo-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}
.crear-nuevo-toggle input { width: 20px; height: 20px; flex-shrink: 0; }
.crear-nuevo-campos { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.6rem; background: var(--surface-2); border-radius: 8px; }
.carga-fila-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.carga-fila-acciones button { width: auto; }

/* ==================== Escritorio (>= 860px): sidebar fija + tablas reales ==================== */
@media (min-width: 860px) {
  table { font-size: 0.9rem; table-layout: auto; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
  thead { display: table-header-group; }
  tbody { display: table-row-group; }
  tr { display: table-row; background: transparent; border: none; border-radius: 0; padding: 0; margin-bottom: 0; transition: background 0.1s ease; }
  tbody tr:hover { background: var(--surface-2); }
  /* min-width evita que el layout automatico de la tabla comprima una
     columna con contenido largo (correos, etc.) hasta casi cero ancho,
     que es lo que forzaba una letra por linea sin importar el valor de
     overflow-wrap. */
  th, td { display: table-cell; text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border-soft); min-width: 110px; }
  td[data-label]::before { content: none; display: none; }
  th {
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.4rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
  }
  tbody tr:last-child td { border-bottom: none; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

  button, .btn { width: auto; }
  button.small { width: auto; }

  .item-row { flex-direction: row; align-items: end; background: transparent; border: none; padding: 0; }
  .item-row .field { flex: 1; }

  .guia-fields { flex-direction: row; flex-wrap: wrap; }
  .guia-fields .field { max-width: 220px; }

  .producto-fila { flex-direction: row; align-items: center; justify-content: space-between; }
  .cant-cell { width: 100px; flex-shrink: 0; }

  .carga-fila-body { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .carga-fila-body .field { min-width: 220px; margin-bottom: 0; }
  .crear-nuevo-campos { flex-direction: row; flex: 1 1 100%; }
  .carga-fila-acciones { margin-left: auto; }
}

/* ==================== Panel del dueño (Modulo 8) ==================== */
.panel-fecha { color: var(--text-dim); font-size: 0.88rem; margin: 0 0 1.1rem; }

.panel-periodo {
  display: inline-flex; gap: 0.3rem; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.25rem; margin-bottom: 1.1rem;
}
.panel-periodo button {
  border: none; background: transparent; color: var(--text-dim); font-size: 0.85rem;
  padding: 0.4rem 0.9rem; border-radius: 999px; min-height: unset; width: auto;
}
.panel-periodo button.active { background: var(--accent); color: var(--on-accent); font-weight: 700; }

.panel-section { margin-bottom: 1.4rem; }
.panel-section-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 0 0 0.6rem;
}

.panel-stats { display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
.panel-stat-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; text-decoration: none; display: block;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.panel-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.panel-stat-card.ok { border-left-color: var(--green); }
.panel-stat-card.warn { border-left-color: var(--amber); background: linear-gradient(180deg, var(--amber-dim), var(--surface) 60%); }
.panel-stat-card.danger { border-left-color: var(--red); background: linear-gradient(180deg, var(--red-dim), var(--surface) 60%); }
.panel-stat-label { font-size: 0.82rem; color: var(--text-dim); margin: 0 0 0.35rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.panel-stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.panel-stat-card.warn .panel-stat-value { color: var(--amber); }
.panel-stat-card.danger .panel-stat-value { color: var(--red); }
.panel-stat-sub { font-size: 0.82rem; color: var(--text-dim); margin-top: 0.3rem; }
.panel-pill { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-weight: 600; }
.panel-pill.warn { background: var(--amber); color: #1a1206; }
.panel-pill.danger { background: var(--red); color: #fff; }

.panel-stock-grupo {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--red);
  border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-bottom: 0.6rem;
}
.panel-stock-grupo.ambar { border-left-color: var(--amber); }
.panel-stock-grupo-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; gap: 0.5rem; flex-wrap: wrap; }
.panel-stock-grupo-header b { font-size: 0.95rem; }
.panel-stock-grupo-header span { font-size: 0.78rem; color: var(--text-dim); }
.panel-stock-items { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.86rem; color: var(--text-dim); }
.panel-stock-items b { color: var(--text); font-variant-numeric: tabular-nums; }
.panel-stock-ok { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.1rem; color: var(--text-dim); font-size: 0.88rem; }
.panel-sin-cantidad { color: var(--text-dim); font-size: 0.82rem; font-style: italic; margin: 0.6rem 0 0; }

.panel-mov { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.panel-mov-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 0.9rem; text-align: center; }
.panel-mov-num { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.panel-mov-label { font-size: 0.76rem; color: var(--text-dim); margin-top: 0.15rem; }


/* ==================== Asistente flotante ==================== */
.asistente-burbuja {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  min-height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 1000;
  padding: 0;
}
.asistente-burbuja:hover { filter: brightness(1.08); }

.asistente-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

.asistente-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 999;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.asistente-panel.open { transform: translateX(0); }

.asistente-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
}
.asistente-cerrar {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  width: auto;
  min-height: unset;
  padding: 0 0.3rem;
}

.asistente-historial {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.asistente-intercambio { display: flex; flex-direction: column; gap: 0.3rem; }
.asistente-pregunta {
  align-self: flex-end;
  background: var(--accent-dim);
  color: var(--accent-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin: 0;
  font-size: 0.9rem;
  max-width: 85%;
}
.asistente-respuesta {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin: 0;
  font-size: 0.9rem;
  max-width: 85%;
}
.asistente-respuesta.asistente-error { color: var(--red); border-color: rgba(229, 72, 77, 0.35); }

.asistente-tarjeta { border: 1px solid var(--accent); border-radius: 10px; padding: 0.7rem 0.8rem; background: var(--surface-2); display: flex; flex-direction: column; gap: 0.5rem; }
.asistente-tarjeta .at-resumen { font-weight: 600; }
.asistente-tarjeta .at-avisos { margin: 0; padding-left: 1rem; color: var(--amber); font-size: 0.9rem; }
.asistente-tarjeta .at-acc { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.asistente-tarjeta .at-acc button { width: auto; }
.asistente-tarjeta .at-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; }
.asistente-tarjeta .at-item button { width: auto; flex: none; }
.asistente-tarjeta .at-form { display: grid; gap: 0.4rem; }
.asistente-tarjeta .at-form label { display: grid; gap: 0.15rem; font-size: 0.85rem; color: var(--text-dim); }
.asistente-tarjeta .at-form [hidden] { display: none; }
.asistente-tarjeta .asistente-respuesta { margin: 0; }
.asistente-respuesta { white-space: pre-line; }
.asistente-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}
.asistente-form input { flex: 1; min-width: 0; }
.asistente-form button { width: auto; }

/* ==================== Ajustes de la revision de diseño (2026-09-30) ==================== */

/* Campos: fondo mas oscuro que la tarjeta y borde visible, para que se lean como editables. */
:root { --input-bg: #0d1016; --input-border: #323949; }
input, select, textarea { background: var(--input-bg); border-color: var(--input-border); }
input:hover, select:hover, textarea:hover { border-color: #414a5e; }
input:disabled, select:disabled { opacity: 0.6; cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); padding: 0; }
textarea { font: inherit; color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.6rem 0.65rem; width: 100%; }

/* Texto secundario y titulos de pagina */
.meta { color: var(--text-dim); font-size: 0.86rem; }
small { color: var(--text-dim); }
.main h2 { margin: 0 0 1rem; letter-spacing: -0.015em; }
.main h3 { font-size: 1rem; margin: 0 0 0.75rem; }
.card h3:first-child { margin-top: 0; }

/* Enlaces con aspecto de boton (Ver / imprimir, Ver detalle...) */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; width: auto; }
.btn.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn.ghost { background: transparent; color: var(--text-dim); border-color: var(--border); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); filter: none; }
.btn.small { padding: 0.45rem 0.75rem; min-height: 38px; font-size: 0.83rem; }

/* Filas de formulario y grupos de acciones */
.fila { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.fila > .field { flex: 1 1 200px; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.acciones > button, .acciones > .btn { width: auto; }

/* Aviso de version nueva */
.aviso-version {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 1100; background: var(--surface-3); border: 1px solid var(--accent); color: var(--text);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 0.6rem 0.8rem; display: flex; gap: 0.75rem; align-items: center;
  font-size: 0.9rem; max-width: calc(100vw - 2rem);
}
.aviso-version button { width: auto; }
/* PWA: aviso "Instalar app" y barra de sin conexion */
.aviso-instalar {
  position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1090;
  width: min(30rem, calc(100vw - 2rem)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--surface-3); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 0.7rem 0.85rem; font-size: 0.9rem;
}
.aviso-instalar-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 14rem; }
.aviso-instalar-texto span { color: var(--text-dim); }
.aviso-instalar-acc { display: flex; gap: 0.4rem; }
.aviso-instalar-acc button { width: auto; }
.aviso-red { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; background: var(--amber); color: #1a1205; text-align: center; font-weight: 600; font-size: 0.85rem; padding: calc(0.35rem + env(safe-area-inset-top, 0px)) 0.75rem 0.35rem; }
.aviso-red[hidden], .aviso-instalar[hidden] { display: none; }

/* ==================== Panel: calendario de fechas ==================== */
.panel-periodo-caja { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.panel-periodo { flex-wrap: wrap; }
.panel-fechas {
  position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 50;
  width: min(320px, calc(100vw - 2rem));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-4);
}
.panel-fechas .field { margin-bottom: var(--space-3); }
.panel-fechas input[type="date"] { color-scheme: dark; }
@media (max-width: 599px) {
  .panel-periodo-caja { width: 100%; align-items: stretch; }
  .panel-fechas { position: static; width: 100%; }
}
.alistar-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.alistar-cabecera button { width: auto; }

/* ==================== Tablas anchas en escritorio ==================== */
/* Una tabla con muchas columnas (cada celda tiene min-width: 110px) puede no caber al lado del menu
   en pantallas medianas. En vez de ensanchar toda la pagina, la tarjeta que la contiene se desplaza
   de lado con su propia barra; el resto de la pantalla (formularios, botones) queda en su sitio. */
@media (min-width: 860px) {
  .card:has(> table) { overflow-x: auto; }
}

/* En celular las cifras no se parten: letra un poco menor y "Vencido" a lo ancho. */
.cartera-kpis .kpi-valor { white-space: nowrap; }
@media (max-width: 859px) {
  .cartera-kpis .kpi-valor { font-size: 1.1rem; }
  .cartera-kpis .kpi:last-child { grid-column: 1 / -1; }
}

/* ---- Agenda (solo Bogota) ---- */
.agenda-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
/* max-width + scroll propio: con 3 o mas pestañas (Horario del personal) la barra se salia de la pantalla del celular (2026-10-13). */
.agenda-tabs { display: inline-flex; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; overflow-y: hidden; }
.agenda-tab { flex: 0 0 auto; white-space: nowrap; background: transparent; color: var(--text-dim); border: 0; border-radius: 0; padding: 0.4rem 0.9rem; }
.agenda-tab.activa { background: var(--accent-dim); color: var(--accent-strong); }
.agenda-nav { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.agenda-titulo { font-weight: 600; margin-left: 0.3rem; }
.agenda-mios { margin: 0; }
.agenda-evento { display: flex; gap: 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border-soft); }
.agenda-evento:last-child { border-bottom: 0; }
.agenda-evento-hora { min-width: 7.5rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.agenda-evento-cuerpo { flex: 1; min-width: 0; }
.agenda-evento-titulo { font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.agenda-evento-acc { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.agenda-evento.hecho .agenda-evento-nombre { text-decoration: line-through; color: var(--text-dim); }
.agenda-evento.vencido { border-left: 3px solid var(--red); padding-left: 0.6rem; }
.agenda-semana { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.75rem; }
.agenda-dia { margin: 0; }
.agenda-dia.hoy { border-color: var(--accent); }
.agenda-dia h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.agenda-ir-dia { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.agenda-dia .agenda-evento { flex-direction: column; gap: 0.2rem; }
.agenda-dia .agenda-evento-hora { min-width: 0; font-size: 0.85rem; }
.agenda-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 0.9rem; }
.agenda-form-ancho { grid-column: 1 / -1; }
.agenda-participantes { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.agenda-avisos { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 60; width: min(640px, calc(100% - 2rem)); display: flex; flex-direction: column; gap: 0.5rem; }
.agenda-aviso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--amber); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.agenda-aviso.vencido { border-color: var(--red); background: linear-gradient(var(--red-dim), var(--red-dim)), var(--surface-3); }
.agenda-aviso-acc { display: flex; gap: 0.4rem; }
@media (max-width: 600px) { .agenda-evento { flex-direction: column; gap: 0.2rem; } .agenda-evento-hora { min-width: 0; } }
@media (max-width: 600px) { .agenda-avisos { bottom: 5.5rem; } }

/* ---- Agenda: calendario (mes) y cuadricula por horas (dia / semana). --ag-hora = alto de una hora (igual a ALTO_HORA en agenda.js) ---- */
.agenda-cuadricula { --ag-hora: 48px; }
.agenda-leyenda { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.pt { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); flex: none; }
.pt.tipo-recordatorio { background: var(--amber); }
.pt.hecho { background: var(--green); }
.pt.vencido { background: var(--red); }
.agenda-mes { padding: 0.6rem; }
.mes-cab, .mes-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mes-cab > div { text-align: center; font-size: 0.8rem; color: var(--text-dim); padding: 0.3rem 0; }
.mes-rejilla { border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.mes-dia { min-height: 6.2rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0.25rem 0.3rem; cursor: pointer; min-width: 0; overflow: hidden; }
.mes-dia:hover, .mes-dia:focus-visible { background: var(--surface-2); outline: none; }
.mes-dia.fuera { opacity: 0.45; }
.mes-dia.hoy { background: var(--accent-dim); box-shadow: inset 0 0 0 2px var(--accent); }
.mes-dia-cab { display: flex; align-items: center; gap: 0.3rem; }
.mes-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.mes-dia.hoy .mes-num { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 0.4rem; }
.mes-cuenta { font-size: 0.72rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; padding: 0 0.4rem; color: var(--text-dim); }
.mes-mas { margin-left: auto; padding: 0 0.4rem; min-height: 0; line-height: 1.3; background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; }
.mes-puntos { display: none; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.3rem; }
.mes-chips { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.25rem; }
.mes-chip { font-size: 0.72rem; line-height: 1.25; border-radius: 4px; padding: 0.05rem 0.3rem; background: var(--accent-dim); border-left: 3px solid var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mes-chip.tipo-recordatorio { background: var(--amber-dim); border-color: var(--amber); }
.mes-chip.hecho { background: var(--green-dim); border-color: var(--green); text-decoration: line-through; color: var(--text-dim); }
.mes-chip.vencido { background: var(--red-dim); border-color: var(--red); }
.mes-mas-eventos { font-size: 0.72rem; color: var(--text-dim); }
.agenda-cuadricula { padding: 0.5rem; overflow-x: auto; }
.agenda-cuadricula.semana .ag-cab, .agenda-cuadricula.semana .ag-cuerpo { min-width: 44rem; }
.ag-cab { display: grid; }
.agenda-cuadricula.semana .ag-cab { grid-template-columns: 3.2rem repeat(7, minmax(0, 1fr)); }
.agenda-cuadricula.un-dia .ag-cab { grid-template-columns: 3.2rem minmax(0, 1fr); }
.ag-cab-dia { text-align: center; padding: 0.3rem 0; border-bottom: 1px solid var(--border); font-weight: 600; }
.ag-cab-dia.hoy { color: var(--accent-strong); }
.ag-cuerpo { display: grid; grid-template-columns: 3.2rem 1fr; }
.ag-horas > div { height: var(--ag-hora); position: relative; }
.ag-horas span { position: absolute; top: -0.55em; right: 0.4rem; font-size: 0.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ag-horas > div:first-child span { top: 0; }
.ag-cols { display: grid; }
.ag-col { position: relative; border-left: 1px solid var(--border); cursor: cell;
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  background-size: 100% var(--ag-hora), 100% calc(var(--ag-hora) / 2); }
.ag-col.hoy { background-color: var(--accent-dim); }
.ag-ev { position: absolute; box-sizing: border-box; overflow: hidden; text-align: left; padding: 0.1rem 0.3rem; font-size: 0.75rem; line-height: 1.25; min-height: 0;
  background: var(--surface-3); color: var(--text); border: 1px solid var(--accent); border-left-width: 4px; border-radius: 5px; cursor: pointer; }
.ag-ev b { font-variant-numeric: tabular-nums; }
.ag-ev.tipo-recordatorio { border-color: var(--amber); background: var(--amber-dim); }
.ag-ev.marcador { border-radius: 999px; border-left-width: 1px; white-space: nowrap; text-overflow: ellipsis; }
.ag-ev.hecho { border-color: var(--green); background: var(--green-dim); text-decoration: line-through; color: var(--text-dim); }
.ag-ev.vencido { border-color: var(--red); background: var(--red-dim); }
.ag-ev:hover, .ag-ev:focus-visible { z-index: 3; box-shadow: var(--shadow-md); }
.ag-ahora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--red); z-index: 2; pointer-events: none; }
.ag-ahora::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.agenda-detalle { border-color: var(--accent); }
@media (max-width: 700px) {
  .mes-dia { min-height: 3.6rem; padding: 0.2rem; }
  .mes-chips { display: none; }
  .mes-puntos { display: flex; }
  .mes-mas { display: none; }
  .agenda-mes { padding: 0.3rem; }
  .agenda-tabs { order: -1; }
  .agenda-cuadricula.semana .ag-cab, .agenda-cuadricula.semana .ag-cuerpo { min-width: 36rem; }
}

/* ==================== Documentos imprimibles (media carta, window.print()) ====================
   Compartido por remision, lista de alistamiento, estado de cuenta y recibo de abono
   (js/components/documento.js). En pantalla el documento se ve como una hoja blanca; al imprimir
   solo sale la hoja: sin menu, barras ni botones, fondo blanco y texto negro. */
.doc-barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 5.5in; margin: 0 auto 0.9rem; }
.doc {
  --doc-linea: #9aa0a6;
  background: #fff; color: #111; max-width: 5.5in; margin: 0 auto 1.5rem; padding: 0.3in 0.3in;
  border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); font-size: 8.5pt; line-height: 1.3;
  color-scheme: light;
}
.doc h3 { color: #111; font-size: 8.5pt; margin: 1.1em 0 0.4em; text-transform: uppercase; letter-spacing: 0.04em; }
.doc .meta, .doc .doc-aviso { color: #444; }
.doc-encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid #111; padding-bottom: 0.6rem; }
.doc-empresa { display: flex; align-items: center; gap: 0.6rem; }
.doc-empresa img { width: 44px; height: 44px; }
.doc-empresa-nombre { font-weight: 800; font-size: 12pt; letter-spacing: 0.02em; }
.doc-aviso { font-size: 7.5pt; font-weight: 600; }
.doc-titulo { text-align: right; }
.doc-tipo { font-weight: 700; font-size: 10pt; text-transform: uppercase; }
.doc-numero { font-weight: 800; font-size: 13pt; font-variant-numeric: tabular-nums; }
.doc-datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 1rem; margin: 0; }
.doc-datos dt { font-weight: 600; }
.doc-datos dd { margin: 0; }
.doc-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
/* Las tablas del documento son tablas reales siempre (no las tarjetas del modo celular). */
.doc table { display: table; width: 100%; border-collapse: collapse; font-size: 7.5pt; margin: 0.3rem 0; }
.doc thead { display: table-header-group; }
.doc tbody { display: table-row-group; }
.doc tfoot { display: table-footer-group; }
.doc tr { display: table-row; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
.doc th, .doc td { display: table-cell; width: auto; min-width: 0; padding: 0.2rem 0.3rem; border-bottom: 1px solid var(--doc-linea); text-align: left; color: #111; vertical-align: top; }
.doc th { font-size: 6.5pt; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1.5px solid #111; background: none; }
.doc td[data-label]::before { content: none; display: none; }
.doc .num, .doc th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc tbody tr:hover { background: none; }
.doc .doc-totales { margin: 0.6rem 0 0 auto; width: max-content; min-width: 45%; }
.doc .doc-totales td { border-bottom: 1px solid var(--doc-linea); }
.doc .doc-totales tr:last-child td { font-weight: 800; border-bottom: 2px solid #111; }
.doc-check { display: inline-block; width: 13px; height: 13px; border: 1.5px solid #111; border-radius: 2px; vertical-align: middle; }
.doc-escribir { display: inline-block; min-width: 4.5rem; border-bottom: 1px solid #111; height: 1em; }
.doc-escribir-ancho { min-width: 8rem; }
.doc-firmas { margin-top: 1.1rem; break-inside: avoid; page-break-inside: avoid; }
.doc-firmas-campos { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 1.2rem; }
.doc-firma { display: flex; flex-direction: column; gap: 0.25rem; font-size: 8pt; }
.doc-linea { display: block; border-bottom: 1px solid #111; height: 1.8rem; }
.doc-pie { margin-top: 0.9rem; padding-top: 0.4rem; border-top: 1px solid #111; font-size: 8pt; font-weight: 700; text-align: center; }
.doc-anulada { margin: 0.8rem 0; padding: 0.5rem 0.7rem; border: 2px solid #b00020; color: #b00020; font-weight: 800; text-align: center; letter-spacing: 0.02em; }
.doc-herramientas { max-width: 6.5in; margin: 0 auto 1.5rem; }
.doc-terminos { font-size: 7pt; color: #333; margin-top: 0.9rem; }
.doc .caja-conteo { min-width: 4.5rem; height: 1.6rem; border: 1px solid #111; }
.doc .caja-obs { min-width: 8rem; height: 1.6rem; border-bottom: 1px solid var(--doc-linea); }
.doc-grupo { break-inside: avoid; page-break-inside: avoid; margin-top: 1rem; }
.doc-grupo + .doc-grupo { border-top: 1px dashed var(--doc-linea); padding-top: 0.6rem; }
.doc .badge { border: 1px solid #111; background: none; color: #111; }
.doc .empty { color: #444; }

/* En celular (solo pantalla): la hoja se adapta; impresa sigue siendo carta. */
@media screen and (max-width: 640px) {
  .doc { padding: 1rem 0.85rem; font-size: 9.5pt; overflow-x: auto; }
  .doc-encabezado { flex-direction: column; }
  .doc-titulo { text-align: left; }
  .doc-columnas, .doc-firmas-campos { grid-template-columns: 1fr; }
  .doc .doc-totales { min-width: 100%; }
}

/* Todas las impresiones del sistema son en MEDIA CARTA (5,5 x 8,5 pulgadas = 139,7 x 215,9 mm). */
@page {
  size: 139.7mm 215.9mm;
  margin: 9mm 9mm 12mm;
  @bottom-right { content: "Página " counter(page) " de " counter(pages); font: 7pt sans-serif; color: #444; }
}

@media print {
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #000 !important; }
  .sidebar, .topbar, .menu-velo, #barra-bodega, .menu-toggle, .no-print, .doc-barra, .aviso-version, .aviso-instalar, .aviso-red, .agenda-avisos,
  .asistente-burbuja, .asistente-panel, .asistente-backdrop, button, .btn { display: none !important; }
  .app-shell, .app-col, .main, #main-content { display: block !important; padding: 0 !important; margin: 0 !important; background: #fff !important; }
  .doc { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; color: #000; }
  .doc * { color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  /* No partir filas, grupos ni firmas entre paginas; el encabezado de la tabla se repite en cada hoja. */
  tr, td, th, .doc-grupo, .doc-firmas, .doc-totales, .doc-encabezado { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
  h3 { break-after: avoid; page-break-after: avoid; }
  img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---- Buscador de clientes (Crear pedido y Clientes) ---- */
.buscador-clientes .bc-resultados { list-style: none; margin: 0.3rem 0 0; padding: 0; max-height: 18rem; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.buscador-clientes .bc-resultados:empty { display: none; }
.buscador-clientes .bc-opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; text-align: left; background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; padding: 0.55rem 0.75rem; }
.buscador-clientes .bc-resultados[hidden] { display: none; }
.buscador-clientes .bc-opcion:hover, .buscador-clientes .bc-opcion:focus, .buscador-clientes .bc-opcion.activa { background: var(--surface-2); }
.buscador-clientes .bc-nombre { font-weight: 600; }
.cliente-elegido { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.precios-linea { display: grid; grid-template-columns: 1fr auto auto; gap: 0.3rem 0.8rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--border-soft); }
.precios-linea input { width: 9rem; }
.precios-linea .fuera { border-color: var(--red); }

/* ==================== Bodega de origen del pedido (faltantes) ==================== */
.falta { color: var(--red); font-weight: 600; }
.stock-linea { font-size: 0.85rem; margin-top: 0.15rem; }
.faltante-pedido { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.faltante-pedido:first-of-type { border-top: 0; }
.faltante-cab { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: center; justify-content: space-between; }
.faltante-lineas { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.faltante-lineas .acciones { margin-top: 0.3rem; }
.dialogo-bodega { max-width: min(30rem, calc(100vw - 2rem)); width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1rem; }
.dialogo-bodega::backdrop { background: rgba(0, 0, 0, 0.6); }

/* ==================== Control de horario ==================== */
.tabla-scroll { overflow-x: auto; }
.hor-marcar { max-width: 32rem; margin-inline: auto; text-align: center; }
.hor-dia { margin: 0; color: var(--text-dim); }
.hor-reloj { margin: 0.1rem 0; font-size: clamp(2.2rem, 9vw, 3.4rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.hor-estado { margin: 0.5rem 0; }
.hor-pin { max-width: 14rem; margin: 0.8rem auto; text-align: left; }
.hor-pin input { text-align: center; font-size: 1.6rem; letter-spacing: 0.4em; }
.hor-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0.6rem 0; }
.hor-boton { min-height: 5.5rem; font-size: 1.5rem; font-weight: 700; border-radius: 14px; }
.hor-entrada { background: var(--green); color: #05150d; }
.hor-salida { background: var(--accent); color: var(--on-accent); }
.hor-boton:disabled { opacity: 0.35; }
.hor-ok b { display: block; font-size: 1.1rem; }
.hor-aviso { margin-top: 0.3rem; color: var(--amber); font-weight: 600; }
.hor-mes-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.hor-mes-cab h3 { margin: 0; }
.hor-filtros { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: flex-end; }
.hor-filtros .field { margin: 0; min-width: 9rem; }
.hor-marcas { list-style: none; margin: 0.5rem 0; padding: 0; }
.hor-marcas li { padding: 0.55rem 0; border-bottom: 1px solid var(--border-soft); }
.hor-marcas li.reemplazada { opacity: 0.6; text-decoration: line-through; }
.hor-marcas li.reemplazada .meta, .hor-marcas li.reemplazada .badge, .hor-marcas li.reemplazada .acciones { text-decoration: none; }
.hor-form { display: grid; gap: 0.5rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.hor-fila { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hor-sem input[type="time"], .hor-sem input[type="number"] { min-width: 6rem; }
@media (max-width: 600px) { .hor-boton { min-height: 6.5rem; } }

/* ==================== Móvil: campos y teclado (2026-10-13) ====================
   iOS hace zoom al enfocar un campo con letra menor de 16 px y deja la pantalla "bajada"; en Android el teclado
   tapaba el campo. Regla unica para TODOS los campos (los que se creen despues tambien): 16 px en pantallas
   tactiles o menores de 860 px. !important porque algunas clases ponen su propio tamano (.cant-cell, #barra-bodega). */
@media (max-width: 859px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  /* Al enfocar un campo el navegador lo desplaza a la vista: deja sitio para la barra de bodega (arriba) y el
     boton del asistente / avisos (abajo), que son fijos. */
  input, select, textarea { scroll-margin-top: 5.5rem; scroll-margin-bottom: 9rem; }
  /* El panel del asistente sigue la altura VISIBLE (sin teclado): ver js/teclado.js. */
  .asistente-panel { height: 100vh; height: var(--vv-alto, 100dvh); }
}
/* Con el teclado abierto los elementos fijos de abajo estorban y suben con el: se ocultan mientras se escribe. */
html.teclado-abierto .asistente-burbuja,
html.teclado-abierto .agenda-avisos,
html.teclado-abierto .aviso-instalar,
html.teclado-abierto .aviso-version { display: none !important; }

/* ==================== Transporte C & S Trans Logistica (2026-10-15) ==================== */
.modo-prueba-on { border-left: 4px solid var(--red); }
.remesa-form fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 0.8rem; padding: 0.6rem 0.8rem; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.remesa-form legend { font-weight: 700; padding: 0 0.4rem; }
.tr-parada { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.8rem; margin: 0 0 0.7rem; background: var(--surface); }
.tr-parada.entregada { border-color: var(--green, #2e7d32); }
.tr-parada h4 { margin: 0 0 0.3rem; }
.tr-carga { font-size: 0.92rem; margin: 0.15rem 0; }
.tr-mov .btn, .tr-mov button { min-height: 3rem; font-size: 1.05rem; }
.tr-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.tr-neg { color: var(--red); font-weight: 700; }
.tr-pos { color: var(--green, #2e7d32); font-weight: 700; }
/* Hoja de la remesa: una pagina por copia; marca de agua diagonal mientras el modo de prueba este encendido. */
.remesa-hoja { position: relative; overflow: hidden; page-break-after: always; break-after: page; padding: 0.15in 0.2in; }
.remesa-hoja:last-child { page-break-after: auto; break-after: auto; }
.remesa-marca { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-32deg); width: 105%; text-align: center; font-size: 20pt; font-weight: 900; letter-spacing: 0.04em; color: rgba(176, 0, 32, 0.22); pointer-events: none; white-space: normal; line-height: 1.15; z-index: 5; }
.rm-enc { align-items: flex-start; }
.rm-logo { display: inline-flex; align-items: center; justify-content: center; width: 165px; min-height: 64px; margin-right: 0.4rem; background: transparent; }
.rm-logo img { width: 165px; max-width: 100%; height: auto; max-height: 92px; object-fit: contain; background: transparent; display: block; }
.rm-logo.sin-logo { display: none; }
.rm-copia { margin-top: 0.2rem; font-weight: 700; border: 1.5px solid #111; padding: 0.1rem 0.5rem; display: inline-block; }
.rm-fila { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; align-items: center; margin-top: 0.5rem; }
.rm-fila > * { flex: 1 1 10rem; }
.rm-par { display: flex; gap: 0.4rem; align-items: baseline; border-bottom: 1px solid var(--doc-linea); padding: 0.1rem 0; }
.rm-k { font-weight: 700; white-space: nowrap; font-size: 6.5pt; text-transform: uppercase; }
.rm-v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rm-caja { display: inline-block; width: 13px; height: 13px; border: 1.5px solid #111; border-radius: 2px; text-align: center; line-height: 11px; font-size: 10px; font-weight: 800; vertical-align: middle; }
.rm-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.6rem; }
.rm-bloque { border: 1px solid #111; border-radius: 3px; padding: 0.3rem 0.6rem 0.5rem; }
.rm-bloque h3 { margin: 0.1rem 0 0.3rem; }
.rm-ancho { margin-top: 0.6rem; }
.rm-texto { min-height: 1.6rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-valores td { padding: 0.15rem 0.3rem; }
.rm-pie .doc-firma { margin-top: 0.3rem; }
@media screen and (max-width: 640px) { .rm-dos { grid-template-columns: 1fr; } .remesa-marca { font-size: 14pt; } }
@media print {
  .remesa-hoja { box-shadow: none; margin: 0; border-radius: 0; max-width: none; }
  /* `.doc * { color: #000 !important }` pintaria la marca de agua en negro y taparia el texto: se mantiene el rojo palido. */
  .doc .remesa-marca { color: rgba(176, 0, 32, 0.22) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.alert-info { background: var(--blue-dim, rgba(80,140,220,0.12)); color: var(--blue, #5b8dd6); border: 1px solid rgba(80,140,220,0.3); display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
/* Gastos de transporte */
.gt-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.gt-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; overflow: auto; }
.gt-dialogo { width: min(460px, 100%); margin: 0; max-height: 100%; overflow: auto; }
.gt-foto img { max-width: 100%; max-height: 90vh; border-radius: 8px; }
.gt-foto .gt-cerrar { position: absolute; top: 12px; right: 12px; }
.gt-mini { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }
.gt-thumb { padding: 0; min-width: 48px; min-height: 48px; }
.gt-anulado { opacity: .55; }
.nav-contador { margin-left: auto; }
/* Catalogo: buscador y foto del producto */
.catalogo-buscar-campo { margin: 0 0 .6rem; }
.catalogo-buscar { width: 100%; }
.foto-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.foto-overlay img { max-width: 100%; max-height: 90vh; border-radius: 8px; background: #fff; }
.foto-overlay .foto-cerrar { position: absolute; top: 12px; right: 12px; }
.producto-fila[hidden], .categoria-section[hidden] { display: none !important; }

/* Remesa: campos de carga en 0 resaltados (no bloquean la emision) */
.remesa-form .campo-alerta input { border-color: var(--amber, #d99a3d); box-shadow: 0 0 0 2px rgba(217,154,61,.35); background: var(--amber-dim, rgba(217,154,61,.12)); }
.remesa-form .campo-alerta .aviso-campo { display: block; color: var(--amber, #b97a1a); font-size: .8rem; margin-top: .2rem; }
.remesa-form .aviso-campo { display: none; }
.remesa-form .alerta-valores { color: var(--red, #b00020); background: var(--red-dim, rgba(176,0,32,.1)); border: 1px solid var(--red, #b00020); border-radius: 6px; padding: .4rem .6rem; font-size: .9rem; }
.remesa-form .alerta-valores[hidden] { display: none; }
/* Media carta: en un documento largo el encabezado de la tabla se repite en cada hoja; su primera fila identifica el documento (numero y cliente) en cada pagina. */
.doc .doc-thead-id th { font-size: 6.5pt; font-weight: 600; text-transform: none; letter-spacing: 0; color: #444; border-bottom: 0; padding-bottom: 0; }
/* Remesa en media carta: cada copia cabe en UNA hoja (sin partirse) -- espacios mas cortos que en carta. */
.remesa-hoja { line-height: 1.2; }
.remesa-hoja .rm-fila { margin-top: 0.3rem; gap: 0.2rem 1rem; }
.remesa-hoja .rm-dos { margin-top: 0.35rem; gap: 0.5rem; }
.remesa-hoja .rm-ancho { margin-top: 0.35rem; }
.remesa-hoja .rm-bloque { padding: 0.2rem 0.45rem 0.3rem; }
.remesa-hoja .rm-bloque h3 { margin: 0.05rem 0 0.2rem; }
.remesa-hoja .rm-texto { min-height: 1.1rem; }
.remesa-hoja .doc-linea { height: 1.3rem; }
.remesa-hoja .doc-firma { gap: 0.1rem; }
.remesa-hoja .rm-valores td { padding: 0.1rem 0.3rem; }
.remesa-hoja .doc-encabezado { padding-bottom: 0.3rem; }
.remesa-hoja h3 { margin: 0.4em 0 0.2em; }

/* ---- Abonos con lectura por IA (Entrega C, 2026-10-18): tarjetas de aprobacion, pestanas, miniaturas ampliables ---- */
.alert-lectura { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.pestanas { display: flex; gap: var(--space-2); margin: 0 0 var(--space-4); flex-wrap: wrap; }
.pestana { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); width: auto; min-height: var(--tap); }
.pestana.activa { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.abono-card h3 { margin: 0 0 var(--space-1); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.abono-grande { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.ag-etiqueta { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.ag-valor { display: block; font-size: 1.6rem; font-weight: 700; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.ag-dato { display: block; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.comp-lista { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-2) 0; }
.comp-item { display: flex; flex-direction: column; gap: var(--space-1); max-width: 140px; font-size: 0.75rem; overflow-wrap: anywhere; }
.comp-mini, .comp-pdf { width: 120px; height: 120px; padding: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.comp-mini { cursor: zoom-in; display: block; }
.comp-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-pdf { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-2); font-weight: 700; color: var(--text); text-decoration: none; }
.visor-comp { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); cursor: zoom-out; }
.visor-comp img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-cerrar { position: absolute; top: var(--space-3); right: var(--space-3); width: auto; }
.apa-botones { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.apa-botones button { width: auto; }
.abonos-factura td { vertical-align: top; }

/* Mi libreta (Entrega E): chat que prepara tarjetas, lista y totales */
.lb-hilo { display: flex; flex-direction: column; gap: var(--space-2); max-height: 50vh; max-height: 50dvh; overflow-y: auto; margin-bottom: var(--space-3); }
.lb-burbuja { padding: var(--space-3); border-radius: var(--radius); max-width: 92%; overflow-wrap: anywhere; }
.lb-yo { align-self: flex-end; background: var(--accent-dim); color: var(--text); }
.lb-ia { align-self: flex-start; background: var(--surface-2); color: var(--text); }
.lb-tarjeta { align-self: stretch; max-width: 100%; background: var(--surface-2); border: 1px solid var(--accent); }
.lb-tarjeta-texto { margin: 0 0 var(--space-2); }
.lb-espera { color: var(--text-dim); }
.lb-chat-form { display: flex; gap: var(--space-2); }
.lb-chat-form input { flex: 1; min-width: 0; }
.lb-chat-form button { width: auto; }
.lb-filtros { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.lb-filtros select, .lb-filtros input[type="date"] { width: auto; min-width: 0; }
.lb-f-fecha, .lb-f-anulados { display: flex; gap: var(--space-2); align-items: center; font-size: 0.86rem; color: var(--text-dim); }
.lb-totales { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.lb-anulado td { opacity: 0.6; }
.lb-mini { margin-top: var(--space-2); }

/* ---- Imprimir inventario: casillas por categoria ---- */
.ii-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.ii-cat-lbl { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); max-width: 100%; }
.ii-cat-lbl input { width: auto; min-height: 0; flex: none; }
.ii-cat-lbl span:nth-of-type(1) { overflow-wrap: anywhere; }

/* ---- Entrega G2: "Entregar a" (cliente final del pedido) ---- */
.entregar-a { margin: 0.25rem 0 0.5rem; padding: 0.3rem 0.6rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
@media print { .entregar-a { border-left: 2px solid #000; background: none; } }

/* Grupo de cartera (Fernando Hoyos): la fila se abre con doble clic; el detalle de productos va debajo de cada factura. */
.fila-grupo { cursor: pointer; }
.fila-grupo td { background: var(--surface-2); }
.gr-detalle td { background: var(--surface-2); padding-top: 0; }
.gr-lineas { width: 100%; }
.gr-lineas th, .gr-lineas td { font-size: .85rem; }
.productos-factura { margin-top: .4rem; }

/* ---- Inventario: una tabla por categoria con una columna fija por bodega y el total. Siempre es tabla real
   (tambien en celular): scroll horizontal dentro del recuadro y la columna del producto fija a la izquierda. ---- */
.inv-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; }
.inv-tabla-wrap .inv-tabla { display: table; width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.inv-tabla-wrap .inv-tabla thead { display: table-header-group; }
.inv-tabla-wrap .inv-tabla tbody { display: table-row-group; }
.inv-tabla-wrap .inv-tabla tr { display: table-row; background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
.inv-tabla-wrap .inv-tabla tbody tr:hover td { background: var(--surface-3); }
.inv-tabla-wrap .inv-tabla th, .inv-tabla-wrap .inv-tabla td { display: table-cell; width: auto; min-width: 0; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; }
.inv-tabla-wrap .inv-tabla th { color: var(--text-dim); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
.inv-tabla-wrap .inv-tabla td.num, .inv-tabla-wrap .inv-tabla th.num { text-align: right; min-width: 6.5rem; }
.inv-tabla-wrap .inv-tabla tbody tr:last-child td { border-bottom: none; }
.inv-tabla-wrap .inv-tabla .inv-producto { position: sticky; left: 0; z-index: 1; background: var(--surface-2); text-align: left; white-space: normal; min-width: 11rem; max-width: 16rem; box-shadow: 1px 0 0 var(--border-soft); }
.inv-tabla-wrap .inv-tabla .inv-producto .producto-nombre, .inv-tabla-wrap .inv-tabla .inv-producto .producto-sub { display: block; }
.inv-tabla-wrap .inv-tabla .inv-total { font-weight: 700; }

/* ==================== Ventas: detalle de un cliente ==================== */
.vr-cliente-campo { min-width: 14rem; flex: 1 1 14rem; }
.vr-cliente-campo select { margin-top: 0.4rem; }
.vr-cliente-campo input, .vr-cliente-campo select { width: 100%; }
.vr-fila { cursor: pointer; }
.vr-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vr-cabecera h3 { margin: 0 0 0.25rem; }
.vr-remisiones { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.vr-rem { background: var(--surface); border: 1px solid var(--border, var(--surface-3)); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 0.5rem; }
.vr-remisiones .vr-rem { margin-bottom: 0; }
.vr-rem > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem; padding: 0.7rem 0.9rem; cursor: pointer; list-style: none; }
.vr-rem > summary::-webkit-details-marker { display: none; }
.vr-rem > summary::before { content: "\25B8"; color: var(--text-muted, inherit); margin-right: 0.4rem; }
.vr-rem[open] > summary::before { content: "\25BE"; }
.vr-rem-num { font-weight: 600; }
.vr-rem-valor { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.vr-rem-desc { white-space: nowrap; }
.vr-cabecera .kpi-valor { font-size: 1.35rem; white-space: nowrap; }
.vr-rem-fecha, .vr-rem-desc { color: var(--text-muted, inherit); font-size: 0.85rem; }
.vr-rem-cuerpo { padding: 0 0.9rem 0.8rem; }
.vr-scroll { overflow-x: auto; }
/* Tabla de lineas: siempre tabla real (en celular se desliza de lado, no se vuelve tarjeta). */
.vr-items { display: table; width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vr-items thead { display: table-header-group; } .vr-items tbody { display: table-row-group; }
.vr-items tr { display: table-row; background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.vr-items th, .vr-items td { display: table-cell; width: auto; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--surface-3); text-align: left; white-space: nowrap; }
.vr-items td:nth-child(2), .vr-items th:nth-child(2) { white-space: normal; min-width: 12rem; }
.vr-items th.num, .vr-items td.num { text-align: right; font-variant-numeric: tabular-nums; }
.vr-items td::before { content: none; display: none; }

/* ==================== Gastos: filtro rapido por estado y borde por estado ==================== */
.filtro-estado { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filtro-estado .fe-chip { background: var(--surface-2); color: var(--text); border: 1px solid var(--surface-3); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.filtro-estado .fe-chip.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
.filtro-estado .fe-n { opacity: 0.75; font-variant-numeric: tabular-nums; margin-left: 0.2rem; }
.card.gasto-pendiente_aprobacion { border-left: 4px solid var(--amber); }
.card.gasto-aprobado { border-left: 4px solid var(--green); }
.card.gasto-rechazado { border-left: 4px solid var(--red); }

/* Paquete C: cobro de flete y cartera de transporte (estilo revisado con el Tablero de transporte; William lo usa desde el celular) */
.fl-viaje { margin-bottom: var(--space-6); }
.fl-viaje > h3 { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-5) 0 var(--space-3); }
.fl-remesa { border-left: 4px solid var(--border); padding: var(--space-4); margin-bottom: var(--space-3); }
.fl-remesa.fl-pagado { border-left-color: var(--green); }
.fl-remesa.fl-parcial { border-left-color: var(--amber); }
.fl-remesa.fl-pendiente { border-left-color: var(--red); }
.fl-cab { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.fl-num { font-family: var(--font-display); font-size: 1.05rem; }
.fl-sin-registrar { margin: var(--space-2) 0 0; }
.fl-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.fl-cifras > div { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: var(--radius); padding: var(--space-2) var(--space-3); min-width: 0; }
.fl-cifras b { font-variant-numeric: tabular-nums; font-size: 1.05rem; overflow-wrap: anywhere; }
.fl-pagado .fl-saldo b { color: var(--green); }
.fl-parcial .fl-saldo b { color: var(--amber); }
.fl-pendiente .fl-saldo b { color: var(--red); }
.fl-form { border-top: 1px solid var(--border-soft, var(--border)); padding-top: var(--space-3); }
.fl-form input, .fl-form select, .fl-total-in { font-size: 16px; min-height: 44px; }
.fl-nada { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-1) 0 var(--space-3); font-size: .92rem; min-height: 44px; }
.fl-nada input { width: 22px; height: 22px; min-height: 0; }
.fl-total { margin-bottom: var(--space-3); }
.fl-total label { display: block; margin-bottom: var(--space-2); color: var(--text-dim); font-size: .88rem; }
.fl-total-msg { margin-top: var(--space-2); }
.fl-total-msg.ok { color: var(--green); font-weight: 600; }
.ct-kpis { margin: var(--space-3) 0; }
.ct-debe { color: var(--amber); }
.ct-anulado { opacity: .6; text-decoration: line-through; }
.ct-anulado .badge, .ct-anulado button { text-decoration: none; }
@media (max-width: 600px) {
  .fl-cifras { grid-template-columns: 1fr; }
  .fl-cifras > div { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .fl-form .acciones > button { width: 100%; min-height: 48px; font-size: 1rem; }
}

/* Tablero de transporte */
.tt-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3); }
.tt-cab h2 { margin-bottom: 0; }
.tt-fechas { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.tt-fechas label { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; color: var(--text-dim); }
.tt-fechas input { min-height: 40px; font-size: 16px; }
.tt-fechas button { width: auto; min-height: 40px; }
.tt-kpis { margin: var(--space-4) 0; }
.tt-kpi:hover { transform: none; border-color: var(--border); }
.tt-cartera { border-left: 4px solid var(--amber); }
.tt-aparte { border-style: dashed; }
.tt-var { font-weight: 600; color: var(--text-dim); }
.tt-bien { color: var(--green); }
.tt-mal { color: var(--red); }
.tt-up { color: var(--accent); }
.tt-sub { color: var(--text-faint); font-weight: 400; }
.tt-graf { margin-bottom: var(--space-4); }
.tt-graf canvas { cursor: pointer; }
.tt-detalle-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.tt-detalle-cab h3 { margin: 0; }
.tt-quitar { cursor: pointer; width: auto; }
.tt-tabla tfoot td { font-weight: 700; border-top: 2px solid var(--border); }
@media (min-width: 860px) { .tt-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ct-kpis { grid-template-columns: repeat(2, minmax(0, 260px)); } }

/* Guias de transporte: un PDF se ve como un chip con icono y nombre (abre el archivo) junto a los botones de las fotos */
.chip-pdf { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* Portal de comerciales: carteras de mercancia y transporte aparte, con mora */
.pc-sub { margin: var(--space-4) 0 var(--space-2); font-size: .95rem; color: var(--text-dim); }
.pc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin-bottom: var(--space-3); }
.pc-tabs { display: flex; gap: var(--space-2); margin: var(--space-4) 0 var(--space-3); }
.pc-tab { width: auto; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.pc-tab.activa { background: var(--accent); color: #fff; border-color: var(--accent); }
.pc-vencida { color: var(--red); font-weight: 600; }

/* Cartera mejoras: distribucion de un abono antes de confirmar */
.apa-reparto { margin: 0.6rem 0; }
.apa-reparto > b { display: block; margin-bottom: 0.3rem; }
.reparto-abono { width: 100%; }
.reparto-abono tbody tr:last-child td { border-top: 1px solid var(--border); }

/* =====================================================================================================
   REDISEÑO FASE 1 -- estructura (menu lateral + barra superior), componentes base e Inicio.
   Va al final del archivo a proposito: estas reglas mandan sobre las de las pantallas que aun no se
   migran. Cada fase siguiente migra su modulo y borra lo que quede viejo.
   ===================================================================================================== */

/* ---------- Base ---------- */
/* Solo en pantalla: los documentos impresos (remision, remesa, listas) conservan su tipografia y su paginacion de antes. */
@media screen {
  html, body { font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { font-family: var(--font-sans); letter-spacing: -0.015em; font-weight: 600; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Estructura ---------- */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
/* min-width: 0 -- la columna es un item flex al lado del menu: sin esto crece hasta el ancho de su contenido
   mas ancho (p. ej. una tabla de 8 columnas) y TODA la pantalla queda mas ancha que la ventana. */
.app-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main { flex: 1; min-width: 0; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-10); }
.con-asistente-flotante .main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

/* Titulos de pantalla: una sola escala para todas (solo en pantalla) */
@media screen {
  .main h1, #main-content > h2 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 var(--space-4); }
  .main h2 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; }
  .main h3 { font-size: var(--fs-lg); font-weight: 600; }
}

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--space-2);
  min-height: calc(var(--topbar) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--space-3) 0;
  background: rgba(11, 12, 16, 0.9);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-migas { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; }
.topbar-seccion { color: var(--text-3); flex-shrink: 0; }
.topbar-seccion:empty { display: none; }
.topbar-seccion::after { content: "/"; margin-left: var(--space-2); color: var(--border-strong); }
.pantalla-actual { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.topbar-acciones { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

button.icon-btn, .icon-btn {
  width: 40px; height: 40px; min-height: 40px; padding: 0; flex-shrink: 0;
  display: inline-grid; place-items: center;
  background: transparent; color: var(--text-2); border: 1px solid transparent; border-radius: var(--radius);
}
button.icon-btn:hover { background: var(--hover); color: var(--text); filter: none; }
.icon-btn .icono { width: 20px; height: 20px; }

/* Selector de bodega (super_admin) */
.barra-bodega:empty { display: none; }
.bodega-sel {
  display: flex; align-items: center; gap: 6px; margin: 0; height: 36px; padding: 0 6px 0 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-3); font-weight: 400;
}
.bodega-sel:hover { border-color: var(--border-strong); }
.bodega-sel:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bodega-sel .icono { width: 16px; height: 16px; flex-shrink: 0; }
.bodega-sel select {
  -webkit-appearance: none; appearance: none; width: auto; max-width: 15rem; min-height: 0; height: 34px;
  padding: 0 20px 0 0; border: 0; background: transparent no-repeat right 2px center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858b9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: var(--text); font-size: var(--fs-md); text-overflow: ellipsis;
}
.bodega-sel select:focus { outline: none; }
.bodega-sel select option { background: var(--surface-2); color: var(--text); }

/* Campana de alertas (super_admin) */
.campana { position: relative; display: flex; align-items: center; gap: 2px; }
.campana-btn {
  position: relative; width: 40px; height: 40px; min-height: 40px; padding: 0;
  display: inline-grid; place-items: center; background: transparent; color: var(--text-2); border: 1px solid transparent; border-radius: var(--radius);
}
.campana-btn:hover { background: var(--hover); color: var(--text); filter: none; }
.campana-btn.con-alertas { color: var(--warn); }
.campana-n {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg);
}
.campana-pista { font-size: 0.9rem; }
.campana-panel {
  position: fixed; top: calc(var(--topbar) + env(safe-area-inset-top, 0px) + 6px); left: var(--space-3); right: var(--space-3); z-index: 1200; margin: 0;
  padding: var(--space-2); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); max-height: calc(100vh - 90px); overflow: auto;
}
.campana-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-2); font-size: var(--fs-sm); color: var(--text-2); }
.campana-cab button { width: auto; }
.alerta-fila { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); color: var(--text-3); text-decoration: none; min-height: 44px; font-size: var(--fs-md); }
.alerta-fila:hover { background: var(--hover); }
.alerta-fila.con-algo { color: var(--text); }
.alerta-cifras { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.alerta-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.alerta-fila.con-algo .alerta-n { color: var(--warn); }
.alerta-monto { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---------- Menu lateral ---------- */
.sidebar {
  display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border);
}
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-2) var(--space-4); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.brand-icono { width: 28px; height: 28px; flex-shrink: 0; }

.nav-bar { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0 2px var(--space-2); scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.nav-grupo { padding: 0; }
.nav-grupo + .nav-grupo { margin-top: var(--space-4); }
.nav-grupo-items, .nav-grupo-plano { display: flex; flex-direction: column; gap: 1px; }
.nav-grupo-items { padding-top: 2px; }
.nav-grupo.plegado .nav-grupo-items { display: none; }
button.nav-grupo-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; height: 28px; min-height: 28px; padding: 0 var(--space-2);
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--text-3); font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
}
button.nav-grupo-titulo:hover { color: var(--text-2); background: transparent; filter: none; }
.nav-grupo-meta { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav-grupo-n { display: none; min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0; text-align: center; }
.nav-grupo.plegado .nav-grupo-n { display: inline-block; }
.nav-grupo-titulo .chevron { width: 14px; height: 14px; color: var(--text-3); transition: transform 0.15s ease; }
.nav-grupo.plegado .chevron { transform: rotate(-90deg); }
.nav-grupo.con-actual button.nav-grupo-titulo { color: var(--text-2); }
.nav-grupo.con-actual .nav-grupo-n { background: var(--accent-dim); color: var(--accent-strong); }

.nav-link {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px var(--space-2);
  border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: var(--fs-md); cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.nav-link span { overflow: hidden; text-overflow: ellipsis; }
.nav-link .icono { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); }
.nav-link:hover { background: var(--hover); color: var(--text); }
.nav-link:hover .icono { color: var(--text-2); }
.nav-link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.nav-link.active { background: var(--accent-dim); color: var(--text); font-weight: 500; box-shadow: none; }
.nav-link.active .icono { color: var(--accent-strong); }
.nav-contador { margin-left: auto; padding: 0.05rem 0.45rem; font-size: 0.6875rem; }

.who-block { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-2) 0; margin-top: var(--space-2); border-top: 1px solid var(--border); }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.who-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; }
.who-datos { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.who .rol { color: var(--text); font-size: var(--fs-sm); font-weight: 500; }
.who-email { color: var(--text-3); font-size: var(--fs-xs); overflow-wrap: break-word; word-break: normal; }
#btn-logout { width: 36px; height: 36px; min-height: 36px; }
#btn-logout .icono { width: 18px; height: 18px; }

/* Celular: el menu entra como panel desde la izquierda, con velo detras */
@media (max-width: 859px) {
  .sidebar {
    position: fixed; z-index: 1300; top: 0; bottom: 0; left: 0; width: min(300px, 86vw);
    padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-102%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s;
    box-shadow: var(--shadow-md); border-right: 1px solid var(--border-strong);
  }
  .sidebar.menu-abierto { transform: none; visibility: visible; transition: transform 0.2s ease; }
  .menu-velo { position: fixed; inset: 0; z-index: 1290; background: rgba(0, 0, 0, 0.55); }
  .brand-row { padding-bottom: var(--space-3); }
  .topbar-seccion { display: none; }
  .bodega-sel select { max-width: 7.5rem; font-size: 16px; } /* 16 px: iOS no hace zoom al tocarlo */
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none !important; } }

/* Escritorio: menu fijo con su propio scroll, usuario siempre visible abajo */
@media (min-width: 860px) {
  .sidebar { width: 248px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; height: 100dvh; padding: var(--space-4) var(--space-3) var(--space-3); }
  .menu-toggle, .menu-cerrar, .menu-velo { display: none !important; }
  .nav-link { min-height: 32px; padding: 5px var(--space-2); }
  .topbar { padding: 0 var(--space-8); }
  .main { padding: var(--space-6) var(--space-8) var(--space-10); }
  .main h1, #main-content > h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-5); }
  .campana-panel { left: auto; right: var(--space-6); width: 360px; }
}

/* ---------- Componentes base ---------- */
.card { border-radius: var(--radius-lg); box-shadow: none; padding: var(--space-4) var(--space-5); }
@media (max-width: 859px) { .card { padding: var(--space-4); } }

button, .btn { font-weight: 500; font-size: var(--fs-md); }
button.secondary, .btn.secondary { background: var(--surface-2); border-color: var(--border); }
button.danger, .btn.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
button.danger:hover { background: var(--danger); color: #fff; filter: none; }
@media (min-width: 860px) { button, .btn { min-height: 38px; padding: 0.5rem 1rem; } button.small, .btn.small { min-height: 32px; padding: 0.3rem 0.7rem; font-size: var(--fs-sm); } }

/* Chip de estado: un color por significado en todo el sistema. Uso: <span class="estado estado-ok">Pagada</span> */
.estado { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; background: var(--surface-3); color: var(--text-2); vertical-align: middle; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado-ok { background: var(--ok-soft); color: var(--ok); }
.estado-warn { background: var(--warn-soft); color: var(--warn); }
.estado-danger { background: var(--danger-soft); color: var(--danger); }
.estado-info { background: var(--info-soft); color: var(--info); }
.estado-discreto { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-3); }
.estado-discreto::before { display: none; }
@media screen { .badge { font-weight: 500; font-size: var(--fs-xs); padding: 0.15rem 0.55rem; } }
.badge-info { background: var(--info-soft); color: var(--info); }

/* Encabezado de pagina: titulo + una linea de contexto, acciones a la derecha */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.ph h1, .ph h2 { margin: 0 !important; }
.ph-sub { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--fs-md); }
.ph-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ph-acciones > button, .ph-acciones > .btn { width: auto; }

/* Control segmentado (periodos, pestañas cortas) */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-width: 100%; overflow-x: auto; }
.seg > button, .seg > a { width: auto; height: 30px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }
.seg > button:hover, .seg > a:hover { color: var(--text); background: var(--hover); filter: none; }
.seg > .active, .seg > [aria-pressed="true"] { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-sm); }

/* Barra de filtros que se queda arriba al bajar (debajo de la barra superior) */
.toolbar { position: sticky; top: calc(var(--topbar) + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; margin-bottom: var(--space-3); background: var(--bg); border-bottom: 1px solid var(--border); }

/* Estado vacio: dice que falta y el siguiente paso; nunca una caja vacia */
.vacio { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-2); font-size: var(--fs-sm); }
.vacio b { display: block; color: var(--text); font-size: var(--fs-md); margin-bottom: var(--space-1); }

/* Acordeon: detalle cerrado por defecto */
details.acc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
details.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); padding: var(--space-2) var(--space-4); }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); transition: transform 0.15s ease; flex-shrink: 0; }
details.acc[open] > summary::before { transform: rotate(45deg); }
details.acc > .acc-cuerpo { border-top: 1px solid var(--border); padding: var(--space-3) var(--space-4); }

/* ---------- Inicio ---------- */
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.panel-head h1 { margin: 0 0 var(--space-1) !important; }
.panel-fecha { color: var(--text-2); font-size: var(--fs-md); margin: 0; }
.panel-head .panel-trm { color: var(--text-3); font-size: var(--fs-sm); margin-top: 2px; }
.panel-head .panel-trm b { color: var(--text-2); font-weight: 600; }
.panel-periodo { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-periodo button { width: auto; height: 30px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }
.panel-periodo button:hover { color: var(--text); background: var(--hover); filter: none; }
.panel-periodo button.active { background: var(--surface-3); color: var(--text); font-weight: 500; box-shadow: var(--shadow-sm); }
.panel-fechas { background: var(--surface-2); border-color: var(--border-strong); }

/* Por aprobar: una lista compacta, no una caja por renglon */
.panel-por-aprobar { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); }
.panel-por-aprobar .graf-head { margin-bottom: var(--space-1); }
.panel-por-aprobar .por-aprobar-filas { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-4); }
.panel-por-aprobar .alerta-fila { border-radius: 0; border-bottom: 1px solid var(--border-soft); padding: var(--space-2) 0; }
.panel-por-aprobar .alerta-fila:hover { background: transparent; color: var(--text); }

/* Tarjetas de resumen (tambien las usan Cartera y Transporte) */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpi {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: none; color: var(--text); text-decoration: none; transition: border-color 0.15s ease;
}
a.kpi:hover { border-color: var(--border-strong); transform: none; }
.kpi-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.kpi-valor { margin-top: var(--space-1); font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-sub { font-size: var(--fs-xs); color: var(--text-3); }
.kpi-ok { border-color: var(--border); background: var(--surface); }
.kpi-ok .kpi-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.kpi-ok .kpi-valor { color: var(--green); }
.kpi-danger { border-color: var(--border); background: var(--surface); }
.kpi-danger .kpi-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
.kpi-danger .kpi-valor { color: var(--danger); }

/* Indicadores de operacion: una sola lista con divisiones, no una caja por cifra */
.kpi-chips {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: var(--space-6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.kpi-chips .chip {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-width: 0;
  padding: var(--space-3) var(--space-4); background: transparent; border: 0; border-radius: 0;
  box-shadow: 1px 1px 0 0 var(--border); font-size: var(--fs-md); color: var(--text-2); text-decoration: none;
}
.kpi-chips .chip:hover { background: var(--hover); color: var(--text); }
.kpi-chips .chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-chips .chip b { color: var(--text); font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-chips .chip-warn span { color: var(--text); }
.kpi-chips .chip-warn b { color: var(--warn); }

/* Graficas y bloques de Inicio */
.graf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.graf-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: none; }
.graf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.graf-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.graf-nota { font-size: var(--fs-xs); color: var(--text-3); }
.graf-canvas { position: relative; width: 100%; }
.graf-vacio { min-height: 140px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-2); font-size: var(--fs-sm); padding: var(--space-4); line-height: 1.6; }
.graf-lista { list-style: none; margin: 0; padding: 0; }
.graf-lista li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); }
.graf-lista b { font-variant-numeric: tabular-nums; font-weight: 600; }
.graf-ok { color: var(--text-2); font-size: var(--fs-sm); margin: var(--space-3) 0 0; }

/* Movimientos del periodo: cuatro cifras en una franja, sin cajas */
.panel-mov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-mov-item { background: transparent; border: 0; border-radius: 0; padding: var(--space-3) var(--space-1); text-align: center; min-width: 0; }
.panel-mov-item + .panel-mov-item { border-left: 1px solid var(--border); }
.panel-mov-num { font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.panel-mov-label { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

/* Stock bajo por bodega: plegado; la cifra total ya esta en "Stock bajo" arriba */
.panel-stock-det { border: 1px solid var(--border); border-radius: var(--radius); }
.panel-stock-det > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--text-2); }
.panel-stock-det > summary::-webkit-details-marker { display: none; }
.panel-stock-det > summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); transition: transform 0.15s ease; }
.panel-stock-det[open] > summary::before { transform: rotate(45deg); }
.panel-stock-det > summary:hover { color: var(--text); }
.panel-stock-det .panel-stock-grupo { margin: 0; padding: var(--space-3); background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.panel-stock-grupo-header b { font-size: var(--fs-md); font-weight: 600; }
.panel-stock-grupo-header span { font-size: var(--fs-xs); color: var(--text-3); }
.panel-stock-items { font-size: var(--fs-sm); color: var(--text-2); gap: var(--space-1) var(--space-4); }
.panel-stock-items b { font-weight: 600; }
.panel-sin-cantidad { font-style: normal; color: var(--text-3); font-size: var(--fs-xs); }

/* Comisiones en Inicio */
.graf-comisiones table th, .graf-comisiones table td { min-width: 0; padding: 0.55rem 0.5rem; }
.graf-comisiones tfoot td { border-top: 1px solid var(--border); font-weight: 600; }

@media (min-width: 600px) {
  .kpi-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .kpi-valor { font-size: 1.625rem; }
  .kpi-chips { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .graf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graf-ancha { grid-column: 1 / -1; }
  .panel-por-aprobar .por-aprobar-filas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 599px) {
  .panel-periodo-caja { width: 100%; align-items: stretch; }
  .panel-periodo { display: flex; }
  .panel-periodo button { flex: 1 1 auto; padding: 0 8px; }
  .graf-card { padding: var(--space-4); }
}

/* Comisiones de Inicio en celular: tabla compacta de 4 columnas, no una tarjeta por comercial */
@media (max-width: 859px) {
  .graf-comisiones table { display: table; font-size: var(--fs-sm); }
  .graf-comisiones thead { display: table-header-group; }
  .graf-comisiones tbody { display: table-row-group; }
  .graf-comisiones tfoot { display: table-footer-group; }
  .graf-comisiones tr { display: table-row; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
  .graf-comisiones th, .graf-comisiones td { display: table-cell; padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--border-soft); }
  .graf-comisiones td[data-label]::before { content: none; display: none; }
  .graf-comisiones th { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); text-align: left; }
  .graf-comisiones th.num, .graf-comisiones td.num { text-align: right; white-space: nowrap; }
}
@media (max-width: 399px) { .graf-comisiones table { font-size: var(--fs-xs); } }

/* =====================================================================================================
   REDISEÑO FASE 2 -- Cartera, y dos componentes que quedan para todas las fases: tabla compacta y chips de vencimiento.
   ===================================================================================================== */

/* ---------- Tabla compacta (.tabla dentro de .tabla-caja) ----------
   Escritorio: tabla real, encabezado fijo debajo de la barra superior, cifras a la derecha.
   Celular: cada fila es un renglon compacto (no una tarjeta con etiqueta encima de cada dato): el dato principal
   (.t-prim) arriba a la izquierda, la cifra clave (.t-fin) a la derecha, los demas datos en letra pequeña con su
   etiqueta al lado, y las acciones (.t-acc) en una linea abajo. */
.tabla-caja { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: clip; margin-bottom: var(--space-4); }
.seccion-titulo { margin: var(--space-6) 0 var(--space-3) !important; font-size: var(--fs-lg) !important; }
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
table.tabla > tbody > tr > td.empty, table.tabla > tbody > tr > td.vacio { text-align: center; color: var(--text-2); padding: var(--space-6) var(--space-4); }
.t-sub { display: block; font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; margin-top: 1px; }
.t-acc .btn, .t-acc button { width: auto; }
.t-acc { white-space: nowrap; }
.t-mini { width: 100%; font-size: var(--fs-sm); border-collapse: collapse; }
.t-mini thead { display: table-header-group; }
.t-mini tbody { display: table-row-group; }
.t-mini tr { display: table-row; background: none; border: 0; padding: 0; margin: 0; box-shadow: none; border-radius: 0; }
.t-mini th, .t-mini td { display: table-cell; min-width: 0; }
.t-mini th { text-align: left; font-weight: 500; color: var(--text-3); font-size: var(--fs-xs); padding: 4px 8px; border-bottom: 1px solid var(--border); text-transform: none; letter-spacing: 0; }
.t-mini td { padding: 5px 8px; color: var(--text-2); border: 0; }
.t-mini td::before { content: none !important; }
.t-mini .num { text-align: right; color: var(--text); white-space: nowrap; }
.t-caret { display: inline-block; width: 14px; color: var(--text-3); transition: transform 0.15s ease; }
tr[aria-expanded="true"] .t-caret { transform: rotate(90deg); }
button.t-mas { width: auto; min-height: 0; height: auto; padding: 0; border: 0; background: none; color: var(--text-3); font-size: var(--fs-xs); font-weight: 500; }
button.t-mas:hover { color: var(--accent-strong); filter: none; }

@media (min-width: 860px) {
  table.tabla > thead > tr > th { position: sticky; top: calc(var(--topbar) + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--surface); text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); padding: 10px var(--space-4); border-bottom: 1px solid var(--border); min-width: 0; white-space: nowrap; }
  table.tabla > tbody > tr > td { padding: 10px var(--space-4); border-bottom: 1px solid var(--border-soft); min-width: 0; vertical-align: middle; }
  table.tabla > tbody > tr:hover > td { background: var(--hover); }
  table.tabla > tbody > tr:last-child > td { border-bottom: 0; }
  table.tabla > tbody > tr > .t-prim { font-weight: 500; color: var(--text); }
  table.tabla > tbody > tr > .t-fin { font-weight: 600; }
  table.tabla > tbody > tr.t-grupo > td { background: var(--surface-2); font-weight: 600; cursor: pointer; border-bottom-color: var(--border); }
  table.tabla > tbody > tr.t-grupo:hover > td { background: var(--surface-3); }
  table.tabla > tbody > tr.t-hija > td:first-child { padding-left: 40px; }
  table.tabla > tbody > tr.t-det > td { background: var(--bg); padding: var(--space-2) var(--space-4) var(--space-3) 40px; }
  table.tabla > tbody > tr.t-det:hover > td { background: var(--bg); }
  table.tabla > tfoot > tr > td, table.tabla > tfoot > tr > th { font-weight: 600; border-top: 1px solid var(--border); position: static; color: var(--text); }
}
@media (max-width: 859px) {
  table.tabla, table.tabla > tbody, table.tabla > tfoot { display: block; }
  table.tabla > thead { display: none; }
  table.tabla > tbody > tr, table.tabla > tfoot > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 2px; align-items: baseline;
    padding: var(--space-3) var(--space-4); margin: 0; background: transparent; border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; box-shadow: none;
  }
  table.tabla > tbody > tr:last-child { border-bottom: 0; }
  table.tabla > tbody > tr > td, table.tabla > tfoot > tr > td, table.tabla > tfoot > tr > th { grid-column: 1; display: block; padding: 0; font-size: var(--fs-sm); color: var(--text-2); min-width: 0; text-align: left; border: 0; }
  table.tabla > tbody > tr > td[data-label]::before { content: attr(data-label); display: inline; margin-right: 6px; color: var(--text-3); font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; }
  table.tabla > tbody > tr > td:empty { display: none; }
  table.tabla > tbody > tr > td.t-prim { font-size: var(--fs-md); color: var(--text); font-weight: 500; }
  table.tabla > tbody > tr > td.t-fin { grid-column: 2; grid-row: 1; text-align: right; color: var(--text); font-weight: 600; font-size: var(--fs-md); white-space: nowrap; }
  table.tabla > tbody > tr > td.t-fin2 { grid-column: 2; grid-row: 2; text-align: right; font-size: var(--fs-xs); white-space: nowrap; }
  table.tabla > tbody > tr > td.t-prim::before, table.tabla > tbody > tr > td.t-fin::before, table.tabla > tbody > tr > td.t-acc::before, table.tabla > tbody > tr > td.t-sin-etq::before { content: none; display: none; }
  table.tabla > tbody > tr > td.t-acc { grid-column: 1 / -1; margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); white-space: normal; }
  table.tabla > tbody > tr > td.t-ancho { grid-column: 1 / -1; }
  table.tabla > tbody > tr.t-grupo { background: var(--surface-2); cursor: pointer; }
  table.tabla > tbody > tr.t-grupo > td.t-prim { font-weight: 600; }
  table.tabla > tbody > tr.t-det { display: block; padding: 0 var(--space-4) var(--space-3); }
  table.tabla > tbody > tr.t-det > td { display: block; }
  table.tabla > tfoot > tr { background: var(--surface-2); }
  table.tabla > tbody > tr > td.empty, table.tabla > tbody > tr > td.vacio { grid-column: 1 / -1; }
}

/* ---------- Encabezado con regreso ---------- */
.ph-volver { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--text-3); text-decoration: none; margin-bottom: var(--space-2); }
.ph-volver:hover { color: var(--text); }
.ph h2 .estado, .ph h2 .badge { vertical-align: 3px; margin-left: var(--space-2); font-size: var(--fs-xs); }

/* ---------- Pestañas como control segmentado (Abonos por aprobar, Pagos del portal, Mi cartera) ---------- */
.pestanas, .pc-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.pestanas .pestana, .pc-tabs .pc-tab { width: auto; height: 32px; min-height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; margin: 0; }
.pestanas .pestana:hover, .pc-tabs .pc-tab:hover { color: var(--text); background: var(--hover); filter: none; }
.pestanas .pestana.activa, .pc-tabs .pc-tab.activa { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-sm); border: 0; }

/* ---------- Tarjetas de abono / pago por aprobar ---------- */
.abono-card { padding: var(--space-4) var(--space-5); }
.abono-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-lg); margin: 0 0 2px; }
.abono-card h3 .badge { font-size: var(--fs-xs); }
.abono-card > .meta { margin: 0 0 var(--space-3); }
.abono-grande { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3) var(--space-4); padding: var(--space-3) 0; margin: 0 0 var(--space-3); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: none; }
.abono-grande > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0; background: none; border: 0; }
.abono-card .ag-etiqueta { font-size: var(--fs-xs); color: var(--text-3); text-transform: none; letter-spacing: 0; }
.abono-card .ag-valor { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.abono-card .ag-dato { font-size: var(--fs-md); color: var(--text); overflow-wrap: anywhere; }
.apa-reparto { margin: 0 0 var(--space-3); }
.apa-reparto > b { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; }
.reparto-abono { font-size: var(--fs-sm); }
.apa-botones, .abono-card > p:last-child { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.abono-card button { width: auto; }

/* ---------- Mi cartera (portal) ---------- */
.pc-sub { margin: var(--space-5) 0 var(--space-2) !important; font-size: var(--fs-sm) !important; font-weight: 600; color: var(--text-2); }
.pc-remision { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); }
.pc-remision h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-md) !important; margin: 0 !important; }
.pc-remision > .meta { margin: 2px 0 0; }
.pc-remision .pc-cifras { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.pc-remision .pc-cifras b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-remision > p:last-of-type { margin: var(--space-2) 0 0; }
.pc-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.pc-filtros .field { margin: 0; }

/* ---------- Cartera por cliente / detalle / grupo ---------- */
.cc-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.cc-filtros .field { flex: 1 1 240px; max-width: 420px; margin: 0; }
.cc-filtros .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cc-filtros .check-inline { margin: 0; font-size: var(--fs-sm); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.cc-filtros input[type="search"] { min-height: 38px; height: 38px; }
.cc-nota { font-size: var(--fs-xs); color: var(--text-3); margin: 0 0 var(--space-3); }
.toolbar .cc-nota { flex-basis: 100%; margin: 0; }
.cartera-kpis .kpi-valor { white-space: nowrap; }
.gr-kpis { grid-template-columns: repeat(2, minmax(0, 280px)); }
@media (max-width: 859px) {
  .cartera-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartera-kpis .kpi-valor { font-size: var(--fs-lg); }
  .cartera-kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-filtros .field { flex-basis: 100%; max-width: none; }
}
.estado-plano::before { display: none; }

/* Filas que se abren dentro de las tablas de cartera (abonos de una remision, formulario de ajuste): ocupan todo el ancho; su tabla interna se desplaza de lado si no cabe */
@media (max-width: 859px) {
  table.tabla > tbody > tr.abonos-factura, table.tabla > tbody > tr.ajuste-factura { display: block; padding: 0 var(--space-4) var(--space-3); }
  table.tabla > tbody > tr.abonos-factura > td, table.tabla > tbody > tr.ajuste-factura > td { display: block; overflow-x: auto; }
}
table.tabla > tbody > tr.abonos-factura > td, table.tabla > tbody > tr.ajuste-factura > td { background: var(--bg); }
.productos-factura { margin-top: var(--space-2); }
@media (max-width: 859px) { table.tabla > tfoot > tr > th[data-label]::before { content: attr(data-label); margin-right: 6px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 400; } }
.form-card { max-width: 720px; }
/* Mini tabla de productos: el producto se lleva el ancho; cantidades y valores al tamaño de su cifra */
.t-mini th, .t-mini td { background: transparent !important; }
.t-mini th:nth-child(2), .t-mini td:nth-child(2) { width: 100%; }
.t-mini th.num, .t-mini td.num { white-space: nowrap; width: 1%; }
.gr-tabla > thead > tr > th:first-child { width: 38%; }
@media (min-width: 860px) { .gr-tabla > tbody > tr.t-hija > td:nth-child(4) { white-space: nowrap; } }
.gr-kpis .kpi:last-child { grid-column: auto !important; }
/* Fila del grupo en la lista de cartera: sin los fondos viejos por celda; en celular no se repite el nombre como comercial */
table.tabla > tbody > tr.fila-grupo > td { background: transparent; }
table.tabla > tbody > tr.fila-grupo { background: var(--surface-2); }
@media (max-width: 859px) {
  table.tabla > tbody > tr.fila-grupo > td[data-label="Comercial"] { display: none; }
  table.tabla > tbody > tr > td.t-acc .btn.small, table.tabla > tbody > tr > td.t-acc button.small { min-height: 36px; padding: 0.35rem 0.85rem; }
}
table.tabla td a[href*="/cartera/recibo/"] { white-space: nowrap; }
/* Mi cartera: con tres tarjetas, la primera (saldo) va a lo ancho en celular y las otras dos lado a lado; filtros compactos */
@media (max-width: 859px) { .pc-stats .kpi:first-child:nth-last-child(3) { grid-column: 1 / -1; } }
@media (min-width: 860px) { .pc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pc-filtros { grid-template-columns: 2fr 1fr 1fr 1fr; } }
@media (max-width: 859px) { .pc-filtros { grid-template-columns: 1fr 1fr; } .pc-filtros .field:nth-child(-n+2) { grid-column: 1 / -1; } }
/* Reparto del abono: tabla real tambien en celular (cuatro columnas cortas), encabezados sin mayusculas */
.reparto-abono { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.reparto-abono thead { display: table-header-group; }
.reparto-abono tbody { display: table-row-group; }
.reparto-abono tr { display: table-row; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
.reparto-abono th, .reparto-abono td { display: table-cell; min-width: 0; padding: 6px 8px; border-bottom: 1px solid var(--border-soft); }
.reparto-abono th { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.reparto-abono td[data-label]::before { content: none !important; }
.reparto-abono .num { text-align: right; white-space: nowrap; }
.reparto-abono tbody tr:last-child td { border-bottom: 0; background: var(--surface-2); }
@media (max-width: 599px) { .reparto-abono { font-size: var(--fs-xs); } .reparto-abono th, .reparto-abono td { padding: 5px 4px; } }
@media (max-width: 599px) { .abono-grande { grid-template-columns: repeat(2, minmax(0, 1fr)); } .abono-grande > div:first-child { grid-column: 1 / -1; } }

/* =====================================================================================================
   REDISEÑO FASE 3 -- Inventario (inventario, entradas, ajustes, toma fisica, traslados, salida por traslado, proveedores, cargar Excel)
   ===================================================================================================== */

/* Menu "⋯" de acciones secundarias (Crear producto, Imprimir) */
.menu-mas { position: relative; display: inline-flex; }
button.menu-mas-btn { width: 40px; min-width: 40px; padding: 0; font-size: 1.1rem; line-height: 1; letter-spacing: 0.05em; }
.menu-mas-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 210px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.menu-mas-lista > button, .menu-mas-lista > a {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text-2); font-size: var(--fs-md); font-weight: 400; text-align: left; text-decoration: none; display: flex; align-items: center;
}
.menu-mas-lista > button:hover, .menu-mas-lista > a:hover { background: var(--hover); color: var(--text); filter: none; }

/* Barra de busqueda fija con la leyenda de colores */
.inv-toolbar .field { flex: 1 1 260px; max-width: 460px; margin: 0; }
.inv-toolbar input[type="search"], .toolbar input[type="search"] { min-height: 38px; height: 38px; }
.inv-leyenda { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); }
.inv-leyenda .inv-cero, .inv-leyenda .inv-sin { margin-right: 4px; }

/* Cifras de existencia: planas; solo el stock bajo lleva color (rojo con punto), el cero se atenua y "-" es sin registro */
.inv-n { font-variant-numeric: tabular-nums; }
.inv-bajo { color: var(--danger); font-weight: 600; }
.inv-bajo::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); margin-right: 5px; vertical-align: 2px; }
.inv-cero, .inv-sin { color: var(--text-3); }
.inv-tabla .inv-total { font-weight: 600; }
.inv-tabla .producto-nombre { display: block; }
.inv-tabla .cat-count { margin-left: 6px; background: transparent; color: var(--text-3); padding: 0; font-weight: 400; font-size: var(--fs-xs); }
.inv-tabla .inv-ajustar-uno { color: var(--text-3); }
.inv-tabla .inv-ajustar-uno:hover { color: var(--accent-strong); }
@media (min-width: 860px) {
  .inv-tabla > thead > tr > th.num, .inv-tabla > tbody > tr > td.num { white-space: nowrap; }
  .inv-tabla > tbody > tr.inv-fila > td.inv-producto { padding-left: 40px; }
}

/* Celular: cada producto en un renglon -- nombre y total arriba, las bodegas con existencia en una linea debajo */
@media (max-width: 859px) {
  table.inv-tabla > tbody > tr.inv-fila { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); row-gap: 2px; }
  table.inv-tabla > tbody > tr.inv-fila > td { width: auto; } /* la regla vieja de celular pone td al 100% */
  table.inv-tabla > tbody > tr.inv-fila > td.inv-producto { flex: 1 1 0; min-width: 0; order: 0; }
  table.inv-tabla > tbody > tr.inv-fila > td.inv-total { flex: 0 0 auto; order: 1; text-align: right; }
  table.inv-tabla > tbody > tr.inv-fila > td.inv-total::after { content: "total"; display: block; font-size: 11px; font-weight: 400; color: var(--text-3); }
  table.inv-tabla > tbody > tr.inv-fila::after { content: ""; flex-basis: 100%; order: 2; height: 0; }
  table.inv-tabla > tbody > tr.inv-fila > td.inv-b { flex: 0 0 auto; order: 3; font-size: var(--fs-xs); color: var(--text-2); text-align: left; }
  table.inv-tabla > tbody > tr.inv-fila > td.inv-b[data-label]::before { font-size: var(--fs-xs); margin-right: 4px; }
  table.inv-tabla > tbody > tr.inv-fila > td.inv-b-vacia { display: none; }
  .inv-leyenda { margin-left: 0; }
  .inv-toolbar .field { flex-basis: 100%; max-width: none; }
}

/* Tarjeta con filtros arriba y tabla compacta abajo: una sola caja (historiales de Entradas, Ajustes, Salidas, Cargas, Proveedores) */
.card.card-tabla { padding: 0; overflow: clip; }
.card-tabla > .fila { padding: var(--space-4) var(--space-4) var(--space-3); margin: 0; border-bottom: 1px solid var(--border); gap: var(--space-3); }
.card-tabla > .fila .field { margin: 0; }
.card-tabla > .empty, .card-tabla > p { padding: var(--space-6) var(--space-4); margin: 0; }
.card-tabla > table.tabla { margin: 0; }
@media (min-width: 860px) { .card-tabla > table.tabla > thead > tr > th { top: calc(var(--topbar) + env(safe-area-inset-top, 0px)); } }

/* =====================================================================================================
   REDISEÑO FASE 4 -- Pedidos y Despacho (crear pedido, pendientes de asignacion, despacho, enviado, remisiones)
   ===================================================================================================== */

/* Tarjeta de pedido: cabecera (numero · cliente, acciones) y renglones de productos con divisiones, sin cajas por renglon */
.pedido-card { padding: 0; overflow: clip; }
.pedido-card > h3, .pedido-card > .alistar-cabecera { margin: 0 !important; padding: var(--space-3) var(--space-4); background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-md) !important; }
.pedido-card .alistar-cabecera h3 { font-size: var(--fs-md) !important; }
.pedido-card .pedido-cliente { font-weight: 400; color: var(--text-2); }
.pedido-card > :not(h3):not(.alistar-cabecera):not(.check-row):not(.check-list) { margin-left: var(--space-4); margin-right: var(--space-4); }
.pedido-card > .check-row, .pedido-card .check-list > .check-row { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-soft); margin: 0; }
.pedido-card > .check-row:last-child { border-bottom: 0; }
.pedido-card .check-row .prod { font-weight: 500; }
.pedido-card .check-row .sub { font-size: var(--fs-xs); color: var(--text-3); }
.pedido-card .alistar-acciones .cant-cell { width: 84px; min-height: 36px; height: 36px; text-align: right; }
.pedido-card .alistar-acciones button { min-height: 36px; }
.pedido-card .guia-fields { padding: var(--space-3) var(--space-4) 0; margin: 0; }
.pedido-card > .btn-confirmar, .pedido-card > button { margin: var(--space-3) var(--space-4) var(--space-4); width: auto; }
.pedido-card .entregar-a { margin: var(--space-3) var(--space-4) 0; }
.pedido-card .msg:empty { display: none; }
.pedido-card .msg { margin: var(--space-3) var(--space-4) 0; }
.pedido-card .sin-existencia { margin-left: 6px; }

/* Anulados de Despacho: plegados al final */
.anulados-acc { margin-top: var(--space-6); }
.anulados-acc .acc-cuerpo { padding: var(--space-3); }
.anulados-acc .tabla-caja { margin: 0; }

/* Remisiones: mensaje dentro de la caja de filtros + tabla; la guia se edita en su celda */
.card-tabla > #rem-msg:empty { display: none; }
.card-tabla > #rem-msg { padding: var(--space-3) var(--space-4) 0; }
.card-tabla > .fila > form.field { flex: 2 1 260px; }
table.tabla .guia-actual, table.tabla .guia-fotos { font-size: var(--fs-sm); }
@media (max-width: 859px) {
  .pedido-card .alistar-acciones { width: 100%; }
  .pedido-card .alistar-acciones .cant-cell { flex: 0 0 84px; }
  table.tabla > tbody > tr > td[data-label="Guia"] { grid-column: 1 / -1; }
}
.pedido-card .alistar-cabecera { gap: var(--space-2); }
.pedido-card .alistar-cabecera > h3 { margin-right: auto !important; }

/* =====================================================================================================
   REDISEÑO FASE 5 -- Transporte (tablero, viajes, remesas, cobro de flete, cartera y gastos de transporte, catalogos, mis viajes)
   ===================================================================================================== */

/* ---------- Cobro de flete (maqueta aprobada en la Puerta 0) ---------- */
.fl-kpi { grid-template-columns: minmax(0, 320px); }
.fl-viaje { margin-bottom: var(--space-6); max-width: 760px; }
.fl-viaje-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: var(--space-5) 0 var(--space-2); }
.fl-viaje-cab h3 { margin: 0 !important; font-size: var(--fs-lg); }
details.fl-total { margin: 0 0 var(--space-3); background: none; border: 0; padding: 0; }
details.fl-total > summary { list-style: none; cursor: pointer; color: var(--accent-strong); font-size: var(--fs-sm); padding: var(--space-1) 0; }
details.fl-total > summary::-webkit-details-marker { display: none; }
details.fl-total > summary::after { content: " ›"; }
details.fl-total[open] > summary::after { content: " ⌄"; }
.fl-total-cuerpo { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.fl-total-cuerpo label { font-size: var(--fs-sm); color: var(--text-2); }
.fl-total-msg.ok { color: var(--ok); }

.fl-remesa { border-left: 1px solid var(--border); padding: 0; margin-bottom: var(--space-2); overflow: clip; }
.fl-remesa.fl-pagado, .fl-remesa.fl-parcial, .fl-remesa.fl-pendiente { border-left-color: var(--border); }
.fl-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.fl-cab-izq { min-width: 0; flex: 1; }
.fl-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fl-num { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600; }
.fl-sub { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.fl-cifras { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--text-3); }
.fl-cifras > span { white-space: nowrap; }
.fl-cifras b { font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
.fl-saldo { text-align: right; flex-shrink: 0; }
.fl-saldo b { display: block; font-size: var(--fs-lg); font-weight: 600; color: var(--text) !important; font-variant-numeric: tabular-nums; }
.fl-saldo span { font-size: 11px; color: var(--text-3); }
.fl-remesa > .alert { margin: 0 var(--space-4) var(--space-3); }
.fl-abrir-caja { padding: 0 var(--space-4) var(--space-3); }
.fl-abrir-caja .fl-abrir { width: 100%; }
.fl-form { border-top: 1px solid var(--border); padding: var(--space-4); display: grid; gap: var(--space-3); }
.fl-form .field { margin: 0; }
.fl-dinero { position: relative; }
.fl-dinero > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.fl-dinero .fl-monto { padding-left: 26px; font-weight: 600; }
.fl-forma-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.fl-forma-seg > button { justify-content: center; height: 38px; min-height: 38px; }
.fl-nada { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.fl-botones { display: flex; gap: var(--space-2); }
.fl-botones > button[type="submit"] { flex: 1; }
.fl-pagadas { margin-top: var(--space-2); }
.fl-pagadas > .acc-cuerpo { padding: var(--space-2); }
.fl-pagadas .fl-remesa { margin-bottom: var(--space-2); background: var(--surface-2); }
@media (max-width: 859px) { .fl-kpi { grid-template-columns: 1fr; } }
/* Tabla dentro de una tarjeta: sin caja dentro de caja */
.card > .tabla-caja { border: 0; border-radius: 0; background: transparent; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)); }
@media (max-width: 859px) { .card > .tabla-caja { margin: calc(-1 * var(--space-4)); } }
.card > .tabla-caja:not(:only-child) { margin-top: 0; margin-bottom: 0; }
/* Gastos de transporte: la casilla de seleccion va a la izquierda, sin ocupar un renglon en celular */
@media (max-width: 859px) { table.tabla > tbody > tr > td.gt-sel-celda:empty { display: none; } table.tabla > tbody > tr > td.gt-sel-celda { grid-column: 1 / -1; } }

/* =====================================================================================================
   REDISEÑO FASE 6 -- Gastos (registrar, aprobar, historial)
   ===================================================================================================== */
/* Filtro por estado como control segmentado (los conteos quedan al lado de cada estado) */
.filtro-estado { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 0 var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.filtro-estado .fe-chip { width: auto; height: 32px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }
.filtro-estado .fe-chip:hover { background: var(--hover); color: var(--text); filter: none; }
.filtro-estado .fe-chip.activo { background: var(--surface-3); color: var(--text); border: 0; box-shadow: var(--shadow-sm); }
.filtro-estado .fe-n { color: var(--text-3); opacity: 1; margin-left: 4px; }
/* Tarjeta de gasto: el estado va en el chip, sin franja de color al costado */
.card.gasto-card { border-left: 1px solid var(--border); padding: var(--space-4) var(--space-5); }
.gasto-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.gasto-cab h3 { margin: 0 !important; font-size: var(--fs-md) !important; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.gasto-monto { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gasto-card > .meta { margin: var(--space-2) 0; }
.gasto-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gasto-acciones button { width: auto; }
@media (max-width: 599px) { .filtro-estado { display: flex; } .filtro-estado .fe-chip { flex: 1 1 auto; padding: 0 8px; } }
@media (min-width: 860px) { .gastos-tabla > thead > tr > th:first-child, .gastos-tabla > tbody > tr > td:first-child { width: 1%; white-space: nowrap; } }
.cli-filtros { align-items: center; } .cli-filtros .field { flex: 1 1 280px; } .cli-filtros .meta { margin: 0; flex-basis: 100%; }

/* =====================================================================================================
   REDISEÑO FASE 8 -- Comisiones (comisiones / mis comisiones, comerciales)
   ===================================================================================================== */
/* Filtros (comercial y rango) y formularios de % / cierre / pago dentro de la caja de su tabla */
.cm-filtros .field, .cm-form .field { flex: 1 1 160px; }
.cm-filtros .cm-com, .cm-form .cm-nota-campo { flex: 2 1 220px; }
.cm-form .cm-corto { flex: 0 1 170px; }
.cm-botones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cm-botones button, .cm-form > button { width: auto; }
.card-tabla > .cm-nota { padding: var(--space-3) var(--space-4); margin: 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.card-tabla > .cm-form + table.tabla, .card-tabla > .cm-form + .empty { border-top: 0; }
.card-tabla > .cm-cerrar { border-bottom: 0; border-top: 1px solid var(--border); padding-top: var(--space-3); }
.card-tabla > #cm-detalle:not(:empty) { padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border); background: var(--bg); }
.cm-det-tit { margin: 0 0 var(--space-2); font-size: var(--fs-md); }
#cm-detalle > .empty { padding: var(--space-3) 0; }
.cm-rem td:nth-child(2) { white-space: nowrap; }
table.tabla > tbody > tr > td.t-prim .estado { margin-left: var(--space-1); }
/* Comerciales: una tarjeta por ficha */
.com-nuevo > h3, .com-card > h3 { margin: 0 0 var(--space-3) !important; font-size: var(--fs-md) !important; }
.com-campos { gap: var(--space-3); margin-bottom: var(--space-3); }
.com-campos .field { flex: 1 1 150px; margin: 0; }
.com-campos .com-ancho { flex: 2 1 220px; }
.com-campos > button { width: auto; }
.com-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.com-cab .meta { margin: 0; }
.com-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.com-acciones button { width: auto; }
@media (max-width: 599px) { .cm-form .cm-corto { flex: 1 1 140px; } }
@media (min-width: 860px) { .cm-tabla > tbody > tr > td[data-label="Comercial"] { white-space: nowrap; } }
@media (max-width: 859px) { .cm-pagos > tbody > tr > td.t-prim { order: -1; } }

/* =====================================================================================================
   REDISEÑO FASE 9 -- Ventas (lista por cliente / dia / mes / año y detalle de un cliente)
   ===================================================================================================== */
.vr-form { gap: var(--space-3); }
.vr-form .field { flex: 1 1 150px; margin: 0; }
.vr-form .vr-cliente-campo { flex: 2 1 260px; }
.vr-form > button { width: auto; }
@media (min-width: 860px) { .vr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-tabla > .vr-barra { align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); }
.vr-barra-tit { font-weight: 600; color: var(--text); }
.vr-barra button, .vr-barra .btn { width: auto; }
.vr-tabla-click > tbody > tr > td.t-prim { color: var(--text); }
.vr-tabla-click > tbody > tr:hover > td.t-prim { color: var(--accent-strong); }
/* Detalle de un cliente */
.vr-det-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); }
.vr-det-barra button, .vr-det-barra .btn { width: auto; }
.vr-cabecera { padding: var(--space-5); }
.vr-cabecera .vr-cliente-nombre { margin: 0 0 var(--space-1) !important; font-family: var(--font-display); font-size: var(--fs-xl) !important; letter-spacing: -0.02em; }
.vr-cabecera > .meta { margin: 0 0 var(--space-4); }
.vr-cabecera .kpi-grid { margin-bottom: 0; }
.vr-cabecera .kpi { background: var(--surface-2); box-shadow: none; }
.vr-cabecera .alert { margin: var(--space-3) 0 0; }
.vr-rem { border-radius: var(--radius-lg); box-shadow: none; border: 1px solid var(--border); }
.vr-rem > summary { align-items: center; min-height: var(--tap); padding: var(--space-2) var(--space-4); gap: 2px var(--space-3); }
.vr-rem > summary::before { content: ""; width: 7px; height: 7px; margin-right: 0; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); transition: transform 0.15s ease; flex-shrink: 0; align-self: center; }
.vr-rem[open] > summary::before { content: ""; transform: rotate(45deg); }
.vr-rem > summary:hover { background: var(--hover); border-radius: var(--radius-lg); }
.vr-rem-fecha, .vr-rem-desc { color: var(--text-3); font-size: var(--fs-sm); }
.vr-rem-valor { font-weight: 600; font-size: var(--fs-md); }
.vr-rem-cuerpo { border-top: 1px solid var(--border); padding: var(--space-3) var(--space-4); }
.vr-items th { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); border-bottom-color: var(--border); }
.vr-items td { border-bottom-color: var(--border-soft); color: var(--text-2); }
.vr-items td.num { color: var(--text); }
@media (max-width: 599px) {
  .vr-rem > summary { padding: var(--space-3) var(--space-4); }
  .vr-rem-estado { flex-basis: 100%; order: 5; padding-left: 19px; }
  .vr-rem-desc { flex-basis: 100%; order: 6; padding-left: 19px; white-space: normal; }
  .vr-cabecera { padding: var(--space-4); }
}
.vr-cabecera .kpi-grid + .meta { margin: var(--space-3) 0 0; }
.vr-items th { text-transform: none; letter-spacing: 0; }

/* =====================================================================================================
   REDISEÑO FASE 10 -- Usuarios y Agenda
   ===================================================================================================== */
/* Usuarios: tabla compacta; las acciones de permisos pueden ser varias, asi que se acomodan en varias lineas */
.usr-tabla > tbody > tr > td.t-prim .estado { margin-left: var(--space-1); }
.usr-tabla > tbody > tr > td.t-acc { white-space: normal; }
.usr-tabla > tbody > tr > td.t-acc button { margin: 2px 0; }
@media (min-width: 860px) { .usr-tabla > tbody > tr > td.t-acc { min-width: 220px; } .usr-tabla > tbody > tr > td.usr-rol { white-space: nowrap; } }
@media (max-width: 859px) { .usr-tabla > tbody > tr > td.usr-rol { font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); } }
.card-tabla > #reset-msg:not(:empty) { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.card-tabla > #reset-msg .alert { margin: 0; }
.usr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.usr-form .field { margin: 0; }
.usr-form .hidden { display: none; }
.usr-form-acc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; }
.usr-form-acc button { width: auto; }
@media (max-width: 599px) { .usr-form { grid-template-columns: minmax(0, 1fr); } }
.usr-editor { border-color: var(--accent); }
.usr-editor > h3 { margin: 0 0 var(--space-1) !important; font-size: var(--fs-lg) !important; }
.usr-editor .usr-hist-tit { margin: var(--space-5) 0 var(--space-2) !important; font-size: var(--fs-md) !important; }
/* Agenda: barra con el control segmentado de vistas, la navegacion y el filtro */
.ph-acciones #ag-nuevo { width: auto; }
.agenda-barra .agenda-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.agenda-barra .agenda-tab { width: auto; min-height: 32px; height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; box-shadow: none; }
.agenda-barra .agenda-tab:hover { background: var(--hover); color: var(--text); filter: none; }
.agenda-barra .agenda-tab.activa { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-sm); }
.agenda-titulo { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.agenda-evento-titulo .estado { font-size: var(--fs-xs); }
.card.agenda-barra { padding: var(--space-3) var(--space-4); }
.agenda-barra > * { margin-top: 0; margin-bottom: 0; }
@media (min-width: 860px) { .agenda-barra .agenda-mios { margin-left: auto; } }
table.tabla.usr-tabla > tbody > tr > td.usr-rol { font-weight: 500; }
@media (max-width: 859px) { table.tabla.usr-tabla > tbody > tr > td.usr-rol { font-size: var(--fs-xs); color: var(--text-2); } }

/* Anti-duplicados de comprobantes (2026-11-19): marca "Posible duplicado", lista de coincidencias y pares de la revision */
.dup-lista { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.dup-lista li { margin: var(--space-1) 0; }
.dup-lados { display: grid; gap: var(--space-3); }
.dup-lado { background: var(--surface-2); border-radius: var(--radius); padding: var(--space-3); display: grid; gap: var(--space-1); }
@media (min-width: 860px) { .dup-lados { grid-template-columns: 1fr 1fr; } }