@tailwind base;
@tailwind components;
@tailwind utilities;

/* Tipografía personalizada */
:root {
    --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";

    /* Paleta personalizada */
    --verde-claro: #d9ead3;
    --verde-oscuro: #008000;
    --verde-medio: #00b050;
    --negro: #000000;
}
/* Asegurar correcto funcionamiento del modo oscuro */
.dark body {
    background-color: #1a202c;
    color: white;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #d1d5db; /* gris claro */
    border-radius: 0.375rem;
    background-color: #ffffff;
    color: #111827; /* texto oscuro */
}

.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="number"] {
    background-color: #374151; /* gris oscuro */
    color: #ffffff; /* texto claro */
    border-color: #4b5563; /* gris medio */
}

[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}
@keyframes slide-in {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}