/* ============================================================================
   Alio · La app recreada en HTML/CSS
   ----------------------------------------------------------------------------
   Por qué no son capturas de pantalla:
     1. El vuelo termina con la pantalla ocupando el alto completo del viewport.
        Un PNG de 431 px se vería pixelado justo donde el usuario se detiene.
     2. Al final de la sección el contenido se desliza a Transacciones: con
        nodos reales, la barra de estado, la de pestañas y la del sistema se
        quedan quietas —como en el teléfono— y solo viaja el contenido. Con
        capturas habría que recortar cada imagen y aun así la barra saltaría.
     3. Pesa menos y se adapta a cualquier densidad de pantalla.

   Todo se maqueta a 400 × 900 px y se reduce con una sola escala externa.
   Los colores salen de app/src/utils/palette.ts (paleta clara).
   ========================================================================== */

.home-fit {
  width: 400px;
  height: 900px;
  overflow: hidden;
}

.home {
  width: 400px;
  height: 900px;
  transform-origin: top left;
  background: var(--p-bg);
  color: var(--p-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
}

/* --- Carril de pestañas ---------------------------------------------------
   Lo único que se desplaza es este carril; el resto del teléfono no se mueve,
   igual que al deslizar entre pestañas en la app real.
   ------------------------------------------------------------------------ */

.app__viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app__track {
  display: flex;
  height: 100%;
  width: max-content;
  transform: translateX(calc(var(--screen-pos, 0) * -400px));
}

.pane {
  position: relative;
  width: 400px;
  height: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
}

/* --- Barra de estado ------------------------------------------------------ */

.hs-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--p-text);
}

.hs-status__icons {
  display: flex;
  gap: 5px;
  align-items: center;
  opacity: 0.75;
}

.hs-status__icons i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: currentColor;
}

.hs-status__icons i:nth-child(2) {
  height: 11px;
}
.hs-status__icons i:nth-child(3) {
  width: 14px;
  height: 8px;
}

/* --- Contenido de una pestaña ---------------------------------------------
   `overflow: hidden` porque la lista de Transacciones sigue por debajo del
   corte, igual que en el teléfono: se recorta contra la barra de pestañas
   en vez de derramarse por encima.
   ------------------------------------------------------------------------ */

.hs-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 5px 15px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Títulos de pantalla -------------------------------------------------- */

.hs-hello {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.hs-hello--brand {
  color: var(--p-slate);
  font-size: 23px;
}

/* --- Saldo disponible · centrado, como en la app -------------------------- */

.hs-balance {
  text-align: center;
  padding: 2px 0;
}

.hs-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-sub);
}

.hs-info {
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 8px;
  font-weight: 700;
  font-style: normal;
  opacity: 0.75;
}

.hs-totals {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
  margin-top: 7px;
}

.hs-total__value {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.hs-total__unit {
  margin-top: 1px;
  font-size: 11px;
  color: var(--p-sub);
}

/* --- La fila de cuentas ---------------------------------------------------
   Sustituye a los chips de cuenta y a la leyenda que explicaba su gesto
   invisible (opción E). El Home responde «cuánto tengo»; «dónde lo tengo» es
   la pregunta de la pantalla de Cuentas, que es la dueña del detalle.
   ------------------------------------------------------------------------ */

.hs-cuentas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  font-size: 12.5px;
  font-weight: 500;
}

.hs-cuentas__izq {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hs-cuentas__ir {
  color: var(--p-sub);
}

/* --- Chips de filtro ------------------------------------------------------
   Siguen vivos, pero YA NO son de cuenta: los del Home se retiraron con la
   opción E. Los que quedan son los de TIPO DE MOVIMIENTO de la pestaña
   Transacciones (Todos · Ingresos · Gastos · Ahorro/Inv.), que es otra cosa.
   Por eso desapareció `--wide`, que era el «Ver todas» de las cuentas.
   ------------------------------------------------------------------------ */

.hs-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.hs-filter {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.hs-filter--on {
  border-color: var(--p-slate);
  background: var(--p-slate-soft);
  color: var(--p-slate);
  font-weight: 600;
}

/* --- Tarjetas ------------------------------------------------------------- */

.hs-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 16px;
  padding: 13px;
}

.hs-card__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-sub);
}

.hs-card__title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Tasas de cambio */

.hs-rates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.hs-rate {
  padding: 8px 5px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid transparent;
}

.hs-rate--on {
  border-color: var(--p-slate);
  background: var(--p-slate-soft);
}

.hs-rate__name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--p-sub);
}

.hs-rate--on .hs-rate__name {
  color: var(--p-slate);
}

.hs-rate__value {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hs-rate--on .hs-rate__value {
  color: var(--p-slate);
}

.hs-rates__note {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--p-sub);
  text-align: center;
}

/* Balance */

.hs-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hs-card .hs-selects {
  margin-top: 10px;
}

.hs-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  font-size: 12.5px;
  font-weight: 500;
}

.hs-select--wide {
  width: 100%;
}

.hs-select svg {
  flex: none;
  opacity: 0.55;
}

.hs-caption {
  font-size: 11px;
  color: var(--p-sub);
  line-height: 1.4;
}

.hs-card .hs-caption {
  margin-top: 10px;
}

.hs-bars {
  margin-top: 7px;
  display: grid;
  gap: 8px;
}

.hs-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 500;
}

.hs-bar__amount {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hs-bar__track {
  margin-top: 5px;
  height: 8px;
  border-radius: 999px;
  background: var(--p-slate-soft);
  overflow: hidden;
}

.hs-bar__fill {
  height: 100%;
  border-radius: 999px;
  transform: scaleX(var(--w, 1));
  transform-origin: left center;
}

.hs-bar--in .hs-bar__amount {
  color: var(--sem-in);
}
.hs-bar--in .hs-bar__fill {
  background: var(--sem-in);
}

.hs-bar--out .hs-bar__amount {
  color: var(--sem-out);
}
.hs-bar--out .hs-bar__fill {
  background: var(--sem-out);
}

.hs-bar--net .hs-bar__amount {
  color: var(--p-slate);
}
.hs-bar--net .hs-bar__fill {
  background: var(--p-slate);
}

/* Recomendaciones */

.hs-reco {
  display: flex;
  gap: 9px;
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--p-sub);
  line-height: 1.4;
}

.hs-reco svg {
  flex: none;
  margin-top: 1px;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Pestaña · Transacciones
   ------------------------------------------------------------------------ */

.hs-seg {
  display: grid;
  gap: 8px;
}

.hs-seg--2 {
  grid-template-columns: 1fr 1fr;
}

.hs-seg--3 {
  grid-template-columns: repeat(3, 1fr);
}

.hs-seg__opt {
  padding: 11px 6px;
  border-radius: 12px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}

.hs-seg__opt--on {
  border-color: var(--p-slate);
  background: var(--p-slate-soft);
  color: var(--p-slate);
  font-weight: 600;
}

.hs-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  color: var(--p-sub);
  font-size: 13px;
}

/* Gráfico de ingresos vs. gastos */

.chart {
  display: flex;
  gap: 8px;
  margin-top: 11px;
  height: 96px;
}

.chart__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 9px;
  color: var(--p-sub);
  font-variant-numeric: tabular-nums;
}

.chart__plot {
  position: relative;
  flex: 1;
}

.chart__grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--p-border);
}

.chart__grid:nth-child(1) {
  top: 4px;
}
.chart__grid:nth-child(2) {
  top: 50%;
}
.chart__grid:nth-child(3) {
  bottom: 0;
}

.chart__cols {
  position: absolute;
  inset: 4px 0 0;
  display: flex;
  align-items: flex-end;
}

.chart__col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.chart__bar {
  display: block;
  width: 7px;
  height: var(--h);
  border-radius: 2px 2px 0 0;
}

.chart__bar--in {
  background: var(--sem-in);
}
.chart__bar--out {
  background: var(--sem-out);
}

.chart__x {
  display: flex;
  margin-top: 5px;
  padding-left: 34px;
  font-size: 8px;
  color: var(--p-sub);
}

.chart__x span {
  flex: 1;
  text-align: center;
}

.chart__legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 9px;
  font-size: 10.5px;
  color: var(--p-sub);
  font-variant-numeric: tabular-nums;
}

.chart__legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
}

/* Lista de movimientos */

.tx-list {
  display: grid;
  gap: 8px;
}

.tx {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
}

.tx__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* El gasto va en ARCILLA, no en rojo: un mes en negativo es un hecho, no un
   error. El rojo del sistema queda para los fallos técnicos y nada más. */
.tx__icon--out {
  background: rgba(168, 91, 69, 0.14);
  color: var(--sem-out);
}

.tx__icon--in {
  background: rgba(46, 125, 91, 0.14);
  color: var(--sem-in);
}

.tx__body {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.tx__name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx__meta {
  font-size: 10.5px;
  color: var(--p-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx__amt {
  display: grid;
  justify-items: end;
  gap: 1px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La equivalencia va debajo, en gris: el importe manda, la conversión asiste */
.tx__amt em {
  font-size: 10.5px;
  font-weight: 500;
  font-style: normal;
  color: var(--p-sub);
}

.tx__amt--out {
  color: var(--sem-out);
}
.tx__amt--in {
  color: var(--sem-in);
}

/* ---------------------------------------------------------------------------
   Botones flotantes
   ------------------------------------------------------------------------ */

.hs-fabs {
  position: absolute;
  right: 17px;
  bottom: 14px;
  display: grid;
  gap: 11px;
  justify-items: center;
}

.hs-fab {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(27, 29, 42, 0.22);
}

.hs-fab--ai {
  width: 44px;
  height: 44px;
  background: var(--p-slate);
  color: #fff;
}

/* El SVG necesita medida explícita: sin `width`/`height` un <svg> con solo
   `viewBox` se estira hasta el tamaño por defecto del navegador, que es
   enorme. Las pestañas ya la tenían en CSS y por eso no se notó ahí.
   La proporción sale de la app (utils/fab.ts): FAB de 50 con ícono de 22, o
   sea 44 % — sobre los 44 px de aquí, 19. */
.hs-fab--ai svg {
  width: 19px;
  height: 19px;
}

.hs-fab--add svg {
  width: 25px;
  height: 25px;
}

/* El candado de PREMIUM, no un punto de aviso: el botón de IA está bloqueado
   en el plan gratuito, y un punto de color se lee como «tienes algo nuevo».
   Va en latón porque el candado de plan es el otro uso legítimo del acento. */
.hs-fab--ai::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--p-brass);
  border: 2px solid var(--p-bg);
  /* El arco y el cuerpo del candado, dibujados con un degradado cónico sería
     frágil: se hace con una máscara SVG en línea, que escala con el círculo. */
  /* El trazo es el `lock-closed` de Ionicons, extraído del propio TTF que
     usa la app: es literalmente el mismo candado que dibuja AlioAiFab. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M240.0%2023.0Q264.0%2019.0%20287.0%2027.0Q338.0%2045.0%20350.0%2099.0Q352.0%20106.0%20352.0%20152.0L353.0%20198.0H366.0Q384.0%20199.0%20396.0%20204.0Q420.0%20216.0%20429.0%20244.0L431.0%20250.0L432.0%20347.0Q432.0%20430.0%20431.0%20442.5Q430.0%20455.0%20425.0%20466.0Q416.0%20486.0%20396.0%20495.0Q385.0%20500.0%20371.0%20501.0Q357.0%20502.0%20256.0%20502.0Q155.0%20502.0%20141.0%20501.0Q127.0%20500.0%20116.0%20495.0Q96.0%20486.0%2087.0%20466.0Q82.0%20455.0%2081.0%20442.5Q80.0%20430.0%2080.0%20347.0L81.0%20250.0L83.0%20244.0Q92.0%20216.0%20116.0%20204.0Q128.0%20199.0%20146.0%20198.0H159.0L160.0%20152.0Q160.0%20106.0%20162.0%2099.0Q165.0%2086.0%20171.0%2074.0Q181.0%2055.0%20199.5%2041.0Q218.0%2027.0%20240.0%2023.0ZM271.0%2056.0Q271.0%2056.0%20271.0%2056.0Q234.0%2048.0%20208.0%2076.0Q203.0%2081.0%20199.0%2089.0Q194.0%20100.0%20193.0%20107.0Q192.0%20114.0%20192.0%20153.0Q192.0%20153.0%20192.0%20198.0H256.0H320.0V153.0Q320.0%20114.0%20319.0%20106.5Q318.0%2099.0%20313.0%2089.0Q299.0%2062.0%20271.0%2056.0Z'/%3E%3C/svg%3E") center / 60% no-repeat,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M240.0%2023.0Q264.0%2019.0%20287.0%2027.0Q338.0%2045.0%20350.0%2099.0Q352.0%20106.0%20352.0%20152.0L353.0%20198.0H366.0Q384.0%20199.0%20396.0%20204.0Q420.0%20216.0%20429.0%20244.0L431.0%20250.0L432.0%20347.0Q432.0%20430.0%20431.0%20442.5Q430.0%20455.0%20425.0%20466.0Q416.0%20486.0%20396.0%20495.0Q385.0%20500.0%20371.0%20501.0Q357.0%20502.0%20256.0%20502.0Q155.0%20502.0%20141.0%20501.0Q127.0%20500.0%20116.0%20495.0Q96.0%20486.0%2087.0%20466.0Q82.0%20455.0%2081.0%20442.5Q80.0%20430.0%2080.0%20347.0L81.0%20250.0L83.0%20244.0Q92.0%20216.0%20116.0%20204.0Q128.0%20199.0%20146.0%20198.0H159.0L160.0%20152.0Q160.0%20106.0%20162.0%2099.0Q165.0%2086.0%20171.0%2074.0Q181.0%2055.0%20199.5%2041.0Q218.0%2027.0%20240.0%2023.0ZM271.0%2056.0Q271.0%2056.0%20271.0%2056.0Q234.0%2048.0%20208.0%2076.0Q203.0%2081.0%20199.0%2089.0Q194.0%20100.0%20193.0%20107.0Q192.0%20114.0%20192.0%20153.0Q192.0%20153.0%20192.0%20198.0H256.0H320.0V153.0Q320.0%20114.0%20319.0%20106.5Q318.0%2099.0%20313.0%2089.0Q299.0%2062.0%20271.0%2056.0Z'/%3E%3C/svg%3E") center / 60% no-repeat,
    linear-gradient(#000, #000);
  mask-composite: exclude;
}

.hs-fab--add {
  /* La acción principal de la app es la PIZARRA en relleno sólido. El latón
     no es una acción: es la celebración de un logro. */
  width: 52px;
  height: 52px;
  background: var(--p-slate);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Barra de pestañas · persistente; la activa la marca data-tab en .home
   ------------------------------------------------------------------------ */

.hs-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 9px 4px 10px;
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
}

.hs-tab {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--p-sub);
  transition: color 0.35s ease;
}

.hs-tab svg {
  width: 19px;
  height: 19px;
}

/* Indicador sobre la pestaña activa */
.hs-tab::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  translate: -50% 0;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background-color 0.35s ease;
}

.home[data-tab="0"] .hs-tab:nth-child(1),
.home[data-tab="1"] .hs-tab:nth-child(2),
.home[data-tab="2"] .hs-tab:nth-child(3),
.home[data-tab="3"] .hs-tab:nth-child(4),
.home[data-tab="4"] .hs-tab:nth-child(5),
.home[data-tab="5"] .hs-tab:nth-child(6) {
  color: var(--p-slate);
  font-weight: 600;
}

.home[data-tab="0"] .hs-tab:nth-child(1)::before,
.home[data-tab="1"] .hs-tab:nth-child(2)::before,
.home[data-tab="2"] .hs-tab:nth-child(3)::before,
.home[data-tab="3"] .hs-tab:nth-child(4)::before,
.home[data-tab="4"] .hs-tab:nth-child(5)::before,
.home[data-tab="5"] .hs-tab:nth-child(6)::before {
  background: var(--p-slate);
}

/* Barra de navegación del sistema (Android) — la app ya no la oculta */
.hs-navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 62px;
  height: 26px;
  /* Blanca, igual que la de pestañas: en el teléfono real ya no hay franja gris
     separando las dos. Se conserva un filete finísimo porque sin él las dos
     barras se funden en un bloque de 60 px sin estructura. */
  background: var(--p-surface);
  border-top: 1px solid rgba(23, 28, 34, 0.05);
}

.hs-navbar span {
  width: 11px;
  height: 11px;
  opacity: 0.55;
  background: #5c6773;
}

/* El orden del Redmi, de izquierda a derecha: cuadrado · círculo · atrás. */
.hs-nav__cuadro {
  border-radius: 2px;
}
.hs-nav__circulo {
  border-radius: 50%;
}
.hs-nav__atras {
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* --- Presupuestos del mes -------------------------------------------------
   Debajo de Recomendaciones. Es la sección que deja ver cómo va el gasto del
   mes por categoría, así que su barra tiene que poder estar en cero sin
   parecer rota — de ahí el carril siempre visible.
   ------------------------------------------------------------------------ */

.hs-presu {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.hs-presu__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}

.hs-presu__fila span {
  font-weight: 500;
}

.hs-presu__fila b {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--p-sub);
}

.hs-barra {
  height: 7px;
  border-radius: 999px;
  background: var(--p-border);
  overflow: hidden;
}

.hs-barra i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--p-slate);
}

.hs-card__ico {
  color: var(--p-sub);
  margin-right: 2px;
  vertical-align: -2px;
}

/* La pestaña abierta se distingue por TINTA, no por fondo: en la app real la
   barra es blanca de punta a punta. */
.hs-tab--on {
  color: var(--p-slate-deep);
  font-weight: 600;
}