/* MP360 · Componente de cierre compartido (tanda 5)
 *
 * Un único botón "Cerrar" para todas las superficies temporales (video,
 * presentación, web, placas, modales y paneles). Glifo: Núcleo Micro Bold
 * `xmark` (20 px, trazo 2), sin círculo. Se crea con MP360Cierre.crear().
 *
 * Tonos:
 *   (base)                 superficies oscuras / sobre velo → ícono blanco
 *   .mp360-cierre--oscuro  superficies claras → ícono primario
 * Posición: la decide cada superficie (reservando su espacio); acá no hay
 * position para no tapar contenido por defecto.
 */
.mp360-cierre {
  --mp360-cierre-tam: 2.75rem;                       /* 44 px de target */
  --mp360-cierre-icono-tam: 1.25rem;
  --mp360-cierre-fondo: rgb(255 255 255 / 0.1);
  --mp360-cierre-fondo-hover: rgb(255 255 255 / 0.2);
  --mp360-cierre-fondo-activo: rgb(255 255 255 / 0.26);
  --mp360-cierre-icono: var(--white, #fff);
  --mp360-cierre-foco: var(--white, #fff);

  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--mp360-cierre-tam);
  block-size: var(--mp360-cierre-tam);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button, 14px);
  background: var(--mp360-cierre-fondo);
  color: var(--mp360-cierre-icono);
  font: inherit;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.2s var(--mp360-ease-out, ease-out), color 0.2s var(--mp360-ease-out, ease-out);
}

.mp360-cierre__icono {
  display: block;
  inline-size: var(--mp360-cierre-icono-tam);
  block-size: var(--mp360-cierre-icono-tam);
  pointer-events: none;
  transition: transform 0.2s var(--mp360-ease-out, ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .mp360-cierre:hover { background: var(--mp360-cierre-fondo-hover); }
  .mp360-cierre:hover .mp360-cierre__icono { transform: scale(0.92); }
}

.mp360-cierre:active { background: var(--mp360-cierre-fondo-activo); }
.mp360-cierre:active .mp360-cierre__icono { transform: scale(0.86); }

.mp360-cierre:focus { outline: none; }
.mp360-cierre:focus-visible {
  outline: 2px solid var(--mp360-cierre-foco);
  outline-offset: 2px;
}

.mp360-cierre--oscuro {
  --mp360-cierre-fondo: var(--primary-50, #eef5f6);
  --mp360-cierre-fondo-hover: var(--primary-100, #d9e8eb);
  --mp360-cierre-fondo-activo: var(--primary-200, #b9d3d9);
  --mp360-cierre-icono: var(--primary-700, #2D5661);
  --mp360-cierre-foco: var(--primary-700, #2D5661);
}

@media (prefers-reduced-motion: reduce) {
  .mp360-cierre,
  .mp360-cierre__icono { transition: none; }
  .mp360-cierre:hover .mp360-cierre__icono,
  .mp360-cierre:active .mp360-cierre__icono { transform: none; }
}