@charset "utf-8";
/* ============================================================
   estilo-legal.css — las páginas sueltas del servidor, con la plantilla.

   Son ocho páginas que no forman parte del sitio generado ni de la
   aplicación: los cinco documentos legales, el centro de ayuda (/soporte), la
   verificación de certificados (/verificar) y la explicación pública de cómo
   borrar la cuenta (/eliminar-cuenta). Las sirve `servidor.js` desde
   `publico/`, y hasta ahora colgaban de `tokens.css`, una hoja que ya no
   existe: se veían como texto suelto sin estilo.

   Ahora llevan la barra y el pie del sitio y cargan su `base.css`, así que
   quien pasa de «Planes» a «Términos» no cambia de web. Esta hoja solo añade
   lo que un documento largo o un formulario suelto necesitan y el sitio no
   tiene: la columna de lectura con su índice, el estilo de <code> sin letra
   de máquina, las tablas que se apilan con su rótulo y las piezas de los tres
   formularios. Ni un color escrito a mano: todo sale de las fichas de
   base.css, y por eso el tema oscuro funciona sin una línea más.

   Se enlaza DESPUÉS de base.css y ANTES de `/estilo/fuentes.css`, que va al
   final porque redefine las familias con sus métricas de respaldo.
   ============================================================ */

/* ============================================================
   1. El documento legal
   ============================================================ */
.legal-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
/* A partir de 62rem el índice sube a la derecha y se queda a la vista al
   bajar. En el móvil va DEBAJO del texto: arriba empujaba el documento media
   pantalla hacia abajo para enseñar cinco enlaces que casi nadie usa. */
@media (min-width: 62rem) {
  .legal-rejilla {
    grid-template-columns: minmax(0, var(--medida)) minmax(12rem, 16rem);
    justify-content: space-between;
    align-items: start;
  }
  .legal-indice { position: sticky; top: 6rem; }
}

.legal-texto { min-width: 0; }
.legal-texto > .aviso { margin-block: var(--e-5); }
.legal-texto > .aviso:first-child { margin-top: 0; }
.legal-texto h2 {
  font-size: var(--t-xl);
  margin: var(--e-7) 0 var(--e-3);
  scroll-margin-top: 6rem;
}
.legal-texto h3 { font-size: var(--t-lg); margin: var(--e-5) 0 var(--e-2); }
.legal-texto > p, .legal-texto > ul, .legal-texto > ol { color: var(--tinta-2); max-width: var(--medida); }
.legal-texto > p + p { margin-top: var(--e-3); }
.legal-texto > ul, .legal-texto > ol { padding-left: 1.25rem; margin-block: var(--e-3); display: grid; gap: var(--e-2); }
.legal-texto > p + ul, .legal-texto > ul + p { margin-top: var(--e-3); }
.legal-texto strong, .legal-texto b { color: var(--tinta); font-weight: 700; }
.legal-texto a:not(.btn), .suelta a.enlace { color: var(--marca-tinta); text-underline-offset: .15em; }

/* La lista del resumen, dentro de su aviso. `.aviso p` ya tiene su medida y
   su gris; la lista necesita los mismos y su sangría. */
.legal-resumen ul { margin-top: var(--e-2); padding-left: 1.125rem; display: grid; gap: var(--e-1); }
.legal-resumen li { color: var(--tinta-2); font-size: var(--t-sm); line-height: 1.5; }
.legal-resumen li strong { color: var(--tinta); }
.legal-resumen p { margin-top: var(--e-3); color: var(--tinta-3); }

/* LOS HUECOS SE VEN. `[TITULAR]`, `[DOMICILIO]` y compañía van en <code>, y
   <code> sale por defecto en letra de máquina, la única que la plantilla no
   admite. Se queda la caja —es lo que hace que un hueco sin rellenar no pase
   por texto definitivo—, pero con la letra del texto. */
.suelta code {
  font-family: var(--texto); font-size: .92em; font-weight: 600;
  background: var(--papel-2); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 4px;
  padding: .05em .35em;
  overflow-wrap: anywhere;
}

/* Las tablas de datos. Son `table.datos` de base.css; en el móvil base.css
   las apila pensando en la tabla de niveles, con una clave a la izquierda.
   Estas no tienen clave: cada celda es un dato con su rótulo, así que se
   apilan en una columna y el rótulo sale del `data-etiqueta` de la celda. */
.legal-texto .tabla-envoltorio { margin-block: var(--e-4) var(--e-5); }
.legal-texto table.datos { font-size: var(--t-sm); }
.legal-texto table.datos td { color: var(--tinta-2); vertical-align: top; }
.legal-texto table.datos td:first-child { color: var(--tinta); font-weight: 600; }
@media (max-width: 45rem) {
  .legal-texto table.datos tr { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
  .legal-texto table.datos td::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinta-3);
  }
  .legal-texto table.datos td:first-child::before { display: none; }
  .legal-texto table.datos td:first-child { font-size: var(--t-base); }
}

/* ---------- el índice de documentos ---------- */
.legal-indice { display: grid; gap: var(--e-3); min-width: 0; }
.legal-indice .folio { margin-bottom: 0; }
.legal-indice ul { list-style: none; display: grid; gap: 2px; }
.legal-indice a {
  display: flex; align-items: center; min-height: 2.75rem;
  padding: .375rem var(--e-3); border-radius: var(--r-sm);
  color: var(--tinta-2); text-decoration: none; font-size: var(--t-sm); font-weight: 500;
}
.legal-indice a:hover { background: var(--papel-2); color: var(--marca-tinta); }
.legal-indice a[aria-current="page"] { background: var(--marca-lavado); color: var(--marca-tinta); font-weight: 700; }
.legal-indice .pista { font-size: var(--t-sm); color: var(--tinta-3); padding-inline: var(--e-3); }
.legal-indice .pista a { display: inline; min-height: 0; padding: 0; color: var(--marca-tinta); text-decoration: underline; }
.legal-indice .pista a:hover { background: none; }

/* ============================================================
   2. El centro de ayuda
   ============================================================ */
/* Los tres compromisos, sobre el bloque de color. Heredan la tinta del bloque
   (base.css §25): un gris fijo sobre jade se ve sucio. */
.ay-compromiso {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6);
  margin-top: var(--e-6);
  font-size: var(--t-md);
}
.ay-compromiso li { display: flex; align-items: center; gap: var(--e-2); }
.ay-compromiso svg { width: 1.25rem; height: 1.25rem; flex: none; }

.ay-buscar input[type="search"] { font-size: var(--t-md); }

.ay-temas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-5); }
/* Son interruptores: el pulsado se rellena del color entero y además dice
   `aria-pressed`, porque un lavado un poco más oscuro no se distingue al sol. */
.ay-tema {
  font: inherit; font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em;
  min-height: 2.75rem; padding: 0 var(--e-4);
  border: 2px solid var(--linea); border-radius: var(--r-full);
  background: var(--papel); color: var(--tinta-2);
  cursor: pointer;
}
.ay-tema:hover { border-color: var(--seccion); color: var(--seccion-tinta); background: var(--seccion-lavado); }
.ay-tema[aria-pressed="true"] { background: var(--seccion-tinta); border-color: var(--seccion-tinta); color: var(--papel); }

.ay-lista .cuerpo ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.ay-lista .cuerpo p + p, .ay-lista .cuerpo ul + p { margin-top: var(--e-3); }
.ay-lista .cuerpo b { color: var(--tinta); }
.ay-lista .cuerpo a { color: var(--marca-tinta); }
.ay-vacio {
  padding: var(--e-6) var(--e-5); text-align: center;
  background: var(--papel); border: 2px dashed var(--linea); border-radius: var(--r-lg);
  color: var(--tinta-2);
}

.ay-form { display: grid; gap: 0; }
.ay-form .acciones { margin-top: var(--e-2); }
.ay-nota { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--tinta-3); }
.ay-form > .aviso { margin-top: var(--e-4); }
.ay-form > .aviso p { margin-top: var(--e-1); }
/* El folio es lo único que hay que copiar: en la letra de titular y con las
   cifras a la misma anchura, para que se lea sin confundir un 0 con una O. */
/* Sin partir: el folio lleva guiones y el navegador lo cortaba por ahí, y
   «SOP-» en un renglón y el número en otro se copia mal. */
.ay-folio {
  display: inline-block; white-space: nowrap;
  font-family: var(--display); font-size: var(--t-lg); font-weight: 700;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

/* ============================================================
   3. La verificación de certificados
   ============================================================ */
.ver-fila { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.ver-fila input {
  flex: 1 1 14rem; min-width: 0;
  text-transform: uppercase; letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.ver-fila .btn { flex: 0 0 auto; }
@media (max-width: 30rem) { .ver-fila .btn { flex: 1 1 100%; } }
.ver-form .campo { margin-bottom: 0; }

.ver-salida:empty { display: none; }
.ver-salida { margin-top: var(--e-5); }
/* El filo entero del color del resultado. No es adorno: quien comprueba un
   certificado está decidiendo si se fía de alguien, y «consta» y «no consta»
   tienen que distinguirse antes de leer una palabra. El chip lleva además el
   icono, para quien no separa el verde del rojo. */
.ver-resultado { border-color: var(--seccion); display: grid; gap: var(--e-3); }
.ver-resultado .chip { justify-self: start; }
.ver-resultado .chip svg { width: 1rem; height: 1rem; }
.ver-resultado h2 { font-size: var(--t-xl); overflow-wrap: anywhere; }
.ver-resultado p { color: var(--tinta-2); font-size: var(--t-sm); max-width: var(--medida); }
.ver-datos {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--e-2) var(--e-5); margin: var(--e-2) 0;
}
.ver-datos dt {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3); align-self: center;
}
.ver-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ver-datos dd.serie { letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.ver-esperando { color: var(--tinta-3); font-size: var(--t-sm); text-align: center; padding: var(--e-5); }

/* ============================================================
   4. Eliminar la cuenta
   ============================================================ */
.baja-lista { list-style: none; display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.baja-lista li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--e-3); align-items: start; color: var(--tinta-2); }
.baja-lista svg { width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--seccion-tinta); }
.baja-bloque + .baja-bloque { margin-top: var(--e-7); }
.baja-bloque > p { color: var(--tinta-2); margin-top: var(--e-3); max-width: var(--medida); }
.baja-bloque > .aviso { margin-top: var(--e-5); }
.baja-bloque > .acciones { margin-top: var(--e-5); }
.baja-bloque a:not(.btn) { color: var(--marca-tinta); }

/* ============================================================
   5. Lo común a las cuatro
   ============================================================ */
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
/* `.aviso b` es de bloque en base.css porque ahí es el titular del aviso.
   Dentro del párrafo es una negrita de la frase, y de bloque partía «Perfil →
   Descargar mis datos» en su propio renglón con el punto final colgando. */
.suelta .aviso p b { display: inline; color: var(--tinta); }
/* El glifo del aviso no cede. base.css le pone `max-width: 100%` a todo svg,
   y un porcentaje dentro de una pista `auto` cuenta como cero al repartir: a
   320 px, con el folio sin partir al lado, el icono se quedaba en un punto. */
.suelta .aviso > svg { max-width: none; }
.suelta .aviso > div { min-width: 0; }
.suelta [hidden] { display: none !important; }