/* 🌙 Luna y PetIA Premium — hoja de estilos de las pantallas nuevas del Premium de dueños (/luna, /premium y «Mi plan» de Mi perfil), Brand Book Petia 2026 v2.
   Reutiliza las variables `--petia-*` y los componentes `pob-*` de onboarding.css (botones, modal, casillas, avisos: se carga ANTES que esta hoja). Todo lo propio vive bajo el prefijo `lun-` y bajo `.lun-raiz`: así no choca con Tailwind ni con la barra lateral
   del dueño (navbar.html), cuyos estilos globales no se tocan. El contenedor de cada pantalla lleva `pob-body lun-raiz` (las reglas base de `pob-body` solo valen dentro de él, nunca sobre el resto de la página). */

:root { --lun-error-sobre-rosa: #B91C24; }   /* texto de error sobre --petia-accent-soft: 5.15:1 (--petia-error-text da 4.47:1 ahí, por debajo de AA) */
body.lun-pagina { background-color: var(--petia-surface); color: var(--petia-text); }   /* el fondo de /luna y /premium (antes un <style> en línea) */
.lun-raiz.pob-body { min-height: 0; background: transparent; margin: 0 auto; max-width: 1120px; padding-top: 16px; }
#miPlanRaiz.lun-raiz.pob-body { margin-bottom: 24px; }   /* «Mi plan» en Mi perfil: la separación con la tarjeta siguiente (la regla de arriba pisaba el mb-6 de la página) */
.lun-raiz { color: var(--petia-text); }
/* el texto que escribe una persona o devuelve la IA (mensajes, títulos, nombres de mascota) se parte donde haga falta para no desbordar; el resto de la interfaz NO parte palabras a la mitad */
.lun-burbuja, .lun-item-titulo, .lun-item-detalle, .lun-chat-mascota, .lun-modal-texto, .lun-nota, .lun-urgencia, .lun-sugerencia, .lun-fila-valor, .lun-uso-nombre, .lun-bienvenida h2, .lun-bienvenida p, .lun-estado h2, .lun-estado p, .lun-historial-solo .lun-item-boton { overflow-wrap: anywhere; }

/* ───────────── Cabecera ───────────── */
.lun-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 4px 0 18px 0; }
.lun-identidad { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lun-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--petia-surface-tint); color: var(--petia-primary); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(110, 73, 246, .12); }
.lun-avatar-sm { width: 36px; height: 36px; box-shadow: none; }
.lun-titulo { font-size: 30px; line-height: 1.15; letter-spacing: -.01em; }
.lun-subtitulo { margin: 2px 0 0 0; font-size: 16px; line-height: 1.4; color: var(--petia-text-muted); }
.lun-cupo { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.lun-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-radius: 999px; background: var(--petia-selected); border: 1px solid var(--petia-border); font-size: 15px; font-weight: 600; line-height: 1.3; }
.lun-chip[data-estado="aviso"] { background: #FFF7E6; border-color: #F2C879; color: #7A4B00; }
.lun-chip[data-estado="agotado"] { background: var(--petia-accent-soft); border-color: var(--petia-error); color: var(--lun-error-sobre-rosa); }
.lun-cupo-ayuda { font-size: 13px; color: var(--petia-text-muted); text-align: right; }

/* ───────────── Cuerpo: lista de conversaciones + chat ───────────── */
.lun-cuerpo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: stretch; height: calc(100vh - 14rem); min-height: 560px; }
.lun-lateral { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--petia-border); border-radius: var(--petia-radius-xl); background: var(--petia-card); box-shadow: var(--petia-sombra-tarjeta); overflow: hidden; }
.lun-lateral-cabeza { padding: 16px; border-bottom: 1px solid var(--petia-border); display: grid; gap: 10px; }
.lun-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.lun-items { display: block; }   /* las filas (role=list); la caja que se desplaza es .lun-lista */
.lun-vacio-lista { padding: 20px 14px; font-size: 15px; line-height: 1.5; color: var(--petia-text-muted); text-align: center; }
.lun-item { position: relative; display: flex; align-items: stretch; gap: 4px; margin: 0 0 4px 0; border-radius: var(--petia-radius); }
.lun-item-boton { flex: 1; min-width: 0; min-height: 56px; display: block; text-align: left; padding: 10px 12px; border: 0; border-radius: var(--petia-radius); background: transparent; cursor: pointer; color: var(--petia-text); }
.lun-item-boton:hover { background: var(--petia-selected); }
.lun-item[data-activa="1"] .lun-item-boton { background: var(--petia-surface-tint); }
.lun-item-titulo { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.lun-item-detalle { display: block; margin-top: 2px; font-size: 13px; color: var(--petia-text-muted); }
.lun-item-borrar { flex: none; width: 44px; border: 0; border-radius: var(--petia-radius); background: transparent; color: var(--petia-text-muted); cursor: pointer; display: grid; place-items: center; }
.lun-item-borrar:hover { background: var(--petia-accent-soft); color: var(--petia-error-text); }
.lun-lateral-pie { padding: 10px 16px 14px 16px; border-top: 1px solid var(--petia-border); }
.lun-enlace-peligro { color: var(--petia-error-text); font-weight: 600; font-size: 14px; background: none; border: 0; padding: 8px 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lun-btn-sm { min-height: 48px; font-size: 16px; padding: 0 18px; }

.lun-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--petia-border); border-radius: var(--petia-radius-xl); background: var(--petia-card); box-shadow: var(--petia-sombra-tarjeta); overflow: hidden; }
.lun-chat-cabeza { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--petia-border); min-height: 66px; }
.lun-chat-titulo { flex: 1 1 9.5rem; min-width: min(100%, 9.5rem); font-family: var(--petia-fuente-titulo); font-weight: 600; font-size: 17px; line-height: 1.3; overflow-wrap: break-word; }
.lun-chat-mascota { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px; border-radius: 999px; background: var(--petia-accent-soft); font-size: 14px; font-weight: 600; }
.lun-chat-titulo:focus:not(:focus-visible) { outline: none; }   /* el foco llega al título al abrir una conversación (para el lector de pantalla): con el ratón no lleva anillo; con el teclado sí */
.lun-chat-titulo:focus-visible { outline: 2px solid var(--petia-primary); outline-offset: 3px; border-radius: 6px; }
.lun-btn-lista { display: none; }
.lun-mensajes { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.lun-mensajes:focus-visible { outline-offset: -3px; }

/* ───────────── Mensajes ───────────── */
.lun-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; }
.lun-msg-usuario { flex-direction: row-reverse; }
.lun-msg-cuerpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: min(78%, 640px); }
.lun-msg-usuario .lun-msg-cuerpo { align-items: flex-end; }
.lun-burbuja { padding: 12px 16px; border-radius: 18px; font-size: 16px; line-height: 1.55; white-space: pre-wrap; }
.lun-msg-luna .lun-burbuja { background: var(--petia-selected); border: 1px solid var(--petia-border); border-top-left-radius: 6px; }
.lun-msg-usuario .lun-burbuja { background: var(--petia-primary); color: #fff; border-top-right-radius: 6px; }
.lun-msg-hora { font-size: 12px; color: var(--petia-text-muted); }
.lun-escribiendo { display: inline-flex; gap: 5px; align-items: center; min-height: 24px; }
.lun-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--petia-brand); animation: lun-salto 1.1s ease-in-out infinite; }
.lun-punto:nth-child(2) { animation-delay: .15s; }
.lun-punto:nth-child(3) { animation-delay: .3s; }
@keyframes lun-salto { 0%, 70%, 100% { transform: translateY(0); opacity: .55; } 35% { transform: translateY(-5px); opacity: 1; } }
.lun-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.lun-accion { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--petia-primary); background: #fff; color: var(--petia-primary-hover); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.lun-accion:hover { background: var(--petia-surface-tint); color: var(--petia-primary-hover); }
.lun-accion[data-tipo="emergencia"] { background: var(--petia-error-text); border-color: var(--petia-error-text); color: #fff; }
.lun-accion[data-tipo="emergencia"]:hover { background: #A81E24; color: #fff; }
.lun-urgencia { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--petia-radius); background: var(--petia-accent-soft); border: 1px solid var(--petia-error); color: var(--lun-error-sobre-rosa); font-size: 15px; line-height: 1.45; font-weight: 600; }
.lun-urgencia[data-nivel="media"] { background: #FFF7E6; border-color: #F2C879; color: #7A4B00; }
.lun-error-msg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; line-height: 1.45; color: var(--petia-error-text); }
.lun-reintentar { background: none; border: 0; padding: 0; min-height: 44px; color: var(--petia-primary-hover); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 14px; }

.lun-bienvenida { margin: auto; max-width: 520px; text-align: center; padding: 8px 8px 0 8px; }
.lun-bienvenida .lun-avatar { margin: 0 auto 14px auto; width: 72px; height: 72px; }
.lun-bienvenida h2 { font-size: 22px; line-height: 1.25; margin: 0 0 8px 0; }
.lun-bienvenida p { font-size: 16px; line-height: 1.5; color: var(--petia-text-muted); }
.lun-sugerencias { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0 0; }
.lun-sugerencia { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--petia-border); background: #fff; color: var(--petia-text); font-size: 15px; line-height: 1.3; cursor: pointer; text-align: left; }
.lun-sugerencia:hover { background: var(--petia-selected); border-color: var(--petia-brand); }

/* ───────────── Pie del chat: mascota, composer, aviso de primer uso ───────────── */
.lun-pie { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--petia-border); padding: 14px 18px 16px 18px; background: var(--petia-card); display: grid; gap: 10px; }   /* si el pie no cabe (el aviso de primer uso en un celular chico) se desplaza por dentro: el botón siempre se alcanza */
.lun-elegir-mascota { display: grid; gap: 6px; }
.lun-composer { display: flex; align-items: flex-end; gap: 10px; }
.lun-texto { flex: 1; min-width: 0; min-height: 56px; max-height: 168px; resize: none; padding: 15px 18px; border: 1px solid var(--petia-border); border-radius: var(--petia-radius); background: #fff; font-size: 16px; line-height: 1.45; color: var(--petia-text); }
.lun-texto::placeholder { color: var(--petia-placeholder); }
.lun-texto:focus { outline: none; border-color: var(--petia-primary); box-shadow: 0 0 0 4px var(--petia-surface-tint); }
.lun-texto:disabled { background: var(--petia-selected); cursor: not-allowed; }
.lun-enviar { flex: none; width: 56px; height: 56px; padding: 0; min-height: 56px; }
.lun-composer-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--petia-text-muted); line-height: 1.4; }
.lun-contador[data-excede="1"] { color: var(--petia-error-text); font-weight: 600; }
.lun-aviso-primero { border: 1px solid var(--petia-primary); background: var(--petia-selected); border-radius: var(--petia-radius-lg); padding: 18px 20px; display: grid; gap: 14px; }
.lun-aviso-primero h2 { font-size: 18px; }
.lun-nota { padding: 12px 16px; border-radius: var(--petia-radius); background: var(--petia-surface-tint); font-size: 15px; line-height: 1.45; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lun-nota[data-tipo="error"] { background: var(--petia-accent-soft); color: var(--lun-error-sobre-rosa); }
.lun-nota:focus:not(:focus-visible) { outline: none; }   /* el aviso de «hilo lleno» recibe el foco al desaparecer el campo (para que no caiga en <body>): con el ratón sin anillo, con el teclado con anillo */

.lun-ver-mas { width: 100%; min-height: 44px; margin: 4px 0 0 0; border: 1px dashed var(--petia-border); border-radius: var(--petia-radius); background: transparent; color: var(--petia-primary-hover); font-weight: 600; font-size: 14px; cursor: pointer; }
.lun-ver-mas:hover { background: var(--petia-selected); }
.lun-ayuda-largo { margin: 0; font-size: 13px; line-height: 1.4; color: var(--lun-error-sobre-rosa); }
.lun-ayuda-espera { margin: 0; font-size: 13px; line-height: 1.4; color: var(--petia-text-muted); }
.lun-aviso-emergencia { margin: 0; padding: 12px 14px; border-radius: var(--petia-radius); background: var(--petia-accent-soft); font-size: 15px; line-height: 1.45; display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.lun-aviso-emergencia a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--lun-error-sobre-rosa); text-underline-offset: 2px; }
.lun-historial-solo { max-width: 520px; margin: -12px auto 40px auto; padding: 22px 20px; border: 1px solid var(--petia-border); border-radius: var(--petia-radius-xl); background: var(--petia-card); box-shadow: var(--petia-sombra-tarjeta); }
.lun-historial-solo h3 { font-size: 18px; line-height: 1.3; margin: 0 0 6px 0; }
.lun-historial-texto { margin: 0 0 12px 0; font-size: 15px; line-height: 1.5; color: var(--petia-text-muted); }
.lun-historial-solo .lun-lista { flex: none; max-height: 340px; padding: 0; }
.lun-historial-solo div.lun-item-boton { cursor: default; }
.lun-historial-solo div.lun-item-boton:hover { background: transparent; }
.lun-pagar-estado { margin: 0; font-size: 15px; line-height: 1.5; color: var(--petia-text-muted); }

/* ───────────── Tarjetas de estado (cargando, no disponible, error) ───────────── */
.lun-estado { max-width: 520px; margin: 40px auto; text-align: center; padding: 36px 28px; border: 1px solid var(--petia-border); border-radius: var(--petia-radius-xl); background: var(--petia-card); box-shadow: var(--petia-sombra-tarjeta); }
.lun-estado .lun-avatar { margin: 0 auto 16px auto; width: 72px; height: 72px; }
.lun-estado h2 { font-size: 22px; margin: 0 0 8px 0; }
.lun-estado p { color: var(--petia-text-muted); font-size: 16px; line-height: 1.5; }
.lun-estado .pob-btn { margin-top: 20px; }

/* ───────────── Uso (barras) ───────────── */
.lun-uso { display: grid; gap: 14px; }
.lun-uso-fila { display: grid; gap: 6px; }
.lun-uso-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.lun-uso-nombre { font-weight: 600; }
.lun-uso-valor { color: var(--petia-text-muted); font-size: 14px; }
.lun-barra { height: 10px; border-radius: 999px; background: var(--petia-surface-tint); overflow: hidden; }
.lun-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--petia-primary); transition: width .3s ease-out; }
.lun-barra[data-estado="aviso"] > span { background: #E0A100; }
.lun-barra[data-estado="agotado"] > span { background: var(--petia-error); }
.lun-uso-ayuda { font-size: 13px; color: var(--petia-text-muted); }

/* ───────────── «Mi plan» y /premium ───────────── */
.lun-tarjeta { border: 1px solid var(--petia-border); border-radius: var(--petia-radius-xl); background: var(--petia-card); box-shadow: var(--petia-sombra-tarjeta); padding: 24px; }
.lun-tarjeta h2 { font-size: 22px; line-height: 1.25; }
.lun-plan-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.lun-insignia { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 14px; border-radius: 999px; background: var(--petia-selected); border: 1px solid var(--petia-border); font-size: 14px; font-weight: 600; }
.lun-insignia[data-premium="1"] { background: var(--petia-primary); border-color: var(--petia-primary); color: #fff; }
.lun-plan-fecha { margin: 0 0 18px 0; font-size: 15px; line-height: 1.5; color: var(--petia-text-muted); }
.lun-acciones-plan { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.lun-acciones-plan .pob-btn { width: auto; min-width: 200px; }

.lun-premium-hero { text-align: center; max-width: 720px; margin: 8px auto 28px auto; }
.lun-premium-hero .lun-avatar { margin: 0 auto 16px auto; width: 72px; height: 72px; }
.lun-premium-hero h1 { font-size: 36px; line-height: 1.2; letter-spacing: -.01em; }
.lun-premium-hero p { margin-top: 10px; font-size: 18px; line-height: 1.5; color: var(--petia-text-muted); }
.lun-planes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 22px 0; }
.lun-plan { position: relative; border: 1px solid var(--petia-border); border-radius: var(--petia-radius-xl); background: var(--petia-card); padding: 26px 26px 22px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--petia-sombra-tarjeta); }
.lun-plan[data-destacado="1"] { border: 2px solid var(--petia-primary); }
.lun-plan[data-actual="1"] { background: var(--petia-selected); }
.lun-plan h2 { font-size: 24px; }
.lun-plan-precio { font-family: var(--petia-fuente-titulo); font-weight: 600; font-size: 34px; line-height: 1.1; }
.lun-plan-precio small { font-family: var(--petia-fuente); font-size: 15px; font-weight: 400; color: var(--petia-text-muted); }
.lun-plan-actual { position: absolute; top: 18px; right: 18px; }
.lun-filas { display: grid; gap: 0; margin: 0; }
.lun-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--petia-border); font-size: 16px; line-height: 1.4; }
.lun-fila:first-child { border-top: 0; }
.lun-fila-valor { font-weight: 600; text-align: right; flex: none; max-width: 48%; }
.lun-siempre { border-radius: var(--petia-radius-xl); background: var(--petia-panel-gradient); padding: 24px 26px; margin: 0 0 22px 0; display: grid; gap: 10px; }
.lun-siempre h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.lun-siempre p { color: var(--petia-text-muted); font-size: 16px; }
.lun-siempre ul { display: grid; gap: 8px; margin-top: 4px; }
.lun-siempre li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.lun-siempre li .lun-check { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--petia-primary); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.lun-pagar { max-width: 460px; margin: 0 auto; text-align: center; display: grid; gap: 12px; }
.lun-pagar-nota { font-size: 14px; line-height: 1.5; color: var(--petia-text-muted); }

/* ───────────── Modal de límite ───────────── */
.lun-modal-icono { width: 84px; height: 84px; margin: 6px auto 16px auto; border-radius: 50%; display: grid; place-items: center; background: var(--petia-surface-tint); color: var(--petia-primary); }
.lun-modal-texto { text-align: center; color: var(--petia-text-muted); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.lun-modal-largo { white-space: pre-wrap; text-align: left; max-height: 40vh; overflow-y: auto; }   /* la orientación fija de emergencia trae pasos en varias líneas */
.lun-modal-icono-alerta { background: var(--petia-accent-soft); color: var(--lun-error-sobre-rosa); }
.lun-modal-salida { margin: 18px 0 0 0; padding: 14px 16px; border-radius: var(--petia-radius); background: var(--petia-selected); font-size: 15px; line-height: 1.45; text-align: center; }
.lun-modal-botones { display: grid; gap: 10px; margin-top: 22px; }

.pob-modal.lun-modal { max-width: 480px; padding: 32px 28px 26px 28px; }
.lun-modal-titulo { font-size: 24px; line-height: 1.25; text-align: center; margin: 0 0 10px 0; }
.lun-btn-peligro { background: var(--petia-error-text); }
.lun-btn-peligro:hover { background: #A81E24; }
.lun-enlace-privacidad { font-size: 14px; font-weight: 600; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.lun-sinfilas { text-align: center; color: var(--petia-text-muted); font-size: 17px; margin: 0 0 22px 0; }

/* ───────────── Menús y accesos (ficha, navbar) ───────────── */
.lun-btn-ficha { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--petia-primary); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; border: 0; cursor: pointer; }
.lun-btn-ficha:hover { background: var(--petia-primary-hover); color: #fff; }

/* Una conversación NUEVA en escritorio y tableta (≥900 px): la bienvenida cabe ENTERA a cualquier ancho y alto (en 900-1150 px la columna del chat es angosta y la bienvenida llega a ~590 px; con alto fijo quedaban ~290 y ella sola se desplazaba por dentro).
   El chat crece con su contenido y la página se desplaza; la lista de conversaciones se limita al alto de la ventana. Donde :has() no existe, estas reglas se ignoran enteras y todo queda como antes. */
@media (min-width: 900px) {
    .lun-cuerpo:has(.lun-chat[data-modo="nuevo"]) { height: auto; min-height: 560px; }
    .lun-cuerpo:has(.lun-chat[data-modo="nuevo"]) .lun-lateral { max-height: max(560px, calc(100vh - 14rem)); }
    .lun-cuerpo:has(.lun-chat[data-modo="nuevo"]) .lun-chat { height: auto; min-height: 0; }
    .lun-cuerpo:has(.lun-chat[data-modo="nuevo"]) .lun-mensajes { flex: none; overflow: visible; }
    .lun-cuerpo:has(.lun-chat[data-modo="nuevo"]) .lun-pie { overflow: visible; }
}

/* ───────────── Pantallas angostas: una sola columna y todo cabe desde 360 px ───────────── */
@media (max-width: 899px) {
    .lun-cuerpo { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .lun-lateral { display: none; max-height: 52vh; }
    .lun-lateral[data-abierto="1"] { display: flex; }
    .lun-chat { height: calc(100vh - 12rem); height: calc(100dvh - 12rem); min-height: 440px; }
    .lun-chat[data-modo="aviso"], .lun-chat[data-modo="nuevo"] { height: auto; min-height: 0; }   /* el aviso de primer uso y la bienvenida de una conversación NUEVA mandan: el chat crece con ellos y la página se desplaza (con alto fijo, en un celular de 640 px quedaban ~100 px para leer la bienvenida) */
    .lun-chat[data-modo="aviso"] .lun-mensajes, .lun-chat[data-modo="nuevo"] .lun-mensajes { flex: none; overflow: visible; }
    .lun-chat[data-modo="aviso"] .lun-pie, .lun-chat[data-modo="nuevo"] .lun-pie { overflow: visible; }
    .lun-btn-lista { display: inline-flex; width: auto; flex: none; min-height: 44px; padding: 0 14px; font-size: 15px; }
    .lun-chat-cabeza { padding: 10px 12px; min-height: 0; }
    .lun-cabecera { margin: 0 0 12px 0; gap: 10px 16px; }
    .lun-avatar { width: 44px; height: 44px; }
    .lun-subtitulo { font-size: 14px; }
    .lun-chip { font-size: 14px; min-height: 36px; padding: 4px 14px; }
    .lun-cupo { gap: 4px; }
    .lun-cupo { align-items: flex-start; }
    .lun-cupo-ayuda { text-align: left; }
    .lun-planes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
    .lun-aviso-primero { padding: 14px 14px; gap: 10px; }
    .lun-aviso-primero h2 { font-size: 17px; }
    .lun-aviso-emergencia { padding: 8px 12px; font-size: 14px; }
    .lun-titulo { font-size: 24px; }
    .lun-texto { min-height: 48px; padding: 12px 14px; }
    .lun-enviar { width: 48px; height: 48px; min-height: 48px; }
    .lun-msg-cuerpo { max-width: 88%; }
    .lun-mensajes { padding: 16px 12px; }
    .lun-pie { padding: 12px 12px 14px 12px; }
    .lun-premium-hero h1 { font-size: 28px; }
    .lun-premium-hero p { font-size: 16px; }
    .lun-plan { padding: 22px 18px 18px 18px; }
    .lun-plan-precio { font-size: 30px; }
    .lun-fila-valor { max-width: 55%; }
    .lun-tarjeta { padding: 20px 16px; }
    .lun-acciones-plan .pob-btn { width: 100%; }
    .lun-siempre { padding: 20px 18px; }
    .lun-bienvenida .lun-avatar { width: 56px; height: 56px; margin-bottom: 10px; }
    .lun-bienvenida h2 { font-size: 20px; }
    .lun-sugerencias { margin-top: 14px; }
    .pob-modal.lun-modal { padding: 24px 18px 20px 18px; }   /* los diálogos (emergencia, límite, borrar) caben mejor en un celular de 640 px de alto */
    .lun-modal-titulo { font-size: 20px; }
    .lun-modal-icono { width: 64px; height: 64px; margin: 2px auto 12px auto; }
    .lun-modal-largo { max-height: 32vh; }
    .lun-modal-botones { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .lun-punto { animation: none; opacity: .8; }
    .lun-mensajes { scroll-behavior: auto; }
    .lun-barra > span { transition: none; }
}