/* app.css — modo app iOS. SOLO aplica bajo body.modo-app (dentro de la app
   Capacitor o probando con ?app=1). Sin esa clase, nada de esto toca la web.
   Estética aprobada 30-07: blanco, banda amarilla arriba, burbujas amarillas,
   letra negra, botón principal negro con letra amarilla. */

body.modo-app {
  --app-acento: #00B850;
  --app-burbuja: #C9CFFF;
  --app-paper: #ffffff;
  --app-paper-2: #f7f7f3;
  --app-line: #e9e9e2;
  --app-ink: #0b0b0c;
  --app-muted: #6d6d66;
  background: var(--app-paper);
  color: var(--app-ink);
  padding-bottom: 96px;
}

/* ── Chrome de marketing fuera ── */
body.modo-app .nav,
body.modo-app footer,
body.modo-app #familia,
body.modo-app #ejemplo,
body.modo-app #como,
body.modo-app #precio,
body.modo-app #newsletter {
  display: none;
}

/* Secciones destapadas desde Ajustes (Cómo funciona / Aviso) */
body.modo-app #como.app-destapada,
body.modo-app #precio.app-destapada {
  display: block;
  background: var(--app-paper);
  color: var(--app-ink);
}

/* ── Banda superior amarilla con logo ── */
body.modo-app #app-head {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--app-acento);
  color: var(--app-ink);
  padding: calc(env(safe-area-inset-top) + 6px) 0 0; /* franja de marca: isla + 6px, sin logo (decisión Edu 02-08) */
  position: sticky;
  top: 0;
  z-index: 55;
}
body.modo-app #app-head img,
body.modo-app #app-head span { display: none; }
body.modo-app #app-head span { font-weight: 900; font-size: 15px; letter-spacing: 0.01em; }
body.modo-app #app-head em { font-style: italic; }
body.modo-app #app-head .ai { font-size: 1.35em; font-weight: 900; color: var(--app-ink); }

/* ── Hero / Analizar ── */
body.modo-app .hero { padding-top: 26px; }
body.modo-app .hero h1 { color: var(--app-ink); font-size: clamp(24px, 6vw, 30px); }
body.modo-app .hero h1 em { color: inherit; background: var(--app-acento); border-radius: 6px; padding: 0 5px; font-style: normal; }
body.modo-app .hero .sub { color: var(--app-muted); }

body.modo-app .analizador {
  background: var(--app-burbuja);
  border: none;
}
body.modo-app .analizador label { color: #1d2280; }
body.modo-app .analizador input {
  background: var(--app-paper);
  color: var(--app-ink);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.08);
}
body.modo-app .analizador input::placeholder { color: var(--app-muted); }
body.modo-app .analizador .btn {
  background: var(--app-ink);
  color: var(--app-acento);
}
body.modo-app .analizador .msg.ok { color: #1e7a4e; }
body.modo-app .ayuda { color: #1d2280; }
body.modo-app .ayuda strong { color: var(--app-ink); }
body.modo-app .legal-hint { color: #1d2280; }
body.modo-app .legal-hint a { color: var(--app-ink); }
body.modo-app .chip {
  background: var(--app-paper);
  color: var(--app-ink);
  border: 1px solid var(--app-line);
}
body.modo-app .exito { color: var(--app-ink); }
body.modo-app .exito p { color: var(--app-muted); }
body.modo-app .exito-cta { background: var(--app-ink); color: var(--app-acento); }

/* ── Pantallas Historial / Ajustes ── */
body.modo-app .app-pantalla {
  position: fixed;
  inset: 0;
  top: calc(env(safe-area-inset-top) + 6px); /* justo bajo la franja */
  bottom: 84px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--app-paper);
  z-index: 50;
  padding: 18px 18px 24px;
}
body.modo-app .app-pantalla h2 { font-size: 24px; font-weight: 900; margin: 0 0 4px; }
body.modo-app .app-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--app-muted); font-weight: 600; line-height: 1.45; }
body.modo-app .app-vacio { color: var(--app-muted); font-weight: 600; }

/* Historial: burbuja amarilla = listo, gris = en proceso */
body.modo-app .app-item {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--app-paper-2);
  border: 1px solid var(--app-line);
  border-radius: 20px;
  padding: 13px 15px;
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--app-ink);
}
body.modo-app .app-item.listo { background: var(--app-burbuja); border-color: transparent; }
body.modo-app .app-datos { flex: 1; min-width: 0; }
body.modo-app .app-nom { font-weight: 800; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.modo-app .app-fecha { font-size: 12px; color: var(--app-muted); font-weight: 600; margin-top: 2px; }
body.modo-app .app-item.listo .app-fecha { color: #1d2280; }
body.modo-app .app-ver { font-size: 12px; font-weight: 800; text-decoration: underline; margin-top: 3px; }
body.modo-app .app-pill {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--app-ink);
  color: var(--app-acento);
}
body.modo-app .app-pill.proceso {
  background: var(--app-paper);
  color: var(--app-muted);
  box-shadow: inset 0 0 0 1px var(--app-line);
}
body.modo-app .app-nota { font-size: 12px; color: var(--app-muted); font-weight: 600; margin-top: 4px; }

/* Ajustes */
body.modo-app .app-grupo-tit {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-muted);
  margin: 14px 0 6px 4px;
}
body.modo-app .app-grupo {
  background: var(--app-paper-2);
  border: 1px solid var(--app-line);
  border-radius: 20px;
  overflow: hidden;
}
body.modo-app .app-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 13px 15px;
  border: none;
  border-bottom: 1px solid var(--app-line);
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--app-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body.modo-app .app-grupo .app-fila:last-child { border-bottom: none; }
body.modo-app .app-fila > span { color: var(--app-muted); font-weight: 900; }
body.modo-app .app-fila > span.sec { font-size: 12.5px; font-weight: 600; }

/* ── Tab bar inferior ── */
body.modo-app #app-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 4px;
  background: var(--app-paper);
  border-top: 1px solid var(--app-line);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  z-index: 60;
}
body.modo-app .app-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--app-muted);
  background: none;
  border: none;
  padding: 7px 0 6px;
  border-radius: 14px;
  cursor: pointer;
}
body.modo-app .app-tab svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.modo-app .app-tab.activo { color: var(--app-ink); background: var(--app-acento); }

/* Ajustes de marca dividends */
body.modo-app #app-head { color: #04130a; }
body.modo-app #app-head .ai { color: #04130a; }
body.modo-app #app-head img { background: #fff; border-radius: 8px; padding: 3px; box-sizing: border-box; }
body.modo-app .analizador .btn, body.modo-app .exito-cta { color: #fff; }
body.modo-app .app-pill { color: #fff; }
body.modo-app .app-tab.activo { color: #04130a; }
body.modo-app .hero h1 em { background: #C9CFFF; }