/* ======================================================================
   Theme Overrides — ComparaTuFactura
   Autor: tú 😉
   NOTA: Allman: llaves en línea nueva.
   ====================================================================== */

/* ---------------------------
   Paleta base (modo claro)
   --------------------------- */
html.light :root
{
  --brand-primary: #0ea5e9; /* Sky-500 */
  --brand-primary-600: #0284c7; /* Sky-600 */
  --brand-primary-700: #0369a1; /* Sky-700 */
  --brand-accent: #a855f7; /* Purple-500 */
  --brand-accent-600: #9333ea; /* Purple-600 */
  --brand-amber: #f59e0b; /* Amber-500 */
  --brand-success: #10b981; /* Emerald-500 */
  --brand-warning: #f59e0b; /* Amber-500 */
  --brand-danger: #ef4444; /* Red-500 */

  --page-bg: #f4f7fb;
  --content-bg: #ffffff;

  --text-strong: #0f172a; /* Slate-900 */
  --text-soft: #475569; /* Slate-600 */

  /* Para efectos rgba() sin cálculos */
  --brand-primary-rgb: 14, 165, 233;
  --brand-accent-rgb: 168, 85, 247;
}

/* ---------------------------
   Paleta base (modo oscuro)
   --------------------------- */
html.dark :root
{
  --brand-primary: #38bdf8; /* Sky-400 */
  --brand-primary-600: #0ea5e9; /* Sky-500 */
  --brand-primary-700: #0284c7; /* Sky-600 */
  --brand-accent: #c084fc; /* Purple-400 */
  --brand-accent-600: #a855f7; /* Purple-500 */
  --brand-amber: #fbbf24; /* Amber-400 */
  --brand-success: #34d399; /* Emerald-400 */
  --brand-warning: #fbbf24; /* Amber-400 */
  --brand-danger: #f87171; /* Red-400 */

  --page-bg: #0b1220;
  --content-bg: #121a2b;

  --text-strong: #e5e7eb;
  --text-soft: #cbd5e1;

  --brand-primary-rgb: 56, 189, 248;
  --brand-accent-rgb: 192, 132, 252;
}

/* ---------------------------
   Fondo general y contenedor
   --------------------------- */
body
{
  background: var(--page-bg) !important;
  color: var(--text-soft);
}

.bg-[--tw-page-bg],
.bg-[--tw-page-bg-dark]
{
  background: var(--page-bg) !important;
}

.rounded-xl.bg-[--tw-content-bg],
.rounded-xl.bg-[--tw-content-bg-dark]
{
  background: var(--content-bg) !important;
}

/* ---------------------------
   Enlaces y estados de foco
   --------------------------- */
a,
a:hover
{
  color: var(--brand-primary);
}
a:hover
{
  color: var(--brand-primary-600);
}

/* ---------------------------
   Hero vistoso (opcional: añade .kv-hero en el <section> del hero)
   --------------------------- */
.kv-hero
{
  background:
    radial-gradient(
      1200px 600px at 10% -10%,
      rgba(var(--brand-primary-rgb), 0.2) 0%,
      rgba(var(--brand-primary-rgb), 0) 60%
    ),
    linear-gradient(
      135deg,
      var(--brand-primary) 0%,
      #22d3ee 45%,
      var(--brand-accent) 100%
    );
  color: #ffffff;
  border-radius: 18px;
}
.kv-hero .card
{
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* ---------------------------
   Botones
   --------------------------- */
.btn.btn-primary
{
  background-image: linear-gradient(
    135deg,
    var(--brand-primary),
    var(--brand-accent)
  );
  border-color: var(--brand-primary-600);
  color: #ffffff;
}
.btn.btn-primary:hover
{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn.btn-light:hover
{
  /*color: var(--brand-primary);*/
  border-color: rgba(var(--brand-primary-rgb), 0.35);
  background: rgba(var(--brand-primary-rgb), 0.06);
}

/* Estado “activo” que usamos en tabs (btn-dark) */
.btn.btn-dark
{
  background-image: linear-gradient(
    135deg,
    var(--brand-primary-700),
    var(--brand-accent-600)
  );
  border-color: var(--brand-primary-700);
  color: #ffffff;
}

/* ---------------------------
   Badges y Alerts
   --------------------------- */
.badge.badge-primary
{
  color: #fff;
  border-color: transparent;
  background-image: linear-gradient(
    135deg,
    var(--brand-primary),
    var(--brand-accent)
  );
}
.badge.badge-outline.badge-primary
{
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background: rgba(var(--brand-primary-rgb), 0.05);
}

.alert.alert-info
{
  border-color: rgba(var(--brand-primary-rgb), 0.35);
  background: rgba(var(--brand-primary-rgb), 0.08);
  color: var(--text-strong);
}
.alert.alert-warning
{
  border-color: var(--brand-amber);
  background: rgba(245, 158, 11, 0.1);
  color: #8a5a00;
}
.alert.alert-danger
{
  border-color: var(--brand-danger);
  background: rgba(239, 68, 68, 0.1);
  color: #7a1a1a;
}

/* ---------------------------
   Cards
   --------------------------- */
.card
{
  border-color: transparent;
  box-shadow:
    0 10px 26px rgba(2, 132, 199, 0.05),
    0 4px 10px rgba(0, 0, 0, 0.04);
}
.card .card-header
{
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ---------------------------
   Inputs y Selects
   --------------------------- */
.input:focus,
.select:focus
{
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.2);
}

/* ---------------------------
   Sidebar más vivo sin perder contraste
   --------------------------- */
#sidebar
{
  background: linear-gradient(180deg, #0d1b2a 0%, #0b1220 100%);
}
#sidebar .menu-link:hover
{
  background: rgba(var(--brand-primary-rgb), 0.1);
  border-color: rgba(var(--brand-primary-rgb), 0.25);
}
#sidebar .menu-item .menu-title
{
  color: #e5eef9;
}

/* “Active” en el menú */
#sidebar .menu-item .menu-link.menu-item-active,
#sidebar .menu-item .menu-link[aria-current="page"]
{
  background: rgba(var(--brand-primary-rgb), 0.18);
  border-color: rgba(var(--brand-primary-rgb), 0.35);
}

/* ---------------------------
   Tabla/scrollbars suaves (si aplica)
   --------------------------- */
::-webkit-scrollbar
{
  height: 10px;
  width: 10px;
}
::-webkit-scrollbar-thumb
{
  background: rgba(var(--brand-primary-rgb), 0.35);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover
{
  background: rgba(var(--brand-primary-rgb), 0.55);
}

/* ---------------------------
   Resultados del comparador
   --------------------------- */
#resultados .card:hover
{
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(2, 132, 199, 0.1),
    0 6px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.18s ease;
}
#resultados .text-success
{
  color: var(--brand-success) !important;
}

/* ---------------------------
   Microinteracciones
   --------------------------- */
.btn,
.input,
.select,
.card,
.badge,
.alert
{
  transition: all 0.18s ease;
}

/* ===== Reset básico para esta landing ===== */
html,
body
{
  height: 100%;
}

body
{
  background: linear-gradient(135deg, #f7f7f9 0%, #f2f2f4 100%);
  color: #1e293b;
  font-family: "Poppins", sans-serif;
  overflow-y: hidden; /* 🧨 Sin scroll vertical */

  /* 🎨 PROFUNDIDAD SUAVE (ambient shadow) */
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.04);
}

/* Ocultar sidebar por si la plantilla lo trae */
#kt_aside,
.aside,
.app-sidebar
{
  display: none !important;
}

/* Contenedor principal de la landing */
.main-landing
{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

/* GRID PRINCIPAL */
.hero-grid
{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* COLUMNA IZQUIERDA */
.hero-content
{
  text-align: center;
}

.hero-title
{
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.15;
  color: #0f172a;
}

.hero-sub
{
  font-size: 1.15rem;
  color: #475569;
  margin: 15px 0 25px;
}

/* BOTÓN PRINCIPAL */
.btn-niba
{
  background: #13b8a6;
  color: #1e1e1e;
  padding: 14px 32px;
  font-size: 1.1rem;
  border-radius: 50px;
  font-weight: 700;
  transition: 0.25s;
  display: inline-flex;
  align-items: center;
}

.btn-niba:hover
{
  background: #0a66a3;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* COLUMNA DERECHA: PASOS */
.steps-box
{
  text-align: left;
}

.steps-title
{
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.step
{
  margin-bottom: 18px;
}

.step-number
{
  color: #13b8a6;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.step-text
{
  color: #475569;
  font-size: 1.05rem;
}

/* Animaciones */
@keyframes fadeUp
{
  from
  {
    opacity: 0;
    transform: translateY(30px);
  }
  to
  {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeRight
{
  from
  {
    opacity: 0;
    transform: translateX(30px);
  }
  to
  {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-up
{
  animation: fadeUp 0.7s ease forwards;
  opacity: 0;
}

.fade-up.delay-1
{
  animation-delay: 0.15s;
}

.fade-up.delay-2
{
  animation-delay: 0.3s;
}

.fade-up.delay-3
{
  animation-delay: 0.45s;
}

.fade-right
{
  animation: fadeRight 0.7s ease forwards;
  opacity: 0;
}

.fade-right.delay-1
{
  animation-delay: 0.2s;
}

.fade-right.delay-2
{
  animation-delay: 0.35s;
}

.fade-right.delay-3
{
  animation-delay: 0.5s;
}

/* Responsive */
@media (max-width: 900px)
{
  body
  {
    overflow-y: auto; /* En móvil dejamos que pueda hacer scroll */
  }

  .main-landing
  {
    height: auto;
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .hero-grid
  {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .steps-box
  {
    text-align: center;
  }
}

/* ===========================================================
   BOTONES = ESTILO HERO (btn-niba) PARA TODA LA WEB
   =========================================================== */

/* Botón principal amarillo (submit, etc.) */
body .btn.btn-primary,
body a.btn.btn-primary,
body button.btn.btn-primary
{
  background-color: #13b8a6 !important;
  border-color: #13b8a6 !important;
  color: #1e1e1e !important;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.25s;
}

/* Hover igual que el de la home */
body .btn.btn-primary:hover,
body a.btn.btn-primary:hover,
body button.btn.btn-primary:hover
{
  background-color: #0a66a3 !important;
  border-color: #0a66a3 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Botón tipo hero reutilizando btn-niba por si lo usas en otras páginas */
body .btn-niba
{
  background-color: #13b8a6 !important;
  color: #1e1e1e !important;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.25s;
}

body .btn-niba:hover
{
  background-color: #0a66a3 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Tabs pequeñitos tipo píldora */
body .btn.btn-sm
{
  border-radius: 999px;
  padding-inline: 18px;
  padding-block: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Tabs "light" (no activos) */
body .btn.btn-sm.btn-light
{
  background-color: #ffffff !important;
  color: #334155 !important;
  border: 1px solid rgba(148, 163, 184, 0.6) !important;
  box-shadow: none !important;
}

/* Tabs activos (a los que tu JS les pone .btn-primary) */
body .btn.btn-sm.btn-primary
{
  background-color: #13b8a6 !important;
  color: #1e1e1e !important;
  border: none !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12) !important;
}

/* Botón AUTORRELLENAR con estilo hero (amarillo) */
body #btnOCR
{
  background-color: #13b8a6 !important;
  border-color: #13b8a6 !important;
  color: #1e1e1e !important;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.25s;
}

/* Hover igual que el resto de botones amarillos */
body #btnOCR:hover
{
  background-color: #0a66a3 !important;
  border-color: #0a66a3 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   FORMULARIO ESTILO BLANCO ROTO (tipo premium)
   ============================================================ */

.kv-hero .card
{
  background: #f7f7f5 !important; /* blanco roto */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: none !important;
}

/* Cabecera */
.kv-hero .card-header
{
  background: #f7f7f5 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

/* Inputs y selects sobre fondo claro */
body .input,
body .select
{
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: #1e293b !important;
}

body .input::placeholder,
body .select::placeholder
{
  color: #94a3b8 !important;
}

body .input:focus,
body .select:focus
{
  border-color: #13b8a6 !important;
  box-shadow: 0 0 0 1px rgba(245, 184, 0, 0.5) !important;
  background-color: #ffffff !important;
}

/* Píldoras de periodos P1..P6 */
body .periodo-block,
body .energia-block
{
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* Etiquetas */
body .form-label
{
  color: #374151 !important;
}

/* Texto en botones (ya amarillos) queda igual */

/* ============================================================
   TARJETAS DE RESULTADOS (RESUMEN + COMPARATIVA)
   ============================================================ */

/* Todas las cards dentro de #resultados en modo "blanco roto" */
#resultados .card
{
  background: #f7f7f5 !important; /* mismo blanco roto del formulario */
  border-radius: 22px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Cuerpo de las cards un poco más amplio */
#resultados .card .card-body
{
  padding: 18px 22px 20px 22px !important;
}

/* Primera tarjeta: resumen de factura (un pelín más “compacta”) */
#resultados .col-span-12.mb-4 .card
{
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
}

/* Título de bloques dentro de resultados */
#resultados h5
{
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

/* Textos principales */
#resultados p,
#resultados li
{
  color: #374151;
}

/* CUPS en monoespaciada bien visible */
#resultados .font-mono
{
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.85rem;
}

/* Total factura a la derecha más contundente */
#resultados .text-3xl
{
  font-size: 1.9rem;
  line-height: 1.1;
}

/* Badge "Tienes margen de mejora" en modo pill */
#resultados span.inline-flex
{
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  background: rgba(248, 113, 113, 0.12) !important; /* rojo suave */
  color: #b91c1c !important;
}

/* Borde amarillo suave en la card de comparativa (la que llevaba border-indigo-100) */
#resultados .border-indigo-100
{
  border-color: rgba(245, 184, 0, 0.55) !important; /* amarillo marca */
}

/* ============================================================
   CONTENEDOR DE LA GRÁFICA
   ============================================================ */

/* Cajita que envuelve el canvas */
#resultados .bg-gray-50
{
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 90px 14px !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}

/* Título encima de la gráfica */
#resultados h6
{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}

/* El canvas que pinta la gráfica */
#resultados #graficoComparador
{
  display: block;
  width: 100% !important;
}

/* ============================================================
   AJUSTES FINOS DE ESPACIADOS
   ============================================================ */

#resultados
  .flex.flex-col.md\\:flex-row.md\\:items-center.md\\:justify-between.gap-4
  {
  gap: 1.25rem;
}

#resultados .flex.flex-col.lg\\:flex-row.gap-6
{
  gap: 1.75rem;
}

/* ============================================================
   RESTAURAR SOLO EL SCROLL VERTICAL, SIN TOCAR ALTURAS
   ============================================================ */

html,
body
{
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* Por si algún layout general hace overflow hidden */
.main-home
{
  overflow-y: auto !important;
}

/* El formulario y resultados deben poder crecer verticalmente */
.kv-hero,
section.py-5
{
  overflow: visible !important;
}

/* Botón comparar en error */
#btnComparar.btn-error
{
  background-color: #dc2626 !important; /* rojo */
  border-color: #dc2626 !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.4),
    0 10px 22px rgba(220, 38, 38, 0.35);
}

/* Pequeña animación de atención (opcional) */
#btnComparar.btn-error
{
  animation: btn-error-pulse 0.4s ease-in-out 1;
}

@keyframes btn-error-pulse
{
  0%
  {
    transform: translateY(0);
  }
  30%
  {
    transform: translateY(-2px);
  }
  60%
  {
    transform: translateY(1px);
  }
  100%
  {
    transform: translateY(0);
  }
}

/* ===============================
   RESUMEN DE ERRORES (ESTILO PRO)
   =============================== */

#resumenErrores
{
  border-radius: 14px;
  padding: 14px 18px;
  background: linear-gradient(
    180deg,
    rgba(220, 53, 69, 0.08),
    rgba(220, 53, 69, 0.04)
  );
  border: 1px solid rgba(220, 53, 69, 0.25);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

#resumenErrores strong
{
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #991b1b;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* Lista */
#resumenErrores ul
{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 10px;
}

/* Item */
#resumenErrores li
{
  margin: 0;
}

/* Link de error */
#resumenErrores .error-link
{
  display: block;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(220, 53, 69, 0.12);
  color: #7f1d1d;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.18s ease;
}

/* Hover */
#resumenErrores .error-link:hover
{
  background: rgba(220, 53, 69, 0.18);
  color: #7f1d1d;
  transform: translateY(-1px);
}

/* Focus (accesibilidad) */
#resumenErrores .error-link:focus
{
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

/* ======================================================================
   COMPARATUFACTURA BRAND SYSTEM
   Añadido 2026-05-20
   Objetivo: identidad propia para comparador de facturas de luz y gas.
   ====================================================================== */
:root,
html.light :root
{
  --brand-primary: #0b77bd;
  --brand-primary-600: #0968a6;
  --brand-primary-700: #064c8a;
  --brand-accent: #13b8a6;
  --brand-accent-600: #0e9f8f;
  --brand-amber: #fdba21;
  --brand-gas: #f97316;
  --brand-success: #13b8a6;
  --brand-warning: #fdba21;
  --brand-danger: #dc2626;
  --brand-primary-rgb: 11, 119, 189;
  --brand-accent-rgb: 19, 184, 166;
  --ctf-navy: #0b2f6b;
  --ctf-text: #0f172a;
  --ctf-muted: #64748b;
  --page-bg: #eef1f5;
  --content-bg: #ffffff;
}

html.dark :root
{
  --brand-primary: #38bdf8;
  --brand-primary-600: #0ea5e9;
  --brand-primary-700: #0284c7;
  --brand-accent: #2dd4bf;
  --brand-accent-600: #14b8a6;
  --brand-amber: #fbbf24;
  --brand-gas: #fb923c;
  --brand-success: #2dd4bf;
  --brand-primary-rgb: 56, 189, 248;
  --brand-accent-rgb: 45, 212, 191;
}

body
{
  background:
    radial-gradient(
      circle at top left,
      rgba(100, 116, 139, 0.12),
      transparent 32%
    ),
    linear-gradient(180deg, #f7f8fa 0%, #eef1f5 100%) !important;
}

.ctf-text-teal
{
  color: var(--brand-accent) !important;
}

.ctf-header-logo,
#logo-dinamico
{
  width: auto !important;
  max-width: min(360px, 82vw) !important;
  height: 54px !important;
  object-fit: contain !important;
}

.main-landing
{
  min-height: 100vh;
  height: auto !important;
  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(100, 116, 139, 0.14),
      transparent 26%
    ),
    radial-gradient(
      circle at 85% 15%,
      rgba(148, 163, 184, 0.13),
      transparent 28%
    ),
    linear-gradient(135deg, #f7f8fa 0%, #eef1f5 48%, #f8fafc 100%) !important;
  overflow-y: auto !important;
}

.hero-grid
{
  max-width: 1180px;
  padding: 18px;
}

.hero-content img[alt="Logo"],
.hero-content img
{
  height: 72px !important;
  max-width: min(430px, 88vw) !important;
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: 30px !important;
}

.hero-title
{
  color: var(--ctf-navy) !important;
  letter-spacing: -0.045em;
}

.hero-sub
{
  color: var(--ctf-muted) !important;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.btn-niba,
.btn.btn-primary,
body .btn.btn-primary,
body a.btn.btn-primary,
body button.btn.btn-primary
{
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-accent) 100%
  ) !important;
  border: 1px solid rgba(11, 119, 189, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(11, 119, 189, 0.24) !important;
}

.btn-niba:hover,
.btn.btn-primary:hover,
body .btn.btn-primary:hover,
body a.btn.btn-primary:hover,
body button.btn.btn-primary:hover
{
  background: linear-gradient(
    135deg,
    var(--brand-primary-700) 0%,
    var(--brand-accent-600) 100%
  ) !important;
  border-color: rgba(6, 76, 138, 0.35) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(11, 119, 189, 0.3) !important;
}

body .btn.btn-sm.btn-primary,
.btn.btn-sm.btn-primary
{
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-accent) 100%
  ) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body .btn.btn-sm.btn-light,
.btn.btn-sm.btn-light
{
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid rgba(11, 119, 189, 0.2) !important;
}

.input:focus,
.select:focus,
textarea:focus
{
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(11, 119, 189, 0.16) !important;
}

.step-number,
.cmp-rgpd-check .form-check-input,
#proteccion_datos
{
  accent-color: var(--brand-accent) !important;
}

#busyOverlay .spinner-border
{
  border-color: rgba(19, 184, 166, 0.25) !important;
  border-top-color: var(--brand-primary) !important;
}

.cmp-legal-footer__inner a:hover,
.cmp-rgpd-check .form-check-label a
{
  color: var(--brand-primary) !important;
}

.cmp-legal-hero
{
  background:
    radial-gradient(
      circle at top left,
      rgba(100, 116, 139, 0.16),
      transparent 42%
    ),
    linear-gradient(135deg, #ffffff 0%, #eef1f5 100%) !important;
}

::selection
{
  background: rgba(19, 184, 166, 0.24);
}

@media (max-width: 640px)
{
  .hero-title
  {
    font-size: 2rem !important;
  }

  .hero-content img[alt="Logo"],
  .hero-content img
  {
    height: 58px !important;
  }

  .ctf-header-logo,
  #logo-dinamico
  {
    height: 46px !important;
    max-width: 84vw !important;
  }
}

/* ======================================================================
   FIX CORPORATIVO RESULTADOS
   Mantiene los botones en turquesa/azul y corrige fondos antiguos
   verde/amarillo de la pantalla de comparación.
   ====================================================================== */
#resultados .cmp-hero__top
{
  background: linear-gradient(135deg, var(--brand-primary, #0b77bd) 0%, var(--brand-accent, #13b8a6) 100%) !important;
  color: #ffffff !important;
}

#resultados .cmp-hero__top .cmp-title,
#resultados .cmp-hero__top .cmp-amount,
#resultados .cmp-hero__top .cmp-amount__sub
{
  color: #ffffff !important;
}

#resultados .cmp-hero__top .cmp-sub,
#resultados .cmp-hero__top .cmp-mini
{
  color: rgba(255, 255, 255, 0.88) !important;
}

#resultados .cmp-modal__hd
{
  background: linear-gradient(135deg, var(--brand-primary, #0b77bd) 0%, var(--brand-accent, #13b8a6) 100%) !important;
}

/* ======================================================================
   FIX DEFINITIVO FONDO COMPARADOR
   El fondo general del formulario/comparador debe ser gris claro.
   No toca botones, logo ni cabeceras de resultado.
   ====================================================================== */
html,
body
{
  background: #eef1f5 !important;
  background-image: linear-gradient(
    180deg,
    #f7f8fa 0%,
    #eef1f5 100%
  ) !important;
}

body > main.main-home,
main.main-home,
.main-home,
.ctf-comparador-main
{
  background: #eef1f5 !important;
  background-image: linear-gradient(
    180deg,
    #f7f8fa 0%,
    #eef1f5 100%
  ) !important;
  min-height: 100vh;
}

main.main-home > header,
.ctf-comparador-main > header
{
  background: #f7f8fa !important;
}

#comparadorWrapper,
.ctf-comparador-main #comparadorWrapper
{
  background: transparent !important;
  background-image: none !important;
}

.ctf-comparador-main::before,
.ctf-comparador-main::after,
#comparadorWrapper::before,
#comparadorWrapper::after
{
  background: none !important;
  background-image: none !important;
}

/* ======================================================================
   FIX FINAL — fondo gris + logo visible en resultados
   - NO cambia botones corporativos.
   - NO cambia la cabecera corporativa de resultados.
   - Sí bloquea el fondo turquesa de .kv-hero/formulario.
   ====================================================================== */
html,
body,
body > main.main-home,
main.main-home,
.main-home,
.ctf-comparador-main,
#comparadorWrapper,
.ctf-comparador-main #comparadorWrapper,
.ctf-comparador-main section.kv-hero,
main.ctf-comparador-main section.kv-hero,
#comparadorWrapper > section.kv-hero,
section.py-5.kv-hero
{
  background: #eef1f5 !important;
  background-image: linear-gradient(
    180deg,
    #f7f8fa 0%,
    #eef1f5 100%
  ) !important;
  color: #0f172a !important;
}

.ctf-comparador-main section.kv-hero,
main.ctf-comparador-main section.kv-hero,
#comparadorWrapper > section.kv-hero,
section.py-5.kv-hero
{
  border-radius: 0 !important;
}

.ctf-comparador-main section.kv-hero::before,
.ctf-comparador-main section.kv-hero::after,
#comparadorWrapper > section.kv-hero::before,
#comparadorWrapper > section.kv-hero::after
{
  background: none !important;
  background-image: none !important;
}

.kv-hero .card,
.kv-hero .card-header,
.kv-hero .card-body
{
  color: #0f172a !important;
}

.kv-hero label,
.kv-hero .form-label,
.kv-hero .text-gray-700,
.kv-hero .fw-semibold,
.kv-hero h6
{
  color: #0f172a !important;
}

.kv-hero .text-muted,
.kv-hero .text-gray-600,
.kv-hero small
{
  color: #64748b !important;
}

#resultados .cmp-heroBrand
{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

#resultados .cmp-heroLogoBox
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  max-width: 230px;
  min-height: 54px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 14px;
  padding: 6px 10px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.16);
}

#resultados .cmp-heroLogo
{
  width: auto !important;
  height: 42px !important;
  max-width: 190px !important;
  object-fit: contain !important;
  display: block;
}

#resultados .cmp-heroLogoFallback
{
  display: none;
  max-width: 200px;
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#resultados .cmp-heroLogoBox.is-error .cmp-heroLogoFallback
{
  display: inline-flex;
}

#resultados .cmp-heroBrandText
{
  min-width: 0;
}

@media (max-width: 640px)
{
  #resultados .cmp-heroBrand
  {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  #resultados .cmp-heroLogoBox
  {
    min-width: 120px;
    max-width: 180px;
    min-height: 48px;
  }

  #resultados .cmp-heroLogo
  {
    height: 36px !important;
    max-width: 160px !important;
  }
}

/* ==========================================================
   FIX FINAL LOGO + FONDO GRIS
   ========================================================== */
main.ctf-comparador-main,
main.main-home.ctf-comparador-main,
#comparadorWrapper,
section.py-5.kv-hero,
.ctf-comparador-main section.kv-hero
{
  background: #eef1f5 !important;
  background-image: linear-gradient(
    180deg,
    #f7f8fa 0%,
    #eef1f5 100%
  ) !important;
  color: #0f172a !important;
}

#logo-dinamico[src="/assets/media/logos/10_logo_administra_tu_energia.png"],
.ctf-header-logo[src="/assets/media/logos/10_logo_administra_tu_energia.png"]
{
  content: url("/assets/media/logos/comparatufactura-logo.svg");
}

/* ==========================================================
   Cabecera comparador: mantener visible al mostrar resultados
   ========================================================== */
.ctf-comparador-header,
main.ctf-comparador-main > header.ctf-comparador-header
{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
}

.ctf-comparador-header .container-fixed
{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.ctf-comparador-header #logo-dinamico,
.ctf-comparador-header .ctf-header-logo
{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

/* ======================================================================
   BRAND STYLE FINAL — landing + formulario limpios con colores dinámicos
   Prioridad real de color: URL -> v_empresa_comparador_web -> default.
   Este bloque está al final para neutralizar reglas antiguas demasiado agresivas.
   ====================================================================== */
:root
{
  --ctf-navy: #0b2f6b;
  --ctf-text: #0f172a;
  --ctf-muted: #64748b;
  --ctf-card-bg: rgba(255, 255, 255, 0.94);
  --ctf-soft-shadow: 0 22px 70px rgba(15, 23, 42, 0.1);
}

html,
body
{
  min-height: 100%;
  overflow-x: hidden;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
  color: var(--ctf-text) !important;
}

body
{
  font-family:
    "Poppins",
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  box-shadow: none !important;
}

.main-landing.ctf-landing,
.ctf-landing .ctf-landing-section
{
  min-height: 100vh !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(32px, 5vh, 72px) 20px !important;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--brand-primary-rgb), 0.07),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(var(--brand-accent-rgb), 0.08),
      transparent 30%
    ),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

.ctf-landing-grid
{
  width: 100%;
  max-width: 980px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(28px, 4vh, 42px) !important;
  padding: 0 !important;
  text-align: center !important;
}

.hero-content
{
  width: min(100%, 760px) !important;
  text-align: center !important;
}

.ctf-landing-logo,
.hero-content > img.ctf-landing-logo
{
  display: block !important;
  width: auto !important;
  height: clamp(48px, 6.5vw, 76px) !important;
  max-width: min(300px, 76vw) !important;
  object-fit: contain !important;
  margin: 0 auto clamp(24px, 4vh, 36px) !important;
}

.hero-title
{
  max-width: 820px !important;
  margin: 0 auto !important;
  color: var(--ctf-navy) !important;
  font-size: clamp(2.35rem, 4.6vw, 3.8rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.052em !important;
  font-weight: 900 !important;
}

.hero-title__line
{
  display: block !important;
}

.ctf-minute-accent,
.ctf-text-teal
{
  color: var(--brand-primary) !important;
  text-shadow: none !important;
}

.hero-sub
{
  max-width: 650px !important;
  margin: 22px auto 0 !important;
  color: #64748b !important;
  font-size: clamp(1rem, 1.4vw, 1.18rem) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

.hero-sub strong
{
  display: inline-block !important;
  margin-top: 6px !important;
  color: #475569 !important;
  font-weight: 800 !important;
}

body .btn-niba,
.btn-niba,
body a.btn-niba
{
  width: auto !important;
  min-width: 250px !important;
  max-width: min(420px, 90vw) !important;
  justify-content: center !important;
  margin-top: 30px !important;
  padding: 15px 34px !important;
  border-radius: 999px !important;
  background: var(--brand-primary) !important;
  color: var(--ctf-brand-primary-text, #ffffff) !important;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.34) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-primary-rgb), 0.22) !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

body .btn-niba:hover,
.btn-niba:hover,
body a.btn-niba:hover
{
  background: var(--brand-primary-700) !important;
  color: var(--ctf-brand-primary-text, #ffffff) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 44px rgba(var(--brand-primary-rgb), 0.28) !important;
}

.ctf-landing-visual
{
  width: min(560px, 92vw) !important;
  margin: 0 auto !important;
}

.ctf-landing-visual img
{
  width: 100% !important;
  height: auto !important;
  max-height: 350px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 28px !important;
  box-shadow: 0 22px 64px rgba(15, 23, 42, 0.15) !important;
}

.ctf-comparador-header
{
  padding-top: 28px !important;
  padding-bottom: 18px !important;
  background: transparent !important;
}

.ctf-header-logo,
#logo-dinamico
{
  display: block !important;
  width: auto !important;
  height: clamp(52px, 6vw, 78px) !important;
  max-height: 78px !important;
  max-width: min(320px, 82vw) !important;
  object-fit: contain !important;
}

.ctf-comparador-main,
main.main-home.ctf-comparador-main,
#comparadorWrapper,
.ctf-form-section,
.ctf-comparador-main section.kv-hero,
section.py-5.kv-hero
{
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--brand-primary-rgb), 0.055),
      transparent 34%
    ),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
  background-color: #eef2f7 !important;
}

.ctf-form-container
{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.ctf-form-shell
{
  width: 100% !important;
  max-width: 960px !important;
}

.ctf-comparator-card,
.kv-hero .card.ctf-comparator-card,
.kv-hero .card
{
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 28px !important;
  background: var(--ctf-card-bg) !important;
  box-shadow: var(--ctf-soft-shadow) !important;
  overflow: hidden !important;
}

.ctf-comparator-card__header,
.kv-hero .card-header
{
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 28px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}

#logo-empresa
{
  height: 50px !important;
  max-width: 220px !important;
  object-fit: contain !important;
  margin-left: auto !important;
}

.ctf-comparator-card__body,
.kv-hero .card-body
{
  padding: 28px !important;
}

.ctf-tabs,
#comparadorTabs
{
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 6px !important;
  margin-bottom: 22px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

body #comparadorTabs .btn.btn-sm,
#comparadorTabs .btn.btn-sm
{
  min-height: 38px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body #comparadorTabs .btn.btn-sm.btn-primary,
#comparadorTabs .btn.btn-sm.btn-primary
{
  background: var(--brand-primary) !important;
  color: var(--ctf-brand-primary-text, #ffffff) !important;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.2) !important;
  box-shadow: 0 8px 20px rgba(var(--brand-primary-rgb), 0.18) !important;
}

body #comparadorTabs .btn.btn-sm.btn-light,
#comparadorTabs .btn.btn-sm.btn-light
{
  background: transparent !important;
  color: #475569 !important;
  border: 1px solid transparent !important;
}

.kv-hero .input,
.kv-hero .select,
.kv-hero textarea,
.input,
.select
{
  min-height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.kv-hero .input:focus,
.kv-hero .select:focus,
.kv-hero textarea:focus,
.input:focus,
.select:focus
{
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.13) !important;
}

.periodos-grid,
.energia-grid
{
  gap: 14px !important;
}

.cmp-rgpd-check,
.kv-hero .form-check,
#formComparador .form-check
{
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background: #f8fafc !important;
}

#proteccion_datos,
.form-check-input,
.switch
{
  accent-color: var(--brand-primary) !important;
}

body #formComparador .btn.btn-primary,
#formComparador button[type="submit"].btn.btn-primary,
#formComparador .btn-primary
{
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  background: var(--brand-primary) !important;
  color: var(--ctf-brand-primary-text, #ffffff) !important;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.25) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-primary-rgb), 0.18) !important;
}

body #formComparador .btn.btn-primary:hover,
#formComparador button[type="submit"].btn.btn-primary:hover,
#formComparador .btn-primary:hover
{
  background: var(--brand-primary-700) !important;
  color: var(--ctf-brand-primary-text, #ffffff) !important;
  transform: translateY(-1px) !important;
}

#resultados .cmp-hero__top,
#resultados .cmp-modal__hd
{
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-accent) 100%
  ) !important;
}

@media (max-width: 768px)
{
  .main-landing.ctf-landing,
  .ctf-landing .ctf-landing-section
  {
    align-items: flex-start !important;
    padding-top: 26px !important;
    padding-bottom: 42px !important;
  }
  .hero-title
  {
    font-size: clamp(2.05rem, 11vw, 3rem) !important;
    line-height: 1.04 !important;
  }
  body .btn-niba,
  .btn-niba,
  body a.btn-niba
  {
    width: min(100%, 340px) !important;
  }
  .ctf-landing-visual img
  {
    max-height: 300px !important;
    border-radius: 22px !important;
  }
  .ctf-comparator-card__header,
  .kv-hero .card-header,
  .ctf-comparator-card__body,
  .kv-hero .card-body
  {
    padding: 20px !important;
  }
  .ctf-tabs,
  #comparadorTabs
  {
    width: 100% !important;
    border-radius: 18px !important;
  }
  body #comparadorTabs .btn.btn-sm,
  #comparadorTabs .btn.btn-sm
  {
    flex: 1 1 calc(50% - 8px) !important;
  }
}

/* ======================================================================
   HOTFIX FORMULARIO — restaurar estructura anterior sin perder branding
   Motivo: el bloque anterior de branding dejó los tabs como selector enorme
   y ensanchó el formulario. Aquí se recupera la maqueta limpia original.
   ====================================================================== */

/* Mantener fondo limpio, pero sin forzar el formulario a una landing gigante. */
.ctf-form-section,
.ctf-comparador-main section.kv-hero,
section.py-5.kv-hero
{
  background: transparent !important;
  border-radius: 0 !important;
  color: #0f172a !important;
}

.ctf-form-container,
.kv-hero > .container-fixed
{
  display: flex !important;
  justify-content: center !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.ctf-form-shell,
.kv-hero > .container-fixed > div
{
  width: 100% !important;
  max-width: 760px !important;
}

.ctf-comparator-card,
.kv-hero .card.ctf-comparator-card,
.kv-hero .card
{
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden !important;
}

.ctf-comparator-card__header,
.kv-hero .card-header
{
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 28px !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.ctf-comparator-card__body,
.kv-hero .card-body
{
  padding: 22px 28px 26px !important;
}

#logo-empresa
{
  height: 54px !important;
  max-height: 54px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-left: auto !important;
}

/* Restaurar tabs: fila simple, no bloque segmentado enorme. */
.ctf-tabs,
#comparadorTabs
{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 0 0 12px !important;
  margin: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #comparadorTabs .btn.btn-sm,
#comparadorTabs .btn.btn-sm
{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  font-size: 0.86rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body #comparadorTabs .btn.btn-sm.btn-primary,
#comparadorTabs .btn.btn-sm.btn-primary
{
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--ctf-brand-primary-text, #ffffff) !important;
  box-shadow: 0 8px 18px rgba(var(--brand-primary-rgb), 0.16) !important;
}

body #comparadorTabs .btn.btn-sm.btn-light,
#comparadorTabs .btn.btn-sm.btn-light
{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.22) !important;
}

body #comparadorTabs .btn.btn-sm.btn-light:hover,
#comparadorTabs .btn.btn-sm.btn-light:hover
{
  background: rgba(var(--brand-primary-rgb), 0.06) !important;
  border-color: rgba(var(--brand-primary-rgb), 0.34) !important;
  color: var(--brand-primary-700) !important;
  transform: none !important;
}

/* Inputs: mantener estilo limpio, sin hacerlos más grandes de la cuenta. */
.kv-hero .input,
.kv-hero .select,
.kv-hero textarea,
#formComparador .input,
#formComparador .select,
#formComparador textarea
{
  min-height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

.kv-hero .input:focus,
.kv-hero .select:focus,
.kv-hero textarea:focus,
#formComparador .input:focus,
#formComparador .select:focus,
#formComparador textarea:focus
{
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.14) !important;
}

.periodos-grid,
.energia-grid
{
  gap: 12px !important;
}

.cmp-rgpd-check,
.kv-hero .form-check,
#formComparador .form-check
{
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

body #formComparador .btn.btn-primary,
#formComparador button[type="submit"].btn.btn-primary,
#formComparador .btn-primary
{
  width: 100% !important;
  min-height: 46px !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--ctf-brand-primary-text, #ffffff) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-primary-rgb), 0.16) !important;
}

body #formComparador .btn.btn-primary:hover,
#formComparador button[type="submit"].btn.btn-primary:hover,
#formComparador .btn-primary:hover
{
  background: var(--brand-primary-700) !important;
  border-color: var(--brand-primary-700) !important;
  color: var(--ctf-brand-primary-text, #ffffff) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 768px)
{
  .ctf-form-shell,
  .kv-hero > .container-fixed > div
  {
    max-width: 100% !important;
  }

  .ctf-comparator-card__header,
  .kv-hero .card-header,
  .ctf-comparator-card__body,
  .kv-hero .card-body
  {
    padding: 18px !important;
  }

  .ctf-tabs,
  #comparadorTabs
  {
    border-radius: 0 !important;
  }

  body #comparadorTabs .btn.btn-sm,
  #comparadorTabs .btn.btn-sm
  {
    flex: 0 0 auto !important;
  }

  #logo-empresa
  {
    height: 44px !important;
    max-width: 180px !important;
  }
}

/* ======================================================================
   HOTFIX 2026-05-27 — color2 visible + logos grandes sin romper layout
   - color1: color principal / acción
   - color2: acento real visible en títulos, bordes, tabs y detalles
   ====================================================================== */
:root
{
  --ctf-secondary-glow: rgba(var(--brand-accent-rgb), 0.18);
  --ctf-secondary-soft: rgba(var(--brand-accent-rgb), 0.1);
}

/* Logos: la imagen de Wondergy trae bastante aire interno, por eso se fuerza
   un tamaño mayor en todas las zonas sin tocar la estructura del formulario. */
.ctf-landing-logo,
.hero-content > img.ctf-landing-logo
{
  height: clamp(86px, 9vw, 128px) !important;
  max-height: 128px !important;
  max-width: min(520px, 88vw) !important;
  margin-bottom: clamp(18px, 3vh, 28px) !important;
}

.ctf-header-logo,
#logo-dinamico,
.ctf-comparador-header #logo-dinamico,
.ctf-comparador-header .ctf-header-logo
{
  height: clamp(86px, 8vw, 122px) !important;
  max-height: 122px !important;
  max-width: min(520px, 86vw) !important;
  width: auto !important;
  object-fit: contain !important;
}

.ctf-comparador-header
{
  padding-top: 18px !important;
  padding-bottom: 10px !important;
}

.ctf-comparator-card__header,
.kv-hero .card-header
{
  min-height: 86px !important;
}

#logo-empresa
{
  height: 86px !important;
  max-height: 86px !important;
  max-width: 320px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* color2 debe verse como acento real, no solo como variable escondida. */
.ctf-minute-accent,
.ctf-text-teal,
.hero-sub strong,
.cmp-rgpd-check .form-check-label a,
.cmp-legal-footer__inner a:hover
{
  color: var(--brand-accent) !important;
}

.ctf-landing .hero-content::after
{
  content: "";
  display: block;
  width: 78px;
  height: 4px;
  margin: 22px auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--brand-primary) 0%,
    var(--brand-accent) 100%
  );
  opacity: 0.95;
}

/* El segundo color aparece en la botonera sin volver al efecto semáforo fuerte. */
body .btn-niba,
.btn-niba,
body a.btn-niba,
body #formComparador .btn.btn-primary,
#formComparador button[type="submit"].btn.btn-primary,
#formComparador .btn-primary
{
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-primary) 62%,
    var(--brand-accent) 100%
  ) !important;
  border-color: var(--brand-accent) !important;
  box-shadow:
    0 12px 28px rgba(var(--brand-primary-rgb), 0.16),
    0 12px 30px rgba(var(--brand-accent-rgb), 0.14) !important;
}

body .btn-niba:hover,
.btn-niba:hover,
body a.btn-niba:hover,
body #formComparador .btn.btn-primary:hover,
#formComparador button[type="submit"].btn.btn-primary:hover,
#formComparador .btn-primary:hover
{
  background: linear-gradient(
    135deg,
    var(--brand-primary-700) 0%,
    var(--brand-primary-700) 58%,
    var(--brand-accent-600) 100%
  ) !important;
  border-color: var(--brand-accent-600) !important;
}

/* Acento superior fino en la card del formulario. Se ve color2 sin deformar nada. */
.ctf-comparator-card,
.kv-hero .card.ctf-comparator-card,
.kv-hero .card
{
  position: relative !important;
}

.ctf-comparator-card::before,
.kv-hero .card.ctf-comparator-card::before,
.kv-hero .card::before
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--brand-primary) 0%,
    var(--brand-accent) 100%
  );
  z-index: 1;
}

.ctf-comparator-card__header,
.kv-hero .card-header
{
  position: relative !important;
  z-index: 2 !important;
}

body #comparadorTabs .btn.btn-sm.btn-primary,
#comparadorTabs .btn.btn-sm.btn-primary
{
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-primary) 58%,
    var(--brand-accent) 100%
  ) !important;
  border-color: var(--brand-accent) !important;
  box-shadow: 0 8px 18px rgba(var(--brand-accent-rgb), 0.16) !important;
}

body #comparadorTabs .btn.btn-sm.btn-light,
#comparadorTabs .btn.btn-sm.btn-light
{
  border-color: rgba(var(--brand-accent-rgb), 0.28) !important;
}

body #comparadorTabs .btn.btn-sm.btn-light:hover,
#comparadorTabs .btn.btn-sm.btn-light:hover
{
  background: rgba(var(--brand-accent-rgb), 0.07) !important;
  border-color: rgba(var(--brand-accent-rgb), 0.45) !important;
  color: var(--brand-accent-600) !important;
}

#proteccion_datos,
.form-check-input,
.switch
{
  accent-color: var(--brand-accent) !important;
}

.kv-hero .input:focus,
.kv-hero .select:focus,
.kv-hero textarea:focus,
#formComparador .input:focus,
#formComparador .select:focus,
#formComparador textarea:focus
{
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-accent-rgb), 0.16) !important;
}

#resultados .cmp-hero__top,
#resultados .cmp-modal__hd
{
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-accent) 100%
  ) !important;
}

@media (max-width: 768px)
{
  .ctf-landing-logo,
  .hero-content > img.ctf-landing-logo
  {
    height: clamp(74px, 18vw, 104px) !important;
    max-width: min(420px, 90vw) !important;
  }

  .ctf-header-logo,
  #logo-dinamico,
  .ctf-comparador-header #logo-dinamico,
  .ctf-comparador-header .ctf-header-logo
  {
    height: clamp(70px, 17vw, 98px) !important;
    max-height: 98px !important;
    max-width: min(420px, 90vw) !important;
  }

  #logo-empresa
  {
    height: 68px !important;
    max-height: 68px !important;
    max-width: 240px !important;
  }

  .ctf-comparator-card__header,
  .kv-hero .card-header
  {
    min-height: 76px !important;
  }
}

/* ======================================================================
   HOTFIX 2026-05-27 — botón OCR con branding dinámico
   Motivo: #btnOCR conserva .btn-light de la plantilla y debe usar color1/color2.
   No se cambia .btn-light global para no afectar botones secundarios.
   ====================================================================== */
button#btnOCR,
body button#btnOCR,
body #pdf_wrap button#btnOCR,
body #formComparador button#btnOCR,
#formComparador #btnOCR.btn.btn-light.btn-sm
{
  appearance: none !important;
  -webkit-appearance: none !important;
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-primary) 58%,
    var(--brand-accent) 100%
  ) !important;
  background-color: var(--brand-primary) !important;
  border: 1px solid var(--brand-accent) !important;
  color: var(--ctf-brand-primary-text, #ffffff) !important;
  border-radius: 999px !important;
  min-height: 42px !important;
  padding: 10px 22px !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow:
    0 10px 22px rgba(var(--brand-primary-rgb), 0.18),
    0 8px 22px rgba(var(--brand-accent-rgb), 0.14) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    background 0.18s ease !important;
}

button#btnOCR:hover,
body button#btnOCR:hover,
body #pdf_wrap button#btnOCR:hover,
body #formComparador button#btnOCR:hover,
#formComparador #btnOCR.btn.btn-light.btn-sm:hover
{
  background: linear-gradient(
    135deg,
    var(--brand-primary-700) 0%,
    var(--brand-primary-700) 55%,
    var(--brand-accent-600) 100%
  ) !important;
  border-color: var(--brand-accent-600) !important;
  color: var(--ctf-brand-primary-text, #ffffff) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 14px 28px rgba(var(--brand-primary-rgb), 0.22),
    0 10px 26px rgba(var(--brand-accent-rgb), 0.18) !important;
}

button#btnOCR:focus,
button#btnOCR:focus-visible,
body #formComparador button#btnOCR:focus,
body #formComparador button#btnOCR:focus-visible
{
  outline: none !important;
  border-color: var(--brand-accent) !important;
  box-shadow:
    0 0 0 4px rgba(var(--brand-accent-rgb), 0.18),
    0 10px 22px rgba(var(--brand-primary-rgb), 0.18) !important;
}

button#btnOCR:active,
body #formComparador button#btnOCR:active
{
  transform: translateY(0) !important;
  filter: brightness(0.98) !important;
}

button#btnOCR[disabled],
button#btnOCR.disabled,
body #formComparador button#btnOCR[disabled]
{
  opacity: 0.62 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Botón Vaciar: secundario, pero ya no gris plano de plantilla. */
button#btnOcrVaciar,
body #formComparador button#btnOcrVaciar,
#formComparador #btnOcrVaciar.btn.btn-light.btn-sm
{
  background: rgba(var(--brand-accent-rgb), 0.08) !important;
  border: 1px solid rgba(var(--brand-accent-rgb), 0.34) !important;
  color: var(--brand-accent-600) !important;
  border-radius: 999px !important;
  font-weight: 750 !important;
}

button#btnOcrVaciar:hover,
body #formComparador button#btnOcrVaciar:hover
{
  background: rgba(var(--brand-accent-rgb), 0.14) !important;
  border-color: rgba(var(--brand-accent-rgb), 0.52) !important;
  color: var(--brand-accent-600) !important;
}

/* =========================================================
   Protección de datos multiempresa: logo + colores de la vista
   ========================================================= */
.cmp-legal-page--brand
{
  min-height: calc(100vh - 80px);
  padding: 44px 18px 76px !important;
  background:
    radial-gradient(
      circle at top left,
      rgba(var(--brand-primary-rgb), 0.16),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 8%,
      rgba(var(--brand-accent-rgb), 0.18),
      transparent 30%
    ),
    linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
}

.cmp-legal-card--brand
{
  border: 1px solid rgba(var(--brand-primary-rgb), 0.16) !important;
  border-radius: 30px !important;
  box-shadow: 0 28px 75px rgba(15, 23, 42, 0.13) !important;
  overflow: hidden !important;
}

.cmp-legal-hero--brand
{
  position: relative;
  padding: 30px 34px 28px !important;
  background:
    radial-gradient(
      circle at 6% 0%,
      rgba(var(--brand-primary-rgb), 0.2),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 15%,
      rgba(var(--brand-accent-rgb), 0.2),
      transparent 34%
    ),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.14) !important;
}

.cmp-legal-hero--brand::before
{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(var(--brand-primary-rgb), 0.95),
    rgba(var(--brand-accent-rgb), 0.95)
  );
  height: 6px;
}

.cmp-legal-brandbar
{
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}

.cmp-legal-logo-card
{
  width: 190px;
  min-height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.1);
}

.cmp-legal-logo
{
  display: block;
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cmp-legal-brandcopy
{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cmp-legal-brandcopy > strong
{
  color: #0f172a;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.cmp-legal-page--brand .cmp-legal-eyebrow
{
  background: rgba(var(--brand-primary-rgb), 0.1) !important;
  color: var(--brand-primary) !important;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
}

.cmp-legal-hero-content
{
  max-width: 820px;
}

.cmp-legal-page--brand .cmp-legal-title
{
  margin: 0 0 12px !important;
  letter-spacing: -0.04em;
  color: #0b1220 !important;
}

.cmp-legal-page--brand .cmp-legal-title::after
{
  content: "";
  display: block;
  width: 92px;
  height: 5px;
  margin-top: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

.cmp-legal-page--brand .cmp-legal-subtitle
{
  color: #475569 !important;
  font-size: 1.03rem !important;
}

.cmp-legal-actions
{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.cmp-legal-btn
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.94rem;
  line-height: 1;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.cmp-legal-btn:hover
{
  transform: translateY(-1px);
}

.cmp-legal-btn--primary
{
  color: var(--ctf-brand-primary-text, #fff) !important;
  background: linear-gradient(
    135deg,
    var(--brand-primary),
    var(--brand-accent)
  ) !important;
  box-shadow: 0 14px 32px rgba(var(--brand-primary-rgb), 0.28);
}

.cmp-legal-btn--ghost
{
  color: var(--brand-primary) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.22) !important;
}

.cmp-legal-page--brand .cmp-legal-meta
{
  margin-top: 28px !important;
}

.cmp-legal-page--brand .cmp-legal-meta__item
{
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.13) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.cmp-legal-page--brand .cmp-legal-meta__label,
.cmp-legal-page--brand .cmp-legal-panel h3,
.cmp-legal-page--brand .cmp-legal-section h2,
.cmp-legal-page--brand .cmp-legal-contact
{
  color: var(--brand-primary) !important;
}

.cmp-legal-page--brand .cmp-legal-body
{
  background: #ffffff !important;
}

.cmp-legal-page--brand .cmp-legal-section
{
  scroll-margin-top: 24px;
}

.cmp-legal-page--brand .cmp-legal-section h2
{
  display: flex;
  align-items: center;
  gap: 10px;
}

.cmp-legal-page--brand .cmp-legal-section h2::before
{
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--brand-primary),
    var(--brand-accent)
  );
  box-shadow: 0 0 0 5px rgba(var(--brand-primary-rgb), 0.1);
}

.cmp-legal-page--brand .cmp-legal-panel
{
  background: linear-gradient(
    180deg,
    rgba(var(--brand-primary-rgb), 0.045),
    rgba(var(--brand-accent-rgb), 0.035)
  ) !important;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.14) !important;
}

.cmp-legal-footer__inner a:hover,
.cmp-legal-footer__inner a:focus-visible
{
  color: var(--brand-primary) !important;
}

@media (max-width: 768px)
{
  .cmp-legal-page--brand
  {
    padding: 20px 10px 48px !important;
  }

  .cmp-legal-card--brand
  {
    border-radius: 22px !important;
  }

  .cmp-legal-hero--brand
  {
    padding: 24px 18px 22px !important;
  }

  .cmp-legal-brandbar
  {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
  }

  .cmp-legal-logo-card
  {
    width: 100%;
    min-height: 88px;
    justify-content: flex-start;
  }

  .cmp-legal-logo
  {
    max-height: 64px;
  }

  .cmp-legal-actions
  {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cmp-legal-btn
  {
    width: 100%;
  }
}

/* ======================================================================
   BANNER VALIDEZ OFERTAS
   Usa el color corporativo dinámico de cada empresa.
   ====================================================================== */
#resultados .cmp-validityBanner
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-top: 9px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(var(--brand-primary-rgb, 11, 119, 189), 0.28);
  color: var(--brand-primary, #0b77bd);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}

#resultados .cmp-validityBanner__icon
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(var(--brand-primary-rgb, 11, 119, 189), 0.12);
  color: var(--brand-primary, #0b77bd);
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
}

#resultados .cmp-validityBanner__text
{
  color: var(--brand-primary-700, #064c8a);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

@media (max-width: 640px)
{
  #resultados .cmp-validityBanner
  {
    align-items: flex-start;
    border-radius: 16px;
    width: 100%;
  }
}