/* =============================================================================
   MENÚS — catálogo en tarjetas + referencia de precio por persona.

   Tarjetas y no tabla: un menú es un párrafo de texto con un precio, y en una
   celda de tabla ese párrafo se corta o rompe la grilla. Las columnas sirven para
   comparar números; acá lo que se compara es qué incluye cada uno.
   ============================================================================= */

.mn-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px;
  align-items:start;
}

/* ------------------------------------------------------------- tarjeta */
.mn-card{
  background:var(--card2); border:1px solid var(--line);
  border-left:3px solid var(--acc);
  border-radius:var(--r-sm); padding:14px 15px;
  display:flex; flex-direction:column; gap:9px;
  transition:border-color .14s;
}
.mn-card:hover{ border-color:var(--line2); }
/* Fuera de carta: apagado pero legible. Se sigue viendo porque explica el precio
   de los eventos que ya se vendieron con él. */
.mn-card.off{ opacity:.5; border-left-color:var(--mut); }
.mn-card .hd{ display:flex; align-items:flex-start; gap:12px; }
.mn-card .nm{ font-size:13px; font-weight:700; line-height:1.35; }
.mn-card .mt{ font-size:10.5px; color:var(--mut); margin-top:3px; }
.mn-card .pp{ text-align:right; flex:none; }
.mn-card .pp .v{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:700; white-space:nowrap;
}
.mn-card .pp .u{ font-size:9px; color:var(--faint); letter-spacing:.4px;
  text-transform:uppercase; margin-top:2px; }
.mn-card .desc{ font-size:11.5px; color:var(--dim); line-height:1.6; }
.mn-card .acts{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.mn-dif{ font-size:10px; font-weight:700; letter-spacing:.3px; }

/* Los menús servidos se pintan con el color del estado del evento, igual que las
   tarjetas del kanban: el mismo dato tiene que verse igual en toda la app. */
.mn-card.serv{ border-left-color:var(--mut); }
.mn-card.serv.presupuestado{ border-left-color:var(--amber); }
.mn-card.serv.confirmado{ border-left-color:var(--green); }
.mn-card.serv.realizado{ border-left-color:var(--blue); }

.mn-serv-n{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:22px; font-weight:800; margin-top:4px;
}

/* --------------------------------------------------- referencia de precio */
.mn-ref{ font-size:10.5px; color:var(--mut); font-family:var(--mono); }
.mn-ref-lista{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.mn-ref-fila{
  display:grid; grid-template-columns:112px minmax(60px,1fr) 168px 46px;
  align-items:center; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.mn-ref-fila:last-child{ border-bottom:0; }
.mn-ref-fila .lb{ font-size:11.5px; font-weight:600; }
/* Barra de rango: el tramo va del más barato al más caro del tipo y la marca es la
   mediana. Un solo número escondería que las cavas van de $30.000 a $284.500. */
.mn-ref-fila .rango{ position:relative; height:8px; background:rgba(255,255,255,.05);
  border-radius:4px; }
.mn-ref-fila .rango .b{ position:absolute; top:0; bottom:0; background:rgba(252,80,0,.35);
  border-radius:4px; }
.mn-ref-fila .rango .med{ position:absolute; top:-2px; width:2px; height:12px;
  background:var(--acc); border-radius:1px; }
.mn-ref-fila .vs{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.mn-ref-fila .vs .med{ display:block; font-size:12px; font-weight:700; }
.mn-ref-fila .vs .mm{ display:block; font-size:10px; color:var(--faint); }
.mn-ref-fila .n{ font-family:var(--mono); font-size:10px; color:var(--faint); text-align:right; }

/* =============================== TELÉFONO ================================== */
@media (max-width:900px){
  .mn-grid{ grid-template-columns:1fr; }
  /* En 375px la barra de rango queda en 40px y no dice nada: se cae y quedan los
     números, que sí. */
  .mn-ref-fila{ grid-template-columns:1fr auto; gap:4px 10px; }
  .mn-ref-fila .rango{ display:none; }
  .mn-ref-fila .n{ display:none; }
  .mn-ref-fila .vs{ text-align:right; }
}