/*
 * Estilos del kit de MaiLu (kit.js). Cada página propia los ajusta a su diseño con estas variables
 * y, si quiere, pisando las clases .mk-*.
 */
:root {
  --mailu-bg: #ffffff;
  --mailu-ink: #0f172a;
  --mailu-muted: #64748b;
  --mailu-accent: #0f766e;
  --mailu-accent-ink: #ffffff;
  --mailu-line: rgba(15, 23, 42, .12);
  --mailu-font: system-ui, sans-serif;
  --mailu-font-title: inherit;
  --mailu-radius: 10px;
  /* Ancho del contenido del diseño: la sección que el kit agrega sola se alinea con el resto de la página. */
  --mailu-ancho: 1180px;
}

[hidden] { display: none !important; }

.mk-seccion {
  background: var(--mailu-bg); color: var(--mailu-ink); font-family: var(--mailu-font);
  box-sizing: border-box; max-width: var(--mailu-ancho); margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6rem) clamp(1.25rem, 5vw, 5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(2rem, 5vw, 4rem);
}
.mk-titulo { font-family: var(--mailu-font-title); font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.1; margin: 0 0 1.25rem; }

.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.5rem; border-radius: var(--mailu-radius);
  font-family: var(--mailu-font); font-weight: 600; text-decoration: none; transition: opacity .2s, background .2s;
}
.mk-btn--solid { background: var(--mailu-accent); color: var(--mailu-accent-ink); border: 1px solid var(--mailu-accent); }
.mk-btn--solid:hover { opacity: .88; }
.mk-btn--ghost { color: var(--mailu-ink); border: 1px solid var(--mailu-line); }
.mk-btn--ghost:hover { border-color: var(--mailu-accent); }
.mk-btn:focus-visible, .mk-servicio:focus-visible { outline: 2px solid var(--mailu-accent); outline-offset: 3px; }

.mk-servicios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mailu-line); }
.mk-servicio {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'info accion'; align-items: center; gap: 1rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--mailu-line);
}
.mk-servicio--foto { grid-template-columns: auto 1fr auto; grid-template-areas: 'foto info accion'; }
.mk-servicio__foto { grid-area: foto; width: 96px; height: 72px; object-fit: cover; border-radius: var(--mailu-radius); display: block; }
.mk-servicio__info { grid-area: info; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mk-servicio__nombre { font-family: var(--mailu-font-title); font-size: 1.25rem; line-height: 1.15; }
.mk-servicio__meta { color: var(--mailu-muted); font-size: .85rem; }
.mk-servicio__desc { color: var(--mailu-muted); font-size: .9rem; white-space: pre-line; }
.mk-servicio__accion { grid-area: accion; display: flex; align-items: center; gap: 1rem; }
.mk-servicio__precio { font-size: 1.25rem; font-weight: 600; color: var(--mailu-accent); white-space: nowrap; }
.mk-servicio__reservar { min-height: 44px; padding: .6rem 1.1rem; }

.mk-horario { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mailu-line); max-width: 480px; }
.mk-horario li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--mailu-line); color: var(--mailu-muted); }
.mk-horario .mk-horario__hoy { color: var(--mailu-ink); font-weight: 600; }
.mk-horario__hoy span:first-child { color: var(--mailu-accent); }

.mk-resenas__promedio { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 1.25rem; }
.mk-resenas__nota { font-family: var(--mailu-font-title); font-size: 2rem; line-height: 1; color: var(--mailu-ink); }
.mk-resenas__cuantas { color: var(--mailu-muted); font-size: .9rem; }
.mk-resenas__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.mk-resena { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; border: 1px solid var(--mailu-line); border-radius: 14px; }
.mk-resena__estrellas { color: var(--mailu-accent); letter-spacing: .12em; }
.mk-resena__texto { margin: 0; line-height: 1.45; }
.mk-resena__nombre { color: var(--mailu-muted); font-size: .82rem; }

.mk-contacto__dir { font-size: 1.25rem; line-height: 1.35; margin: 0 0 1.25rem; }
.mk-contacto__links { display: flex; flex-wrap: wrap; gap: .75rem; }

.mk-reservar { display: flex; flex-direction: column; gap: 1rem; }
.mk-reservar__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.mk-avisos { display: grid; gap: .6rem; max-width: 40rem; }
.mk-aviso { margin: 0; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--mailu-line); white-space: pre-line; font-size: .95rem; line-height: 1.45; color: var(--mailu-ink); background: color-mix(in srgb, var(--mailu-accent) 6%, transparent); }

/* Sobre el local (lo que escribió en la app) */
.mk-sobre { margin: 0; white-space: pre-line; line-height: 1.65; max-width: 44rem; }

/* Equipo */
.mk-equipo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.25rem; }
.mk-persona { display: flex; flex-direction: column; align-items: center; gap: .65rem; text-align: center; }
.mk-persona__foto { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; display: block; }
.mk-persona__iniciales { display: flex; align-items: center; justify-content: center; font-family: var(--mailu-font-title); font-size: 2rem; color: var(--mailu-accent); background: color-mix(in srgb, var(--mailu-accent) 10%, transparent); }
.mk-persona__nombre { font-weight: 600; }

/* Encuentros con cupo */
.mk-encuentros { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; container-type: inline-size; }
/* En la sección que agrega el kit, los encuentros van a lo ancho (son tarjetas con mucho dato). */
.mk-bloque--encuentros { grid-column: 1 / -1; }
.mk-encuentro { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'foto info accion'; align-items: center; gap: 1rem 1.25rem; padding: 1.1rem; border: 1px solid var(--mailu-line); border-radius: 16px; }
.mk-encuentro:not(:has(.mk-encuentro__foto)) { grid-template-columns: 1fr auto; grid-template-areas: 'info accion'; }
.mk-encuentro--sin-lugar { opacity: .7; }
.mk-encuentro__foto { grid-area: foto; width: 112px; height: 84px; object-fit: cover; border-radius: 12px; display: block; }
.mk-encuentro__info { grid-area: info; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.mk-encuentro__titulo { font-family: var(--mailu-font-title); font-size: 1.25rem; line-height: 1.15; }
.mk-encuentro__cuando { font-weight: 500; }
.mk-encuentro__lugar, .mk-encuentro__desc { color: var(--mailu-muted); font-size: .9rem; }
.mk-encuentro__desc { white-space: pre-line; }
.mk-encuentro__accion { grid-area: accion; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; text-align: right; }
.mk-encuentro__precio { font-size: 1.15rem; font-weight: 600; color: var(--mailu-accent); }
.mk-encuentro__estado { font-size: .9rem; font-weight: 500; color: var(--mailu-accent); }
.mk-encuentro--sin-lugar .mk-encuentro__estado { color: var(--mailu-muted); }
.mk-encuentro__estado small { display: block; font-weight: 400; color: var(--mailu-muted); font-size: .78rem; }
.mk-encuentro__anotarme { min-height: 44px; padding: .6rem 1.2rem; }
.mk-reservar__nota { color: var(--mailu-muted); max-width: 380px; margin: 0; }

.mk-barra { display: none; }
@media (max-width: 820px) {
  .mk-barra {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .75rem clamp(1.25rem, 5vw, 5rem) calc(.75rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--mailu-bg) 90%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--mailu-line);
  }
  .mk-barra .mk-btn { width: 100%; }
  body.mk-con-barra { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
/* Donde sea que el diseño ponga los encuentros: si el lugar es angosto, la tarjeta se apila. */
@container (max-width: 560px) {
  .mk-encuentro, .mk-encuentro:not(:has(.mk-encuentro__foto)) { grid-template-columns: 1fr; grid-template-areas: 'foto' 'info' 'accion'; }
  .mk-encuentro__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .mk-encuentro__accion { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
}
@media (max-width: 560px) {
  .mk-reservar__fila .mk-btn { width: 100%; }
  .mk-servicio { grid-template-columns: 1fr; grid-template-areas: 'info' 'accion'; gap: .75rem; }
  .mk-servicio--foto { grid-template-columns: auto 1fr; grid-template-areas: 'foto info' 'accion accion'; }
  .mk-servicio__foto { width: 80px; height: 64px; }
  .mk-servicio__accion { justify-content: space-between; }
}