/* ==========================================================================
   COMPONENTES — las piezas del sistema de diseño: botones, chips, cabecera,
   pie, acciones de texto, desplegables, insignia y menú lateral. Solo roles de tokens.css.
   Se ven todas en sistema/guia/. Las hojas de cada pantalla viven en el tema.
   ========================================================================== */

@layer componentes {
  /* Íconos */
  .mel-icono { flex: none; width: var(--mel-icono-md); height: var(--mel-icono-md); }
  .mel-icono--sm { width: var(--mel-icono-sm); height: var(--mel-icono-sm); }
  .mel-icono--lg { width: var(--mel-icono-lg); height: var(--mel-icono-lg); }
  .mel-icono--xl { width: var(--mel-icono-xl); height: var(--mel-icono-xl); } /* el protagonista de una ventana */

  /* Bandera de país: cabecera, pie y lista de países. Vive aquí y no en listado.css porque la
     cabecera y el pie salen en TODAS las páginas: la ficha no carga listado.css y su bandera
     salía cuadrada y deformada (25 × 25, sin radio, estirada). Va en círculo, así que el recorte
     es cuadrado: el dibujo original es 4:3 y `cover` se come un 12,5 % por cada lado, que en las
     tres banderas son franjas lisas. El contorno fino evita que el blanco de Ecuador o de México
     se pierda contra el fondo. El tamaño de cada sitio lo ponen sus reglas (.cabecera__pais,
     .pie__pais); este, 32 px, es el de la lista de países. */
  .bandera { flex: none; width: var(--mel-bandera); height: var(--mel-bandera); aspect-ratio: 1; object-fit: cover; border-radius: var(--mel-radio-pildora); box-shadow: var(--mel-contorno-fino) var(--mel-color-borde); }

  /* Cabecera */
  .cabecera { background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); }
  /* En la columna del sitio (decisión 0029) la barra violeta sigue llegando a los dos bordes de la pantalla; lo de
     dentro (logotipo, bandera, botones) se queda en la columna. La imagen del borde la pinta hacia los lados por
     fuera de la caja: no ocupa sitio, no recorta nada y no da desplazamiento de lado. */
  :root[data-mel-columna] .cabecera { border-image: linear-gradient(var(--mel-color-marca) 0 0) fill 0 / / 0 var(--mel-sangrado); }
  .cabecera__in { min-height: var(--mel-cabecera-alto); display: flex; align-items: center; justify-content: space-between; gap: var(--mel-espacio-grupo); }
  /* El dibujo mide 13,8 px de alto: el enlace necesita su propia area tactil (WCAG 2.5.8). */
  .cabecera__marca { display: inline-flex; align-items: center; min-height: var(--mel-tactil-min); color: inherit; text-decoration: none; }
  .cabecera__logo { display: block; width: var(--mel-logo-sm); height: auto; }
  /* La bandera va pegada al logotipo, no al botón: ambas dicen quiénes somos y dónde
     estás, y el botón es otra cosa. Se ve de 25 px y se toca en 30, como el botón compacto. */
  /* El empuje va SOLO aquí: así la bandera se queda pegada al logotipo y es ella quien
     manda el botón a la derecha. Con el empuje también en el logotipo, el espacio se
     repartía y la bandera quedaba flotando en medio. */
  .cabecera__pais { position: relative; display: inline-flex; margin-inline-end: auto; }
  .cabecera__pais .bandera { width: var(--mel-bandera-sm); height: var(--mel-bandera-sm); }
  /* Sobre el violeta, el filo gris de la bandera no se ve: aquí es blanco. */
  [data-sobre-marca] .bandera { box-shadow: var(--mel-contorno-fino) var(--mel-color-texto-inverso); }
  .cabecera__pais::after { content: ""; position: absolute; inset: calc((var(--mel-tactil-min) - var(--mel-bandera-sm)) / -2); }
  /* «Ingresar» y «Menú»: solo el ícono, en blanco sobre el violeta (Sebas, 2026-10-04). El grupo se corre a la
     derecha lo que el área táctil le saca al dibujo, para que el menú quede alineado con el borde, como el logotipo. */
  .cabecera__acciones { display: flex; align-items: center; gap: var(--mel-espacio-dentro); margin-inline-end: calc((var(--mel-cabecera-icono) - var(--mel-tactil-min)) / 2); }
  .cabecera__accion .mel-icono { width: var(--mel-cabecera-icono); height: var(--mel-cabecera-icono); }
  .cabecera__accion { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--mel-tactil-min); min-block-size: var(--mel-tactil-min); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }

  /* Botones */
  /* `padding: 0 X` y no `padding-inline`: el navegador le pone 1 px arriba y abajo a todo
     <button>, y esos dos valores no salen de ningún token. El alto lo manda min-height. */
  .boton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--mel-espacio-dentro); min-height: var(--mel-control-alto); padding: 0 var(--mel-espacio-seccion); border: 0; border-radius: var(--mel-radio-sm); font-weight: var(--mel-peso-medio); text-decoration: none; cursor: pointer; transition: background-color var(--mel-mov-rapido) var(--mel-curva-entra); }
  .boton--marca { background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); }
  .boton--marca:hover { background: var(--mel-color-marca-presionado); }
  .boton--marca:active { background: var(--mel-color-marca-activo); }
  .boton--whatsapp { background: var(--mel-color-whatsapp); color: var(--mel-color-texto-inverso); }
  .boton--whatsapp:hover, .boton--whatsapp:active { background: var(--mel-color-whatsapp-presionado); }
  .boton--claro { background: var(--mel-color-fondo); color: var(--mel-color-enlace); }
  .boton--claro:hover { background: var(--mel-color-marca-suave); }
  /* Compacto: se ve como en el sitio actual (26 px); el ÁREA táctil se extiende aparte. */
  .boton--compacto { min-height: var(--mel-control-alto-compacto); padding: 0 var(--mel-pildora-relleno); border-radius: var(--mel-radio-pildora); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-micro); }
  .boton--compacto::after { content: ""; position: absolute; inset-inline: 0; inset-block: calc((var(--mel-tactil-min) - var(--mel-control-alto-compacto)) / -2); }
  .chip[href]::after { content: ""; position: absolute; inset-inline: 0; inset-block: calc((var(--mel-tactil-min) - var(--mel-chip-alto)) / -2); }
  .botones-par { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--mel-espacio-dentro); }

  /* Chips */
  .chips { display: flex; flex-wrap: wrap; gap: var(--mel-espacio-dentro); list-style: none; padding: 0; }
  .chip { position: relative; display: inline-flex; align-items: center; gap: var(--mel-espacio-dentro-min); min-height: var(--mel-chip-alto); padding-inline: var(--mel-espacio-grupo); border: var(--mel-borde-fino) solid var(--mel-color-marca-borde); border-radius: var(--mel-radio-pildora); color: var(--mel-color-enlace); font-size: var(--mel-texto-pequeno); text-decoration: none; }
  .chip--activo { background: var(--mel-color-marca-suave); }

  /* Botón que se lee como un enlace, dentro de una frase. Es un <button> y no un <a>
     porque no lleva a ninguna parte: abre algo aquí mismo. */
  .enlace-texto { padding: 0; border: 0; background: none; color: var(--mel-color-enlace); font: inherit; text-decoration: underline; text-underline-offset: var(--mel-espacio-optico); cursor: pointer; }

  /* Acción de texto (Leer más, Compartir, Reportar) */
  .enlace-accion { display: inline-flex; align-items: center; gap: var(--mel-espacio-dentro); min-height: var(--mel-fila-enlace); padding: 0; border: 0; background: none; color: var(--mel-color-enlace); font-weight: var(--mel-peso-semi); text-decoration: none; cursor: pointer; }
  .enlace-accion--centro { display: flex; justify-content: center; margin-inline: auto; font-weight: var(--mel-peso-medio); }

  /* Punto de estado. El anillo que late dice «esto es de ahora» sin una palabra. Late
     lento a propósito, y si la persona pidió menos movimiento se queda quieto solo. */
  .punto { position: relative; flex: none; width: var(--mel-punto); height: var(--mel-punto); border-radius: var(--mel-radio-pildora); background: var(--mel-color-en-vivo); }
  .punto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: mel-latido var(--mel-mov-latido) var(--mel-curva-sale) infinite; }
  @keyframes mel-latido { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

  /* Textos de apoyo */
  .etiqueta { margin-top: var(--mel-espacio-seccion); margin-bottom: var(--mel-espacio-dentro); font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-semi); }
  .nota { margin-top: var(--mel-espacio-titulo); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); color: var(--mel-color-texto-secundario); }
  .nota--centro { margin-top: var(--mel-espacio-seccion); text-align: center; }
  .texto-secundario { color: var(--mel-color-texto-secundario); }
  .bloque-centro { text-align: center; }
  .bloque-centro > p { margin-bottom: var(--mel-espacio-columna); }
  .bloque-centro .botones-par + .enlace-accion--centro,
  .bloque-centro .enlace-accion--centro + p,
  .bloque-centro .enlace-accion--centro + .desplegable { margin-top: var(--mel-espacio-seccion); }

  /* Ventana
     Usa <dialog> del navegador: el velo, el foco atrapado dentro, cerrar con Escape y
     el bloqueo del fondo vienen hechos. Antes esto eran cien líneas de JavaScript.
     Es la de «¿Cómo verificamos los anuncios?» de la ficha v2, aprobada por Sebas el 2026-09-26
     y desde entonces la de todo el sitio. Lo que pide al marcado:
       · se abre con showModal(); el botón que la abre lleva aria-haspopup="dialog";
       · aria-labelledby apunta al título, y el título lleva tabindex="-1" autofocus: al abrir, el
         foco va a lo que dice la ventana y no a la cruz (con un toque no aparece su anillo);
       · la cruz va en un <form method="dialog">: cierra aunque falle el JavaScript;
       · tocar el velo la cierra (lo hace el guion de cada página, mirando dónde cayó el toque). */
  /* `margin: auto` centra el <dialog>. Lo trae el navegador por defecto, pero nuestro
     reinicio (`* { margin: 0 }`) se lo quita, y la ventana salía pegada arriba a la izquierda.
     Relleno simétrico: 40 arriba y abajo, 20 a los lados (la cruz vive en la esquina y no pide más). */
  .ventana { margin: auto; width: calc(100% - var(--mel-espacio-titulo)); max-width: var(--mel-ancho-ventana); padding: var(--mel-espacio-cabecera) var(--mel-espacio-titulo); border: 0; border-radius: var(--mel-radio-md); background: var(--mel-color-fondo); color: var(--mel-color-texto); box-shadow: var(--mel-sombra-flotante); text-align: center; }
  /* Entra acercándose desde el 30 % mientras aparece, como en el sitio anterior (su zoomIn).
     Con movimiento reducido, base.css la deja casi instantánea. */
  .ventana[open] { animation: mel-ventana-acercar var(--mel-mov-lento) var(--mel-curva-entra) both; }
  .ventana::backdrop { background: var(--mel-color-velo); }
  .ventana__cerrar { position: absolute; inset-block-start: var(--mel-espacio-dentro); inset-inline-end: var(--mel-espacio-dentro); display: grid; place-items: center; width: var(--mel-tactil-min); height: var(--mel-tactil-min); padding: 0; border: 0; border-radius: var(--mel-radio-pildora); background: none; color: var(--mel-color-marca); cursor: pointer; }
  /* El ícono protagonista, 50 px: un SVG del sistema (mel_icono( …, 'xl' )) o una imagen
     (.ventana__icono, como el escudo relleno de «verificados»). */
  .ventana > .mel-icono { display: block; margin-inline: auto; color: var(--mel-color-marca); }
  .ventana__icono { display: block; width: var(--mel-icono-xl); height: var(--mel-icono-xl); margin-inline: auto; object-fit: contain; }
  /* Ícono → título 15; título → texto 10 y 10 entre párrafos (el paso de párrafo). */
  .ventana__titulo { margin-top: var(--mel-espacio-grupo); font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-negrita); color: var(--mel-color-marca); }
  /* El título recibe el foco al abrir, pero no es un control: sin anillo. */
  .ventana__titulo:focus { outline: 0; }
  /* `pretty` y no `balance`: `balance` es para títulos y en un párrafo deja renglones cortos. */
  .ventana__texto { margin-top: var(--mel-espacio-dentro); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); text-wrap: pretty; }
  @keyframes mel-ventana-acercar { from { opacity: 0; transform: scale(.3); } 50% { opacity: 1; } }
  .ventana__forma { display: grid; gap: var(--mel-espacio-dentro); margin-top: var(--mel-espacio-titulo); text-align: start; }
  /* Sin `font: inherit` ni `font-size`: los dos sobraban —los fundamentos ya los ponen a
     todo campo— y `font`, por ser una ABREVIATURA, de paso borraba el interlineado. Por eso
     el correo acababa con el del cuerpo (1,6) y el buscador con el de campo (1,5). */
  .ventana__forma select, .ventana__forma input, .ventana__forma textarea { width: 100%; min-height: var(--mel-control-alto); padding: 0 var(--mel-espacio-grupo); border: var(--mel-borde-fino) solid var(--mel-color-borde-control); border-radius: var(--mel-radio-sm); background: var(--mel-color-fondo); color: var(--mel-color-texto); }
  .ventana__forma textarea { padding-block: var(--mel-espacio-dentro); resize: vertical; }
  /* Foco de campo (auditoría 2026-10-10, opción B, aprobada por Sebas): el borde de 1 px se oscurece al color
     del texto —12,63 : 1 contra el blanco; 3,66 : 1 contra el borde sin foco— y NO sale el contorno de
     teclado de base.css. En un campo de texto `:focus-visible` se enciende también con el dedo (medido), así
     que cada toque dibujaba un doble marco morado. Con `:focus` y no `:focus-visible`: el desplegable también
     se marca cuando se abre con el dedo o el ratón. Fundamentos §8. */
  .ventana__forma :is(input, select, textarea):focus { outline: 0; border-color: var(--mel-color-texto); }
  /* Mientras no se haya elegido, lo que se lee es una PISTA, no una respuesta: el mismo gris
     que el ::placeholder del campo de al lado. Para el navegador una <option> vacía es un
     valor más, así que un desplegable sin contestar se veía igual que uno ya contestado. */
  .ventana__forma select:has(option[value=""]:checked) { font-size: var(--mel-texto-pista); color: var(--mel-color-texto-secundario); }
  .ventana__nota { font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-micro); color: var(--mel-color-texto-secundario); }
  .ventana__forma .boton { width: 100%; margin-top: var(--mel-espacio-dentro-min); }
  .ventana__aviso { margin-top: var(--mel-espacio-dentro); font-size: var(--mel-texto-pequeno); color: var(--mel-color-error); }
  .ventana__exito { margin-top: var(--mel-espacio-titulo); font-weight: var(--mel-peso-medio); color: var(--mel-color-exito); }

  /* Campo de selección
     Se le quita la apariencia nativa porque Chrome le mete un relleno propio —unos 4 px—
     que no se puede declarar ni igualar: el texto del desplegable arrancaba más a la
     derecha que el del campo de al lado y la columna quedaba desalineada. Sin ella, los dos
     empiezan en el mismo sitio y el galón lo ponemos nosotros, con el ícono del sistema
     girado un cuarto de vuelta. No responde al dedo: el que manda es el campo de debajo.
     El hueco de la derecha es el relleno propio del campo a cada lado del ícono. */
  .campo-select { position: relative; display: grid; }
  .campo-select select { appearance: none; padding-inline-end: calc(var(--mel-espacio-grupo) * 2 + var(--mel-icono-sm)); }
  .campo-select .mel-icono { position: absolute; inset-block-start: 50%; inset-inline-end: var(--mel-espacio-grupo); translate: 0 -50%; rotate: 90deg; color: var(--mel-color-texto-secundario); pointer-events: none; }

  /* «Borrar búsqueda»: la X de los buscadores en píldora (.buscador, .v2-buscador). Auditoría 2026-10-10,
     variante 2, aprobada por Sebas. Sustituye a la X nativa, que medía 12 × 12 —la mitad que cualquier
     ícono del sitio—, era azul, cambia de dibujo entre Chrome y Safari, la esconde el navegador al perder
     el foco y no sale en un campo de solo lectura (el de la ciudad). Es la cruz de «Cerrar filtros» a
     --mel-icono-lg y responde en toda su caja: de ancho, el relleno de la píldora a cada lado de un ícono
     mediano —su centro queda a la misma distancia del borde que el de la lupa de la ciudad—, y de alto,
     el del campo: 47 × 41. Va justo detrás del campo y se esconde mientras está vacío (`:placeholder-shown`:
     todo buscador lleva pista). Llega con `hidden` y la enciende listado.js: sin JavaScript no haría nada. */
  .campo-borrar { display: grid; flex: none; place-items: center; align-self: stretch; inline-size: calc(var(--mel-espacio-grupo) * 2 + var(--mel-icono-md)); padding: 0; border: 0; border-radius: var(--mel-radio-pildora); background: none; color: var(--mel-color-texto-secundario); cursor: pointer; }
  .campo-borrar[hidden], :placeholder-shown + .campo-borrar { display: none; }
  /* Todo buscador del sitio lleva la suya: la del navegador se quita en todos. */
  input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

  /* Desplegable */
  .desplegable summary { list-style: none; }
  .desplegable summary::-webkit-details-marker { display: none; }
  .desplegable__cuerpo { margin-top: var(--mel-espacio-dentro); padding: var(--mel-espacio-titulo); border-radius: var(--mel-radio-md); background: var(--mel-color-fondo-sutil); text-align: start; }
  .desplegable__cuerpo p + p { margin-top: var(--mel-espacio-dentro); }

  /* Lista de enlaces simple */
  .lista-enlaces { list-style: none; padding: 0; }
  .lista-enlaces a { display: flex; flex-direction: column; justify-content: center; min-height: var(--mel-fila-enlace); padding-block: var(--mel-espacio-dentro); border-bottom: var(--mel-borde-fino) solid var(--mel-color-borde); font-weight: var(--mel-peso-medio); text-decoration: none; }
  .lista-enlaces small { color: var(--mel-color-texto-secundario); font-weight: var(--mel-peso-normal); }

  /* Pie */
  .pie { border-top: var(--mel-borde-fino) solid var(--mel-color-borde); padding-block: var(--mel-espacio-bloque) var(--mel-espacio-seccion); }
  .pie__in { display: grid; gap: var(--mel-espacio-columna); }
  /* El logotipo lleva dos colores en el pie: «LATAM» en violeta y el resto en negro.
     La cabecera no define el acento, así que las dos palabras heredan el blanco. */
  .pie__logo { margin-bottom: var(--mel-espacio-dentro); line-height: 0; color: var(--mel-color-titulo); --mel-logo-acento: var(--mel-color-marca); }
  .pie__logo-svg { display: block; width: var(--mel-logo-md); height: auto; }
  .pie__titulo { margin-bottom: var(--mel-espacio-dentro-min); font-size: var(--mel-texto-enfasis); line-height: var(--mel-interlineado-titulo); }
  .pie__lista { list-style: none; padding: 0; }
  .pie__lista a, .pie__lista button { display: flex; align-items: center; min-height: var(--mel-fila-enlace); padding-block: var(--mel-espacio-optico); color: var(--mel-color-texto); text-decoration: none; overflow-wrap: anywhere; }
  .pie__lista button { padding-inline: 0; border: 0; background: none; text-align: start; cursor: pointer; }
  .pie__lista a:hover, .pie__lista button:hover { color: var(--mel-color-enlace); text-decoration: underline; }
  /* Cambiar de país: una fila propia encima del bloque legal. El área que responde al
     dedo es la fila entera, no solo las letras. */
  .pie__pais { display: flex; align-items: center; gap: var(--mel-espacio-dentro); min-height: var(--mel-tactil-min); color: var(--mel-color-texto); text-decoration: none; }
  /* Más pequeña que en la lista de países: allí la bandera ancla la fila, aquí solo
     acompaña al nombre, y a 32 px pesaba más que el texto al que sirve. */
  .pie__pais .bandera { width: var(--mel-bandera-sm); height: var(--mel-bandera-sm); }
  .pie__pais-nombre { font-size: var(--mel-texto-enfasis); line-height: var(--mel-interlineado-enfasis); font-weight: var(--mel-peso-medio); color: var(--mel-color-titulo); }
  .pie__pais-cambiar { font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); color: var(--mel-color-enlace); text-decoration: underline; text-underline-offset: var(--mel-espacio-optico); }

  .pie__legal { padding-top: var(--mel-espacio-columna); border-top: var(--mel-borde-fino) solid var(--mel-color-borde); display: grid; gap: var(--mel-espacio-grupo); justify-items: start; }
  .pie__rta { display: inline-flex; align-items: baseline; gap: var(--mel-espacio-dentro-min); padding: var(--mel-espacio-dentro-min) var(--mel-espacio-dentro); border-radius: var(--mel-radio-xs); background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-medio); }
  .pie__rta strong { font-size: var(--mel-texto-enfasis); font-weight: var(--mel-peso-extra); }

  /* En cuatro columnas solo donde la página se ensancha (el panel); en la columna del sitio, como en el celular. */
  @media (min-width: 1024px) {
    :root:not([data-mel-columna]) .pie__in { grid-template-columns: 2fr 1fr 1fr 1fr; }
    :root:not([data-mel-columna]) .pie__legal { grid-column: 1 / -1; }
  }

  /* Insignia «Destacado» de una tarjeta de anuncio (partes/tarjeta-anuncio.php). Estaba en listado.css; vive aquí
     porque el panel de la anunciante la usa también ("Destacado hasta …"). Las variantes de cada pantalla
     (.ciu-insignia) se quedan en su hoja. */
  .insignia { position: absolute; inset-inline-start: var(--mel-espacio-dentro); bottom: var(--mel-espacio-grupo); z-index: var(--mel-capa-elevada); padding: 0 var(--mel-espacio-dentro); border-radius: var(--mel-radio-pildora); background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-micro); }

  /* ==========================================================================
     MENÚ LATERAL — el panel que abre el botón de tres rayas de la cabecera (sitio: partes/menu-lateral.php y
     assets/js/menu.js, 2026-10-04; panel de la anunciante: components/marca/menu-panel.tsx, 2026-10-10).
     Estaba en assets/css/menu.css, solo del tema; pasa al sistema para que el sitio y el panel lean las mismas
     reglas, sin cambiar un valor. Entra desde la derecha, del lado del botón. Misma anatomía que la hoja de filtros
     (ciudad-v2.css §10): cabeza fija, cuerpo que se desplaza y pie fijo con la acción.
     ========================================================================== */
  /* El panel: toda la altura de la pantalla y, de ancho, --mel-menu-ancho como mucho, dejando siempre a
     la vista --mel-menu-respiro de página. Se le quita lo que el navegador pone a todo <dialog>: el margen
     que lo centra, el borde, el relleno y los topes de tamaño. La pantalla no se mueve detrás: lo hace
     menu.js, porque aquí el sujeto tendría que ser <html> y dentro de una capa eso no se hace (fundamentos §1.5). */
  .menu { position: fixed; inset: 0 0 0 auto; inline-size: min(var(--mel-menu-ancho), 100% - var(--mel-menu-respiro)); max-inline-size: none; block-size: auto; max-block-size: none; margin: 0; padding: 0; border: 0; background: var(--mel-color-fondo); color: var(--mel-color-texto); box-shadow: var(--mel-sombra-flotante); overflow: hidden; }
  /* En la columna del sitio se abre contra el borde derecho de la COLUMNA, no el de la pantalla: la cruz cae donde
     estaba el botón de tres rayas. En un celular la columna es toda la pantalla y el borde es el mismo. */
  :root[data-mel-columna] .menu { inset-inline-end: calc((100% - min(100%, var(--mel-columna))) / 2); }
  /* Entra en el tiempo de los paneles (lento) y frenando; sale más rápido y acelerando, como la hoja: lo
     que se va no tiene que hacerse esperar. El velo aparece y se va con él. Con movimiento reducido,
     base.css deja las dos cosas casi instantáneas. */
  .menu[open] { display: flex; flex-direction: column; animation: menu-entrar var(--mel-mov-lento) var(--mel-curva-entra) both; }
  .menu.menu--saliendo { animation: menu-salir var(--mel-mov-normal) var(--mel-curva-sale) both; }
  .menu::backdrop { background: var(--mel-color-velo); }
  .menu[open]::backdrop { animation: menu-velo-entrar var(--mel-mov-lento) var(--mel-curva-entra) both; }
  .menu.menu--saliendo::backdrop { animation: menu-velo-salir var(--mel-mov-normal) var(--mel-curva-sale) both; }
  @keyframes menu-entrar { from { transform: translateX(100%); } }
  @keyframes menu-salir { to { transform: translateX(100%); } }
  @keyframes menu-velo-entrar { from { opacity: 0; } }
  @keyframes menu-velo-salir { to { opacity: 0; } }

  /* Cabeza: del alto de la cabecera de la página, y la cruz del tamaño de sus íconos y a --mel-canal del
     borde: así cae justo donde estaba el botón de menú y se cierra tocando el mismo sitio con el que se
     abrió. La cruz se ve de 25 y se toca en 30: el área crece por fuera, como la bandera de la cabecera
     (lo visible manda; lo que responde al dedo se extiende aparte, fundamentos §5). */
  .menu__cabeza { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--mel-espacio-grupo); min-block-size: var(--mel-cabecera-alto); padding-inline: var(--mel-canal); border-block-end: var(--mel-borde-fino) solid var(--mel-color-borde); }
  .menu__cabeza > form { display: contents; }
  .menu__titulo { font-size: var(--mel-texto-subtitulo); line-height: var(--mel-interlineado-subtitulo); font-weight: var(--mel-peso-negrita); color: var(--mel-color-titulo); }
  /* El título recibe el foco al abrir (para el teclado y el lector), pero no es un control: sin anillo. */
  .menu__titulo:focus { outline: 0; }
  .menu__cerrar { position: relative; display: grid; flex: none; place-items: center; inline-size: var(--mel-cabecera-icono); block-size: var(--mel-cabecera-icono); padding: 0; border: 0; border-radius: var(--mel-radio-pildora); background: none; color: var(--mel-color-titulo); cursor: pointer; }
  .menu__cerrar::after { content: ""; position: absolute; inset: calc((var(--mel-cabecera-icono) - var(--mel-tactil-min)) / 2); }
  .menu__cerrar .mel-icono { inline-size: var(--mel-cabecera-icono); block-size: var(--mel-cabecera-icono); }

  /* Cuerpo: lo único que se desplaza. `contain`: al llegar al final, el dedo no arrastra lo de detrás. */
  .menu__cuerpo { flex: 1; padding-inline: var(--mel-canal); overflow-y: auto; overscroll-behavior: contain; }
  /* Un bloque por idea y una línea entre bloques; dentro de un bloque no hay líneas, para que sus filas se
     lean como un grupo y no como una tabla. El mismo aire a los dos lados de cada línea (15). */
  .menu__bloque { padding-block: var(--mel-espacio-grupo); }
  .menu__bloque + .menu__bloque { border-block-start: var(--mel-borde-fino) solid var(--mel-color-borde); }
  /* El nombre de un grupo es una etiqueta, no un título que compita con las filas: el más chico del menú,
     en gris y en negrita, para que no se confunda con los enlaces legales (antes medían lo mismo). Pegado a lo
     que nombra: solo 5 debajo. */
  .menu__grupo { padding-block: 0 var(--mel-espacio-dentro-min); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-micro); font-weight: var(--mel-peso-semi); color: var(--mel-color-marca); } /* morado de marca (Sebas, 2026-10-10) */

  /* Una fila: la de la lista de países y ciudades (.lista-filas, listado.css) —50 de alto, el nombre en
     énfasis y la flecha en violeta—, sin su línea. Vive aquí porque la ficha no carga listado.css. */
  .menu__filas { list-style: none; padding: 0; }
  .menu__fila { display: flex; align-items: center; gap: var(--mel-espacio-grupo); min-block-size: var(--mel-menu-fila); padding-block: 0; color: var(--mel-color-texto); text-decoration: none; }
  .menu__nombre { flex: 1; font-size: var(--mel-texto-enfasis); line-height: var(--mel-interlineado-enfasis); font-weight: var(--mel-peso-medio); color: var(--mel-color-titulo); transition: color var(--mel-mov-rapido) var(--mel-curva-entra); }
  .menu__fila .mel-icono { color: var(--mel-color-marca); }
  /* Respuesta al toque: el nombre se tiñe, como en .lista-filas (la fila entera pesaría más que la acción). */
  .menu__fila:hover .menu__nombre, .menu__fila:active .menu__nombre { color: var(--mel-color-marca); }
  /* La categoría en la que se está: violeta y un peso más. Dos señales y no solo el color (WCAG 1.4.1). */
  .menu__fila[aria-current] .menu__nombre { font-weight: var(--mel-peso-semi); color: var(--mel-color-marca); }
  /* Dos renglones (los correos): qué resuelve y, debajo, adónde va. */
  .menu__fila--doble { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-block: var(--mel-espacio-dentro-min); }
  /* Tres niveles de texto, de más a menos usado: categorías (énfasis) · ayuda (cuerpo) · legal (pequeño). */
  .menu__fila--doble .menu__nombre { flex: none; font-size: var(--mel-texto-cuerpo); line-height: var(--mel-interlineado-cuerpo); }
  .menu__detalle { font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); color: var(--mel-color-texto-secundario); overflow-wrap: anywhere; }

  /* El país: la bandera acompaña al nombre (25, como en el pie) y «Cambiar» dice qué hace el toque. */
  .menu__pais { gap: var(--mel-espacio-dentro); }
  .menu__pais .bandera { inline-size: var(--mel-bandera-sm); block-size: var(--mel-bandera-sm); }
  .menu__cambiar { font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); color: var(--mel-color-enlace); text-decoration: underline; text-underline-offset: var(--mel-espacio-optico); }

  /* Legal: lo que menos se usa, en pequeño y en gris. Cada renglón se toca en 30 (--mel-tactil-min). */
  .menu__legal { list-style: none; padding: 0; }
  .menu__legal a, .menu__legal button { display: flex; align-items: center; inline-size: 100%; min-block-size: var(--mel-tactil-min); padding: 0; border: 0; background: none; color: var(--mel-color-texto-secundario); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); text-align: start; text-decoration: none; cursor: pointer; }
  .menu__legal a:hover, .menu__legal a:active, .menu__legal button:hover, .menu__legal button:active { color: var(--mel-color-enlace); text-decoration: underline; }

  /* Pie: siempre a la vista, abajo, donde llega el pulgar. El botón a todo lo ancho y, debajo,
     «Ingresar» para quien ya publica. Respeta la barra del sistema de los iPhone sin botón. */
  .menu__pie { display: grid; flex: none; gap: var(--mel-espacio-dentro-min); padding: var(--mel-espacio-grupo) var(--mel-canal); padding-block-end: max(var(--mel-espacio-grupo), env(safe-area-inset-bottom)); border-block-start: var(--mel-borde-fino) solid var(--mel-color-borde); background: var(--mel-color-fondo); }
  .menu__ingresar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--mel-espacio-dentro-min); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); color: var(--mel-color-texto-secundario); }
  .menu__ingresar a { display: inline-flex; align-items: center; min-block-size: var(--mel-tactil-min); font-weight: var(--mel-peso-medio); color: var(--mel-color-enlace); }
}

@layer utilidades {
  .sin-linea { border-top: 0; }
  /* El título y su descripción son una sola idea: se separan con el escalón mínimo (5 px),
     no con el de "título y contenido" (20 px). Medido en el sitio: 5 y 7 px. */
  .bloque-centro .mel-seccion__titulo { margin-bottom: var(--mel-espacio-dentro-min); }
}