/* Objetivos táctiles de 44 × 44 px en celular (la política de Sofía), sin cambiar cómo se ven.
   · Casillas y botones de opción dentro de sus contenedores habituales: el dibujo nativo (24 px o 20 px) se pinta con una máscara
     del color del tema; la caja que se toca mide 44 px y los márgenes negativos la dejan ocupar el mismo lugar en la fila.
   · El menú «⋯» de un mensaje tiene 44 px de ancho en celular. */
@media (max-width: 640px) {
  :root {
    /* casilla: marco de 2 px con esquinas redondeadas; marcada: relleno con la marca de verificación */
    --tactil-marco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cmask id='m'%3E%3Crect width='44' height='44' fill='white'/%3E%3Crect x='12' y='12' width='20' height='20' rx='2' fill='black'/%3E%3C/mask%3E%3Crect x='10' y='10' width='24' height='24' rx='4' fill='black' mask='url(%23m)'/%3E%3C/svg%3E");
    --tactil-marcada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cmask id='m'%3E%3Crect width='44' height='44' fill='white'/%3E%3Cpath d='M17.5 22.5l3.2 3.2 6-6.4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect x='10' y='10' width='24' height='24' rx='4' fill='black' mask='url(%23m)'/%3E%3C/svg%3E");
    /* botón de opción: anillo; marcado: anillo con punto central */
    --tactil-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cmask id='m'%3E%3Crect width='44' height='44' fill='white'/%3E%3Ccircle cx='22' cy='22' r='10' fill='black'/%3E%3C/mask%3E%3Ccircle cx='22' cy='22' r='12' fill='black' mask='url(%23m)'/%3E%3C/svg%3E");
    --tactil-radio-marcado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cmask id='m'%3E%3Crect width='44' height='44' fill='white'/%3E%3Ccircle cx='22' cy='22' r='10' fill='black'/%3E%3Ccircle cx='22' cy='22' r='8' fill='white'/%3E%3C/mask%3E%3Ccircle cx='22' cy='22' r='12' fill='black' mask='url(%23m)'/%3E%3C/svg%3E");
  }
  .opcion > input[type="checkbox"],
  .env-filtro-casilla > input[type="checkbox"],
  .vac-elegir > input[type="checkbox"],
  .vac-col-marca > input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box;
    width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; margin: -0.625rem; padding: 0; border: 0; border-radius: 0;
    background-color: var(--tx); cursor: pointer;
    -webkit-mask: var(--tactil-marco) center / 100% 100% no-repeat; mask: var(--tactil-marco) center / 100% 100% no-repeat;
  }
  .opcion > input[type="checkbox"]:checked,
  .env-filtro-casilla > input[type="checkbox"]:checked,
  .vac-elegir > input[type="checkbox"]:checked,
  .vac-col-marca > input[type="checkbox"]:checked {
    -webkit-mask: var(--tactil-marcada) center / 100% 100% no-repeat; mask: var(--tactil-marcada) center / 100% 100% no-repeat;
  }

  .opcion > input[type="radio"] {
    -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box;
    width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; margin: -0.625rem; padding: 0; border: 0; border-radius: 0;
    background-color: var(--tx); cursor: pointer;
    -webkit-mask: var(--tactil-radio) center / 100% 100% no-repeat; mask: var(--tactil-radio) center / 100% 100% no-repeat;
  }
  .opcion > input[type="radio"]:checked {
    -webkit-mask: var(--tactil-radio-marcado) center / 100% 100% no-repeat; mask: var(--tactil-radio-marcado) center / 100% 100% no-repeat;
  }

  .opcion > input:disabled,
  .env-filtro-casilla > input:disabled,
  .vac-elegir > input:disabled { opacity: 0.5; cursor: not-allowed; }
  .opcion > input:focus-visible,
  .env-filtro-casilla > input:focus-visible,
  .vac-elegir > input:focus-visible,
  .vac-col-marca > input:focus-visible { outline: 2px solid var(--tx); outline-offset: 2px; }

  /* El menú «⋯» de un mensaje: 44 px de ancho (antes 36) */
  .menu-acciones > .menu-disp:not(.ir-bandeja) { min-width: 2.75rem; }
}