/* Pulso 2027 · hoja de estilo única.
   La política de contenido es default-src 'self': sin estilos ni scripts en línea,
   sin CDN y sin fuentes externas. Todo el estilo vive aquí.
   Colores: solo las tres variables de :root; no se escriben colores sueltos.
   Los tonos derivados (ENCARGO_04) se calculan con color-mix() a partir de esas tres:
   no son colores nuevos. Donde un navegador sin color-mix() perdería contraste, va
   antes una declaración con una variable base como respaldo. */

:root {
  /* Dominante: fondo general. */
  --color-fondo: #FFFFFF;

  /* Azul institucional: encabezados, botones y enlaces.
     VALOR PROVISIONAL, EDITABLE: #0957A4 es el azul público de referencia del partido
     (Wikipedia, Module:Political party, entrada «National Action Party (Mexico)»).
     No está validado contra el manual de identidad. El logotipo presentado en octubre
     de 2025 usa un azul marino más oscuro, sin código publicado.
     Para cambiarlo, edita solo esta línea. Contraste de #0957A4 con blanco: 7.21:1
     (cumple WCAG AA y AAA). Con negro: 2.91:1, así que sobre el azul nunca va texto negro. */
  --color-acento: #0957A4;

  /* Texto. */
  --color-texto: #000000;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

/* Contenedor: márgenes laterales de 16 px en celular. */
.contenedor {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Enlace para saltar al contenido: oculto hasta recibir el foco del teclado. */
.saltar {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 8px 16px;
  background-color: var(--color-fondo);
  color: var(--color-acento);
  border: 2px solid var(--color-acento);
  z-index: 10;
}

.saltar:focus {
  top: 16px;
}

/* Encabezado. */
.encabezado {
  background-color: var(--color-acento);
  color: var(--color-fondo);
}

.encabezado .contenedor {
  padding-top: 16px;
  padding-bottom: 16px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-fondo);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.marca:hover {
  text-decoration: underline;
}

.marca:focus-visible {
  outline: 2px solid var(--color-fondo);
  outline-offset: 4px;
}

/* Contenido principal. */
.principal {
  flex: 1 0 auto;
  padding-top: 24px;
  padding-bottom: 32px;
}

h1,
h2,
h3 {
  margin: 0 0 16px;
  color: var(--color-acento);
  line-height: 1.25;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.375rem;
}

p {
  margin: 0 0 16px;
}

a {
  color: var(--color-acento);
}

a:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

/* Botones: también aplica a enlaces con apariencia de botón. */
.boton {
  display: inline-block;
  padding: 12px 16px;
  border: 2px solid var(--color-acento);
  border-radius: 4px;
  background-color: var(--color-acento);
  color: var(--color-fondo);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover {
  background-color: var(--color-fondo);
  color: var(--color-acento);
}

.boton:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

/* Etiqueta pequeña sobre un título (por ejemplo, «Error 404»). */
.etiqueta {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Texto solo para lectores de pantalla. */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Barra del encabezado: marca a la izquierda, «Salir» a la derecha. */
.encabezado__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.encabezado__salir {
  margin: 0;
}

/* Menú de sesión: «Cambiar contraseña» y «Salir» (ENCARGO_29, C4). 44 px de alto y 8 px entre
   ellos; a 390 px la barra baja a un segundo renglón (flex-wrap de .encabezado__barra). */
.encabezado__sesion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.encabezado__sesion .boton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.boton--claro {
  padding: 8px 16px;
  border-color: var(--color-fondo);
  background-color: var(--color-fondo);
  color: var(--color-acento);
}

.boton--claro:hover {
  background-color: var(--color-acento);
  color: var(--color-fondo);
}

.boton--claro:focus-visible {
  outline-color: var(--color-fondo);
}

/* Barra de contexto: Secretaría, rol y enlace para cambiarlo. */
.contexto {
  border-bottom: 2px solid var(--color-acento);
}

.contexto__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 0.875rem;
}

.contexto__dato {
  font-weight: 600;
}

.contexto__cambiar {
  margin-left: auto;
}

/* Mensajes. Sin colores extra: el error se distingue por borde y peso. */
.mensajes {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.mensaje {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 4px solid var(--color-acento);
  background-color: var(--color-fondo);
}

.mensaje--error {
  border: 2px solid var(--color-texto);
  border-left-width: 8px;
  font-weight: 600;
}

/* Formularios. */
.formulario {
  max-width: 32rem;
  margin-bottom: 24px;
}

.campo {
  margin-bottom: 16px;
}

.campo label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--color-texto);
  border-radius: 4px;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font: inherit;
}

input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="text"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

.ayuda {
  margin-top: 4px;
  font-size: 0.875rem;
}

.ayuda ul {
  margin: 0;
  padding-left: 20px;
}

.error-campo {
  margin: 4px 0 0;
  font-weight: 600;
}

/* Grupos de opciones (radios). */
.opciones {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.opciones legend {
  margin-bottom: 8px;
  font-weight: 600;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-acento);
}

/* Datos del panel y listas. */
.datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0 0 24px;
}

.datos dt {
  font-weight: 700;
}

.datos dd {
  margin: 0;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.nota {
  font-size: 0.875rem;
}

/* Pantallas medianas en adelante. */
@media (min-width: 48rem) {
  h1 {
    font-size: 2.25rem;
  }

  .principal {
    padding-top: 40px;
  }
}

/* ------------------------------------------------------------------
   Logo del PAN (parciales/logo_pan.html) junto a «Pulso 2027».
   El logo trae fondo blanco propio: va en un recuadro del color de fondo.
   ------------------------------------------------------------------ */
.marca-grupo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-pan {
  flex: none;
  display: block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--color-fondo);
}

.logo-pan img {
  display: block;
  width: 100%;
  height: 100%;
}

.logo-pan--grande {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 20px;
}

/* ------------------------------------------------------------------
   Pantalla de acceso (acceso_base.html): / y /cuentas/entrar/.
   Celular: marca arriba y tarjeta abajo. Pantallas anchas: dos columnas.
   ------------------------------------------------------------------ */
.cuerpo-acceso {
  background-color: var(--color-fondo);
  background-color: color-mix(in srgb, var(--color-acento) 4%, var(--color-fondo));
}

.acceso {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Panel de marca: acento con un degradado hacia un azul más profundo. */
.acceso__marca {
  position: relative;
  overflow: hidden;
  padding: 32px 16px 72px;
  background-color: var(--color-acento);
  background-image:
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--color-fondo) 14%, transparent) 0, transparent 45%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--color-texto) 30%, transparent) 0, transparent 55%),
    linear-gradient(160deg, var(--color-acento) 0%, color-mix(in srgb, var(--color-acento) 70%, var(--color-texto)) 100%);
  color: var(--color-fondo);
}

/* Logo y título centrados en el panel. */
.acceso__marca-contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.acceso__titulo {
  margin: 32px 0 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Trazo de pulso decorativo al pie del panel de marca. */
.acceso__trazo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  width: 100%;
  height: 56px;
  fill: none;
  stroke: var(--color-fondo);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.3;
}

.acceso__trazo polyline {
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Lado de la tarjeta. */
.acceso__panel {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 16px 24px;
}

.tarjeta {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 26rem;
  margin-top: -40px;
  padding: 32px 24px;
  border: 1px solid color-mix(in srgb, var(--color-texto) 10%, transparent);
  border-radius: 16px;
  background-color: var(--color-fondo);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--color-texto) 6%, transparent),
    0 12px 32px color-mix(in srgb, var(--color-acento) 14%, transparent);
}

.tarjeta h1 {
  margin-bottom: 8px;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}

.tarjeta__intro,
.nota--tenue,
.acceso__pie {
  color: var(--color-texto);
  color: color-mix(in srgb, var(--color-texto) 68%, var(--color-fondo));
}

.tarjeta__intro {
  margin-bottom: 24px;
}

.formulario--acceso {
  max-width: none;
  margin-bottom: 16px;
}

.formulario--acceso input[type="email"],
.formulario--acceso input[type="password"],
.formulario--acceso input[autocomplete="one-time-code"] {
  padding: 12px 14px;
  border-width: 1px;
  border-color: var(--color-texto);
  border-color: color-mix(in srgb, var(--color-texto) 50%, var(--color-fondo));
  border-radius: 8px;
}

.formulario--acceso input[type="email"]:hover,
.formulario--acceso input[type="password"]:hover,
.formulario--acceso input[autocomplete="one-time-code"]:hover {
  border-color: var(--color-acento);
}

.formulario--acceso input[type="email"]:focus-visible,
.formulario--acceso input[type="password"]:focus-visible,
.formulario--acceso input[autocomplete="one-time-code"]:focus-visible {
  border-color: var(--color-acento);
  outline: 2px solid var(--color-acento);
  outline: 3px solid color-mix(in srgb, var(--color-acento) 35%, transparent);
  outline-offset: 0;
}

.boton--bloque {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 8px;
  text-align: center;
}

.nota--tenue {
  margin: 0;
}

.tarjeta .mensaje--error {
  border-radius: 8px;
}

/* Cambio de contraseña y elegir asignación en la tarjeta de acceso (ENCARGO_19). */
.tarjeta__cuenta {
  margin: -12px 0 24px;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.tarjeta .ayuda {
  margin-top: 8px;
  color: var(--color-texto);
  color: color-mix(in srgb, var(--color-texto) 68%, var(--color-fondo));
  font-size: 0.8125rem;
  line-height: 1.45;
}

.tarjeta .ayuda ul {
  display: grid;
  gap: 2px;
}

.tarjeta .error-campo {
  margin-top: 6px;
  font-size: 0.875rem;
}

.formulario--acceso .campo--error input {
  border-width: 2px;
  border-color: var(--color-texto);
}

/* Botón de ojo de las contraseñas (ENCARGO_21, ADR-0021). Nace con «hidden» y lo muestra
   static/pulso/js/contrasena_visible.js; ninguna regla de display le gana a [hidden]. */
.campo-contrasena {
  position: relative;
}

.campo-contrasena input {
  padding-right: 56px;
}

/* Con la contraseña visible el campo es type="text": se ve igual que con type="password". */
.formulario--acceso .campo-contrasena input[type="text"] {
  padding: 12px 56px 12px 14px;
  border-width: 1px;
  border-color: var(--color-texto);
  border-color: color-mix(in srgb, var(--color-texto) 50%, var(--color-fondo));
  border-radius: 8px;
}

.formulario--acceso .campo-contrasena input[type="password"] {
  padding-right: 56px;
}

.formulario--acceso .campo-contrasena input[type="text"]:focus-visible {
  border-color: var(--color-acento);
  outline: 2px solid var(--color-acento);
  outline: 3px solid color-mix(in srgb, var(--color-acento) 35%, transparent);
  outline-offset: 0;
}

.formulario--acceso .campo--error .campo-contrasena input {
  border-width: 2px;
  border-color: var(--color-texto);
}

.ver-contrasena {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-acento);
  cursor: pointer;
}

.ver-contrasena:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 0;
}

.ver-contrasena[hidden],
.ver-contrasena svg[hidden] {
  display: none;
}

/* «Salir» o «Volver» debajo del formulario. */
.tarjeta__salir {
  margin: 0;
  font-size: 0.875rem;
  text-align: center;
}

/* Pantalla de contexto: «Cambiar contraseña» junto a «Salir» (ENCARGO_29, C4), 44 px y 8 px. */
.tarjeta__sesion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.tarjeta__sesion .boton-enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
}

.boton-enlace {
  padding: 4px;
  border: 0;
  background: none;
  color: var(--color-acento);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.boton-enlace:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

/* Asignaciones como opciones grandes, fáciles de tocar. */
.opciones--tarjeta {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}

.opcion-tarjeta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--color-texto) 22%, var(--color-fondo));
  border-radius: 10px;
  cursor: pointer;
}

.opcion-tarjeta:hover {
  border-color: var(--color-acento);
}

.opcion-tarjeta:has(input:checked) {
  border-color: var(--color-acento);
  background-color: color-mix(in srgb, var(--color-acento) 7%, var(--color-fondo));
  box-shadow: inset 0 0 0 1px var(--color-acento);
}

.opcion-tarjeta__texto {
  display: grid;
  gap: 2px;
}

.opcion-tarjeta__texto span {
  color: var(--color-texto);
  color: color-mix(in srgb, var(--color-texto) 68%, var(--color-fondo));
  font-size: 0.875rem;
}

/* Pie de la pantalla de acceso. */
.acceso__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  font-size: 0.8125rem;
  text-align: center;
}

.acceso__pie p {
  margin: 0;
}

.aviso-pruebas {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 10px;
  border: 1px solid var(--color-acento);
  border-radius: 999px;
  color: var(--color-acento);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* Pantallas anchas: dos columnas a toda la altura. */
@media (min-width: 56rem) {
  .acceso {
    flex-direction: row;
    min-height: 100vh;
  }

  .acceso__marca {
    flex: 0 0 46%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 56px 144px;
  }

  .logo-pan--grande {
    width: 160px;
    height: 160px;
    border-radius: 32px;
  }

  .acceso__titulo {
    font-size: 2.5rem;
  }

  .acceso__trazo {
    bottom: 32px;
    height: 112px;
  }

  .acceso__panel {
    flex: 1 1 auto;
    justify-content: center;
    padding: 48px 32px 24px;
  }

  .tarjeta {
    margin-top: auto;
    padding: 40px 36px;
  }

  .acceso__pie {
    margin-top: auto;
  }
}

/* ------------------------------------------------------------------
   Requisitos de la contraseña nueva (ENCARGO_43): se palomean al escribir
   (requisitos_contrasena.js). Sin JavaScript es una lista con viñetas.
   Solo las tres variables de color, como el resto de este archivo.
   ------------------------------------------------------------------ */
/* Dos columnas: cuatro requisitos en dos renglones, para que la tarjeta quepa (ENCARGO_43). */
.requisitos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.requisito {
  display: flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--color-texto) 65%, var(--color-fondo));
}

.requisito__marca {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid color-mix(in srgb, var(--color-texto) 35%, var(--color-fondo));
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.requisito--cumple {
  color: var(--color-acento);
}

.requisito--cumple .requisito__marca {
  border-color: var(--color-acento);
  background-color: var(--color-acento);
  color: var(--color-fondo);
}

.requisito--cumple .requisito__marca::before {
  content: "✓";
}

/* Pantallas anchas pero bajas (una laptop al 100 %, ENCARGO_43): la tarjeta de acceso con
   menos aire, para que «Cambiar contraseña» quepa sin desplazarse ni alejar el navegador. Los
   campos siguen midiendo 44 px o más. */
@media (min-width: 56rem) and (max-height: 56rem) {
  .acceso__panel {
    padding-top: 24px;
  }

  .tarjeta {
    padding: 28px 32px;
  }

  .tarjeta h1 {
    margin-bottom: 4px;
    font-size: 1.5rem;
  }

  .tarjeta__intro {
    margin-bottom: 16px;
  }

  .tarjeta__cuenta {
    margin: -8px 0 16px;
  }

  .formulario--acceso .campo {
    margin-bottom: 12px;
  }

  .formulario--acceso input[type="email"],
  .formulario--acceso input[type="password"],
  .formulario--acceso .campo-contrasena input[type="text"] {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .tarjeta .ayuda {
    margin-top: 6px;
  }
}

/* Más bajas todavía (1366 × 657 visibles, una laptop común): un poco menos de aire. */
@media (min-width: 56rem) and (max-height: 45rem) {
  .acceso__panel {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .tarjeta {
    padding: 20px 32px;
  }

  .tarjeta .etiqueta {
    margin-bottom: 2px;
  }

  .tarjeta__intro {
    margin-bottom: 12px;
  }

  .tarjeta__cuenta {
    margin: -6px 0 12px;
  }

  .formulario--acceso .campo {
    margin-bottom: 10px;
  }

  .campo label {
    margin-bottom: 2px;
  }

  .boton--bloque {
    padding: 12px 16px;
  }
}


/* El código del 2FA (ADR-0036; ENCARGO_43, P1): con el estilo de los demás campos de acceso,
   y los dígitos más grandes y separados para copiarlos del correo sin errores. */
.formulario--acceso input[autocomplete="one-time-code"] {
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  text-align: center;
}

.formulario--acceso input[autocomplete="one-time-code"]::placeholder {
  font-size: 1rem;
  letter-spacing: normal;
}