:root {
  /* Paleta cálida/gourmet: crema, terracota y salvia — hace juego con un
     negocio de cajas de regalo, panes dulces, turrones y vinos, sin resultar
     recargada para el uso diario. */
  --bg: #ede0c9;
  --card: #fffaf0;
  --border: #cbaf83;
  --text: #2b2015;
  --muted: #6b5a44;
  --accent: #b8452a;
  --accent-dark: #8f3620;
  --accent-bg: #f0c7b0;
  --danger: #a3311c;
  --danger-bg: #f2d2c4;
  --success: #3f6b34;
  --success-bg: #d9ead0;
  --warn: #8f6210;
  --warn-bg: #f2e0ac;
  --info: #2c5561;
  --info-bg: #cfe2e7;
  --radius: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); }
input, select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
button {
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 6px 11px;
}
button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
button.primary:hover { background: var(--accent-dark); }
button.danger { color: var(--danger); border-color: #eabfae; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Botón chico, solo ícono (ej: "Movimiento"/"Editar" en filas de una tabla
   densa) - para que no se coma tanto ancho cuando hay muchas filas. */
button.icon-btn {
  padding: 3px 7px;
  font-size: 13px;
  line-height: 1.4;
}
button.icon-btn.danger { color: var(--danger); border-color: #eabfae; }

/* Menú "⋮" compacto por fila (ej: tabla de Stock) - un solo botón de
   opciones en vez de varios iconos sueltos, para que la fila quede angosta
   aun con varias acciones posibles. Un solo listener global (ver app.js)
   cierra cualquier menú abierto al clickear en cualquier otro lado. */
.row-menu { position: relative; display: inline-block; }
.row-menu-list {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 190px;
  z-index: 30;
  padding: 4px;
}
.row-menu-list.open { display: block; }
.row-menu-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: none;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.row-menu-list button:hover { background: var(--bg); }
.row-menu-list button.danger { color: var(--danger); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card h2, .card h3 { margin-top: 0; }

/* Tablas densas: mucho texto en poco espacio (listas de productos/variantes
   largas), así que priorizan filas finitas por sobre "aire" entre filas. */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg); }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.pill.neg { background: var(--danger-bg); color: var(--danger); }
.pill.low { background: var(--warn-bg); color: var(--warn); }
.pill.ok { background: var(--success-bg); color: var(--success); }
.pill.info { background: var(--info-bg); color: var(--info); }

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  display: none;
  max-width: 360px;
  z-index: 50;
}
.toast.show { display: block; }
.toast.ok { background: var(--success-bg); color: var(--success); border: 1px solid #c9dcbb; }
.toast.err { background: var(--danger-bg); color: var(--danger); border: 1px solid #eabfae; }

/* --- Login --- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 340px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card .subtitle { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.login-error {
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}
.login-error.show { display: block; }

/* --- App shell --- */
.topbar {
  background: var(--card);
  border-bottom: 2px solid var(--accent);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .brand { font-weight: 700; font-size: 16px; color: var(--accent-dark); }
.topbar .user-info { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.role-badge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-bg);
  color: var(--accent-dark);
  text-transform: uppercase;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 10px 24px 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  border: none;
  background: none;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.tab-btn.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }

/* Segunda fila de navegación (las secciones dentro de un módulo, ej. Stock/
   Combos/Movimientos dentro de "Depósito") - más chica y con fondo propio
   para que se lea como un nivel subordinado a la fila de módulos de arriba. */
.tabs.sub-tabs {
  padding: 6px 24px;
  background: var(--bg);
  gap: 2px;
}
.tabs.sub-tabs .tab-btn {
  padding: 6px 12px;
  font-size: 13px;
}

.content { max-width: 1000px; margin: 0 auto; padding: 24px; }
/* El calendario de Entregas necesita más ancho que el resto de las pantallas
   para que las celdas de cada día se vean cómodas - se ensancha el
   contenedor solo cuando el calendario está montado adentro. */
.content:has(#calendarGrid) { max-width: 1320px; }
/* La ficha de un cliente (lista + detalle lado a lado) se veía apretada con
   el ancho general de 1000px - sobre todo la tabla de "Historial de
   compras", que tiene muchas columnas. Se ensancha igual que el calendario. */
.content:has(.crm-layout) { max-width: 1320px; }
/* El tablero por estado (5 columnas) necesita el mismo ancho extra. */
.content:has(.crm-board) { max-width: 1320px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > .field { flex: 1 1 160px; }

.muted { color: var(--muted); font-size: 13px; }
.right { text-align: right; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

.banner {
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 47, 38, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-box {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-box h3 { margin-top: 0; }
/* Modales con listas de componentes (Armar caja a medida, combos de
   catálogo) necesitan más ancho que un formulario simple: con el máximo
   angosto de 420px, el selector de "Componente" quedaba comprimido a una
   fracción mínima de la ventana ("ventanita mini"). */
.modal-box.wide { max-width: 760px; }
/* Facturación (Factura/Nota) tiene filas de ítems con 6 campos (código,
   descripción, cantidad, precio, bonificación, IVA) - con 760px quedaban
   apretados. Este modal necesita más aire todavía. */
.modal-box.xwide { max-width: 960px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.close-x { float: right; background: none; border: none; font-size: 18px; color: var(--muted); padding: 0 4px; }

/* Combos/Cajas: las tarjetas de "Cajas Personalizadas" y las del "Catálogo
   de cajas" usan el mismo estilo de .card, lo que las hacía difíciles de
   diferenciar a simple vista al bajar por la lista. Un borde de color +
   un tinte de fondo bien sutil alcanza para distinguirlas sin recargar. */
.card-personalizada { border-left: 4px solid var(--accent); background: linear-gradient(to right, var(--accent-bg) 0%, var(--card) 18px); }
.card-catalogo { border-left: 4px solid var(--success); background: linear-gradient(to right, var(--success-bg) 0%, var(--card) 18px); }

/* Cajas Personalizadas: colapsadas por defecto (ver renderCombosTab) - el
   renglón se abre al hacer clic en vez de mostrar siempre la tabla completa,
   para que la lista no crezca sin fin al sumar cajas. */
.caja-personalizada-row { padding-bottom: 4px; }
.caja-personalizada-head:hover { filter: brightness(0.97); }
.caja-chev { display: inline-block; font-size: 11px; transition: transform .15s; }
.caja-personalizada-row.open .caja-chev { transform: rotate(90deg); }

/* Forma de pago de una compra (Transferencia / Cheque emitido) y solapa
   Cheques - mismos "tabs" simples reutilizados en los dos lugares. */
.tab-pago-btn { padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; font-family: inherit; font-size: 13.5px; }
.tab-pago-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.cheques-kpi-row { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.cheques-kpi-card { flex: 1 1 220px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.cheques-kpi-card .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.cheques-kpi-card .value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.cheques-kpi-card.recibidos .value { color: var(--success); }
.cheques-kpi-card.emitidos .value { color: var(--danger); }
.cheques-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .cheques-cols { grid-template-columns: 1fr; } }

.empty-state { color: var(--muted); font-size: 14px; padding: 20px 0; text-align: center; }
.product-card { margin-bottom: 8px; }
.product-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.product-card-header h3 { margin: 0; font-size: 14.5px; }
.product-card-header .muted { font-size: 12px; }

/* --- CRM / Clientes --- */
.crm-layout { display: flex; gap: 16px; align-items: flex-start; }
.crm-list-col { flex: 0 0 320px; }
.crm-detail-col { flex: 1 1 auto; min-width: 0; }
.crm-list { padding: 0; max-height: 70vh; overflow-y: auto; }
.crm-list-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.crm-list-item:last-child { border-bottom: none; }
.crm-list-item:hover { background: var(--bg); }
.crm-list-item.active { background: var(--accent-bg); border-left: 3px solid var(--accent); padding-left: 9px; }
.crm-list-item .nombre { font-weight: 600; font-size: 14px; }
.crm-list-item .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.etapa-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.etapa-Interesado { background: var(--warn-bg); color: var(--warn); }
.etapa-En-negociación { background: var(--info-bg); color: var(--info); }
.etapa-Cliente { background: var(--success-bg); color: var(--success); }
.etapa-Perdido { background: var(--danger-bg); color: var(--danger); }

/* Estado de campaña de preventa de la temporada actual (aparte de la etapa) */
.temporada-Sin-contactar { background: var(--border); color: var(--muted); }
.temporada-Contactado { background: var(--info-bg); color: var(--info); }
.temporada-Cotización-enviada { background: var(--warn-bg); color: var(--warn); }
.temporada-Confirmado { background: var(--success-bg); color: var(--success); }
.temporada-No-este-año { background: var(--danger-bg); color: var(--danger); }
/* Marca manual de "cliente nuevo" de la temporada actual (ver cliente_nuevo_anio) */
.badge-nuevo { background: var(--accent-bg); color: var(--accent-dark); }
.interaction-item { border-bottom: 1px solid var(--border); padding: 10px 0; }
.interaction-item:last-child { border-bottom: none; }
.interaction-item .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Barra de búsqueda/filtros compartida entre la vista Tablero y la vista
   Lista de Clientes, con el selector de vista a la derecha. */
.crm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; }
.crm-toolbar input[type="text"] { flex: 1 1 220px; min-width: 160px; margin: 0; }
.crm-toolbar select { margin: 0; }
.crm-vista-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-left: auto; }
.crm-vista-toggle button {
  border: none;
  background: var(--card);
  color: var(--muted);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-right: 1px solid var(--border);
  font-family: inherit;
}
.crm-vista-toggle button:last-child { border-right: none; }
.crm-vista-toggle button.activo { background: var(--accent); color: #fff9f2; }

/* Tablero por estado de campaña: una columna por ESTADOS_TEMPORADA_CRM, con
   tarjetas de cliente. Pensado para responder "¿a quién le falta contactar?"
   de un vistazo, sin tener que entrar a cada ficha. */
.crm-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .crm-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .crm-board { grid-template-columns: 1fr; } }

.crm-board-col { background: rgba(255, 250, 240, 0.55); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 100px; }
.crm-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 3px solid var(--stripe, var(--border));
  border-radius: var(--radius) var(--radius) 0 0;
}
.crm-board-head .titulo { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--stripe-text, var(--muted)); }
.crm-board-head .count { background: var(--card); border: 1px solid var(--border); border-radius: 999px; min-width: 22px; text-align: center; padding: 1px 7px; font-size: 12px; font-weight: 700; color: var(--muted); }
.crm-board-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; max-height: 70vh; overflow-y: auto; }
.crm-board-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 14px 6px; border: 1px dashed var(--border); border-radius: var(--radius); }

.crm-board-col.col-sin { --stripe: var(--border); --stripe-text: var(--muted); }
.crm-board-col.col-contactado { --stripe: var(--info); --stripe-text: var(--info); }
.crm-board-col.col-cotizacion { --stripe: var(--warn); --stripe-text: var(--warn); }
.crm-board-col.col-confirmado { --stripe: var(--success); --stripe-text: var(--success); }
.crm-board-col.col-noeste { --stripe: var(--danger); --stripe-text: var(--danger); }

.crm-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.crm-card:hover { box-shadow: 0 3px 10px rgba(43, 32, 21, 0.12); transform: translateY(-1px); }
.crm-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.crm-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.crm-card-nombre { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.crm-card-tel { font-size: 12px; color: var(--muted); }
.crm-card-contacto { font-size: 12px; border-radius: 7px; padding: 5px 7px; font-weight: 600; }
.crm-card-contacto.vencido { background: var(--danger-bg); color: var(--danger); }
.crm-card-contacto.hoy { background: var(--warn-bg); color: var(--warn); }
.crm-card-contacto.futuro { background: rgba(203, 175, 131, 0.25); color: var(--muted); }
.crm-card-contacto.sinfecha { background: rgba(203, 175, 131, 0.18); color: var(--muted); font-weight: 500; font-style: italic; }
.crm-card-select { margin: 0; font-size: 12px; padding: 5px 6px; }

/* --- Ventas (dashboard + barras simples, sin libreria de graficos) --- */
.kpi-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kpi-card { flex: 1 1 180px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.kpi-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--accent-dark); }
.kpi-delta { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--danger); }

/* Barras de la solapa Objetivos (comparación interanual de cajas por mes) -
   mismo criterio "CSS puro, sin librería" que el resto del sistema. */
.barra-objetivos { transition: opacity 0.12s; cursor: default; }
.barra-objetivos:hover { opacity: 0.82; }

.panel-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; align-items: flex-start; }
.panel-grid > .card { flex: 1 1 300px; min-width: 260px; margin-bottom: 0; }

.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 13px; }
.bar-row .bar-label { flex: 0 0 42%; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1 1 auto; background: var(--bg); border-radius: 6px; height: 15px; overflow: hidden; }
.bar-fill { background: var(--accent); height: 100%; border-radius: 6px; }
.bar-row .bar-value { flex: 0 0 auto; text-align: right; font-weight: 600; white-space: nowrap; }

.sortable-th { cursor: pointer; user-select: none; }
.sortable-th:hover { color: var(--accent-dark); }
.sortable-th .sort-arrow { opacity: 0.5; margin-left: 2px; }
.sortable-th.sort-active .sort-arrow { opacity: 1; }

.filtro-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* --- Entregas (calendario mensual + lista del día) --- */
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendar-cell { min-height: 72px; border: 1px solid var(--border); border-radius: 7px; padding: 6px; cursor: pointer; background: var(--card); }
.calendar-cell:hover { border-color: var(--accent); }
.calendar-cell.empty { visibility: hidden; cursor: default; }
.calendar-cell.today { border-color: var(--accent-dark); border-width: 2px; }
.calendar-cell.selected { background: var(--accent-bg); border-color: var(--accent); }
/* Feriado / día no laborable - franjas diagonales para que se note aunque
   el día esté seleccionado o sea "hoy" (esos bordes se ven igual arriba). */
.calendar-cell.feriado { background: repeating-linear-gradient(45deg, var(--danger-bg), var(--danger-bg) 6px, var(--card) 6px, var(--card) 12px); }
.calendar-cell.feriado.selected { background: repeating-linear-gradient(45deg, var(--danger-bg), var(--danger-bg) 6px, var(--accent-bg) 6px, var(--accent-bg) 12px); }
.calendar-feriado-label { font-size: 10px; font-weight: 600; color: var(--danger); margin-bottom: 2px; }
.calendar-daynum { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.calendar-count { font-size: 10.5px; border-radius: 9px; padding: 1px 6px; display: inline-block; margin: 0 2px 2px 0; }
.calendar-count.pendientes { background: var(--warn-bg); color: var(--warn); }
.calendar-count.armadas { background: var(--info-bg); color: var(--info); }
.calendar-count.entregadas { background: var(--success-bg); color: var(--success); }

.aviso-sin-agendar { display: inline-flex; align-items: center; gap: 6px; background: var(--warn-bg); color: var(--warn); border-radius: 9px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }

.barra-objetivo { margin-top: 6px; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.barra-objetivo-relleno { height: 100%; background: var(--accent-dark); border-radius: 4px; }

/* --- Envíos (cotizador EPSA) --- */
.envio-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  max-height: 220px; overflow: auto; z-index: 5; box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.envio-suggest div { padding: 8px 10px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--border); }
.envio-suggest div:last-child { border-bottom: none; }
.envio-suggest div:hover { background: var(--accent-bg); }
.envio-suggest-zona { float: right; font-size: 11.5px; color: var(--accent-dark); }
.envio-suggest-zona.warn { color: var(--warn); }

.entrega-item { border-bottom: 1px solid var(--border); padding: 10px 0; cursor: pointer; }
.entrega-item:last-child { border-bottom: none; }
.entrega-item:hover { color: var(--accent-dark); }
.entrega-item.entrega-grupo { cursor: default; }
.entrega-item.entrega-grupo:hover { color: inherit; }
.entrega-grupo-items { list-style: none; margin: 6px 0 0; padding: 0; }
.entrega-grupo-items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--border);
  margin-bottom: 3px;
  font-size: 13px;
  cursor: pointer;
}
.entrega-grupo-items li:hover { color: var(--accent-dark); }
.entrega-nota-armado {
  margin-top: 4px;
  padding: 5px 8px;
  background: var(--warn-bg);
  color: #5c4108;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.35;
}
.filtro-presets button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- Opciones de pago (formulario de Presupuestos) ------------------------ */
.sub-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.opcion-pago-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--card);
}
.opcion-pago-head { display: flex; gap: 10px; align-items: center; }
.opcion-pago-head .opcion-pago-titulo { font-weight: 600; max-width: 260px; }
.opcion-pago-head .opcion-pago-remove { flex-shrink: 0; white-space: nowrap; }
.cuotas-list { margin-top: 4px; }
.cuota-row {
  display: grid;
  grid-template-columns: 90px 1fr 120px 32px;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}
.cuota-row .field { margin-bottom: 0; }
.cuota-monto-preview {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-dark);
  padding: 9px 0;
  text-align: right;
}
.opcion-pago-check {
  margin-top: 10px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
}
.opcion-pago-check.ok { background: var(--success-bg); color: var(--success); }
.opcion-pago-check.warn { background: var(--warn-bg); color: var(--warn); }
.opcion-pago-box .opcion-pago-add-cuota { margin-top: 10px; width: 100%; }

/* --- Imagen ilustrativa adjunta (formulario de Presupuestos) -------------- */
.imagen-anexo-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.imagen-anexo-preview img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}