/* Estilos para las tarjetas de estado en modo oscuro */
.bg-\[\#333333\].rounded-lg,
.bg-\[\#2a2a2a\].rounded-lg,
div[class*="bg-[#"].rounded-lg,
#states-container > div,
#functions-container > div {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
    border-color: #404040 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* Asegurarse de que las tarjetas con clases de Tailwind tengan el borde correcto */
.border.border-gray-700,
.border.border-gray-800,
.border-gray-700,
.border-gray-800 {
    border: 1px solid #404040 !important;
    border-color: #404040 !important;
}

/* Estilos para los títulos dentro de las tarjetas */
.bg-\[\#333333\].rounded-lg h4,
.bg-\[\#2a2a2a\].rounded-lg h4,
div[class*="bg-[#"].rounded-lg h4,
#states-container > div h4,
#functions-container > div h4 {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Estilos para los textos dentro de las tarjetas */
.bg-\[\#333333\].rounded-lg p,
.bg-\[\#2a2a2a\].rounded-lg p,
div[class*="bg-[#"].rounded-lg p,
#states-container > div p,
#functions-container > div p {
    color: #cccccc !important;
}

/* Estilos para los textos pequeños dentro de las tarjetas */
.bg-\[\#333333\].rounded-lg .text-xs,
.bg-\[\#2a2a2a\].rounded-lg .text-xs,
div[class*="bg-[#"].rounded-lg .text-xs,
#states-container > div .text-xs,
#functions-container > div .text-xs {
    color: #999999 !important;
}

/* Estilos para los botones dentro de las tarjetas */
.bg-\[\#333333\].rounded-lg button,
.bg-\[\#2a2a2a\].rounded-lg button,
div[class*="bg-[#"].rounded-lg button,
#states-container > div button,
#functions-container > div button {
    transition: all 0.2s ease !important;
}

/* Estilos específicos para las tarjetas de estado */
#states-container > div,
.state-card {
    border: 1px solid #404040 !important;
    border-color: #404040 !important;
}

/* Estilos para tarjetas al pasar el mouse */
.bg-\[\#333333\].rounded-lg:hover,
.bg-\[\#2a2a2a\].rounded-lg:hover,
div[class*="bg-[#"].rounded-lg:hover,
#states-container > div:hover,
#functions-container > div:hover {
    border-color: #505050 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Estilos para los mensajes de error dentro de las tarjetas */
.bg-\[\#333333\].rounded-lg .text-red-400,
.bg-\[\#2a2a2a\].rounded-lg .text-red-400,
div[class*="bg-[#"].rounded-lg .text-red-400,
#states-container > div .text-red-400,
#functions-container > div .text-red-400 {
    color: #f87171 !important;
}