/* Estilo monocromatico inspirado en el tema del blog. */
* {
    box-sizing: border-box;
    font-family: monospace !important;
}

html {
    background: #000;
    font-size: 150%;
}

body,
main,
header,
footer,
section,
aside,
article,
form,
.bg-white\/\[0\.04\],
.bg-white\/\[0\.03\],
.bg-white\/5 {
    background: #000 !important;
    background-image: none !important;
    color: #fff !important;
}

body {
    margin: 0 !important;
    padding-top: 78px !important;
    font-size: 1rem;
    line-height: 1.6;
}

p,
li,
label,
th,
td,
span,
div,
a,
a:visited,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
textarea,
select {
    color: #fff !important;
    font-size: inherit;
}

a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: underline !important;
}

/* --- HEADER & NAVBAR --- */
header {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    border-bottom: 2px solid #fff !important;
    padding: 15px 20px !important;
}

header > div {
    max-width: none !important;
    padding: 0 !important;
}

/* Alineación limpia del contenedor del nav */
header nav {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Espaciado uniforme entre botones */
}

/* Estilo consistente para TODOS los botones del navbar */
header nav a {
    border: 1px solid #fff !important;
    border-radius: 0 !important;
    padding: 0.3em 0.6em !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 0.85em !important; /* Tamaños exactos e iguales para todo el texto de los botones */
    line-height: 1 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color .2s, color .2s;
    
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    box-sizing: border-box !important;
}

/* Estado hover y página activa */
header nav a:hover,
header nav a.bg-cyan-400,
header nav a[aria-current="page"] {
    background: #fff !important;
    color: #000 !important;
    text-decoration: none !important;
}

/* --- FORMULARIOS Y OTROS BOTONES --- */
button,
form button,
a.bg-cyan-400:not(header nav a),
input,
textarea,
select {
    font-size: 1em !important;
    min-height: 2.8em;
    padding: 0.7em 1em;
    line-height: 1.4;
}

.text-cyan-400,
.text-cyan-300,
.text-slate-300,
.text-slate-400,
.text-slate-500,
.text-orange-300,
.text-blue-300,
.text-yellow-300,
.text-indigo-300,
.text-teal-300 {
    color: #fff !important;
}

.bg-cyan-400,
.bg-gradient-to-br,
.bg-indigo-500,
.bg-orange-500\/10,
.bg-blue-500\/10,
.bg-yellow-500\/10,
.bg-indigo-500\/10,
.bg-cyan-500\/10,
.bg-teal-500\/10 {
    background: #000 !important;
}

section,
article,
aside,
form,
.rounded-2xl,
.rounded-xl,
.rounded-lg {
    border-radius: 0 !important;
}

article,
aside,
.rounded-2xl,
.rounded-xl,
.rounded-lg,
.border,
.border-white\/10,
.border-white\/15,
.border-white\/20 {
    border-color: #fff !important;
}

article,
aside,
.rounded-2xl,
.rounded-xl,
.rounded-lg {
    box-shadow: none !important;
}

input,
textarea,
button {
    border-radius: 0 !important;
    border: 1px solid #fff !important;
    background: #000 !important;
    color: #fff !important;
}

input,
textarea {
    outline: 0 !important;
}

input:focus,
textarea:focus {
    border-color: #fff !important;
    box-shadow: none !important;
}

button,
form button {
    cursor: pointer;
    background: #000 !important;
    color: #fff !important;
    font-weight: bold;
}

button:hover,
form button:hover {
    background: #fff !important;
    color: #000 !important;
    text-decoration: none !important;
}

footer {
    border-top: 1px solid #fff !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 640px) {
    html {
        font-size: 160%;
    }

    body {
        padding-top: 130px !important;
        font-size: 1rem;
    }

    header > div {
        align-items: flex-start !important;
        flex-direction: column;
    }

    header nav {
        width: 100%;
        display: flex;
        gap: 4px;
    }

    header nav a {
        flex: 1;
        text-align: center;
        font-size: 0.8em !important;
        padding: 0.4em 0.2em !important;
    }

    button,
    form button,
    input,
    textarea,
    select {
        min-height: 3.1em;
        padding: 0.85em 1.1em;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    html {
        font-size: 155%;
    }
}