/* Merka — el muro y la ficha del pedido (rediseño del 28 sep 2026,
   design_handoff §2.3). Solo la cargan esas dos pantallas. */

main.mu-main { max-width: none; padding: 0; }
.mu { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; padding: 32px 0 48px; }
.mu-hilo { flex: 1 1 560px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 24px; }
.mu-lado { flex: 1 1 300px; min-width: 0; max-width: 360px; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.mu-gris { color: var(--gris); font-size: 15px; margin: 0; }
.mu-ciudad-vacia { margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; background: var(--amarillo-suave); font-size: 15px; line-height: 1.45; }
.mu-llega { margin: 0 0 17px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: var(--sombra-2); }
.mu-llega h2 { margin: 0 0 12px; font-size: 17px; }
.mu-llega-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mu-llega-item { display: flex; flex-direction: column; gap: 2px; color: var(--tinta); text-decoration: none; min-width: 0; }
.mu-llega-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--suave); }
.mu-llega-nombre { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-llega-precio { font-size: 15px; font-weight: 800; }
.mu-llega-envio { font-size: 12px; color: var(--gris); }
@media (min-width: 700px) { .mu-llega-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- El compositor: una píldora que se abre en el sitio --- */
.mu-compositor { background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); }
.mu-compositor > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.mu-compositor > summary::-webkit-details-marker { display: none; }
.mu-avatar { width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--azul); color: #fff; font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.mu-pildora { flex: 1; min-width: 0; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--suave); color: var(--gris); font-size: 17px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 160ms ease; }
.mu-compositor > summary:hover .mu-pildora { background: #efefee; }
.mu-compositor[open] > summary .mu-pildora { color: var(--tinta); font-weight: 600; background: none; padding: 0; }
.publicar { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; margin: 0; border: 0; box-shadow: none; }
/* La ventana de publicar (6 oct 2026, muro.js): centrada sobre el muro
   oscurecido; en el celular, a pantalla completa. */
.mu-ventana { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 20px; background: #fff; color: var(--tinta); box-shadow: 0 20px 50px rgba(0,0,0,.3); overflow-y: auto; }
.mu-ventana::backdrop { background: rgba(20,22,40,.55); }
.mu-ventana .publicar { padding: 0 20px 20px; }
.mu-ventana-cabeza { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px 20px; background: #fff; }
.mu-ventana-cabeza strong { font-size: 18px; }
.mu-ventana-x { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: var(--suave); color: var(--tinta); font-size: 24px; line-height: 1; cursor: pointer; }
.mu-ventana-seguro { position: sticky; top: 64px; z-index: 3; margin: 0 20px 12px; padding: 14px; border-radius: 14px; background: var(--azul); color: #fff; display: flex; flex-direction: column; gap: 10px; }
.mu-ventana-seguro[hidden] { display: none; }
.mu-ventana-seguro p { margin: 0; font-weight: 700; }
.mu-ventana-seguro div { display: flex; gap: 8px; flex-wrap: wrap; }
.mu-ventana-seguro button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; background: #fff; color: var(--tinta); }
.mu-ventana-seguro [data-descartar] { background: var(--amarillo); }
body.con-ventana { overflow: hidden; }
@media (max-width: 760px) {
  .mu-ventana { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .mu-ventana-cabeza { padding-top: calc(10px + env(safe-area-inset-top)); }
}
.mu-autor { display: flex; flex-direction: column; gap: 6px; }
/* ¿Pides o vendes? (6 oct 2026): dos botones del mismo ancho, Busco por defecto. */
.mu-tipos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--suave); }
.mu-tipos label { margin: 0; cursor: pointer; }
.mu-tipos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mu-tipos span { display: block; padding: 10px 0; border-radius: 11px; text-align: center; font-size: 17px; font-weight: 800; color: var(--gris); }
.mu-tipos input:checked + span { background: var(--azul); color: #fff; }
.mu-tipos input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.mu-publicar .si-vendo, .mu-publicar .si-regalo, .publicar:has(input[name=tipo][value=vendo]:checked) .si-busco, .publicar:has(input[name=tipo][value=regalo]:checked) .si-busco { display: none; }
.publicar:has(input[name=tipo][value=vendo]:checked) .si-vendo, .publicar:has(input[name=tipo][value=regalo]:checked) .si-regalo { display: inline; }
/* El regalo (15 oct 2026): la frase de arriba, solo con Regalo marcado. */
.mu-regalo-frase { display: none; margin: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.publicar:has(input[name=tipo][value=regalo]:checked) .mu-regalo-frase { display: block; }
.mu-regalo-precio { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--amarillo-suave); }
.mu-regalo-precio[hidden] { display: none; }
.mu-regalo-precio p { margin: 0; font-weight: 700; }
/* Los comentarios a la vista (6 oct 2026): los dos más relevantes, debajo del texto. */
.mu-coms { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mu-cmt { margin: 0; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--suave); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; display: flex; align-items: flex-start; gap: 8px; }
.mu-cmt > span { flex: 1; min-width: 0; }
.mu-cmt a { margin-right: 6px; font-size: 14px; font-weight: 800; color: var(--tinta); text-decoration: none; }
/* «Escribirle» (9 oct 2026): en la línea del comentario, a la derecha y chico; en el celular, solo el ícono. */
.mu-esc { flex: none; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--borde); border-radius: 999px; background: #fff; color: var(--morado-chat); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.mu-esc::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--mu-burbuja) no-repeat center / contain; mask: var(--mu-burbuja) no-repeat center / contain; }
.mu-esc span { display: none; }
@media (min-width: 420px) { .mu-esc span { display: inline; } }
/* «Me interesa»: una píldora del amarillo de la acción, debajo del texto. */
.mu-int { align-self: flex-start; width: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--amarillo); color: var(--tinta); font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }
.mu-int::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--mu-burbuja) no-repeat center / contain; mask: var(--mu-burbuja) no-repeat center / contain; }
.mu-int.esperando { background: var(--suave); }
/* «Lo tengo» (11 oct 2026): la caja chica de la oferta. */
.mu-caja-oferta { width: min(420px, calc(100% - 32px)); padding: 18px; border: 0; border-radius: 20px 20px 20px 6px; box-shadow: var(--sombra-2); }
.mu-caja-oferta::backdrop { background: rgba(20,22,40,.55); }
.mu-caja-oferta form { display: flex; flex-direction: column; gap: 8px; }
.mu-caja-oferta label { font-size: 15px; font-weight: 700; }
.mu-caja-oferta label span { font-weight: 400; color: var(--gris); }
.mu-caja-oferta textarea, .mu-caja-oferta input { width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--suave); font: inherit; font-size: 16px; }
.mu-caja-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.mu-caja-botones button { width: auto; min-height: 46px; padding: 10px 20px; border-radius: 14px 14px 14px 4px; background: var(--amarillo); color: var(--tinta); font: inherit; font-size: 16px; font-weight: 800; }
.mu-caja-botones .mu-caja-cerrar { background: var(--suave); font-weight: 600; }
.mu-precio { margin-right: 6px; font-weight: 800; color: var(--azul); }
.mu-mas { align-self: flex-start; padding: 6px 2px; font-size: 14px; font-weight: 700; color: var(--enlace); }
.mu-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fdecea; color: var(--error); font-size: 15px; font-weight: 600; }
.mu-negocio { align-self: center; padding: 6px; font-size: 14px; color: var(--enlace); text-align: center; }
.mu-tipo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; vertical-align: 1px; }
.mu-tipo.busca { background: var(--azul-venta); color: #fff; }
.mu-tipo.vende { background: var(--amarillo); color: var(--tinta); }
.mu-tipo.regala { background: var(--verde-aprender); color: #fff; }
.mu-regalo-aviso { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: #e8f4f2; color: #0b5a50; font-size: 14px; font-weight: 600; line-height: 1.4; }
.mu-regalo-reservado, .mu-regalo-tope { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--suave); color: var(--gris); font-size: 14px; line-height: 1.45; }
.mu-regalo-reservado { font-weight: 700; }
.mu-regalo-lista, .mu-regalo-elegido { margin: 14px 0 0; padding: 14px; border-radius: 16px; font-size: 15px; }
.mu-regalo-lista { border: 1px solid var(--linea, #e4e4e4); }
.mu-regalo-elegido { display: grid; gap: 10px; background: #e8f4f2; color: #0b5a50; }
.mu-regalo-lista h2, .mu-regalo-elegido h2 { margin: 0; font-size: 17px; }
.mu-regalo-lista > p, .mu-regalo-elegido p { margin: 4px 0 0; font-size: 14px; color: inherit; }
.mu-regalo-lista ul { margin: 6px 0 0; padding: 0; list-style: none; }
.mu-regalo-lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea, #eee); }
.mu-regalo-lista li:first-child { border-top: 0; }
.mu-regalo-quien { display: grid; min-width: 0; }
.mu-regalo-quien a { font-size: 14px; }
.mu-regalo-dar { width: auto; min-height: 0; margin: 0; padding: 9px 14px; border: 0; border-radius: 12px; background: var(--azul); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.mu-alcance-rotulo { margin: 0 0 -4px; font-size: 13px; font-weight: 600; color: var(--gris); }
.mu-alcance { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-alcance label, .mu-fondos label { display: inline-flex; margin: 0; cursor: pointer; font-weight: 400; }
.mu-alcance input, .mu-fondos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mu-alcance span { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--suave); color: var(--tinta); }
.mu-alcance input:checked + span { background: var(--azul); color: #fff; }
.mu-alcance input:focus-visible + span, .mu-fondos input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.mu-otra { align-self: flex-start; font-size: 13px; color: var(--gris); }
.mu-texto {
  width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid #e4e4e4; border-radius: 14px; background: #fff; color: var(--tinta);
  font: inherit; font-size: 19px; line-height: 1.35; resize: vertical; transition: background 160ms ease;
}
.mu-texto:focus { outline: none; box-shadow: 0 0 0 2px var(--azul); }
/* La vista previa del fondo, sin JavaScript: el radio marcado decide. Los
   colores de cada fondo vienen de la hoja de la lista (fondos.css, 6 oct 2026). */
.publicar:has(input[name=fondo]:not([value="0"]):checked) .mu-texto { min-height: 150px; padding: 20px; border: 0; font-size: 26px; font-weight: 700; text-align: center; }
.mu-fondos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Agrega a tu publicación (JC, 6 oct 2026, como en Facebook): una barra con
   el botón de colores, que abre la paleta encima, y la cámara al lado. */
.mu-herramientas { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 14px; border: 1px solid #e4e4e4; border-radius: 14px; }
.mu-herr-rotulo { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--tinta); }
.mu-herr { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border-radius: 12px; cursor: pointer; }
.mu-herr:hover { background: var(--suave); }
.mu-paleta { position: static; }
.mu-paleta > summary { list-style: none; }
.mu-paleta > summary::-webkit-details-marker { display: none; }
.mu-aa { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #ff9f1c, #ff3d7f 35%, #7a5cff 65%, #12b5cb); color: #fff; font-size: 14px; font-weight: 800; }
.mu-paleta[open] > summary { background: var(--suave); }
.mu-paleta:has(input[name=fondo]:not([value="0"]):checked) .mu-aa { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--azul); }
.mu-paleta > .mu-fondos { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(100% + 8px); display: grid; grid-template-columns: repeat(auto-fill, 32px); justify-content: space-between; gap: 10px 8px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.mu-herramientas .mu-foto-boton { align-self: center; gap: 0; padding: 0; border-radius: 12px; background: none; color: #1f8f4e; }
.mu-muestra { display: block; width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e4e4e4; }
.mu-fondos input:checked + .mu-muestra { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--azul); }
.mu-muestra.f0 { background: #fff; }
.mu-fondos .mu-gris { font-size: 13px; }
/* La foto del pedido (29 sep 2026): el botón del compositor, la foto en la
   tarjeta del muro y la grande en la ficha. */
.mu-foto-boton { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px; border-radius: 999px; background: var(--suave); color: var(--azul); font-size: 15px; font-weight: 600; cursor: pointer; }
.mu-foto-boton:hover { background: #ebecf3; }
.js .mu-foto-boton input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mu-foto-boton:focus-within { outline: 2px solid var(--azul); outline-offset: 2px; }
.mu-foto-boton .pista { display: none; }
.mu-foto-lista { margin: 0; font-size: 14px; color: var(--gris); }
.mu-foto-lista button { width: auto; min-height: 44px; margin: -12px 0; padding: 0 8px; background: none; color: var(--azul); font-size: 14px; }
.mu-foto { display: block; max-width: 100%; height: auto; margin-top: 10px; border-radius: 14px; background: var(--suave); }
.mu-foto-grande { display: block; max-width: 100%; height: auto; margin: 4px 0 12px; border-radius: 16px; background: var(--suave); }
.mu-publicar { width: 100%; min-height: 52px; padding: 14px 24px; border: 0; border-radius: 12px; background: var(--amarillo); color: var(--tinta); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.mu-publicar:hover { filter: brightness(.97); }

/* --- Las publicaciones --- */
.muro { display: flex; flex-direction: column; gap: 17px; --mu-burbuja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 8.5A3.5 3.5 0 017.5 5h17A3.5 3.5 0 0128 8.5v10a3.5 3.5 0 01-3.5 3.5H13l-6 5v-5H7.5A3.5 3.5 0 014 18.5z'/%3E%3C/svg%3E"); }
/* Entre una publicación y la otra, una línea tenue con margen a los lados (9 oct 2026). */
.muro > .publicacion { position: relative; }
.muro > .publicacion + .publicacion::before { content: ""; position: absolute; top: -9px; left: 24px; right: 24px; height: 1px; background: var(--borde); }
.publicacion { background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); padding: 16px; display: flex; flex-direction: column; gap: 10px; border: 0; }
.mu-meta { margin: 0; font-size: 13px; color: var(--gris); }
.mu-meta a { color: var(--enlace); font-weight: 600; text-decoration: none; }
/* Quién publica (9 oct 2026): la inicial en un círculo, el nombre y debajo «Ciudad · tiempo». */
.mu-cab { display: flex; align-items: center; gap: 10px; }
.mu-ini { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--suave); color: var(--azul); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; }
.mu-cab .mu-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mu-cab .mu-meta a { color: var(--tinta); font-weight: 800; font-size: 15px; }
.mu-cab .mu-tipo { flex: none; padding: 2px 10px; }
.alcance-pais { font-weight: 500; color: var(--tinta); border: 1px solid #e4e4e4; border-radius: 999px; padding: 3px 9px; }
.publicacion-texto { display: flex; flex-direction: column; gap: 6px; color: var(--tinta); text-decoration: none; }
.publicacion .pedido-titulo, .publicacion h1 { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.publicacion .cuerpo { font-size: 17px; line-height: 1.5; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.mu-con-fondo {
  display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 24px; border-radius: 12px; margin: 0;
  font-size: 26px; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere;
}
.botones { border-top: 1px solid var(--linea); padding-top: 8px; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.botones form { margin: 0; display: flex; }
.mu-accion {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 8px; min-height: 44px; border: 0; border-radius: 10px;
  background: none; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform 160ms ease, color 160ms ease;
}
.mu-accion:hover, .mu-accion:focus-visible { color: var(--azul); transform: translateY(-2px); }
.mu-accion:active { transform: scale(.92); }
.mu-accion.activo { color: var(--azul); font-weight: 700; }
.mu-accion .contador { font-weight: 700; color: inherit; }
.mu-vacio { background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.mu-vacio p { margin: 0; color: var(--gris); }

/* Los iconos de los tres botones: aquí y no en el HTML de cada tarjeta. */
.mu-accion::before { content: ""; flex: none; width: 26px; height: 26px; background: no-repeat center / contain; transition: transform 220ms cubic-bezier(.3,1.6,.5,1); }
.mu-mg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 27S4 19.6 4 12.4A6.4 6.4 0 0116 9a6.4 6.4 0 0112 3.4C28 19.6 16 27 16 27z' fill='none' stroke='%23252B60' stroke-width='2.4'/%3E%3C/svg%3E"); }
.mu-mg.activo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 27S4 19.6 4 12.4A6.4 6.4 0 0116 9a6.4 6.4 0 0112 3.4C28 19.6 16 27 16 27z' fill='%23252B60' stroke='%23252B60' stroke-width='2.4'/%3E%3C/svg%3E"); transform: scale(1.12); }
.mu-com::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 8.5A3.5 3.5 0 017.5 5h17A3.5 3.5 0 0128 8.5v10a3.5 3.5 0 01-3.5 3.5H13l-6 5v-5H7.5A3.5 3.5 0 014 18.5z' fill='%23252B60'/%3E%3Ccircle cx='11' cy='13.5' r='1.7' fill='%23fff'/%3E%3Ccircle cx='16' cy='13.5' r='1.7' fill='%23fff'/%3E%3Ccircle cx='21' cy='13.5' r='1.7' fill='%23fff'/%3E%3C/svg%3E"); }
.mu-accion.compartir::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 27c1.5-9.5 7.5-14 16-14.5V6l8 8.5-8 8.5v-6.5C13.5 17 8.5 20.5 5 27z' fill='%23f5c518'/%3E%3C/svg%3E"); }

/* --- La columna de al lado --- */
.mu-caja { background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.mu-caja h2 { margin: 0; font-size: 19px; font-weight: 700; }
.mu-tuyo { display: flex; flex-direction: column; gap: 2px; color: var(--tinta); text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.mu-tuyo strong { font-size: 17px; font-weight: 600; line-height: 1.3; }
.mu-nuevo { font-size: 13px; font-weight: 600; color: var(--enlace); }
.mu-ver { font-size: 15px; color: var(--enlace); }
.mu-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mu-mini .tj { padding: 4px; }
.mu-mini .tj-nombre { font-size: 14px; }
.mu-mini .tj-precio { font-size: 16px; }
/* El corazón, más chico en la foto chica; el área del dedo sigue en 44 px. */
.mu-mini .tj-corazon { width: 34px; height: 34px; top: 10px; right: 10px; }
.mu-mini .tj-corazon::after { inset: -5px; }

/* --- La ficha del pedido --- */
.mu-pedido { max-width: 760px; padding: 24px 0 48px; display: flex; flex-direction: column; gap: 16px; }
.mu-volver { color: var(--gris); font-size: 15px; }
.mu-aviso { background: var(--amarillo-suave); border-radius: 12px; padding: 12px 16px; font-size: 15px; }
.resuelto { align-self: flex-start; margin: 0; padding: 3px 12px; border-radius: 999px; background: #e6f4ea; color: var(--exito); font-size: 14px; font-weight: 600; }
.publicacion.ficha h1 { font-size: clamp(24px, 2.4vw, 30px); }
.publicacion.ficha h1.mu-con-fondo { font-size: 28px; }
.mio { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; font-size: 15px; }
.mio form { margin: 0; }
.mio a, .mio .boton-texto { width: auto; background: none; border: 0; padding: 0; color: var(--gris); font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.mio .peligro { color: var(--error); }
.mio.chico { margin-top: 10px; }
.mio.chico a, .mio.chico .boton-texto { font-size: 14px; }
.respuestas-titulo { margin: 12px 0 0; font-size: 22px; font-weight: 800; }
.oferta { background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); padding: 14px 16px; margin: 0; }
.oferta-quien { margin: 0 0 4px; font-size: 15px; }
.oferta-quien a { color: var(--enlace); font-weight: 600; text-decoration: none; }
.autor { font-size: 12px; font-weight: 700; padding: 1px 8px; margin-left: 6px; background: var(--amarillo); color: var(--tinta); border-radius: 999px; }
.oferta .cuerpo { margin: 0; font-size: 17px; white-space: pre-line; overflow-wrap: anywhere; }
.oferta-precio { font-weight: 800; font-size: 20px; margin: 8px 0 0; }
.chat-linea { margin: 10px 0 0; }
.boton-chat { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 12px 12px 12px 4px; background: var(--azul); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.oferta .reportar { display: inline-block; margin-top: 10px; font-size: 14px; }
.comentar { background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); padding: 16px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.comentar textarea { width: 100%; min-height: 96px; padding: 12px 14px; border: 1px solid #e4e4e4; border-radius: 12px; font: inherit; font-size: 17px; resize: vertical; }
.comentar textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--azul); }
.comentar .mu-publicar { width: auto; align-self: flex-start; min-height: 48px; }

@media (max-width: 1100px) { .mu-lado { position: static; max-width: none; } }
@media (max-width: 760px) {
  .mu { padding: 16px 16px 32px; gap: 20px; }
  .mu-pedido { padding: 16px 16px 32px; }
  .mu-hilo { gap: 16px; }
  .mu-texto { font-size: 17px; }
  /* Las tres acciones en tres columnas iguales, centradas y sin partirse
     (3 oct 2026: en un celular con la letra grande, «Compartir» bajaba a
     otra línea). Si no caben con el ícono al lado, el ícono va arriba. */
  .botones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; container-type: inline-size; }
  .botones form { display: flex; }
  .mu-accion { width: 100%; justify-content: center; gap: 5px; padding: 6px 4px; white-space: nowrap; }
  .mu-accion::before { width: 22px; height: 22px; }
}
@media (max-width: 760px) {
  /* Lo del dueño (Ya lo conseguí · Editar · Eliminar): medían 23 px de alto,
     muy chicos para el dedo. Repartidos y de 44 px. */
  .mio { justify-content: space-around; gap: 0 8px; }
  .mio a, .mio .boton-texto { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; }
}
@container (max-width: 330px) {
  .mu-accion { display: grid; grid-template-columns: auto; justify-content: center; justify-items: center; align-content: center; gap: 2px 3px; padding: 4px 2px; font-size: 13px; }
  .mu-accion:has(.contador) { grid-template-columns: auto auto; }
  .mu-accion::before { grid-column: 1 / -1; }
}

/* ==========================================================================
   Mis pedidos (§2.12): banda azul con cifras, pestañas y tarjetas.
   ========================================================================== */
main.mp-main { max-width: none; padding: 0; }
.mp { max-width: 1080px; padding: 28px 0 56px; display: flex; flex-direction: column; gap: 24px; }
.mp-banda {
  position: relative; overflow: hidden; border-radius: 24px 24px 24px 8px; padding: clamp(22px, 3vw, 36px); color: #fff;
  background: var(--azul); background-image: radial-gradient(ellipse 55% 90% at 100% 0%, rgba(255,234,65,.18) 0%, rgba(255,234,65,0) 60%), linear-gradient(135deg, #2e3572 0%, #252B60 55%, #1b2050 100%);
  box-shadow: rgba(37,43,96,.26) 0 16px 36px; display: flex; flex-direction: column; gap: 22px;
}
.mp-banda-fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.mp-rotulo { display: flex; align-items: center; gap: 8px; color: var(--amarillo); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.mp-banda h1 { margin: 10px 0; font-size: clamp(30px, 3vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -.8px; color: #fff; }
.mp-banda p { margin: 0; max-width: 48ch; font-size: 16px; color: #d9dcef; }
.mp-pedir { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 14px 14px 14px 4px; background: var(--amarillo); color: var(--tinta); font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: rgba(0,0,0,.18) 0 8px 18px; }
.mp-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.mp-cifras div { background: rgba(255,255,255,.09); border-radius: 16px 16px 16px 4px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.mp-cifras strong { font-size: 30px; font-weight: 800; line-height: 1; }
.mp-cifras strong.aviso { color: var(--amarillo); }
.mp-cifras span { font-size: 13px; color: #d9dcef; }
.mp-pestanas { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-pestanas a { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--tinta); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: var(--sombra-1); }
.mp-pestanas a span { font-size: 12px; font-weight: 700; opacity: .7; }
.mp-pestanas a[aria-current] { background: var(--azul); color: #fff; box-shadow: rgba(37,43,96,.28) 0 6px 14px; }
.mp-lista { display: flex; flex-direction: column; gap: 14px; }
.mp-tarjeta { position: relative; background: #fff; border-radius: 20px 20px 20px 6px; box-shadow: var(--sombra-2); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; transition: transform 180ms ease, box-shadow 180ms ease; }
.mp-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.mp-tarjeta.apagada .mp-titulo { color: var(--gris); }
.mp-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-linea .mu-gris { font-size: 13px; }
.mp-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; }
.mp-estado::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.mp-estado.abiertos { color: var(--exito); background: #e6f4ea; }
.mp-estado.conseguidos { color: var(--azul); background: #ececf5; }
.mp-estado.cerrados { color: var(--gris); background: var(--suave); }
.mp-nuevas { font-size: 12px; font-weight: 700; color: #fff; background: var(--enlace); border-radius: 999px; padding: 3px 9px; }
.mp-titulo { font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; line-height: 1.3; color: var(--tinta); text-decoration: none; }
.mp-titulo:hover { color: var(--azul); }
/* El vencimiento (29 sep 2026): el aviso de los últimos días, con la salida. */
.mp-vence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; border-radius: 12px; background: var(--amarillo-suave); border-left: 4px solid var(--ambar); font-size: 14px; color: var(--tinta); }
.mp-vence form { margin: 0; }
.mp-vence button { width: auto; min-height: 44px; margin: -6px 0; padding: 0 14px; border-radius: 999px; background: var(--azul); color: #fff; font-family: inherit; font-size: 14px; }
.mp-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.mp-quienes { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mp-caras { display: flex; margin-right: 2px; }
.mp-caras span { width: 28px; height: 28px; margin-left: -8px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.mp-caras span:first-child { margin-left: 0; }
.mp-caras span:nth-child(2) { background: var(--morado-chat); }
.mp-caras span:nth-child(3) { background: var(--verde-aprender); }
.mp-acciones { display: flex; align-items: center; gap: 8px; }
.mp-principal { padding: 10px 14px; border-radius: 12px 12px 12px 4px; background: var(--amarillo); color: var(--tinta); font-size: 14px; font-weight: 700; text-decoration: none; }
.mp-principal.suave { background: var(--suave); }
.mp-menu { position: relative; }
.mp-menu summary { list-style: none; width: 40px; height: 40px; border-radius: 12px; background: var(--suave); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; cursor: pointer; }
.mp-menu summary::-webkit-details-marker { display: none; }
.mp-menu [role=menu] { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 220px; background: #fff; border-radius: 14px; padding: 6px; box-shadow: var(--sombra-capa); display: flex; flex-direction: column; }
.mp-menu form { margin: 0; }
.mp-menu [role=menuitem] { display: block; width: 100%; border: 0; background: none; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 15px; color: var(--tinta); text-align: left; text-decoration: none; cursor: pointer; }
.mp-menu [role=menuitem]:hover { background: var(--suave); }
.mp-menu .peligro { color: var(--error); }
.mp-vacio { background: #fff; border-radius: 20px 20px 20px 6px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--azul); }
.mp-vacio strong { font-size: 19px; color: var(--tinta); }
.mp-vacio p { margin: 0; max-width: 40ch; font-size: 15px; color: var(--gris); }
@media (max-width: 760px) {
  .mp { padding: 16px 16px 40px; }
  .mp-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mp-cifras div { padding: 10px 12px; }
  .mp-cifras strong { font-size: 24px; }
  .mp-cifras span { font-size: 12px; }
  .mp-pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 8px; }
  .mp-pestanas a { flex: none; }
  .mp-pie { flex-direction: column; align-items: stretch; }
  .mp-acciones .mp-principal { flex: 1; text-align: center; }
}

/* La foto actual al editar un pedido (29 sep 2026). */
.ep-foto { display: block; max-width: min(100%, 240px); height: auto; margin-bottom: 8px; border-radius: 12px; }
.ep-casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-weight: 400; cursor: pointer; }
.ep-casilla input { width: 20px; height: 20px; margin: 0; }
.ep-archivo { max-width: 100%; min-height: 44px; padding: 10px 0; }

/* Un producto de Merka enlazado en el muro (6 oct 2026): foto, nombre,
   precio y el acceso. Chica, dentro de un comentario. */
.mu-vista { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid #e4e4e4; border-radius: 14px; background: #fff; color: var(--tinta); text-decoration: none; }
.mu-vista:hover { border-color: var(--azul); }
.mu-vista img { flex: none; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--suave); }
.mu-vista-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mu-vista-texto strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-vista-precio { font-size: 16px; font-weight: 800; color: var(--azul); }
.mu-vista-ver { font-size: 13px; font-weight: 700; color: var(--enlace); }
.mu-vista.chica { padding: 6px 8px; gap: 10px; }
.mu-vista.chica img { width: 44px; height: 44px; border-radius: 8px; }