/*
 * Solicitudes de reserva y grupos: el primer paso dentro de la ficha, la página de la solicitud (resumen, cuenta, estado, contacto,
 * respuesta y mensajes), la lista y «Grupos y despedidas».
 * Ningún color escrito a mano: todo sale de las variables --mc-* del sistema de diseño. Primero el móvil, en una columna; a partir de
 * 640 px algunas cosas se ponen en dos. Los botones y los campos ya traen su alto táctil; las casillas y sus etiquetas lo cogen aquí.
 * El estado de una solicitud se lee siempre con palabras: el color solo acompaña.
 */

/* ---- Cajas y listas comunes ---- */
.mc-res-caja { display: grid; gap: var(--mc-e-3); margin: 0 0 var(--mc-e-5); padding: var(--mc-e-4); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-m); background: var(--mc-superficie); }
.mc-res-caja > * { margin: 0; }
.mc-res-lista { display: grid; gap: var(--mc-e-2); max-width: var(--mc-medida); margin: 0; padding-left: var(--mc-e-5); }
.mc-res-botones { display: flex; flex-wrap: wrap; gap: var(--mc-e-2); }

/* ---- Las opciones que se marcan (patrón, extras, deseos, elegir un anuncio) ---- */
.mc-res-opciones { display: flex; flex-wrap: wrap; gap: var(--mc-e-2) var(--mc-e-4); }
.mc-res-opciones--lista { display: grid; gap: 0; }
.mc-res-opcion { display: flex; align-items: center; gap: var(--mc-e-2); min-height: var(--mc-tactil); cursor: pointer; }
.mc-res-opcion input { flex: none; width: 1.25em; height: 1.25em; accent-color: var(--mc-acento); }
.mc-res-opcion input:focus-visible { outline: 2px solid var(--mc-foco); outline-offset: 2px; }
.mc-res-opciones--lista .mc-res-opcion { border-bottom: 1px solid var(--mc-borde); }
.mc-res-opcion__precio { margin-left: auto; font-family: var(--mc-letra-num); white-space: nowrap; }

/* ---- La cuenta desglosada ---- */
.mc-res-cuenta { display: grid; margin: 0; }
.mc-res-cuenta__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mc-e-3); padding: var(--mc-e-2) 0; border-bottom: 1px solid var(--mc-borde); }
.mc-res-cuenta__fila dt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e-1) var(--mc-e-2); min-width: 0; }
.mc-res-cuenta__fila dd { margin: 0; font-family: var(--mc-letra-num); text-align: right; white-space: nowrap; }
.mc-res-cuenta__detalle { flex-basis: 100%; color: var(--mc-texto-2); font-size: var(--mc-t-xs); }
.mc-res-cuenta__fila--total { border-bottom-width: 2px; border-bottom-color: var(--mc-texto); font-weight: var(--mc-peso-fuerte); }
.mc-res-cuenta__fila--total dd { font-size: var(--mc-t-h3); }
.mc-res-cuenta__fila--aparte { color: var(--mc-texto-2); }
.mc-res-cuenta__fila--aparte dd { white-space: normal; }
.mc-res-cuenta__nota, .mc-res-form__nota, .mc-res-hilo__nota, .mc-res-contacto__nota { margin: var(--mc-e-2) 0 0; color: var(--mc-texto-2); font-size: var(--mc-t-xs); }
.mc-res-form__nota strong { color: var(--mc-texto); }

/* ---- El resumen de lo que se pide ---- */
.mc-res-resumen__titulo a { display: inline-flex; align-items: center; min-height: var(--mc-tactil); color: var(--mc-texto); }
.mc-res-resumen__donde { color: var(--mc-texto-2); font-size: var(--mc-t-s); }
.mc-res-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-e-3); margin: 0; }
.mc-res-datos dt { color: var(--mc-texto-2); font-size: var(--mc-t-xs); }
.mc-res-datos dd { margin: 0; font-weight: var(--mc-peso-fuerte); overflow-wrap: anywhere; }
.mc-res-resumen__sub { margin: var(--mc-e-2) 0 0; font-size: var(--mc-t-s); font-weight: var(--mc-peso-fuerte); }
.mc-res-resumen__mensaje { max-width: var(--mc-medida); overflow-wrap: anywhere; }
.mc-res-resumen__grupo { max-width: var(--mc-medida); }
.mc-res-form { max-width: var(--mc-medida); }
.mc-res-form__cuenta { color: var(--mc-texto-2); font-size: var(--mc-t-s); overflow-wrap: anywhere; }

/* ---- El estado, con palabras ---- */
.mc-res-estado { display: inline-flex; align-items: center; padding: 0 var(--mc-e-3); border: 1px solid var(--mc-texto-2); border-radius: var(--mc-r-pildora); background: var(--mc-fondo); color: var(--mc-texto); font-size: var(--mc-t-s); font-weight: var(--mc-peso-fuerte); line-height: 1.9; white-space: nowrap; }
.mc-res-estado--enviada { border-color: var(--mc-acento); color: var(--mc-acento); }
.mc-res-estado--aceptada, .mc-res-estado--terminada { border-color: var(--mc-exito); color: var(--mc-exito); }
.mc-res-estado--sin_confirmar { border-style: dashed; }
.mc-res-cabeza__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e-2) var(--mc-e-3); margin: var(--mc-e-3) 0 0; }
.mc-res-sin-contacto { display: flex; gap: var(--mc-e-2); max-width: var(--mc-medida); margin: 0 0 var(--mc-e-5); color: var(--mc-texto-2); }
.mc-res-contacto { border-color: var(--mc-exito); }
.mc-res-contacto__nombre { font-family: var(--mc-letra-titulos); font-size: var(--mc-t-m); }
.mc-res-contacto .mc-boton { overflow-wrap: anywhere; }

/* ---- Lo que cada parte puede hacer ---- */
.mc-res-acciones { display: grid; gap: var(--mc-e-4); max-width: var(--mc-medida); }
.mc-res-acciones > .mc-titulo-seccion { margin-bottom: 0; }
.mc-res-acciones__caja { display: grid; gap: var(--mc-e-3); padding: var(--mc-e-4); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-m); }
.mc-res-acciones__caja > * { margin: 0; }

/* ---- El hilo de mensajes ---- */
.mc-res-hilo { max-width: var(--mc-medida); }
.mc-res-hilo__lista { display: grid; gap: var(--mc-e-3); margin: 0 0 var(--mc-e-4); padding: 0; list-style: none; }
.mc-res-mensaje { justify-self: start; max-width: 88%; padding: var(--mc-e-3); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-m); background: var(--mc-superficie); }
.mc-res-mensaje--mio { justify-self: end; border-color: var(--mc-acento); background: var(--mc-fondo); }
.mc-res-mensaje__quien { margin: 0 0 var(--mc-e-1); color: var(--mc-texto-2); font-size: var(--mc-t-xs); }
.mc-res-mensaje__texto { margin: 0; overflow-wrap: anywhere; }
.mc-res-hilo__vacio { color: var(--mc-texto-2); }

/* ---- La lista de solicitudes ---- */
.mc-res-filas { display: grid; gap: var(--mc-e-3); margin: 0; padding: 0; list-style: none; }
.mc-res-fila { display: grid; gap: var(--mc-e-2); padding: var(--mc-e-4); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-m); background: var(--mc-fondo); }
.mc-res-fila--enviada { border-left: 4px solid var(--mc-acento); }
.mc-res-fila__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mc-e-2); }
.mc-res-fila__titulo { margin: 0; }
.mc-res-fila__titulo a { display: inline-flex; align-items: center; min-height: var(--mc-tactil); color: var(--mc-texto); }
.mc-res-fila__datos { margin: 0; overflow-wrap: anywhere; }
.mc-res-fila__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e-2) var(--mc-e-4); margin: 0; color: var(--mc-texto-2); font-size: var(--mc-t-s); }
.mc-res-fila__pie .mc-boton { margin-left: auto; }
.mc-res-fila__nuevos { color: var(--mc-acento); }

/* ---- Grupos y despedidas ---- */
.mc-res-grupo-lista { display: grid; gap: var(--mc-e-4); margin: var(--mc-e-4) 0; padding: 0; list-style: none; }
.mc-res-grupo-opcion { display: grid; grid-template-columns: 34% 1fr; overflow: hidden; border: 1px solid var(--mc-borde); border-radius: var(--mc-r-m); background: var(--mc-fondo); }
.mc-res-grupo-opcion:focus-within { outline: 2px solid var(--mc-foco); outline-offset: 2px; }
.mc-res-grupo-opcion__foto { background: var(--mc-superficie); }
.mc-res-grupo-opcion__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.mc-res-grupo-opcion__sin-foto { display: grid; place-content: center; height: 100%; min-height: 96px; color: var(--mc-texto-2); }
.mc-res-grupo-opcion__cuerpo { display: grid; align-content: start; gap: var(--mc-e-1); min-width: 0; padding: var(--mc-e-3); }
.mc-res-grupo-opcion__cuerpo > * { margin: 0; }
.mc-res-grupo-opcion__titulo a { color: var(--mc-texto); }
.mc-res-grupo-opcion__meta, .mc-res-grupo-opcion__donde, .mc-res-grupo-opcion__incluido { color: var(--mc-texto-2); font-size: var(--mc-t-s); }
.mc-res-grupo-opcion__precio { font-family: var(--mc-letra-num); }
.mc-res-grupo-opcion__precio strong { font-size: var(--mc-t-m); }
.mc-res-grupo-opcion__elegir { margin-top: var(--mc-e-1); border-top: 1px solid var(--mc-borde); font-weight: var(--mc-peso-fuerte); }
.mc-res-grupo-fuera { margin: var(--mc-e-6) 0 0; }
.mc-res-grupo-enviar { position: sticky; bottom: 0; display: grid; gap: var(--mc-e-1); padding: var(--mc-e-3) 0; border-top: 1px solid var(--mc-borde); background: var(--mc-fondo); }
.mc-res-grupo-enviar > * { margin: 0; }

@media (min-width: 640px) {
	.mc-res-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mc-res-grupo-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc-res-grupo-enviar { grid-template-columns: auto 1fr; align-items: center; gap: var(--mc-e-4); }
}
@media (min-width: 1024px) {
	.mc-res-grupo-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mc-res-grupo-opcion { grid-template-columns: 1fr; }
	.mc-res-grupo-opcion__img { height: auto; }
}