/* ════════════════════════════════════════════════════════════════
   CLIENTES — tarjetas arriba del Registro y ficha del cliente
   ════════════════════════════════════════════════════════════════
   Los colores salen de las variables del programa (--vtx, --vbor,
   --vac…), no hay ninguno escrito a mano acá: la ficha tiene que
   seguir al tema igual que el resto.
   ════════════════════════════════════════════════════════════════ */

/* ── Las tarjetas que salen arriba de los comprobantes ─────────── */
/* El encabezado "CLIENTES" y las tarjetas eran dos bloques pegados:
   el título quedaba contra la primera tarjeta mientras "PENDIENTES",
   que vive dentro de la grilla, respiraba lo que esa grilla separa. */
#reg-clientes {
  display: flex; flex-direction: column; gap: var(--reg-sep);
  margin-bottom: 18px;
}

.cli-tarjetas { display: flex; flex-direction: column; gap: 8px; }

.cli-tarjeta {
  /* Envuelve: con las marcas puestas ("1 en el taller", "debe $24.500")
     no queda ancho para el nombre, y el nombre es lo último que puede
     cortarse en una lista que sirve justamente para reconocer a alguien.
     Si no caben en la misma línea, los números bajan. */
  display: flex; align-items: center; gap: 8px 12px; width: 100%; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--vcard, rgba(255,255,255,.04));
  border: 1px solid var(--vbor); color: var(--vtx);
  transition: border-color .15s, transform .15s;
}
.cli-tarjeta:hover { border-color: var(--vac); transform: translateX(2px); }

.cli-tarjeta-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
/* Mismo criterio que en la barra: el nombre entero, aunque ocupe dos
   líneas. Una lista de clientes existe para reconocer a alguien. */
.cli-tarjeta-nombre {
  font-size: 14px; font-weight: 600; color: var(--vtx);
  overflow-wrap: anywhere;
}
.cli-tarjeta-sub { font-size: 11.5px; color: var(--vtx3); }

/* RUT, teléfono y correo, con su ícono y separados por un punto que
   pone el CSS y no el javascript: así no hay que acordarse de sacarlo
   cuando falta uno. Lo usan la tarjeta del cliente y la pastilla de la
   ficha, que mostraban lo mismo con dos reglas iguales. */
.cli-contacto { white-space: nowrap; }
.cli-contacto + .cli-contacto::before { content: ' · '; }
.cli-contacto .ti { font-size: 12px; vertical-align: -1px; }

/* Lo que hay que saber de un vistazo: si tenemos algo suyo y si debe. */
.cli-marcas { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cli-marca {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.cli-marca .ti { font-size: 11px; vertical-align: -1px; }
.cli-marca-taller { background: rgba(206,147,216,.18); color: var(--va, #ce93d8); }
.cli-marca-debe   { background: rgba(248,113,113,.16); color: var(--vred, #f87171); }

/* Los números van pegados a la derecha y no se achican: son lo que el
   mostrador mira primero cuando el cliente ya está parado al frente. */
.cli-tarjeta-nums {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; flex-shrink: 0; text-align: right; margin-left: auto;
}
.cli-tarjeta-flecha { flex-shrink: 0; color: var(--vtx3); font-size: 16px; }

/* Tapado, no vaciado: con clientes a la vista los comprobantes se
   esconden, pero la lista queda armada para cuando vuelvan. */
.cli-tapado { display: none !important; }

/* ── La barra de arriba: quién es, qué se puede hacer y, al editar,
      los campos — todo en LA MISMA pastilla, que se abre hacia abajo.

   El formulario estuvo en una pastilla aparte y se leía como otra
   cosa, no como "estoy editando a esta persona". Creciendo dentro de
   la misma, la conexión se ve sola. ── */
#cli-barra, .cli-barra { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
#cli-barra.cli-barra-abierta, .cli-barra.cli-barra-abierta { gap: 14px; }
/* Envuelve para que el nombre nunca tenga que cortarse: si no cabe
   junto a los botones, los botones bajan. */
.cli-barra-fila { display: flex; align-items: center; gap: 8px 12px; min-width: 0; flex-wrap: wrap; }

/* La raya separa el nombre de lo que se está editando sin encerrarlo en
   otra caja: sigue siendo la misma pastilla. */
.cli-barra-form {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--vbor);
}

.cli-barra-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 200px; }
/* El nombre se muestra entero SIEMPRE. "REPUESTOS DEL SUR S..." no
   identifica a nadie, que es justo para lo que está ahí; si hace falta
   usa dos líneas. */
.cli-barra-nombre {
  font-size: 15px; font-weight: 700; color: var(--vtx);
  overflow-wrap: anywhere;
}
.cli-barra-sub { font-size: 11.5px; color: var(--vtx3); }

.cli-barra-acciones { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* ── La ficha ─────────────────────────────────────────────────── */
.cli-ficha {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 880px; margin: 0 auto; padding: 16px;
}
.cli-vacio { padding: 48px 16px; text-align: center; color: var(--vtx3); }

.cli-form-campos {
  display: grid; gap: 12px 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cli-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cli-campo > label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--vtx3);
}
.cli-input {
  width: 100%; height: 36px; padding: 0 12px; border-radius: 10px;
  background: var(--vcard, rgba(255,255,255,.03));
  border: 1px solid var(--vbor); color: var(--vtx);
  font: inherit; font-size: 13px;
}
.cli-input:focus { outline: none; border-color: var(--vac); }
.cli-form-aviso {
  margin: 0; font-size: 12px; color: var(--vtx3);
  display: flex; align-items: flex-start; gap: 6px;
}

/* Los cinco números, ahora en el sidebar. auto-fit: en una columna
   angosta caen de a uno, y si el sidebar se ensancha se acomodan de a
   dos sin que haya que decirle nada. */
.cli-resumen {
  display: grid; gap: 12px 10px; padding: 12px 14px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.cli-dato { display: flex; flex-direction: column; gap: 2px; }
.cli-dato-valor { font-size: 17px; font-weight: 700; color: var(--vtx); }
.cli-dato-rotulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--vtx3);
}
.cli-dato-debe .cli-dato-valor { color: var(--vrojo, #ff6b6b); }

/* Mismo aire que en Registro entre el título y su contenido: estas
   secciones —comprobantes, equipos, garantías— son las mismas tarjetas
   leídas en otra pantalla. */
.cli-seccion { display: flex; flex-direction: column; gap: var(--reg-sep); }
.cli-seccion-titulo {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--vtx3);
  display: flex; align-items: center; gap: 6px;
}
/* La pastilla del número la pone .reg-seccion-cuenta (boletas.css),
   la misma que usan los encabezados de la grilla de Registro. */

.cli-filas { display: flex; flex-direction: column; gap: 6px; }
.cli-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 9px 14px; border-radius: 12px; text-align: left;
  background: var(--vcard, rgba(255,255,255,.03));
  border: 1px solid var(--vbor); color: var(--vtx); cursor: pointer;
  transition: border-color .15s;
}
.cli-fila:hover { border-color: var(--vac); }
/* Equipos y garantías no llevan a ninguna parte todavía: no deben
   parecer un botón. */
.cli-fila-plana { cursor: default; }
.cli-fila-plana:hover { border-color: var(--vbor); }

.cli-fila-izq { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cli-fila-titulo {
  font-size: 13px; font-weight: 600; color: var(--vtx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cli-fila-sub { font-size: 11px; color: var(--vtx3); }

.cli-pill {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 9px; border-radius: 10px; flex-shrink: 0;
  background: var(--vbor); color: var(--vtx2);
}
.cli-pill-ok     { background: rgba(46, 204, 113, .18); color: #2ecc71; }
.cli-pill-no     { background: rgba(231, 76, 60, .18);  color: #e74c3c; }
.cli-pill-espera { background: rgba(241, 196, 15, .18); color: #f1c40f; }

.cli-notas {
  width: 100%; resize: vertical; min-height: 56px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--vcard, rgba(255,255,255,.03));
  border: 1px solid var(--vbor); color: var(--vtx);
  font: inherit; font-size: 13px;
}
.cli-notas:focus { outline: none; border-color: var(--vac); }
.cli-notas-pie { display: flex; justify-content: flex-end; }

@media (max-width: 560px) {
  .cli-ficha { padding: 10px; gap: 12px; }
}

/* ── Lo que vive en el sidebar ─────────────────────────────────── */
#vit-sidebar-cliente .cli-seccion-nota { padding: 12px 14px; gap: 8px; }
#vit-sidebar-cliente .cli-notas { min-height: 76px; font-size: 12.5px; }
#vit-sidebar-cliente .cli-dato-valor { font-size: 15px; }

/* En el centro quedan solo las listas, así que respiran más. */
/* El relleno de los costados ya lo pone el slot: acá solo arriba y
   abajo, o las tarjetas quedarían corridas respecto de la barra. */
#vitp-cliente .cli-ficha { max-width: 760px; padding: 0 0 16px; }

/* El cuerpo de la ficha apila la barra y las listas; .vitp-body por sí
   solo no fija dirección y hereda la fila de .vitp-page. */
.cli-cuerpo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* El relleno de los costados va acá, una sola vez, para que la barra de
   arriba y las tarjetas arranquen y terminen en la misma línea. */
.cli-cuerpo > #vitp-cliente-slot {
  flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px;
}

/* Ahora la barra vive DENTRO del área que scrollea, así que se queda
   arriba con sticky y con top 0 — no con el "top" del navbar, que es lo
   que usa cuando cuelga de la página entera y acá la corría hacia abajo
   tapando el primer título. */
#vitp-cliente-slot > .vit-filtros-bar-top { position: sticky; top: 0; z-index: 5; }

/* ── Las tarjetas de comprobante dentro de la ficha ───────────────
   Son las mismas de Registro. Lo único que sobra acá es el cliente:
   estamos parados dentro de su ficha, y repetir su nombre, su RUT y su
   teléfono en cada tarjeta es decir cinco veces lo que ya dice el
   título de la pantalla. */
#vitp-cliente .reg-card-cliente,
#vitp-cliente .reg-card-sub { display: none; }

/* Una columna: la ficha es angosta y el centro ya está acotado. */
.cli-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }