/* web/bot_whatsapp/bot_wsp_index.css */

/* Estilos para el contenedor del contenido principal del bot */
.bot-content-area {
    /* El padding y max-width pueden ser controlados por las clases de Tailwind en el HTML,
       como 'container mx-auto max-w-4xl' que ya tenías.
       Esta clase es más para organización si necesitas estilos específicos que no sean de Tailwind. */
}

/* --- Estilos originales de tu help.html --- */
/* No es necesario repetir 'body.original-bot-styles' aquí si ya está en el HTML y
   los estilos globales del body los maneja main_style.css.
   Nos enfocaremos en las clases internas del contenido del bot. */

.command-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.3s ease;
    /* Clases de Tailwind en HTML: bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-gray-700 */
}
.command-card:hover {
    transform: translateY(-5px);
}

.command-tag {
    display: inline-block;
    padding: 0.25rem 0.5rem; /* py-1 px-2 */
    border-radius: 0.25rem; /* rounded */
    font-size: 0.875rem; /* text-sm */
    margin-right: 0.5rem; /* mr-2 */
    margin-bottom: 0.5rem; /* mb-2 */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Colores definidos por clases de Tailwind en el HTML: 
       e.g., bg-cyan-100 dark:bg-cyan-700 text-cyan-700 dark:text-cyan-100 */
}

.usage-tag {
    font-family: monospace;
    padding: 0.5rem; /* p-2 */
    display: block;
    margin-top: 0.5rem; /* mt-2 */
    white-space: pre-wrap; /* Mantiene el formato */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Colores definidos por clases de Tailwind en el HTML:
       e.g., bg-amber-100 dark:bg-amber-700 text-amber-700 dark:text-amber-100 */
}

.category-header {
    font-size: 1.875rem; /* text-3xl */
    font-weight: bold; /* font-bold */
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 1rem; /* mb-4 */
    padding-bottom: 0.5rem; /* pb-2 */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none; 
    transition: color 0.3s ease, border-color 0.3s ease;
    /* Clases de Tailwind en HTML:
       text-indigo-600 dark:text-indigo-400 border-b-2 border-indigo-500 dark:border-indigo-700 */
}

.arrow-icon {
    transition: transform 0.3s ease-out, color 0.3s ease;
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    /* Clases de Tailwind en HTML:
       text-indigo-500 dark:text-indigo-400 */
}

.arrow-icon.open {
    transform: rotate(180deg);
}

/* Ajustes para el header que estaba dentro del contenido del bot */
.bot-content-area header.mb-12 {
    padding-top: 0; /* El header principal ya tiene padding */
    margin-bottom: 2rem; /* Ajustar si es necesario */
}

.bot-content-area footer.mt-12 {
    margin-top: 3rem; /* Ajustar si es necesario */
}