/* clientes.css — estilos de la herramienta Clientes (42.7).
   Se apoya en lo de Catálogo (`.cat44`: campos, botones, tarjetas, tablas, avisos, fichas) y solo agrega lo propio de Clientes.
   Todos los selectores empiezan con `.cat44` (o con `.pcli-` para los botones de la tarjeta de Pedidos): no cambian nada del resto del panel. */

/* ── Lista ──────────────────────────────────────────────────────────────────────────────── */
.cat44 .cli-barra { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.cat44 .cli-buscar { flex: 1 1 260px; max-width: 460px; }
.cat44 .cli-barra__nuevo { margin-left: auto; }
.cat44 .tabla--clientes td, .cat44 .tabla--pedidos td { vertical-align: top; }
/* Un nombre largo y sin espacios se parte dentro de su tarjeta: no empuja la página hacia un lado (en el celular, 375 px). */
.cat44 .tabla--clientes td { overflow-wrap: anywhere; }
.cat44 .tabla--clientes .nombre-producto { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.cat44 .estado--vencido { background: var(--err-light); color: var(--err); margin-top: 3px; }
.cat44 .cli-vacio { margin: 0; padding: 24px 8px; text-align: center; color: var(--c-apoyo); font-weight: 600; }
.cat44 .cli-paginas { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 4px; }

/* ── Ficha ──────────────────────────────────────────────────────────────────────────────── */
.cat44 .cli-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cat44 .cli-cab .sec-titulo__h { min-width: 0; overflow-wrap: anywhere; }
.cat44 .cli-cab__acciones { margin-left: auto; }
.cat44 .cli-resumen { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.cat44 .cli-resumen dt { color: var(--c-apoyo); font-size: 12px; font-weight: 700; }
.cat44 .cli-resumen dd { margin: 0; font-size: 17px; font-weight: 800; }
.cat44 .cli-resumen__vencido { color: var(--err); }
.cat44 .cli-datos-tarjeta, .cat44 .cli-formulario, .cat44 .cli-pedido { max-width: 900px; }
.cat44 .cli-grupo { display: grid; gap: 10px; min-width: 0; padding: 0; margin: 0; border: 0; }
.cat44 .cli-grupo > legend, .cat44 .cli-grupo > .sec-titulo__h3 { margin: 0 0 4px; padding: 0; }
.cat44 section.cli-grupo + section.cli-grupo { padding-top: 14px; border-top: 1px solid var(--c-linea); }
.cat44 fieldset.cli-grupo + fieldset.cli-grupo { margin-top: 8px; }
.cat44 .cli-datos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; }
.cat44 .cli-datos .condicion dd { overflow-wrap: anywhere; }
.cat44 .cli-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.cat44 .cli-etiqueta { gap: 4px; padding-right: 2px; }
.cat44 .cli-etiqueta__quitar { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; background: none; border: 0; border-radius: 5px; color: var(--c-apoyo); cursor: pointer; }
.cat44 .cli-etiqueta__quitar:hover { background: var(--c-pozo-2); color: var(--c-tinta); }
.cat44 .cli-etiqueta__quitar .ico { width: 12px; height: 12px; }

/* ── Formulario y pedido ────────────────────────────────────────────────────────────────── */
.cat44 .formulario__tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cat44 .formulario__cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
/* Arriba, no estiradas: la casilla vecina de una con error no crece ni baja (la regla de Catálogo para `.formulario__dos` se deja como está). */
.cat44 .cli-formulario .formulario__dos, .cat44 .cli-pedido .formulario__dos { align-items: start; }
.cat44 textarea.entrada { min-height: 72px; resize: vertical; font: inherit; }
.cat44 .tabla--lineas .entrada--corta { width: 92px; }
.cat44 .tabla--lineas td { vertical-align: top; }
.cat44 .cli-celda { display: grid; gap: 3px; justify-items: start; }
.cat44 .cli-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; font-size: 18px; }
.cat44 .cli-total b { font-size: 22px; font-weight: 800; }
.cat44 .cli-total--viejo b { opacity: 0.45; }
.cat44 .cli-enviado { display: grid; gap: 10px; }
/* Las columnas del pedido tienen ancho fijo: no se corren al aparecer un error o un subtotal. En el celular la tabla se apila (catalogo.css). */
@media (min-width: 641px) {
  .cat44 .tabla--lineas { table-layout: fixed; min-width: 680px; }
  .cat44 .tabla--lineas th:nth-child(2) { width: 124px; }
  .cat44 .tabla--lineas th:nth-child(3) { width: 124px; }
  .cat44 .tabla--lineas th:nth-child(4) { width: 160px; }
  .cat44 .tabla--lineas th:nth-child(5) { width: 160px; }
}

/* ── Historial ──────────────────────────────────────────────────────────────────────────── */
.cat44 .cli-historial, .cat44 .cli-precios { display: grid; gap: 14px; min-width: 0; }
.cat44 .cli-fila-abierta td { border-bottom: 0; }
.cat44 .cli-detalle td { padding: 0 12px 14px; }
.cat44 .cli-detalle__cuerpo { display: grid; gap: 12px; padding: 12px 14px; background: var(--c-pozo); border-radius: var(--c-r); }
.cat44 .tabla--chica { font-size: 12.5px; }
.cat44 .tabla--chica tfoot th, .cat44 .tabla--chica tfoot td { border-bottom: 0; }

/* ── Tarjetas de Pedidos (fuera de .cat44) ───────────────────────────────────────────────── */
#pedidos-clientes-card td, #pedidos-total-clientes-card td { vertical-align: top; }
.pcli-acciones { white-space: nowrap; text-align: right; }
.pcli-acciones .btn + .btn { margin-left: 6px; }
#pedidos-clientes-card td:nth-child(4) { white-space: normal; min-width: 180px; }
/* En tableta y celular cada pedido es una tarjeta, con Ver e Imprimir debajo (como la lista de Clientes): sin desplazarse hacia un lado. */
@media (max-width: 900px) {
  #pedidos-clientes-card table, #pedidos-clientes-card tbody { display: block; width: 100%; }
  #pedidos-clientes-card thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #pedidos-clientes-card tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  #pedidos-clientes-card tr:last-child { border-bottom: 0; }
  #pedidos-clientes-card tbody tr:hover td { background: transparent; }
  #pedidos-clientes-card td { display: grid; gap: 2px; align-content: start; justify-items: start; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  #pedidos-clientes-card td::before { content: attr(data-etiqueta); color: var(--muted); font-size: 12px; font-weight: 600; }
  #pedidos-clientes-card td:nth-child(4) { grid-column: 1 / -1; min-width: 0; }
  #pedidos-clientes-card .pcli-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  #pedidos-clientes-card .pcli-acciones::before { content: none; }
  #pedidos-clientes-card .pcli-acciones .btn + .btn { margin-left: 0; }
}

/* ── Celular: la barra fija de abajo ────────────────────────────────────────────────────── */
/* Hasta 880 px el panel tiene una barra fija abajo (app.css, --barra-total). Una confirmación a la que el panel lleva la vista (enfocar → scrollIntoView)
   quedaba detrás de ella, con Confirmar cortado y Cancelar tapado (N-CLI-01): este margen reserva debajo el alto de la barra más un respiro. */
@media (max-width: 880px) {
  .cat44 .cli-ficha .confirmacion { scroll-margin-bottom: calc(var(--barra-total, 62px) + 16px); }
}

/* ── Teléfono ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cat44 .formulario__tres, .cat44 .formulario__cuatro { grid-template-columns: minmax(0, 1fr); }
  .cat44 .cli-barra__nuevo { margin-left: 0; width: 100%; }
  .cat44 .cli-buscar { flex-basis: 100%; max-width: none; }
  .cat44 .cli-cab__acciones { margin-left: 0; width: 100%; }
  .cat44 .cli-datos { grid-template-columns: minmax(0, 1fr); }
  .cat44 .tabla--lineas .entrada--corta { width: 100%; }
  .cat44 .tabla--lineas .cli-celda { justify-items: stretch; width: 100%; }
  .cat44 .cli-total { justify-content: space-between; }
  .cat44 .cli-detalle td { padding: 0 8px 12px; }
}