/* ═══════════════════════════════════════════════════════════════════
   MY RESEARCH · MARCA Y COMPONENTES COMUNES
   ───────────────────────────────────────────────────────────────────
   Único lugar donde viven los colores, la tipografía y los espaciados
   del portal, más la cabecera (.mr-*). Lo cargan TODAS las páginas,
   también los estudios: por eso aquí no hay reglas sobre etiquetas
   (body, h1, a…) que pisarían el diseño propio de cada estudio. Esas
   están en /comun/portal.css, que solo cargan las páginas del portal.

   QUIERO CAMBIAR…                       BUSCO EL BLOQUE
   un color de todo el portal            [1] COLORES
   la letra                              [2] TIPOGRAFÍA
   la cabecera (logo, menú)              [5] CABECERA
   los botones, campos y avisos          /comun/portal.css
   las tarjetas de estudio del Home      /home/vista.css

   Reglas de la casa (no se discuten pieza a pieza):
   · Colores sólidos: sin degradados, sin sombras, sin transparencias.
   · Nunca un color sobre otro de su misma familia (azul sobre azul).
   · Radio único de 8 px en botones, campos, tarjetas y paneles.
   · Sobre el azul #2167AE solo va texto blanco (5,81 : 1).
   ═══════════════════════════════════════════════════════════════════ */

/* ── [1] COLORES ──────────────────────────────────────────────────── */
/* Los mismos valores se fijan también en los huecos que el portal llena
   dentro de un estudio ([data-mr-marca] y [data-mr-usuario]): hay estudios
   que usan variables con estos nombres (--texto, --radio, --fuente…) con
   otros valores, y la marca y el menú tienen que verse igual en todos. */
:root, [data-mr-marca], [data-mr-usuario] {
  --azul: #2167ae;            /* color principal: botones, enlaces, foco */
  --azul-hover: #1a5490;
  --azul-oscuro: #23366f;     /* texto principal y bloques oscuros */
  --azul-claro: #91bfe3;
  --cerceta: #19bab6;         /* acento: antetítulos */
  --lima: #fff773;            /* acento: cifras sobre azul oscuro (10,28 : 1) */
  --paloma: #dde4e3;
  --fondo: #eceeef;           /* fondo de página (solo pantalla) */
  --blanco: #ffffff;
  --texto: #23366f;           /* 11,48 : 1 sobre blanco */
  --texto-suave: #4b5a78;     /* 6,92 : 1 sobre blanco · 6,01 : 1 sobre el fondo */
  --invertido-suave: #d6e0f0; /* texto secundario sobre azul oscuro */
  --linea-control: #6b7891;   /* borde de campos: 4,75 : 1, cumple 3 : 1 */
  --linea-tabla: #d5d9e0;     /* separación de filas en tablas densas */
  --error: #9c2738;
  --error-fondo: #fde8dc;
  --exito: #0b5e45;
  --exito-fondo: #dff3e9;
  --info: #0e4799;
  --info-fondo: #e8f1fb;

/* ── [2] TIPOGRAFÍA ───────────────────────────────────────────────── */
  --fuente: "Inter", Arial, "Helvetica Neue", Helvetica, sans-serif;

/* ── [3] MEDIDAS ──────────────────────────────────────────────────── */
  --radio: 8px;
  --ancho: 1280px;            /* ancho máximo del contenido */
  --aire: 32px;               /* margen lateral; 20 px en celular */
  --alto-barra: 72px;
  --transicion: 180ms cubic-bezier(.22, .61, .36, 1);
}
@media (max-width: 720px) { :root, [data-mr-marca], [data-mr-usuario] { --aire: 20px; --alto-barra: 64px; } }

@font-face {
  font-family: "Inter";
  src: url("/comun/fuentes/inter-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

/* ── [5] CABECERA (.mr-barra) ─────────────────────────────────────── */
/* La misma en todo el portal. En los estudios se monta solo la marca y
   el menú de la persona, dentro de la cabecera propia del estudio. */
.mr-barra {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanco);
  border-bottom: 2px solid var(--azul); /* separa la cabecera fija del contenido que pasa debajo */
}
.mr-barra__interior {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--aire);
  min-height: var(--alto-barra); display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mr-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); min-height: 44px; }
.mr-marca:hover { color: var(--texto); }
.mr-marca__icono { width: 32px; height: 32px; flex: none; display: block; }
.mr-marca__nombre { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.mr-marca__estudio { display: inline-flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 600; color: var(--texto); white-space: nowrap; }
.mr-marca__estudio::before { content: ""; width: 1px; height: 24px; background: var(--linea-control); }

.mr-nav { display: flex; align-items: center; gap: 4px; }
.mr-nav__enlace {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radio); color: var(--texto); text-decoration: none; font-size: .9375rem; font-weight: 500;
  transition: background-color var(--transicion);
}
.mr-nav__enlace svg { width: 18px; height: 18px; flex: none; }
.mr-nav__enlace:hover { background: var(--fondo); color: var(--texto); }
.mr-nav__enlace[aria-current="page"] { background: var(--azul-oscuro); color: var(--blanco); }

/* Menú de la persona: botón con sus iniciales y un panel con su correo y «Salir». */
.mr-usuario { position: relative; }
.mr-usuario__boton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 4px;
  border: 0; border-radius: var(--radio); background: transparent; color: var(--texto);
  font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer;
}
.mr-usuario__boton:hover { background: var(--fondo); }
.mr-usuario__iniciales {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radio);
  background: var(--azul-oscuro); color: var(--blanco); font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
}
.mr-usuario__flecha { width: 14px; height: 14px; transition: transform var(--transicion); }
.mr-usuario__boton[aria-expanded="true"] .mr-usuario__flecha { transform: rotate(180deg); }
.mr-usuario__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 280px;
  background: var(--blanco); border: 1px solid var(--linea-tabla); border-radius: var(--radio); padding: 8px;
}
.mr-usuario__quien { padding: 10px 12px 12px; border-bottom: 1px solid var(--linea-tabla); margin-bottom: 6px; }
.mr-usuario__correo { display: block; font-size: .875rem; font-weight: 600; word-break: break-all; }
.mr-usuario__perfil { display: block; font-size: .8125rem; color: var(--texto-suave); }
.mr-usuario__opcion {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--radio); background: transparent; color: var(--texto);
  font: inherit; font-size: .9375rem; text-decoration: none; cursor: pointer; text-align: left;
}
.mr-usuario__opcion svg { width: 18px; height: 18px; flex: none; }
.mr-usuario__opcion:hover { background: var(--fondo); color: var(--texto); }
/* En el celular las secciones viajan dentro del menú de la persona. */
.mr-usuario__solo-celular { display: none; }
@media (max-width: 720px) {
  .mr-nav__enlace--secundario { display: none; }
  .mr-usuario__solo-celular { display: flex; }
  .mr-usuario__nombre-boton { display: none; }
}
@media (max-width: 420px) {
  .mr-marca__estudio { display: none; }
}
/* Dentro de un estudio, en un celular angosto, la marca queda en su ícono:
   la barra necesita el espacio para los botones del estudio. */
@media (max-width: 480px) {
  [data-mr-marca] .mr-marca__nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


/* Firma del desarrollador (pie y acceso). */
.mr-firma { display: inline-flex; align-items: center; gap: 10px; color: var(--texto-suave); text-decoration: none; font-size: .8125rem; }
.mr-firma img { height: 18px; width: auto; display: block; }