/* =============================================================================
   styles.css — Hoja única del subdominio politica-privacidad.gestionas.pe
   -----------------------------------------------------------------------------
   Hereda la identidad del sitio corporativo (2-Web-VMA-Sofware): mismo logotipo,
   mismas tipografías (Space Grotesk para títulos, IBM Plex Sans para texto,
   IBM Plex Mono para código) y misma paleta. Un usuario que llega desde Play
   tiene que reconocer que es el mismo emisor.

   Restricciones que condicionan este archivo:

   - La CSP es `script-src 'none'` y `style-src 'self'`: no hay JS ni estilos en
     línea. El sitio corporativo conmuta el tema con un botón y `data-tema`;
     aquí eso exigiría JavaScript, así que el tema se resuelve SOLO con
     `prefers-color-scheme`. Es la única divergencia deliberada de identidad.
   - `font-src 'self'`: las tipografías son las mismas, servidas desde este
     dominio. No hay ninguna petición a un host externo.
   - Un revisor de Google abre estas páginas en un móvil: el índice lateral solo
     aparece a partir de 1080px y todo lo demás es de una columna.
   ============================================================================= */

/* ── Tipografías ──────────────────────────────────────────────────────────── */
/* Copiadas de 2-Web-VMA-Sofware/public/assets/fonts. El `unicode-range` separa
   latin de latin-ext para que el navegador descargue solo lo que necesita. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  --fuente: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-display: "Space Grotesk", var(--fuente);
  --fuente-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --contenedor: 1200px;
  --alto-cabecera: 68px;
  --pad-x: clamp(20px, 4vw, 40px);
  --ancho-texto: 72ch;
  --ancho-columna: 60rem;
  --radio: 14px;
  --radio-sm: 9px;

  /* Tema claro — equivalente al `[data-tema="claro"]` del sitio corporativo */
  --fondo: #f7f8fc;
  --fondo-panel: #ffffff;
  --fondo-sutil: #f0f2f8;
  --borde: rgba(13, 15, 26, .1);
  --borde-fuerte: rgba(13, 15, 26, .18);
  --cabecera-bg: rgba(255, 255, 255, .86);
  --texto: #0d0f1a;
  --texto-suave: #4a5068;
  --texto-tenue: #6f7690;
  --acento: #4a56c0;
  --acento-texto: #333f9c;
  --acento-linea: rgba(74, 86, 192, .3);
  --acento-suave: rgba(74, 86, 192, .07);
  --aviso-fondo: #fff8e8;
  --aviso-borde: #e2c184;
  --aviso-texto: #6b4a05;
  --sombra: 0 1px 2px rgba(13, 15, 26, .04), 0 10px 30px rgba(13, 15, 26, .05);
  --marca-img: url("/assets/brand/vma-mark-indigo.png");
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #07070f;
    --fondo-panel: #0a0b17;
    --fondo-sutil: #0c0e1b;
    --borde: rgba(255, 255, 255, .08);
    --borde-fuerte: rgba(255, 255, 255, .16);
    --cabecera-bg: rgba(7, 7, 15, .74);
    --texto: #ffffff;
    --texto-suave: #c4c9dc;
    --texto-tenue: #8b92ac;
    --acento: #a9c3f8;
    --acento-texto: #bccefb;
    --acento-linea: rgba(169, 195, 248, .3);
    --acento-suave: rgba(169, 195, 248, .08);
    --aviso-fondo: rgba(233, 179, 70, .08);
    --aviso-borde: rgba(233, 179, 70, .32);
    --aviso-texto: #f0d69a;
    --sombra: none;
    --marca-img: url("/assets/brand/vma-mark-claro.png");
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera es sticky: sin esto, un salto de ancla deja el título tapado. */
  scroll-padding-top: calc(var(--alto-cabecera) + 1.25rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Accesibilidad ─────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--acento);
  color: var(--fondo);
  border-radius: 0 0 var(--radio-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Contenedor ───────────────────────────────────────────────────────────── */

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ── Cabecera con la marca corporativa ────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cabecera-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}

.cabecera-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--alto-cabecera);
}

.cabecera-izq {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  white-space: nowrap;
  text-decoration: none;
  color: var(--texto);
}

/* El isotipo va como imagen de fondo y no como <img>: así el navegador descarga
   solo el PNG del tema activo. Es decorativo — el nombre está en texto al lado
   y el enlace lleva su propio aria-label. El alto fijo evita reflow. */
.marca-mark {
  display: block;
  flex: none;
  width: 31px;
  height: 35px;
  background-image: var(--marca-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.marca-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.marca-nombre {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.045em;
  color: var(--texto);
}

.marca-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--acento-linea);
  border-radius: 999px;
  background: var(--acento-suave);
}

.marca-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 8px var(--acento);
}

.marca-word {
  font-family: var(--fuente-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

/* Separador y rótulo de sección: dicen en qué parte del universo VMA estás. */
.cabecera-seccion {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}
.cabecera-seccion::before {
  content: "";
  width: 1px;
  height: 22px;
  background: var(--borde-fuerte);
}

.cabecera-vinculo {
  flex: none;
  font-size: .9rem;
  color: var(--texto-suave);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.cabecera-vinculo:hover { color: var(--acento-texto); border-bottom-color: currentColor; }

@media (max-width: 720px) {
  .marca-chip { display: none; }
  .cabecera-seccion { font-size: 10.5px; gap: 10px; letter-spacing: .1em; }
  .cabecera-seccion::before { height: 18px; }
}

@media (max-width: 520px) {
  .cabecera-seccion { display: none; }
}

/* ── Migas y portada ──────────────────────────────────────────────────────── */

.migas {
  padding-top: 1.9rem;
  font-size: .85rem;
  color: var(--texto-tenue);
}
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.migas li::after { content: "›"; margin-left: .4rem; color: var(--borde-fuerte); }
.migas li:last-child::after { content: ""; }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--acento-texto); text-decoration: underline; }

.portada { padding-block: 1.1rem 2.2rem; }

/* Las páginas sin índice lateral centran su columna: dejar el texto pegado al
   borde izquierdo de una pantalla ancha se lee como una plantilla rota. */
.portada-centrada { max-width: var(--ancho-columna); margin-inline: auto; }

.etiqueta-app {
  display: inline-flex;
  align-items: center;
  margin: 0 0 .9rem;
  padding: .3rem .8rem;
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento-texto);
  background: var(--acento-suave);
  border: 1px solid var(--acento-linea);
  border-radius: 999px;
}

h1 {
  margin: 0 0 .7rem;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.6vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -.035em;
}
h1 em { font-style: normal; color: var(--acento-texto); }

.subtitulo {
  margin: 0 0 1.3rem;
  max-width: var(--ancho-texto);
  color: var(--texto-suave);
  font-size: 1.05rem;
}

/* Ficha de vigencia: fechas y responsable, lo primero que mira un revisor.
   El ancho mínimo de columna lo fija el dato más largo, que es el
   `applicationId` (31 caracteres en monoespaciada). Por debajo de ~240px se
   partía en dos líneas a mitad de palabra y se leía mal. */
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .1rem 1.75rem;
  margin: 0;
  padding: 1.15rem 1.35rem;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-size: .92rem;
}
.ficha div { padding-block: .4rem; }
.ficha dt {
  color: var(--texto-tenue);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ficha dd { margin: .15rem 0 0; color: var(--texto); overflow-wrap: anywhere; }

/* El identificador es un valor atómico: partirlo lo vuelve irreconocible, y es
   justo el dato que un revisor contrasta contra la ficha de Play. Se reduce el
   cuerpo lo justo para que quepa entero en una sola línea. */
.ficha code {
  font-size: .8rem;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* ── Disposición del documento ────────────────────────────────────────────── */

.disposicion { padding-block: 2rem 3.5rem; }

/* Sin índice lateral (portada y 404) la columna se centra. Antes esta regla no
   existía y el <article> caía en la columna de 250px reservada al índice: el
   contenido se veía comprimido contra la izquierda. */
.disposicion:not(.con-indice) > article {
  max-width: var(--ancho-columna);
  margin-inline: auto;
}
.disposicion:not(.con-indice) > article p,
.disposicion:not(.con-indice) > article ul,
.disposicion:not(.con-indice) > article ol { max-width: var(--ancho-texto); }

.indice {
  margin-bottom: 2.2rem;
  padding: 1.15rem 1.35rem;
  background: var(--fondo-sutil);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.indice h2 {
  margin: 0 0 .65rem;
  font-family: var(--fuente);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.indice ol { margin: 0; padding-left: 1.3rem; font-size: .92rem; }
.indice li { margin-bottom: .25rem; }
.indice a { color: var(--texto-suave); text-decoration: none; }
.indice a:hover { color: var(--acento-texto); text-decoration: underline; }

article { max-width: var(--ancho-texto); }

section { margin-bottom: 2.6rem; scroll-margin-top: calc(var(--alto-cabecera) + 1.25rem); }

h2 {
  margin: 0 0 .8rem;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.28;
  letter-spacing: -.02em;
}
h3 {
  margin: 1.8rem 0 .55rem;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.012em;
}

p { margin: 0 0 1rem; }

ul, ol { margin: 0 0 1rem; padding-left: 1.35rem; }
li { margin-bottom: .45rem; }

a { color: var(--acento-texto); }
a:hover { text-decoration: underline; }

strong { font-weight: 600; color: var(--texto); }

code {
  padding: .12em .38em;
  font-family: var(--fuente-mono);
  font-size: .85em;
  background: var(--fondo-sutil);
  border: 1px solid var(--borde);
  border-radius: 5px;
  word-break: break-word;
}

hr { margin: 2.6rem 0; border: 0; border-top: 1px solid var(--borde); }

/* ── Tablas de datos ───────────────────────────────────────────────────────── */
/* El inventario de datos es la sección que Google contrasta contra el
   formulario de Data Safety, así que va en tabla y no en prosa. En móvil
   desborda: el envoltorio hace el scroll horizontal, nunca el body. */

.tabla-envoltorio {
  overflow-x: auto;
  margin: 0 0 1.35rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-panel);
}

table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: .91rem;
}

caption {
  padding: .8rem 1.1rem 0;
  color: var(--texto-tenue);
  font-size: .82rem;
  text-align: left;
}

th, td {
  padding: .72rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borde);
}

thead th {
  position: sticky;
  top: 0;
  background: var(--fondo-sutil);
  color: var(--texto-suave);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

tbody th { font-weight: 600; }

/* ── Avisos y bloques destacados ──────────────────────────────────────────── */

.aviso {
  margin: 0 0 1.35rem;
  padding: 1rem 1.2rem;
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-left-width: 3px;
  border-radius: var(--radio-sm);
  color: var(--aviso-texto);
  font-size: .93rem;
}
.aviso p:last-child { margin-bottom: 0; }
.aviso strong { color: inherit; }

.destacado {
  margin: 0 0 1.35rem;
  padding: 1.05rem 1.25rem;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.destacado p:last-child { margin-bottom: 0; }

/* ── Índice de aplicaciones de la portada ─────────────────────────────────── */

.rejilla-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.15rem;
  margin: 0 0 2.8rem;
  padding: 0;
  list-style: none;
  max-width: none;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: 0;
  padding: 1.4rem;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta h2 { margin: 0; font-size: 1.15rem; }
.tarjeta h2 a { color: var(--texto); text-decoration: none; }
.tarjeta h2 a:hover { color: var(--acento-texto); }
.tarjeta p { margin: 0; max-width: none; color: var(--texto-suave); font-size: .93rem; }
.tarjeta .empresa {
  font-family: var(--fuente-mono);
  color: var(--texto-tenue);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tarjeta-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin-top: auto;
  padding-top: .75rem;
  font-size: .9rem;
}

/* ── Pie ───────────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--borde);
  background: var(--fondo-panel);
  color: var(--texto-suave);
  font-size: .88rem;
}
.pie .contenedor { padding-block: 1.9rem; }
.pie p { margin: 0 0 .4rem; }
.pie p:last-child { margin-bottom: 0; }
.pie a { color: var(--texto-suave); }
.pie a:hover { color: var(--acento-texto); }

/* ── Escritorio ancho: índice a la izquierda, fijo ────────────────────────── */
/* Solo con `.con-indice`. Aplicarlo a todas las páginas metía el contenido de
   las que no tienen índice dentro de la columna estrecha. */

@media (min-width: 1080px) {
  .disposicion.con-indice {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
  .disposicion.con-indice .indice {
    position: sticky;
    top: calc(var(--alto-cabecera) + 1.5rem);
    margin-bottom: 0;
    max-height: calc(100vh - var(--alto-cabecera) - 3rem);
    overflow-y: auto;
  }
}

/* ── Impresión: se imprime para archivarlo o adjuntarlo a un contrato ──────── */

@media print {
  :root {
    --fondo: #fff; --fondo-panel: #fff; --fondo-sutil: #fff;
    --texto: #000; --texto-suave: #222; --texto-tenue: #444;
    --acento-texto: #000; --borde: #bbb;
  }
  body { font-size: 11pt; }
  .cabecera, .pie, .indice, .migas, .skip-link { display: none; }
  .disposicion { display: block; padding: 0; }
  article, .disposicion:not(.con-indice) > article { max-width: none; }
  a { color: #000; text-decoration: underline; }
  /* La URL importa: un PDF impreso sin ella no acredita dónde estaba publicada. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  table { min-width: 0; font-size: 9.5pt; }
  .tabla-envoltorio { overflow: visible; }
  section { break-inside: avoid; }
}