/* =====================================================================
   EIV — Evolucion de la Identidad Visual · Fase 1  (MP-EIV1.1, 2026-07-14)
   ---------------------------------------------------------------------
   Sistema visual COMPARTIDO y UNICO. Fuente de verdad de la 2a capa de
   identidad (profundidad y calidez). Las pantallas CONSUMEN estas clases;
   ninguna redefine el tratamiento inline.  Invariante EIV:
       del sistema compartido HACIA las pantallas, nunca al reves.
   Valores sembrados desde _puerta_correo.html (MP-02c, probado en prod),
   ahora migrado para consumir este sistema.  Paleta EXISTENTE.
   Fuera de alcance de EIV-1 (diferido): color complementario nuevo,
   hover/estado-activo/pestanas, protagonismo del logo.
   ===================================================================== */

/* ── Tokens: fuente unica de los valores del sistema. Solo lo minimo para
      eliminar literales repetidos y preparar la evolucion inmediata. ── */
:root {
  --mm-surface:      #f6f6f6;                          /* fondo de pagina        */
  --mm-card-bg:      #ffffff;                          /* fondo de tarjeta       */
  --mm-border:       #e6ebf3;                          /* borde de tarjeta       */
  --mm-navy:         #1e3a5f;                          /* azul institucional     */
  --mm-shadow:       0 10px 30px rgba(30, 58, 95, 0.08); /* sombra de profundidad */
  --mm-radius:       16px;                             /* radio de tarjeta       */
  --mm-nav-h:        48px;                             /* alto del nav (base.html)*/
  --mm-card-w:       460px;                            /* ancho base de tarjeta  */
  --mm-card-w-wide:  760px;                            /* ancho para listados    */
  --mm-logo-size:    64px;                             /* identidad: encabezado  */

  /* ── CR-1 · Tipografia (F4.P3, 15_PRE_BETA_UX_DESIGN §1.2). ──
        Familia objetivo `Inter`; detras, EXACTAMENTE la pila de respaldo que
        prescribe §1.2. Inter se usa si esta disponible en el sistema.
        DECISION DEL RESPONSABLE, 2026-08-19: NO se carga Inter. Ni Google Fonts
        ni autoalojada. Rige el "o fallback adecuado" que el checklist §6:851
        autoriza de forma expresa. Motivo: cargarla desde Google seria la PRIMERA
        dependencia externa de la superficie publica --hoy no existe ninguna URL
        de terceros en ningun template-- y enviaria la IP de cada visitante a un
        tercero en cada visita; autoalojarla exige meter binarios al repositorio.
        Garantizar Inter real queda como DECISION SEPARADA, no como deuda de
        F4.P3. Que la pila viva en un token es lo que hace que, si algun dia se
        decide, sea una sola linea. */
  --mm-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── CR-2 · Sistema de espaciado (F4.P3, 15_PRE_BETA_UX_DESIGN §1.3). ──
        Base 4px. Transcripcion literal de la escala de §1.3: ni un valor mas,
        ni un valor menos. Existen para que las pantallas dejen de escribir
        literales; declararlos NO migra ninguna pantalla (eso es CR-3). */
  --mm-space-xs:   4px;    /* separacion minima entre elementos relacionados   */
  --mm-space-sm:   8px;    /* entre icono y texto, entre chips                 */
  --mm-space-md:  12px;    /* padding interno de chips, badges, botones small  */
  --mm-space-lg:  16px;    /* padding de inputs, separacion entre campos       */
  --mm-space-xl:  20px;    /* padding interno de tarjetas (mobile)             */
  --mm-space-2xl: 24px;    /* padding de tarjetas (desktop), entre secciones   */
  --mm-space-3xl: 32px;    /* separacion entre bloques de contenido            */
  --mm-space-4xl: 40px;    /* margen de seccion (mobile)                       */
  --mm-space-5xl: 48px;    /* margen de seccion (desktop)                      */
  --mm-space-6xl: 64px;    /* espaciado de pagina (top del contenido principal)*/
  --mm-space-7xl: 80px;    /* solo estado vacio o confirmacion                 */
}

/* ── Superficie de pagina: fondo suave que reduce la sensacion de vacio. ── */
.mm-surface {
  background: var(--mm-surface);
  min-height: calc(100vh - var(--mm-nav-h));
  box-sizing: border-box;
  padding: var(--mm-space-5xl) var(--mm-space-lg);   /* 48px 16px — CR-2, mismos valores */
  font-family: var(--mm-font);                       /* CR-1 — era `sans-serif` */
}

/* ── Tarjeta con profundidad: eleva el contenido sobre la superficie. ── */
.mm-card {
  max-width: var(--mm-card-w);
  margin: 0 auto;
  background: var(--mm-card-bg);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  box-shadow: var(--mm-shadow);
  padding: 40px 32px;
  box-sizing: border-box;
}

/* Variante centrada (titulo + texto breve). */
.mm-card--centrada { text-align: center; }

/* Variante ancha (listados: capacidad disponible; NO aplicada aun a P17/P29). */
.mm-card--wide { max-width: var(--mm-card-w-wide); }

/* ── Encabezado Oficial del Sistema de Tarjetas (Capa 2, MP-EIV1.2). ──
      Identidad de la tarjeta. Variante unica (96px centrado). Las pantallas
      NO definen logo/tamano/posicion: consumen el partial components/_mm_card_header.html. */
.mm-card__header { text-align: center; margin: 0 0 22px; }
.mm-card__header img { width: var(--mm-logo-size); height: auto; display: inline-block; }

/* ── Boton Oficial (Capa 3, MP-EIV3.1). Segundo componente oficial del sistema.
      Es la ACCION PRINCIPAL de una pantalla. Funciona en <button> y en <a>:
      cada reset de abajo existe para uno de los dos.
      El componente posee la IDENTIDAD (color, forma, tipografia). El LAYOUT
      (width, display en bloque, flex/gap) lo aporta la pantalla — 25 §6.
      VARIANTE UNICA: no existe .mm-btn--block; el ancho completo es layout de
      pantalla (decision del responsable, Puerta 2 de MP-EIV3.1). Una segunda
      variante exigiria evidencia — ADR-039 §3.
      SIN estados (hover/focus/active/disabled): eso es Capa 5 y requiere
      evidencia. El outline de foco del navegador NO se suprime (accesibilidad). */
.mm-btn {
  display: inline-block;
  background: var(--mm-navy);
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 10px;
  font-family: inherit;      /* <button> no hereda la fuente por si solo */
  font-size: 15px;
  font-weight: 600;
  border: none;              /* reset de <button> */
  text-decoration: none;     /* reset de <a>      */
  cursor: pointer;
}

/* ── Roles tipograficos recurrentes (minimos, sin taxonomia excesiva). ── */
.mm-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--mm-navy);
  line-height: 1.35;
  margin: 0 0 16px;
}
.mm-text {
  font-size: 15px;
  color: #333333;
  line-height: 1.6;
  margin: 0 0 12px;
}
.mm-muted {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

/* ── Realce sereno (MP-EIV2.4): destaca el nucleo de una frase de confianza
      con la VOZ de marca (navy + seminegrita), nunca con alarma. Reutiliza
      --mm-navy: NO es color nuevo (Capa 4 sigue diferida), es un rol de enfasis. */
.mm-highlight {
  color: var(--mm-navy);
  font-weight: 600;
}

/* ── RC-3 · Etiqueta asociada pero no visible (F4.P3). ──
      NO es una capa nueva del sistema: no aporta color, estado ni iconografia
      (Capas 4/5/6 siguen fuera). Es una utilidad de accesibilidad que no pinta
      nada. Existe para cumplir 15_PRE_BETA_UX_DESIGN §6:872 --"inputs con
      labels asociados (no solo placeholder)"-- SIN alterar el diseno aprobado
      de la Puerta de Correo (MP-02c), donde la pregunta la formula el copy que
      rodea al campo y un label visible seria un cambio de UX, no una correccion.
      Lectores de pantalla lo anuncian; la pantalla no lo muestra. */
.mm-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}