/* ==========================================================================
   MI TEMA — Estilos generales
   ========================================================================== */

/* --------------------------------------------------------------------------
   BODY / PAGE
   -------------------------------------------------------------------------- */

body {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-body);
  background-color: var(--mt-color-white);
  line-height: var(--mt-line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   MAIN
   -------------------------------------------------------------------------- */

.mt-main {
  min-height: 60vh;
}

/* --------------------------------------------------------------------------
   HEADINGS — font Bebas Neue
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--mt-font-heading);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-heading);
  line-height: var(--mt-line-height-tight);
}

/* --------------------------------------------------------------------------
   IMÁGENES
   -------------------------------------------------------------------------- */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   FOCUS VISIBLE — accesibilidad
   El mismo anillo que reset.css (§15): primary-dark, 5,06:1 sobre blanco. Esta
   regla llega después y lo pisaba con el turquesa de marca, 2,49:1, por debajo del
   3:1 que pide WCAG 1.4.11 (auditoría de accesibilidad del 14-10, 🟠-4).
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--mt-color-primary-dark);
  outline-offset: 3px;
  border-radius: var(--mt-radius-sm);
}

/* --------------------------------------------------------------------------
   SELECCIÓN DE TEXTO
   -------------------------------------------------------------------------- */

::selection {
  /* El tono claro (#14B5C5) con texto blanco da 2,49:1 y el texto seleccionado
     se hacía difícil de leer; el oscuro sube a 5,06:1 sin cambiar de marca. */
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

/* --------------------------------------------------------------------------
   CONTAINER
   -------------------------------------------------------------------------- */

.mt-container {
  width: 100%;
  max-width: var(--mt-container-max);
  margin-inline: auto;
  padding-inline: var(--mt-container-gutter);
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.mt-404 {
  padding-block: var(--mt-space-16) var(--mt-space-24);
}

.mt-404__inner {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mt-space-5);
}

.mt-404__code {
  font-family: var(--mt-font-heading);
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: var(--mt-font-weight-regular);
  letter-spacing: var(--mt-letter-spacing-wide);
  color: var(--mt-color-border);
  line-height: 1;
  margin: 0;
  user-select: none;
}

.mt-404__title {
  font-size: var(--mt-font-size-3xl);
  letter-spacing: var(--mt-letter-spacing-wide);
  margin: 0;
}

.mt-404__message {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  line-height: var(--mt-line-height-relaxed);
  margin: 0;
}

.mt-404__search {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  width: 100%;
  max-width: 420px;
  background-color: var(--mt-color-bg-subtle);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-2) var(--mt-space-2) var(--mt-space-2) var(--mt-space-5);
  margin-top: var(--mt-space-2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mt-404__search:focus-within {
  border-color: var(--mt-color-primary);
  box-shadow: 0 0 0 3px rgba(20, 181, 197, 0.15);
}

.mt-404__search-icon {
  flex: 0 0 auto;
  color: var(--mt-color-text-secondary);
}

.mt-404__search-field {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-heading);
}

.mt-404__search-field:focus {
  outline: none;
}

.mt-404__search-submit {
  flex: 0 0 auto;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-semibold);
  letter-spacing: var(--mt-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--mt-color-white);
  background-color: var(--mt-color-primary-dark);
  border: 0;
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-2) var(--mt-space-5);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mt-404__search-submit:hover {
  background-color: var(--mt-color-primary-darker);
}

.mt-404__quicklinks {
  margin-top: var(--mt-space-6);
  padding-top: var(--mt-space-6);
  border-top: var(--mt-border);
  width: 100%;
}

.mt-404__quicklinks-label {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
  margin: 0 0 var(--mt-space-3);
}

.mt-404__quicklinks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mt-space-2);
}

.mt-404__chip {
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-heading);
  background-color: var(--mt-color-white);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-2) var(--mt-space-4);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.mt-404__chip:hover {
  border-color: var(--mt-color-primary);
  color: var(--mt-color-primary-dark);
  background-color: var(--mt-color-primary-light);
}


/* --------------------------------------------------------------------------
   SEARCH
   -------------------------------------------------------------------------- */

.mt-search {
  padding-block: var(--mt-space-12) var(--mt-space-16);
}

.mt-search__header {
  margin-bottom: var(--mt-space-8);
  padding-bottom: var(--mt-space-6);
  border-bottom: var(--mt-border);
}

.mt-search__title {
  font-size: var(--mt-font-size-3xl);
  letter-spacing: var(--mt-letter-spacing-wide);
  margin-bottom: var(--mt-space-2);
}

.mt-search__title span {
  color: var(--mt-color-primary-dark);
}

.mt-search__count {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  margin: 0;
}

.mt-search__products {
  margin-bottom: var(--mt-space-10);
}

.mt-search__results {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mt-search__item {
  padding-block: var(--mt-space-6);
  border-bottom: var(--mt-border);
}

.mt-search__item-type {
  display: inline-block;
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-bold);
  letter-spacing: var(--mt-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--mt-color-primary-dark);
  margin-bottom: var(--mt-space-1);
}

.mt-search__item-title {
  font-size: var(--mt-font-size-xl);
  letter-spacing: var(--mt-letter-spacing-wide);
  margin-bottom: var(--mt-space-2);
}

.mt-search__item-title a {
  color: var(--mt-color-text-heading);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mt-search__item-title a:hover {
  color: var(--mt-color-primary-dark);
}

.mt-search__item-excerpt {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  line-height: var(--mt-line-height-relaxed);
}

.mt-search__pagination,
.mt-archive__pagination {
  margin-top: var(--mt-space-10);
}

.mt-search__empty,
.mt-archive__empty {
  padding-block: var(--mt-space-12);
  text-align: center;
  color: var(--mt-color-text-secondary);
}

.mt-search__empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-4);
  flex-wrap: wrap;
  margin-top: var(--mt-space-6);
}

/* Formulario de búsqueda del estado "sin resultados" — mismo diseño que
   .mt-404__search, en lugar del markup por defecto de get_search_form(). */
.mt-search__form {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  width: 100%;
  max-width: 420px;
  background-color: var(--mt-color-bg-subtle);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-2) var(--mt-space-2) var(--mt-space-2) var(--mt-space-5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mt-search__form:focus-within {
  border-color: var(--mt-color-primary);
  box-shadow: 0 0 0 3px rgba(20, 181, 197, 0.15);
}

.mt-search__form-icon {
  flex: 0 0 auto;
  color: var(--mt-color-text-secondary);
}

.mt-search__form-field {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-heading);
}

.mt-search__form-field:focus {
  outline: none;
}

.mt-search__form-submit {
  flex: 0 0 auto;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-semibold);
  letter-spacing: var(--mt-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--mt-color-white);
  background-color: var(--mt-color-primary-dark);
  border: 0;
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-2) var(--mt-space-5);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mt-search__form-submit:hover {
  background-color: var(--mt-color-primary-darker);
}

/* --------------------------------------------------------------------------
   ARCHIVE (categories, dates, authors)
   -------------------------------------------------------------------------- */

.mt-archive {
  padding-block: var(--mt-space-12) var(--mt-space-16);
}

.mt-archive__header {
  margin-bottom: var(--mt-space-8);
  padding-bottom: var(--mt-space-6);
  border-bottom: var(--mt-border);
}

.mt-archive__title {
  font-size: var(--mt-font-size-4xl);
  letter-spacing: var(--mt-letter-spacing-wide);
  margin-bottom: var(--mt-space-2);
}

.mt-archive__description {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  line-height: var(--mt-line-height-relaxed);
  max-width: 60ch;
}

.mt-archive__grid {
  display: grid;
  gap: var(--mt-space-8);
}

@media (min-width: 768px) {
  .mt-archive__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .mt-archive__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mt-archive__item {
  display: flex;
  flex-direction: column;
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-lg);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mt-archive__item:hover {
  box-shadow: var(--mt-shadow-md);
  transform: translateY(-2px);
}

.mt-archive__item-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.mt-archive__item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mt-archive__item:hover .mt-archive__item-thumb img {
  transform: scale(1.04);
}

.mt-archive__item-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--mt-space-5);
  gap: var(--mt-space-2);
}

.mt-archive__item-meta {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
}

.mt-archive__item-title {
  font-size: var(--mt-font-size-xl);
  letter-spacing: var(--mt-letter-spacing-wide);
  line-height: var(--mt-line-height-snug);
  margin: 0;
}

.mt-archive__item-title a {
  color: var(--mt-color-text-heading);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mt-archive__item-title a:hover {
  color: var(--mt-color-primary-dark);
}

.mt-archive__item-excerpt {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  line-height: var(--mt-line-height-relaxed);
  flex: 1;
}

.mt-archive__item-more {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-primary-dark);
  text-decoration: none;
  margin-top: auto;
  transition: color 0.2s ease;
}

.mt-archive__item-more:hover {
  color: var(--mt-color-primary-dark);
}

/* --------------------------------------------------------------------------
   CONTADOR DE CARACTERES (textareas con maxlength — p. ej. mensaje del vale)
   -------------------------------------------------------------------------- */

.mt-char-counter {
  display: block;
  font-size: var(--mt-font-size-xs);
  line-height: 1.2;
  color: var(--mt-color-text-secondary);
  text-align: right;
  margin-top: 0.25em;
}

.mt-char-counter--warning {
  color: var(--mt-color-warning, #d97706);
}

.mt-char-counter--error {
  color: var(--mt-color-error, #dc2626);
  font-weight: var(--mt-font-weight-semibold);
}

/* --------------------------------------------------------------------------
   BOTONES GENÉRICOS — .mt-btn

   Vivían en woocommerce.css, que SOLO se carga en las páginas de WooCommerce.
   Mientras los botones solo salían allí y en el pie —que tiene sus propios
   estilos— no se notó. El día que el formulario del conector apareció en
   la página de contacto, su botón «Enviar» salió SIN NINGÚN ESTILO: fondo
   transparente, sin borde, sin relleno, 346x24 píxeles. Parecía texto suelto.

   Un botón no es un componente de la tienda: es del sitio. Por eso viven aquí,
   que se carga en todas las páginas.

   El orden de la cascada no cambia nada: las otras reglas que tocan .mt-btn
   —`button.mt-btn` y `.mt-login__actions .mt-btn`, las dos en
   woocommerce.css— tienen más especificidad, así que siguen ganando
   aunque ahora se carguen después.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   BOTONES GENÉRICOS (reutilizados en thank-you)
   -------------------------------------------------------------------------- */

.mt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-2);
  padding: var(--mt-space-3) var(--mt-space-6);
  border-radius: var(--mt-radius-pill);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  border: 2px solid transparent;
  line-height: 1;
}

.mt-btn--primary {
  background-color: var(--mt-color-primary-dark);
  color: #fff;
  border-color: var(--mt-color-primary-dark);
}

.mt-btn--primary:hover {
  background-color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
  transform: translateY(-1px);
}

.mt-btn--outline {
  background-color: transparent;
  color: var(--mt-color-text-secondary);
  border-color: var(--mt-color-border);
}

.mt-btn--outline:hover {
  color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
  transform: translateY(-1px);
}

.mt-btn--ghost {
  background-color: transparent;
  color: var(--mt-color-text-secondary);
  border-color: transparent;
  padding-inline: var(--mt-space-4);
}

.mt-btn--ghost:hover {
  color: var(--mt-color-primary-dark);
  background-color: color-mix(in srgb, var(--mt-color-primary) 8%, white);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   BOTÓN DE ENVIAR DE UN FORMULARIO DEL CONECTOR (plugin-formularios)

   El conector no pinta ningún botón propio a propósito: reutiliza .mt-btn
   .mt-btn--primary y dice a su CSS que es el tema quien los viste. Pero
   .mt-btn base es Montserrat en caja normal, y en todo el sitio los botones
   de acción —«Afegir a la cistella», «Pagar», el del boletín del pie— son
   Bebas Neue con el trazo ancho de la marca. Resultado: el «Enviar» del
   formulario de contacto era el único que hablaba con otra voz.

   El trazo sale de --mt-letter-spacing-widest, que la hoja de variables
   documenta como «titulars i botons: el valor real de la marca».

   `text-indent` con el mismo valor: el trazo también se aplica DESPUÉS de
   la última letra, y sin compensarlo el texto queda descentrado hacia la
   izquierda. Es el mismo truco que ya hace el botón del pie.

   El pie conserva su propia regla para los colores —blanco sobre el azul de
   la franja— y sigue ganando ahí por especificidad.
   -------------------------------------------------------------------------- */

.ldf-form button[type="submit"] {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-regular);
  line-height: var(--mt-line-height-none);
  letter-spacing: var(--mt-letter-spacing-wider);
  text-indent: var(--mt-letter-spacing-wider);
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   CASILLAS DE VERIFICACIÓN — una sola para todo el sitio

   Había cuatro tipos a la vez: la de los términos del checkout y la del
   alta al boletín desde el checkout, dibujadas a mano con `appearance: none`
   y el azul de la marca; la del consentimiento de los formularios, nativa y con
   `accent-color` blanco; y la de «la mateixa adreça de facturació», que ni se
   veía. Cuatro casillas para la misma acción, en tres páginas seguidas.

   Se promueve la que ya usaba el checkout, que es la que lleva el azul de
   la marca, y pasa a ser la del sitio. Las reglas concretas que la repetían
   siguen donde estaban: no molestan, dicen lo mismo y tienen más especificidad.

   ⚠️ La excepción es el boletín del pie, que va sobre el azul de la franja y
   mantiene la suya (footer.css): allí una casilla blanca con el borde blanco es
   lo que se ve, y el azul de marca sobre ese azul no se distinguiría.
   -------------------------------------------------------------------------- */

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--mt-color-border);
  border-radius: var(--mt-radius-sm);
  background-color: var(--mt-color-white);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

input[type="checkbox"]:checked {
  background-color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpolyline points='1 4 4.5 7.5 11 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--mt-color-primary-dark);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   TOASTS
   Renderizados por notices.js como #mt-toast-container > .mt-toast

   Viven aquí y no en woocommerce.css porque ya no son cosa de la tienda:
   también sacan la confirmación de los formularios del conector de formularios, y
   el de contacto y el del boletín salen en páginas donde woocommerce.css no se
   carga. Allí el toast se pintaba sin ningún estilo.
   -------------------------------------------------------------------------- */

#mt-toast-container {
  position: fixed;
  top: var(--mt-space-6);
  right: var(--mt-space-5);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-3);
  width: 360px;
  max-width: calc(100vw - var(--mt-space-10));
  pointer-events: none;
}

.admin-bar #mt-toast-container {
  top: calc(32px + var(--mt-space-5));
}

@media (max-width: 782px) {
  .admin-bar #mt-toast-container {
    top: calc(46px + var(--mt-space-4));
  }
}

@media (max-width: 639px) {
  #mt-toast-container {
    top: var(--mt-space-4);
    right: var(--mt-space-4);
    left: var(--mt-space-4);
    width: auto;
    max-width: none;
  }
}

.mt-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--mt-space-3);
  padding: var(--mt-space-4);
  background-color: var(--mt-color-bg-white);
  border-radius: var(--mt-radius-md);
  box-shadow: var(--mt-shadow-lg);
  border-left: 4px solid transparent;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(calc(100% + var(--mt-space-5)));
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform, opacity;
}

.mt-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.mt-toast.is-leaving {
  opacity: 0;
  transform: translateX(calc(100% + var(--mt-space-5)));
  transition: opacity 0.22s ease, transform 0.22s ease;
}

@media (max-width: 639px) {
  .mt-toast {
    transform: translateY(-12px);
  }
  .mt-toast.is-visible {
    transform: translateY(0);
  }
  .mt-toast.is-leaving {
    transform: translateY(-12px);
  }
}

.mt-toast--success { border-left-color: var(--mt-color-primary); }
.mt-toast--error   { border-left-color: var(--mt-color-error); }
.mt-toast--info    { border-left-color: var(--mt-color-primary); }

/* Icono */
.mt-toast__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.mt-toast--success .mt-toast__icon { color: var(--mt-color-primary-dark); }
.mt-toast--error   .mt-toast__icon { color: var(--mt-color-error); }
.mt-toast--info    .mt-toast__icon { color: var(--mt-color-primary-dark); }

/* Cuerpo del mensaje */
.mt-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}

.mt-toast__body p {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-primary);
  line-height: var(--mt-line-height-relaxed);
  margin: 0;
}

.mt-toast__body p a {
  color: var(--mt-color-primary-dark);
  font-weight: var(--mt-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Acción (botón dentro del toast) */
.mt-toast__action {
  margin-top: var(--mt-space-2);
}

.mt-toast__action a {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: var(--mt-space-2) var(--mt-space-3);
  background-color: var(--mt-color-primary-dark);
  color: #fff !important;
  border-radius: var(--mt-radius-pill);
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-semibold);
  text-decoration: none !important;
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

.mt-toast__action a:hover {
  background-color: var(--mt-color-primary-dark);
}

/* Deshacer una eliminación: acción secundaria, no debe competir con el CTA
   principal («Veure la cistella»). Ancho al contenido y estilo de contorno. */
.mt-toast__action--undo a {
  width: auto;
  display: inline-flex;
  background-color: transparent;
  color: var(--mt-color-primary-dark) !important;
  border: 1px solid var(--mt-color-primary-dark);
  padding: calc(var(--mt-space-2) - 1px) var(--mt-space-4);
}

.mt-toast__action--undo a:hover,
.mt-toast__action--undo a:focus-visible {
  background-color: var(--mt-color-primary-dark);
  color: #fff !important;
}

/* Botón cerrar */
.mt-toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mt-color-text-secondary);
  border-radius: var(--mt-radius-sm);
  padding: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
  margin-top: 1px;
}

.mt-toast__close:hover {
  color: var(--mt-color-text-primary);
  background-color: var(--mt-color-bg-subtle);
}

/* Barra de progreso inferior — desactivada */
.mt-toast__bar { display: none; }