:root {
    --color-red: #ff0000;
    --color-orange: #ff7f00;
    --color-yellow: #ffff00;
    --color-green: #00ff00;
    --color-blue: #0000ff;
    --color-indigo: #4b0082;
    --color-violet: #9400d3;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Fira Code", monospace;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(135deg, #00ffee, #0037ff);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

main {
    flex: 1;
}

/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ------------------------------------------ HEADER --------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

header {
    min-height: 80px;
    width: 100%;
    background: #1f1f1f;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav {
    width: 100%;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

nav ul li a {
    color: #aaa;
    text-decoration: none;
    font-size: 1.2em;
    padding: 5px 10px 15px;
    position: relative;
    transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
    align-items: center;
    justify-content: center;
}

nav ul li:not(:first-child) a:hover {
    color: #fff;
    font-weight: bold;
}

nav ul li:not(:first-child) a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        var(--color-red),
        var(--color-orange),
        var(--color-yellow),
        var(--color-green),
        var(--color-blue),
        var(--color-indigo),
        var(--color-violet),
        var(--color-red)
    );
    background-size: 200% 100%;
    animation: rainbowBorder2 2s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

nav ul li:not(:first-child) a:hover::after {
    opacity: 1;
}

@keyframes rainbowBorder2 {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}



/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ------------------------------------------ FOOTER --------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

.h1-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    align-items: center;
    justify-content: center;
}

footer {
    width: 100%;
    background: #1f1f1f;
    color: white;
    text-align: center;
    padding: 10px 0;
}

footer p {
    margin-top: 30px;
}

footer h3 {
    margin-bottom: 20px;
}

.nav-footer ul li a:hover {
    color: #fff;
    font-weight: bold;
}

.nav-footer ul li a:hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        var(--color-red),
        var(--color-orange),
        var(--color-yellow),
        var(--color-green),
        var(--color-blue),
        var(--color-indigo),
        var(--color-violet),
        var(--color-red)
    );
    background-size: 200% 100%;
    animation: rainbowBorder2 2s linear infinite;
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
}

.nav-footer ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: transparent;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ------------------------------------------ DISEÑO --------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */


.menu {
    margin: 40px 0 60px 0;
    display: flex;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 200px;
}

.file-input {
    width: 250px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
}

.file-input input {
    width: 100%;
    padding: 8px 12px;
    font-family: "Fira Code", monospace;
    font-size: 14px;
    color: rgba(226, 226, 226, 0.925);
    background: rgba(0,0,0,0.1);
    border-radius: 12px;
    border: none;
    box-shadow: 0px 35px 20px 0 rgba(0,0,0,0.05);
    outline: none;
    transition: transform 300ms ease, box-shadow 300ms ease, background 0.3s ease;
    backdrop-filter: blur(8px);
}

.file-input input::placeholder {
    color: rgba(26, 25, 25, 0.5);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%232b2b2b' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.41l-2.34-2.34a1.003 1.003 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") no-repeat right 8px center;
    padding-right: 32px;
}

.file-input input:focus {
    box-shadow: 0px 10px 20px 0 rgba(0,0,0,0.4);
    transform: scale(1.03);
    background: rgba(0,0,0,0.15);
}

.gradient-select,
.outline-select {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
}

.gradient-select select,
.outline-select select {
    font-family: "Fira Code", monospace;
    font-size: 14px;
    color: rgba(226, 226, 226, 0.925);
    background: rgba(0,0,0,0.1);
    border-radius: 12px;
    border: none;
    padding: 8px 12px;
    padding-right: 32px;
    box-shadow: 0px 35px 20px 0 rgba(0,0,0,0.05);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: transform 300ms ease, box-shadow 300ms ease, background 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23E2E2E2' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
}

.gradient-select select option,
.outline-select select option {
    font-family: "Fira Code", monospace;
    font-size: 14px !important;
    color: #E2E2E2 !important;
    background: rgba(30, 30, 30, 0.95) !important; /* casi negro semi-transparente */
    padding: 8px 12px !important;
    border-radius: 10px;
    transition: background 0.3s ease, color 0.3s ease;
}

.gradient-select select option:hover,
.outline-select select option:hover {
    background: #3b3d4a !important; /* más claro al pasar el cursor */
    color: #ffffff !important;
}

.gradient-select select:focus option,
.outline-select select:focus option {
    background: rgba(40, 40, 40, 1) !important; /* fondo de foco más oscuro */
    color: #ffffff !important;
}



select {
    background: #2b2b2b;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    outline: none;
}

.preview-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 99vw;
}

.code-editor {
    position: relative;
    background: #2d2f3b;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.header {
    background: #3b3d4a;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    position: relative;
}

.buttons {
    display: flex;
    gap: 8px;
}

.dot {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
}

.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }

.filename {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
}

.filename img {
    width: 18px;
    height: 18px;
}

.code-area {
    background: #23252e;
    padding: 20px;
    min-width: 550px;
    max-width: 99vw;
}

textarea {
    width: 100%;
    height: auto;
    min-height: 1.2em;
    background: transparent;
    border: none;
    color: #efefef;
    font-size: 15px;
    resize: none;
    overflow: hidden;
    outline: none;
    white-space: pre;
    word-wrap: normal;
    max-width: 98vw;
}

.rainbow-shadow {
    animation: rainbowShadow 10s linear infinite;
}

@keyframes rainbowShadow {
    0%   { box-shadow: 0 0 15px hsl(0, 100%, 60%); }
    16%  { box-shadow: 0 0 15px hsl(60, 100%, 60%); }
    33%  { box-shadow: 0 0 15px hsl(120, 100%, 60%); }
    50%  { box-shadow: 0 0 15px hsl(180, 100%, 60%); }
    66%  { box-shadow: 0 0 15px hsl(240, 100%, 60%); }
    83%  { box-shadow: 0 0 15px hsl(300, 100%, 60%); }
    100% { box-shadow: 0 0 15px hsl(360, 100%, 60%); }
}

.rainbow-border {
    position: relative;
    border-radius: 12px;
    z-index: 0;
    border: 4px solid transparent;
    background: linear-gradient(#2d2f3b, #2d2f3b) padding-box,
        linear-gradient(
            90deg,
            red,
            orange,
            yellow,
            lime,
            cyan,
            blue,
            indigo,
            violet,
            magenta,
            pink,
            red
        ) border-box;
    background-size: 400% 100%;
    animation: borderMove 20s linear infinite;
}

@keyframes borderMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

.shadow-3d {
    box-shadow: 10px 10px 0 rgb(0, 0, 0);
}

.glow-blue {
    position: relative;
    border-radius: 12px;
    z-index: 0;
    overflow: visible;
}

.glow-blue::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 12px;
    background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet, red);
    background-size: 400% 100%;
    z-index: -1;
    filter: blur(20px);
    animation: moveColors 15s linear infinite;
}

@keyframes moveColors {
    0%   { background-position: 0% 0; }
    100% { background-position: 400% 0; }
}

.glass {
    position: relative;
    border-radius: 12px;
    z-index: 0;
    overflow: visible;
}

.glass::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 0px;
    background: conic-gradient(from 0deg, red, orange, yellow, lime, cyan, blue, violet, red);
    filter: blur(15px);
    z-index: -1;
    animation: spinColors 6s linear infinite;
}

@keyframes spinColors {
    0%   { background: conic-gradient(from 0deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    1%   { background: conic-gradient(from 3.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    2%   { background: conic-gradient(from 7.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    3%   { background: conic-gradient(from 10.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    4%   { background: conic-gradient(from 14.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    5%   { background: conic-gradient(from 18deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    6%   { background: conic-gradient(from 21.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    7%   { background: conic-gradient(from 25.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    8%   { background: conic-gradient(from 28.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    9%   { background: conic-gradient(from 32.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    10%  { background: conic-gradient(from 36deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    11%  { background: conic-gradient(from 39.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    12%  { background: conic-gradient(from 43.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    13%  { background: conic-gradient(from 46.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    14%  { background: conic-gradient(from 50.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    15%  { background: conic-gradient(from 54deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    16%  { background: conic-gradient(from 57.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    17%  { background: conic-gradient(from 61.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    18%  { background: conic-gradient(from 64.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    19%  { background: conic-gradient(from 68.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    20%  { background: conic-gradient(from 72deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    21%  { background: conic-gradient(from 75.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    22%  { background: conic-gradient(from 79.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    23%  { background: conic-gradient(from 82.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    24%  { background: conic-gradient(from 86.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    25%  { background: conic-gradient(from 90deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    26%  { background: conic-gradient(from 93.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    27%  { background: conic-gradient(from 97.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    28%  { background: conic-gradient(from 100.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    29%  { background: conic-gradient(from 104.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    30%  { background: conic-gradient(from 108deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    31%  { background: conic-gradient(from 111.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    32%  { background: conic-gradient(from 115.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    33%  { background: conic-gradient(from 118.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    34%  { background: conic-gradient(from 122.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    35%  { background: conic-gradient(from 126deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    36%  { background: conic-gradient(from 129.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    37%  { background: conic-gradient(from 133.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    38%  { background: conic-gradient(from 136.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    39%  { background: conic-gradient(from 140.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    40%  { background: conic-gradient(from 144deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    41%  { background: conic-gradient(from 147.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    42%  { background: conic-gradient(from 151.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    43%  { background: conic-gradient(from 154.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    44%  { background: conic-gradient(from 158.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    45%  { background: conic-gradient(from 162deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    46%  { background: conic-gradient(from 165.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    47%  { background: conic-gradient(from 169.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    48%  { background: conic-gradient(from 172.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    49%  { background: conic-gradient(from 176.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    50%  { background: conic-gradient(from 180deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    51%  { background: conic-gradient(from 183.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    52%  { background: conic-gradient(from 187.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    53%  { background: conic-gradient(from 190.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    54%  { background: conic-gradient(from 194.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    55%  { background: conic-gradient(from 198deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    56%  { background: conic-gradient(from 201.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    57%  { background: conic-gradient(from 205.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    58%  { background: conic-gradient(from 208.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    59%  { background: conic-gradient(from 212.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    60%  { background: conic-gradient(from 216deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    61%  { background: conic-gradient(from 219.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    62%  { background: conic-gradient(from 223.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    63%  { background: conic-gradient(from 226.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    64%  { background: conic-gradient(from 230.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    65%  { background: conic-gradient(from 234deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    66%  { background: conic-gradient(from 237.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    67%  { background: conic-gradient(from 241.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    68%  { background: conic-gradient(from 244.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    69%  { background: conic-gradient(from 248.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    70%  { background: conic-gradient(from 252deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    71%  { background: conic-gradient(from 255.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    72%  { background: conic-gradient(from 259.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    73%  { background: conic-gradient(from 262.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    74%  { background: conic-gradient(from 266.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    75%  { background: conic-gradient(from 270deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    76%  { background: conic-gradient(from 273.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    77%  { background: conic-gradient(from 277.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    78%  { background: conic-gradient(from 280.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    79%  { background: conic-gradient(from 284.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    80%  { background: conic-gradient(from 288deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    81%  { background: conic-gradient(from 291.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    82%  { background: conic-gradient(from 295.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    83%  { background: conic-gradient(from 298.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    84%  { background: conic-gradient(from 302.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    85%  { background: conic-gradient(from 306deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    86%  { background: conic-gradient(from 309.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    87%  { background: conic-gradient(from 313.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    88%  { background: conic-gradient(from 316.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    89%  { background: conic-gradient(from 320.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    90%  { background: conic-gradient(from 324deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    91%  { background: conic-gradient(from 327.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    92%  { background: conic-gradient(from 331.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    93%  { background: conic-gradient(from 334.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    94%  { background: conic-gradient(from 338.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    95%  { background: conic-gradient(from 342deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    96%  { background: conic-gradient(from 345.6deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    97%  { background: conic-gradient(from 349.2deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    98%  { background: conic-gradient(from 352.8deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    99%  { background: conic-gradient(from 356.4deg, red, orange, yellow, lime, cyan, blue, violet, red); }
    100% { background: conic-gradient(from 360deg, red, orange, yellow, lime, cyan, blue, violet, red); }
}

.switch-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: "Fira Code", monospace;
    font-size: 14px;
}

.switch-wrapper input[type="checkbox"] {
    display: none;
}

.switch-wrapper label {
    background: rgba(0,0,0,0.1);
    border-radius: 12px;
    box-shadow: 0px 35px 20px 0 rgba(0,0,0,0.05);
    display: flex;
    height: 35px;
    padding: 8px;
    position: relative;
    transition: transform 300ms ease, box-shadow 300ms ease;
    width: 116px;
    cursor: pointer;
}

.switch-wrapper label:after {
    animation: move-left 400ms;
    background: rgba(0,0,0, 0.219) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 1 12 2z' fill='%232b2b2b'/%3E%3Cpath d='M12 2a10 10 0 0 0 0 20 10 10 0 0 1 0-20z' fill='%232b2b2b' opacity='0.5'/%3E%3C/svg%3E") no-repeat center;
    border-radius: 12px;
    content: '';
    left: 5px;
    outline: none;
    position: absolute;
    transition: background 100ms linear;
    width: 30px;
    height: 30px;
    top: 2px;
}

.switch-wrapper label:active {
    box-shadow: 0px 10px 20px 0 rgba(0,0,0,0.4);
    transform: scale(1.15);
}

.switch-wrapper input:checked + label:after {
    animation: move-right 400ms;
    background: rgba(0, 0, 0, 0.219) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23FFD700'/%3E%3Cpath stroke='%23FFD700' stroke-width='2' stroke-linecap='round' d='M12 1v4 M12 19v4 M4.22 4.22l2.83 2.83 M16.95 16.95l2.83 2.83 M1 12h4 M19 12h4 M4.22 19.78l2.83-2.83 M16.95 7.05l2.83-2.83'/%3E%3C/svg%3E") no-repeat center;
    left: 82px;
}

@keyframes move-right {
    0% { left: 5px; }
    75% { left: 88px; }
    100% { left: 82px; }
}

@keyframes move-left {
    0% { left: 82px; }
    75% { left: 2px; }
    100% { left: 5px; }
}

.preview-container {
    margin-bottom: 300px !important;
}


/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* --------------------------------------- TEMA CLARO -------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

body.light-mode #code-editor .header {
    background-color: #f5f5f5 !important;
}

body.light-mode #code-editor .code-area {
    background-color: #ffffff !important;
}

#code-editor .filename,
#code-editor textarea,
#code-editor textarea::placeholder {
    color: #e3e3e3d3;
}

body.light-mode #code-editor .filename,
body.light-mode #code-editor textarea,
body.light-mode #code-editor textarea::placeholder {
    color: #121212 !important;
}