/* ===========================================================
   ASISTIDA · Operación comercial con el estilo de Gestión
   El estilo base (tokens, botones, tablas, estados, modales) llega
   de asistida-arena.css / asistida-movil.css bajo .as-core-clientes,
   que app.js también activa en las vistas comerciales.
   Aquí van SOLO los ajustes de pantallas comerciales; todas las reglas
   van bajo body[data-core="comercial"] para no tocar Gestión.
   =========================================================== */

/* Opciones en tarjeta (título + descripción): Control de caja y "¿Cómo se vende?".
   Arena convierte .as-choice en pastillas en fila; aquí siguen siendo tarjetas. */
body[data-core="comercial"] .cash-mode-picker .as-choice,
body[data-core="comercial"] .credit-mode-picker .as-choice,
body[data-core="comercial"] .product-sale-mode .as-choice { display: grid; align-content: start; overflow: visible; white-space: normal; }
/* Arena quita el margen de .as-choice-group; aquí se devuelve el de cada grupo comercial. */
body[data-core="comercial"] .cash-mode-picker.as-choice-group { margin: 16px 0; }
body[data-core="comercial"] .credit-mode-picker.as-choice-group { margin: 18px 0; }
body[data-core="comercial"] .cash-movement-type-picker.as-choice-group { margin: 4px 0 16px; }
/* Movimiento de caja y soporte del retiro: opciones de una línea, texto centrado. */
body[data-core="comercial"] :is(.cash-movement-type-picker, .cash-proof-mode) .as-choice { align-items: center; justify-content: center; text-align: center; }

/* Cifras y títulos: la letra de Gestión (Space Grotesk) en lugar de Georgia. */
body[data-core="comercial"] :is(.inventory-family-card h2, .kpi-value, .inventory-sale-total strong,
  .pos-cash-input b, .pos-cash-input input, .pos-change-display > strong, .pos-cart-empty strong,
  .pos-total-block strong, .pos-total-display strong, .commercial-profile-identity strong,
  .total-payment-cta p strong, .history-summary-grid strong, .history-date-group-label strong) {
  font-family: var(--as-font-display); letter-spacing: -.01em;
}

/* Periodo rápido (Historial / Movimientos) con las pestañas de Gestión (.as-segmented). */
body[data-core="comercial"] .history-quick-filters.as-segmented { margin: 0 0 12px; }
body[data-core="comercial"] .history-quick-filters.as-segmented button { min-height: 0; }

/* "Agregar nuevo cliente" (Registrar crédito / fiado): botón suave naranja de Gestión en vez del verde limón. */
body[data-core="comercial"] .commercial-client-new-button { border-color: var(--as-brand-200); background: var(--as-brand-50); color: var(--as-brand-700); box-shadow: none; }
body[data-core="comercial"] .commercial-client-new-button span { background: var(--as-brand-100); color: var(--as-brand-700); }
body[data-core="comercial"] .commercial-client-new-button:hover { border-color: var(--as-brand-300, #fdba74); background: var(--as-brand-100); }
body[data-core="comercial"] .commercial-client-new-button.active { border-color: var(--as-danger-200, #fecaca); background: var(--as-danger-50); color: var(--as-danger-600); }
body[data-core="comercial"] .commercial-client-new-button.active span { background: var(--as-danger-100, #fee2e2); color: var(--as-danger-600); }

/* Formularios en ventana: dos grupos de campos seguidos llevan el mismo espacio que hay entre campos. */
body[data-core="comercial"] .modal form > .form-grid + :is(.form-grid, div:not(.form-actions):not([hidden])) { margin-top: 13px; }

/* Resumen comercial (.dashboard-v2 de Gestión): la segunda fila (ventas y
   movimientos recientes) va en dos columnas iguales. */
body[data-core="comercial"] .inv-dashboard .inv-db-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { body[data-core="comercial"] .inv-dashboard .inv-db-pair { grid-template-columns: minmax(0, 1fr); } }
/* Las piezas de cada fila empiezan a la misma altura y la gráfica ocupa el alto de su fila. */
body[data-core="comercial"] .inv-dashboard .db-lower-grid > * { margin: 0; }
body[data-core="comercial"] .inv-dashboard .db-lower-grid > div > .pcaps { height: 100%; }
/* Estado de la venta dentro de la lista: del tamaño de la etiqueta de método de Gestión. */
body[data-core="comercial"] .inv-dashboard .db-movement small .status { padding: 2px 8px; font-size: 11px; }
/* Sin selector Día | Mes, el botón de historial se queda junto al total también en celular. */
@media (max-width: 480px) {
  body[data-core="comercial"] .inv-dashboard .pcaps__head { flex-direction: row; align-items: flex-start; }
}
/* Celular: el título del panel puede bajar a una segunda línea; así nunca
   queda debajo del botón ("Movimientos recientes" + "Ver movimientos"). */
@media (max-width: 680px) {
  body[data-core="comercial"] .inv-dashboard .db-panel-head { align-items: flex-start; }
  body[data-core="comercial"] .inv-dashboard .db-panel-head h2 { white-space: normal; overflow-wrap: anywhere; }
  body[data-core="comercial"] .inv-dashboard .db-panel-head .as-btn { flex-shrink: 0; }
}

/* ===========================================================
   Listas comerciales en celular: la misma tarjeta de Estudiantes
   (.client-rows en asistida-movil.css), con las celdas marcadas así:
     .cm-title  nombre (línea 1, izquierda)   .cm-amount  cifra (línea 1, derecha)
     .cm-status estado (bajo el nombre)       .cm-info    franja de datos
     .actions-cell botones al final, por partes iguales
   tbody.cm-rows activa la tarjeta; .cm-2col pone la franja en dos columnas.
   =========================================================== */
@media (max-width: 680px) {
  body[data-core="comercial"] .cm-rows tr {
    --tint: #f3eee8; --tline: var(--as-border-default, #eae2d8);
    display: flex !important; flex-wrap: wrap; align-items: flex-start; column-gap: 8px; row-gap: 0;
    margin: 0 0 10px; padding: 12px;
    border: 0 !important; border-radius: 22px;
    background: linear-gradient(135deg, var(--tint) 0%, var(--as-surface, #fff) 58%) !important;
    box-shadow: 0 0 0 1px var(--tline), 0 14px 28px -22px rgba(28, 22, 18, .45);
    -webkit-tap-highlight-color: transparent;
  }
  body[data-core="comercial"] .cm-rows tr:has(.cm-status .status.expired) { --tint: #fdecea; --tline: #f3d6d1; }
  body[data-core="comercial"] .cm-rows tr:has(.cm-status .status.pending) { --tint: #fdf3e2; --tline: #f1e2c6; }
  body[data-core="comercial"] .cm-rows tr:has(.cm-status .status.active) { --tint: #eaf5ef; --tline: #d5e9dd; }
  body[data-core="comercial"] .cm-rows tr:last-child { margin-bottom: 0; }
  /* Filas ocultas (p. ej. el detalle de productos de un crédito, que se abre con "Ver N productos") siguen ocultas. */
  body[data-core="comercial"] .cm-rows tr[hidden] { display: none !important; }
  /* Detalle de productos abierto: se ve como parte de la tarjeta de arriba. */
  body[data-core="comercial"] .cm-rows tr.credit-products-detail-row { margin-top: -18px; padding-top: 18px; border-radius: 0 0 22px 22px; box-shadow: 0 0 0 1px var(--tline); }
  body[data-core="comercial"] .cm-rows tr.credit-products-detail-row td { flex: 1 1 100%; }
  body[data-core="comercial"] .cm-rows tr td, body[data-core="comercial"] .cm-rows tr:hover td { background: transparent !important; }
  /* Saltos de línea: antes de la franja y antes de los botones. */
  body[data-core="comercial"] .cm-rows tr::before { content: ""; display: block !important; order: 4; flex-basis: 100%; height: 0; }
  body[data-core="comercial"] .cm-rows tr::after { content: ""; order: 8; flex-basis: 100%; height: 0; }
  body[data-core="comercial"] .cm-rows td {
    display: block !important; box-sizing: border-box; min-width: 0;
    padding: 0 !important; border: 0 !important; text-align: left !important;
  }
  body[data-core="comercial"] .cm-rows td[data-label]::before { display: none !important; }

  /* Línea 1: nombre ......... cifra */
  body[data-core="comercial"] .cm-rows .cm-title { order: 1; flex: 1 1 0; padding-top: 2px !important; }
  body[data-core="comercial"] .cm-rows .cm-title strong {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font: 600 16px/20px var(--as-font-sans, inherit); color: var(--as-text-primary, #1c1612); overflow-wrap: anywhere;
  }
  body[data-core="comercial"] .cm-rows .cm-title small { display: block; margin-top: 2px; font: 500 12.5px/16px var(--as-font-sans, inherit); color: var(--as-text-muted, #6f655b); }
  body[data-core="comercial"] .cm-rows .cm-amount {
    order: 2; flex: none; max-width: 55%; text-align: right !important;
    font: 700 20px/24px var(--as-font-display, inherit); letter-spacing: -.02em; white-space: nowrap; color: var(--as-text-primary, #1c1612);
  }
  body[data-core="comercial"] .cm-rows .cm-amount strong { display: block; font: inherit; letter-spacing: inherit; white-space: nowrap; }
  body[data-core="comercial"] .cm-rows .cm-amount strong:not(.mora):not(.credit-amount) { color: var(--as-text-primary, #1c1612); }
  body[data-core="comercial"] .cm-rows .cm-amount small { display: block; font-size: 11.5px; color: var(--as-text-muted, #6f655b); }
  /* Estado bajo el nombre: texto de color, sin pastilla (como en Estudiantes). */
  body[data-core="comercial"] .cm-rows .cm-status { order: 3; flex: 0 0 100%; margin-top: 4px; }
  body[data-core="comercial"] .cm-rows .cm-status .status {
    height: auto; padding: 0; background: none !important; box-shadow: none !important;
    font: 600 12.5px/18px var(--as-font-sans, inherit); white-space: nowrap;
  }
  body[data-core="comercial"] .cm-rows .cm-status .status::before { display: none; }

  /* Franja de datos: casillas con su etiqueta arriba (como Plan | Vence | Mora). */
  body[data-core="comercial"] .cm-rows td.cm-info {
    order: 5; flex: 1 1 calc(33.333% - 6px); margin-top: 8px; padding: 6px 10px !important;
    background: rgba(255, 255, 255, .72) !important; border: 1px solid rgba(28, 22, 18, .07) !important; border-radius: 12px;
    font: 600 13.5px/17px var(--as-font-sans, inherit); color: var(--as-text-primary, #1c1612);
    overflow-wrap: anywhere;
  }
  body[data-core="comercial"] .cm-rows.cm-2col td.cm-info { flex-basis: calc(50% - 4px); }
  body[data-core="comercial"] .cm-rows td.cm-info.cm-wide { flex-basis: 100%; }
  body[data-core="comercial"] .cm-rows td.cm-info[data-label]::before {
    content: attr(data-label) !important; display: block !important; margin: 0 0 1px !important;
    font: 500 10px/13px var(--as-font-sans, inherit) !important; letter-spacing: .08em !important; text-transform: uppercase !important;
    color: var(--as-text-muted, #6f655b) !important;
  }
  body[data-core="comercial"] .cm-rows td.cm-info strong { font-weight: 600; }
  body[data-core="comercial"] .cm-rows td.cm-info small { display: block; font: 500 11.5px/15px var(--as-font-sans, inherit); color: var(--as-text-muted, #6f655b); }

  /* Botones: una fila, partes iguales (como Abonar | Ver ficha). */
  body[data-core="comercial"] .cm-rows td.actions-cell { order: 9; flex: 1 1 100%; width: auto; margin-top: 10px; }
  body[data-core="comercial"] .cm-rows td.actions-cell:empty { display: none !important; }
  body[data-core="comercial"] .cm-rows .row-actions { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; }
  body[data-core="comercial"] .cm-rows .row-actions > * { flex: 1 1 0; min-width: 0; }
  body[data-core="comercial"] .cm-rows td.actions-cell > .as-btn { width: 100%; }
  body[data-core="comercial"] .cm-rows td.actions-cell .as-btn {
    height: 38px; min-height: 38px; border-radius: 13px; font: 600 14px var(--as-font-sans, inherit); justify-content: center;
  }
  body[data-core="comercial"] .cm-rows .row-actions .as-btn--soft {
    background: linear-gradient(180deg, #fb8a3c, var(--as-brand-600, #ea580c)) !important; color: #fff !important; border: 0 !important;
    box-shadow: 0 8px 18px -10px rgba(234, 88, 12, .9), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  }
  body[data-core="comercial"] .cm-rows td.actions-cell .as-btn--secondary { background: var(--as-surface, #fff) !important; }
  body[data-core="comercial"] .cm-rows .row-actions .debts-whatsapp { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 13px; }
  /* Tarjetas directamente sobre el fondo (sin tarjeta dentro de tarjeta), como Estudiantes. */
  body[data-core="comercial"] .panel:has(> .table-wrap .cm-rows, > .history-date-group .cm-rows, > div .cm-rows) {
    padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  }
}

/* Ficha del cliente comercial con las piezas de la ficha de Gestión. */
body[data-core="comercial"] .inv-client-callout { margin-bottom: 14px; align-items: baseline; flex-wrap: wrap; }
body[data-core="comercial"] .inv-client-header .detail-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 680px) {
  /* Los botones de la ficha se acomodan en filas sin salirse: el principal ocupa todo el ancho. */
  body[data-core="comercial"] .inv-client-header .detail-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  body[data-core="comercial"] .inv-client-header .detail-actions > .as-btn { width: 100% !important; min-width: 0 !important; flex: none !important; white-space: normal; text-align: center; }
  body[data-core="comercial"] .inv-client-header .detail-actions > .as-btn--primary { grid-column: 1 / -1; order: -1; }
}
/* "Ver N productos" de un crédito: botón blanco con borde, como los secundarios de Gestión. */
body[data-core="comercial"] .credit-products-toggle { border-color: var(--as-border-strong); border-radius: var(--as-radius-control, 10px); background: var(--as-surface); color: var(--as-text-primary); font-weight: 600; }
body[data-core="comercial"] .credit-products-toggle:hover { background: var(--as-surface-hover); border-color: var(--as-border-strong); }

/* Detalle de venta: cada línea con su costo y ganancia debajo (una regla vieja,
   .inventory-receipt-lines > div {display:flex}, los dejaba apretados en una
   tercera columna) y los colores arena de Gestión en lugar de los verdosos. */
body[data-core="comercial"] .inventory-receipt-lines > .sale-detail-line { display: grid; }
body[data-core="comercial"] .sale-detail-line { border-bottom-color: var(--as-border-subtle); }
body[data-core="comercial"] .sale-detail-line small { font-size: 12px; }
body[data-core="comercial"] .sale-detail-line > small { color: var(--as-text-muted); }
body[data-core="comercial"] .sale-detail-totals { background: var(--as-surface-secondary); }
body[data-core="comercial"] .sale-detail-totals > div { color: var(--as-text-secondary); }
body[data-core="comercial"] .sale-detail-totals .grand { border-color: var(--as-border-default); color: var(--as-text-primary); }
body[data-core="comercial"] .modal .receipt-row { background: var(--as-surface-secondary); border-color: var(--as-border-subtle); }
/* Resumen del día / Detalle del turno: casillas arena; "Efectivo esperado" resaltado en naranja suave (no verde limón). */
body[data-core="comercial"] .daily-close-grid article { border-color: var(--as-border-subtle); background: var(--as-surface-secondary); }
body[data-core="comercial"] .daily-close-grid span { font-size: 11.5px; }
body[data-core="comercial"] .daily-close-highlight { background: var(--as-brand-50) !important; border-color: var(--as-brand-200) !important; }
body[data-core="comercial"] .daily-close-highlight span { color: var(--as-brand-700); }

/* Detalle de movimiento y códigos: letras de Gestión (Geist / Geist Mono) en lugar de Arial / Consolas. */
body[data-core="comercial"] .movement-summary { background: var(--as-surface-secondary); border-color: var(--as-border-subtle); }
body[data-core="comercial"] .movement-summary-product { font-family: var(--as-font-sans); }
body[data-core="comercial"] .movement-summary-qty { font-family: var(--as-font-display); letter-spacing: -.01em; }
body[data-core="comercial"] :is(.code-value, .credit-product-qty, .inventory-table small, .movement-tech-row code) { font-family: var(--as-font-mono); }