Necesito que mejores mi codigo HTML , darle un formulario a cada seccion, ademas de la que ya existe para informes, tiene q existir una similar para SUSPENDER, que permita suspender una orde, y una similar para EJECUTAR, Para ejecutar las ordenes en texto. quiero que sea mas estetica y moderna.:              <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Completa el texto</title>
<style>
    /* Estilos CSS */
    body {
        font-family: 'Roboto', sans-serif;
        background-color: #f4f4f4;
        color: #333;
        margin: 0;
        padding: 0;
    }

    h1 {
        text-align: center;
        font-size: 32px;
        margin-top: 20px;
    }

    form {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label {
        display: block;
        margin-bottom: 5px;
    }

    select,
    input,
    textarea {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }

    button {
        background-color: #007bff;
        color: #fff;
        padding: 12px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 18px;
        margin-top: 10px;
        width: 100%;
        transition: background-color 0.3s;
    }

    button:hover {
        background-color: #0056b3;
    }

    #textoCompleto {
        margin-top: 20px;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    /* Estilos para el men  horizontal */
    .secciones {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .seccion {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        cursor: pointer;
        margin-right: 10px;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    .seccion:hover {
        background-color: #0056b3;
    }
</style>
</head>
<body>
    <div class="secciones">
        <div class="seccion" onclick="mostrarContactos()">SUSPENDER</div>
        <div class="seccion" onclick="mostrarInformes()">INFORMES</div>
        <div class="seccion" onclick="mostrarCodigos()">EJECUTAR</div>
    </div>
  
    <form id="mostrarInformes">
        <!-- Selector de texto -->
        <label for="textoSeleccionado">Tarea Realizada:</label>
        <select id="textoSeleccionado" onchange="mostrarCampos()">
            <option value="Exterior">Exterior</option>
            <option value="Palier">Palier</option>
            <option value="Domicilio">Domicilio</option>
        </select><br>
        <label for="Tecnicos">Tecnico:</label>
        <input type="text" id="Tecnicos" name="Tecnicos" required><br>
        <label for="Tecnicos2">Tecnico:</label>
        <input type="text" id="Tecnicos2" name="Tecnicos2" required><br>
        
        <!-- Inputs para Ejecutar -->
        <div id="inputsEjecutar" style="display: none;">
            <label for="direccionEjecutar">Direccion:</label>
            <input type="text" id="direccionEjecutar" name="direccionEjecutar" required><br>
            <label for="pisosEjecutar">P:</label>
            <input type="number" id="pisosEjecutar" name="pisosEjecutar" required><br>
            <label for="UFEjecutar">UF:</label>
            <input type="number" id="UFEjecutar" name="UFEjecutar" required><br>
            <label for="NAPEjecutar">NAP:</label>
            <input id="NAPEjecutar" name="NAPEjecutar" required><br>
            <label for="tareaEjecutar">TAREA:</label>
            <input type="text" id="tareaEjecutar" name="tareaEjecutar" required><br>
        </div>


        <!-- Inputs para Exterior -->
        <div id="inputsExterior">
            <label for="direccionExterior">Direccion:</label>
            <input type="text" id="direccionExterior" name="direccionExterior" required><br>
            <label for="PisosExterior">Pisos:</label>
            <input type="text" id="PisosExterior" name="PisosExterior" required><br>
            <label for="UFExterior">UF:</label>
            <input type="text" id="UFExterior" name="UFExterior" required><br>
            <label for="NAPExterior">NAP:</label>
            <input id="NAPExterior" name="NAPExterior"<br>
            <label for="drop150mtsExterior">DROP PRECO 150MTS:</label>
            <input type="number" id="drop150mtsExterior" name="drop150mtsExterior" required><br>
            <label for="drop80mtsExterior">DROP PRECO 80MTS:</label>
            <input type="number" id="drop80mtsExterior" name="drop80mtsExterior" required><br>
            <label for="drop30mtsExterior">DROP PRECO 30MTS:</label>
            <input type="number" id="drop30mtsExterior" name="drop30mtsExterior" required><br>
            <label for="drop5mtsExterior">DROP PRECO 5MTS:</label>
            <input type="number" id="drop5mtsExterior" name="drop5mtsExterior" required><br>
            <label for="CDO7030Exterior">CDO 70/30:</label>
            <input type="number" id="CDO7030Exterior" name="CDO7030Exterior" required><br>
            <label for="CDO5050Exterior">CDO 50/50:</label>
            <input type="number" id="CDO5050Exterior" name="CDO5050Exterior" required><br>
            <label for="CDOTerminalExterior">CDO TERMINAL:</label>
            <input type="number" id="CDOTerminalExterior" name="CDOTerminalExterior" required><br>
            <label for="CEEExterior">CEE:</label>
            <input type="number" id="CEEExterior" name="CEEExterior" required><br>
            <label for="tarugosExterior">TARUGOS:</label>
            <input type="number" id="tarugosExterior" name="tarugosExterior" required><br>
            <label for="pitonesExterior">PITONES:</label>
            <input type="number" id="pitonesExterior" name="pitonesExterior" required><br>
            <label for="arandelasExterior">ARANDELAS:</label>
            <input type="number" id="arandelasExterior" name="arandelasExterior" required><br>
            <label for="precintosExterior">PRECINTOS:</label>
            <input type="number" id="precintosExterior" name="precintosExterior" required><br>
            <label for="retencionesExterior">RETENCIONES:</label>
            <input type="number" id="retencionesExterior" name="retencionesExterior" required><br>
        </div>

        <!-- Inputs para Palier -->
        <div id="inputsPalier" style="display: none;">
            <label for="direccionPalier">Direccion:</label>
            <input type="text" id="direccionPalier" name="direccionPalier" required><br>
            <label for="pisosPalier">P:</label>
            <input type="number" id="pisosPalier" name="pisosPalier" required><br>
            <label for="UFPalier">UF:</label>
            <input type="number" id="UFPalier" name="UFPalier" required><br>
            <label for="NAPPalier">NAP:</label>
            <input id="NAPPalier" name="NAPPalier" required><br>
            <label> MATERIALES: </label>
            <label for="dropBulletPalier"> DROP BULLET 150MTS:</label>
            <input type="number" id="dropBulletPalier" name="dropBulletPalier" required><br>
               <label for="dropBulletPalier80"> DROP BULLET 80MTS:</label>
            <input type="number" id="dropBulletPalier80" name="dropBulletPalier80" required><br>
               <label for="dropBulletPalier50">DROP BULLET 50MTS:</label>
            <input type="number" id="dropBulletPalier50" name="dropBulletPalier50" required><br>
            <label for="retencionesPalier">RETENCIONES:</label>
            <input type="number" id="retencionesPalier" name="retencionesPalier" required><br>
            <label for="miniGDOPalier">MINI GDO:</label>
            <input type="number" id="miniGDOPalier" name="miniGDOPalier" required><br>
            <label for="miniCDO7030Palier">MINI CDO 70/30:</label>
            <input type="number" id="miniCDO7030Palier" name="miniCDO7030Palier" required><br>
            <label for="miniCDO5050Palier">MINI CDO 50/50:</label>
            <input type="number" id="miniCDO5050Palier" name="miniCDO5050Palier" required><br>
            <label for="miniCDOTerminalPalier">MINI CDO TERMINAL:</label>
            <input type="number" id="miniCDOTerminalPalier" name="miniCDOTerminalPalier" required><br>
            <label for="patchcord20Palier">PATCHCORD 20MTS:</label>
            <input type="number" id="patchcord20Palier" name="patchcord20Palier" required><br>
            <label for="patchcord14Palier">PATCHCORD 14MTS:</label>
            <input type="number" id="patchcord14Palier" name="patchcord14Palier" required><br>
            <label for="patchcord8Palier">PATCHCORD 8MTS:</label>
            <input type="number" id="patchcord8Palier" name="patchcord8Palier" required><br>
            <label for="precintosPalier">PRECINTOS:</label>
            <input type="number" id="precintosPalier" name="precintosPalier" required><br>
            <label for="nomencladoPalier">NOMENCLADO:</label>
            <input type="number" id="nomencladoPalier" name="nomencladoPalier" required><br>
        </div>

        <!-- Inputs para Domicilio -->
        <div id="inputsDomicilio" style="display: none;">
            <label for="direccionDomicilio">Direccion:</label>
            <input type="text" id="direccionDomicilio" name="direccionDomicilio" required><br>
            <label for="pisosDomicilio">P:</label>
            <input type="number" id="pisosDomicilio" name="pisosDomicilio" required><br>
            <label for="UFDomicilio">UF:</label>
            <input type="number" id="UFDomicilio" name="UFDomicilio" required><br>
            <label for="NAPDomicilio">NAP:</label>
            <input id="NAPDomicilio" name="NAPDomicilio"  required><br>
            <label for="drop_40mDomicilio">DROP PLANO DE 40MTS:</label>
            <input type="number" id="drop_40mDomicilio" name="drop_40mDomicilio" required><br>
            <label for="drop_70mDomicilio">DROP PLANO DE 70MTS:</label>
            <input type="number" id="drop_70mDomicilio" name="drop_70mDomicilio" required><br>
            <label for="modemONTDomicilio">MODEM ONT:</label>
            <input type="number" id="modemONTDomicilio" name="modemONTDomicilio" required><br>
            <label for="decoFullDomicilio">DECO FULL:</label>
            <input type="number" id="decoFullDomicilio" name="decoFullDomicilio" required><br>
            <label for="conectorAPCDomicilio">CONECTOR APC:</label>
            <input type="number" id="conectorAPCDomicilio" name="conectorAPCDomicilio" required><br>
            <label for="conector3MDomicilio">CONECTOR 3M:</label>
            <input type="number" id="conector3MDomicilio" name="conector3MDomicilio" required><br>
            <label for="controlRemotoDomicilio">CONTROL REMOTO:</label>
            <input type="number" id="controlRemotoDomicilio" name="controlRemotoDomicilio" required><br>
            <label for="pilasDomicilio">PILAS:</label>
            <input type="number" id="pilasDomicilio" name="pilasDomicilio" required><br>
        </div>

        <!-- Bot n para generar el texto completo -->
        <button type="button" onclick="generarTexto()">Generar Texto</button>
   
        <!-- Bot n para copiar el texto generado -->
        <button type="button" onclick="copiarTexto()">Copiar Texto</button>
   
    </form>

    <!-- Contenedor para mostrar el texto completo generado -->
    <div id="textoCompleto"></div>



    <script>
    
        function mostrarCampos() {
            const seleccion = document.getElementById('textoSeleccionado').value;
            if (seleccion === 'Exterior') {
                document.getElementById('inputsExterior').style.display = 'block';
                document.getElementById('inputsPalier').style.display = 'none';
                document.getElementById('inputsDomicilio').style.display = 'none';
            } else if (seleccion === 'Palier') {
                document.getElementById('inputsExterior').style.display = 'none';
                document.getElementById('inputsPalier').style.display = 'block';
                document.getElementById('inputsDomicilio').style.display = 'none';
            } else if (seleccion === 'Domicilio') {
                document.getElementById('inputsExterior').style.display = 'none';
                document.getElementById('inputsPalier').style.display = 'none';
                document.getElementById('inputsDomicilio').style.display = 'block';
            }
        }

        function generarTexto() {
            const seleccion = document.getElementById('textoSeleccionado').value;

            if (seleccion === 'Exterior') {
                // Obtener los valores de los inputs para Exterior
                const Tecnicos = document.getElementById('Tecnicos').value;
                const Tecnicos2 = document.getElementById('Tecnicos2').value;
                const direccion = document.getElementById('direccionExterior').value;
                const pisos = document.getElementById('PisosExterior').value;
                const UF = document.getElementById('UFExterior').value;
                const NAP = document.getElementById('NAPExterior').value;
                const drop150mts = document.getElementById('drop150mtsExterior').value;
                const drop80mts = document.getElementById('drop80mtsExterior').value;
                const drop30mts = document.getElementById('drop30mtsExterior').value;
                const drop5mts = document.getElementById('drop5mtsExterior').value;
                const CDO7030 = document.getElementById('CDO7030Exterior').value;
                const CDO5050 = document.getElementById('CDO5050Exterior').value;
                const CDOTerminal = document.getElementById('CDOTerminalExterior').value;
                const tarugos = document.getElementById('tarugosExterior').value;
                const pitones = document.getElementById('pitonesExterior').value;
                const arandelas = document.getElementById('arandelasExterior').value;
                const precintos = document.getElementById('precintosExterior').value;
                const retenciones = document.getElementById('retencionesExterior').value;
 

                // Construir el texto completo para Exterior
                let textoCompleto = `${Tecnicos}/${Tecnicos2} 
[${direccion}]
P: ${pisos} UF: ${UF}
${NAP}

EXTERIOR

OBSERVACIONES
-Se agrego la/s CDO necesaria en terraza, para abastecer a todas las UF.

MATERIALES: \n`; 

                if (drop150mts !== '0') textoCompleto += '\nDROP PRECO 150MTS: ' + drop150mts;
                if (drop80mts !== '0') textoCompleto += '\nDROP PRECO 80MTS: ' + drop80mts;
                if (drop30mts !== '0') textoCompleto += '\nDROP PRECO 30MTS: ' + drop30mts;
                if (drop5mts !== '0') textoCompleto += '\nDROP PRECO 5MTS: ' + drop5mts;
                if (CDO7030 !== '0') textoCompleto += '\nCDO 70/30: ' + CDO7030;
                if (CDO5050 !== '0') textoCompleto += '\nCDO 50/50: ' + CDO5050;
                if (CDOTerminal !== '0') textoCompleto += '\nCDO TERMINAL: ' + CDOTerminal;
                if (tarugos !== '0') textoCompleto += '\nTARUGOS: ' + tarugos;
                if (pitones !== '0') textoCompleto += '\nPITONES: ' + pitones;
                if (arandelas !== '0') textoCompleto += '\nARANDELAS: ' + arandelas;
                if (precintos !== '0') textoCompleto += '\nPRECINTOS: ' + precintos;
                if (retenciones !== '0') textoCompleto += '\nRETENCIONES: ' + retenciones;

                document.getElementById('textoCompleto').innerText = textoCompleto;
            } else if (seleccion === 'Palier') {
                // Obtener los valores de los inputs para Palier
                const Tecnicos = document.getElementById('Tecnicos').value;
                 const Tecnicos2 = document.getElementById('Tecnicos2').value;
                const direccion = document.getElementById('direccionPalier').value;
                const pisos = document.getElementById('pisosPalier').value;
                const UF = document.getElementById('UFPalier').value;
                const NAP = document.getElementById('NAPPalier').value;
                const dropBullet = document.getElementById('dropBulletPalier').value;
                const retencionesPalier = document.getElementById('retencionesPalier').value;
                const miniGDO = document.getElementById('miniGDOPalier').value;
                const miniCDO7030 = document.getElementById('miniCDO7030Palier').value;
                const miniCDO5050 = document.getElementById('miniCDO5050Palier').value;
                const miniCDOTerminal = document.getElementById('miniCDOTerminalPalier').value;
                const patchcord20 = document.getElementById('patchcord20Palier').value;
                const patchcord14 = document.getElementById('patchcord14Palier').value;
                const patchcord8 = document.getElementById('patchcord8Palier').value;
                const precintosPalier = document.getElementById('precintosPalier').value;
                const nomenclado = document.getElementById('nomencladoPalier').value;
                 
                // Construir el texto completo para Palier
                let textoCompleto = `${Tecnicos}/${Tecnicos2}
[${direccion}]
P: ${pisos} UF: ${UF}
${NAP}

PALIER

OBSERVACIONES
-Se realizo armado de edificio por palier.
-POTENCIA OK

MATERIALES:`;

                if (dropBullet !== '0') textoCompleto += '\n1 DROP BULLET: ' + dropBullet;
                if (retencionesPalier !== '0') textoCompleto += '\nRETENCIONES: ' + retencionesPalier;
                if (miniGDO !== '0') textoCompleto += '\nMINI GDO: ' + miniGDO;
                if (miniCDO7030 !== '0') textoCompleto += '\nMINI CDO 70/30: ' + miniCDO7030;
                if (miniCDO5050 !== '0') textoCompleto += '\nMINI CDO 50/50: ' + miniCDO5050;
                if (miniCDOTerminal !== '0') textoCompleto += '\nMINI CDO TERMINAL: ' + miniCDOTerminal;
                if (patchcord20 !== '0') textoCompleto += '\nPATCHCORD 20MTS: ' + patchcord20;
                if (patchcord14 !== '0') textoCompleto += '\nPATCHCORD 14MTS: ' + patchcord14;
                if (patchcord8 !== '0') textoCompleto += '\nPATCHCORD 8MTS: ' + patchcord8;
                if (precintosPalier !== '0') textoCompleto += '\nPRECINTOS: ' + precintosPalier;
                if (nomenclado !== '0') textoCompleto += '\nNOMENCLADO: ' + nomenclado;

                document.getElementById('textoCompleto').innerText = textoCompleto;
            } else if (seleccion === 'Domicilio') {
                // Obtener los valores de los inputs para Domicilio
                const Tecnicos = document.getElementById('Tecnicos').value;
                const Tecnicos2 = document.getElementById('Tecnicos2').value;
                const direccion = document.getElementById('direccionDomicilio').value;
                const pisos = document.getElementById('pisosDomicilio').value;
                const UF = document.getElementById('UFDomicilio').value;
                const NAP = document.getElementById('NAPDomicilio').value;
                const drop40mts = document.getElementById('drop_40mDomicilio').value;
                const drop70mts = document.getElementById('drop_70mDomicilio').value;
                const modemONT = document.getElementById('modemONTDomicilio').value;
                const decoFull = document.getElementById('decoFullDomicilio').value;
                const conectorAPC = document.getElementById('conectorAPCDomicilio').value;
                const conector3M = document.getElementById('conector3MDomicilio').value;
                const controlRemoto = document.getElementById('controlRemotoDomicilio').value;
                const pilas = document.getElementById('pilasDomicilio').value;

                // Construir el texto completo para Domicilio
                let textoCompleto = `${Tecnicos}/${Tecnicos2}
[${direccion}]
P: ${pisos} UF: ${UF}
${NAP}

DOMICILIO

OBSERVACIONES
-Se realizo instalacion domiciliaria.
-Cliente queda con servicio.

MATERIALES:`;

                if (drop40mts !== '0') textoCompleto += '\nDROP PLANO DE 40MTS: ' + drop40mts;
                if (drop70mts !== '0') textoCompleto += '\nDROP PLANO DE 70MTS: ' + drop70mts;
                if (modemONT !== '0') textoCompleto += '\nMODEM ONT: ' + modemONT;
                if (decoFull !== '0') textoCompleto += '\nDECO FULL: ' + decoFull;
                if (conectorAPC !== '0') textoCompleto += '\nCONECTOR APC: ' + conectorAPC;
                if (conector3M !== '0') textoCompleto += '\nCONECTOR 3M: ' + conector3M;
                if (controlRemoto !== '0') textoCompleto += '\nCONTROL REMOTO: ' + controlRemoto;
                if (pilas !== '0') textoCompleto += '\nPILAS: ' + pilas;

                document.getElementById('textoCompleto').innerText = textoCompleto;
            }
        }

        function copiarTexto() {
            const textoCompleto = document.getElementById('textoCompleto');
            if (textoCompleto.innerText !== '') {
                const textarea = document.createElement('textarea');
                textarea.value = textoCompleto.innerText;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                alert('Texto copiado al portapapeles');
            } else {
                alert('Primero genera el texto antes de copiarlo');
            }
        }
    </script>
</body>
</html>