/* La portada: la escena del Resumen (calca el bento de Hero.jsx, la curva
   de MonthlyChart, la tarjeta oscura y la duda de Kaperu de src/index.css) y
   la rejilla de secciones. */

/* ── La escena ────────────────────────────────────────────────────────── */
.hm-scene { position: absolute; inset: 0; }
.hm-head-tools { display: flex; align-items: center; gap: 10px; }
.hm-year { font-size: var(--t-sm); font-weight: 600; color: var(--text); padding: 0 6px; }
/* El selector de periodo: cápsula con la píldora gris que se desliza */
.hm-period { position: relative; display: inline-flex; align-items: center; padding: 3px; border-radius: var(--radius-pill); background: var(--control-fill); }
.hm-period button { position: relative; z-index: 1; height: 24px; padding: 0 11px; border: none; border-radius: var(--radius-pill); background: none; color: var(--text-muted); font-size: var(--t-sm); font-weight: 500; cursor: pointer; transition: color var(--spring-fast); }
.hm-period button:is(:hover, [data-hover]) { color: var(--text); }
.hm-period button.active { color: var(--text); font-weight: 600; }
.hm-period .divider { width: 1px; height: 12px; margin: 0 2px; background: var(--border-strong); }
.hm-period .seg-pill { position: absolute; top: 3px; left: 0; height: 24px; border-radius: var(--radius-pill); background: var(--surface-hover); transition: transform var(--spring-moderate), width var(--spring-moderate); }
.hm-mperiod { margin: -4px 0 12px; }
.hm-mperiod .hm-period { display: flex; }
.hm-mperiod .hm-period button { flex: 1; height: 32px; }
.hm-mperiod .hm-period .seg-pill { height: 32px; }

/* El bento (Hero.jsx): a lo ancho, la cifra grande en tinta con sus partes
   y la curva; al lado, la tarjeta destacada (--statement-*). */
.hm-bento { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: stretch; gap: 12px; }
.hm-card { min-width: 0; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface); }
.hm-hero { display: flex; flex-direction: column; }
.hm-label { font-size: var(--t-sm); font-weight: 500; color: var(--text-muted); }
.hm-hero-value { margin-top: 4px; font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.hm-stats { display: flex; gap: 32px; margin-top: 14px; }
.hm-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hm-stat-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--text-muted); }
.hm-stat-value { font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
/* Cada cifra con su color de siempre */
.hm-hero-value.hm-tone--income { color: var(--green); }
.hm-st-value.hm-tone--irpf { color: var(--red); }
/* Ingresos y gastos bajo el neto: en tinta, con el punto de su color */
.hm-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.hm-dot--income { background: var(--green); }
.hm-dot--expense { background: var(--red); }
.hm-st-value.hm-tone--vat { color: var(--yellow); }
/* La curva del año: con un trimestre se pliega (alto a cero y fundido). */
.hm-curve-wrap { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows var(--spring-slow), opacity var(--spring-slow); }
.hm-bento--quarter .hm-curve-wrap { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--spring-slow), opacity var(--spring-moderate-exit); }
.hm-curve { position: relative; min-height: 0; overflow: hidden; padding-top: 14px; }
.hm-curve-svg { display: block; width: 100%; height: 112px; }
.hm-curve-dot { position: absolute; width: 8px; height: 8px; margin: 10px 0 0 -4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--surface); transform: translateY(-50%); }
.hm-months { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--t-xs); color: var(--text-subtle); }
.hm-months .is-future { opacity: 0.5; }
.hm-bar { display: block; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 12%, transparent); }

/* La tarjeta oscura: casi negra en claro, del gris de las demás en oscuro.
   Lo del año y lo del trimestre comparten celda y se cruzan. */
.hm-statement { display: grid; grid-template-rows: 1fr 0fr; align-content: start; min-width: 0; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--statement-bg); color: var(--statement-text); --text: var(--statement-text); transition: grid-template-rows var(--spring-slow); }
.hm-bento--quarter .hm-statement { grid-template-rows: 0fr 1fr; }
/* Cada vista en su fila: la que se va se pliega y se funde, la otra se abre,
   y la tarjeta mide lo que mide la que se ve. */
.hm-st-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; transition: opacity var(--spring-slow); }
.hm-st-view--quarter, .hm-bento--quarter .hm-st-view--year { opacity: 0; pointer-events: none; transition-duration: 0.18s; }
.hm-bento--quarter .hm-st-view--quarter { opacity: 1; pointer-events: auto; transition-delay: 0.1s; }
.hm-st-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--statement-muted); }
.hm-st-value { margin-top: 4px; font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--statement-text); white-space: nowrap; }
.hm-st-hint { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 2px; }
.hm-st-hint .hm-bar, .hm-st-row .hm-bar { background: color-mix(in srgb, var(--statement-text) 16%, transparent); }
.hm-st-section { margin-top: 14px; font-size: var(--t-xs); color: var(--statement-muted); }
.hm-st-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 0.5px solid var(--statement-line); font-size: var(--t-sm); }
.hm-st-row:first-of-type { margin-top: 6px; }
.hm-st-row-title { color: var(--statement-text); }
.hm-st-row-sub { color: var(--statement-muted); }
.hm-st-rule { height: 0.5px; margin: 14px 0; background: var(--statement-line); }

/* Debajo, lo que sigue en la página: el IVA del año en sus cuatro casillas
   o las facturas del trimestre, una se va y la otra llega. */
.hm-lower-wrap { position: relative; margin-top: 12px; display: grid; }
.hm-lower { grid-area: 1 / 1; transition: opacity var(--spring-slow), transform var(--spring-slow); }
.hm-lower-wrap .hm-list, .hm-lower-wrap--quarter .hm-iva { opacity: 0; transform: translateY(6px); pointer-events: none; transition-duration: 0.18s; }
.hm-lower-wrap--quarter .hm-list { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.1s; }
.hm-card-title { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.hm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.hm-tile { display: flex; flex-direction: column; gap: 22px; padding: 10px 12px 12px; border-radius: var(--radius); background: var(--control-fill); }
.hm-tile-q { font-size: var(--t-xs); color: var(--text-muted); }
.hm-tile .hm-tile-bar { height: 8px; background: color-mix(in srgb, var(--yellow) 55%, transparent); }
.hm-list { display: flex; flex-direction: column; }
.hm-list .hm-card-title { margin-bottom: 6px; }
.hm-list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; font-size: var(--t-base); }
.hm-list-client { color: var(--text); }
.hm-list-end { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* En el iPhone, una sola pieza tras otra: la cifra grande sin curva (como
   en la app) y debajo la tarjeta oscura. */
.phone .hm-bento { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.phone .hm-card, .phone .hm-statement { padding: 16px; }
.phone .hm-hero-value { font-size: 40px; }
.phone .hm-st-value { font-size: var(--t-2xl); }
.phone .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phone .hm-lower-wrap { margin-top: 10px; }

/* Kaperu: la carita abajo a la derecha y la duda encima, sin abrir el panel */
.hm-kaperu { position: absolute; right: 24px; bottom: 22px; z-index: 6; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; transition: filter var(--spring-fast); }
.stage[data-layout="compact"] .hm-kaperu { right: 30px; bottom: 26px; }
.hm-kaperu .bot-face { --bot-face: var(--brand); --bot-eye: #0c0c0d; display: block; overflow: visible; }
.hm-kaperu:is(:hover, [data-hover]) { filter: brightness(1.06); }
.bot-face-bg { fill: var(--bot-face); }
.bot-eyes { transition: opacity 0.24s ease; }
.bot-eyes--happy { opacity: 0; }
.bot-face--happy .bot-eyes--open { opacity: 0; }
.bot-face--happy .bot-eyes--happy { opacity: 1; }
.bot-eye { fill: var(--bot-eye); transform-box: fill-box; transform-origin: center; animation: hm-blink 5.2s ease-in-out infinite; }
.bot-line { fill: none; stroke: var(--bot-eye); stroke-width: 2.4; stroke-linecap: round; }
@keyframes hm-blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(0.1); } }
.hm-doubt {
  position: absolute; right: 24px; bottom: 80px; z-index: 6;
  width: min(290px, calc(100% - 48px));
  display: flex; flex-direction: column;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--sat-shadow);
  transform-origin: bottom right; transform: translateY(6px) scale(0.96); opacity: 0; pointer-events: none;
  transition: transform var(--spring-moderate-exit), opacity var(--spring-moderate-exit);
}
.hm-doubt.open { transform: none; opacity: 1; pointer-events: auto; transition: transform var(--spring-slow), opacity var(--spring-slow); }
.stage[data-layout="compact"] .hm-doubt { right: 30px; bottom: 88px; width: min(280px, calc(100% - 60px)); }
.hm-doubt-text { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.4; color: var(--text); }
.stage[data-layout="compact"] .hm-doubt-text { font-size: 14.4px; }
.hm-doubt-title { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.hm-doubt-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hm-doubt-btn { height: 26px; padding: 0 11px; border: none; border-radius: var(--radius-pill); background: var(--control-fill); color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: background var(--spring-fast), color var(--spring-fast); }
.hm-doubt-btn:is(:hover, [data-hover]) { background: var(--control-fill-hover); color: var(--text); }
.hm-doubt-later { margin-left: auto; }

/* ── La rejilla de secciones ──────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 36px; }
.tile {
  display: flex; flex-direction: column; gap: 12px;
  padding: 8px 8px 14px;
  border-radius: var(--radius-xl);
  color: inherit; text-decoration: none;
  transition: background var(--spring-fast);
}
.tile:hover { background: var(--surface-hover); text-decoration: none; }
.tile--wide { grid-column: span 2; }
.tile-pic { display: block; position: relative; height: 150px; overflow: hidden; border-radius: var(--radius-lg); background: var(--stage-ground); }
.tile-copy { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.tile-title { font-size: var(--fs-subtitle); font-weight: 600; color: var(--text); }
.tile-desc { font-size: var(--fs-body); line-height: 1.5; color: var(--text-muted); }
@media (max-width: 720px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile--wide { grid-column: span 2; }
  .tile-pic { height: 128px; }
}
@media (max-width: 400px) {
  .tile { padding: 4px 4px 10px; }
  .tile-copy { padding: 0 4px; }
}


/* Los dibujos: piezas de la app sobre el suelo de la escena, con la letra
   del móvil y pocas palabras */
.pic { position: absolute; font-size: 13px; color: var(--text); }
.pic-bar { display: block; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.pic-bar--strong { height: 8px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.pic-rows { left: 20px; right: 20px; top: 22px; display: flex; flex-direction: column; gap: 6px; }
.pic-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 14px; background: var(--surface); }
.pic-row:nth-child(3) { opacity: 0.55; }
.pic-row-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pic-row-end { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pic-figure { left: 18px; right: 18px; top: 18px; bottom: -16px; padding: 14px 16px; border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.pic-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.pic-big { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pic-yellow { color: var(--yellow); }
.pic-red { color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }
.pic-dots { display: flex; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }
.pic-dotq { display: inline-flex; align-items: center; gap: 5px; }
.pic-qdot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.pic-qdot.on { background: var(--green); }
.pic-bars { left: 18px; right: 18px; top: 18px; bottom: -16px; padding: 14px 16px; border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.pic-bars-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; white-space: nowrap; }
.pic-meter { display: block; height: 4px; margin-bottom: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.pic-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--red); }
.pic-kanban { left: 18px; right: 18px; top: 20px; display: flex; flex-direction: column; gap: 8px; }
.pic-kcard { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px; border-radius: 14px; background: var(--surface); }
.pic-kcard--b { margin-left: 18px; margin-right: -18px; opacity: 0.6; }
.pic-kname { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.pic-kdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pic-ksub { font-size: 12px; color: var(--text-muted); }
.pic-people { left: 18px; right: 18px; top: 18px; display: flex; flex-direction: column; gap: 8px; }
.pic-person { display: flex; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; }
.pic-person:nth-child(3) { opacity: 0.5; }
.pic-ava { width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text); background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pic-login { left: 0; right: 0; top: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pic-ava--me { width: 44px; height: 44px; font-size: 15px; }
.pic-field { width: 150px; height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--radius-sm); background: var(--control-fill); color: var(--text-muted); letter-spacing: 0.15em; }
.pic-btn { width: 150px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--control-fill); font-size: 12px; font-weight: 600; color: var(--brand); }
.pic-export { left: 0; right: 0; top: 18px; bottom: 0; display: flex; justify-content: center; }
.pic-page { width: 104px; height: 140px; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; border-radius: 8px 8px 0 0; background: #fbfbfc; }
.pic-page .pic-bar { background: rgba(0, 0, 0, 0.1); }
.pic-page .pic-bar--strong { background: rgba(0, 0, 0, 0.28); }
.pic-chips { position: absolute; right: 16px; top: 4px; display: flex; flex-direction: column; gap: 6px; }
.pic-chips span { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface); font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.pic-mac { left: 28px; right: -24px; top: 24px; bottom: -24px; }
.pic-macwin { position: absolute; inset: 0; border-radius: 12px; background: var(--bg); box-shadow: var(--win-shadow); }
.pic-lights { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.pic-lights i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.pic-lights i:nth-child(2) { background: #febc2e; }
.pic-lights i:nth-child(3) { background: #28c840; }
.pic-macmark { position: absolute; left: 18px; top: 40px; display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.pic-logo { width: 14px; height: 14px; border-radius: 3px; background: var(--brand); transform: rotate(45deg); }

/* En dos columnas: la última, sola, a lo ancho; y los dibujos, más ceñidos.
   Al final del fichero, para que pese más que las medidas de arriba. */
@media (max-width: 720px) {
  .tile:last-child { grid-column: span 2; }
  .pic-figure, .pic-bars { left: 12px; right: 12px; top: 12px; padding: 12px; }
  .pic-big { font-size: 22px; }
  .pic-dots { gap: 8px; }
  .pic-rows, .pic-kanban, .pic-people { left: 12px; right: 12px; top: 14px; }
  .pic-login { top: 10px; gap: 5px; }
  .pic-ava--me { width: 32px; height: 32px; font-size: 12px; }
  .pic-field, .pic-btn { width: 120px; height: 24px; }
  .pic-qlabel { display: none; }
  .pic-qdot { width: 8px; height: 8px; }
}