/* UFtoCLP web - estilos propios (look M2: Inter, fondo #f3f5fa, tarjetas radio 14, barra navy).
   Independiente del sitio: no usa /css/m2.css. Colores de cada moneda = Tema.kt de la app. */

:root {
  --fondo: #f3f5fa;
  --superficie: #ffffff;
  --texto: #14213a;
  --texto-2: #55627a;
  --borde: #c9d2e0;
  --variante: #e6ebf4;
  --primario: #16427f;
  --sobre-primario: #ffffff;
  --error: #b3261e;
  --barra: linear-gradient(135deg, #0b2a55, #16427f);
  --sombra: 0 1px 2px rgba(15, 27, 45, .05), 0 6px 20px rgba(15, 27, 45, .06);
  --sombra-pie: 0 -2px 10px rgba(15, 27, 45, .10);
  --uf-fondo: #fff5dc; --uf-borde: #f0d48a; --uf-acento: #7a5200;
  --clp-fondo: #e3f6ea; --clp-borde: #9fd8b4; --clp-acento: #0b5a2c;
  --eur-fondo: #f3ecff; --eur-borde: #cdb8f0; --eur-acento: #4f2a8a;
  --usd-fondo: #eaf2ff; --usd-borde: #a9c6f0; --usd-acento: #16427f;
  --letra: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0d1420;
    --superficie: #172131;
    --texto: #e8edf6;
    --texto-2: #a9b6cc;
    --borde: #3a4a62;
    --variante: #243146;
    --primario: #8ec5ff;
    --sobre-primario: #062044;
    --error: #ff8a7a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    --sombra-pie: 0 -2px 10px rgba(0, 0, 0, .4);
    --uf-fondo: #352c14; --uf-borde: #6b5420; --uf-acento: #ffd27a;
    --clp-fondo: #143a25; --clp-borde: #2f6b47; --clp-acento: #8fe8b0;
    --eur-fondo: #2e1f45; --eur-borde: #5b4383; --eur-acento: #d2b8ff;
    --usd-fondo: #17294a; --usd-borde: #34507e; --usd-acento: #8ec5ff;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
svg { fill: currentColor; }
[hidden] { display: none !important; }

/* La app ocupa lo que se ve de la ventana (con el teclado abierto, solo lo de arriba: lo ajusta app.js). */
#app {
  position: fixed;
  left: 0; right: 0;
  top: var(--vv-arriba, 0px);
  height: var(--vv-alto, 100dvh);
  overflow: hidden;
}
.pantalla {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--fondo);
  transition: transform .28s ease;
}
#principal.fuera { transform: translateX(-100%); }
#porcentaje.fuera { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .pantalla { transition: none; } }

/* ---- Barra de arriba ---- */
.barra {
  display: flex; align-items: center; gap: 2px;
  background: var(--barra); color: #fff;
  padding: calc(4px + env(safe-area-inset-top)) calc(4px + env(safe-area-inset-right)) 4px calc(20px + env(safe-area-inset-left));
  min-height: 56px;
  flex: none;
}
#porcentaje .barra { padding-left: calc(4px + env(safe-area-inset-left)); }
.titulo { flex: 1; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .1px; }
.icono-barra {
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icono-barra svg { width: 24px; height: 24px; }
.icono-barra:hover { background: rgba(255, 255, 255, .12); }
.icono-barra:focus-visible { outline: 2px solid #8ec5ff; outline-offset: -2px; }

.menu-caja { position: relative; }
.menu {
  position: absolute; right: 4px; top: 50px; z-index: 20;
  min-width: 220px; padding: 6px 0;
  background: var(--superficie); color: var(--texto);
  border-radius: 10px; box-shadow: 0 4px 24px rgba(0, 0, 0, .22);
}
.menu button {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 48px; padding: 0 18px; border: 0; background: none;
  text-align: left; font-size: 15px; cursor: pointer;
}
.menu button svg { width: 22px; height: 22px; color: var(--texto-2); flex: none; }
.menu button:hover, .menu button:focus-visible { background: var(--variante); outline: none; }
.menu button:disabled { opacity: .45; cursor: default; background: none; }
.menu hr { border: 0; border-top: 1px solid var(--borde); margin: 6px 0; }

/* ---- Contenido ---- */
.contenido {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px calc(12px + env(safe-area-inset-right)) 16px calc(12px + env(safe-area-inset-left));
}
.columna { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }

/* ---- Tarjetas de monedas ---- */
.tarjeta {
  --t-fondo: var(--uf-fondo); --t-borde: var(--uf-borde); --t-acento: var(--uf-acento);
  background: var(--t-fondo);
  border: 1px solid var(--t-borde);
  border-radius: 14px;
  padding: 8px 12px 8px 2px;
  position: relative;
}
.m-CLP { --t-fondo: var(--clp-fondo); --t-borde: var(--clp-borde); --t-acento: var(--clp-acento); }
.m-EUR { --t-fondo: var(--eur-fondo); --t-borde: var(--eur-borde); --t-acento: var(--eur-acento); }
.m-USD { --t-fondo: var(--usd-fondo); --t-borde: var(--usd-borde); --t-acento: var(--usd-acento); }
.tarjeta.arrastrando { z-index: 5; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); }
.tarjeta.sin-manija { padding-left: 16px; }

.fila { display: flex; align-items: center; }
.manija {
  width: 44px; height: 44px; flex: none; border: 0; background: none; color: var(--t-acento);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; border-radius: 10px;
}
.manija svg { width: 24px; height: 24px; }
.manija:focus-visible { outline: 2px solid var(--t-acento); }
.arrastrando .manija { cursor: grabbing; }
.nombre { width: 78px; flex: none; color: var(--t-acento); line-height: 1.15; }
.sin-manija .nombre { width: 90px; }
.nombre b { display: block; font-size: 18px; font-weight: 700; }
.nombre span { display: block; font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.campo {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  height: 56px; padding: 0 14px;
  background: var(--superficie);
  border: 1px solid var(--t-borde); border-radius: 6px;
  cursor: text;
}
.campo:focus-within { border: 2px solid var(--t-acento); padding: 0 13px; }
.simbolo { flex: none; white-space: pre; font-size: 22px; color: var(--texto); }
.campo input {
  flex: 1; min-width: 0; width: 100%;
  border: 0; outline: 0; background: transparent; color: var(--texto);
  font: 500 22px var(--letra); text-align: right; padding: 0;
}
.campo input::placeholder { color: var(--texto-2); opacity: .7; }
.info {
  padding: 4px 0 0 12px; font-size: 12.5px; color: var(--texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sin-manija .info { padding-left: 0; }
.info.cuenta {
  text-align: right; color: var(--t-acento); font-size: 14.5px; font-weight: 600;
}

/* ---- Pie: fecha, de donde vienen los valores y Actualizar ---- */
.pie {
  flex: none; display: flex; align-items: center; gap: 8px;
  background: var(--superficie); box-shadow: var(--sombra-pie);
  padding: 8px calc(12px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.pie-texto { flex: 1; min-width: 0; }
.fecha-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 0; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 6px;
}
.fecha-btn svg { width: 20px; height: 20px; color: var(--primario); flex: none; }
.fecha-btn input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.fecha-btn:focus-within { outline: 2px solid var(--primario); outline-offset: 2px; }
.estado { font-size: 12px; color: var(--texto-2); line-height: 1.35; }
.estado.fallo { color: var(--error); }

.boton-borde {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px 0 12px;
  border: 1px solid var(--borde); border-radius: 20px;
  background: transparent; color: var(--primario); font-weight: 500; font-size: 14px; cursor: pointer;
}
.boton-borde svg { width: 18px; height: 18px; }
.boton-borde:hover { background: var(--variante); }
.boton-borde:disabled { opacity: .55; cursor: default; background: none; }
.boton-borde:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.boton-borde.centro { align-self: center; }
.giro { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: giro .8s linear infinite; }
.bajando .giro { display: inline-block; }
.bajando svg { display: none; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ---- Botones de cuentas: mientras se escribe, en lugar del pie (justo sobre el teclado) ---- */
.cuentas {
  flex: none; display: flex; gap: 8px;
  background: var(--superficie); box-shadow: var(--sombra-pie);
  padding: 6px calc(10px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
}
.cuentas button {
  flex: 1; height: 48px; border: 0; border-radius: 12px;
  background: var(--variante); color: var(--texto);
  font-size: 24px; font-weight: 500; cursor: pointer; touch-action: manipulation;
}
.cuentas button.igual { background: var(--primario); color: var(--sobre-primario); }
.cuentas button:active { filter: brightness(.92); }

/* ---- Porcentajes ---- */
.resultado-pct {
  margin-top: 8px; padding: 16px; text-align: center;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
}
.resultado-pct .grande { font-size: 40px; font-weight: 700; color: var(--primario); line-height: 1.2; }
.resultado-pct .frase { font-size: 16px; margin-top: 2px; }
.resultado-pct .dif { font-size: 14px; color: var(--texto-2); margin-top: 4px; }
.resultado-pct .aviso { color: var(--texto-2); }
.resultado-pct .aviso.fallo { color: var(--error); }
.resumen {
  flex: none; display: flex; justify-content: center; align-items: baseline; gap: 12px;
  background: var(--variante); padding: 8px 16px; white-space: nowrap; overflow: hidden;
}
.resumen b { font-size: 22px; color: var(--primario); }
.resumen span { font-size: 14px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; }

.sin-js { padding: 24px; text-align: center; }