/* Cilia — estilos propios. La paleta viene de los tokens Rols (copia local). */
@import url("rols-tokens.css");

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-page);
  color: #2a2a2a;
}

.layout { display: flex; min-height: 100vh; }
main { flex-grow: 1; padding: 2rem 2.5rem; overflow-x: hidden; min-width: 0; }
.miga { font-size: 0.8rem; color: #9a8c7a; margin: 0 0 1.5rem; }

/* ---------- Login (página propia, estilo tarjeta) ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; }
.login-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 14px 44px rgba(80, 60, 20, 0.12);
  padding: 2.5rem 2.25rem; width: 100%; max-width: 22rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* Logo Heroturfs en su navy corporativo: el PNG (blanco) se usa como máscara
   y el color lo pone el fondo, así sale el wordmark oscuro sobre la tarjeta. */
.login-logo-mark {
  width: 13rem; height: 4.6rem; margin-bottom: 1.3rem;
  background-color: #37414E;
  -webkit-mask: url("heroturfs-logo.png") center / contain no-repeat;
          mask: url("heroturfs-logo.png") center / contain no-repeat;
}
.login-titulo { font-size: 1.45rem; font-weight: 600; color: #3a3a3a; }
.login-sub { font-size: 0.8rem; color: #9a8c7a; margin: 0.15rem 0 1.5rem; }
.login-input {
  width: 100%; font: inherit; font-size: 0.95rem; padding: 0.7rem 0.85rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
  color: #2a2a2a; margin-bottom: 0.9rem;
}
.login-input:focus { outline: none; border-color: var(--accent); }
.login-btn {
  width: 100%; font: inherit; font-weight: 600; font-size: 0.95rem; color: #3a2f22;
  background: var(--accent); border: none; border-radius: 10px; padding: 0.72rem; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.login-btn:hover { background: var(--accent-hover); color: #fff; }
.login-error {
  width: 100%; background: #F2DDDA; color: #9C3D2E; border-radius: 8px;
  padding: 0.5rem 0.7rem; font-size: 0.85rem; margin-bottom: 0.9rem;
}
.login-btn-sso {
  display: block; text-align: center; text-decoration: none; box-sizing: border-box;
}
.login-sep {
  width: 100%; text-align: center; color: #9aa4ad; font-size: 0.8rem;
  margin: 0.9rem 0; display: flex; align-items: center; gap: 0.6rem;
}
.login-sep::before, .login-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

h1 { font-size: 1.8rem; font-weight: 300; color: #3a3a3a; margin: 0 0 0.5rem; }
h1 .destacado { font-weight: 600; position: relative; }
h1 .destacado::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px; background: #3a3a3a;
}
.subtitulo { color: #7a7a7a; max-width: 46rem; margin: 0 0 2rem; }

/* ---------- Sidebar (patrón Rols, idéntico al resto de apps) ---------- */
.sidebar {
  background: var(--bg-sidebar); color: var(--text-sidebar);
  width: 15rem; flex-shrink: 0; display: flex; flex-direction: column;
  padding: 1.1rem 0.8rem;
}
.brand { padding: 0 0.5rem; margin-bottom: 1.4rem; display: flex; flex-direction: column; }
.brand-name {
  font-size: 1.35rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-sidebar-active);
}
.brand-name::first-letter { color: var(--accent); }
.brand-sub { font-size: 0.66rem; color: var(--text-sidebar); opacity: 0.8; }
/* Logos de marca (Heroturfs + Keepgreen) bajo «Merlot», en pequeñito */
.brand-marcas { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; }
.brand-marca { height: 1.05rem; width: auto; max-width: 6rem; object-fit: contain; opacity: 0.85; }
/* el logo de Keepgreen viene oscuro: se pasa a blanco para el sidebar oscuro */
.brand-marca--kg { filter: brightness(0) invert(1); }
.sidebar nav { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar nav a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.42rem 0.7rem; border-radius: 0.5rem;
  font-size: 0.8rem; line-height: 1.25; color: var(--text-sidebar);
  text-decoration: none; transition: background 0.15s;
}
.sidebar nav a:hover { background: var(--bg-sidebar-hover); }
.sidebar nav a.active {
  background: var(--bg-sidebar-active); color: var(--text-sidebar-active);
  font-weight: 500;
}
.sidebar nav a .check {
  width: 14px; height: 14px; border: 1.5px solid #888879; border-radius: 4px;
  display: inline-block; flex-shrink: 0;
}
.sidebar nav a.active .check { background: var(--accent); border-color: var(--accent); }
/* grupo «Movimientos» (Cobros banco + Payouts), separado del grupo de arriba */
.sidebar nav.nav-grupo { margin-top: 1.35rem; }
.sidebar .nav-titulo {
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-sidebar); opacity: 0.55; padding: 0.15rem 0.7rem 0.25rem;
}
/* grupo inferior (Subida ↥ y Configuración ⚙) pegado al fondo, con icono en vez de check */
.sidebar nav.nav-sec { margin-top: auto; }
.sidebar nav a .nav-ico { width: 14px; flex-shrink: 0; text-align: center; font-size: 0.95rem; line-height: 1; opacity: 0.85; }
.sidebar nav a.nav-icono.active .nav-ico { opacity: 1; }
.sidebar .badge {
  margin-left: auto; background: var(--accent); color: #3a3a3a;
  font-size: 0.64rem; font-weight: 700; border-radius: 999px;
  padding: 0.05rem 0.42rem; flex-shrink: 0;
}
.sidebar-foot { margin-top: auto; padding: 0.4rem 0.7rem; font-size: 0.72rem; }
.empresa-activa { color: var(--text-sidebar-active); font-weight: 600; }
.empresa-otras a { color: var(--text-sidebar); display: block; margin-top: 0.2rem; }
.sidebar-foot .salir {
  display: inline-block; margin-top: 0.7rem; color: var(--text-sidebar);
  text-decoration: none; opacity: 0.8;
}
.sidebar-foot .salir:hover { color: var(--accent); opacity: 1; }

/* ---------- Cards y paneles ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(80, 60, 20, 0.06);
  margin-bottom: 1.25rem;
}
.card h2 { margin: 0 0 0.8rem; font-size: 1.05rem; color: #2a2a2a; }

.kpis { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.kpi {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.9rem 1.4rem; min-width: 9rem;
}
.kpi .valor { font-size: 1.5rem; font-weight: 600; color: #3a3a3a; }
.kpi .etiqueta { font-size: 0.75rem; color: #9a8c7a; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Tablas ---------- */
table.lista { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.lista th {
  text-align: left; padding: 0.5rem 0.75rem; color: #9a8c7a;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
table.lista td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.lista tr:last-child td { border-bottom: none; }
table.lista td.num, table.lista th.num { text-align: right; white-space: nowrap; }
.ref-original { color: #7a7a7a; max-width: 26rem; overflow-wrap: anywhere; }

/* Cabeceras ordenables: clic para ordenar, flecha según dirección */
table.lista th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
table.lista th.th-sort:hover { color: #2a2a2a; }
table.lista th.th-sort::after { content: " ↕"; opacity: 0.25; }
table.lista th.th-sort[data-dir="asc"]::after { content: " ↑"; opacity: 1; color: #2a2a2a; }
table.lista th.th-sort[data-dir="desc"]::after { content: " ↓"; opacity: 1; color: #2a2a2a; }

/* Tabla con cabecera fija: la tabla scrollea dentro de su caja y la cabecera
   se queda arriba (Conciliadas / Histórico). Los filtros, encima, no se mueven. */
.tabla-fija { max-height: calc(100vh - 13rem); overflow: auto; }
/* Anchos exactos e idénticos entre Conciliadas e Histórico (vía colgroup).
   min-width evita que en pantallas estrechas las columnas se aplasten y el
   texto colisione: por debajo de ese ancho la caja scrollea en horizontal. */
.tabla-fija table.lista { table-layout: fixed; min-width: 1320px; }
.tabla-fija table.lista td, .tabla-fija table.lista th { overflow-wrap: anywhere; }
.tabla-fija table.lista thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg-card); border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--border);
  vertical-align: bottom;   /* títulos alineados aunque alguna columna envuelva en 2 líneas */
}

/* ---------- Chips de estado y confianza ---------- */
.chip {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  padding: 0.18rem 0.6rem; border-radius: 999px; white-space: nowrap;
}
.chip.estado-conciliado { background: #DDEBDC; color: #2F6B33; }
.chip.estado-propuesto  { background: var(--accent-soft); color: var(--accent-hover); }
.chip.estado-pendiente  { background: #F4E3C8; color: #9A6B1F; }
.chip.estado-excluido   { background: #EAE6E1; color: #7a7a7a; }
.chip.confianza-alta  { background: #DDEBDC; color: #2F6B33; }
.chip.confianza-media { background: #F4E3C8; color: #9A6B1F; }
.chip.confianza-baja  { background: #F2DDDA; color: #9C3D2E; }
.chip.descuadre { background: #F2DDDA; color: #9C3D2E; }
.chip.sin-caso { background: #F2DDDA; color: #9C3D2E; }   /* pendiente sin propuesta (rojo) */

/* Formulario del modal de presupuesto manual */
.pr-form label { display: block; margin: 0.7rem 0 0; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: #9a8c7a; }
.pr-form input, .pr-form select { display: block; width: 100%; margin-top: 0.25rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 0.9rem; color: #2a2a2a; background: #fff; }

/* Marca (atribución Heroturfs / Keepgreen): chip RELLENO con letra blanca.
   Heroturfs azul pizarra, Keepgreen verde, sin identificar gris. */
.chip.marca { color: #fff; border: none; }
.chip.marca-heroturfs { background: #37414E; }   /* azul Heroturfs */
.chip.marca-keepgreen { background: #5C8A3C; }   /* verde Keepgreen */
.chip.marca-otra      { background: #9a8c7a; }   /* sin identificar */

/* Selector de marca editable (líneas de payout): mismo estilo relleno */
.sel-marca {
  font: inherit; font-size: 0.72rem; font-weight: 600;
  color: #fff; background: #9a8c7a; border: none; border-radius: 999px;
  /* hueco a la derecha para que el texto (p.ej. «Keepgreen») no pise la flecha */
  padding: 0.18rem 1.3rem 0.18rem 0.6rem; cursor: pointer; max-width: 11rem;
}
.sel-marca.marca-heroturfs { background: #37414E; }
.sel-marca.marca-keepgreen { background: #5C8A3C; }
.sel-marca.marca-otra      { background: #9a8c7a; }
.sel-marca option { color: #2a2a2a; background: #fff; }   /* desplegable legible */

/* Tabla de desglose de payout: MISMOS anchos en todos (table-layout fijo +
   colgroup). PEDIDO ancho, TIPO/MARCA estrechos, Match Navision el resto. */
table.tabla-payout { table-layout: fixed; }
table.tabla-payout th, table.tabla-payout td { overflow-wrap: anywhere; vertical-align: top; }
table.tabla-payout .sel-marca { width: 100%; max-width: 100%; }
table.tabla-payout td.acc-payout .btn { padding: 0.32rem 0.55rem; margin: 0 0.15rem 0.2rem 0; }
/* ✓ verde de «confirmado» (en vez de dejar la celda de acciones vacía) */
.check-confirmado {
  display: inline-flex; align-items: center; justify-content: center;
  background: #DDEBDC; color: #2F6B33; font-weight: 700; line-height: 1;
  border-radius: 8px; padding: 0.32rem 0.6rem;
}
/* Anotación libre por línea */
.nota-input {
  width: 100%; font: inherit; font-size: 0.8rem; color: #2a2a2a;
  padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card);
}
.nota-input::placeholder { color: #b3a999; }
.nota-input:focus { border-color: var(--accent); outline: none; background: #fffdf9; }
/* Nota interna de «Movimientos banco»: distinta de la nota de conciliación.
   Acento lateral + fondo tenue para que se vea que es otra cosa (privada). */
.nota-input.nota-interna { border-left: 3px solid #c9a24b; background: #fcf8ef; }
.nota-input.nota-interna:focus { background: #fffdf6; }

/* «Movimientos banco mejorado»: desplegar el desglose de un payout */
.origen-desglose {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.caret-desglose { font-size: 0.7rem; color: var(--accent); transition: transform 0.15s ease; }
.caret-desglose.abierto { transform: rotate(90deg); }
tr.fila-desglose > td { background: #faf7f0; padding: 0; }
.desglose-box { padding: 0.6rem 0.9rem 0.8rem; }
.tabla-desglose { margin: 0.35rem 0 0; background: var(--bg-card); }
.tabla-desglose th { font-size: 0.72rem; }

/* Payouts: ¿el dinero ya está en el banco o sigue en tránsito? */
.chip.recibido-si { background: #e6f4ea; color: #1e7e44; border: 1px solid #b7e1c3; }
.chip.recibido-no { background: #fcf3e0; color: #9a6a16; border: 1px solid #ecd9ad; }
.chip.recibido-prog { background: #eef1f6; color: #2c5f8a; border: 1px solid #cdd8e6; }
/* fases del ciclo de vida de un pedido de Shopify (pestaña Pedidos Shopify) */
.chip.fase-pendiente { background: #f0ede9; color: #6b6256; }
.chip.fase-programado { background: #eef1f6; color: #2c5f8a; }
.chip.fase-transito { background: #fcf3e0; color: #9a6a16; }
.chip.fase-recibido { background: #e6f4ea; color: #1e7e44; }
/* la tabla de Pedidos Shopify se ajusta al ancho (sin el mínimo de 1320px) */
.tabla-fija table.lista.tabla-pedidos { table-layout: auto; min-width: 0; width: 100%; }

/* Buzón 2: dos columnas (cobros ↔ documentos) con arrastrar para casar */
.b2-acciones { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.b2-global { flex: 1; min-width: 12rem; }
/* Buzón 2: pop-up flotante al seleccionar un cobro y un documento */
.b2-pop { position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 1rem; background: var(--bg-card);
  border: 1px solid var(--accent); border-radius: 12px; padding: 0.7rem 1.1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); max-width: 92vw; }
.b2-pop[hidden] { display: none; }
.b2-pop-tit { font-weight: 600; }
.b2-pop-resumen { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.b2-pop-resumen b { font-size: 1.02rem; }
.b2-pop-sub { color: #6b6256; font-size: 0.82rem; }
.b2-pop-flecha { color: var(--accent); margin: 0 0.2rem; font-size: 1.1rem; }
.b2-pop-acc { display: flex; gap: 0.5rem; }
.b2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.b2-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem; }
.b2-col-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.b2-col-head h2 { margin: 0; font-size: 1.2rem; font-weight: 600; flex: 1; }
.b2-col-head input { flex: 0 0 45%; }
.b2-n { background: var(--border); border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.8rem; color: #6b6256; }
/* altura FIJA → las dos columnas (cobros / documentos) miden siempre lo mismo */
.b2-lista { display: flex; flex-direction: column; gap: 0.5rem; height: 70vh; overflow-y: auto; }
/* altura mínima uniforme → las tarjetas de cobro y de documento miden igual y las
   filas de las dos columnas quedan alineadas (el cobro lleva una línea extra) */
.b2-item { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; cursor: pointer; background: #fff; transition: border-color .12s, box-shadow .12s, background .12s; min-height: 7.5rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; }
.b2-item.cobro { cursor: grab; }
.b2-item:hover { border-color: var(--accent); }
.b2-item.seleccionado { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(201,162,75,0.25); background: #fffdf6; }
.b2-item.arrastrando { opacity: 0.5; }
.b2-item.doc.drag-encima { border-color: #1e7e44; box-shadow: 0 0 0 2px rgba(30,126,68,0.25); background: #f1f9f3; }
.b2-item.doc.mismo-importe { border-color: #1e7e44; }
.b2-item.doc.no-casable { opacity: 0.6; cursor: not-allowed; }
.b2-top { display: flex; justify-content: space-between; align-items: baseline; }
.b2-imp { font-weight: 600; }
.b2-fecha, .b2-tipo { font-size: 0.78rem; color: #8a8073; }
.b2-cli { font-size: 0.9rem; margin-top: 0.1rem; }
.b2-ref, .b2-doc { font-size: 0.8rem; color: #6b6256; margin-top: 0.05rem; }
.b2-payout-det { font-size: 0.72rem; color: #8a8073; margin-top: 0.2rem; }
.b2-meta { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.chip-tipo-factura { color: #2c5f8a; } .chip-tipo-pedido { color: #8a5a2c; } .chip-tipo-presupuesto { color: #6b6256; }
/* tipo de documento como burbujita en la fila de chips (Buzón 2) */
.chip.chip-tipo-factura { background: #e3edf6; color: #2c5f8a; }
.chip.chip-tipo-pedido { background: #f4e8dc; color: #8a5a2c; }
.chip.chip-tipo-presupuesto { background: #ece8e2; color: #6b6256; }
@media (max-width: 820px) { .b2-grid { grid-template-columns: 1fr; } }

/* ---------- Buzón mejorado: modo «propuestas de conciliación» ---------- */
.b2-prop-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.6rem 0.85rem; margin-bottom: 0.8rem; flex-wrap: wrap;
}
.b2-prop-resumen { font-size: 0.95rem; }
.b2-prop-amber { color: #9A6B1F; font-weight: 600; }
.b2-prop-bar-acc { display: flex; gap: 0.5rem; }
.b2-prop-cab {
  display: grid; grid-template-columns: 1fr 11rem 1fr; gap: 0.75rem;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #8a8073; padding: 0 0.3rem 0.35rem;
}
.b2-prop-cab span:last-child { text-align: left; }
.b2-prop-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.b2-prop-fila {
  display: grid; grid-template-columns: 1fr 11rem 1fr; gap: 0.75rem;
  align-items: center; border-radius: 10px; padding: 0.5rem;
  border: 1px solid var(--border); background: #fff;
}
.b2-prop-fila.sel { outline: 2px solid #C9A24B; outline-offset: 1px; }
.b2-atajos { align-self: center; }
/* Panel del día: tarjetas KPI */
.panel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem; margin-bottom: 1.2rem;
}
.panel-card {
  display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem 1.2rem; color: var(--text);
}
.panel-card:hover { border-color: #C9A24B; }
.panel-num { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.panel-etq { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9a8c7a; }
.panel-sub { font-size: 0.85rem; color: #6b6256; }
.panel-card.ok .panel-num { color: #2F6B33; }
.panel-card.atencion .panel-num { color: #9A6B1F; }
.sync-aviso.sync-ok { background: #F2F7F2; border-color: #CFE0CD; color: #2F6B33; }
.dup-grupo { border-left: 3px solid #C9A24B; padding: 0.3rem 0.6rem; margin: 0.35rem 0; }
/* comisión fuera del patrón histórico del proveedor (Pasarelas) */
.comision-anomala { color: #9C3D2E; font-weight: 600; white-space: nowrap; }
/* aviso de datos rancios (último sync más viejo que su umbral) */
.sync-aviso {
  background: #FDF6E3; border: 1px solid #E5D3A1; border-radius: 8px;
  color: #9A6B1F; font-size: 0.85rem; padding: 0.5rem 0.8rem; margin: 0 0 0.7rem;
}
.sync-aviso a { color: inherit; }
.b2-prop-fila.inequivoca { border-left: 5px solid #2F6B33; background: #eef6ee; }
.b2-prop-fila.exacta   { border-left: 4px solid #8FB996; background: #fbfdfb; }
.b2-prop-fila.anticipo { border-left: 4px solid #C9A24B; background: #fffdf6; }
.b2-prop-fila.conciliada { border-left: 4px solid #2F6B33; background: #fbfdfb; }
/* referencia del payout bajo la del movimiento (Movimientos banco) */
.ref-payout { font-size: 0.72rem; color: #8a8073; margin-top: 0.15rem; }
/* Cobros desglosados: franja izquierda que agrupa las líneas de un mismo payout
   (color alterna entre payouts contiguos para distinguir los bloques). El borde
   transparente en todas las filas mantiene alineadas las que no son payout. */
table.cd-tabla tr > :first-child { border-left: 4px solid transparent; }
table.cd-tabla tr.cd-band-0 > :first-child { border-left-color: #C9A24B; }
table.cd-tabla tr.cd-band-1 > :first-child { border-left-color: #6E94A6; }
/* Alto uniforme: las transferencias (celda Origen con solo el chip y sin sublínea
   de comisión) eran más bajas; este mínimo las iguala al alto de las líneas de payout
   (importe + comisión + neto en 3 líneas). */
table.cd-tabla tbody td { height: 5.3rem; }
/* Los datos de la celda «ID Cobro» (ID payout / ID Banco / Total) en una sola línea
   cada uno, con elipsis: así la columna NO se ensancha por el token largo de Stripe y
   queda sitio para Cliente y Match Navision (valor completo en el tooltip y buscable). */
.cd-tabla .ref-payout { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
/* Presupuestos: selector de propietario (mismo aire que los selects de la app) */
.sel-prop, select#f-propietario {
  font: inherit; font-size: 0.85rem; padding: 0.35rem 0.5rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text); cursor: pointer;
}
.sel-prop { width: 100%; max-width: 13rem; }
.sel-prop:hover, select#f-propietario:hover { border-color: #C9A24B; }
/* Presupuestos: formulario de alta + cabecera de la tabla */
.presu-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.presu-form .fcampo { display: flex; flex-direction: column; gap: 0.2rem; }
.presu-form .fcampo input, .presu-form .fcampo select { min-width: 9rem; }
.presu-form .fcampo-buscar { flex: 1 1 14rem; }
.presu-form .fcampo-buscar input { width: 100%; min-width: 0; }
.presu-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.6rem; }
.presu-head input { flex: 0 0 22rem; max-width: 50%; }
.btn.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.9rem; line-height: 1; }
/* Conciliadas 2: lado con uno o VARIOS cobros apilados (pagos de la misma factura) */
.b2-prop-lado { display: flex; flex-direction: column; gap: 0.5rem; }
.c2-fecha { font-size: 0.8rem; color: #6b6256; }
.c2-dif { font-size: 0.72rem; color: #9A6B1F; }
.c2-ok { font-size: 0.72rem; color: #2F6B33; font-weight: 600; }
.c2-multi { font-size: 0.72rem; color: #6b6256; font-weight: 600; }
.c2-cobro-nota { font-size: 0.72rem; color: #6b6256; margin-top: 0.25rem; }
/* nota del cobro en el Buzón (comentario compartido entre usuarios) */
.b2-cobro-nota { font-size: 0.72rem; color: #6b6256; margin-top: 0.3rem;
  background: #F6F3EC; border-radius: 6px; padding: 0.25rem 0.5rem; }
/* estado de exportación a Navision */
.c2-pend { font-size: 0.72rem; color: #9A6B1F; font-weight: 600; }
.c2-exp { font-size: 0.72rem; color: #2F6B33; }
.c2-parcial { font-size: 0.72rem; color: #2c5f8a; }
/* chip de export por cobro (solo en grupos mixtos) */
.chip.c2-exp-si { background: #DDEBDC; color: #2F6B33; }
.chip.c2-exp-no { background: #F4E3C8; color: #9A6B1F; }
/* payout incompleto: conciliado pero en stand-by hasta exportar el payout entero */
.chip.c2-espera { background: #E4E0F4; color: #4A3F8C; }
/* payout multi-venta completo: informa de qué cobros viajan juntos a Navision */
.chip.c2-payout-grupo { background: #EAE8F7; color: #5B549B; }
/* modal «a cuenta del cliente»: lista de clientes de Navision */
#cli-lista { max-height: 14rem; overflow-y: auto; margin-top: 0.5rem; }
#cli-lista .cli-opcion { display: block; width: 100%; text-align: left; margin-top: 0.35rem; }
.c2-espera-txt { font-size: 0.72rem; color: #4A3F8C; font-weight: 600; }
/* líneas del payout que faltan por conciliar (guía para el Buzón) */
.c2-espera-faltan { font-size: 0.72rem; color: #4A3F8C; margin-top: 0.3rem;
  background: #F1EFFA; border-radius: 6px; padding: 0.3rem 0.5rem; line-height: 1.5; }
/* deshacer una conciliación: discreto, junto a los chips del cobro */
.btn.c2-desconciliar { font-size: 0.72rem; padding: 0.1rem 0.45rem; color: #6b6256; }
.btn.c2-desconciliar:hover { color: #9C3D2E; border-color: #d8a89f; }
/* Lotes exportados: detalle desplegable con las filas del Excel del lote */
tr.lote-detalle > td { background: #faf7f0; padding: 0.6rem 0.9rem; }
table.lote-filas { margin: 0; }
.lote-detalle-scroll { overflow-x: auto; }
table.lote-filas th, table.lote-filas td { font-size: 0.82rem; padding: 0.3rem 0.55rem; }
table.lotes-tabla { table-layout: fixed; }   /* respeta el colgroup: los botones envuelven */
.lote-acciones { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
.lote-acciones .btn { white-space: nowrap; }
.b2-prop-fila .b2-item { cursor: default; }
.b2-prop-mid { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; }
.b2-prop-flecha { font-size: 1.2rem; color: #8a8073; line-height: 1; }
.b2-prop-acc { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; }
.b2-prop-acc .btn { width: 100%; justify-content: center; }
.b2-prop-badge { font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 0.18rem 0.6rem; }
.b2-prop-badge.inequivoca { background: #2F6B33; color: #fff; }
.b2-prop-badge.exacta   { background: #EAF1E9; color: #4A6B4D; border: 1px solid #CFE0CD; }
.b2-prop-badge.anticipo { background: #F4E3C8; color: #9A6B1F; }
.b2-prop-listas { color: #2F6B33; font-weight: 700; }
@media (max-width: 820px) { .b2-prop-fila, .b2-prop-cab { grid-template-columns: 1fr; } }
/* Buzón 2: modal de conciliar con diferencia (resumen + nota) */
.conf-resumen { display: flex; align-items: center; gap: 0.8rem; background: #faf7f0; border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; }
.conf-par { display: flex; flex-direction: column; flex: 1; }
.conf-etq { font-size: 0.72rem; color: #8a8073; text-transform: uppercase; letter-spacing: 0.03em; }
.conf-par b { font-size: 1.05rem; }
.conf-sub { font-size: 0.78rem; color: #6b6256; }
.conf-flecha { color: var(--accent); font-size: 1.2rem; }
.conf-nota-label { display: block; font-size: 0.82rem; color: #6b6256; margin-top: 0.4rem; }
.conf-nota-label textarea { width: 100%; margin-top: 0.3rem; font: inherit; font-size: 0.88rem; padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: 6px; resize: vertical; }
.conf-nota-label textarea:focus { border-color: var(--accent); outline: none; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: #3a3a3a;
  font: inherit; font-size: 0.82rem; font-weight: 500;
  padding: 0.45rem 0.95rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--soft-bg); }
.btn.principal { background: var(--accent); border-color: var(--accent); color: #3a2f22; }
.btn.principal:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn.peligro:hover { background: #F2DDDA; border-color: #d8a89f; color: #9C3D2E; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- Subida (drag & drop) ---------- */
.dropzone {
  border: 2px dashed var(--border); border-radius: 14px;
  background: var(--bg-card);
  padding: 3rem 2rem; text-align: center; color: #7a7a7a;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.dropzone.encima { border-color: var(--accent); background: var(--accent-soft); }
.dropzone strong { color: #3a3a3a; }
.dropzone .nota { font-size: 0.78rem; margin-top: 0.5rem; color: #9a8c7a; }

/* Fichero preparado a la espera del clic en "Procesar" */
.staged {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 0.9rem 1.25rem; margin-top: 1rem;
}
.staged .staged-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.staged .staged-info strong { color: #3a3a3a; overflow-wrap: anywhere; }
.staged .acciones { margin-top: 0; }

/* Separador "o pega los datos" entre el dropzone y la caja de pegar */
.o-separador {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 1.25rem 0; color: #9a8c7a; font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.o-separador::before, .o-separador::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.pegar-box {
  width: 100%; font: inherit; font-size: 0.82rem;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); resize: vertical; box-sizing: border-box; white-space: pre;
}
.pegar-box:focus { outline: none; border-color: var(--accent); }

/* Movimientos banco: columna «mostrar en conciliación» */
table.lista td.centro, table.lista th.centro { text-align: center; }
.mostrar-chk { display: inline-flex; align-items: center; cursor: pointer; }
.mostrar-chk input { width: 1.15rem; height: 1.15rem; cursor: pointer; accent-color: var(--accent); }
tr.fila-oculta { opacity: 0.45; }
tr.fila-oculta:hover { opacity: 0.7; }
/* Nombre de la cuenta bajo el banco: dato secundario, letra más pequeña */
.banco-cuenta { font-size: 0.66rem; color: #a99e8e; margin-top: 0.1rem; line-height: 1.2; }

/* Tabla con columnas gestionables (Movimientos banco): ancho automático con
   mínimos por columna (vía min-width en cada th), en vez del layout fijo. */
.tabla-fija table.lista.tabla-cols { table-layout: auto; min-width: 0; }

/* Panel gestor de columnas (mostrar/ocultar + reordenar) */
#dd-cols { position: relative; display: inline-block; }
.cols-panel {
  display: none; position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 40;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(40, 33, 25, 0.18); padding: 0.6rem; min-width: 17rem;
}
.cols-panel.abierto { display: block; }
.cols-panel-tit {
  font-size: 0.72rem; color: #9a8c7a; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 0.4rem;
}
.col-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.25rem; border-radius: 7px; cursor: grab; }
.col-item:hover { background: rgba(40, 33, 25, 0.04); }
.col-item.arrastrando { opacity: 0.45; }
.col-item.drag-encima { background: var(--accent-soft); }
.col-item label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; cursor: pointer; }
.col-grip { color: #c2b6a3; cursor: grab; user-select: none; font-size: 1rem; line-height: 1; letter-spacing: -2px; }

/* ---------- Buzón ---------- */
.propuesta { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; }
.propuesta .lado {
  flex: 1 1 16rem; background: var(--soft-bg); border-radius: 10px; padding: 0.9rem 1.1rem;
}
.propuesta .lado .titulo {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #9a8c7a; margin-bottom: 0.4rem;
}
.propuesta .lado .importe { font-size: 1.2rem; font-weight: 600; color: #3a3a3a; }
.propuesta .nexo {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 0.3rem; min-width: 7rem;
}
.acciones { display: flex; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; }
.evidencia { font-size: 0.78rem; color: #9a8c7a; margin-top: 0.6rem; }
.diferencia { font-weight: 600; color: #9C3D2E; }
/* lo que falta por asignar de un anticipo, en rojo (resalta sobre el resto de la meta) */
.b2-faltan { color: #C0392B; font-weight: 600; }

.payout-cabecera { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.payout-cabecera .dato { font-size: 0.85rem; color: #2a2a2a; display: inline-flex; align-items: center; }
.payout-cabecera .dato b { color: #2a2a2a; }
.payout-cabecera .etq {
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #9a8c7a; font-weight: 600; margin-right: 0.4rem;
}
.ecuacion { font-size: 0.85rem; color: #5a5a5a; margin: 0.5rem 0 0.8rem; }
.ecuacion.mal { color: #9C3D2E; font-weight: 600; }
.ecuacion .ok-cuadra { color: #2F6B33; font-weight: 600; margin-left: 0.3rem; }

/* ---------- Filtros del buzón (una fila: Origen · Banco · Marca · Fecha) ---------- */
.filtros-buzon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; margin-bottom: 1.25rem; }
.filtros-buzon .fcampo { display: inline-flex; align-items: center; gap: 0.4rem; }
.filtros-buzon .filtro-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #9a8c7a; font-weight: 600;
}
.filtros-buzon select, .filtros-buzon input[type="date"] {
  font: inherit; font-size: 0.82rem; padding: 0.35rem 0.5rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: #2a2a2a;
}
.filtros-buzon .btn { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
/* Buscador libre: ocupa el hueco y empuja "Resetear filtros" a la derecha */
.fcampo-buscar { flex: 1 1 16rem; min-width: 12rem; }
.fcampo-buscar input[type="search"] {
  flex: 1; width: 100%; font: inherit; font-size: 0.85rem; padding: 0.4rem 0.6rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: #2a2a2a;
}
.fcampo-buscar input[type="search"]:focus { outline: none; border-color: var(--accent); }

/* Selector de fecha con presets (estilo dashboard Rols) */
.dropdown { position: relative; display: inline-block; }
.dd-trigger {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: #2a2a2a;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.35rem 0.6rem; cursor: pointer;
}
.dd-trigger:hover { background: var(--soft-bg); }
.dd-trigger .dd-caret { color: #9a8c7a; font-size: 0.7rem; }
.dd-trigger .dd-cal { font-size: 0.85rem; }
.dd-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 14rem; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(40, 33, 25, 0.18);
  padding: 0.4rem; display: none;
}
.dd-menu.abierto { display: block; }
.dd-menu button[data-preset] {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 0.85rem;
  color: #2a2a2a; background: transparent; border: none; border-radius: 8px;
  padding: 0.5rem 0.75rem; cursor: pointer;
}
.dd-menu button[data-preset]:hover { background: var(--soft-bg); }
.dd-menu button[data-preset].activo {
  background: var(--accent-soft); color: var(--accent-hover); font-weight: 600;
}
.dd-sep { height: 1px; background: var(--border); margin: 0.35rem 0.25rem; }
.dd-custom { padding: 0.5rem 0.75rem; }
.dd-custom-label { display: block; font-size: 0.8rem; font-style: italic; color: #7a7a7a; margin-bottom: 0.35rem; }
.dd-custom-inputs { display: flex; align-items: center; gap: 0.35rem; }
.dd-custom-inputs input[type="date"] {
  font: inherit; font-size: 0.78rem; padding: 0.25rem 0.4rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: #2a2a2a;
}

/* Etiqueta de origen (columna del buzón y cabecera de payout) */
.chip-origen {
  display: inline-block; font-size: 0.72rem; font-weight: 600; color: #5a5a5a;
  background: var(--soft-bg); border-radius: 6px; padding: 0.14rem 0.5rem; white-space: nowrap;
}
/* Etiqueta de banco: pill con contorno, para distinguirla del origen */
.chip-banco {
  display: inline-block; font-size: 0.72rem; font-weight: 600; color: #7a7a7a;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  padding: 0.1rem 0.45rem; white-space: nowrap;
}


/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1.1rem; }
.filtros label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.72rem; color: #9a8c7a; }
.filtros select, .filtros input, .modal input {
  font: inherit; font-size: 0.85rem; padding: 0.4rem 0.6rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card);
}

/* ---------- Modal (asignar otro vencimiento) ---------- */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(40, 33, 25, 0.45);
  display: none; align-items: flex-start; justify-content: center; z-index: 50;
  padding: 6vh 1rem;
}
.modal-fondo.abierto { display: flex; }
.modal {
  background: var(--bg-card); border-radius: 14px; padding: 1.5rem;
  width: 100%; max-width: 44rem; box-shadow: 0 12px 40px rgba(40, 33, 25, 0.25);
}
.modal h3 { margin: 0 0 0.8rem; font-size: 1rem; }
.modal input { width: 100%; }
.modal .resultados { max-height: 50vh; overflow-y: auto; margin-top: 0.8rem; }

/* Diálogo de confirmación: pequeño y centrado en pantalla */
.modal-fondo.centrado { align-items: center; padding: 1rem; }
.modal.modal-confirm { max-width: 24rem; text-align: center; }
.modal.modal-confirm p { margin: 0 0 1.2rem; color: var(--text); line-height: 1.45; }
.modal.modal-confirm .acciones { justify-content: center; margin-top: 0; }

/* ---------- Configuración ---------- */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 1.25rem;
  align-items: start;
}
/* min-width:0 evita que el contenido ancho desborde la celda del grid */
.config-grid > .card { min-width: 0; }
/* tarjeta de sincronización: subtítulos + lista de cadencia */
.cfg-sub { font-size: 0.92rem; margin: 1rem 0 0.3rem; }
.cfg-cadencia { margin: 0.3rem 0 0.4rem; padding-left: 1.1rem; font-size: 0.8rem; color: var(--text-muted, #6b6256); }
.cfg-cadencia li { margin: 0.22rem 0; }
/* tablas de config: reparten el ancho de la tarjeta y parten texto largo,
   en vez de desbordarse */
.config-grid table.lista { table-layout: fixed; width: 100%; }
.config-grid table.lista th,
.config-grid table.lista td {
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
  padding: 0.5rem 0.55rem;
}
.config-grid table.lista code.inline {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere;
}
.config-grid table.lista td.motor { text-align: center; }
code.inline {
  background: var(--soft-bg); border-radius: 6px; padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
}
.ok-si { color: #2F6B33; font-weight: 600; }
.ok-no { color: #9C3D2E; font-weight: 600; }

/* rol comercial: solo escribe en presupuestos — se le esconden los mandos de
   escritura del resto de vistas (el servidor los bloquea igualmente con 403) */
body.rol-comercial #b2-proponer, body.rol-comercial #b2-aceptar-exactas,
body.rol-comercial .b2-prop-acc, body.rol-comercial .b2-repartir,
body.rol-comercial #b2-pop,
body.rol-comercial #c2-exportar, body.rol-comercial .c2-desconciliar,
body.rol-comercial button[onclick^="deshacerLote"],
body.rol-comercial button[onclick^="asentarLote"],
body.rol-comercial button[onclick^="desconciliarDevolucion"],
body.rol-comercial #backup-crear,
body.rol-comercial #arranque-preview, body.rol-comercial #arranque-aplicar {
  display: none !important;
}
body.rol-comercial .sel-marca { pointer-events: none; }
body.rol-comercial select#f-propietario { pointer-events: auto; }  /* presupuestos sí */

/* nivel estandar (SSO de Heroturfs One): trabajo diario sí, operaciones
   sensibles no — asentar/deshacer lotes, desconciliar confirmados, backups,
   arranque (el servidor las bloquea igualmente con 403). El nivel limitado
   no necesita reglas: solo alcanza Clientes y Presupuestos (portero). */
body.rol-estandar .c2-desconciliar,
body.rol-estandar button[onclick^="deshacerLote"],
body.rol-estandar button[onclick^="asentarLote"],
body.rol-estandar button[onclick^="desconciliarDevolucion"],
body.rol-estandar #backup-crear,
body.rol-estandar #arranque-preview, body.rol-estandar #arranque-aplicar {
  display: none !important;
}

/* usuarios y roles (Configuración) */
.usu-acciones { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.usu-acciones input {
  font: inherit; font-size: 0.78rem; width: 8rem; padding: 0.25rem 0.45rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text);
}
.usuario-chip.usuario-fijo { cursor: default; }
.usuario-rol { opacity: 0.7; font-style: italic; }

/* usuario declarado (pie del sidebar): firma acciones y registro */
.usuario-chip {
  display: block; margin-top: 0.45rem; font-size: 0.75rem; color: #b9b0a2;
  cursor: pointer; user-select: none;
}
.usuario-chip:hover { color: #e8e2d8; }
.usuario-chip.sin-nombre #usuario-nombre { font-style: italic; opacity: 0.75; }
.usuario-input {
  font: inherit; font-size: 0.75rem; width: 9rem; padding: 0.1rem 0.3rem;
  border: 1px solid #5a5348; border-radius: 6px; background: #2e2a24; color: #e8e2d8;
}

/* lote asentado en BC (el diario ya está registrado en el ERP) */
.chip.lote-asentado { background: #DDEBDC; color: #2F6B33; }

/* parte de un cobro repartido entre varios documentos */
.chip.c2-reparto { background: #E7E3F4; color: #4B3F8C; }

/* modal de reparto: filas documento + importe */
.rep-fila { display: flex; gap: 0.45rem; margin-bottom: 0.45rem; align-items: center; }
.rep-fila .rep-doc {
  flex: 1; min-width: 0; font: inherit; font-size: 0.82rem; padding: 0.35rem 0.5rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text);
}
.rep-fila .rep-importe {
  width: 6.5rem; font: inherit; font-size: 0.82rem; padding: 0.35rem 0.5rem; text-align: right;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text);
}
.rep-fila .rep-quitar { padding: 0.15rem 0.45rem; }
.rep-suma { margin: 0.5rem 0 0.2rem; font-size: 0.85rem; min-height: 1.2rem; }
.btn.b2-repartir { font-size: 0.72rem; padding: 0.1rem 0.45rem; color: #6b6256; }
.btn.b2-repartir:hover { color: #4B3F8C; border-color: #b9aede; }

/* cierre mensual */
.cierre-conc .cierre-conc-linea { margin: 0.25rem 0; font-size: 0.9rem; }
.cierre-com { font-size: 0.9rem; }
tr.cierre-total td { border-top: 2px solid var(--border); }

/* antigüedad de un cobro sin conciliar (aging): 8-30 días ámbar, +30 rojo */
.b2-edad {
  display: inline-block; margin-left: 0.4rem; padding: 0.02rem 0.45rem;
  border-radius: 999px; font-size: 0.68rem; font-weight: 600; white-space: nowrap;
}
.b2-edad.edad-8  { background: #F4E3C8; color: #9A6B1F; }
.b2-edad.edad-30 { background: #F2DDDA; color: #9C3D2E; }

/* presupuesto sincronizado desde Hero One (solo la nota se edita aquí) */
.chip.chip-one { background: #DCE6F2; color: #37414E; font-weight: 700; }

/* método de pago de la línea (Shopify Payments); Klarna resaltado en su rosa */
.chip.chip-klarna { background: #FFE8EF; color: #8A2C4B; font-weight: 700; }

/* ---------- Clientes (ficha de cobros por cliente) ---------- */
.cli-buscador { position: relative; max-width: 46rem; }
.cli-lupa {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  display: flex; color: #9a8c7a; pointer-events: none;
}
.cli-buscador input {
  width: 100%; font: inherit; font-size: 1.05rem;
  padding: 0.85rem 1.3rem 0.85rem 3rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(80, 60, 20, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cli-buscador input::placeholder { color: #b3a896; }
.cli-buscador input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.16), 0 2px 8px rgba(80, 60, 20, 0.06);
}
.cli-buscador input:focus + .cli-lupa, .cli-buscador:focus-within .cli-lupa { color: var(--accent); }
.cli-hint { font-size: 0.75rem; color: #9a8c7a; margin: 0.45rem 0 0 1.3rem; }
#cli-resultados { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.8rem; max-width: 46rem; }
.cli-candidato {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.6rem 0.9rem; transition: border-color 0.15s, background 0.15s;
}
.cli-candidato:hover { border-color: #C9A24B; }
/* pedido pagado en Shopify aún sin payout (cotejado en vivo): tarjeta informativa */
.cli-shopify-card {
  display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid #C9A24B; border-radius: 10px; padding: 0.6rem 0.9rem;
  font-size: 0.9rem; color: #2a2a2a;
}
.cli-cand-nombre { font-weight: 600; color: #2a2a2a; }
.cli-cand-sub { font-size: 0.75rem; color: #9a8c7a; }
.cli-nombre { margin: 1.4rem 0 0.8rem; font-size: 1.3rem; color: #2a2a2a; }
.kpi.kpi-ok .valor { color: #2F6B33; }
.kpi.kpi-camino .valor { color: #9A6B1F; }
.kpi.kpi-mal .valor { color: #9C3D2E; }
/* estados de cobro (lenguaje comercial) */
.chip.est-cobrado   { background: #DDEBDC; color: #2F6B33; }
.chip.est-anticipo  { background: #DDEBDC; color: #2F6B33; box-shadow: inset 0 0 0 1px #9DBE9F; }
.chip.est-pasarela  { background: #F4E3C8; color: #9A6B1F; }
.chip.est-banco     { background: #FCF3D9; color: #8a6d1f; box-shadow: inset 0 0 0 1px #E8D9A8; }
.chip.est-pendiente { background: #F2DDDA; color: #9C3D2E; }
.chip.est-devuelto  { background: #9C3D2E; color: #fff; }

.vacio { color: #9a8c7a; font-size: 0.9rem; padding: 1.5rem 0; text-align: center; }
.error-banner {
  background: #F2DDDA; color: #9C3D2E; border-radius: 10px;
  padding: 0.7rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; display: none;
}
.error-banner.visible { display: block; }

/* ============================================================
   Móvil / pantallas estrechas (≤700px): el sidebar fijo de 16rem
   ocuparía casi todo el ancho, así que pasa a barra superior con la
   navegación en horizontal y el contenido ocupa todo el ancho debajo.
   ============================================================ */
@media (max-width: 700px) {
  .layout { flex-direction: column; }
  .sidebar { width: auto; padding: 0.8rem 1rem; }
  .sidebar .brand { margin-bottom: 0.7rem; }
  .sidebar .brand-marcas { margin-top: 0.4rem; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 0.3rem 0.4rem; }
  .sidebar nav a { padding: 0.4rem 0.6rem; }
  .sidebar nav a .check { display: none; }   /* en móvil el cuadrito no aporta y resta sitio */
  .sidebar nav.nav-grupo, .sidebar nav.nav-sec { margin-top: 0.4rem; }
  .sidebar .nav-titulo { width: 100%; padding: 0.3rem 0.2rem 0.1rem; }
  .sidebar-foot { margin-top: 0.7rem; padding: 0.4rem 0.2rem; }
  main { padding: 1.2rem 1rem; }
  .b2-col-head { flex-wrap: wrap; }
  .b2-col-head input { flex-basis: 100%; }
}