/* ==========================================================================
   EarnCalc — rediseño según las Human Interface Guidelines de Apple.
   Las cuatro ideas que ordenan todo lo demás:
   1. El DATO es el protagonista: el resultado se lee antes que cualquier control.
   2. Jerarquía por tamaño y peso, no por color. El color se reserva para una cosa.
   3. Materiales: fondo neutro, tarjetas que flotan apenas, radios generosos.
   4. Se adapta al sistema: tipografía nativa, modo oscuro y respeto por «menos movimiento».
   ========================================================================== */

:root {
  /* Escala tipográfica: la de iOS, que ya está probada en millones de pantallas. */
  --texto-grande: 34px;
  --titulo-1: 28px;
  --titulo-2: 22px;
  --cuerpo: 17px;
  --nota: 15px;
  --pie: 13px;

  /* Espaciado en múltiplos de 4, como el grid de Apple. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;

  --radio: 14px;      /* El de una tarjeta de iOS. */
  --radio-chico: 10px;

  /* Un solo acento, el verde de la marca. Todo lo demás es neutro. */
  --acento: #0bab8e;
  --acento-suave: rgba(11, 171, 142, 0.12);

  --fondo: #f2f2f7;           /* systemGroupedBackground */
  --superficie: #ffffff;
  --separador: rgba(60, 60, 67, 0.12);
  --tinta: #1c1c1e;           /* label */
  --tinta-2: rgba(60, 60, 67, 0.6);   /* secondaryLabel */
  --tinta-3: rgba(60, 60, 67, 0.3);   /* tertiaryLabel */
  --campo: rgba(118, 118, 128, 0.08); /* el relleno de un campo en iOS */
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}

/* **Modo oscuro automático.** No hay interruptor a propósito: en el ecosistema de Apple
   lo elige el sistema, y una app que no obedece se siente ajena. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000;
    --superficie: #1c1c1e;
    --separador: rgba(84, 84, 88, 0.4);
    --tinta: #ffffff;
    --tinta-2: rgba(235, 235, 245, 0.6);
    --tinta-3: rgba(235, 235, 245, 0.3);
    --campo: rgba(118, 118, 128, 0.24);
    --acento: #2dd4bf;
    --acento-suave: rgba(45, 212, 191, 0.16);
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--e6) var(--e4) var(--e10);
  background: var(--fondo);
  color: var(--tinta);
  /* La tipografía del sistema: SF Pro en Apple, y su equivalente en el resto. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--cuerpo);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.envoltura {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

/* --- Encabezado ---------------------------------------------------------- */
.cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e2) var(--e1) var(--e2);
  flex-wrap: wrap;
}

.cabecera__titulo {
  margin: 0;
  font-size: var(--texto-grande);
  font-weight: 700;
  letter-spacing: -0.4px;
}

.cabecera__sub {
  margin: 2px 0 0;
  font-size: var(--nota);
  color: var(--tinta-2);
}

/* --- Tarjetas ------------------------------------------------------------ */
.tarjeta {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e5);
}

.panel {
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: var(--e4);
  align-items: start;
}

@media (max-width: 860px) {
  .panel { grid-template-columns: 1fr; }
}

/* --- El resultado, que es lo que la persona vino a ver -------------------- */
.resultado {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding-bottom: var(--e4);
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--separador);
}

.resultado__etiqueta {
  font-size: var(--pie);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* El número grande: 44px y tabulares, para que no bailen los dígitos al recalcular. */
.resultado__monto {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.resultado__detalle {
  display: flex;
  gap: var(--e6);
  margin-top: var(--e3);
  flex-wrap: wrap;
}

.dato { display: flex; flex-direction: column; gap: 2px; }
.dato__clave { font-size: var(--pie); color: var(--tinta-2); }
.dato__valor { font-size: var(--nota); font-weight: 600; font-variant-numeric: tabular-nums; }
.dato__valor--ganancia { color: var(--acento); }

/* --- Campos -------------------------------------------------------------- */
.campo { margin-bottom: var(--e4); }

.campo__etiqueta {
  display: block;
  margin-bottom: var(--e2);
  font-size: var(--nota);
  color: var(--tinta-2);
}

/* 44px de alto: el mínimo táctil de las HIG. Vale igual en escritorio. */
.campo input,
.campo select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--e3);
  border: none;
  border-radius: var(--radio-chico);
  background: var(--campo);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--cuerpo);
  font-variant-numeric: tabular-nums;
  transition: box-shadow 0.15s ease;
}

.campo select { appearance: none; padding-right: var(--e8); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e3) center; }

/* El foco se VE, y con el color de acento: es un requisito de accesibilidad, no un adorno. */
.campo input:focus,
.campo select:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--acento-suave), inset 0 0 0 1.5px var(--acento);
}

.campo--doble { display: grid; grid-template-columns: 1fr 110px; gap: var(--e2); }

/* --- Botón --------------------------------------------------------------- */
.boton {
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: var(--radio-chico);
  background: var(--acento);
  color: #fff;
  font-family: inherit;
  font-size: var(--cuerpo);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
}

/* El «se hunde» al tocar, que es la respuesta táctil de iOS. */
.boton:active { transform: scale(0.98); filter: brightness(0.95); }

.boton--secundario {
  width: auto;
  min-height: 36px;
  padding: 0 var(--e4);
  background: var(--campo);
  color: var(--tinta);
  font-size: var(--nota);
}

/* --- Interruptor: el de iOS, sin librerías -------------------------------- */
.interruptor { display: inline-flex; align-items: center; gap: var(--e2); cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

.interruptor__pista {
  position: relative;
  width: 51px; height: 31px;      /* las medidas exactas del switch de iOS */
  border-radius: 999px;
  background: var(--tinta-3);
  transition: background 0.2s ease;
  flex: none;
}

.interruptor__pista::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.interruptor input:checked + .interruptor__pista { background: var(--acento); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(20px); }
.interruptor input:focus-visible + .interruptor__pista { box-shadow: 0 0 0 4px var(--acento-suave); }
.interruptor__texto { font-size: var(--nota); color: var(--tinta-2); }

/* --- Selector de idioma, discreto ---------------------------------------- */
.idioma select {
  min-height: 36px;
  padding: 0 var(--e6) 0 var(--e3);
  border: none;
  border-radius: var(--radio-chico);
  background: var(--campo);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--nota);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e2) center;
}

/* --- El gráfico ---------------------------------------------------------- */
.grafico { padding: var(--e4); min-height: 420px; display: flex; align-items: center; justify-content: center; }
.grafico canvas { max-width: 100%; border-radius: var(--radio-chico); }

/* --- Pie de apoyo, deliberadamente discreto ------------------------------- */
.apoyo {
  display: flex;
  align-items: center;
  gap: var(--e5);
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: var(--nota);
  color: var(--tinta-2);
}

.apoyo__izq { display: flex; align-items: center; gap: var(--e4); }
.apoyo__qr { width: 72px; height: 72px; border-radius: var(--radio-chico); display: block; }
.apoyo__monedas { display: flex; gap: var(--e2); margin-top: var(--e2); }
.apoyo__monedas img { width: 22px; height: 22px; opacity: 0.85; }
.apoyo a { color: var(--acento); text-decoration: none; }
.apoyo a:hover { text-decoration: underline; }

.billetera { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.billetera__codigo {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--pie);
  color: var(--tinta-2);
  background: var(--campo);
  padding: var(--e2) var(--e3);
  border-radius: var(--radio-chico);
  word-break: break-all;
}

/* Copiado: el mensaje reemplaza al botón un instante, sin mover nada de lugar. */
.copiado { color: var(--acento); font-size: var(--nota); font-weight: 600; }

/* **Menos movimiento**: si el sistema lo pide, se apagan las transiciones. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Tres arreglos que sólo se ven ejecutando ----------------------------- */

/* 🔴 `display: grid` de `.campo--doble` GANABA sobre el `hidden` del HTML, así que el campo
   «Período personalizado» se veía siempre — aunque la frecuencia fuera «Mensual». Es el bug
   clásico de mezclar un atributo con una clase que fija display. */
[hidden] { display: none !important; }

/* La etiqueta del idioma es para lectores de pantalla: en la barra el `select` ya se explica solo
   con sus tres opciones, y un rótulo más sólo agrega ruido. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* El gráfico se alinea ARRIBA con la columna de al lado, en vez de quedar centrado con un hueco
   abajo: dos tarjetas a la misma altura se leen como una sola pieza. */
.grafico { align-items: flex-start; min-height: 0; }
.grafico canvas { width: 100% !important; height: auto !important; }

/* Cuando la etiqueta del período ocupa dos renglones, el campo y su unidad se desalineaban.
   Alinear al FINAL los empareja siempre, sin importar cuánto mida el texto de al lado. */
.campo--doble { align-items: end; }

/* ==========================================================================
   El gráfico, que se toca y ocupa la pantalla
   ========================================================================== */

.grafico { padding: var(--e3); }

.grafico__ampliar {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radio-chico);
  cursor: zoom-in;
  color: inherit;
}

.grafico__ampliar:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--acento-suave); }

/* La pista aparece al apuntar y NO se muestra en pantallas táctiles, donde no hay «apuntar»
   y el texto quedaría fijo tapando el dibujo. */
.grafico__pista {
  position: absolute;
  right: var(--e3); bottom: var(--e3);
  padding: 6px var(--e3);
  border-radius: 999px;
  background: var(--campo);
  font-size: var(--pie);
  color: var(--tinta-2);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.grafico__ampliar:hover .grafico__pista,
.grafico__ampliar:focus-visible .grafico__pista { opacity: 1; }

@media (hover: none) { .grafico__pista { opacity: 1; } }

/* --- En pantalla completa ------------------------------------------------- */
/* El fondo lo pinta el navegador de negro por defecto: se pisa con el del tema para que en modo
   claro no salte a negro y de vuelta. */
.grafico__ampliar:fullscreen {
  background: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e4);
  cursor: zoom-out;
}

/* El Safari de iPhone no tiene `requestFullscreen` para un elemento cualquiera, así que ahí se
   amplía con esta clase. Sin ella el fallback del JS no hacía absolutamente nada — el único
   navegador donde la pantalla completa más falta hace. */
.grafico__ampliar.a-toda-pantalla {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e4);
  cursor: zoom-out;
}

.grafico__ampliar:fullscreen #canvas-container,
.grafico__ampliar.a-toda-pantalla #canvas-container { width: 100%; height: 100%; display: flex; align-items: center; }

/* La pista se queda a la vista y dice cómo SALIR: en pantalla completa no hay barra del
   navegador ni tecla visible, así que sin este cartel no hay forma de saber cómo volver. */
.grafico__ampliar:fullscreen .grafico__pista,
.grafico__ampliar.a-toda-pantalla .grafico__pista {
  position: fixed;
  bottom: max(var(--e3), env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
}

/* --- Moneda -------------------------------------------------------------- */
.barra-ajustes { display: flex; gap: var(--e2); align-items: center; }

/* La cotización va PEGADA al resultado y en letra chica: es la fuente del número de arriba, y un
   número convertido sin decir a cuánto ni de cuándo es un número que nadie puede verificar. */
.cotizacion {
  margin: calc(var(--e4) * -1) 0 var(--e4);
  font-size: var(--pie);
  color: var(--tinta-2);
}

.cotizacion--falla { color: #c1121f; }
@media (prefers-color-scheme: dark) { .cotizacion--falla { color: #ff6b6b; } }

/* Una línea de ayuda debajo de un campo: explica sin robarle protagonismo al dato. */
.ayuda {
  margin: var(--e2) 0 0;
  font-size: var(--pie);
  color: var(--tinta-2);
  line-height: 1.35;
}
.ayuda--aviso { color: #b45309; }
@media (prefers-color-scheme: dark) { .ayuda--aviso { color: #fbbf24; } }

/* El activo no tiene tanta historia como los años pedidos: se avisa, no se miente el rótulo. */
.cotizacion--aviso {
  color: var(--color-aviso, #b25000);
  font-weight: 600;
}