/* JOLIE · Panel de Marcela — piel "Glovo adulto"
   Un aviso por pantalla, letra muy grande (≥20px) y dos botones enormes.
   Lo importante (quién, qué quiere, cuándo, WhatsApp y «Ya le he escrito")
   cabe sin hacer scroll a 320×568 y 390×844; el detalle (mensaje, número)
   va debajo.

   Misma piel que la web: fondo cálido, tarjeta blanca con borde fino,
   titulares en Cormorant, datos en Manrope y un solo acento ciruela.
   EXCEPCIÓN: aquí WhatsApp es verde sólido (plano, sin brillo) porque a
   Marcela le sirve reconocerlo de un vistazo. */

.mv {
  --mv-wa: var(--wa);      /* verde WhatsApp con texto verde muy oscuro: 7,2:1 */
  --mv-wa-hover: var(--wa-hover);
  --mv-tile: 48px;         /* miniaturas del aviso (inicial, servicios, cuándo) */
  font-size: 22px;
  line-height: 1.4;
  min-height: 100dvh;
}
.mv-app { display: block; min-height: 100dvh; }

/* ---------- Cargando ---------- */
.mv-loading {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 16px;
  font-weight: 500;
  color: var(--ink-2);
}
.mv-loading .spin,
.mv .mv-done .spin,
.mg .btn-ghost .spin {
  width: 26px;
  height: 26px;
  border-color: rgba(79, 35, 80, .18);
  border-top-color: var(--plum);
}

/* ---------- Contenedor ---------- */
.mv-in {
  width: min(560px, 100%);
  margin: 0 auto;
  min-height: 100dvh;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- Cabecera compacta: campana + saludo ---------- */
.mv-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mv-head > div { min-width: 0; }
.mv-bell { width: 52px; height: 52px; border-radius: var(--r-btn); }
.mv-bell .ico { width: 26px; height: 26px; }
.mv-head h1 { font-size: 36px; line-height: 1.02; color: var(--ink); }
.mv-head p { font-size: 22px; font-weight: 500; color: var(--ink-2); line-height: 1.25; margin-top: 2px; }
.mv-head p b { color: var(--plum); font-weight: 700; }

/* Sin avisos: marca arriba y saludo centrado */
.mv-head.big { flex-direction: column; text-align: center; gap: 10px; padding-top: 10px; }
.mv-head.big .wordmark { align-items: center; margin-bottom: 8px; }
.mv-head.big .wordmark b { font-size: 30px; }
.mv-head.big .wordmark i { font-size: 18px; }
.mv-head.big h1 { font-size: 46px; }

/* ---------- El aviso ---------- */
/* Las etiquetas «Nuevo» / «N de M» asoman 17 px por encima del borde:
   el margen les deja aire con la cabecera. */
.stage { position: relative; margin-top: 12px; }
.aviso {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: none;
  padding: 30px 18px 18px;
  display: grid;
  gap: 16px;
  min-width: 0;
}
/* Etiquetas sobre el borde: fondo suave, texto apagado */
.aviso .nuevo,
.aviso .of {
  position: absolute;
  top: -17px;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-chip);
  border: 1px solid var(--line);
}
.aviso .nuevo { left: 16px; background: var(--st-new-bg); color: var(--st-new-fg); letter-spacing: .02em; }
.aviso .of { right: 16px; background: var(--card); color: var(--ink-2); font-weight: 600; }

/* Quién: inicial en cursiva sobre bloque apagado + titular */
.who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avatar {
  width: var(--mv-tile);
  height: var(--mv-tile);
  border-radius: var(--r-chip);
  display: grid;
  place-items: center;
  flex: none;
  font: italic 400 32px/1 var(--f-display);
}
.aviso h2 {
  font-size: clamp(27px, 7.8vw, 33px);
  line-height: 1.1;
  color: var(--ink);
  min-width: 0;
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}
.aviso h2:focus { outline: none; }

/* Resumen: servicios + cuándo, en filas con miniatura */
.mv-sum { display: grid; gap: 10px; }
.mv-svcs { list-style: none; display: grid; gap: 8px; }
.mv-svc,
.mv-when {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  line-height: 1.2;
}
.mv-svc { font-size: 22px; font-weight: 600; color: var(--ink); }
.mv-svc .cat-mini,
.mv-when .ico-tile { width: var(--mv-tile); height: var(--mv-tile); border-radius: var(--r-chip); }
.mv-svc .cat-mini .ico,
.mv-when .ico-tile .ico { width: 26px; height: 26px; }
.mv-svc > span:last-child,
.mv-when > span:last-child { min-width: 0; -webkit-hyphens: auto; hyphens: auto; }
.mv-when { font-size: 22px; font-weight: 500; color: var(--ink-2); }
.mv-when b { color: var(--ink); font-weight: 700; }

/* Entrada escalonada suave (solo cuando la tarjeta entra, no al refrescar) */
.aviso.stagger .mv-svc,
.aviso.stagger .mv-when {
  animation: fade-up var(--dur-3) var(--ease-out) both;
  animation-delay: calc(140ms + var(--i, 0) * var(--stagger));
}

/* ---------- Botones enormes ---------- */
.mv-acts { display: grid; gap: 12px; }
.mv .mv-wa {
  --bg: var(--mv-wa);
  --fg: var(--wa-ink);
  --bd: transparent;
  min-height: 76px;
  font-size: clamp(22px, 6.2vw, 25px);
  font-weight: 700;
  border-radius: 14px;
  gap: 12px;
  padding: 10px 18px;
}
.mv .mv-wa .ico { width: 30px; height: 30px; color: currentColor; }
.mv .mv-done {
  --bg: var(--card);
  --fg: var(--plum);
  --bd: var(--plum);
  min-height: 66px;
  border-width: 2px;
  border-radius: 14px;
  font-size: 23px;
  font-weight: 700;
  gap: 12px;
  padding: 8px 16px;
}
.mv .mv-done .ico { width: 28px; height: 28px; stroke-width: 2.2; }
.mv .mv-done.is-busy { opacity: 1; }
@media (hover: hover) {
  .mv .mv-wa:hover { --bg: var(--mv-wa-hover); --bd: transparent; }
  .mv .mv-done:hover { --bg: var(--plum-soft); --bd: var(--plum); }
}
.mv-err {
  font-size: 22px;
  font-weight: 600;
  color: var(--rose-ink);
  background: var(--alert-bg);
  border: 1px solid var(--pink-200);
  border-radius: var(--r-btn);
  padding: 10px 14px;
  text-align: center;
  line-height: 1.3;
}
.mv-err:empty { display: none; }

/* ---------- Detalle: mensaje, número, cuándo escribió ---------- */
.mv-more { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.kv { display: grid; gap: 6px; }
.kv .k,
.mv-ago {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.3;
  min-width: 0;
}
.kv .k .ico,
.mv-ago .ico { width: 24px; height: 24px; color: var(--plum); }
.kv .v { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.quote {
  background: var(--fill);
  border-radius: var(--r-btn);
  padding: 14px 16px;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  white-space: pre-line;
}

/* ---------- Anterior / Siguiente ---------- */
.mv-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mv-nav button {
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--card);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
}
.mv-nav button:disabled { opacity: .4; }
.mv-nav .ico { width: 24px; height: 24px; color: var(--plum); }
@media (hover: hover) {
  .mv-nav button:not(:disabled):hover { border-color: var(--line-2); }
}

/* ---------- Sin avisos: la flor de línea se dibuja ---------- */
.rest {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 16px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.rest svg { width: 104px; height: 104px; color: var(--plum); }
.rest path,
.rest circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: check-draw var(--dur-3) var(--ease-out) forwards;
  animation-delay: calc(150ms + var(--i, 0) * 140ms);
}
.rest h2 { font-size: 40px; color: var(--ink); line-height: 1.05; }
.rest p { font-size: 22px; color: var(--ink-2); font-weight: 500; }
.rest .again { min-height: 56px; font-size: 22px; }

/* Recordatorios tranquilos: lista agrupada en una tarjeta */
.mv-calm.list-card { padding: 0 16px; }
.mv-calm .list-row {
  gap: 14px;
  padding: 16px 0;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.35;
}
.mv-calm .list-row > span:last-child { min-width: 0; }
.mv-calm .ico-tile,
.mv-calm .gcal { width: 44px; height: 44px; }
.mv-calm .ico-tile .ico { width: 24px; height: 24px; }
.mv-calm .mv-wa-ico { color: var(--green-700); }

/* ---------- Salir ---------- */
.mv-foot { margin-top: auto; display: flex; justify-content: center; padding-top: 4px; }
.mv-exit { font-size: 22px; min-height: 56px; padding: 0 16px; gap: 10px; color: var(--ink-2); }
.mv-exit .ico { width: 24px; height: 24px; }

/* ---------- Toast grande ---------- */
.mv .toast.big { --toast-bottom: 18px; padding: 10px 10px 10px 18px; font-size: 20px; }
.mv .toast.big .ico { width: 26px; height: 26px; }

/* ---------- Entrada (clave) ---------- */
.mg .gate-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: none;
  padding: 30px 20px 22px;
}
.mg .wordmark { align-items: center; margin: 0 auto 22px; }
.mg .wordmark b { font-size: 30px; }
.mg .wordmark i { font-size: 18px; }
.mg .gate-card h1 { font-size: 44px; color: var(--ink); line-height: 1.05; }
.mg .gate-card .lead { font-size: 22px; font-weight: 500; color: var(--ink-2); line-height: 1.35; margin: 10px 0 18px; }
.mg .gate-card .form { gap: 14px; }
.mg .pin { min-height: 66px; font-size: 32px; font-weight: 700; }
.mg .gate-card .btn { min-height: 66px; font-size: 23px; font-weight: 700; border-radius: 14px; }
.mg .gate-card .btn .spin { width: 26px; height: 26px; }
.mg .hint { font-size: 20px; font-weight: 500; color: var(--ink-2); text-align: center; margin-top: 14px; }
.mg .hint b { color: var(--plum); font-weight: 700; }
.mg .alt { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.mg .alt summary {
  list-style: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--plum);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.mg .alt summary::-webkit-details-marker { display: none; }
.mg .alt summary .ico { width: 22px; height: 22px; }
.mg .alt summary .ico:last-child { transition: transform var(--dur-2) var(--ease-out); }
.mg .alt[open] summary .ico:last-child { transform: rotate(180deg); }
.mg .alt label { font-size: 20px; font-weight: 600; color: var(--ink); }
.mg .alt .hint { font-size: 18px; margin-top: 0; }
.mg .alt .hint:empty { display: none; }
.mg .error-banner { font-size: 20px; margin-bottom: 14px; text-align: left; }
.mg .gate-card .btn + .mv-exit { margin-top: 10px; }

/* ---------- Pantallas bajitas (320×568 y parecidas) ---------- */
@media (max-height: 700px) {
  .mv { --mv-tile: 44px; }
  .mv-in { gap: 14px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .mv-bell { width: 46px; height: 46px; }
  .mv-bell .ico { width: 24px; height: 24px; }
  .mv-head h1 { font-size: 32px; }
  .stage { margin-top: 8px; }
  .aviso { padding: 26px 14px 14px; gap: 12px; }
  .avatar { font-size: 28px; }
  .mv-svc .cat-mini .ico, .mv-when .ico-tile .ico { width: 24px; height: 24px; }
  .mv-svcs { gap: 6px; }
  .mv-sum { gap: 8px; }
  .mv-acts { gap: 10px; }
  .mv .mv-wa { min-height: 66px; }
  .mv .mv-done { min-height: 58px; }
  .mg .wordmark { margin-bottom: 14px; }
}

@media (max-width: 359px) {
  .mv-in { padding-inline: 12px; }
  .aviso { padding-inline: 14px; }
  .who { gap: 10px; }
  .mv-svc, .mv-when { gap: 10px; }
  .mv-nav { gap: 8px; }
  .mv-nav button { padding: 0 2px; gap: 2px; }
  .mv-nav .ico { width: 20px; height: 20px; }
  .mg .gate-card { padding-inline: 14px; }
  .mg .gate-card h1 { font-size: 38px; }
  .mv-head.big h1 { font-size: 42px; }
  .mv-calm.list-card { padding: 0 12px; }
}

/* Teléfonos pequeños (320×568): subtítulo en una línea y el reloj de
   «Le viene bien» fuera, para que su texto use todo el ancho y WhatsApp y
   «Ya le he escrito» quepan sin scroll aunque la franja sea larga. */
@media (max-width: 359px) and (max-height: 700px) {
  .mv-head p { font-size: 18px; }
  .aviso { gap: 10px; padding-top: 24px; }
  .aviso h2 { font-size: 26px; }
  .mv-when .ico-tile { display: none; }
}

@media (min-width: 768px) {
  .mv-in { padding-top: 32px; gap: 22px; }
  .aviso { padding: 34px 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .rest path, .rest circle { stroke-dashoffset: 0; animation: none; }
  .aviso.stagger .mv-svc, .aviso.stagger .mv-when { animation: none; }
}