/**
 * ============================================================
 *  L-LEDS — FASE 3: CALCULADORA DE MATERIALES (CSS)
 *  Archivo : ll-calc.css
 *  Dep.    : ll-tokens.css rev.2 (Paleta Oficial Verde)
 *
 *  SECCIONES:
 *   §0  Wrapper de la sección calculadora
 *   §1  Barra de progreso / Steps indicator
 *   §2  Contenedor del wizard (transiciones)
 *   §3  Step 1 — Control de metros (botones +/- y slider)
 *   §4  Step 2 — Selector de ambiente (interior/exterior)
 *   §5  Step 3 — Selector de perfil (embutir/aplicar)
 *   §6  Pantalla de resumen "Tu Kit de Proyecto"
 *   §7  Navegación entre pasos
 *   §8  Skeleton del resumen + estados de carga
 * ============================================================
 */


/* ═══════════════════════════════════════════════════════════
   §0 — SECCIÓN WRAPPER
   ═══════════════════════════════════════════════════════════ */

.ll-calc-section {
  padding-block   : var(--ll-space-20) var(--ll-space-24);
  background      : var(--ll-color-bg-base);
  position        : relative;
  overflow        : hidden;
}

/* Fondo decorativo: haz de luz LED verde difuso */
.ll-calc-section::before {
  content         : '';
  position        : absolute;
  top             : -200px;
  left            : 50%;
  transform       : translateX(-50%);
  width           : 600px;
  height          : 600px;
  background      : radial-gradient(
    ellipse at center,
    rgba(125, 218, 0, 0.06) 0%,
    transparent             70%
  );
  pointer-events  : none;
  z-index         : 0;
}

.ll-calc-section__inner {
  position        : relative;
  z-index         : 1;
  max-width       : 720px;
  margin-inline   : auto;
  padding-inline  : var(--ll-container-pad);
}

/* Header de sección */
.ll-calc-section__header {
  text-align      : center;
  margin-bottom   : var(--ll-space-12);
}

.ll-calc-section__eyebrow {
  display         : inline-flex;
  align-items     : center;
  gap             : var(--ll-space-2);
  font-size       : var(--ll-text-xs);
  font-weight     : var(--ll-font-semibold);
  color           : var(--ll-color-primary);
  letter-spacing  : var(--ll-tracking-widest);
  text-transform  : uppercase;
  margin-bottom   : var(--ll-space-3);
}

/* Punto parpadeante en el eyebrow */
.ll-calc-section__eyebrow::before {
  content         : '';
  width           : 8px;
  height          : 8px;
  border-radius   : var(--ll-radius-full);
  background      : var(--ll-color-primary);
  box-shadow      : var(--ll-shadow-led);
  animation       : ll-calc-pulse 1.8s ease-in-out infinite;
  flex-shrink     : 0;
}

@keyframes ll-calc-pulse {
  0%, 100% { opacity: 1; box-shadow: var(--ll-shadow-led); }
  50%       { opacity: 0.4; box-shadow: none; }
}

.ll-calc-section__title {
  font-size       : var(--ll-text-2xl);
  font-weight     : var(--ll-font-extrabold);
  color           : var(--ll-color-text-primary);
  letter-spacing  : var(--ll-tracking-tight);
  line-height     : var(--ll-leading-tight);
  margin-bottom   : var(--ll-space-4);
}

.ll-calc-section__title em {
  font-style      : normal;
  color           : var(--ll-color-primary);
}

.ll-calc-section__subtitle {
  font-size       : var(--ll-text-base);
  color           : var(--ll-color-text-secondary);
  line-height     : var(--ll-leading-loose);
  max-width       : 480px;
  margin-inline   : auto;
}


/* ═══════════════════════════════════════════════════════════
   §1 — BARRA DE PROGRESO / STEPS INDICATOR
   ═══════════════════════════════════════════════════════════ */

.ll-calc-progress {
  display         : flex;
  align-items     : center;
  margin-bottom   : var(--ll-space-10);
  gap             : 0;
}

/* Cada step */
.ll-calc-step-dot {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  gap             : var(--ll-space-2);
  flex            : 0 0 auto;
  position        : relative;
  z-index         : 1;
}

/* Círculo numerado */
.ll-calc-step-dot__circle {
  width           : 40px;
  height          : 40px;
  border-radius   : var(--ll-radius-full);
  border          : 2px solid var(--ll-color-border-strong);
  background      : var(--ll-color-bg-surface);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-family     : var(--ll-font-sans);
  font-size       : var(--ll-text-sm);
  font-weight     : var(--ll-font-bold);
  color           : var(--ll-color-text-muted);
  transition      : all var(--ll-transition-base);
  position        : relative;
}

/* Estado activo */
.ll-calc-step-dot.is-active .ll-calc-step-dot__circle {
  border-color    : var(--ll-color-primary);
  background      : var(--ll-color-primary);
  color           : var(--ll-color-text-inverted);
  box-shadow      : var(--ll-shadow-led);
}

/* Estado completado: reemplazar número con checkmark */
.ll-calc-step-dot.is-done .ll-calc-step-dot__circle {
  border-color    : var(--ll-color-primary);
  background      : var(--ll-color-primary-muted);
  color           : var(--ll-color-primary);
}

.ll-calc-step-dot.is-done .ll-calc-step-dot__circle::after {
  content         : '✓';
  font-size       : var(--ll-text-base);
  font-weight     : var(--ll-font-bold);
}

.ll-calc-step-dot.is-done .ll-calc-step-dot__num {
  display         : none;
}

/* Label debajo del círculo */
.ll-calc-step-dot__label {
  font-size       : var(--ll-text-xs);
  font-weight     : var(--ll-font-medium);
  color           : var(--ll-color-text-muted);
  text-align      : center;
  white-space     : nowrap;
  transition      : color var(--ll-transition-base);
}

.ll-calc-step-dot.is-active .ll-calc-step-dot__label,
.ll-calc-step-dot.is-done .ll-calc-step-dot__label {
  color           : var(--ll-color-primary);
}

/* Línea conectora entre dots */
.ll-calc-progress__line {
  flex            : 1;
  height          : 2px;
  background      : var(--ll-color-border);
  margin-bottom   : 22px; /* alinea con el centro del círculo */
  position        : relative;
  overflow        : hidden;
}

/* Fill animado de la línea (JS actualiza el width via CSS var) */
.ll-calc-progress__line::after {
  content         : '';
  position        : absolute;
  inset           : 0;
  background      : linear-gradient(
    90deg,
    var(--ll-color-primary) 0%,
    var(--ll-color-secondary) 100%
  );
  transform-origin: left;
  transform       : scaleX(var(--ll-line-fill, 0));
  transition      : transform var(--ll-transition-slow);
}

.ll-calc-progress__line.is-filled::after {
  --ll-line-fill  : 1;
}


/* ═══════════════════════════════════════════════════════════
   §2 — CONTENEDOR DEL WIZARD (transiciones entre steps)
   ═══════════════════════════════════════════════════════════ */

.ll-calc-card {
  background      : var(--ll-color-bg-surface);
  border          : 1px solid var(--ll-color-border);
  border-radius   : var(--ll-radius-2xl);
  overflow        : hidden;
  position        : relative;
}

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

/* Panel de cada step: oculto por defecto */
.ll-calc-panel {
  display         : none;
  padding         : var(--ll-space-8) var(--ll-space-8) var(--ll-space-6);
  animation       : ll-panel-in var(--ll-transition-slow) both;
}

@keyframes ll-panel-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Panel visible */
.ll-calc-panel.is-active {
  display         : block;
}

/* Panel saliente (JS añade .is-leaving antes del swap) */
.ll-calc-panel.is-leaving {
  display         : block;
  animation       : ll-panel-out var(--ll-transition-base) both;
}

@keyframes ll-panel-out {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(-16px);}
}

/* Encabezado interno de cada panel */
.ll-calc-panel__title {
  font-size       : var(--ll-text-lg);
  font-weight     : var(--ll-font-bold);
  color           : var(--ll-color-text-primary);
  margin-bottom   : var(--ll-space-2);
  line-height     : var(--ll-leading-tight);
}

.ll-calc-panel__hint {
  font-size       : var(--ll-text-sm);
  color           : var(--ll-color-text-secondary);
  margin-bottom   : var(--ll-space-8);
  line-height     : var(--ll-leading-normal);
}


/* ═══════════════════════════════════════════════════════════
   §3 — STEP 1: CONTROL DE METROS (botones +/- y slider)
   ═══════════════════════════════════════════════════════════ */

/* Display de metros */
.ll-calc-meter-display {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : var(--ll-space-6);
  margin-bottom   : var(--ll-space-8);
}

/* Botones +/- */
.ll-calc-meter-btn {
  width           : 52px;
  height          : 52px;
  border-radius   : var(--ll-radius-full);
  border          : 2px solid var(--ll-color-border-accent);
  background      : var(--ll-color-bg-elevated);
  color           : var(--ll-color-primary);
  font-size       : var(--ll-text-xl);
  font-weight     : var(--ll-font-light);
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : all var(--ll-transition-spring);
  user-select     : none;
  line-height     : 1;
  flex-shrink     : 0;
}

.ll-calc-meter-btn:hover {
  background      : var(--ll-color-primary);
  color           : var(--ll-color-text-inverted);
  border-color    : var(--ll-color-primary);
  transform       : scale(1.08);
  box-shadow      : var(--ll-shadow-led);
}

.ll-calc-meter-btn:active {
  transform       : scale(0.95);
}

/* Número de metros */
.ll-calc-meter-value {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  gap             : var(--ll-space-1);
}

.ll-calc-meter-value__num {
  font-size       : 4rem;
  font-weight     : var(--ll-font-extrabold);
  color           : var(--ll-color-primary);
  line-height     : 1;
  font-family     : var(--ll-font-sans);
  letter-spacing  : var(--ll-tracking-tight);
  transition      : transform var(--ll-transition-spring);
  min-width       : 120px;
  text-align      : center;
}

/* Micro-animación al cambiar el valor */
.ll-calc-meter-value__num.is-bumping {
  animation       : ll-num-bump 0.25s var(--ll-transition-spring);
}

@keyframes ll-num-bump {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1);    }
}

.ll-calc-meter-value__unit {
  font-size       : var(--ll-text-sm);
  color           : var(--ll-color-text-muted);
  font-weight     : var(--ll-font-medium);
  letter-spacing  : var(--ll-tracking-wide);
  text-transform  : uppercase;
}

/* Slider de rango */
.ll-calc-slider-wrap {
  position        : relative;
  padding-bottom  : var(--ll-space-6);
}

.ll-calc-slider {
  -webkit-appearance : none;
  appearance         : none;
  width              : 100%;
  height             : 6px;
  background         : var(--ll-color-bg-elevated);
  border-radius      : var(--ll-radius-full);
  outline            : none;
  cursor             : pointer;

  /* Track fill: CSS custom property actualizada por JS */
  background: linear-gradient(
    to right,
    var(--ll-color-primary) 0%,
    var(--ll-color-primary) var(--ll-slider-pct, 0%),
    var(--ll-color-bg-elevated) var(--ll-slider-pct, 0%),
    var(--ll-color-bg-elevated) 100%
  );
}

/* Thumb */
.ll-calc-slider::-webkit-slider-thumb {
  -webkit-appearance : none;
  appearance         : none;
  width              : 24px;
  height             : 24px;
  border-radius      : var(--ll-radius-full);
  background         : var(--ll-color-primary);
  border             : 3px solid var(--ll-color-bg-base);
  cursor             : grab;
  box-shadow         : var(--ll-shadow-led);
  transition         : transform var(--ll-transition-spring),
                       background var(--ll-transition-base);
}

.ll-calc-slider::-moz-range-thumb {
  width              : 24px;
  height             : 24px;
  border-radius      : var(--ll-radius-full);
  background         : var(--ll-color-primary);
  border             : 3px solid var(--ll-color-bg-base);
  cursor             : grab;
  box-shadow         : var(--ll-shadow-led);
  transition         : transform var(--ll-transition-spring);
}

.ll-calc-slider:active::-webkit-slider-thumb {
  cursor             : grabbing;
  transform          : scale(1.2);
  background         : var(--ll-color-primary-hover);
}

/* Etiquetas min/max del slider */
.ll-calc-slider-labels {
  display            : flex;
  justify-content    : space-between;
  margin-top         : var(--ll-space-2);
  font-size          : var(--ll-text-xs);
  color              : var(--ll-color-text-muted);
}

/* Chips de acceso rápido: 5m, 10m, 20m, 30m, 50m */
.ll-calc-quick-picks {
  display            : flex;
  flex-wrap          : wrap;
  gap                : var(--ll-space-2);
  margin-top         : var(--ll-space-4);
  justify-content    : center;
}

.ll-calc-quick-pick {
  padding            : var(--ll-space-1) var(--ll-space-3);
  background         : var(--ll-color-bg-elevated);
  border             : 1px solid var(--ll-color-border);
  border-radius      : var(--ll-radius-full);
  font-size          : var(--ll-text-xs);
  font-weight        : var(--ll-font-semibold);
  color              : var(--ll-color-text-secondary);
  cursor             : pointer;
  transition         : all var(--ll-transition-base);
  font-family        : var(--ll-font-sans);
}

.ll-calc-quick-pick:hover,
.ll-calc-quick-pick.is-active {
  background         : var(--ll-color-primary-muted);
  border-color       : var(--ll-color-primary);
  color              : var(--ll-color-primary);
}


/* ═══════════════════════════════════════════════════════════
   §4 — STEP 2: SELECTOR DE AMBIENTE (Interior / Exterior)
   ═══════════════════════════════════════════════════════════ */

.ll-calc-choice-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : var(--ll-space-4);
  margin-bottom         : var(--ll-space-4);
}

@media (max-width: 479px) {
  .ll-calc-choice-grid {
    grid-template-columns : 1fr;
  }
}

/* Tarjeta de opción */
.ll-calc-choice {
  position          : relative;
  display           : flex;
  flex-direction    : column;
  align-items       : center;
  justify-content   : center;
  gap               : var(--ll-space-4);
  padding           : var(--ll-space-8) var(--ll-space-5);
  background        : var(--ll-color-bg-elevated);
  border            : 2px solid var(--ll-color-border);
  border-radius     : var(--ll-radius-xl);
  cursor            : pointer;
  text-align        : center;
  transition        : all var(--ll-transition-base);
  user-select       : none;

  /* Input radio oculto pero accesible */
}

/* Input radio oculto: posicionado sobre la tarjeta completa */
.ll-calc-choice input[type="radio"] {
  position          : absolute;
  inset             : 0;
  opacity           : 0;
  cursor            : pointer;
  margin            : 0;
  width             : 100%;
  height            : 100%;
}

.ll-calc-choice:hover {
  border-color      : var(--ll-color-border-accent);
  background        : rgba(125, 218, 0, 0.05);
}

/* Estado seleccionado (JS añade .is-selected al detectar el radio) */
.ll-calc-choice.is-selected {
  border-color      : var(--ll-color-primary);
  background        : var(--ll-color-primary-muted);
  box-shadow        : var(--ll-shadow-led);
}

/* Checkmark de selección (esquina superior derecha) */
.ll-calc-choice__check {
  position          : absolute;
  top               : var(--ll-space-3);
  right             : var(--ll-space-3);
  width             : 20px;
  height            : 20px;
  border-radius     : var(--ll-radius-full);
  border            : 2px solid var(--ll-color-border-strong);
  background        : var(--ll-color-bg-base);
  display           : flex;
  align-items       : center;
  justify-content   : center;
  transition        : all var(--ll-transition-spring);
  flex-shrink       : 0;
  pointer-events    : none;
}

.ll-calc-choice__check::after {
  content           : '';
  width             : 8px;
  height             : 8px;
  border-radius     : var(--ll-radius-full);
  background        : var(--ll-color-primary);
  opacity           : 0;
  transition        : opacity var(--ll-transition-base);
}

.ll-calc-choice.is-selected .ll-calc-choice__check {
  border-color      : var(--ll-color-primary);
  background        : var(--ll-color-primary);
}

.ll-calc-choice.is-selected .ll-calc-choice__check::after {
  background        : var(--ll-color-text-inverted);
  opacity           : 1;
}

/* Ícono del choice (SVG grande) */
.ll-calc-choice__icon {
  width             : 64px;
  height            : 64px;
  border-radius     : var(--ll-radius-xl);
  background        : var(--ll-color-bg-base);
  display           : flex;
  align-items       : center;
  justify-content   : center;
  flex-shrink       : 0;
  transition        : all var(--ll-transition-base);
  pointer-events    : none;
}

.ll-calc-choice__icon svg {
  width             : 32px;
  height            : 32px;
  stroke            : var(--ll-color-text-muted);
  fill              : none;
  stroke-width      : 1.5;
  transition        : stroke var(--ll-transition-base);
}

.ll-calc-choice.is-selected .ll-calc-choice__icon {
  background        : rgba(125, 218, 0, 0.15);
}

.ll-calc-choice.is-selected .ll-calc-choice__icon svg {
  stroke            : var(--ll-color-primary);
}

/* Textos del choice */
.ll-calc-choice__label {
  font-size         : var(--ll-text-md);
  font-weight       : var(--ll-font-bold);
  color             : var(--ll-color-text-primary);
  pointer-events    : none;
  transition        : color var(--ll-transition-base);
}

.ll-calc-choice.is-selected .ll-calc-choice__label {
  color             : var(--ll-color-primary);
}

.ll-calc-choice__sub {
  font-size         : var(--ll-text-xs);
  color             : var(--ll-color-text-muted);
  pointer-events    : none;
  line-height       : var(--ll-leading-normal);
}


/* ═══════════════════════════════════════════════════════════
   §5 — STEP 3: SELECTOR DE PERFIL (mismo CSS que §4, alias)
   Las .ll-calc-choice y .ll-calc-choice-grid se reutilizan.
   Solo se añaden variantes para el indicador de IP.
   ═══════════════════════════════════════════════════════════ */

.ll-calc-choice__badge {
  display           : inline-block;
  padding           : 2px var(--ll-space-2);
  background        : var(--ll-color-bg-base);
  border            : 1px solid var(--ll-color-border-strong);
  border-radius     : var(--ll-radius-full);
  font-size         : var(--ll-text-xs);
  font-weight       : var(--ll-font-semibold);
  color             : var(--ll-color-text-secondary);
  letter-spacing    : var(--ll-tracking-wide);
  pointer-events    : none;
  transition        : all var(--ll-transition-base);
}

.ll-calc-choice.is-selected .ll-calc-choice__badge {
  border-color      : var(--ll-color-primary);
  color             : var(--ll-color-primary);
}


/* ═══════════════════════════════════════════════════════════
   §6 — PANTALLA DE RESUMEN "TU KIT DE PROYECTO"
   ═══════════════════════════════════════════════════════════ */

/* Panel del resumen (mismo contenedor .ll-calc-panel) */
.ll-calc-summary {}

.ll-calc-summary__hero {
  display           : flex;
  align-items       : center;
  gap               : var(--ll-space-5);
  padding           : var(--ll-space-5) var(--ll-space-6);
  background        : var(--ll-color-primary-muted);
  border-bottom     : 1px solid var(--ll-color-border-accent);
  border-radius     : var(--ll-radius-lg) var(--ll-radius-lg) 0 0;
  margin-bottom     : var(--ll-space-6);
}

.ll-calc-summary__hero-icon {
  width             : 56px;
  height            : 56px;
  border-radius     : var(--ll-radius-xl);
  background        : var(--ll-color-primary);
  display           : flex;
  align-items       : center;
  justify-content   : center;
  flex-shrink       : 0;
  box-shadow        : var(--ll-shadow-led);
}

.ll-calc-summary__hero-icon svg {
  width             : 28px;
  height            : 28px;
  stroke            : var(--ll-color-text-inverted);
  fill              : none;
  stroke-width      : 2;
}

.ll-calc-summary__hero-text {}

.ll-calc-summary__hero-title {
  font-size         : var(--ll-text-base);
  font-weight       : var(--ll-font-bold);
  color             : var(--ll-color-text-primary);
  line-height       : var(--ll-leading-tight);
  margin-bottom     : var(--ll-space-1);
}

.ll-calc-summary__hero-meta {
  font-size         : var(--ll-text-sm);
  color             : var(--ll-color-text-secondary);
}

/* Desglose de items del kit */
.ll-calc-summary__items {
  display           : flex;
  flex-direction    : column;
  gap               : var(--ll-space-1);
}

/* Fila de cada ítem del kit */
.ll-calc-kit-item {
  display           : flex;
  align-items       : center;
  gap               : var(--ll-space-4);
  padding           : var(--ll-space-3) var(--ll-space-6);
  border-bottom     : 1px solid var(--ll-color-border);
  transition        : background var(--ll-transition-base);
}

.ll-calc-kit-item:last-child {
  border-bottom     : none;
}

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

/* Ícono de categoría del ítem */
.ll-calc-kit-item__icon {
  width             : 40px;
  height            : 40px;
  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-calc-kit-item__icon svg {
  width             : 18px;
  height            : 18px;
  stroke            : var(--ll-color-primary);
  fill              : none;
  stroke-width      : 1.75;
}

/* Información del ítem */
.ll-calc-kit-item__info {
  flex              : 1;
  min-width         : 0;
}

.ll-calc-kit-item__name {
  font-size         : var(--ll-text-sm);
  font-weight       : var(--ll-font-semibold);
  color             : var(--ll-color-text-primary);
  white-space       : nowrap;
  overflow          : hidden;
  text-overflow     : ellipsis;
  margin-bottom     : 2px;
}

.ll-calc-kit-item__detail {
  font-size         : var(--ll-text-xs);
  color             : var(--ll-color-text-muted);
}

/* Cantidad (lado derecho) */
.ll-calc-kit-item__qty {
  font-size         : var(--ll-text-sm);
  font-weight       : var(--ll-font-bold);
  color             : var(--ll-color-text-secondary);
  font-family       : var(--ll-font-mono);
  white-space       : nowrap;
  flex-shrink       : 0;
}

/* ── ÍTEM BLOQUEADO (accesorios — no editables) ─────────── */
/* SRS §4: los accesorios no pueden ser eliminados ni
   modificados manualmente. Solo el CTA principal opera. */
.ll-calc-kit-item--locked {
  opacity           : 0.75;
}

.ll-calc-kit-item--locked .ll-calc-kit-item__qty {
  display           : flex;
  align-items       : center;
  gap               : var(--ll-space-1);
}

.ll-calc-kit-item--locked .ll-calc-kit-item__qty::after {
  content           : '';
  width             : 12px;
  height            : 12px;
  background-image  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6040' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat : no-repeat;
  background-size   : contain;
  flex-shrink       : 0;
}

/* ── Totales del kit ─────────────────────────────────────── */
.ll-calc-summary__totals {
  padding           : var(--ll-space-5) var(--ll-space-6);
  border-top        : 1px solid var(--ll-color-border-strong);
  background        : var(--ll-color-bg-base);
}

.ll-calc-summary__total-row {
  display           : flex;
  justify-content   : space-between;
  align-items       : center;
  margin-bottom     : var(--ll-space-2);
}

.ll-calc-summary__total-row:last-of-type {
  margin-bottom     : 0;
}

.ll-calc-summary__total-label {
  font-size         : var(--ll-text-sm);
  color             : var(--ll-color-text-secondary);
}

.ll-calc-summary__total-value {
  font-size         : var(--ll-text-sm);
  font-weight       : var(--ll-font-semibold);
  color             : var(--ll-color-text-primary);
  font-family       : var(--ll-font-mono);
}

/* Fila del total final — destacada */
.ll-calc-summary__total-row--final .ll-calc-summary__total-label {
  font-size         : var(--ll-text-base);
  font-weight       : var(--ll-font-bold);
  color             : var(--ll-color-text-primary);
}

.ll-calc-summary__total-row--final .ll-calc-summary__total-value {
  font-size         : var(--ll-text-xl);
  font-weight       : var(--ll-font-extrabold);
  color             : var(--ll-color-primary);
}


/* ═══════════════════════════════════════════════════════════
   §7 — NAVEGACIÓN ENTRE PASOS
   ═══════════════════════════════════════════════════════════ */

.ll-calc-nav {
  display           : flex;
  align-items       : center;
  justify-content   : space-between;
  padding           : var(--ll-space-5) var(--ll-space-8);
  border-top        : 1px solid var(--ll-color-border);
  gap               : var(--ll-space-4);
}

/* Botón "Anterior" */
.ll-calc-nav__back {
  display           : inline-flex;
  align-items       : center;
  gap               : var(--ll-space-2);
  background        : transparent;
  border            : none;
  font-family       : var(--ll-font-sans);
  font-size         : var(--ll-text-sm);
  font-weight       : var(--ll-font-medium);
  color             : var(--ll-color-text-muted);
  cursor            : pointer;
  padding           : var(--ll-space-2) var(--ll-space-3);
  border-radius     : var(--ll-radius-md);
  transition        : all var(--ll-transition-base);
}

.ll-calc-nav__back:hover {
  color             : var(--ll-color-text-secondary);
  background        : var(--ll-color-bg-elevated);
}

.ll-calc-nav__back[hidden] {
  visibility        : hidden;  /* Mantiene el espacio aunque esté oculto */
  pointer-events    : none;
}

/* Botón "Siguiente" / "Calcular" */
.ll-calc-nav__next {
  display           : inline-flex;
  align-items       : center;
  gap               : var(--ll-space-2);
  background        : var(--ll-color-primary);
  color             : var(--ll-color-text-inverted);
  font-family       : var(--ll-font-sans);
  font-size         : var(--ll-text-base);
  font-weight       : var(--ll-font-bold);
  padding           : var(--ll-space-3) var(--ll-space-8);
  border-radius     : var(--ll-radius-full);
  border            : none;
  cursor            : pointer;
  letter-spacing    : var(--ll-tracking-wide);
  transition        : background var(--ll-transition-base),
                      transform  var(--ll-transition-spring),
                      box-shadow var(--ll-transition-base);
}

.ll-calc-nav__next:hover {
  background        : var(--ll-color-primary-hover);
  box-shadow        : var(--ll-shadow-led);
  transform         : translateY(-2px);
}

.ll-calc-nav__next:disabled {
  background        : var(--ll-color-bg-elevated);
  color             : var(--ll-color-text-muted);
  cursor            : not-allowed;
  transform         : none;
  box-shadow        : none;
}

.ll-calc-nav__next svg {
  width             : 16px;
  height            : 16px;
  stroke            : currentColor;
  fill              : none;
  stroke-width      : 2.5;
}

/* ── CTA FINAL: "Añadir Proyecto Completo al Carrito" ─────── */
/* Prominencia máxima — botón hero del flujo de conversión    */
.ll-calc-cta-final {
  display           : flex;
  align-items       : center;
  justify-content   : center;
  gap               : var(--ll-space-3);
  width             : 100%;
  padding           : var(--ll-space-5) var(--ll-space-6);
  background        : var(--ll-color-primary);           /* Verde LED Vibrante #7DDA00 */
  color             : var(--ll-color-text-inverted);
  font-family       : var(--ll-font-sans);
  font-size         : var(--ll-text-md);
  font-weight       : var(--ll-font-extrabold);
  border            : none;
  border-radius     : var(--ll-radius-xl);
  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);
  margin            : var(--ll-space-6) var(--ll-space-6) var(--ll-space-2);
  width             : calc(100% - var(--ll-space-12));
}

.ll-calc-cta-final:hover {
  background        : var(--ll-color-primary-hover);  /* Lima #C2F000 */
  box-shadow        : var(--ll-shadow-led),
                      0 8px 32px rgba(125, 218, 0, 0.25);
  transform         : translateY(-3px) scale(1.01);
}

.ll-calc-cta-final:active {
  transform         : translateY(0) scale(0.99);
}

.ll-calc-cta-final.is-loading {
  pointer-events    : none;
  opacity           : 0.75;
}

.ll-calc-cta-final svg {
  width             : 22px;
  height            : 22px;
  stroke            : currentColor;
  fill              : none;
  stroke-width      : 2;
  flex-shrink       : 0;
}

/* Link secundario debajo del CTA */
.ll-calc-cta-secondary {
  display           : block;
  text-align        : center;
  padding           : var(--ll-space-3) var(--ll-space-6) var(--ll-space-6);
  font-size         : var(--ll-text-sm);
  color             : var(--ll-color-text-muted);
  text-decoration   : none;
  transition        : color var(--ll-transition-base);
}

.ll-calc-cta-secondary:hover {
  color             : var(--ll-color-text-secondary);
}

/* Indicador de seguridad debajo del CTA final */
.ll-calc-trust-bar {
  display           : flex;
  align-items       : center;
  justify-content   : center;
  gap               : var(--ll-space-5);
  padding           : var(--ll-space-4) var(--ll-space-6) var(--ll-space-6);
  flex-wrap         : wrap;
}

.ll-calc-trust-item {
  display           : flex;
  align-items       : center;
  gap               : var(--ll-space-2);
  font-size         : var(--ll-text-xs);
  color             : var(--ll-color-text-muted);
}

.ll-calc-trust-item svg {
  width             : 14px;
  height            : 14px;
  stroke            : var(--ll-color-primary);
  fill              : none;
  stroke-width      : 2;
  flex-shrink       : 0;
}


/* ═══════════════════════════════════════════════════════════
   §8 — ESTADOS DE CARGA + TOAST DE FEEDBACK
   ═══════════════════════════════════════════════════════════ */

/* Toast de éxito/error */
.ll-calc-toast {
  position          : fixed;
  bottom            : var(--ll-space-8);
  left              : 50%;
  transform         : translateX(-50%) translateY(120%);
  z-index           : var(--ll-z-toast);
  display           : flex;
  align-items       : center;
  gap               : var(--ll-space-3);
  padding           : var(--ll-space-3) var(--ll-space-6);
  background        : var(--ll-color-bg-elevated);
  border            : 1px solid var(--ll-color-border-accent);
  border-radius     : var(--ll-radius-full);
  box-shadow        : var(--ll-shadow-xl);
  font-size         : var(--ll-text-sm);
  font-weight       : var(--ll-font-semibold);
  color             : var(--ll-color-text-primary);
  white-space       : nowrap;
  pointer-events    : none;
  transition        : transform var(--ll-transition-slow);
  backdrop-filter   : blur(12px);
}

.ll-calc-toast.is-visible {
  transform         : translateX(-50%) translateY(0);
}

.ll-calc-toast--success {
  border-color      : var(--ll-color-primary);
  color             : var(--ll-color-primary);
}

.ll-calc-toast--error {
  border-color      : var(--ll-color-error);
  color             : var(--ll-color-error);
}

.ll-calc-toast svg {
  width             : 16px;
  height            : 16px;
  stroke            : currentColor;
  fill              : none;
  stroke-width      : 2.5;
  flex-shrink       : 0;
}