/* Grupo de controles de entrada */
        .controls-group {
            display: flex;
            flex-wrap: wrap; /* Permite que los elementos se envuelvan */
            justify-content: center;
            gap: 20px; /* Espacio entre los controles */
            margin-bottom: 30px;
        }

        .control-item {
            flex: 1; /* Permite que los ítems crezcan */
            min-width: 180px; /* Ancho mínimo para cada control */
            text-align: left;
        }

        .control-item label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #fff;
            font-size: 0.95em;
        }

        .control-item input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1em;
            box-sizing: border-box;
        }

        /* Estilo para los botones de acción */
        .button-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .action-btn {
            background-color: #007bff; /* Azul para el botón principal */
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .action-btn:hover {
            background-color: #0056b3; /* Azul más oscuro al pasar el ratón */
        }

        .action-btn:disabled {
            background-color: #aaa; /* Gris claro cuando deshabilitado */
            cursor: not-allowed;
        }

        /* Área de visualización del texto generado */
        #generatedTextOutput {
            margin-top: 30px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
            background-color: #f9f9f9;
            text-align: left;
            min-height: 150px;
            max-height: 400px; /* Altura máxima con scroll */
            overflow-y: auto;
            white-space: pre-wrap; /* Mantiene saltos de línea y espacios */
            word-wrap: break-word; /* Rompe palabras largas */
            color: #333;
            font-size: 0.95em;
            line-height: 1.6;
            display: none; /* Oculto por defecto */
        }

        /* Estilo para el botón de copiar */
        #copyButton {
            background-color: #28a745; /* Verde para copiar */
            margin-top: 20px;
        }

        #copyButton:hover {
            background-color: #218838;
        }

        /* Estilo para el botón de reiniciar */
        #resetButton {
            background-color: #f44336; /* Rojo para reiniciar */
            margin-top: 20px;
        }

        #resetButton:hover {
            background-color: #da190b;
        }

        /* Estilo para mensajes de error */
        .message {
            margin-top: 15px;
            color: #d9534f; /* Rojo para mensajes de error */
            font-weight: bold;
        }