@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
    --primary-color: #36b98c;
    --secundary-color: rgb(17, 24, 39);
    --danger-color: #dc2626;
    --bg-background-primary: #030712;
    --bg-background-secundary: #111827;
    --bg-background-items: rgba(52, 211, 153, 0.1);
    --bg-background-input: #1f2937;
    --text-color-primary: #d1d5db;
    --font-size-title: 6.25rem;
}

@font-face {
    font-family: "Soliden Bold Condensed";
    src: url("/fonts/SolidenTrial-BoldCondensed.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: "Soliden Bold Condensed", sans-serif !important;
}

.bg-global-primary {
    background-color: var(--bg-background-primary) !important;
}
.bg-global-secundary {
    background-color: var(--bg-background-secundary) !important;
}
.bg-background-items {
    background-color: var(--bg-background-items);
}
.color-primary {
    color: #36b98c;
}

.text-color-primary {
    color: var(--text-color-primary);
}
.font-title {
    font-size: var(--font-size-title) !important;
    line-height: 5.5rem !important;
}
h2 {
    font-size: 1.875vw;
}
.btn-primary {
    color: rgb(255, 255, 255);
    border-radius: 2rem;
    padding: 0.5rem;
    background-color: var(--primary-color);
    padding: 0.7rem !important;
}
.btn-primary:hover {
    background-color: #34d399;
}
.btn-secundary {
    color: var(--primary-color) !important;
    border-radius: 2rem !important;
    padding: 0.5rem !important;
    background-color: var(--bg-background-items) !important;
    padding: 0.7rem !important;
    box-shadow: 0px 0px 5px var(--primary-color) !important;
    transition: background-color 0.1s ease, box-shadow 0.2 ease;
}
.btn-secundary:hover {
    box-shadow: 0px 0px 15px var(--primary-color) !important;

    background-color: var(--bg-background-items) !important;
}
.btn-danger {
    color: var(--danger-color) !important;
    border-radius: 2rem !important;
    padding: 0.5rem !important;
    box-shadow: 0px 0px 5px var(--danger-color);
    padding: 0.7rem !important;

    transition: background-color 0.1s ease;
    background-color: var(--bg-background-input) !important;
}
.btn-danger:hover {
    background-color: var(--danger-color) !important;
    opacity: 0.7;
    color: #d1d5db !important;
}
input {
    background-color: var(--bg-background-input) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

input:focus {
    box-shadow: 0 0 0 1px rgba(54, 185, 140, 0.5) !important; /* Anillo translúcido */
    background-color: var(--bg-background-items) !important;
    border-color: var(--primary-color) !important; /* Acentuar el borde */
}

input:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(54, 185, 140, 0.6) !important; /* Anillo translúcido */
    background-color: var(--bg-background-items) !important; /* Fondo más oscuro */
    border-color: var(--primary-color) !important; /* Borde destacado */
}

input:-webkit-autofill {
    background-color: var(--bg-background-input) !important;
    color: #f7fafc !important; /* Color de texto claro para autofill */
    border: 1px solid #34d399 !important;
    transition: background-color 0.3s ease !important;
}

input:-webkit-autofill:focus {
    background-color: var(--bg-background-input) !important;
}
textarea {
    background-color: var(--bg-background-input) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

textarea:focus {
    box-shadow: 0 0 0 1px rgba(54, 185, 140, 0.5) !important; /* Anillo translúcido */
    background-color: var(--bg-background-items) !important;
    border-color: var(--primary-color) !important; /* Acentuar el borde */
}

textarea:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(54, 185, 140, 0.6) !important; /* Anillo translúcido */
    background-color: var(--bg-background-items) !important; /* Fondo más oscuro */
    border-color: var(--primary-color) !important; /* Borde destacado */
}

textarea:-webkit-autofill {
    background-color: var(--bg-background-input) !important;
    color: #f7fafc !important; /* Color de texto claro para autofill */
    border: 1px solid #34d399 !important;
    transition: background-color 0.3s ease !important;
}

textarea:-webkit-autofill:focus {
    background-color: var(--bg-background-input) !important;
}
/* Estilo cuando el input tiene un error */
input.invalid {
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.7) !important; /* Sombra roja */
    background-color: rgba(220, 38, 38, 0.1) !important; /* Fondo suave rojo */
    border-color: var(--danger-color) !important; /* Borde rojo */
}

/* Estilo cuando el input tiene un error y está en foco */
input.invalid:focus {
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.7) !important; /* Sombra roja */
    background-color: rgba(220, 38, 38, 0.1) !important;
    border-color: var(--danger-color) !important; /* Borde rojo */
}

/* Aplicar el mismo estilo a los textareas */
textarea.invalid {
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.7) !important; /* Sombra roja */
    background-color: rgba(220, 38, 38, 0.1) !important;
    border-color: var(--danger-color) !important; /* Borde rojo */
}
body {
  overflow-x: hidden;
}