/* ============================================================================
   Lumina CRM · screens.css — estilos que solo necesitan pantallas concretas
   Añade; no redefine nada de components.css. Todo sale de los tokens de tokens.css,
   así que sirve igual en claro y oscuro (la única excepción es el texto blanco
   sobre la foto de P0). La raíz de cada pantalla sigue siendo
   <div class="pantalla sin-tabbar" data-pantalla="ID">, y el diseño de la
   pantalla entera se engancha con [data-pantalla]. Secciones:
     1. P0 Bienvenida              (.bienvenida__*)
     2. OB1–OB6 Onboarding         (.onboarding__*)
     3. W1–W5 Lo que ve la clienta (.exhibicion__*, .califica*)
     4. Pulido
   ========================================================================== */

/* ---------------------------------------------------------------- 1. P0 Bienvenida */
.bienvenida__marca { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) 0 var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.bienvenida__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.pantalla[data-pantalla="P0"] { display: flex; flex-direction: column; }
/* La fachada crece con el alto disponible (entre 216 y 360 px) para que la pantalla se vea llena en cualquier celular. */
.bienvenida__hero { position: relative; margin: 0; flex: 1 1 216px; min-height: 216px; max-height: 360px; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-2); }
.bienvenida__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* Texto blanco sobre la foto: la pantalla oscura del pie sale de --overlay (dos capas) para que se lea con cualquier fachada. */
.bienvenida__hero figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-5) var(--space-4) var(--space-3); color: #fff; font-size: var(--fs-sm); font-weight: 600; background: linear-gradient(to top, var(--overlay), transparent), linear-gradient(to top, var(--overlay), transparent); }
.bienvenida__texto { margin-top: var(--space-4); }
.bienvenida__lema { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 var(--space-1); }
.bienvenida__quien { margin: var(--space-5) 0 var(--space-3); }
.bienvenida__rol { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 76px; padding: var(--space-3); text-align: left; color: inherit; background: var(--surface); border: 2px solid transparent; border-radius: var(--radius-l); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.bienvenida__rol:active { transform: scale(0.99); }
.bienvenida__rol.activo { border-color: var(--primary); background: var(--primary-soft); }
.bienvenida__rol-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bienvenida__rol-nombre { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-lg); }
.bienvenida__rol-sub { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.bienvenida__rol-sub b { color: var(--primary); font-weight: 700; }
.bienvenida__enlace { display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--tap); margin: var(--space-3) auto 0; font-size: var(--fs-sm); font-weight: 600; }
.bienvenida__version { text-align: center; margin-top: var(--space-1); }

/* ---------------------------------------------------------------- 2. OB1–OB6 Onboarding */
/* El pie del asistente de components.css es absoluto y se va con el contenido al desplazar; en el onboarding (listas largas) se queda pegado abajo. */
.pantalla[data-pantalla^="OB"] { display: flex; flex-direction: column; padding-bottom: 0; }
.onboarding__cab { position: sticky; top: 0; z-index: 4; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); background: var(--bg); }
.onboarding__paso { width: var(--tap); text-align: right; }
.onboarding__cuerpo { flex: 1 0 auto; padding: var(--space-2) 0 var(--space-5); }
.pantalla[data-pantalla^="OB"] .asistente__pie { position: sticky; left: auto; right: auto; bottom: 0; flex: 0 0 auto; margin: 0 calc(-1 * var(--space-4)); }
/* Las horas de apertura y cierre ahora las dibuja el editor de horario por día (.horario-dia en components.css), que ya se adapta a los 320 px. */
.onboarding__servicio { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--surface); border-radius: var(--radius-m); }
.onboarding__servicio-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; color: inherit; transition: opacity var(--dur-fast) var(--ease); }
.onboarding__servicio.apagado .onboarding__servicio-cuerpo { opacity: 0.55; }
/* Los nombres largos ("Extensiones de pestañas (retoque)") se parten en dos líneas en vez de cortarse con puntos suspensivos. */
.onboarding__servicio .fila__titulo .nombre, .onboarding__fila .fila__titulo .nombre { white-space: normal; overflow: visible; }
.onboarding__cada { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-xs); font-weight: 700; }
.onboarding__yo { padding: 0 var(--space-3); background: var(--surface); border-radius: var(--radius-m); }
.onboarding__conexion { text-align: center; padding: var(--space-2) 0; }
.onboarding__plantillas { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-4); }
.onboarding__plantilla h3 { font-size: var(--fs-md); }
.onboarding__resumen { display: flex; flex-direction: column; padding: 0 var(--space-3); background: var(--surface); border-radius: var(--radius-l); }
.onboarding__fila { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.onboarding__fila + .onboarding__fila { border-top: 1px solid var(--border); }
.onboarding__fila .fila__sub { white-space: normal; }
.onboarding__ico { width: 36px; height: 36px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-s); background: var(--primary-soft); color: var(--primary); }
.pantalla[data-pantalla="OB6"] .vacio { padding-top: var(--space-3); padding-bottom: var(--space-4); }

/* ---------------------------------------------------------------- 3. W1–W5 Lo que ve la clienta */
.pantalla[data-pantalla^="W"] { display: flex; flex-direction: column; min-height: 100%; padding-bottom: var(--space-4); }
.exhibicion__sub { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-2); font-size: var(--fs-sm); }
/* El chat ocupa todo el alto libre y llega a los bordes, como una conversación real de WhatsApp. */
.exhibicion__chat { flex: 1 0 auto; display: flex; flex-direction: column; margin: 0 calc(-1 * var(--space-4)); }
.exhibicion__chat .wa { flex: 1 0 auto; min-height: 360px; border-radius: 0; padding: var(--space-3) var(--space-4) var(--space-5); }
.exhibicion__guion { margin-top: var(--space-3); }
.exhibicion__guion summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
.exhibicion__ayuda { text-align: center; margin-top: var(--space-2); }
.exhibicion__pie { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); }
.exhibicion__pie .nota-motor { margin-top: 0; }
.wa__enlace { color: var(--info); text-decoration: underline; word-break: break-all; }

/* Página pública «Califica tu visita» (W5): una pantalla, estrellas grandes centradas y un botón ancho. */
.califica { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.califica__url { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; }
.califica__tarjeta { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4); text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.califica__marca { display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.califica__pregunta { font-size: var(--fs-xl); line-height: var(--lh-xl); }
.califica__estrellas { display: flex; justify-content: center; }
.califica__estrellas .estrellas { gap: 6px; }
.califica__estrellas .estrellas--grande .ico-xs { width: var(--tap); height: var(--tap); padding: 4px; cursor: pointer; transition: transform var(--dur-fast) var(--ease); }
.califica__estrellas .estrellas--grande .ico-xs:hover { transform: scale(1.08); }
.califica__estrellas .estrellas .vacia { color: var(--text-3); }
.califica__hint { min-height: var(--lh-sm); }
.califica__tarjeta .campo { width: 100%; text-align: left; }
.califica__tarjeta textarea { min-height: 72px; }
.califica__enviar { margin-top: var(--space-1); }
.califica__gracias { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; }
.califica__gracias .estrellas--grande .ico-xs { width: 32px; height: 32px; }

/* ---------------------------------------------------------------- 4. Pulido */
/* El campo de teléfono de C5 usa id="telefono", el mismo del marco del teléfono (#telefono en base.css) y heredaba su alto de pantalla completa, su radio y su sombra. */
input#telefono { position: static; display: block; width: 100%; height: 48px; max-height: none; overflow: visible; box-shadow: none; border-radius: var(--radius-s); background: var(--surface-2); }
input#telefono:focus { background: var(--bg); }

/* ---------------------------------------------------------------- 5. App real (Fase 2): Por enviar hoy, descuento de recontacto */
/* H1 · "Por enviar hoy": una tarjeta por recordatorio o mensaje programado que ya toca enviar. Reutiliza .tarjeta-rc (mismo ritmo que "Para ofrecer"). */
.por-enviar { border-left: 4px solid var(--warning); }
.por-enviar__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--space-2); padding-left: 56px; }
.por-enviar__texto { margin-bottom: var(--space-2); }
.por-enviar .fila__sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* un recordatorio cabe en dos líneas; el texto de un recontacto programado se recorta */
.por-enviar .tarjeta-rc__acciones .btn--ghost { flex: 0 1 auto; padding: 0 var(--space-4); }
@media (max-width: 379px) { .por-enviar__meta { padding-left: 0; } }

/* N7 · descuento de recontacto vigente con su interruptor. */
.descuento-vigente { display: flex; flex-direction: column; gap: var(--space-1); }
.descuento-vigente .fila-sw { padding-bottom: 0; }
.descuento-vigente__precio { font-size: var(--fs-sm); color: var(--text-2); }
.descuento-vigente__precio b { color: var(--text); }

/* N3 / N6 · ángulo de la foto antes de tomarla (en la app la cámara es la del celular). */
.angulos-foto { margin-top: var(--space-3); }

/* C2 · ficha de una clienta eliminada. */
.eliminada__cab { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.eliminada__cab .avatar { background: var(--neutral-soft); color: var(--neutral); }