/* ======================================================================
   Theme Overrides — Comparador de Luz
   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.20) 0%,
                rgba(var(--brand-primary-rgb), 0.00) 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.10);
    color: #8a5a00;
}
.alert.alert-danger
{
    border-color: var(--brand-danger);
    background: rgba(239, 68, 68, 0.10);
    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.20);
}

/* ---------------------------
   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.10);
    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.10), 0 6px 12px rgba(0,0,0,0.06);
    transition: all .18s ease;
}
#resultados .text-success
{
    color: var(--brand-success) !important;
}

/* ---------------------------
   Microinteracciones
   --------------------------- */
.btn,
.input,
.select,
.card,
.badge,
.alert
{
    transition: all .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: #f5b800;
    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: #ffd645;
    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: #f5b800;
    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: #f5b800 !important;
    border-color: #f5b800 !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: #ffd645 !important;
    border-color: #ffd645 !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: #f5b800 !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: #ffd645 !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: #f5b800 !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: #f5b800 !important;
    border-color: #f5b800 !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: #ffd645 !important;
    border-color: #ffd645 !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.10) !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.20) !important;
    color: #1e293b !important;
}

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

body .input:focus,
body .select:focus {
    border-color: #f5b800 !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); }
}