/* Hoja de estilo de las páginas legales públicas de PlayManager.
   Los colores son los de la app (mobile/src/theme/colors.ts): navy #12224F y
   azul de marca #2E6BF6. Se repiten aquí a mano porque estas páginas son HTML
   plano a propósito —no dependen del bundle de la web app, para que sigan en pie
   aunque el export de Expo falle: son las URL que se declaran en Play Console y
   un 404 en ellas es motivo de rechazo. */

:root {
  --navy: #12224f;
  --navy-deep: #0c1836;
  --primary: #2e6bf6;
  --primary-dark: #1e4fd1;
  --primary-light: #e7eefe;
  --bg: #f3f6fb;
  --surface: #ffffff;
  --border: #e6ebf2;
  --text: #1c2a4b;
  --text-muted: #5b6b87;
  --danger: #c0362c;
  --danger-bg: #fdecea;
  --success-bg: #e8f6ee;
  --success-text: #1c6b3f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

header {
  background: var(--navy);
  color: #fff;
  padding: 24px 20px;
}

header .marca {
  max-width: 760px;
  margin: 0 auto;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

header .marca span { color: #9db8fb; font-weight: 400; }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

h1 { font-size: 28px; line-height: 1.25; margin: 0 0 8px; color: var(--navy); }
h2 { font-size: 21px; margin: 36px 0 10px; color: var(--navy); }
h3 { font-size: 17px; margin: 24px 0 8px; color: var(--navy); }

.actualizado { color: var(--text-muted); font-size: 14px; margin: 0 0 24px; }

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin: 20px 0;
}

.aviso {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 20px 0;
}

.aviso.grave {
  background: var(--danger-bg);
  border-left-color: var(--danger);
}

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--primary-light); color: var(--navy); font-weight: 600; }

/* Las tablas anchas hacen scroll dentro de su caja: el cuerpo de la página no
   puede desplazarse en horizontal o la lectura en móvil se rompe. */
.tabla-scroll { overflow-x: auto; }

ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }

a { color: var(--primary-dark); }

label { display: block; font-weight: 600; margin: 16px 0 6px; font-size: 15px; }
.pista { font-weight: 400; color: var(--text-muted); font-size: 14px; display: block; margin-top: 2px; }

input, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d3dbe8;
  border-radius: 10px;
  font-size: 16px;   /* 16px evita que Safari haga zoom al enfocar el campo. */
  font-family: inherit;
  color: var(--text);
  background: #fff;
}

input:focus, textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }

textarea { min-height: 96px; resize: vertical; }

button {
  margin-top: 20px;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

button:hover { background: var(--primary-dark); }
button:disabled { opacity: 0.5; cursor: default; }

.resultado { margin-top: 18px; padding: 14px 16px; border-radius: 10px; display: none; }
.resultado.ok { display: block; background: var(--success-bg); color: var(--success-text); }
.resultado.error { display: block; background: var(--danger-bg); color: var(--danger); }

footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  color: var(--text-muted);
  font-size: 14px;
  border-top: 1px solid var(--border);
}

footer a { margin-right: 16px; }

/* Aquí vivía la clase `.pendiente`, que resaltaba en amarillo los marcadores de
   datos del titular que faltaban. Se elimina a propósito: desde el 14-09-2026
   estas páginas están completas y son las que se declaran en Google Play. Si
   alguien vuelve a dejar un hueco marcado, la clase ya no existe y el texto se
   verá crudo —que es justo lo que queremos: un marcador visible en una página
   legal publicada es motivo de rechazo. Nada de lo que se sirve bajo /legal
   puede contener un hueco sin rellenar. */