/* Vitri - hoja unica, mobile first.
 *
 * Reglas:
 *   - Nada de framework. Todo lo que se necesita esta aca y se lee de arriba a abajo.
 *   - Se disena para un celular de gama media con una mano, parado en el mostrador.
 *     Botones grandes (44px minimo), contraste alto, sin hover como unica senal.
 *   - Desde 900px el mismo HTML pasa a dos columnas con el menu al costado.
 *   - Modo oscuro automatico: la tienda tiene vidriera y el celular esta en oscuro.
 */

/* ============================================================ tokens */

:root {
  --tinta: #10151f;
  --tinta-2: #49566b;
  --tinta-3: #7a879b;
  --fondo: #f4f6fa;
  --papel: #ffffff;
  --papel-2: #eef1f7;
  --borde: #dde3ed;
  --borde-fuerte: #c3ccdb;

  --marca: #2f5bd9;
  --marca-oscura: #2247ad;
  --marca-suave: #e7edfd;

  --verde: #16794a;
  --verde-suave: #dcf3e8;
  --ambar: #9a6206;
  --ambar-suave: #fdf0d6;
  --rojo: #b3261e;
  --rojo-suave: #fbe2e0;

  --r-chico: 8px;
  --r: 12px;
  --r-grande: 18px;

  --sombra: 0 1px 2px rgba(16, 21, 31, .06), 0 2px 8px rgba(16, 21, 31, .05);
  --sombra-alta: 0 4px 16px rgba(16, 21, 31, .12);

  --nav-alto: 62px;
  --ancho-max: 1180px;

  --fuente: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --tinta: #eef1f7;
    --tinta-2: #a9b4c6;
    --tinta-3: #7d889b;
    --fondo: #0d1219;
    --papel: #161d27;
    --papel-2: #1e2732;
    --borde: #2a3441;
    --borde-fuerte: #3b4756;

    --marca: #7ea2ff;
    --marca-oscura: #9db9ff;
    --marca-suave: #1b2740;

    --verde: #5fd6a0;
    --verde-suave: #14312a;
    --ambar: #f0c26b;
    --ambar-suave: #332713;
    --rojo: #ff9a92;
    --rojo-suave: #3a1c1a;

    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-alta: 0 6px 20px rgba(0, 0, 0, .5);
  }
}

:root[data-tema='oscuro'] {
  --tinta: #eef1f7;
  --tinta-2: #a9b4c6;
  --tinta-3: #7d889b;
  --fondo: #0d1219;
  --papel: #161d27;
  --papel-2: #1e2732;
  --borde: #2a3441;
  --borde-fuerte: #3b4756;
  --marca: #7ea2ff;
  --marca-oscura: #9db9ff;
  --marca-suave: #1b2740;
  --verde: #5fd6a0;
  --verde-suave: #14312a;
  --ambar: #f0c26b;
  --ambar-suave: #332713;
  --rojo: #ff9a92;
  --rojo-suave: #3a1c1a;
}

/* ============================================================ base */

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

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  /* Nada de scroll horizontal: si un numero largo se pasa, se arregla el numero, no se
     deja que la pantalla se corra de costado. */
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.18rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Un <svg> sin ancho ocupa todo el contenedor. Los iconos vienen en linea y sin
   medidas para que hereden el tamano del texto, asi que el tamano por defecto va aca.
   Las reglas de mas abajo (nav, avisos, vacio) lo pisan donde hace falta otro. */
svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -.18em;
}

small, .chico { font-size: .82rem; color: var(--tinta-2); }
.tenue { color: var(--tinta-2); }
.mono { font-family: var(--mono); font-size: .9em; }
.nowrap { white-space: nowrap; }
.centrado { text-align: center; }
.derecha { text-align: right; }
.plata { font-variant-numeric: tabular-nums; white-space: nowrap; }
.oculto { display: none !important; }

:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================ estructura */

.app { min-height: 100dvh; display: flex; flex-direction: column; }

.contenido {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 1rem 16px calc(var(--nav-alto) + 2rem);
}

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .contenido { padding: 1.5rem 2rem 3rem; }
}

.encabezado {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.encabezado h1 { margin: 0; flex: 1; min-width: 0; }

/* ---- barra superior (solo celular) ---- */

.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 16px;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}
.barra .marca-logo { font-weight: 700; letter-spacing: -.02em; color: var(--tinta); }
.barra .tienda-nombre { font-size: .82rem; color: var(--tinta-2); }
.barra .crece { flex: 1; }

@media (min-width: 900px) { .barra { display: none; } }

/* ---- menu lateral (escritorio) ---- */

.lateral { display: none; }

@media (min-width: 900px) {
  .lateral {
    display: flex;
    flex-direction: column;
    width: 232px;
    flex: 0 0 232px;
    background: var(--papel);
    border-right: 1px solid var(--borde);
    padding: 1.1rem .7rem;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
  }
  .lateral .logo {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.03em;
    padding: 0 .55rem .2rem;
    color: var(--tinta);
  }
  .lateral .sub {
    font-size: .78rem;
    color: var(--tinta-2);
    padding: 0 .55rem 1rem;
  }
  .lateral a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .58rem .55rem;
    border-radius: var(--r-chico);
    color: var(--tinta);
    font-size: .93rem;
    font-weight: 500;
  }
  .lateral a:hover { background: var(--papel-2); text-decoration: none; }
  .lateral a.activo { background: var(--marca-suave); color: var(--marca-oscura); font-weight: 600; }
  .lateral .grupo {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-3);
    padding: 1rem .55rem .3rem;
    font-weight: 600;
  }
  .lateral .pie { margin-top: auto; padding-top: 1rem; }
}

/* ---- navegacion inferior (celular) ---- */

.nav-abajo {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--papel);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-abajo a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--nav-alto);
  font-size: .68rem;
  font-weight: 500;
  color: var(--tinta-2);
}
.nav-abajo a:hover { text-decoration: none; }
.nav-abajo a.activo { color: var(--marca); }
.nav-abajo svg { width: 22px; height: 22px; }
.nav-abajo .destacado span { color: var(--papel); }
.nav-abajo .destacado .burbuja {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-top: -14px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  box-shadow: var(--sombra-alta);
}
.nav-abajo .destacado .burbuja svg { width: 24px; height: 24px; }
.nav-abajo .destacado { font-size: .66rem; }

@media (min-width: 900px) { .nav-abajo { display: none; } }

/* ---- hoja de "Más" ---- */

.hoja[hidden] { display: none; }
.hoja {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 14, 20, .45);
  display: flex; align-items: flex-end;
}
.hoja > div {
  width: 100%;
  background: var(--papel);
  border-radius: var(--r-grande) var(--r-grande) 0 0;
  padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom));
  max-height: 80dvh; overflow-y: auto;
}
.hoja .rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.hoja .rejilla a {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .9rem .4rem; border-radius: var(--r);
  background: var(--papel-2); color: var(--tinta);
  font-size: .78rem; font-weight: 500; text-align: center;
}
.hoja .rejilla a:hover { text-decoration: none; }
.hoja svg { width: 22px; height: 22px; color: var(--tinta-2); }

/* ============================================================ tarjetas */

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 1rem;
  box-shadow: var(--sombra);
  margin-bottom: .85rem;
}
.tarjeta.ajustada { padding: .75rem; }
.tarjeta > :last-child { margin-bottom: 0; }

.tarjeta-titulo {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .7rem; font-size: .95rem; font-weight: 650;
}
.tarjeta-titulo .crece { flex: 1; }

.rejilla { display: grid; gap: .85rem; }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 720px) {
  .rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- numeros grandes del tablero ---- */

.dato {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: .85rem;
  box-shadow: var(--sombra);
  display: block;
  color: var(--tinta);
}
a.dato:hover { text-decoration: none; border-color: var(--borde-fuerte); }
.dato .etiqueta {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-2); font-weight: 600;
}
.dato .valor {
  /* Un monto de 8 digitos ("₲72.950.000") no entra a 1,6rem en un celular de 320px y,
     como .plata lleva nowrap, no corta: se sale de la tarjeta y empuja la pagina entera
     hacia el costado. El clamp lo achica solo en las pantallas donde no entra. */
  font-size: clamp(1.15rem, 5.2vw, 1.6rem);
  font-weight: 680; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: .15rem;
  min-width: 0;
}
.dato .pie { font-size: .78rem; color: var(--tinta-2); margin-top: .1rem; }
.dato.acento .valor { color: var(--marca); }
.dato.bien .valor { color: var(--verde); }
.dato.ojo .valor { color: var(--ambar); }
.dato.mal .valor { color: var(--rojo); }

/* ============================================================ listas */

.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { border-bottom: 1px solid var(--borde); }
.lista > li:last-child { border-bottom: 0; }

.item {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem .25rem; color: var(--tinta); width: 100%;
}
a.item:hover { text-decoration: none; background: var(--papel-2); }
.item .cuerpo { flex: 1; min-width: 0; }
.item .titulo { font-weight: 600; font-size: .95rem; }
.item .sub { font-size: .82rem; color: var(--tinta-2); }
.item .cola { text-align: right; flex-shrink: 0; }
.item .cola .principal { font-weight: 650; font-variant-numeric: tabular-nums; }

.avatar {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-chico);
  background: var(--papel-2);
  display: grid; place-items: center;
  font-weight: 650; font-size: .85rem; color: var(--tinta-2);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- tabla que en celular se vuelve lista ---- */

.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th {
  text-align: left; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-2); font-weight: 650;
  padding: .5rem .6rem; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: .62rem .6rem; border-bottom: 1px solid var(--borde); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tfoot td { font-weight: 650; border-top: 2px solid var(--borde-fuerte); }

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; }

/* ---- pares dato/valor ----
 *
 * Para las fichas: IMEI, proveedor, días en stock. NO usar "tabla apilable" para esto:
 * esa clase esconde el encabezado solo en celular, así que una tabla sin <thead> se
 * queda sin etiquetas en la computadora y quedan números sueltos sin decir qué son.
 * Acá la etiqueta está siempre, en las dos pantallas.
 */
.datos { display: grid; gap: 0 2rem; margin: 0; }
.datos > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--borde); min-width: 0;
}
.datos dt { color: var(--tinta-2); font-size: .85rem; font-weight: 500; flex-shrink: 0; }
.datos dd { margin: 0; text-align: right; font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.datos dd .chico { font-weight: 400; display: block; }

@media (min-width: 720px) {
  .datos { grid-template-columns: 1fr 1fr; }
  /* Con dos columnas, las dos últimas filas son las de abajo de todo. */
  .datos > div:nth-last-child(-n+2):nth-child(odd),
  .datos > div:nth-last-child(-n+2):nth-child(odd) + div { border-bottom: 0; }
}
@media (max-width: 719px) {
  .datos > div:last-child { border-bottom: 0; }
}

/* ---- volver ---- */

.miga {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-bottom: .7rem; padding: .35rem .6rem .35rem .35rem;
  border-radius: var(--r-chico);
  font-size: .88rem; font-weight: 550; color: var(--tinta-2);
}
.miga:hover { background: var(--papel-2); color: var(--tinta); text-decoration: none; }

@media (max-width: 719px) {
  .tabla.apilable thead { display: none; }
  .tabla.apilable tr {
    display: block; padding: .7rem 0; border-bottom: 1px solid var(--borde);
  }
  .tabla.apilable td {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .18rem 0; border: 0; text-align: right;
  }
  .tabla.apilable td::before {
    content: attr(data-etiqueta);
    font-size: .8rem; color: var(--tinta-2); text-align: left; font-weight: 500;
  }
  .tabla.apilable td.principal { font-weight: 650; font-size: 1rem; }
  .tabla.apilable td.principal::before { font-weight: 500; }
}

/* ============================================================ formularios */

.campo { margin-bottom: .9rem; }
.campo > label, .etiqueta-campo {
  display: block; font-size: .85rem; font-weight: 600;
  margin-bottom: .3rem; color: var(--tinta);
}
.campo .ayuda { font-size: .78rem; color: var(--tinta-2); margin-top: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], input[type=search], input[type=url],
select, textarea {
  width: 100%;
  min-height: 46px;
  padding: .6rem .7rem;
  font: inherit;
  font-size: 16px; /* menos de 16 hace que iOS haga zoom al enfocar */
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-chico);
  appearance: none;
}
textarea { min-height: 80px; resize: vertical; }

select {
  /* El desplegable nativo no hereda el fondo: con fondo transparente en modo
     oscuro el texto queda ilegible. Siempre fondo explicito. */
  background-color: var(--papel);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237a879b' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  padding-right: 2rem;
}
select option { background: var(--papel); color: var(--tinta); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-suave);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  background: var(--papel-2); color: var(--tinta-2); cursor: not-allowed;
}
input.error, select.error, textarea.error { border-color: var(--rojo); }

.fila { display: flex; gap: .6rem; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 140px; }
.fila.pegada > * { min-width: 0; }

/* ---- chips que reemplazan desplegables cortos ---- */

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips input[type=radio], .chips input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.chips label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem .85rem;
  border: 1px solid var(--borde-fuerte); border-radius: 999px;
  background: var(--papel); font-size: .9rem; font-weight: 550;
  cursor: pointer; user-select: none;
}
.chips input:checked + label {
  background: var(--marca); border-color: var(--marca); color: #fff;
}
.chips input:focus-visible + label { outline: 3px solid var(--marca); outline-offset: 2px; }

/* ---- teclado numerico del PIN ---- */

.teclado {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  max-width: 300px; margin: 0 auto;
}
.teclado button {
  min-height: 62px; font-size: 1.4rem; font-weight: 600;
  border-radius: var(--r); border: 1px solid var(--borde-fuerte);
  background: var(--papel); color: var(--tinta); cursor: pointer;
}
.teclado button:active { background: var(--papel-2); }
.puntos { display: flex; gap: .7rem; justify-content: center; margin: 1.2rem 0; }
.puntos i {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--borde-fuerte); background: transparent;
}
.puntos i.lleno { background: var(--marca); border-color: var(--marca); }

/* ============================================================ botones */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 46px; padding: .6rem 1.1rem;
  font: inherit; font-size: .95rem; font-weight: 600;
  border-radius: var(--r-chico); border: 1px solid transparent;
  background: var(--papel); color: var(--tinta);
  border-color: var(--borde-fuerte);
  cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; background: var(--papel-2); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }

.btn.principal { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.principal:hover { background: var(--marca-oscura); border-color: var(--marca-oscura); }
.btn.peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn.peligro:hover { filter: brightness(.93); }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--marca); }
.btn.fantasma:hover { background: var(--marca-suave); }
.btn.ancho { width: 100%; }
.btn.grande { min-height: 56px; font-size: 1.05rem; }
.btn.chico { min-height: 38px; padding: .35rem .7rem; font-size: .85rem; }

.acciones { display: flex; gap: .55rem; flex-wrap: wrap; }
.acciones.fin { justify-content: flex-end; }

/* ============================================================ senales */

.etiqueta {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .76rem; font-weight: 650; white-space: nowrap;
  background: var(--papel-2); color: var(--tinta-2);
}
.etiqueta.verde { background: var(--verde-suave); color: var(--verde); }
.etiqueta.ambar { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta.roja { background: var(--rojo-suave); color: var(--rojo); }
.etiqueta.azul { background: var(--marca-suave); color: var(--marca-oscura); }

.aviso {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .75rem .9rem; border-radius: var(--r-chico);
  border: 1px solid var(--borde); background: var(--papel-2);
  font-size: .9rem; margin-bottom: .85rem;
}
.aviso.bien { background: var(--verde-suave); border-color: transparent; color: var(--verde); }
.aviso.ojo { background: var(--ambar-suave); border-color: transparent; color: var(--ambar); }
.aviso.mal { background: var(--rojo-suave); border-color: transparent; color: var(--rojo); }
.aviso svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.aviso .crece { flex: 1; }

/* semaforo de margen para el vendedor que no ve la ganancia */
.semaforo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; }
.semaforo::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--tinta-3); }
.semaforo.verde { color: var(--verde); }
.semaforo.verde::before { background: var(--verde); }
.semaforo.amarillo { color: var(--ambar); }
.semaforo.amarillo::before { background: var(--ambar); }
.semaforo.rojo { color: var(--rojo); }
.semaforo.rojo::before { background: var(--rojo); }

.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--tinta-2); }
.vacio svg { width: 40px; height: 40px; opacity: .4; margin-bottom: .6rem; }
.vacio p { margin-bottom: 1rem; }

/* ============================================================ resumen fijo */

/* La barra de Vender: siempre visible, con el total y la ganancia. */
.resumen-fijo {
  position: sticky; bottom: var(--nav-alto); z-index: 20;
  margin: 1rem -16px 0;
  padding: .85rem 16px calc(.85rem + env(safe-area-inset-bottom));
  background: var(--papel);
  border-top: 1px solid var(--borde-fuerte);
  box-shadow: 0 -4px 16px rgba(16, 21, 31, .08);
}
.resumen-fijo .lineas { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.resumen-fijo .total { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (min-width: 900px) {
  .resumen-fijo { bottom: 0; margin-left: 0; margin-right: 0; border-radius: var(--r) var(--r) 0 0; }
}

/* ============================================================ buscador */

.buscador { position: relative; margin-bottom: .85rem; }
.buscador input { padding-left: 2.4rem; }
.buscador svg {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--tinta-3); pointer-events: none;
}

.filtros { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .85rem; }
.filtros::-webkit-scrollbar { display: none; }
.filtros a {
  flex-shrink: 0; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--borde-fuerte); background: var(--papel);
  font-size: .85rem; font-weight: 550; color: var(--tinta);
}
.filtros a:hover { text-decoration: none; }
.filtros a.activo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* ============================================================ login */

.pantalla-centro {
  min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem 16px;
}
.caja-login {
  width: 100%; max-width: 380px;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--r-grande); padding: 1.6rem; box-shadow: var(--sombra-alta);
}
.caja-login .logo { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; text-align: center; }
.caja-login .bajada { text-align: center; color: var(--tinta-2); font-size: .88rem; margin-bottom: 1.4rem; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 48px; font-size: .95rem; font-weight: 600;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-chico); cursor: pointer;
}
.btn-google:hover { background: var(--papel-2); text-decoration: none; }

.separador { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; color: var(--tinta-3); font-size: .8rem; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--borde); }

.personas { display: grid; gap: .5rem; }
.persona {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem; border-radius: var(--r);
  border: 1px solid var(--borde-fuerte); background: var(--papel);
  color: var(--tinta); font-weight: 600; cursor: pointer; width: 100%; text-align: left;
  font-size: .95rem; min-height: 56px;
}
.persona:hover { background: var(--papel-2); text-decoration: none; }

/* ============================================================ imprimir */

@media print {
  .barra, .lateral, .nav-abajo, .acciones, .resumen-fijo, .filtros { display: none !important; }
  body { background: #fff; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* ============================================================ movimiento */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}