/* Estilos específicos para textareas en un entorno donde coexisten Bootstrap y Tailwind */

/* Estilos generales para textareas */
textarea {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    width: 100% !important;
    min-height: 120px !important;
    transition: all 0.3s ease !important;
    resize: vertical !important;
    line-height: 1.5 !important;
    font-family: inherit !important;
    border-color: #404040 !important; /* Color de borde oscuro por defecto */
}

/* Estilos para el foco en textareas */
textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
    border-color: #fa930a !important; /* Color de borde naranja cuando está seleccionado */
}

/* Estilos para textareas con clases específicas de Bootstrap */
.form-control[rows],
textarea.form-control {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
    border-radius: 0.5rem !important;
    border-color: #404040 !important; /* Color de borde oscuro por defecto */
}

.form-control[rows]:focus,
textarea.form-control:focus {
    background-color: #222222 !important;
    color: #ffffff !important;
    border-color: #fa930a !important; /* Color de borde naranja cuando está seleccionado */
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
}

/* Estilos específicos para textareas en modo oscuro */
.bg-dark textarea,
[class*="bg-[#"] textarea {
    background-color: #222222 !important;
    color: #ffffff !important;
    border-color: #404040 !important; /* Color de borde oscuro por defecto */
}

/* Estilos para textareas con clases de Tailwind */
textarea.bg-\[\#222222\],
textarea.bg-\[\#333333\] {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
    border-color: #404040 !important; /* Color de borde oscuro por defecto */
}

/* Ajustes para la altura de textareas según el número de filas */
textarea[rows="1"] { min-height: 40px !important; }
textarea[rows="2"] { min-height: 60px !important; }
textarea[rows="3"] { min-height: 80px !important; }
textarea[rows="4"] { min-height: 100px !important; }
textarea[rows="5"] { min-height: 120px !important; }
textarea[rows="6"] { min-height: 140px !important; }
textarea[rows="7"] { min-height: 160px !important; }
textarea[rows="8"] { min-height: 180px !important; }
textarea[rows="9"] { min-height: 200px !important; }
textarea[rows="10"] { min-height: 220px !important; }

/* Asegurar que los estilos de Tailwind no sobrescriban nuestros estilos */
textarea.w-full {
    width: 100% !important;
}

/* Asegurar que los bordes sean visibles y oscuros por defecto */
textarea.border,
textarea.border-gray-700,
textarea.border-gray-800 {
    border: 1px solid #404040 !important;
    border-color: #404040 !important; /* Color de borde oscuro por defecto */
}

/* Asegurar que el foco tenga el color correcto */
textarea.focus\:ring-1,
textarea.focus\:ring-2,
textarea.focus\:ring-\[\#fa930a\] {
    --tw-ring-color: #fa930a !important;
    --tw-ring-opacity: 0.5 !important;
}

textarea.focus\:border-gray-700,
textarea.focus\:border-transparent {
    border-color: #fa930a !important; /* Color de borde naranja cuando está seleccionado */
}