/* Sistema de diseño del CIOR — estilos de componentes. Valores: siempre tokens. */
.mr-logo { display: block; width: auto; max-width: none; }
/* Logos color="auto": azul en tema claro, negativo blanco en oscuro (respeta un tema claro anidado) */
.mr-logo--oscuro { display: none !important; }
[data-theme="oscuro"] .mr-logo--oscuro { display: var(--mr-d, block) !important; }
[data-theme="oscuro"] .mr-logo--claro { display: none !important; }
[data-theme="oscuro"] [data-theme="claro"] .mr-logo--claro { display: var(--mr-d, block) !important; }
[data-theme="oscuro"] [data-theme="claro"] .mr-logo--oscuro { display: none !important; }

/* Botón */
.mr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  min-height: 44px; padding: var(--espacio-3) var(--espacio-5); border: 1px solid transparent; border-radius: var(--radio-md);
  font-family: var(--font-textos); font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.mr-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.mr-btn--primario { background: var(--azul); color: var(--blanco); }
.mr-btn--primario:hover { background: var(--azul-hover); }
.mr-btn--primario:active { background: var(--azul-presionado); }
.mr-btn--secundario { background: var(--superficie); color: var(--azul-texto); border-color: var(--linea-control); }
.mr-btn--secundario:hover { border-color: var(--azul-texto); background: var(--azul-suave); }
.mr-btn--terciario { background: transparent; color: var(--azul-texto); padding-left: var(--espacio-2); padding-right: var(--espacio-2); }
.mr-btn--terciario:hover { text-decoration: underline; text-underline-offset: 3px; }
.mr-btn--sobre-azul { background: var(--blanco); color: var(--azul); }
.mr-btn--sobre-azul:hover { color: var(--azul-hover); text-decoration: underline; text-underline-offset: 3px; }
.mr-btn--sobre-azul:focus-visible { outline-color: var(--blanco); }
.mr-btn--lg { min-height: 52px; padding: var(--espacio-4) var(--espacio-6); font-size: 17px; }
.mr-btn--full { width: 100%; }
.mr-btn:disabled, .mr-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* Íconos */
.mr-icono { flex: none; display: inline-block; vertical-align: middle; }

/* Campo de texto */
.mr-campo { display: flex; flex-direction: column; gap: var(--espacio-1); font-family: var(--font-textos); max-width: 420px; }
.mr-campo__etiqueta { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--tinta); }
.mr-campo__req { color: var(--error); }
.mr-campo__ayuda { font-size: 13px; line-height: 1.4; color: var(--tinta-suave); }
.mr-campo__control { font: inherit; font-size: 16px; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linea-control); border-radius: var(--radio-md); padding: 11px var(--espacio-3); min-height: 44px; margin-top: var(--espacio-1); }
.mr-campo__control::placeholder { color: var(--tinta-suave); }
.mr-campo__control:hover { border-color: var(--tinta-suave); }
.mr-campo__control:focus { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--azul-texto); }
.mr-campo--error .mr-campo__control { border-color: var(--error); border-width: 2px; padding: 10px 11px; }
.mr-campo__error { display: flex; gap: var(--espacio-1); align-items: center; font-size: 13px; font-weight: 600; color: var(--error); }

/* Aviso */
.mr-aviso { display: flex; gap: var(--espacio-3); padding: var(--espacio-4); border-radius: var(--radio-md); font-family: var(--font-textos); color: var(--tinta); max-width: 560px; }
.mr-aviso__titulo { font-weight: 700; font-size: 15px; line-height: 1.4; }
.mr-aviso__texto { font-size: 14px; line-height: 1.45; margin-top: 2px; }
.mr-aviso--info { background: var(--azul-suave); } .mr-aviso--info .mr-aviso__icono, .mr-aviso--info .mr-aviso__titulo { color: var(--azul-texto); }
.mr-aviso--exito { background: var(--exito-suave); } .mr-aviso--exito .mr-aviso__icono, .mr-aviso--exito .mr-aviso__titulo { color: var(--exito); }
.mr-aviso--advertencia { background: var(--advertencia-suave); } .mr-aviso--advertencia .mr-aviso__icono, .mr-aviso--advertencia .mr-aviso__titulo { color: var(--advertencia); }
.mr-aviso--error { background: var(--error-suave); } .mr-aviso--error .mr-aviso__icono, .mr-aviso--error .mr-aviso__titulo { color: var(--error); }

/* Etiqueta */
.mr-etiqueta { display: inline-flex; align-items: center; padding: 2px var(--espacio-2); border-radius: var(--radio-sm);
  font-family: var(--font-textos); font-size: 12px; font-weight: 600; line-height: 1.5; }
.mr-etiqueta--azul { background: var(--azul-suave); color: var(--azul-texto); }
.mr-etiqueta--neutro { background: var(--superficie-alt); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
.mr-etiqueta--exito { background: var(--exito-suave); color: var(--exito); }
.mr-etiqueta--advertencia { background: var(--advertencia-suave); color: var(--advertencia); }
.mr-etiqueta--error { background: var(--error-suave); color: var(--error); }
.mr-etiqueta--solido { background: var(--azul); color: var(--blanco); }

/* Volanta */
.mr-volanta { display: inline-flex; align-items: center; gap: var(--espacio-2); font-family: var(--font-titulares); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--azul-texto); }
.mr-volanta--sobre-azul { color: var(--blanco); }

/* Tarjeta */
.mr-tarjeta { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-md);
  overflow: hidden; color: var(--tinta); text-decoration: none; transition: box-shadow .2s ease; }
.mr-tarjeta--enlace:hover { box-shadow: var(--sombra-2); }
.mr-tarjeta--enlace:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.mr-tarjeta__media { aspect-ratio: 16 / 9; background: var(--superficie-alt); }
.mr-tarjeta__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr-tarjeta__cuerpo { padding: var(--espacio-5); display: flex; flex-direction: column; gap: var(--espacio-2); }
.mr-tarjeta__volanta { font-family: var(--font-titulares); font-weight: 700; font-size: 14px; color: var(--azul-texto); }
.mr-tarjeta__titulo { margin: 0; font-family: var(--font-titulares); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--tinta); }
.mr-tarjeta__texto { font-family: var(--font-textos); font-size: 14px; line-height: 1.45; color: var(--tinta-suave); }

/* Encabezado */
.mr-encabezado { display: flex; align-items: center; gap: var(--espacio-6); padding: var(--espacio-4) var(--espacio-6);
  background: var(--superficie); border-bottom: 1px solid var(--linea); font-family: var(--font-textos); }
.mr-encabezado__marca { display: block; flex: none; }
.mr-encabezado__marca:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.mr-encabezado__nav { display: flex; gap: var(--espacio-5); margin-left: auto; }
.mr-encabezado__enlace { font-size: 15px; font-weight: 600; color: var(--tinta); text-decoration: none; padding: var(--espacio-2) 0; border-bottom: 2px solid transparent; }
.mr-encabezado__enlace:hover { color: var(--azul-texto); }
.mr-encabezado__enlace.is-activo { color: var(--azul-texto); border-bottom-color: var(--azul-texto); }
.mr-encabezado__enlace:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.mr-encabezado__menu { display: none; margin-left: auto; background: none; border: 0; color: var(--tinta); padding: var(--espacio-2); cursor: pointer; }
@media (max-width: 767px) {
  .mr-encabezado { padding: var(--espacio-3) var(--espacio-4); }
  .mr-encabezado__nav, .mr-encabezado > .mr-btn { display: none; }
  .mr-encabezado__menu { display: inline-flex; }
  .mr-encabezado__marca .mr-logo { height: 40px !important; }
}

/* Pie institucional */
.mr-pie { display: grid; grid-template-columns: auto 1fr auto; gap: var(--espacio-6) var(--espacio-8); align-items: start;
  padding: var(--espacio-7) var(--espacio-6); background: var(--azul); color: var(--blanco); font-family: var(--font-textos); font-size: 14px; line-height: 1.6; }
.mr-pie__area { font-family: var(--font-titulares); font-weight: 700; font-size: 16px; margin-bottom: var(--espacio-1); }
.mr-pie__enlaces { list-style: none; margin: 0; padding: 0; }
.mr-pie a { color: var(--blanco); text-underline-offset: 3px; }
.mr-pie a:focus-visible { outline: 2px solid var(--blanco); outline-offset: 2px; }
.mr-pie__sitio { grid-column: 1 / -1; padding-top: var(--espacio-4); border-top: 1px solid rgba(255,255,255,.35); font-weight: 700; }
@media (max-width: 767px) { .mr-pie { grid-template-columns: 1fr; } }

/* Firma de secretaría */
.mr-firma { display: flex; align-items: flex-start; justify-content: space-between; }
.mr-firma__secretaria { font-family: var(--font-logotipo); font-weight: 400; line-height: 1.15; padding-top: 0.15em; }
.mr-firma--azul .mr-firma__secretaria { color: var(--azul); }
.mr-firma--negro .mr-firma__secretaria { color: var(--negro); }
.mr-firma--blanco .mr-firma__secretaria { color: var(--blanco); }
.mr-firma__sitio { font-family: var(--font-textos); font-weight: 700; font-size: .62em; margin-top: .6em; }

/* Zócalo de presentaciones */
.mr-zocalo { position: relative; overflow: hidden; width: 100%; background: linear-gradient(90deg, var(--zocalo-inicio), var(--zocalo-fin)); }
.mr-zocalo__marca-agua { position: absolute; opacity: .55; }
.mr-zocalo__logo { position: absolute; top: 50%; transform: translateY(-50%); }

/* Tema oscuro: las tarjetas suben a superficie-alt para separarse del fondo */
[data-theme="oscuro"] .mr-tarjeta { background: var(--superficie-alt); }

/* CIOR */
.mr-cior-firma { display: inline-flex; align-items: flex-start; }
.mr-cior-firma > img { display: block; width: auto; flex: none; }
.mr-cior-firma .mr-logo { flex: none; }
.mr-cior-icono { display: inline-flex; align-items: center; justify-content: center; background: var(--azul); flex: none; }
.mr-cior-icono img { display: block; }