html[data-theme="default"]{
    --primary: #234e70;
  --secondary: #3f72af;
  --accent: #4fa3d1;
  --background: #f7f9fc;
  --card: #ffffff;
  --text: #222;
  --muted: #666;
 
  --header-bg: rgba(255,255,255,0.78);
  --body-bg:
    radial-gradient(
      ellipse at top,
      rgba(79,163,209,.10) 0%,
      rgba(79,163,209,.04) 25%,
      transparent 60%
    ),
    linear-gradient(
      to bottom,
      #fbfcfe,
      #f7f9fc
    );
}

html[data-theme="dark"]{

    --primary:#7cc4ff;
    --secondary:#5ba8ff;
    --accent:#56d4ff;

    --background:#111827;
    --card:#1b2533;

    --text:#eef3fa;
    --muted:#a7b4c4;
    --header-bg: rgba(17, 24, 39, 0.82);

    --body-bg:
      radial-gradient(
          ellipse at top,
          rgba(86,212,255,.10),
          transparent 60%
      ),
      linear-gradient(
          #111827,
          #0f1722
      );
}

html[data-theme="emerald"]{

    --primary:#047857;
    --secondary:#10b981;
    --accent:#34d399;

    --background:#f6fffb;
    --card:white;

    --text:#17352d;
    --muted:#58776e;
  --header-bg: rgba(255,255,255,0.78);
    --body-bg:
      radial-gradient(
          ellipse at top,
          rgba(16,185,129,.10),
          transparent 60%
      ),
      linear-gradient(
          #fbfffd,
          #f3fff8
      );
}


html[data-theme="sunset"] {
  --primary: #d9480f;
  --secondary: #f76707;
  --accent: #ffd43b;

  --background: #fff8f3;
  --card: #ffffff;

  --text: #3d2418;
  --muted: #7b5c4d;
    
  --header-bg: rgba(255,255,255,0.78);    
--body-bg:
radial-gradient(
ellipse at top,
rgba(247,103,7,.10),
transparent 60%
),
linear-gradient(
#fffdfb,
#fff6ef
);    
}

html[data-theme="purpleAI"] {
   --primary:#5f3dc4;
  --secondary:#7950f2;
  --accent:#9775fa;

  --background:#faf8ff;
  --card:#ffffff;
  --header-bg: rgba(255,255,255,0.78);
  --text:#2f2848;
  --muted:#70688d;

    --body-bg:
        radial-gradient(
            ellipse at top,
            rgba(151,117,250,.10),
            transparent 60%
        ),
        linear-gradient(
            #fcfbff,
            #f6f2ff
        );
}

html[data-theme="tekno"] {
  --primary:#005f99;
  --secondary:#0096c7;
  --accent:#48cae4;

  --background:#f5fbfd;
  --card:#ffffff;
  --header-bg: rgba(255,255,255,0.78);
  --text:#173042;
  --muted:#5b7181;

    --body-bg:
        radial-gradient(
            ellipse at top,
            rgba(72,202,228,.12),
            transparent 60%
        ),
        linear-gradient(
            #fbfeff,
            #f3fbfd
        );
}

html[data-theme="coral"] {
  --primary:#ff5a5f;
  --secondary:#00b8a9;
  --accent:#ffd166;
  --header-bg: rgba(255,255,255,0.78);
  --background:#fffdfc;
  --card:#ffffff;

  --text:#2e2e2e;
  --muted:#666666;

    --body-bg:
        radial-gradient(
            ellipse at top,
            rgba(255,90,95,.10),
            transparent 60%
        ),
        linear-gradient(
            #fffefc,
            #fff8f3
        );
}

html[data-theme="minimal"] {
  --primary:#3d3d3d;
  --secondary:#5f5f5f;
  --accent:#8d8d8d;

  --background:#fafafa;
  --card:#ffffff;
  --header-bg: rgba(255,255,255,0.78);
  --text:#202020;
  --muted:#6c6c6c;

    --body-bg:
        radial-gradient(
            ellipse at top,
            rgba(150,150,150,.06),
            transparent 60%
        ),
        linear-gradient(
            #ffffff,
            #f7f7f7
        );
}


/* Botón flotante de cambio de tema */
.theme-toggle {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;

    width: 3.5rem;
    height: 3.5rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: none;

    cursor: pointer;

    z-index: 9999;

    background: var(--theme-button-bg, #222);
    color: var(--theme-button-color, #fff);

    box-shadow:
        0 8px 20px rgba(0,0,0,.25),
        0 2px 6px rgba(0,0,0,.15);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* Hover */
.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow:
        0 12px 30px rgba(0,0,0,.35);
}


/* Estado al pulsarlo */
.theme-toggle:active {
    transform: scale(.9);
}


/* Animación cuando cambia el tema */
.theme-toggle.theme-changing {
    animation: rotate-theme .5s ease;
}


@keyframes rotate-theme {
    from {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.15);
    }

    to {
        transform: rotate(360deg) scale(1);
    }
}


/* Adaptación móvil */
@media (max-width: 600px) {
    .theme-toggle {
        right: 1rem;
        bottom: 1rem;
        width: 3rem;
        height: 3rem;
    }
}