From f968167f3708fcbb54ed8ecf98921c81559bca69 Mon Sep 17 00:00:00 2001
From: Rafael Barea <rafaelbh15@hotmail.es>
Date: Mon, 14 Sep 2020 17:41:52 +0200
Subject: [PATCH] polishing the code

---
 src/App.css | 204 +++---------------------
 src/App.tsx | 436 +++++++++++++---------------------------------------
 2 files changed, 129 insertions(+), 511 deletions(-)

diff --git a/src/App.css b/src/App.css
index d687b98..824c955 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,21 +1,16 @@
 /*############            HEADER            #################*/
 /*Estilos propios*/
-h1 {
-  font-size: 100% !important;
-}
 .header1 {
   white-space: nowrap;
 }
 .header2 {
   width: 1.2em;
 }
-.header3 {
-  vertical-align: middle;
-}
-.header4 {
-  border-left: 1px solid rgb(187, 187, 187);
+.mleft {
+  margin-right: 5px;
 }
 .header5 {
+  border-left: 1px solid rgb(187, 187, 187);
   color: rgb(118, 118, 118);
 }
 /*Estilos viejos*/
@@ -27,28 +22,10 @@ h1 {
   margin: 0px;
 }
 
-html {
-  height: 100%;
-  overflow: auto;
-}
-
 fieldset,
 img {
   border: none;
 }
-ul,
-li {
-  list-style: none;
-}
-.ftl {
-  float: left;
-}
-.ftr {
-  float: right;
-}
-hr {
-  display: none;
-}
 
 body {
   background: #ffffff;
@@ -63,20 +40,12 @@ body {
 
 #contenedor {
   text-align: left;
-
   padding: 0em;
   width: 70%;
   align-content: center;
   margin-left: 15%;
 }
 
-#cabecera {
-  margin: 0;
-  padding: 0;
-  position: relative;
-  height: inherit;
-  background-color: #ffffff;
-}
 #cabecera .central {
   background-color: #ebebeb;
 }
@@ -94,20 +63,6 @@ body {
   height: 10em;
 }
 
-.cabLogo img {
-  margin: 0;
-}
-
-img {
-  margin-right: 0.5em;
-}
-
-.margenContenidos {
-  background-color: white;
-  margin-top: 0;
-  display: block;
-}
-
 .saltoContenido {
   padding-left: 0.5em;
   color: #5c6d8d;
@@ -117,120 +72,17 @@ img {
   font-size: 1.05em;
 }
 
-.goog-te-banner-frame.skiptranslate {
-  display: none !important;
-}
-.goog-te-gadget {
-}
 .goog-te-gadget-simple {
   background-color: #fff;
-border-left: 1px solid #d5d5d5;
-border-top: 1px solid #9b9b9b;
-border-bottom: 1px solid #e8e8e8;
-border-right: 1px solid #d5d5d5;
-font-size: 10pt;
-display: inline-block;
-padding-top: 1px;
-padding-bottom: 2px;
-cursor: pointer;
-}
-.goog-te-gadget-icon {
-}
-.goog-te-menu-value {
-}
-
-/*MEDIA*/
-@media only screen and (max-width: 967px) {
-  .campoInformacion50 {
-    width: 93%;
-    padding-left: 4%;
-  }
-
-  .saltoContenido {
-    display: none;
-  }
-
-  .anchopaso1 {
-    width: 100%;
-  }
-
-  .campoLargo {
-    box-sizing: border-box;
-    padding-top: 1.5em;
-    padding-bottom: 0.5em;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-    height: auto;
-    width: 85%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .campoLargoSolicitar {
-    margin: 1em 7.5%;
-  }
-
-  .solExpA {
-    display: none !important;
-  }
-
-  .solInvExpA {
-    display: block !important;
-  }
-
-  .buscIntCamposLinea .explicacionCortaEnvioMensaje {
-    display: none;
-  }
-
-  /*.cuadroBlanco62por, .cuadroBlanco62porMain{padding: 1em;display: block;margin: 1em 7.5%;width: 85%;box-sizing: border-box;}*/
-  .cuadroBlanco62por,
-  .cuadroBlanco62porMain {
-    /* padding: 1em; */
-    display: block;
-    margin: 0 7.5% 1em 7.5%;
-    width: 85%;
-    box-sizing: border-box;
-  }
-
-  .cuadroBlanco98por,
-  .cuadroBlanco98porMain {
-    /* padding: 1em; */
-    display: block;
-    margin: 0 7.5% 1em 7.5%;
-    width: 85%;
-    box-sizing: border-box;
-  }
-
-  .btnContinuarFomulario input[type="submit"],
-  .btnContinuarFomulario input[type="reset"] {
-    float: none;
-  }
-
-  .msgExplicacionResumen {
-    float: left;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-    width: auto;
-  }
-
-  .explicacionCorta .explicacionCortaExplicacion {
-    display: none;
-  }
-
-  .ui-datepicker-trigger {
-    display: none !important;
-  }
-
-  .aclaracionFormatoFecha {
-    display: inline !important;
-  }
-
-  .botoneraLEConsulta {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: center;
-  }
+  border-left: 1px solid #d5d5d5;
+  border-top: 1px solid #9b9b9b;
+  border-bottom: 1px solid #e8e8e8;
+  border-right: 1px solid #d5d5d5;
+  font-size: 10pt;
+  display: inline-block;
+  padding-top: 1px;
+  padding-bottom: 2px;
+  cursor: pointer;
 }
 
 /*############            CENTRAL            #################*/
@@ -277,9 +129,8 @@ cursor: pointer;
   max-width: 430px;
 }
 .letraBlancaBold {
-  font-weight: bold;
-  color: #ffffff;
-  background-color: transparent;
+  color: white;
+  font-size: 100% !important;
 }
 .buscIntCabTextoHelp {
   width: auto;
@@ -317,7 +168,6 @@ cursor: pointer;
 }
 .saltobr {
   height: 0.2em;
-  display: block;
   clear: both;
   width: 100%;
   float: none !important;
@@ -368,35 +218,29 @@ input[type="text"] {
 }
 .buscIntCamposBuscar {
   padding: 0.5em 1em 0.2em 0;
-  float: right;
   width: 80%;
   height: auto;
   text-align: right;
   display: flex;
   justify-content: flex-end;
-}
-.buscIntCamposBuscar .botonSINimgen,
-.centradoBotonesFin .botonSINimgen {
   float: right;
 }
 .botonSINimgen {
   border-top-width: 0px;
-  margin-top: 5px;
   border-left-width: 0px;
+  border-bottom-width: 0px;
+  border-right-width: 0px;
+
+  float: right;
   font-size: 1em;
   background-image: url("./assets/img/bot_n.gif");
-  border-bottom-width: 0px;
   width: 86px !important;
   cursor: pointer !important;
   color: white;
   height: 21px;
   background-color: transparent;
-  text-align: center;
-  border-right-width: 0px;
   margin-right: 0.5em;
   padding-top: 2px;
-  float: right;
-  background-repeat: no-repeat;
 }
 
 .margin {
@@ -414,12 +258,9 @@ input[type="text"] {
 
 .small-box {
   flex: 0 0 24%;
-  -ms-flex: 0 0 20%;
   margin: 0 1% 1em 0;
   display: flex;
   align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   margin-left: 5%;
   border: 7px solid #f3f3f3;
   padding: 1em;
@@ -430,7 +271,6 @@ input[type="text"] {
 }
 
 .procedure-link {
-  max-width: 175px;
   color: #125d82 !important;
 }
 .link {
@@ -442,13 +282,11 @@ input[type="text"] {
 .carousel {
   margin-top: 2em;
   margin-bottom: 20px;
-  line-height: 1;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
 }
 .carousel-inner {
-  overflow: hidden;
   width: 100%;
 }
 .flex {
@@ -479,6 +317,6 @@ input[type="text"] {
 .marginright10 {
   margin-right: 10px;
 }
-.colorBlack{
-  color:black !important;
-}
\ No newline at end of file
+.colorBlack {
+  color: black !important;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 9d1e4c5..48d206f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,15 +5,14 @@ import alta from "./assets/img/alta-vehiculo.png";
 import pago from "./assets/img/pagodemultas.png";
 import pago2 from "./assets/img/pagoydevoluciontasas.png";
 import permiso from "./assets/img/permisoxpuntos.png";
-import dot from "./assets/img/g.png"
+import dot from "./assets/img/g.png";
 
 function App() {
   return (
     <div id="contenedor" className="whole">
       <div id="cabecera">
-        <div id="j_id5" className="central central-borde">
+        <div className="central central-borde">
           <a
-            id="saltocontenido"
             href="https://sedeapl.dgt.gob.es:7443/WEB_NCIT_CONSULTA/solicitarCitaPaso1.faces#contenidos"
             title="Salto a contenido"
             className="saltoContenido"
@@ -21,67 +20,37 @@ function App() {
             Salto a contenido
           </a>
         </div>
-        <div id="j_id7" className="central">
-          <div id="j_id8" className="cabLogo"></div>
-          <div id="j_id9" className="central-traducciones">
-            <div id="google_translate_element">
-              <div className="skiptranslate goog-te-gadget" dir="ltr">
-                <div
-                  id=":0.targetLanguage"
-                  className="goog-te-gadget-simple header1"
-                >
-                  <img
-                    src={dot}
-                    className="goog-te-gadget-icon header2"
-                    alt=""
-                  />
-                  <span className="header3">
-                    <a
-                      aria-haspopup="true"
-                      className="goog-te-menu-value"
-                    >
-                      <span>Seleccionar idioma</span>
-                      <img
-                        src="./Solicitar Cita Paso2_files/cleardot.gif"
-                        width="1"
-                        height="1"
-                        alt=""
-                      />
-                      <span className="header4">​</span>
-                      <img
-                        src="./Solicitar Cita Paso2_files/cleardot.gif"
-                        width="1"
-                        height="1"
-                        alt=""
-                      />
-                      <span aria-hidden="true" className="header5">
-                        ▼
-                      </span>
-                    </a>
-                  </span>
-                </div>
-              </div>
+        <div className="central">
+          <div className="cabLogo"></div>
+          <div className="central-traducciones">
+            <div className="goog-te-gadget-simple header1">
+              <img src={dot} className="header2" alt="" />
+              <span className="mleft">Seleccionar idioma</span>
+              <span aria-hidden="true" className="header5">
+                ▼
+              </span>
             </div>
           </div>
         </div>
       </div>
 
-      <div id="j_id11" className="central">
-        <div id="j_id12" className="margenContenidos">
-          <div id="j_id13" className="separacion10em"></div>
-          <div id="j_id14">
-            <div id="j_id23">
-              <div id="j_id24" className="buscIntCab">
-                <div id="j_id25" className="buscIntCabTexto">
-                  <h1 id="j_id26" className="letraBlancaBold">
+      <div className="central">
+        <div className="margenContenidos">
+          <div className="separacion10em"></div>
+          <div>
+            <div>
+              <div className="buscIntCab">
+                <div className="buscIntCabTexto">
+                  <h1 className="letraBlancaBold">
                     CITA PREVIA PARA TRÁMITE DE CONDUCTORES / VEHÍCULOS
                   </h1>
                 </div>
-                <div id="j_id28" className="buscIntCabTextoHelp">
+                <div className="buscIntCabTextoHelp">
                   <a
                     href="https://sedeapl.dgt.gob.es/NCIT_INTER/ayuda/index_es.html"
                     title="Ayuda en ventana nueva"
                     target="_blank"
+                    rel="noopener noreferrer"
                   >
                     <img
                       src={help}
@@ -92,287 +61,155 @@ function App() {
                 </div>
               </div>
               <form
-                id="publicacionesForm"
-                name="publicacionesForm"
                 method="post"
                 action="https://sedeapl.dgt.gob.es:7443/WEB_NCIT_CONSULTA/solicitarCitaPaso2.faces"
               >
-                <input
-                  type="hidden"
-                  name="publicacionesForm"
-                  value="publicacionesForm"
-                />
-                <div
-                  id="publicacionesForm:content"
-                  className="buscIntCamposEv2 buscIntCamposEvPub"
-                >
-                  <fieldset
-                    id="publicacionesForm:j_id32"
-                    className="buscIntCamposLinea"
-                  >
-                    <div
-                      id="publicacionesForm:j_id36"
-                      className="cuadroBlanco98por cuadroBlanco98porMain sinBorde"
-                    >
-                      <strong id="publicacionesForm:j_id37"> Sevilla</strong>
-                      <div
-                        id="publicacionesForm:j_id39"
-                        className="saltobr"
-                      ></div>
+                <div className="buscIntCamposEv2 buscIntCamposEvPub">
+                  <fieldset className="buscIntCamposLinea">
+                    <div className="cuadroBlanco98por cuadroBlanco98porMain sinBorde">
+                      <strong> Sevilla</strong>
+                      <div className="saltobr"></div>
                     </div>
-                    <div
-                      id="publicacionesForm:j_id55"
-                      className="cuadroBlanco98por cuadroBlanco98porMain sinBorde"
-                    >
-                      <strong id="publicacionesForm:j_id56">
-                        Datos del interesado
-                      </strong>
+                    <div className="cuadroBlanco98por cuadroBlanco98porMain sinBorde">
+                      <strong>Datos del interesado</strong>
                     </div>
-                    <div
-                      id="publicacionesForm:j_id58"
-                      className="cuadroBlanco98por cuadroBlanco98porPaso2"
-                    >
-                      <div
-                        id="publicacionesForm:j_id59"
-                        className="campoNombre"
-                      >
-                        <strong id="publicacionesForm:j_id60">
+                    <div className="cuadroBlanco98por cuadroBlanco98porPaso2">
+                      <div className="campoNombre">
+                        <strong>
                           <label>NIF/NIE (*)</label>
                         </strong>
                         <input
-                          id="publicacionesForm:NIFNIERDO"
                           type="text"
-                          name="publicacionesForm:NIFNIERDO"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
-                      <div
-                        id="publicacionesForm:j_id65"
-                        className="separacion1em"
-                      ></div>
-                      <div
-                        id="publicacionesForm:j_id66"
-                        className="campoNombre"
-                      >
-                        <strong id="publicacionesForm:j_id67">
+                      <div className="separacion1em"></div>
+                      <div className="campoNombre">
+                        <strong>
                           <label>Nombre</label>
                         </strong>
                         <input
-                          id="publicacionesForm:nombreRDO1"
                           type="text"
-                          name="publicacionesForm:nombreRDO1"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
-                      <div
-                        id="publicacionesForm:j_id72"
-                        className="campoApellidos"
-                      >
-                        <strong id="publicacionesForm:j_id73">
+                      <div className="campoApellidos">
+                        <strong>
                           <label>Primer apellido</label>
                         </strong>
                         <input
-                          id="publicacionesForm:ape1RDO1"
                           type="text"
-                          name="publicacionesForm:ape1RDO1"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
-                      <div
-                        id="publicacionesForm:j_id78"
-                        className="campoApellidos"
-                      >
-                        <strong id="publicacionesForm:j_id79">
+                      <div className="campoApellidos">
+                        <strong>
                           <label>Segundo apellido</label>
                         </strong>
                         <input
-                          id="publicacionesForm:ape2RDO"
                           type="text"
-                          name="publicacionesForm:ape2RDO"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
 
-                      <div
-                        id="publicacionesForm:j_id95"
-                        className="separacion1em"
-                      ></div>
-                      <div
-                        id="publicacionesForm:j_id101"
-                        className="campoApellidos"
-                      >
-                        <div
-                          id="publicacionesForm:j_id102"
-                          className="saltobr"
-                        ></div>
-                        <strong id="publicacionesForm:j_id103">
+                      <div className="separacion1em"></div>
+                      <div className="campoApellidos">
+                        <div className="saltobr"></div>
+                        <strong>
                           <label>Correo electrónico (*)</label>
                         </strong>
-                        <div
-                          id="publicacionesForm:j_id105"
-                          className="saltobr"
-                        ></div>
+                        <div className="saltobr"></div>
                         <input
-                          id="publicacionesForm:emailRDO"
                           type="text"
-                          name="publicacionesForm:emailRDO"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
                     </div>
-                    <div
-                      id="publicacionesForm:j_id1958"
-                      className="cuadroBlanco98por cuadroBlanco98porMain sinBorde"
-                    >
-                      <strong id="publicacionesForm:j_id1959">
-                        Datos del representante
-                      </strong>
+                    <div className="cuadroBlanco98por cuadroBlanco98porMain sinBorde">
+                      <strong>Datos del representante</strong>
                     </div>
-                    <div
-                      id="publicacionesForm:j_id1961"
-                      className="cuadroBlanco98por cuadroBlanco98porPaso2"
-                    >
-                      <div
-                        id="publicacionesForm:j_id1962"
-                        className="campoNombre"
-                      >
-                        <strong id="publicacionesForm:j_id1963">
+                    <div className="cuadroBlanco98por cuadroBlanco98porPaso2">
+                      <div className="campoNombre">
+                        <strong>
                           <label>NIF/NIE</label>
                         </strong>
                         <input
-                          id="publicacionesForm:NIFNIERNTE"
                           type="text"
-                          name="publicacionesForm:NIFNIERNTE"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
-                      <div
-                        id="publicacionesForm:j_id1969"
-                        className="separacion1em"
-                      ></div>
-                      <div
-                        id="publicacionesForm:j_id1970"
-                        className="campoNombre"
-                      >
-                        <strong id="publicacionesForm:j_id1971">
+                      <div className="separacion1em"></div>
+                      <div className="campoNombre">
+                        <strong>
                           <label>Nombre</label>
                         </strong>
                         <input
-                          id="publicacionesForm:nombreRNTE"
                           type="text"
-                          name="publicacionesForm:nombreRNTE"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
-                      <div
-                        id="publicacionesForm:j_id1977"
-                        className="campoApellidos"
-                      >
-                        <strong id="publicacionesForm:j_id1978">
+                      <div className="campoApellidos">
+                        <strong>
                           <label>Primer apellido</label>
                         </strong>
                         <input
-                          id="publicacionesForm:ape1RNTE"
                           type="text"
-                          name="publicacionesForm:ape1RNTE"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
-                      <div
-                        id="publicacionesForm:j_id1984"
-                        className="campoApellidos"
-                      >
-                        <strong id="publicacionesForm:j_id1985">
+                      <div className="campoApellidos">
+                        <strong>
                           <label>Segundo apellido</label>
                         </strong>
                         <input
-                          id="publicacionesForm:ape2RNTE"
                           type="text"
-                          name="publicacionesForm:ape2RNTE"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
-                      <div
-                        id="publicacionesForm:j_id1992"
-                        className="separacion1em"
-                      ></div>
-                      <div
-                        id="publicacionesForm:j_id1998"
-                        className="campoApellidos"
-                      >
-                        <div
-                          id="publicacionesForm:j_id1999"
-                          className="saltobr"
-                        ></div>
-                        <strong id="publicacionesForm:j_id2000">
+                      <div className="separacion1em"></div>
+                      <div className="campoApellidos">
+                        <div className="saltobr"></div>
+                        <strong>
                           <label>Correo electrónico</label>
                         </strong>
-                        <div
-                          id="publicacionesForm:j_id2002"
-                          className="saltobr"
-                        ></div>
+                        <div className="saltobr"></div>
                         <input
-                          id="publicacionesForm:emailRNTE"
                           type="text"
-                          name="publicacionesForm:emailRNTE"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
                     </div>
-                    <div
-                      id="publicacionesForm:j_id2003"
-                      className="cuadroBlanco98por cuadroBlanco98porMain sinBorde"
-                    >
-                      <strong id="publicacionesForm:j_id2004">
-                        Otros datos
-                      </strong>
+                    <div className="cuadroBlanco98por cuadroBlanco98porMain sinBorde">
+                      <strong>Otros datos</strong>
                     </div>
-                    <div
-                      id="publicacionesForm:j_id2006"
-                      className="cuadroBlanco98por cuadroBlanco98porPaso2 margin"
-                    >
-                      <div
-                        id="publicacionesForm:j_id2007"
-                        className="campoApellidos"
-                      >
-                        <strong id="publicacionesForm:j_id2008">
+                    <div className="cuadroBlanco98por cuadroBlanco98porPaso2 margin">
+                      <div className="campoApellidos">
+                        <strong>
                           <label>Tel. contacto</label>
                         </strong>
                         <input
-                          id="publicacionesForm:telcto"
                           type="text"
-                          name="publicacionesForm:telcto"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
-                      <div
-                        id="publicacionesForm:j_id2010"
-                        className="campoApellidos"
-                      >
-                        <strong id="publicacionesForm:j_id2011">
+                      <div className="campoApellidos">
+                        <strong>
                           <label>Nº expediente</label>
                         </strong>
                         <input
-                          id="publicacionesForm:expediente"
                           type="text"
-                          name="publicacionesForm:expediente"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
-                      <div
-                        id="publicacionesForm:j_id2013"
-                        className="campoNombre"
-                      >
-                        <strong id="publicacionesForm:j_id2014">
+                      <div className="campoNombre">
+                        <strong>
                           <label>
                             Matrícula o últimos 6<br />
                             dígitos del bastidor
                           </label>
                         </strong>
                         <input
-                          id="publicacionesForm:matricula"
                           type="text"
-                          name="publicacionesForm:matricula"
                           className="buscIntCamposEvProvInput2"
                         />
                       </div>
@@ -380,102 +217,60 @@ function App() {
                   </fieldset>
                 </div>
 
-                <div
-                  id="publicacionesForm:j_id2016"
-                  className="buscIntCamposGral"
-                >
-                  <div
-                    id="publicacionesForm:j_id2017"
-                    className="buscIntCamposBuscar"
-                  >
-                    <div
-                      id="publicacionesForm:j_id2018"
-                      className="btnContinuarFomulario               "
-                    >
+                <div className="buscIntCamposGral">
+                  <div className="buscIntCamposBuscar">
+                    <div>
                       <input
                         type="submit"
-                        name="publicacionesForm:j_id2019"
-                        value="Solicitar"
                         title="Solicitar"
                         className="botonSINimgen"
                       />
                     </div>
-                    <div
-                      id="publicacionesForm:j_id2020"
-                      className="btnContinuarFomulario"
-                    >
+                    <div>
                       <input
                         type="reset"
-                        name="publicacionesForm:j_id2021"
-                        value="Limpiar"
                         title="Limpiar"
                         className="botonSINimgen"
                       />
                     </div>
-                    <div
-                      id="publicacionesForm:j_id2022"
-                      className="btnContinuarFomulario"
-                    >
+                    <div>
                       <input
                         type="submit"
-                        name="publicacionesForm:j_id2023"
-                        value="Cancelar"
                         title="Cancelar"
                         className="botonSINimgen"
                       />
                     </div>
                   </div>
-                  <div
-                    id="publicacionesForm:j_id2024"
-                    className="separacion7em"
-                  ></div>
+                  <div className="separacion7em"></div>
                 </div>
-                <div
-                  id="publicacionesForm:j_id2036"
-                  className="separacion5em"
-                ></div>
-                <div id="publicacionesForm:mensajeserror"></div>
-                <input type="hidden" name="javax.faces.ViewState" />
+                <div className="separacion5em"></div>
               </form>
-              <div id="j_id2038" className="separacion5em"></div>
+              <div className="separacion5em"></div>
             </div>
-            <div id="myCarouselInferior" className="carousel">
-            <a
-                id="anguloIzquierdo"
+            <div className="carousel">
+              <a
                 className="left carousel-control"
                 href="https://sedeapl.dgt.gob.es:7443/WEB_NCIT_CONSULTA/solicitarCitaPaso1.faces#myCarouselInferior"
                 data-slide="prev"
               >
-                <svg
-                  className="svg-inline--fa fa-angle-left fa-w-8"
-                  aria-hidden="true"
-                  focusable="false"
-                  data-prefix="fa"
-                  data-icon="angle-left"
-                  role="img"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 256 512"
-                  data-fa-i2svg=""
-                >
+                <svg viewBox="0 0 256 512">
                   <path
                     fill="currentColor"
                     d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
                   ></path>
                 </svg>
               </a>
-              <div id="j_id2039:0:j_id2040" className="carousel-inner flex">
-                <div
-                  id="j_id2039:0:j_id2041"
-                  className="col-md-3 col-sm-6 col-xs-12"
-                >
-                  <div id="j_id2039:0:j_id2042" className="small-box">
-                    <div id="j_id2039:0:j_id2043" className="procedure-image">
+              <div className="carousel-inner flex">
+                <div>
+                  <div className="small-box">
+                    <div className="procedure-image">
                       <img src={alta} alt="Alta de vehículo." />
                     </div>
-                    <div id="j_id2039:0:j_id2045" className="procedure-link">
+                    <div className="procedure-link">
                       <a
                         href="https://sede.dgt.gob.es/es/vehiculos/altas-bajas-y-rehabilitacion-de-vehiculos/index.shtml"
                         target="_blank"
+                        rel="noopener noreferrer"
                         title="Acceder a Alta de vehículo."
                         className="link"
                       >
@@ -484,18 +279,16 @@ function App() {
                     </div>
                   </div>
                 </div>
-                <div
-                  id="j_id2039:1:j_id2041"
-                  className="col-md-3 col-sm-6 col-xs-12"
-                >
-                  <div id="j_id2039:1:j_id2042" className="small-box">
-                    <div id="j_id2039:1:j_id2043" className="procedure-image">
+                <div className="col-md-3 col-sm-6 col-xs-12">
+                  <div className="small-box">
+                    <div className="procedure-image">
                       <img src={pago} alt="Pago de multas." />
                     </div>
-                    <div id="j_id2039:1:j_id2045" className="procedure-link">
+                    <div className="procedure-link">
                       <a
                         href="https://sede.dgt.gob.es/es/multas/paga-tu-multa/index.shtml"
                         target="_blank"
+                        rel="noopener noreferrer"
                         title="Acceder a Pago de multas."
                         className="link"
                       >
@@ -504,18 +297,16 @@ function App() {
                     </div>
                   </div>
                 </div>
-                <div
-                  id="j_id2039:2:j_id2041"
-                  className="col-md-3 col-sm-6 col-xs-12"
-                >
-                  <div id="j_id2039:2:j_id2042" className="small-box">
-                    <div id="j_id2039:2:j_id2043" className="procedure-image">
+                <div>
+                  <div className="small-box">
+                    <div className="procedure-image">
                       <img src={pago2} alt="Pago y devolución de tasas." />
                     </div>
-                    <div id="j_id2039:2:j_id2045" className="procedure-link">
+                    <div className="procedure-link">
                       <a
                         href="https://sede.dgt.gob.es/es/otros-tramites/pago-de-tasas/"
                         target="_blank"
+                        rel="noopener noreferrer"
                         title="Acceder a Pago y devolución de tasas."
                         className="link"
                       >
@@ -524,18 +315,16 @@ function App() {
                     </div>
                   </div>
                 </div>
-                <div
-                  id="j_id2039:3:j_id2041"
-                  className="col-md-3 col-sm-6 col-xs-12"
-                >
-                  <div id="j_id2039:3:j_id2042" className="small-box">
-                    <div id="j_id2039:3:j_id2043" className="procedure-image">
+                <div>
+                  <div className="small-box">
+                    <div className="procedure-image">
                       <img src={permiso} alt="Permiso por puntos." />
                     </div>
-                    <div id="j_id2039:3:j_id2045" className="procedure-link">
+                    <div className="procedure-link">
                       <a
                         href="https://sede.dgt.gob.es/es/permisos-de-conducir/consulta-tus-puntos/index.shtml"
                         target="_blank"
+                        rel="noopener noreferrer"
                         title="Acceder a Permiso por puntos."
                         className="link"
                       >
@@ -545,24 +334,13 @@ function App() {
                   </div>
                 </div>
               </div>
-              
+
               <a
-                id="anguloDerecho"
                 className="right carousel-control"
                 href="https://sedeapl.dgt.gob.es:7443/WEB_NCIT_CONSULTA/solicitarCitaPaso1.faces#myCarouselInferior"
                 data-slide="next"
               >
-                <svg
-                  className="svg-inline--fa fa-angle-right fa-w-8"
-                  aria-hidden="true"
-                  focusable="false"
-                  data-prefix="fa"
-                  data-icon="angle-right"
-                  role="img"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 256 512"
-                  data-fa-i2svg=""
-                >
+                <svg viewBox="0 0 256 512">
                   <path
                     fill="currentColor"
                     d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -574,13 +352,14 @@ function App() {
         </div>
       </div>
 
-      <div id="j_id2050" className="separacion5em"></div>
-      <div id="j_id2051" className="pie">
-        <div id="j_id2052" className="central">
+      <div className="separacion5em"></div>
+      <div className="pie">
+        <div className="central">
           <a
             href="https://sedeapl.dgt.gob.es/NCIT_INTER/ayuda/avisoLegal_es.html"
             title="Aviso legal, en nueva ventana."
             target="_blank"
+            rel="noopener noreferrer"
             className="colorBlack"
           >
             Aviso legal
@@ -590,6 +369,7 @@ function App() {
             href="https://sedeapl.dgt.gob.es/NCIT_INTER/ayuda/accesibilidad_es.html"
             title="Accesibilidad, en nueva ventana."
             target="_blank"
+            rel="noopener noreferrer"
             className="marginright10 colorBlack"
           >
             Accesibilidad