/* NEXO Ventas · componentes base. Todo valor sale de tokens.css (cargarlo antes que este archivo).
   Cómo y cuándo usar cada pieza: docs/diseno/sistema.md */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente);
  font-size: var(--texto-md); font-weight: var(--peso-normal); line-height: var(--interlineado); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-acento-tinta); outline-offset: 2px; }
.cifra { font-variant-numeric: tabular-nums; }
.icono { width: var(--icono); height: var(--icono); flex: none; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- estructura de pantalla ---------- */
.app { display: flex; flex-direction: column; height: 100dvh; }
.contenido { flex: 1; overflow-y: auto; padding: var(--espacio-1) var(--espacio-4) var(--espacio-6); overscroll-behavior: contain; }
.cabecera { display: flex; align-items: center; gap: var(--espacio-1); min-height: var(--alto-cabecera);
  padding: var(--espacio-3) var(--espacio-2) var(--espacio-2) var(--espacio-4); }
.cabecera:has(> .boton-icono:first-child) { padding-left: var(--espacio-1); }
.cabecera-texto { flex: 1; min-width: 0; }
.cabecera-titulo { margin: 0; font-size: var(--texto-xl); font-weight: var(--peso-fuerte); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera-sub { color: var(--color-texto-2); font-size: var(--texto-sm); }
.titulo-seccion { margin: var(--espacio-5) 0 var(--espacio-2); font-size: var(--texto-xs); font-weight: var(--peso-medio);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texto-2); }
.nota { margin: var(--espacio-2) 0 0; color: var(--color-texto-2); font-size: var(--texto-sm); }
.nota + .lista { margin-top: var(--espacio-3); }

/* ---------- navegación inferior (Hoy · Clientes · Cobros · Más) ---------- */
.nav { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--color-superficie);
  border-top: var(--grosor-borde) solid var(--color-borde); padding-bottom: env(safe-area-inset-bottom, 0); }
.nav-boton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--alto-nav);
  border: 0; background: transparent; color: var(--color-texto-3); font-size: var(--texto-xs); font-weight: var(--peso-normal); }
.nav-boton[aria-current="page"] { color: var(--color-acento-tinta); font-weight: var(--peso-medio); }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2); width: 100%;
  min-height: var(--alto-boton); padding: 0 var(--espacio-4); border-radius: var(--radio-md);
  border: var(--grosor-borde) solid transparent; font-weight: var(--peso-medio); white-space: nowrap; }
.boton-principal { background: var(--color-acento); color: var(--color-sobre-acento); }
.boton-secundario { background: var(--color-superficie); color: var(--color-texto); border-color: var(--color-borde); }
.boton-terciario { width: auto; min-height: var(--alto-tactil); padding: 0 var(--espacio-2); background: transparent; color: var(--color-acento-tinta); }
.boton:disabled { background: var(--color-superficie-2); color: var(--color-texto-3); border-color: transparent; cursor: default; }
.boton-icono { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none;
  border: 0; border-radius: var(--radio-md); background: transparent; color: var(--color-texto); }
.boton-icono:active { background: var(--color-superficie-2); }
.boton-icono:disabled { color: var(--color-texto-3); opacity: 0.45; cursor: default; }
.botones-fila { display: flex; gap: var(--espacio-2); margin-top: var(--espacio-3); }
.botones-fila .boton { padding: 0 var(--espacio-3); }
.pie-accion { padding: var(--espacio-3) var(--espacio-4) calc(var(--espacio-3) + env(safe-area-inset-bottom, 0));
  background: var(--color-superficie); border-top: var(--grosor-borde) solid var(--color-borde); }

/* ---------- bloques, datos y montos ---------- */
.bloque { padding: var(--espacio-4) var(--espacio-4) var(--espacio-3); background: var(--color-superficie);
  border: var(--grosor-borde) solid var(--color-borde); border-radius: var(--radio-lg); }
.bloque + .bloque { margin-top: var(--espacio-2); }
.dato { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-3); padding: 6px 0; }
.dato-nombre { color: var(--color-texto-2); }
.dato-valor { font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; text-align: right; }
.monto-grande { font-size: var(--texto-2xl); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; line-height: var(--interlineado-ajustado); }
.texto-debe { color: var(--color-debe); }
.texto-pagado { color: var(--color-pagado); }
.texto-pendiente { color: var(--color-pendiente); }

/* ---------- listas y filas ---------- */
.lista { overflow: hidden; background: var(--color-superficie); border: var(--grosor-borde) solid var(--color-borde); border-radius: var(--radio-lg); }
.fila { display: flex; align-items: center; gap: var(--espacio-3); width: 100%; min-height: var(--alto-fila);
  padding: 10px var(--espacio-2) 10px 14px; border: 0; background: transparent; text-align: left; }
.fila + .fila { border-top: var(--grosor-borde) solid var(--color-borde); }
button.fila:active { background: var(--color-superficie-2); }
.fila-texto { flex: 1; min-width: 0; }
.fila-nombre { font-weight: var(--peso-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-sub { font-size: var(--texto-sm); color: var(--color-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-sub.envuelve { white-space: normal; }
.fila-estados { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--espacio-2); margin-top: 6px; }
.fila-linea { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--espacio-2); }
.fila-valor { font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila .flecha { width: 20px; height: 20px; color: var(--color-texto-3); }

/* ---------- etiquetas de estado (rojo/verde/ámbar SOLO para estados, siempre con texto) ---------- */
.etiqueta { display: inline-flex; align-items: center; gap: var(--espacio-1); padding: var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio-sm); font-size: var(--texto-xs); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etiqueta .icono { width: 14px; height: 14px; }
.etiqueta-debe { color: var(--color-debe); background: var(--color-debe-suave); }
.etiqueta-pagado { color: var(--color-pagado); background: var(--color-pagado-suave); }
.etiqueta-pendiente { color: var(--color-pendiente); background: var(--color-pendiente-suave); }
.etiqueta-neutra { color: var(--color-texto-2); background: var(--color-superficie-2); }

/* ---------- pestañas (segmentos) ---------- */
.segmentos { display: flex; gap: var(--espacio-1); margin: var(--espacio-1) 0 var(--espacio-3); padding: var(--espacio-1);
  border-radius: var(--radio-lg); background: var(--color-superficie-2); }
.segmento { flex: 1; min-height: var(--alto-tactil); border: 0; border-radius: var(--radio-md); background: transparent;
  color: var(--color-texto-2); font-size: var(--texto-sm); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; }
.segmento[aria-pressed="true"] { background: var(--color-superficie); color: var(--color-texto); box-shadow: 0 0 0 var(--grosor-borde) var(--color-borde); }

/* ---------- campos ---------- */
.campo { display: block; margin-top: var(--espacio-3); }
.campo-nombre { display: block; margin-bottom: 6px; font-size: var(--texto-sm); color: var(--color-texto-2); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: var(--alto-boton); padding: 0 14px; border-radius: var(--radio-md);
  background: var(--color-superficie); border: var(--grosor-borde) solid var(--color-borde); }
.campo textarea { min-height: 96px; padding: var(--espacio-3) 14px; }
.campo :is(input, select, textarea):focus { outline: none; border-color: var(--color-acento-tinta); }
.campo-error { margin: 6px 0 0; color: var(--color-debe); font-size: var(--texto-sm); font-weight: var(--peso-medio); }
.campo:has(.campo-error) :is(input, select, textarea) { border-color: var(--color-debe); }
.buscador { position: relative; margin: var(--espacio-1) 0 var(--espacio-3); }
.buscador .icono { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--color-texto-3); }
.buscador input { width: 100%; min-height: var(--alto-boton); padding: 0 14px 0 44px; border-radius: var(--radio-md);
  background: var(--color-superficie); border: var(--grosor-borde) solid var(--color-borde); }
.buscador input:focus { outline: none; border-color: var(--color-acento-tinta); }

/* ---------- opciones rápidas (chips que se marcan) ---------- */
.opciones-chip { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-top: var(--espacio-2); }
.opcion-chip { min-height: var(--alto-tactil); padding: 0 var(--espacio-3); border-radius: var(--radio-total);
  border: var(--grosor-borde) solid var(--color-borde); background: var(--color-superficie); font-size: var(--texto-sm); }
/* Elegido: relleno de acento con su texto (el mismo par del botón principal), para distinguirlo con sol. Vale para los
   chips que se marcan (aria-pressed) y para los de una sola opción (role="radio", aria-checked). */
.opcion-chip[aria-pressed="true"], .opcion-chip[aria-checked="true"] { background: var(--color-acento); color: var(--color-sobre-acento);
  border-color: var(--color-acento); font-weight: var(--peso-fuerte); }
/* Apagado (ej. un día que el negocio no trabaja): solo atenuado (tachada, la "D" parecía una "Đ") y sin respuesta al toque. */
.opcion-chip[aria-disabled="true"] { color: var(--color-texto-3); opacity: 0.45; cursor: not-allowed; }

/* ---------- opción única (radio) e interruptor ---------- */
.opciones { display: flex; flex-direction: column; gap: var(--espacio-2); }
.opcion { background: var(--color-superficie); border: var(--grosor-borde) solid var(--color-borde); border-radius: var(--radio-lg); }
.opcion:has(> [aria-checked="true"]) { border-color: var(--color-acento-tinta); box-shadow: 0 0 0 1px var(--color-acento-tinta); }
.opcion-boton { display: flex; align-items: center; gap: var(--espacio-3); width: 100%; min-height: var(--alto-fila);
  padding: 10px 14px; border: 0; background: transparent; text-align: left; }
/* Dentro de un botón, el título y su texto son <span>: sin esto quedan en la misma línea y se montan (también en el
   interruptor, revisión del dueño del recibo). */
.opcion-boton .fila-texto, .interruptor .fila-texto { display: flex; flex-direction: column; align-items: flex-start; }
.interruptor .fila-nombre, .interruptor .fila-sub { max-width: 100%; }
.interruptor .fila-sub { white-space: normal; }   /* lo que explica un interruptor se lee entero */
.interruptor ~ .interruptor { margin-top: var(--espacio-3); }   /* dos interruptores seguidos no quedan pegados */
.opcion-extra { margin: 0 14px 14px; }
.radio { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--color-texto-3); }
[aria-checked="true"] > .radio { border: 7px solid var(--color-acento-tinta); }
.interruptor { display: flex; align-items: center; gap: var(--espacio-3); width: 100%; min-height: 48px; padding: 0;
  border: 0; background: transparent; text-align: left; }
.interruptor-pista { position: relative; width: 48px; height: 28px; flex: none; border-radius: 14px; background: var(--color-borde);
  transition: background var(--movimiento-corto); }
.interruptor-pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-superficie); transition: transform var(--movimiento-corto); }
[aria-checked="true"] > .interruptor-pista { background: var(--color-acento); }
[aria-checked="true"] > .interruptor-pista::after { transform: translateX(20px); }

/* ---------- banda "Hay una versión nueva · Actualizar" (arriba de todo; nunca recarga sola) ---------- */
.banda { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3);
  padding: var(--espacio-1) var(--espacio-2) var(--espacio-1) var(--espacio-4);
  background: var(--color-acento-suave); color: var(--color-acento-tinta); font-size: var(--texto-sm); font-weight: var(--peso-medio); }
.boton-banda { min-height: var(--alto-tactil); padding: 0 var(--espacio-3); border: 0; border-radius: var(--radio-sm);
  background: transparent; color: var(--color-acento-tinta); font: inherit; font-weight: var(--peso-fuerte); cursor: pointer; }
.boton-banda:active { background: var(--color-superficie); }

/* ---------- aviso de un cambio: no se guardó (rojo), en revisión del dueño (ámbar) o reemplazado (neutro) (app/js/no-guardados.js) ---------- */
.aviso-cambio { display: flex; gap: var(--espacio-3); align-items: flex-start; margin: var(--espacio-2) 0 var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-3) var(--espacio-1); border-radius: var(--radio-lg); background: var(--color-debe-suave); }
.aviso-cambio > .icono { margin-top: 2px; color: var(--color-debe); }
.aviso-cambio-en_revision { background: var(--color-pendiente-suave); }
.aviso-cambio-en_revision > .icono { color: var(--color-pendiente); }
/* Reemplazado: solo informa (otro cambio más nuevo quedó en su lugar); ni rojo ni ámbar. */
.aviso-cambio-reemplazado { background: var(--color-superficie-2); }
.aviso-cambio-reemplazado > .icono { color: var(--color-texto-2); }
.aviso-cambio-cuerpo { flex: 1; min-width: 0; }
.aviso-cambio-texto { margin: 0; font-weight: var(--peso-medio); }
.aviso-cambio .boton-terciario { margin-left: calc(-1 * var(--espacio-2)); }
.bloque > .aviso-cambio { margin-bottom: 0; }