/* =====================================================================
   componentes.css — piezas reutilizables.
   Todo color, medida, radio, sombra y tiempo sale de tokens.css.
   ===================================================================== */

/* ─── Base ──────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: var(--interlineado);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p {
  margin: 0;
}

/* Barras de desplazamiento y controles del navegador del color del tema */
:root {
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-acento-texto);
  text-underline-offset: var(--espacio-0);
}

:focus-visible {
  outline: var(--foco-ancho) solid var(--color-foco);
  outline-offset: var(--foco-separacion);
}

[hidden] {
  display: none !important;
}

.solo-lector {
  position: absolute;
  width: var(--borde-fino);
  height: var(--borde-fino);
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── Texto ─────────────────────────────────────────────────────────── */

.titulo-1,
.titulo-2,
.titulo-3 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
  line-height: var(--interlineado-apretado);
}

.titulo-1 { font-size: var(--texto-xl); }
.titulo-2 { font-size: var(--texto-lg); }
.titulo-3 { font-size: var(--texto-md); font-weight: var(--peso-fuerte); }

.texto-suave { color: var(--color-texto-suave); }
.texto-chico { font-size: var(--texto-sm); }

.sobretitulo {
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.letra-chica {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  line-height: var(--interlineado-medio);
}

/* Horas, precios y cifras: siempre en JetBrains Mono, alineadas en columna. */
.cifra {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0;
  white-space: nowrap;
}

/* ─── Íconos ────────────────────────────────────────────────────────── */

.icono {
  width: var(--icono-md);
  height: var(--icono-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icono-trazo);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono-sm { width: var(--icono-sm); height: var(--icono-sm); }
.icono-lg { width: var(--icono-lg); height: var(--icono-lg); }
.icono-xl { width: var(--icono-xl); height: var(--icono-xl); }

/* ─── Botones ───────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--alto-control);
  min-width: var(--toque-min);
  padding: 0 var(--espacio-5);
  border: var(--borde-fino) solid transparent;
  border-radius: var(--radio-control);
  background: transparent;
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-apretado);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duracion) var(--curva),
              border-color var(--duracion) var(--curva),
              color var(--duracion) var(--curva);
}

/* La acción principal: una por pantalla, en el color del negocio. */
.boton-principal {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.boton-principal:hover {
  background: color-mix(in srgb, var(--color-acento) 88%, var(--color-texto));
}

.boton-secundario {
  background: var(--color-tarjeta);
  border-color: var(--color-linea-control);
  color: var(--color-texto);
}
.boton-secundario:hover {
  background: var(--color-hundido);
}

.boton-texto {
  color: var(--color-texto-suave);
  padding: 0 var(--espacio-3);
}
.boton-texto:hover {
  background: var(--color-hundido);
  color: var(--color-texto);
}

/* Solo para borrar algo definitivo (lo demás se deshace). */
.boton-peligro {
  background: var(--color-tarjeta);
  border-color: var(--color-peligro);
  color: var(--color-peligro);
}
.boton-peligro:hover {
  background: var(--aviso-error-fondo);
}

.boton-grande {
  min-height: var(--alto-control-grande);
  font-size: var(--texto-md);
  padding: 0 var(--espacio-6);
}

.boton-bloque {
  width: 100%;
}

.boton-icono {
  width: var(--toque-min);
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  padding: 0;
}

.boton:disabled,
.boton[aria-disabled="true"] {
  background: var(--color-hundido);
  border-color: transparent;
  color: var(--color-texto-suave);
  cursor: not-allowed;
}

.boton[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  align-items: center;
}

/* Botón flotante "Bloquear": siempre visible, pero no compite con el acento. */
.boton-flotante {
  position: fixed;
  right: var(--margen-pantalla);
  bottom: calc(var(--alto-barra-inferior) + var(--espacio-4) + env(safe-area-inset-bottom));
  z-index: var(--capa-flotante);
  min-height: var(--alto-control-grande);
  padding: 0 var(--espacio-6) 0 var(--espacio-5);
  border-radius: var(--radio-pastilla);
  background: var(--color-texto);
  color: var(--color-fondo);
  box-shadow: var(--sombra-3);
}
.boton-flotante:hover {
  background: color-mix(in srgb, var(--color-texto) 85%, var(--color-fondo));
}

@media (min-width: 768px) {
  .boton-flotante {
    bottom: var(--espacio-6);
    right: var(--espacio-6);
  }
}

/* ─── Opciones: fichas y segmentos ─────────────────────────────────── */

.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

/* Una sola fila que se desliza (categorías, secciones) */
.fichas-deslizables {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--espacio-1);
}
.fichas-deslizables::-webkit-scrollbar {
  display: none;
}

.ficha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva), border-color var(--duracion) var(--curva);
}
.ficha:hover {
  background: var(--color-hundido);
}
.ficha[aria-pressed="true"],
.ficha[aria-checked="true"] {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-sobre-acento);
}
.ficha:disabled {
  border-style: dashed;
  color: var(--color-texto-suave);
  text-decoration: line-through;
  cursor: not-allowed;
}

.ficha-hora {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  min-width: calc(var(--toque-min) * 2);
}

.segmentado {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: var(--espacio-1);
  padding: var(--espacio-1);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}
.segmento {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border: 0;
  border-radius: calc(var(--radio-control) - var(--espacio-1));
  background: transparent;
  color: var(--color-texto-suave);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
/* Cuatro opciones (formas de pago): dos por renglón en el celular. */
.segmentado-cuatro {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .segmentado-cuatro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.segmento[aria-pressed="true"],
.segmento[aria-checked="true"] {
  background: var(--color-tarjeta);
  color: var(--color-texto);
  box-shadow: var(--sombra-1), inset 0 0 0 var(--borde-grueso) var(--color-acento);
}

/* ─── Avatares ──────────────────────────────────────────────────────── */

.avatar {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-md);
  height: var(--avatar-md);
  flex: none;
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  object-fit: cover;
}
.avatar-sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  font-size: var(--texto-xs);
}
.avatar-lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  font-size: var(--texto-base);
}

/* ─── Etiquetas de estado ───────────────────────────────────────────── */

.etiqueta-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-3) var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlineado-apretado);
  white-space: nowrap;
}
.etiqueta-estado::before {
  content: "";
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: currentColor;
}

.etiqueta-estado.estado-alerta      { background: var(--estado-alerta-fondo);      color: var(--estado-alerta-texto); }
.etiqueta-estado.estado-atencion { background: var(--estado-atencion-fondo); color: var(--estado-atencion-texto); }
.etiqueta-estado.estado-info    { background: var(--aviso-info-fondo);           color: var(--estado-info-texto); }
.etiqueta-estado.estado-bien      { background: var(--estado-bien-fondo);      color: var(--estado-bien-texto); }
.etiqueta-estado.estado-apagado      { background: var(--estado-apagado-fondo);      color: var(--estado-apagado-texto); }
.etiqueta-estado.estado-cancelado     { background: var(--estado-cancelado-fondo);     color: var(--estado-cancelado-texto); }
.etiqueta-estado.estado-alerta::before      { background: var(--estado-alerta); }
.etiqueta-estado.estado-atencion::before { background: var(--estado-atencion); }
.etiqueta-estado.estado-info::before    { background: var(--estado-info); }
.etiqueta-estado.estado-bien::before      { background: var(--estado-bien); }
.etiqueta-estado.estado-apagado::before      { background: var(--estado-apagado); }
.etiqueta-estado.estado-cancelado::before     { background: var(--estado-cancelado); }
/* Marca pequeña (por ejemplo, "Demo", "Nuevo", "Empleado") */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: var(--espacio-0) var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
}
/* "Se acaba" (inventario) */
.marca-atencion {
  background: var(--aviso-atencion-fondo);
  color: var(--aviso-atencion);
}

/* ─── Sin conexión ──────────────────────────────────────────────────── */

/* Guardada sin conexión: todavía no llega a la base ("· por subir"). */
.por-subir {
  outline: var(--borde-grueso) dashed var(--color-texto-suave);
  outline-offset: calc(var(--borde-fino) * -1);
}

/* ─── Formularios ───────────────────────────────────────────────────── */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  min-width: 0;
}

.campo-etiqueta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}

.campo-ayuda {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.campo-error {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--aviso-error);
}

/* 16 px de letra: así el iPhone no hace zoom al escribir. */
.entrada {
  width: 100%;
  min-height: var(--alto-control);
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-control);
  background: var(--color-tarjeta);
  font-size: var(--texto-base);
  transition: border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}
.entrada::placeholder {
  color: var(--color-texto-suave);
}
.entrada:focus {
  outline: none;
  border-color: var(--color-foco);
  box-shadow: 0 0 0 var(--foco-ancho) var(--color-foco);
}
.entrada[aria-invalid="true"] {
  border-color: var(--aviso-error);
}
.entrada:disabled {
  background: var(--color-hundido);
  color: var(--color-texto-suave);
  cursor: not-allowed;
}
textarea.entrada {
  min-height: calc(var(--alto-control) * 2);
  padding: var(--espacio-3) var(--espacio-4);
  resize: vertical;
}
.entrada.cifra {
  font-family: var(--fuente-cifras);
}
/* Elegir archivo (importar la libreta en CSV) */
.entrada-archivo {
  padding: var(--espacio-1);
  cursor: pointer;
}
.entrada-archivo::file-selector-button {
  min-height: var(--toque-min);
  margin-right: var(--espacio-3);
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: calc(var(--radio-control) - var(--espacio-1));
  background: var(--color-hundido);
  color: var(--color-texto);
  font: inherit;
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}

/* Campo con prefijo (+52, $) o ícono */
.entrada-compuesta {
  position: relative;
  display: flex;
  align-items: center;
}
.entrada-compuesta > .entrada {
  padding-left: calc(var(--espacio-4) * 3);
}
.entrada-prefijo {
  position: absolute;
  left: var(--espacio-4);
  display: flex;
  align-items: center;
  color: var(--color-texto-suave);
  font-family: var(--fuente-cifras);
  pointer-events: none;
}

/* Monto grande en la pantalla de cobro */
.entrada-monto {
  min-height: calc(var(--alto-control) * 1.5);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
}
.entrada-compuesta > .entrada-monto {
  padding-left: calc(var(--espacio-4) * 2.5);
}
.entrada-compuesta > .entrada-monto + .entrada-prefijo,
.entrada-prefijo-monto {
  font-size: var(--texto-2xl);
}

/* Interruptor (sí / no) con zona tocable de 44 px */
.interruptor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  min-height: var(--toque-min);
  cursor: pointer;
}
.interruptor input {
  appearance: none;
  position: relative;
  width: calc(var(--toque-min) + var(--espacio-2));
  height: calc(var(--avatar-sm) + var(--espacio-0));
  flex: none;
  margin: 0;
  border-radius: var(--radio-pastilla);
  background: var(--color-linea-control);
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva);
}
.interruptor input::after {
  content: "";
  position: absolute;
  top: var(--espacio-0);
  left: var(--espacio-0);
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-1);
  transition: transform var(--duracion) var(--curva);
}
.interruptor input:checked {
  background: var(--color-acento);
}
.interruptor input:checked::after {
  transform: translateX(calc(var(--toque-min) + var(--espacio-2) - var(--avatar-sm) - var(--espacio-0) * 2));
}

.casilla {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--toque-min);
  cursor: pointer;
}
.casilla input {
  width: var(--icono-lg);
  height: var(--icono-lg);
  margin: 0;
  accent-color: var(--color-acento);
}
/* Opciones con su explicación debajo. */
.grupo-opciones {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.casilla-con-ayuda {
  align-items: flex-start;
  padding-block: var(--espacio-2);
}
.casilla-con-ayuda input {
  flex: none;
  margin-top: var(--espacio-0);
}

.buscador {
  position: relative;
}
.buscador > .icono {
  position: absolute;
  left: var(--espacio-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-texto-suave);
  pointer-events: none;
}
.buscador > .entrada {
  padding-left: calc(var(--espacio-4) + var(--icono-md) + var(--espacio-3));
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}
/* Un bloque dentro de un formulario (p. ej. la invitación de una persona) */
.formulario-paso {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.formulario-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
@media (min-width: 768px) {
  .formulario-acciones {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
}

/* ─── Tarjetas y panel ──────────────────────────────────────────────── */

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  min-width: 0;
  padding: var(--espacio-5);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-1);
}
.tarjeta-encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.tarjeta-titulo {
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
}

/* Las cifras se acomodan según su espacio (no el de la pantalla): dos
   por renglón en el celular, hasta cuatro a lo ancho, y dos si van en
   media columna. */
.panel-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ancho-dato), 1fr));
  gap: var(--espacio-3);
}

.dato {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  min-width: 0;
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
}
.dato-etiqueta {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.dato-valor {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-xl);
  font-weight: var(--peso-medio);
  line-height: var(--interlineado-apretado);
  letter-spacing: var(--letras-titulo);
  white-space: nowrap;
}
.dato-cambio {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-texto-suave);
}
.dato-cambio.sube { color: var(--grafica-sube); }
.dato-cambio.baja { color: var(--grafica-baja); }
@media (min-width: 768px) {
  .dato-valor {
    font-size: var(--texto-2xl);
  }
}

/* Datos chicos, dos por renglón (ficha del cliente) */
.panel-datos-compacto {
  gap: var(--espacio-2);
}
.panel-datos-compacto .dato {
  padding: var(--espacio-3);
}
@media (min-width: 1024px) {
  .panel-datos-compacto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.dato-valor-chico {
  font-size: var(--texto-md);
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Cuando el dato es texto ("hace 3 semanas", "Corte dama") y no cifra */
.dato-valor-texto {
  font-family: var(--fuente-texto);
  font-variant-numeric: normal;
  letter-spacing: normal;
}

/* Gráfica de barras por día: js pone --valor (0 a 1) en cada barra. */
.grafica-barras {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: end;
  gap: var(--espacio-2);
  height: var(--alto-barra-grafica);
  padding-top: var(--espacio-5);
  border-bottom: var(--borde-fino) solid var(--grafica-guia);
}
.grafica-columna {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espacio-1);
  height: 100%;
  min-width: 0;
}
.grafica-barra {
  width: 100%;
  height: calc(var(--valor, 0) * 100%);
  min-height: var(--borde-grueso);
  border-radius: var(--radio-celda) var(--radio-celda) 0 0;
  background: var(--grafica-barra-suave);
}
.grafica-valor {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  white-space: nowrap;
}
.grafica-ejes {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--espacio-2);
  padding-top: var(--espacio-2);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  text-align: center;
}
/* 30 días: barras más juntas y un rótulo por semana, centrado aunque no quepa */
.grafica-barras.grafica-densa,
.grafica-ejes.grafica-densa {
  gap: var(--espacio-0);
}
.grafica-ejes.grafica-densa > span {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

/* Barra apilada (nuevos contra los que regresaron) */
.barra-apilada {
  display: flex;
  height: var(--alto-barra-apilada);
  overflow: hidden;
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
}
.barra-apilada > span {
  flex: var(--valor, 0) 0 0;
}
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-5);
  font-size: var(--texto-sm);
}
.leyenda-elemento {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}
.leyenda-elemento::before {
  content: "";
  width: var(--punto);
  height: var(--punto);
  border-radius: var(--radio-pastilla);
  background: var(--grafica-barra-suave);
}
/* Ranking con barrita (productos más vendidos) */
.ranking {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ranking-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-1) var(--espacio-3);
  align-items: baseline;
}
.ranking-barra {
  grid-column: 1 / -1;
  height: var(--alto-barra-ranking);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  overflow: hidden;
}
.ranking-barra > span {
  display: block;
  width: calc(var(--valor, 0) * 100%);
  height: 100%;
  border-radius: var(--radio-pastilla);
  background: var(--grafica-barra);
}

/* ─── Tablas ────────────────────────────────────────────────────────── */

.tabla-contenedor {
  overflow-x: auto;
  margin: 0 calc(var(--espacio-5) * -1);
  padding: 0 var(--espacio-5);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}
.tabla th {
  padding: var(--espacio-2) var(--espacio-3);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  color: var(--color-texto-suave);
  font-weight: var(--peso-medio);
  text-align: left;
  white-space: nowrap;
}
.tabla td {
  padding: var(--espacio-3);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  white-space: nowrap;
}
.tabla tr:last-child td {
  border-bottom: 0;
}
.tabla th:first-child,
.tabla td:first-child {
  padding-left: 0;
}
.tabla th:last-child,
.tabla td:last-child {
  padding-right: 0;
}
.tabla .num {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tabla tfoot td {
  border-top: var(--borde-grueso) solid var(--color-linea);
  font-weight: var(--peso-fuerte);
}

/* ─── Listas (clientes, productos, reparaciones) ────────────────────── */

.lista {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  overflow: hidden;
}
.fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: calc(var(--toque-min) + var(--espacio-4));
  padding: var(--espacio-3) var(--espacio-4);
  border-top: var(--borde-fino) solid var(--color-linea);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva);
}
.lista > li:first-child > .fila,
.lista > .fila:first-child {
  border-top: 0;
}
a.fila:hover,
button.fila:hover {
  background: var(--color-hundido);
}
/* Coincidencias del campo "Cliente": la escogida con las flechas */
.fila[aria-selected="true"] {
  background: var(--color-acento-tenue);
}
button.fila {
  width: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
/* Una que no se puede escoger (por ejemplo, una venta fuera de plazo). */
button.fila:disabled {
  color: var(--color-texto-suave);
  cursor: default;
}
button.fila:disabled:hover {
  background: transparent;
}
.fila-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.fila-titulo {
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Un título que se lee completo. */
.fila-titulo-completo {
  white-space: normal;
  overflow-wrap: anywhere;
}
.fila-detalle {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila-dato {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-sm);
  text-align: right;
  white-space: nowrap;
}
.fila > .icono:last-child {
  color: var(--color-texto-suave);
}
/* Un detalle abajo del monto, más chico */
/* Nómina: el recibo ya pagado, en verde bajo su cifra. */
.fila-dato-pagado {
  color: var(--aviso-exito);
}
.fila-dato-extra {
  display: block;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
/* Botones al final de la fila ("No llegó", "Cobrar") */
.fila-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--espacio-2);
  margin-left: auto;
}
.fila-acciones:empty {
  display: none;
}
/* Nota corta a la derecha ("No acepta mensajes") */
.fila-nota {
  flex: none;
  max-width: 40%;
  text-align: right;
}
/* Renglón de la bitácora: el texto puede ocupar varias líneas */
.fila-actividad {
  align-items: flex-start;
}
.fila-actividad > .icono {
  margin-top: var(--espacio-1);
  color: var(--color-texto-suave);
}
/* Fila con un botón grande adentro y otro chico al lado (usuarios recientes) */
.fila-reciente {
  padding-top: 0;
  padding-bottom: 0;
}
.fila-boton {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--espacio-3);
  min-width: 0;
  min-height: calc(var(--toque-min) + var(--espacio-4));
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lista-compacta .fila {
  min-height: var(--toque-min);
  padding: var(--espacio-2) 0;
}
.lista-compacta {
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Resumen del cobro: el total */
.resumen-cobro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) 0;
  border-top: var(--borde-fino) solid var(--color-linea);
  color: var(--color-texto-suave);
}
.resumen-cobro-total {
  color: var(--color-texto);
  font-size: var(--texto-lg);
  font-weight: var(--peso-medio);
}

/* Pago mixto: un renglón por forma, hasta 3 */
.pagos-dividir {
  align-self: flex-start;
}
.pagos-divididos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.pago-renglon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--toque-min);
  align-items: center;
  gap: var(--espacio-2);
}
.pago-renglon .entrada-compuesta > .entrada {
  padding-left: calc(var(--espacio-4) * 2);
}
.pagos-cuadre {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--aviso-exito);
  font-size: var(--texto-sm);
}
.pagos-cuadre-mal {
  color: var(--color-peligro);
}
/* Descuento (solo el dueño): tipo y cantidad en un renglón */
.descuento-renglon {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: var(--espacio-2);
}
.descuento-resultado:not(.pagos-cuadre-mal) {
  color: var(--color-texto-suave);
}
.entrada-sufijo {
  position: absolute;
  right: var(--espacio-4);
  display: flex;
  align-items: center;
  color: var(--color-texto-suave);
  font-family: var(--fuente-cifras);
  pointer-events: none;
}
.entrada-compuesta > .entrada.entrada-con-sufijo {
  padding-left: var(--espacio-4);
  padding-right: calc(var(--espacio-4) * 2.5);
}
/* Renglones de la venta: el producto arriba (con quitar); la cantidad y
   el precio abajo */
.extras-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.extra-renglon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--toque-min);
  grid-template-areas:
    "producto producto quitar"
    "cantidad precio precio";
  align-items: center;
  gap: var(--espacio-2);
  padding-bottom: var(--espacio-3);
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.extra-producto { grid-area: producto; }
/* El producto ya escogido (del buscador), con su nombre. */
.extra-nombre {
  font-weight: var(--peso-medio);
  overflow-wrap: anywhere;
}
.extra-cantidad { grid-area: cantidad; }
.extra-precio { grid-area: precio; }
.extra-quitar { grid-area: quitar; }
.extra-renglon .entrada-compuesta > .entrada {
  padding-left: calc(var(--espacio-4) * 2);
}
/* "Lo que se usó" (resumen con "Cambiar") y el buscador de productos,
   con su lista debajo. */
.uso-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  min-width: 0;
}
.buscador-producto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}
.extras-suma {
  color: var(--color-texto-suave);
}
.pagos-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-2);
}

/* ─── Avisos ────────────────────────────────────────────────────────── */

.aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--aviso-info-fondo);
  color: var(--aviso-info);
  font-size: var(--texto-sm);
  line-height: var(--interlineado-medio);
}
.aviso > .icono {
  margin-top: var(--espacio-0);
}
/* Si no cabe junto al botón, el botón baja a su propio renglón. */
.aviso-texto {
  flex: 1 1 var(--ancho-texto-min);
  min-width: 0;
  color: var(--color-texto);
}
.aviso-texto strong {
  display: block;
  font-weight: var(--peso-fuerte);
}
.aviso-accion {
  align-self: center;
  flex: none;
  margin-left: auto;
}
.aviso-exito    { background: var(--aviso-exito-fondo);    color: var(--aviso-exito); }
.aviso-atencion { background: var(--aviso-atencion-fondo); color: var(--aviso-atencion); }
.aviso-error    { background: var(--aviso-error-fondo);    color: var(--aviso-error); }
.aviso-discreto {
  background: transparent;
  border: var(--borde-fino) solid var(--color-linea);
  color: var(--color-texto-suave);
}

/* Franja de conexión: "Sin conexión · 3 cambios por subir" */
.aviso-conexion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  padding: var(--espacio-2) var(--margen-pantalla);
  background: var(--aviso-atencion-fondo);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}
.aviso-conexion > .icono {
  color: var(--aviso-atencion);
}

/* Brindis: "Venta anulada · Deshacer" durante 5 segundos */
.brindis {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-barra-inferior) + var(--espacio-4) + env(safe-area-inset-bottom));
  z-index: var(--capa-aviso);
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  width: max-content;
  max-width: calc(100% - var(--margen-pantalla) * 2);
  min-height: var(--alto-control);
  padding: var(--espacio-1) var(--espacio-1) var(--espacio-1) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--brindis-fondo);
  color: var(--brindis-texto);
  box-shadow: var(--sombra-3);
  font-weight: var(--peso-medio);
  transform: translate(-50%, 0);
  transition: opacity var(--duracion) var(--curva), transform var(--duracion) var(--curva);
}
.brindis.oculto {
  opacity: 0;
  transform: translate(-50%, var(--espacio-4));
  pointer-events: none;
}
/* "Cobrado $1,760 · Lucía" y, si hubo algo raro, una línea más chica. */
.brindis:has(.brindis-texto) {
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: var(--espacio-2);
}
.brindis-texto {
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  gap: var(--espacio-0);
  padding-right: var(--espacio-3);
}
.brindis-detalle {
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  color: color-mix(in srgb, var(--brindis-texto) 85%, transparent);
}
.brindis-accion {
  min-height: var(--toque-min);
  padding: 0 var(--espacio-4);
  border: 0;
  border-radius: calc(var(--radio-control) - var(--espacio-1));
  background: transparent;
  color: var(--brindis-accion);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}
.brindis-accion:hover {
  background: color-mix(in srgb, var(--brindis-texto) 10%, transparent);
}
@media (min-width: 768px) {
  .brindis {
    bottom: var(--espacio-6);
  }
}

/* "Datos de ejemplo": va en la esquina del encabezado del negocio demo
   (junto al nombre), así nunca tapa quién está conectado. */
.marca-demo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espacio-1);
  padding: var(--espacio-1) var(--espacio-3);
  border: var(--borde-fino) dashed var(--aviso-atencion);
  border-radius: var(--radio-pastilla);
  background: var(--aviso-atencion-fondo);
  color: var(--aviso-atencion);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}

/* ─── Utilidades de acomodo por tamaño ──────────────────────────────── */

@media (min-width: 768px) {
  .solo-celular {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .solo-tablet {
    display: none !important;
  }
}

/* ─── Ventanas emergentes ───────────────────────────────────────────── */
/* En celular sube desde abajo; en tablet y computadora va al centro. */

.ventana {
  width: 100%;
  max-width: 100%;
  max-height: var(--alto-ventana-max);
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
  background: var(--color-tarjeta);
  color: var(--color-texto);
  box-shadow: var(--sombra-3);
  overflow: auto;
}
.ventana::backdrop {
  background: var(--color-velo);
}
.ventana[open] {
  animation: ventana-entra var(--duracion) var(--curva);
}
@media (min-width: 768px) {
  .ventana {
    width: calc(100% - var(--espacio-8));
    max-width: var(--ancho-ventana);
    margin: auto;
    border-radius: var(--radio-tarjeta);
  }
}

.ventana-encabezado {
  position: sticky;
  top: 0;
  z-index: var(--capa-pegajosa);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) var(--espacio-5);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
.ventana-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  padding: var(--espacio-5);
}
.ventana-titulo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-1);
  min-width: 0;
}

/* En tablet: Cancelar a la izquierda; "Dejar por confirmar" y "Confirmar" a la derecha. */
/* Ficha del cliente: "Corregir datos" y "Borrar cliente" lado a lado */
.ventana-acciones.acciones-ficha {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* "¿Borrar para siempre?": los botones en su propio renglón */
.confirmar-borrado > .grupo-botones {
  flex-basis: 100%;
}
.formulario-avisos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.formulario-avisos:empty {
  display: none;
}

/* Renglones de una ficha (ícono + dato) */
.ficha-renglon {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
}
.ficha-renglon > .icono {
  margin-top: var(--espacio-1);
  color: var(--color-texto-suave);
}

/* Botón con aspecto de enlace ("Ajustar hora") */
.enlace-boton {
  align-self: flex-start;
  min-height: var(--toque-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-acento-texto);
  font-weight: var(--peso-fuerte);
  text-decoration: underline;
  text-underline-offset: var(--espacio-0);
  cursor: pointer;
}

/* Quién está conectado (ventana de la sesión) */
.sesion-persona {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
}
.ventana-acciones {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-4) var(--espacio-5) calc(var(--espacio-4) + env(safe-area-inset-bottom));
  border-top: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}

/* Menú de opciones rápidas (por ejemplo, el de "Bloquear") */
.menu-opciones {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--espacio-2);
  list-style: none;
}
.menu-opcion {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--alto-control-grande);
  padding: 0 var(--espacio-3);
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  font-weight: var(--peso-medio);
  text-align: left;
  cursor: pointer;
}
.menu-opcion:hover {
  background: var(--color-hundido);
}
.menu-opcion-detalle {
  margin-left: auto;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

/* ─── Pantallas vacías que enseñan ──────────────────────────────────── */

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-10) var(--espacio-6);
  border: var(--borde-fino) dashed var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  text-align: center;
}
.vacio > .icono {
  color: var(--color-texto-suave);
}
.vacio-titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
}
.vacio-texto {
  max-width: var(--ancho-lectura);
  color: var(--color-texto-suave);
}
.vacio-compacto {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-1) var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
}
.vacio-compacto .vacio-titulo {
  font-size: var(--texto-base);
}

/* ─── Esqueletos (mientras carga; nunca la palabra "cargando") ─────── */

.esqueleto {
  display: block;
  border-radius: var(--radio-celda);
  background: var(--color-hundido);
}
.esqueleto-linea {
  height: var(--espacio-3);
}
.esqueleto-linea.corta { width: 40%; }
.esqueleto-linea.media { width: 65%; }
.esqueleto-circulo {
  width: var(--avatar-md);
  height: var(--avatar-md);
  flex: none;
  border-radius: var(--radio-pastilla);
}
.esqueleto-dato {
  height: calc(var(--alto-control) * 2);
  border-radius: var(--radio-tarjeta);
}
.esqueleto-ficha {
  width: calc(var(--toque-min) * 2);
  height: var(--toque-min);
  border-radius: var(--radio-pastilla);
}
.esqueleto-fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.esqueleto-textos {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-2);
}

/* ─── Navegación ────────────────────────────────────────────────────── */

/* Barra de arriba: negocio, quién está conectado y "Cambiar de usuario" */
.encabezado {
  position: sticky;
  top: 0;
  z-index: var(--capa-barra);
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--alto-encabezado);
  padding: var(--espacio-2) var(--margen-pantalla);
  padding-top: calc(var(--espacio-2) + env(safe-area-inset-top));
  border-bottom: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
.encabezado-negocio {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-width: var(--avatar-sm);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}
.encabezado-negocio span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* En celular, el demo cambia el nombre por "Datos de ejemplo" para que quepa quién está conectado. */
@media (max-width: 767px) {
  .encabezado:has(.marca-demo) .encabezado-negocio > span:not(.logo-inicial) {
    display: none;
  }
}
/* En tablet el nombre y "Cambiar de usuario" ya están en el menú lateral:
   arriba queda el logo y cabe completo quién está conectado. */
@media (min-width: 768px) and (max-width: 1023px) {
  .encabezado .encabezado-negocio > span:not(.logo-inicial),
  .encabezado .boton-cambiar-usuario {
    display: none;
  }
}
.logo-negocio {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  flex: none;
  border-radius: var(--radio-celda);
  object-fit: cover;
}
.logo-inicial {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  flex: none;
  border-radius: var(--radio-celda);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
}
.encabezado-relleno {
  flex: 1;
}

/* "Lucía · Empleado": siempre a la vista para no vender con la cuenta de otro. */
.quien-conectado {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  padding: var(--espacio-1) var(--espacio-3) var(--espacio-1) var(--espacio-1);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  font-size: var(--texto-sm);
  white-space: nowrap;
  cursor: pointer;
  /* Un nombre largo se corta con "…" (sin deslizar la pantalla de lado). */
  min-width: 0;
  max-width: 100%;
}
/* En celular, nombre y rol en dos renglones para que siempre quepan. */
.quien-conectado-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--interlineado-apretado);
  text-align: left;
}
.quien-conectado-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--peso-fuerte);
}
.quien-conectado-rol {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}
@media (min-width: 768px) {
  .quien-conectado-texto {
    flex-direction: row;
    gap: var(--espacio-1);
    line-height: inherit;
  }
  .quien-conectado-rol {
    font-size: inherit;
  }
  .quien-conectado-rol::before {
    content: "· ";
  }
}

.boton-cambiar-usuario {
  min-height: var(--alto-control);
}

/* Barra inferior (celular): cuatro secciones, según el rol */
.barra-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--capa-barra);
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  height: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
.barra-inferior-enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.barra-inferior-enlace > .icono {
  box-sizing: content-box;
  padding: var(--espacio-1) var(--espacio-5);
  border-radius: var(--radio-pastilla);
  transition: background-color var(--duracion) var(--curva);
}
.barra-inferior-enlace[aria-current="page"] {
  color: var(--color-texto);
}
.barra-inferior-enlace[aria-current="page"] > .icono {
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
}
@media (min-width: 768px) {
  .barra-inferior {
    display: none;
  }
}

/* Menú lateral (tablet y computadora) */
.menu-lateral {
  display: none;
  flex-direction: column;
  gap: var(--espacio-1);
  width: var(--ancho-lateral);
  padding: var(--espacio-4) var(--espacio-3);
  border-right: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
@media (min-width: 768px) {
  .menu-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--capa-barra);
    display: flex;
  }
}
.menu-lateral-negocio {
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-3);
}
/* El menú va por secciones: Mostrador, Mi negocio… */
.menu-lateral-seccion {
  padding: var(--espacio-4) var(--espacio-3) var(--espacio-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.menu-lateral-enlace {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--alto-control);
  padding: 0 var(--espacio-3);
  border-radius: var(--radio-control);
  color: var(--color-texto-suave);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.menu-lateral-enlace:hover {
  background: var(--color-hundido);
  color: var(--color-texto);
}
.menu-lateral-enlace[aria-current="page"] {
  background: var(--color-acento-tenue);
  color: var(--color-texto);
}
.menu-lateral-enlace[aria-current="page"] > .icono {
  color: var(--color-acento-texto);
}
.menu-lateral-pie {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin-top: auto;
  padding-top: var(--espacio-4);
  border-top: var(--borde-fino) solid var(--color-linea);
}

/* Pie "Hecho por Localiapps" */
.pie-localiapps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-2) var(--espacio-5);
  padding: var(--espacio-6) var(--margen-pantalla) calc(var(--espacio-6) + env(safe-area-inset-bottom));
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.pie-localiapps a {
  color: inherit;
  font-weight: var(--peso-fuerte);
  text-decoration: none;
}
.pie-localiapps a:hover {
  color: var(--marca-acento);
}
.pie-localiapps-marca {
  color: var(--marca-acento);
}

/* ─── Casillas y números ───────────────────────────────────────────── */

/* Grupo de casillas */
.grupo-casillas {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.grupo-casillas > .campo-etiqueta {
  padding: 0;
  margin-bottom: var(--espacio-1);
}

.entrada-numero {
  max-width: calc(var(--ancho-hora) * 2);
}

/* ─── Plegables (proveedores, detalles que se abren) ───────────────── */

.plegable {
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.plegable > summary {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: calc(var(--toque-min) + var(--espacio-2));
  cursor: pointer;
  list-style: none;
  font-weight: var(--peso-fuerte);
}
.plegable > summary::-webkit-details-marker {
  display: none;
}
.plegable > summary::after {
  content: "";
  width: var(--espacio-2);
  height: var(--espacio-2);
  margin-left: auto;
  margin-right: var(--espacio-1);
  border-right: var(--borde-grueso) solid var(--color-texto-suave);
  border-bottom: var(--borde-grueso) solid var(--color-texto-suave);
  transform: rotate(45deg);
  transition: transform var(--duracion) var(--curva);
}
.plegable[open] > summary::after {
  transform: rotate(-135deg);
}
.plegable-detalle {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
}
.plegable-cuerpo {
  padding-bottom: var(--espacio-3);
}

/* ─── Barra de avance ──────────────────────────────────────────────── */

.progreso {
  height: var(--alto-progreso);
  background: var(--color-hundido);
  overflow: hidden;
}
.progreso-relleno {
  height: 100%;
  background: var(--color-acento);
  transform: scaleX(var(--avance, 0));
  transform-origin: left center;
  transition: transform var(--duracion) var(--curva);
}

/* ─── Avatar chico ─────────────────────────────────────────────────── */

.avatar-chico {
  width: var(--avatar-md);
  height: var(--avatar-md);
  font-size: var(--texto-sm);
}

/* ─── Folio en grande (venta, reparación) ──────────────────────────── */

.folio {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-folio);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-folio);
  line-height: var(--interlineado-apretado);
}
.folio-etiqueta {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
}
/* El detalle completo, en varias líneas si hace falta. */
.fila-detalle.fila-detalle-completo {
  white-space: normal;
}

/* ─── Arrastrar para ordenar ───────────────────────────────────────── */

.agarradera {
  display: inline-grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--color-texto-suave);
  cursor: grab;
  touch-action: none;
}
.agarradera:hover {
  background: var(--color-hundido);
}

/* ─── Caja, gastos y ganancia ──────────────────────────────────────── */

/* Renglones de "lo que debería haber" (y de la ganancia del mes) */
.caja-cuentas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.caja-cuenta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  color: var(--color-texto-suave);
}
.caja-cuenta > .cifra {
  color: var(--color-texto);
}
/* Un dato de texto (el equipo, la falla): a la derecha, sin la letra de las cifras */
.caja-cuenta-texto {
  color: var(--color-texto);
  text-align: end;
}

/* Contar el efectivo: billete o moneda, cuántos, y lo que suman */
.conteo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.conteo-fila {
  display: grid;
  grid-template-columns: var(--ancho-denominacion) minmax(0, 1fr) var(--ancho-denominacion);
  align-items: center;
  gap: var(--espacio-3);
}
.conteo-denominacion {
  display: flex;
  flex-direction: column;
  line-height: var(--interlineado-apretado);
}
.conteo-subtotal {
  text-align: right;
}

/* "Cuadra" · "Sobran $50" · "Faltan $50" */
.caja-diferencia {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin: 0;
  font-weight: var(--peso-fuerte);
}
.caja-diferencia.caja-cuadra { color: var(--aviso-exito); }
.caja-diferencia.caja-sobran { color: var(--aviso-atencion); }
.caja-diferencia.caja-faltan { color: var(--color-peligro); }

/* Gastos fijos por confirmar */
.tarjeta-atencion {
  border-color: var(--aviso-atencion);
}

/* La foto del ticket */
.ticket-foto {
  display: block;
  max-width: 100%;
  max-height: var(--alto-ticket);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  object-fit: contain;
}

/* Ganancia del mes: la cuenta y, al lado en computadora, la gráfica */
.ganancia {
  display: grid;
  gap: var(--espacio-5);
}
@media (min-width: 1024px) {
  .ganancia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}
/* Cada mes: lo vendido (suave) y, dentro, lo que se ganó (fuerte) */
.grafica-pila {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: calc(var(--valor, 0) * 100%);
  min-height: var(--borde-grueso);
  overflow: hidden;
  border-radius: var(--radio-celda) var(--radio-celda) 0 0;
  background: var(--grafica-barra-suave);
}
.grafica-barra-ganancia {
  width: 100%;
  height: calc(var(--valor, 0) * 100%);
  background: var(--grafica-barra);
}

/* ─── Ticket (impresora térmica de 58 u 80 mm) ─────────────────────── */
/* En pantalla se ve como una tira de papel; al imprimir solo sale él. */
.ticket {
  width: var(--ticket-ancho-58);
  max-width: 100%;
  margin-inline: auto;
  /* En pantalla, la orilla que la impresora no alcanza: lo de adentro mide
     lo mismo que lo impreso. */
  padding: var(--ticket-margen) calc((var(--ticket-ancho-58) - var(--ticket-impreso-58)) / 2);
  background: var(--ticket-papel);
  color: var(--ticket-tinta);
  font-family: var(--fuente-cifras);
  font-size: var(--ticket-texto);
  line-height: var(--interlineado-medio);
  /* Nombres y textos largos se parten: nada se sale del papel. */
  overflow-wrap: anywhere;
  border: var(--borde-fino) solid var(--color-linea);
}
.ticket-80 {
  width: var(--ticket-ancho-80);
  padding-inline: calc((var(--ticket-ancho-80) - var(--ticket-impreso-80)) / 2);
}
.ticket p {
  margin: 0;
}
.ticket-logo {
  display: block;
  width: var(--ticket-logo);
  height: var(--ticket-logo);
  margin: 0 auto var(--espacio-1);
  object-fit: contain;
  filter: grayscale(1) contrast(1.4);
}
.ticket-centro {
  text-align: center;
}
.ticket-negocio {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-titulo);
  font-size: var(--ticket-texto-total);
}
.ticket-linea {
  margin: var(--espacio-2) 0;
  border: 0;
  border-top: var(--ticket-linea);
}
.ticket-renglones {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticket-renglon {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-2);
}
.ticket-renglon span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ticket-renglon span:last-child {
  flex: none;
  white-space: nowrap;
}
.ticket-detalle {
  padding-inline-start: var(--espacio-2);
}
.ticket-total {
  font-weight: var(--peso-titulo);
  font-size: var(--ticket-texto-total);
}
.ticket-legal {
  margin-top: var(--espacio-2);
  font-size: var(--texto-xs);
}
.ticket-impresion {
  display: none;
}
@media print {
  @page {
    margin: 0;
  }
  html.imprimiendo-ticket,
  html.imprimiendo-ticket body {
    background: var(--ticket-papel);
  }
  html.imprimiendo-ticket body > *:not(.ticket-impresion) {
    display: none;
  }
  html.imprimiendo-ticket .ticket-impresion {
    display: block;
  }
  /* Solo el ancho que imprime la cabeza: si fuera el del papel, la
     impresora cortaría los precios de la derecha. */
  html.imprimiendo-ticket .ticket {
    width: var(--ticket-impreso-58);
    margin: 0;
    padding-inline: 0;
    border: 0;
  }
  html.imprimiendo-ticket .ticket-80 {
    width: var(--ticket-impreso-80);
  }
}

/* ─── Compras: los renglones del formulario ───────────────────────── */
.compra-renglon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-2);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
}
.compra-renglon-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
  grid-column: 1 / -1;
}
.compra-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: var(--peso-fuerte);
}

.ticket-firma {
  margin-top: var(--espacio-4);
}

/* Un nombre que se cambia ahí mismo. */
.entrada-en-fila {
  min-height: var(--alto-control);
}

/* ─── Vender: atajos, renglones de la venta y total ────────────────── */

/* Recarga, Paquete y Más opciones: a la mano, arriba del buscador. */
.venta-atajos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacio-2);
}
.atajo,
.compania {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  min-height: var(--alto-control-grande);
  padding: var(--espacio-2);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duracion) var(--curva), background var(--duracion) var(--curva);
}
.atajo:hover,
.compania:hover {
  border-color: var(--color-linea-control);
}
.atajo > .icono {
  color: var(--color-acento-texto);
}

/* Cada renglón: nombre e importe arriba; precio por pieza y cantidad abajo. */
.venta-renglones {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.venta-renglon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nombre importe"
    "detalle cantidad";
  align-items: center;
  gap: var(--espacio-1) var(--espacio-3);
  padding: var(--espacio-3) 0;
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.venta-renglon-nombre {
  grid-area: nombre;
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-width: 0;
  font-weight: var(--peso-medio);
  overflow-wrap: anywhere;
}
.venta-renglon-nombre > .icono {
  flex: none;
  color: var(--color-texto-suave);
}
.venta-renglon-detalle {
  grid-area: detalle;
  min-width: 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
/* Número, comisión y folio de una recarga: se parten en varias líneas. */
.venta-renglon-detalle.cifra {
  white-space: normal;
  overflow-wrap: anywhere;
}
.venta-renglon-importe {
  grid-area: importe;
  font-family: var(--fuente-cifras);
  font-weight: var(--peso-medio);
  text-align: right;
}
.venta-renglon > .contador,
.venta-renglon > .venta-renglon-quitar {
  grid-area: cantidad;
  justify-self: end;
}

/* Cantidad con − y + (cada botón de 44 px). */
.contador {
  display: inline-flex;
  align-items: center;
  border: var(--borde-fino) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
}
.contador-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--toque-min);
  height: var(--toque-min);
  padding: 0;
  border: 0;
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: var(--color-texto);
  cursor: pointer;
}
.contador-boton:hover {
  background: var(--color-hundido);
}
.contador-numero {
  min-width: var(--espacio-8);
  font-family: var(--fuente-cifras);
  font-weight: var(--peso-fuerte);
  text-align: center;
}

.venta-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.venta-total-cifra {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}

/* ─── Cobro: billetes rápidos y el cambio ──────────────────────────── */
.montos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espacio-2);
}
.montos > .ficha {
  min-width: 0;
  min-height: var(--alto-control-grande);
  padding: 0 var(--espacio-1);
  border-radius: var(--radio-control);
  font-family: var(--fuente-cifras);
}
.entrada-grande {
  min-height: var(--alto-control-grande);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-xl);
  text-align: right;
}
.cobro-cambio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--aviso-exito-fondo);
  color: var(--aviso-exito);
  font-weight: var(--peso-medio);
}
.cobro-cambio-cifra {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-xl);
  font-weight: var(--peso-titulo);
}
.cobro-cambio.cobro-falta {
  background: var(--aviso-error-fondo);
  color: var(--aviso-error);
}

/* ─── Recargas y paquetes: compañía, monto y el número en grande ───── */
.companias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-compania), 1fr));
  gap: var(--espacio-2);
}
.compania {
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
}
.compania[aria-pressed="true"] {
  border-color: var(--color-acento);
  background: var(--color-acento-tenue);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-acento);
}
.numero-grande {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
  padding: var(--espacio-4);
  border: var(--borde-fino) dashed var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-hundido);
}
.numero-grande-cifra {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-titulo);
  line-height: var(--interlineado-apretado);
  overflow-wrap: anywhere;
  text-align: center;
}

/* ─── Reparaciones: cuántas hay en cada estado y cada nota ─────────── */
.estados-cuentas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
}
/* Con el menú de lado, los cuatro en un renglón solo si caben */
@media (min-width: 1024px) {
  .estados-cuentas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.estado-cuenta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-inline-start-width: var(--espacio-1);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  font: inherit;
  text-align: start;
  text-decoration: none;
}
button.estado-cuenta {
  cursor: pointer;
}
/* El cuadro que está filtrando la lista. */
.estado-cuenta[aria-pressed="true"] {
  background: var(--color-hundido);
  box-shadow: inset 0 0 0 var(--borde-grueso) var(--color-acento);
}
.estado-cuenta-numero {
  font-family: var(--fuente-cifras);
  font-size: var(--texto-xl);
  font-weight: var(--peso-titulo);
}
.estado-cuenta-nombre {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
/* La nota (o la devolución) en la lista: folio, cliente y equipo; la barra
   dice su estado (y la etiqueta lo dice en texto). */
.reparacion,
.devolucion {
  border-inline-start: var(--espacio-1) solid var(--color-linea);
}
.reparacion-folio,
.devolucion-folio {
  flex: none;
  font-family: var(--fuente-cifras);
  font-weight: var(--peso-fuerte);
}
.estado-cuenta.estado-info,      .reparacion.estado-info,      .devolucion.estado-info      { border-inline-start-color: var(--estado-info); }
.estado-cuenta.estado-atencion,  .reparacion.estado-atencion,  .devolucion.estado-atencion  { border-inline-start-color: var(--estado-atencion); }
.estado-cuenta.estado-bien,      .reparacion.estado-bien,      .devolucion.estado-bien      { border-inline-start-color: var(--estado-bien); }
.estado-cuenta.estado-apagado,   .reparacion.estado-apagado,   .devolucion.estado-apagado   { border-inline-start-color: var(--estado-apagado); }
.estado-cuenta.estado-cancelado, .reparacion.estado-cancelado, .devolucion.estado-cancelado { border-inline-start-color: var(--estado-cancelado); }
.estado-cuenta.estado-alerta,    .reparacion.estado-alerta,    .devolucion.estado-alerta    { border-inline-start-color: var(--estado-alerta); }
/* La devolución abre su detalle con un botón (button.fila le quita el borde). */
button.devolucion {
  border-inline-start-style: solid;
  border-inline-start-width: var(--espacio-1);
}
/* A dónde va la pieza que regresa: abajo, a todo lo ancho. */
.venta-renglon-destino {
  grid-column: 1 / -1;
}

/* Estado físico al recibir: casillas rápidas en rejilla. */
.casillas-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-1) var(--espacio-4);
}
@media (min-width: 768px) {
  .casillas-rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Patrón de desbloqueo: 3 × 3 puntos; cada toque lleva su número de
   orden (el primero con anillo). */
.patron {
  display: grid;
  grid-template-columns: repeat(3, var(--patron-punto));
  gap: var(--espacio-6);
  justify-content: center;
  width: max-content;
  margin-inline: auto;
  padding: var(--espacio-5);
  border-radius: var(--radio-tarjeta);
  background: var(--color-hundido);
}
.patron-punto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--patron-punto);
  height: var(--patron-punto);
  padding: 0;
  border: var(--borde-grueso) solid var(--color-linea-control);
  border-radius: var(--radio-pastilla);
  background: var(--color-tarjeta);
  color: transparent;
  font-family: var(--fuente-cifras);
  font-weight: var(--peso-titulo);
  cursor: pointer;
}
.patron-punto[aria-pressed="true"] {
  border-color: var(--color-acento);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.patron-punto.patron-inicio {
  box-shadow: 0 0 0 var(--foco-separacion) var(--color-hundido), 0 0 0 var(--espacio-1) var(--color-acento-texto);
}

/* ─── Pendientes del dueño: un ícono con el tono de cada caso ──────── */
.pendiente-icono {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radio-pastilla);
}
.pendiente-icono.estado-alerta   { background: var(--estado-alerta-fondo);   color: var(--estado-alerta-texto); }
.pendiente-icono.estado-atencion { background: var(--estado-atencion-fondo); color: var(--estado-atencion-texto); }
.pendiente-icono.estado-info     { background: var(--estado-info-fondo);     color: var(--estado-info-texto); }
.pendiente-icono.estado-bien     { background: var(--estado-bien-fondo);     color: var(--estado-bien-texto); }

/* ─── Configuración: subir el logo ─── */

.subir-imagen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3) var(--espacio-4);
}
.subir-imagen-controles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.vista-imagen {
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  background: var(--color-hundido);
  color: var(--color-texto-suave);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-linea);
}
.vista-imagen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vista-logo {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radio-control);
}
.vista-logo > img {
  object-fit: contain;
  background: var(--color-tarjeta);
}
.vista-inicial {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: var(--peso-titulo);
}