/* 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-yellow: #FFDD00;
  --app-burbuja: #FFE94D;
  --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-yellow);
  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 ── */
/* fix hallmark 01-08: quita el min-height:72dvh del hero de marketing, que si no
   deja un hueco vacío enorme antes del cajetín en la pantalla de app */
body.modo-app .hero { padding-top: 26px; min-height: auto; justify-content: flex-start; }
body.modo-app .hero h1 { color: var(--app-ink); font-size: clamp(24px, 6vw, 30px); max-width: 18ch; }
body.modo-app .hero h1 em { color: inherit; background: var(--app-yellow); border-radius: 7px; padding: 2px 8px; margin-right: 3px; font-style: normal; font-size: 1.16em; }
body.modo-app .hero .sub { color: var(--app-muted); }

body.modo-app .analizador {
  background: var(--app-burbuja);
  border: none;
  box-shadow: none; /* fix hallmark 01-08: quita el glow oscuro heredado del tema de marketing */
  padding: 30px 22px 36px; /* cajetín más alto: menos hueco blanco debajo */
}
body.modo-app .analizador label { color: #5d5300; }
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); }
/* fix hallmark 01-08: el foco heredado (solo borde amarillo) tiene poco contraste
   sobre blanco; añade ring oscuro visible para teclado/accesibilidad */
body.modo-app .analizador input:focus-visible {
  border-color: var(--app-ink);
  box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.08), 0 0 0 3px rgba(11, 11, 12, 0.15);
}
body.modo-app .analizador .btn {
  background: var(--app-ink);
  color: var(--app-yellow);
}
body.modo-app .analizador .msg.ok { color: #1e7a4e; }
body.modo-app .ayuda { color: #5d5300; }
body.modo-app .ayuda strong { color: var(--app-ink); }
body.modo-app .legal-hint { color: #5d5300; }
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-yellow); }

/* ── 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: #5d5300; }
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-yellow);
}
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-yellow); }