/**
 * ============================================================
 *  L-LEDS — FASE 4: CARRITO OFF-CANVAS + BRIDGE (CSS)
 *  Archivo : ll-cart.css
 *  Dep.    : ll-tokens.css rev.2
 *
 *  SECCIONES:
 *   §1  Panel off-canvas principal + overlay
 *   §2  Header del panel (título + botón de cierre)
 *   §3  Resumen del pedido (mini-hero)
 *   §4  Lista de ítems del carrito
 *      §4a  Ítem editable (Tira LED — controles +/-)
 *      §4b  Ítem bloqueado (Fuente, Perfil, Accesorios)
 *   §5  Subtotales y desglose de costos
 *   §6  Footer fijo: CTA "Proceder al Pago"
 *   §7  Pantalla vacía
 *   §8  Micro-animaciones y estados de carga
 *   §9  Modal de captura de teléfono (WhatsApp lead)
 * ============================================================
 */


/* ═══════════════════════════════════════════════════════════
   §1 — OVERLAY + PANEL OFF-CANVAS
   ═══════════════════════════════════════════════════════════ */

/* Overlay de fondo (click cierra el panel) */
.ll-cart-overlay {
  position         : fixed;
  inset            : 0;
  z-index          : calc(var(--ll-z-modal) - 5);
  background       : var(--ll-color-bg-overlay);
  backdrop-filter  : blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity          : 0;
  pointer-events   : none;
  transition       : opacity var(--ll-transition-slow);
}

.ll-cart-overlay.is-open {
  opacity          : 1;
  pointer-events   : auto;
}

/* Panel lateral principal */
.ll-cart-panel {
  position         : fixed;
  top              : 0;
  right            : 0;
  bottom           : 0;
  z-index          : var(--ll-z-modal);
  width            : min(440px, 100vw);
  display          : flex;
  flex-direction   : column;
  overflow         : hidden;

  /* Fondo: --ll-color-bg-panel = --ll-color-bg-surface = Verde Bosque */
  background       : var(--ll-color-bg-panel);
  border-left      : 1px solid var(--ll-color-border-strong);

  /* Estado inicial: fuera del viewport */
  transform        : translateX(100%);
  transition       : transform var(--ll-transition-slow);
  will-change      : transform;
}

/* Estado abierto */
.ll-cart-panel.is-open {
  transform        : translateX(0);
  box-shadow       : -8px 0 48px rgba(0, 0, 0, 0.60),
                     -1px 0 0 var(--ll-color-border);
}

/* Línea de acento LED en la parte superior */
.ll-cart-panel::before {
  content          : '';
  display          : block;
  height           : 3px;
  flex-shrink      : 0;
  background       : linear-gradient(
    90deg,
    var(--ll-color-primary)   0%,
    var(--ll-color-secondary) 60%,
    transparent               100%
  );
}


/* ═══════════════════════════════════════════════════════════
   §2 — HEADER DEL PANEL
   ═══════════════════════════════════════════════════════════ */

.ll-cart-header {
  display          : flex;
  align-items      : center;
  justify-content  : space-between;
  padding          : var(--ll-space-4) var(--ll-space-6);
  border-bottom    : 1px solid var(--ll-color-border);
  flex-shrink      : 0;
  gap              : var(--ll-space-4);
}

.ll-cart-header__left {
  display          : flex;
  align-items      : center;
  gap              : var(--ll-space-3);
  min-width        : 0;
}

/* Ícono del carrito en el header */
.ll-cart-header__icon {
  width            : 36px;
  height           : 36px;
  border-radius    : var(--ll-radius-md);
  background       : var(--ll-color-primary-muted);
  border           : 1px solid var(--ll-color-border-accent);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  flex-shrink      : 0;
}

.ll-cart-header__icon svg {
  width            : 16px;
  height           : 16px;
  stroke           : var(--ll-color-primary);
  fill             : none;
  stroke-width     : 2;
}

.ll-cart-header__title {
  font-size        : var(--ll-text-base);
  font-weight      : var(--ll-font-bold);
  color            : var(--ll-color-text-light);   /* #F2F5F0 Blanco Plata */
  line-height      : var(--ll-leading-tight);
  white-space      : nowrap;
  overflow         : hidden;
  text-overflow    : ellipsis;
}

.ll-cart-header__count {
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  min-width        : 20px;
  height           : 20px;
  padding-inline   : var(--ll-space-1);
  background       : var(--ll-color-primary);
  color            : var(--ll-color-text-inverted);
  font-size        : var(--ll-text-xs);
  font-weight      : var(--ll-font-bold);
  border-radius    : var(--ll-radius-full);
  flex-shrink      : 0;
  font-family      : var(--ll-font-mono);
  transition       : transform var(--ll-transition-spring);
}

/* Animación al cambiar la cantidad */
.ll-cart-header__count.is-bumping {
  animation        : ll-count-bump 0.3s var(--ll-transition-spring);
}

@keyframes ll-count-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Botón de cierre "X" */
.ll-cart-close {
  display          : flex;
  align-items      : center;
  justify-content  : center;
  width            : 36px;
  height           : 36px;
  background       : transparent;
  border           : 1px solid var(--ll-color-border);
  border-radius    : var(--ll-radius-md);
  cursor           : pointer;
  color            : var(--ll-color-text-secondary);
  transition       : all var(--ll-transition-base);
  flex-shrink      : 0;
}

.ll-cart-close:hover {
  border-color     : var(--ll-color-border-accent);
  color            : var(--ll-color-primary);
  background       : var(--ll-color-primary-muted);
  transform        : rotate(90deg);  /* micro-animación al cerrar */
}

.ll-cart-close svg {
  width            : 16px;
  height           : 16px;
  stroke           : currentColor;
  fill             : none;
  stroke-width     : 2.5;
  stroke-linecap   : round;
}


/* ═══════════════════════════════════════════════════════════
   §3 — MINI-HERO: RESUMEN DEL PROYECTO
   Muestra el origen del kit (calculadora o Shop the Room)
   ═══════════════════════════════════════════════════════════ */

.ll-cart-project-hero {
  display          : flex;
  align-items      : center;
  gap              : var(--ll-space-3);
  padding          : var(--ll-space-4) var(--ll-space-6);
  background       : var(--ll-color-primary-muted);
  border-bottom    : 1px solid var(--ll-color-border-accent);
  flex-shrink      : 0;
}

.ll-cart-project-hero__thumb {
  width            : 48px;
  height           : 48px;
  border-radius    : var(--ll-radius-md);
  object-fit       : cover;
  background       : var(--ll-color-bg-elevated);
  border           : 1px solid var(--ll-color-border);
  flex-shrink      : 0;
}

/* Icono placeholder cuando no hay imagen */
.ll-cart-project-hero__thumb-icon {
  width            : 48px;
  height           : 48px;
  border-radius    : var(--ll-radius-md);
  background       : var(--ll-color-bg-elevated);
  border           : 1px solid var(--ll-color-border-accent);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  flex-shrink      : 0;
}

.ll-cart-project-hero__thumb-icon svg {
  width            : 22px;
  height           : 22px;
  stroke           : var(--ll-color-primary);
  fill             : none;
  stroke-width     : 1.75;
}

.ll-cart-project-hero__info {
  flex             : 1;
  min-width        : 0;
}

.ll-cart-project-hero__label {
  font-size        : var(--ll-text-xs);
  font-weight      : var(--ll-font-semibold);
  color            : var(--ll-color-primary);
  text-transform   : uppercase;
  letter-spacing   : var(--ll-tracking-widest);
  margin-bottom    : 2px;
}

.ll-cart-project-hero__name {
  font-size        : var(--ll-text-sm);
  font-weight      : var(--ll-font-bold);
  color            : var(--ll-color-text-light);
  line-height      : var(--ll-leading-tight);
  white-space      : nowrap;
  overflow         : hidden;
  text-overflow    : ellipsis;
}

.ll-cart-project-hero__meta {
  font-size        : var(--ll-text-xs);
  color            : var(--ll-color-text-muted);
  margin-top       : 2px;
}


/* ═══════════════════════════════════════════════════════════
   §4 — LISTA DE ÍTEMS DEL CARRITO (cuerpo scrollable)
   ═══════════════════════════════════════════════════════════ */

.ll-cart-body {
  flex             : 1;
  overflow-y       : auto;
  scrollbar-width  : thin;
  scrollbar-color  : var(--ll-color-bg-elevated) transparent;
}

.ll-cart-body::-webkit-scrollbar {
  width            : 4px;
}
.ll-cart-body::-webkit-scrollbar-thumb {
  background       : var(--ll-color-bg-elevated);
  border-radius    : var(--ll-radius-full);
}

/* Sección de ítems con label */
.ll-cart-section {
  padding-top      : var(--ll-space-4);
}

.ll-cart-section__label {
  padding          : 0 var(--ll-space-6) var(--ll-space-2);
  font-size        : var(--ll-text-xs);
  font-weight      : var(--ll-font-semibold);
  color            : var(--ll-color-text-muted);
  text-transform   : uppercase;
  letter-spacing   : var(--ll-tracking-widest);
}


/* ════════════════════════════════════════════════════════
   §4a — ÍTEM EDITABLE (Tira LED — controles +/-)
   Justificación UX: la tira es el único componente cuya
   cantidad puede cambiar lógicamente (metros adicionales).
   ════════════════════════════════════════════════════════ */

.ll-cart-item {
  display          : flex;
  align-items      : flex-start;
  gap              : var(--ll-space-3);
  padding          : var(--ll-space-4) var(--ll-space-6);
  border-bottom    : 1px solid var(--ll-color-border);
  transition       : background var(--ll-transition-base);
}

.ll-cart-item:hover {
  background       : rgba(125, 218, 0, 0.03);
}

/* Thumbnail del producto */
.ll-cart-item__thumb {
  width            : 52px;
  height           : 52px;
  border-radius    : var(--ll-radius-md);
  object-fit       : cover;
  background       : var(--ll-color-bg-elevated);
  border           : 1px solid var(--ll-color-border);
  flex-shrink      : 0;
}

/* Ícono genérico cuando no hay imagen del producto */
.ll-cart-item__thumb-placeholder {
  width            : 52px;
  height           : 52px;
  border-radius    : var(--ll-radius-md);
  background       : var(--ll-color-bg-elevated);
  border           : 1px solid var(--ll-color-border);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  flex-shrink      : 0;
}

.ll-cart-item__thumb-placeholder svg {
  width            : 20px;
  height           : 20px;
  stroke           : var(--ll-color-text-muted);
  fill             : none;
  stroke-width     : 1.5;
}

/* Bloque de info */
.ll-cart-item__info {
  flex             : 1;
  min-width        : 0;
}

.ll-cart-item__name {
  font-size        : var(--ll-text-sm);
  font-weight      : var(--ll-font-semibold);
  color            : var(--ll-color-text-light);
  line-height      : var(--ll-leading-tight);
  margin-bottom    : var(--ll-space-1);
  white-space      : nowrap;
  overflow         : hidden;
  text-overflow    : ellipsis;
}

.ll-cart-item__meta {
  font-size        : var(--ll-text-xs);
  color            : var(--ll-color-text-muted);
  margin-bottom    : var(--ll-space-3);
}

/* Fila inferior: control de cantidad + precio */
.ll-cart-item__row {
  display          : flex;
  align-items      : center;
  justify-content  : space-between;
  gap              : var(--ll-space-3);
}

/* Control +/- editable */
.ll-cart-qty {
  display          : flex;
  align-items      : center;
  gap              : var(--ll-space-2);
  background       : var(--ll-color-bg-base);
  border           : 1px solid var(--ll-color-border-strong);
  border-radius    : var(--ll-radius-md);
  padding          : var(--ll-space-1);
}

.ll-cart-qty__btn {
  width            : 24px;
  height           : 24px;
  border-radius    : var(--ll-radius-sm);
  background       : transparent;
  border           : none;
  cursor           : pointer;
  color            : var(--ll-color-primary);
  font-size        : var(--ll-text-base);
  font-weight      : var(--ll-font-bold);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  line-height      : 1;
  transition       : all var(--ll-transition-base);
}

.ll-cart-qty__btn:hover {
  background       : var(--ll-color-primary-muted);
}

.ll-cart-qty__btn:disabled {
  color            : var(--ll-color-text-muted);
  cursor           : not-allowed;
}

.ll-cart-qty__value {
  font-size        : var(--ll-text-sm);
  font-weight      : var(--ll-font-bold);
  color            : var(--ll-color-text-light);
  min-width        : 24px;
  text-align       : center;
  font-family      : var(--ll-font-mono);
}

/* Precio del ítem */
.ll-cart-item__price {
  font-size        : var(--ll-text-base);
  font-weight      : var(--ll-font-bold);
  color            : var(--ll-color-text-light);
  font-family      : var(--ll-font-mono);
  white-space      : nowrap;
}


/* ════════════════════════════════════════════════════════
   §4b — ÍTEM BLOQUEADO (Fuente, Perfil, Accesorios)

   JUSTIFICACIÓN UX (SRS §4):
   Evitar que usuarios inexpertos eliminen la fuente de
   alimentación o el perfil del carrito, lo que causaría
   una instalación fallida y reclamos de garantía.
   Los ítems bloqueados son visualmente readonly:
   - Opacidad reducida
   - Sin botones de edición
   - Candado visible
   - cursor: not-allowed en el área de cantidad
   ════════════════════════════════════════════════════════ */

.ll-cart-item--locked {
  opacity          : 0.80;
  position         : relative;
}

/* Pill de "Bloqueado" en lugar de los controles +/- */
.ll-cart-qty--locked {
  display          : flex;
  align-items      : center;
  gap              : var(--ll-space-1);
  padding          : var(--ll-space-1) var(--ll-space-2);
  background       : var(--ll-color-bg-base);
  border           : 1px solid var(--ll-color-border);
  border-radius    : var(--ll-radius-md);
  cursor           : not-allowed;
  user-select      : none;
}

.ll-cart-qty--locked__value {
  font-size        : var(--ll-text-sm);
  font-weight      : var(--ll-font-bold);
  color            : var(--ll-color-text-secondary);
  font-family      : var(--ll-font-mono);
}

.ll-cart-qty--locked__icon {
  width            : 12px;
  height           : 12px;
  stroke           : var(--ll-color-text-muted);
  fill             : none;
  stroke-width     : 2;
  flex-shrink      : 0;
}

/* Tooltip explicativo al hacer hover sobre el área bloqueada */
.ll-cart-qty--locked {
  position         : relative;
}

.ll-cart-qty--locked::after {
  content          : 'Parte del kit calculado';
  position         : absolute;
  bottom           : calc(100% + 8px);
  left             : 50%;
  transform        : translateX(-50%);
  white-space      : nowrap;
  font-size        : var(--ll-text-xs);
  color            : var(--ll-color-text-secondary);
  background       : var(--ll-color-bg-elevated);
  border           : 1px solid var(--ll-color-border);
  padding          : var(--ll-space-1) var(--ll-space-3);
  border-radius    : var(--ll-radius-full);
  opacity          : 0;
  pointer-events   : none;
  transition       : opacity var(--ll-transition-base);
  z-index          : 10;
}

.ll-cart-qty--locked:hover::after {
  opacity          : 1;
}


/* ═══════════════════════════════════════════════════════════
   §5 — SUBTOTALES Y DESGLOSE
   ═══════════════════════════════════════════════════════════ */

.ll-cart-totals {
  padding          : var(--ll-space-4) var(--ll-space-6);
  border-top       : 1px solid var(--ll-color-border-strong);
  background       : var(--ll-color-bg-base);
  flex-shrink      : 0;
  display          : flex;
  flex-direction   : column;
  gap              : var(--ll-space-2);
}

.ll-cart-total-row {
  display          : flex;
  align-items      : center;
  justify-content  : space-between;
}

.ll-cart-total-row__label {
  font-size        : var(--ll-text-sm);
  color            : var(--ll-color-text-secondary);
}

.ll-cart-total-row__value {
  font-size        : var(--ll-text-sm);
  font-weight      : var(--ll-font-semibold);
  color            : var(--ll-color-text-light);
  font-family      : var(--ll-font-mono);
}

/* Fila de total final */
.ll-cart-total-row--grand {
  padding-top      : var(--ll-space-3);
  border-top       : 1px solid var(--ll-color-border);
  margin-top       : var(--ll-space-1);
}

.ll-cart-total-row--grand .ll-cart-total-row__label {
  font-size        : var(--ll-text-base);
  font-weight      : var(--ll-font-bold);
  color            : var(--ll-color-text-light);
}

.ll-cart-total-row--grand .ll-cart-total-row__value {
  font-size        : var(--ll-text-xl);
  font-weight      : var(--ll-font-extrabold);
  color            : var(--ll-color-primary);
  letter-spacing   : var(--ll-tracking-tight);
}


/* ═══════════════════════════════════════════════════════════
   §6 — FOOTER FIJO: CTA "PROCEDER AL PAGO"
   Posición sticky en la base del panel.
   ═══════════════════════════════════════════════════════════ */

.ll-cart-footer {
  padding          : var(--ll-space-5) var(--ll-space-6);
  border-top       : 1px solid var(--ll-color-border-strong);
  background       : var(--ll-color-bg-panel);
  flex-shrink      : 0;
  display          : flex;
  flex-direction   : column;
  gap              : var(--ll-space-3);
}

/* CTA principal: "Proceder al Pago" */
.ll-cart-checkout-btn {
  display          : flex;
  align-items      : center;
  justify-content  : center;
  gap              : var(--ll-space-3);
  width            : 100%;
  padding          : var(--ll-space-4) var(--ll-space-6);
  background       : var(--ll-color-primary);     /* #7DDA00 Verde LED */
  color            : var(--ll-color-text-inverted);
  font-family      : var(--ll-font-sans);
  font-size        : var(--ll-text-base);
  font-weight      : var(--ll-font-extrabold);
  border           : none;
  border-radius    : var(--ll-radius-lg);
  cursor           : pointer;
  letter-spacing   : var(--ll-tracking-wide);
  text-decoration  : none;
  transition       : background var(--ll-transition-base),
                     box-shadow var(--ll-transition-base),
                     transform  var(--ll-transition-spring);
}

.ll-cart-checkout-btn:hover {
  background       : var(--ll-color-primary-hover);  /* #C2F000 Lima */
  box-shadow       : var(--ll-shadow-led);
  transform        : translateY(-2px);
}

.ll-cart-checkout-btn:active {
  transform        : translateY(0);
}

.ll-cart-checkout-btn.is-loading {
  pointer-events   : none;
  opacity          : 0.75;
}

.ll-cart-checkout-btn svg {
  width            : 18px;
  height           : 18px;
  stroke           : currentColor;
  fill             : none;
  stroke-width     : 2.5;
  flex-shrink      : 0;
}

/* SSL / seguridad bajo el CTA */
.ll-cart-footer__security {
  display          : flex;
  align-items      : center;
  justify-content  : center;
  gap              : var(--ll-space-2);
  font-size        : var(--ll-text-xs);
  color            : var(--ll-color-text-muted);
}

.ll-cart-footer__security svg {
  width            : 12px;
  height           : 12px;
  stroke           : var(--ll-color-primary);
  fill             : none;
  stroke-width     : 2;
  flex-shrink      : 0;
}

/* Link de seguir comprando */
.ll-cart-footer__continue {
  display          : block;
  text-align       : center;
  font-size        : var(--ll-text-sm);
  color            : var(--ll-color-text-muted);
  text-decoration  : none;
  cursor           : pointer;
  background       : none;
  border           : none;
  font-family      : var(--ll-font-sans);
  transition       : color var(--ll-transition-base);
}

.ll-cart-footer__continue:hover {
  color            : var(--ll-color-text-secondary);
}


/* ═══════════════════════════════════════════════════════════
   §7 — ESTADO VACÍO DEL CARRITO
   ═══════════════════════════════════════════════════════════ */

.ll-cart-empty {
  flex             : 1;
  display          : flex;
  flex-direction   : column;
  align-items      : center;
  justify-content  : center;
  padding          : var(--ll-space-12) var(--ll-space-6);
  text-align       : center;
  gap              : var(--ll-space-4);
}

.ll-cart-empty__icon {
  width            : 80px;
  height           : 80px;
  border-radius    : var(--ll-radius-2xl);
  background       : var(--ll-color-bg-elevated);
  border           : 1px solid var(--ll-color-border);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  margin-bottom    : var(--ll-space-2);
}

.ll-cart-empty__icon svg {
  width            : 36px;
  height           : 36px;
  stroke           : var(--ll-color-text-muted);
  fill             : none;
  stroke-width     : 1.5;
}

.ll-cart-empty__title {
  font-size        : var(--ll-text-base);
  font-weight      : var(--ll-font-bold);
  color            : var(--ll-color-text-light);
}

.ll-cart-empty__subtitle {
  font-size        : var(--ll-text-sm);
  color            : var(--ll-color-text-muted);
  max-width        : 280px;
  line-height      : var(--ll-leading-loose);
}

.ll-cart-empty__cta {
  margin-top       : var(--ll-space-2);
}


/* ═══════════════════════════════════════════════════════════
   §8 — MICRO-ANIMACIONES Y ESTADOS
   ═══════════════════════════════════════════════════════════ */

/* Ítem entrando al carrito */
@keyframes ll-cart-item-in {
  from {
    opacity         : 0;
    transform       : translateX(20px);
  }
  to {
    opacity         : 1;
    transform       : translateX(0);
  }
}

.ll-cart-item.is-new {
  animation        : ll-cart-item-in 0.35s var(--ll-transition-spring) both;
}

/* Ítem siendo eliminado */
@keyframes ll-cart-item-out {
  from {
    opacity         : 1;
    transform       : translateX(0);
    max-height      : 120px;
  }
  to {
    opacity         : 0;
    transform       : translateX(20px);
    max-height      : 0;
    padding-block   : 0;
  }
}

.ll-cart-item.is-removing {
  animation        : ll-cart-item-out 0.3s ease both;
  overflow         : hidden;
}

/* Spinner de carga global */
.ll-cart-panel.is-loading::after {
  content          : '';
  position         : absolute;
  inset            : 0;
  background       : var(--ll-color-bg-overlay);
  z-index          : 10;
  display          : flex;
  align-items      : center;
  justify-content  : center;
}

/* Skeleton de ítem mientras carga */
.ll-cart-item--skeleton {
  pointer-events   : none;
}

.ll-cart-item--skeleton .ll-cart-item__name,
.ll-cart-item--skeleton .ll-cart-item__meta,
.ll-cart-item--skeleton .ll-cart-item__price {
  background       : linear-gradient(
    90deg,
    var(--ll-color-bg-elevated)  0%,
    var(--ll-color-bg-surface)   50%,
    var(--ll-color-bg-elevated)  100%
  );
  background-size  : 200% 100%;
  animation        : ll-skeleton-shimmer 1.8s ease-in-out infinite;
  color            : transparent;
  border-radius    : var(--ll-radius-sm);
}

@keyframes ll-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════════════
   §9 — MODAL DE CAPTURA DE TELÉFONO (WhatsApp Lead)
   Se activa cuando el puente detecta metros >= 30
   ═══════════════════════════════════════════════════════════ */

/* Overlay del modal */
.ll-phone-modal-overlay {
  position         : fixed;
  inset            : 0;
  z-index          : calc(var(--ll-z-modal) + 10);
  background       : var(--ll-color-bg-overlay);
  backdrop-filter  : blur(8px);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  padding          : var(--ll-space-6);

  opacity          : 0;
  pointer-events   : none;
  transition       : opacity var(--ll-transition-base);
}

.ll-phone-modal-overlay.is-open {
  opacity          : 1;
  pointer-events   : auto;
}

/* Caja del modal */
.ll-phone-modal {
  background       : var(--ll-color-bg-panel);
  border           : 1px solid var(--ll-color-border-accent);
  border-radius    : var(--ll-radius-2xl);
  width            : min(440px, 100%);
  overflow         : hidden;
  box-shadow       : var(--ll-shadow-xl), var(--ll-shadow-led);

  transform        : scale(0.95) translateY(12px);
  transition       : transform var(--ll-transition-spring);
}

.ll-phone-modal-overlay.is-open .ll-phone-modal {
  transform        : scale(1) translateY(0);
}

/* Línea de acento superior */
.ll-phone-modal::before {
  content          : '';
  display          : block;
  height           : 3px;
  background       : linear-gradient(
    90deg,
    var(--ll-color-secondary) 0%,
    var(--ll-color-primary)   100%
  );
}

.ll-phone-modal__body {
  padding          : var(--ll-space-8) var(--ll-space-8) var(--ll-space-6);
}

/* Ícono WhatsApp */
.ll-phone-modal__icon {
  width            : 56px;
  height           : 56px;
  border-radius    : var(--ll-radius-xl);
  background       : rgba(37, 211, 102, 0.15);
  border           : 1px solid rgba(37, 211, 102, 0.30);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  margin-bottom    : var(--ll-space-5);
}

.ll-phone-modal__icon svg {
  width            : 28px;
  height           : 28px;
  stroke           : #25D366;   /* WhatsApp brand green */
  fill             : none;
  stroke-width     : 1.75;
}

.ll-phone-modal__title {
  font-size        : var(--ll-text-lg);
  font-weight      : var(--ll-font-extrabold);
  color            : var(--ll-color-text-light);
  line-height      : var(--ll-leading-tight);
  margin-bottom    : var(--ll-space-2);
}

.ll-phone-modal__subtitle {
  font-size        : var(--ll-text-sm);
  color            : var(--ll-color-text-secondary);
  line-height      : var(--ll-leading-loose);
  margin-bottom    : var(--ll-space-6);
}

/* Input de teléfono */
.ll-phone-modal__input-wrap {
  display          : flex;
  gap              : var(--ll-space-2);
  margin-bottom    : var(--ll-space-4);
}

.ll-phone-modal__prefix {
  display          : flex;
  align-items      : center;
  padding          : var(--ll-space-3) var(--ll-space-3);
  background       : var(--ll-color-bg-elevated);
  border           : 1px solid var(--ll-color-border-strong);
  border-radius    : var(--ll-radius-md);
  font-size        : var(--ll-text-base);
  color            : var(--ll-color-text-secondary);
  font-weight      : var(--ll-font-semibold);
  white-space      : nowrap;
  flex-shrink      : 0;
}

.ll-phone-modal__input {
  flex             : 1;
  padding          : var(--ll-space-3) var(--ll-space-4);
  background       : var(--ll-color-bg-elevated);
  border           : 1px solid var(--ll-color-border-strong);
  border-radius    : var(--ll-radius-md);
  font-family      : var(--ll-font-sans);
  font-size        : var(--ll-text-base);
  color            : var(--ll-color-text-light);
  outline          : none;
  transition       : border-color var(--ll-transition-base),
                     box-shadow   var(--ll-transition-base);
  width            : 100%;
}

.ll-phone-modal__input::placeholder {
  color            : var(--ll-color-text-muted);
}

.ll-phone-modal__input:focus {
  border-color     : var(--ll-color-primary);
  box-shadow       : 0 0 0 3px var(--ll-color-primary-muted);
}

.ll-phone-modal__input.is-error {
  border-color     : var(--ll-color-error);
  box-shadow       : 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ll-phone-modal__error-msg {
  font-size        : var(--ll-text-xs);
  color            : var(--ll-color-error);
  margin-top       : calc(var(--ll-space-2) * -1);
  margin-bottom    : var(--ll-space-3);
  min-height       : 1em;
}

/* CTA del modal — WhatsApp */
.ll-phone-modal__submit {
  display          : flex;
  align-items      : center;
  justify-content  : center;
  gap              : var(--ll-space-3);
  width            : 100%;
  padding          : var(--ll-space-4);
  background       : #25D366;              /* WhatsApp brand */
  color            : #fff;
  font-family      : var(--ll-font-sans);
  font-size        : var(--ll-text-base);
  font-weight      : var(--ll-font-bold);
  border           : none;
  border-radius    : var(--ll-radius-lg);
  cursor           : pointer;
  transition       : background var(--ll-transition-base),
                     transform  var(--ll-transition-spring);
}

.ll-phone-modal__submit:hover {
  background       : #1ebe5d;
  transform        : translateY(-1px);
}

.ll-phone-modal__dismiss {
  display          : block;
  text-align       : center;
  margin-top       : var(--ll-space-4);
  font-size        : var(--ll-text-sm);
  color            : var(--ll-color-text-muted);
  cursor           : pointer;
  background       : none;
  border           : none;
  font-family      : var(--ll-font-sans);
  width            : 100%;
  transition       : color var(--ll-transition-base);
}

.ll-phone-modal__dismiss:hover {
  color            : var(--ll-color-text-secondary);
}

/* Privacy disclaimer */
.ll-phone-modal__privacy {
  padding          : var(--ll-space-4) var(--ll-space-8) var(--ll-space-6);
  font-size        : var(--ll-text-xs);
  color            : var(--ll-color-text-muted);
  text-align       : center;
  border-top       : 1px solid var(--ll-color-border);
  line-height      : var(--ll-leading-loose);
}

.ll-phone-modal__privacy a {
  color            : var(--ll-color-primary);
  text-decoration  : none;
}

.ll-phone-modal__privacy a:hover {
  text-decoration  : underline;
}