/* ═══════════════════════════════════════════════════════════════════════
   Huevo Energía — calculator flow shared styles
   Used by: huevo-energia-calcular.html (public, magic-link)
            area-cliente.html (Huevo Energía tab, JWT)
   Prefix: .ec-*  (energy calculator)
   ═══════════════════════════════════════════════════════════════════════ */

.ec-card{
  background:#fff; border-radius:20px;
  border:1px solid rgba(11,13,16,.08);
  box-shadow:0 8px 32px rgba(11,13,16,.06);
  padding:32px 28px; margin:24px 0;
}
@media (min-width: 600px) {
  .ec-card{ padding:40px 36px }
}
.ec-card h2{ margin:0 0 10px; font-size:22px; color:#0B0D10 }
.ec-card .ec-card__sub{ color:#5b6470; margin:0 0 22px; line-height:1.5; font-size:15px }

.ec-field{ margin-bottom:18px }
.ec-field label{
  display:block; font-weight:600; margin-bottom:6px; font-size:14px; color:#1a1d22;
}
.ec-input{
  width:100%; padding:14px 16px;
  font-size:16px; line-height:1.4;
  border:1px solid rgba(11,13,16,.18);
  border-radius:10px;
  background:#fff;
  font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.ec-input:focus{
  outline:none; border-color:#E4B900;
  box-shadow:0 0 0 3px rgba(228,185,0,.18);
}
.ec-input[aria-invalid="true"]{ border-color:#dc2626 }
.ec-help{ font-size:13px; color:#5b6470; margin:6px 0 0 }
.ec-error{ font-size:13px; color:#dc2626; margin:6px 0 0; font-weight:600 }

.ec-consent{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#3a3f47; margin:18px 0 24px; line-height:1.5 }
.ec-consent input{ flex:0 0 18px; width:18px; height:18px; margin-top:2px }
.ec-consent a{ color:#9a8500; text-decoration:underline }

.ec-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px;
  font-weight:800; font-size:16px; text-decoration:none;
  border:0; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s;
  font-family:inherit;
}
.ec-btn--primary{
  background:#E4B900; color:#0B0D10;
  box-shadow:0 8px 24px rgba(228,185,0,.32);
}
.ec-btn--primary:hover{ background:#f0c800; transform:translateY(-1px); box-shadow:0 10px 28px rgba(228,185,0,.42) }
.ec-btn--primary:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(228,185,0,.32) }
.ec-btn--primary:disabled{ background:#d4d7dc; color:#8a8e94; cursor:not-allowed; box-shadow:none; transform:none }
.ec-btn--block{ width:100% }
.ec-btn--wa{ background:#25D366; color:#fff }
.ec-btn--wa:hover{ background:#1eb955 }
.ec-btn--ghost{
  background:transparent; color:#1a1d22;
  border:1px solid rgba(11,13,16,.18);
}
.ec-btn--ghost:hover{ background:rgba(11,13,16,.04) }

/* Drag & drop zone */
.ec-drop{
  display:block;
  border:2px dashed rgba(11,13,16,.18);
  border-radius:14px;
  padding:40px 24px; text-align:center;
  background:#fafbfc;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ec-drop:hover, .ec-drop.is-dragging{
  border-color:#E4B900; background:rgba(228,185,0,.06);
}
.ec-drop__icon{ display:block; margin:0 auto 14px; color:#E4B900 }
.ec-drop__title{ font-weight:700; font-size:16px; color:#1a1d22; margin:0 0 4px }
.ec-drop__sub{ font-size:13px; color:#5b6470; margin:0 }
.ec-drop input[type=file]{ display:none }

.ec-file-selected{
  display:flex; gap:14px; align-items:center;
  padding:16px; background:#fff5d6; border-radius:10px;
  border:1px solid rgba(228,185,0,.4); margin-top:14px;
}
.ec-file-selected__icon{ flex:0 0 32px; color:#9a8500 }
.ec-file-selected__meta{ flex:1; min-width:0 }
.ec-file-selected__name{ font-weight:700; font-size:14px; color:#1a1d22; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ec-file-selected__size{ font-size:12px; color:#5b6470 }
.ec-file-change{ flex:0 0 auto; font-size:13px; color:#9a8500; text-decoration:underline; cursor:pointer; background:none; border:0; padding:0 }

/* Spinner / loading states */
.ec-spinner{
  width:48px; height:48px; margin:0 auto 24px;
  border:4px solid rgba(228,185,0,.18);
  border-top-color:#E4B900;
  border-radius:50%;
  animation:ec-spin 1s linear infinite;
}
@keyframes ec-spin{ to{ transform:rotate(360deg) } }
.ec-loading-text{
  text-align:center; font-size:15px; color:#3a3f47; margin:0;
}
.ec-loading-text strong{ display:block; font-size:20px; color:#0B0D10; margin-bottom:6px }

/* Results — header propio (cuando page header está oculto) */
.ec-result-header{
  text-align:center; margin:0 0 24px;
}
.ec-result-header__eyebrow{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:12px; letter-spacing:.22em; color:#16a34a;
  margin:0 0 10px; font-weight:700;
}
.ec-result-header__title{
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(28px,4.5vw,40px); line-height:1.1; margin:0;
  text-transform:uppercase; color:#0B0D10;
}

/* Results — savings hero (estructura nueva) */
.ec-result{ text-align:center; }
.ec-result__mascot{
  display:block; margin:0 auto 12px;
  max-width:120px; width:35%; height:auto;
  animation: ec-perfecta-bounce 2.4s ease-in-out infinite;
}
.ec-result__lead{
  font-size:14px; letter-spacing:.08em; color:#5b6470;
  margin:0 0 8px; text-transform:uppercase; font-weight:600;
}
.ec-result__amount{
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(56px,11vw,88px); line-height:1;
  color:#22c55e; margin:0;
  text-transform:uppercase;
}
.ec-result__amount-suffix{ font-size:.32em; color:#5b6470; display:inline-block; margin-left:6px; font-weight:600; }
.ec-result__pct{
  display:inline-block; margin-top:14px;
  background:rgba(34,197,94,.12); color:#16a34a;
  padding:6px 18px; border-radius:999px;
  font-weight:700; font-size:14px; letter-spacing:.05em;
}
.ec-result-approx-note{
  font-size:13px; color:#5b6470; line-height:1.55; margin:16px auto 0;
  max-width:560px; padding:10px 14px;
  background:rgba(228,185,0,.08); border-left:3px solid #E4B900;
  border-radius:4px; text-align:left;
}

.ec-result-breakdown{
  display:grid; grid-template-columns:1fr; gap:14px;
  margin:24px 0;
}
@media (min-width: 540px) {
  .ec-result-breakdown{ grid-template-columns:1fr 1fr }
}
.ec-result-side{
  padding:18px; border-radius:12px;
  background:rgba(11,13,16,.04);
  border:1px solid rgba(11,13,16,.06);
  text-align:left;
}
.ec-result-side--current{ background:rgba(220,38,38,.06); border-color:rgba(220,38,38,.15) }
.ec-result-side--current .ec-result-side__amount{ color:#b91c1c }
.ec-result-side--new{ background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.22) }
.ec-result-side--new .ec-result-side__amount{ color:#16a34a }
.ec-result-side__label{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:#5b6470; margin:0 0 6px; font-weight:700;
}
.ec-result-side__amount{
  font-size:24px; font-weight:800; color:#0B0D10; margin:0 0 4px;
  font-family:'Bowlby One',sans-serif;
}
.ec-result-side__amount span{ font-size:.5em; font-family:inherit; color:#5b6470; margin-left:4px; font-weight:600 }
.ec-result-side__detail{ font-size:14px; color:#3a3f47; margin:0 }
.ec-result-side__detail strong{ color:#0B0D10 }

/* Comparison table — precios reales del cliente vs Red Huevo */
.ec-pricetable{
  margin:24px 0 8px; padding:18px; border-radius:12px;
  background:#fafbfc; border:1px solid rgba(11,13,16,.06);
  text-align:left;
}
.ec-pricetable__consumption{
  font-size:14px; color:#3a3f47; margin:0 0 14px;
  padding-bottom:12px; border-bottom:1px solid rgba(11,13,16,.08);
}
.ec-pricetable__days{ color:#7a8087; }
.ec-pricetable__head, .ec-pricetable__row{
  display:grid; grid-template-columns:1.2fr 1fr 1fr;
  gap:10px; align-items:center;
  padding:8px 0;
}
.ec-pricetable__head{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:#5b6470; font-weight:700;
  border-bottom:1px solid rgba(11,13,16,.08);
}
.ec-pricetable__row{ border-bottom:1px solid rgba(11,13,16,.04) }
.ec-pricetable__row:last-child{ border-bottom:0 }
.ec-pricetable__label{ font-weight:600; color:#1a1d22; font-size:14px }
.ec-pricetable__current{ color:#b91c1c; font-weight:600; font-size:14px; font-variant-numeric:tabular-nums }
.ec-pricetable__rh{ color:#16a34a; font-weight:700; font-size:14px; font-variant-numeric:tabular-nums }
.ec-pricetable__note{
  font-size:12px; color:#7a8087; line-height:1.55; margin:14px 0 0;
  padding-top:12px; border-top:1px solid rgba(11,13,16,.06);
}

/* Cross-sell card — modalidad alternativa con más ahorro */
.ec-crosssell{
  margin-top:18px; background:#fffbef;
  border:1px solid rgba(228,185,0,.32);
  box-shadow:0 4px 18px rgba(228,185,0,.15);
}
.ec-crosssell__head{ text-align:left; }
.ec-crosssell__badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:rgba(228,185,0,.18); color:#9a8500;
  font-size:11px; letter-spacing:.14em; font-weight:800; text-transform:uppercase;
  margin-bottom:12px;
}
.ec-crosssell__title{
  font-size:18px; line-height:1.4; color:#0B0D10; margin:0 0 8px; font-weight:700;
}
.ec-crosssell__sub{ font-size:14px; color:#3a3f47; margin:0 0 14px; line-height:1.5 }
.ec-crosssell__proscons{
  display:grid; gap:10px; margin:14px 0;
  grid-template-columns:1fr;
}
@media (min-width:540px){ .ec-crosssell__proscons{ grid-template-columns:1fr 1fr; } }
.ec-crosssell__pro, .ec-crosssell__con{
  padding:12px 14px; border-radius:8px; font-size:13.5px; line-height:1.5;
}
.ec-crosssell__pro{ background:rgba(34,197,94,.08); color:#15803d }
.ec-crosssell__con{ background:rgba(245,158,11,.08); color:#92400e }
.ec-crosssell__pro strong, .ec-crosssell__con strong{ display:block; margin-bottom:2px }
.ec-crosssell__cta{ font-size:13px; color:#5b6470; margin:6px 0 0; text-align:center }

.ec-actions{ display:grid; gap:12px; margin-top:24px }
.ec-actions .ec-btn{ width:100% }

/* "Ya tienes una tarifa competitiva" (factura del usuario es de comercializadora partner) */
.ec-already-gana{
  text-align:center; padding:8px 0;
}
.ec-already-gana__mascot{
  display:block; margin:0 auto 18px;
  max-width:140px; width:45%; height:auto;
  animation: ec-perfecta-bounce 2.4s ease-in-out infinite;
}
.ec-already-gana__sub{ color:#3a3f47; line-height:1.6; margin:0 0 16px; font-size:15.5px }

/* "¡Tu factura está perfecta!" — saving < 5€ y cálculo exacto */
.ec-perfecta{
  text-align:center; padding:24px 16px;
}
.ec-perfecta__mascot{
  display:block; margin:0 auto 16px;
  max-width:160px; width:60%; height:auto;
  animation: ec-perfecta-bounce 2.4s ease-in-out infinite;
}
@keyframes ec-perfecta-bounce {
  0%,100% { transform: translateY(0) rotate(-2deg) }
  50%     { transform: translateY(-6px) rotate(2deg) }
}
.ec-perfecta__title{
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(24px,4.5vw,32px); line-height:1.1;
  text-transform:uppercase; color:#22c55e;
  margin:0 0 14px;
}
.ec-perfecta__sub{ font-size:16px; line-height:1.55; color:#3a3f47; margin:0 0 10px }
.ec-perfecta__detail{ font-size:14px; line-height:1.55; color:#5b6470; margin:8px 0 0 }
.ec-perfecta__crosssell{
  font-size:14px; line-height:1.55; color:#5b6470;
  margin:18px 0 0; padding-top:16px;
  border-top:1px solid rgba(11,13,16,.08);
}

/* ═══ Flujo nuevo: PICK (2 botones grandes adjuntar/cámara) ═══ */
.ec-pick__grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
  margin:14px 0 12px;
}
@media (max-width:540px){ .ec-pick__grid{ grid-template-columns:1fr; } }
.ec-pick__btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:32px 18px;
  border:2px dashed rgba(11,13,16,.18); border-radius:14px;
  background:#fafbfc; cursor:pointer; color:#1a1d22;
  transition:border-color .15s, background .15s, transform .15s;
}
.ec-pick__btn:hover{ border-color:#E4B900; background:rgba(228,185,0,.06); transform:translateY(-1px); }
.ec-pick__btn svg{ color:#9a8500; }
.ec-pick__btn-text{ font-weight:700; font-size:15px; }
.ec-pick__hint{
  font-size:12px; color:#7a8087; text-align:center; margin:8px 0 0;
}
.ec-drag-hint{ color:#9a8500; font-weight:600; }
@media (hover: none){ .ec-drag-hint{ display:none } }

/* Drop zone (PICK + FILES_SELECTED) — la card entera acepta drop */
#ec-drop-zone{ position:relative; }
.ec-drop-overlay{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(228,185,0,.18); border:3px dashed #E4B900;
  border-radius:inherit; opacity:0; transition:opacity .12s;
  z-index:5;
}
#ec-drop-zone.is-dragover{ box-shadow:0 0 0 4px rgba(228,185,0,.22); }
#ec-drop-zone.is-dragover .ec-drop-overlay{ opacity:1; }
.ec-drop-overlay__inner{
  text-align:center; color:#0B0D10;
  background:#fffdf3; padding:18px 26px; border-radius:14px;
  box-shadow:0 8px 32px rgba(228,185,0,.32);
}
.ec-drop-overlay__inner svg{ color:#9a8500; display:block; margin:0 auto 6px; }
.ec-drop-overlay__inner p{ margin:0; font-weight:800; font-size:16px; }

/* ═══ EMAIL card (mascot celebrando + status verde + CTA verde) ═══ */
.ec-email-card{ text-align:center; }
.ec-email-card__head{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-bottom:22px;
}
.ec-email-card__mascot{
  width:120px; height:120px; object-fit:contain;
  filter: drop-shadow(0 8px 20px rgba(11,13,16,.10));
}
.ec-email-card form{ text-align:left; }
.ec-status-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 18px; border-radius:999px;
  background:rgba(34,197,94,.12); color:#16a34a;
  font-weight:700; font-size:14px; line-height:1;
}
.ec-status-badge__dot{
  width:9px; height:9px; border-radius:50%;
  background:#22c55e; flex:0 0 9px;
  animation: ec-pulse 1.4s ease-in-out infinite;
}
@keyframes ec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

/* Variante "GO" verde para CTAs del flujo en marcha */
.ec-btn--go{
  background:#22c55e; color:#fff;
  box-shadow:0 8px 24px rgba(34,197,94,.32);
}
.ec-btn--go:hover{ background:#16a34a; transform:translateY(-1px); box-shadow:0 10px 28px rgba(34,197,94,.42); }
.ec-btn--go:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(34,197,94,.32); }
.ec-btn--go:disabled{ background:#cbd5d1; color:#fff; cursor:not-allowed; box-shadow:none; transform:none; }

/* ═══ Lista de archivos seleccionados ═══ */
.ec-count{ font-size:.7em; color:#5b6470; font-weight:600; margin-left:4px }
.ec-file-list{
  display:flex; flex-direction:column; gap:8px;
  margin:14px 0 18px;
}
.ec-file-item{
  display:flex; align-items:center; gap:12px;
  padding:10px; border:1px solid rgba(11,13,16,.1); border-radius:10px;
  background:#fff;
}
.ec-file-thumb{
  flex:0 0 48px; width:48px; height:48px;
  object-fit:cover; border-radius:6px; background:#f1f3f5;
}
.ec-file-thumb--icon{
  display:grid; place-items:center;
  font-size:10px; font-weight:800; letter-spacing:.06em;
  color:#9a8500; background:#fff5d6;
}
.ec-file-info{ flex:1; min-width:0; }
.ec-file-name{
  font-weight:600; font-size:14px; color:#1a1d22;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ec-file-size{ font-size:12px; color:#5b6470; }
.ec-file-remove{
  flex:0 0 32px; width:32px; height:32px; border-radius:50%;
  background:#fef2f2; color:#dc2626; border:0; cursor:pointer;
  font-size:18px; line-height:1;
  display:grid; place-items:center;
  transition:background .15s;
}
.ec-file-remove:hover{ background:#fecaca; }
.ec-add-more__btn{ cursor:pointer; }

/* ═══ Code input (6 dígitos) ═══ */
.ec-code-input{
  width:100%; max-width:300px; margin:0 auto;
  padding:16px 20px; display:block;
  font-family:ui-monospace,"SF Mono",Menlo,Monaco,monospace;
  font-size:28px; font-weight:800; letter-spacing:.32em; text-align:center;
  border:2px solid rgba(11,13,16,.18); border-radius:14px;
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.ec-code-input:focus{
  outline:none; border-color:#E4B900;
  box-shadow:0 0 0 4px rgba(228,185,0,.18);
}