From 7db758690ca918bb211fec184d05958bccee94ec Mon Sep 17 00:00:00 2001
From: JuanSanhueza <juan.sanhueza@valposystems.com>
Date: Fri, 2 May 2025 14:59:02 -0400
Subject: [PATCH] Color de fondo de tablas

---
 .../components/navbar/navbar.component.html   |  2 +-
 .../actualizacion-pd.component.html           | 36 +++++------
 .../actualizacion-pd.component.scss           |  5 --
 .../pages/ajuste-pd/ajuste-pd.component.html  | 50 +++++++--------
 .../pages/ajuste-pd/ajuste-pd.component.scss  |  5 --
 .../concesiones/concesiones.component.html    | 12 ++--
 src/app/pages/resumen/resumen.component.html  | 14 ++--
 .../unidad-informacion.component.html         | 28 ++++----
 src/styles.scss                               | 64 ++++++++++++++++++-
 9 files changed, 133 insertions(+), 83 deletions(-)

diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 904f4bc..d619622 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -22,7 +22,7 @@
 <div class="page-header">
   <div class="page-title">{{ pageTitle }}</div>
   <div class="breadcrumb-container">
-    <a routerLink="/dashboard" class="breadcrumb-link">Home</a>
+    <a routerLink="/dashboard" class="breadcrumb-link">Inicio</a>
     <span class="breadcrumb-separator">/</span>
     <span class="breadcrumb-current">{{ pageTitle }}</span>
   </div>
diff --git a/src/app/pages/actualizacion-pd/actualizacion-pd.component.html b/src/app/pages/actualizacion-pd/actualizacion-pd.component.html
index 90fa1d0..98586e7 100644
--- a/src/app/pages/actualizacion-pd/actualizacion-pd.component.html
+++ b/src/app/pages/actualizacion-pd/actualizacion-pd.component.html
@@ -1,20 +1,20 @@
 <div class="p-3 text-white">
   <div class="flex justify-content-center flex-wrap">
     <div class="flex align-items-center justify-content-center  px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Resumen</div>
-    <div class="flex align-items-center justify-content-center  px-5 py-3 bg-blue-400 font-bold border-round my-1 mr-2">Revisión de actualizaciones de PD</div>
+    <div class="flex align-items-center justify-content-center  px-5 py-3 tablaAzul font-bold border-round my-1 mr-2">Revisión de actualizaciones de PD</div>
     <div class="flex align-items-center justify-content-center  px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Revision de ajustes de PD</div>
   </div>
 
 
 
   <div class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1">
-    <div class="col-12 md:col-3 lg:col-2 bg-blue-400 border-round ">
+    <div class="col-12 md:col-3 lg:col-2 tablaAzul border-round ">
         <div class="border-round font-bold ">
           <div class="h-4rem">Filtro Empresa</div>
           <p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
         </div>
     </div>
-    <div class="col-12 md:col-3 lg:col-2 bg-blue-400 border-round">
+    <div class="col-12 md:col-3 lg:col-2 tablaAzul border-round">
         <div class="border-round font-bold">
           <div class="h-4rem">Filtro Código Cronograma</div>
           <p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
@@ -23,7 +23,7 @@
   </div>
 <!-- Tabla1 -->
 <div class="font-bold my-2 tituloTabla">Título de la tabla:</div>
-  <p-table class="mi-tabla-redondeada"
+  <p-table  id="azul"
     [value]="products" stripedRows
     showGridlines
     [paginator]="true"
@@ -33,18 +33,18 @@
     [rowsPerPageOptions]="[5, 10, 20]">
         <ng-template #header>
             <tr>
-                <th class="bg-blue-400 font-bold text-white">Empresa</th>
-                <th class="bg-blue-400 font-bold text-white">Código de cronograma</th>
-                <th class="bg-blue-400 font-bold text-white">Etapa del Servicio</th>
-                <th class="bg-blue-400 font-bold text-white">Nombre sistema</th>
-                <th class="bg-blue-400 font-bold text-white">Tipo de inversión</th>
-                <th class="bg-blue-400 font-bold text-white">Código de glosa PD</th>
-                <th class="bg-blue-400 font-bold text-white">Descripción glosa</th>
-                <th class="bg-blue-400 font-bold text-white">Monto Inversión Total (UF)</th>
-                <th class="bg-blue-400 font-bold text-white">Año de Inicio</th>
-                <th class="bg-blue-400 font-bold text-white">Año de Término</th>
-                <th class="bg-blue-400 font-bold text-white">Mes de Término</th>
-                <th class="bg-blue-400 font-bold text-white">Nota</th>
+                <th class="tablaAzul font-bold text-white">Empresa</th>
+                <th class="tablaAzul font-bold text-white">Código de cronograma</th>
+                <th class="tablaAzul font-bold text-white">Etapa del Servicio</th>
+                <th class="tablaAzul font-bold text-white">Nombre sistema</th>
+                <th class="tablaAzul font-bold text-white">Tipo de inversión</th>
+                <th class="tablaAzul font-bold text-white">Código de glosa PD</th>
+                <th class="tablaAzul font-bold text-white">Descripción glosa</th>
+                <th class="tablaAzul font-bold text-white">Monto Inversión Total (UF)</th>
+                <th class="tablaAzul font-bold text-white">Año de Inicio</th>
+                <th class="tablaAzul font-bold text-white">Año de Término</th>
+                <th class="tablaAzul font-bold text-white">Mes de Término</th>
+                <th class="tablaAzul font-bold text-white">Nota</th>
                 <th class="bg-green-400 font-bold text-white">Estado aprobación</th>
                 <th class="bg-green-400 font-bold text-white">Observación</th>
             </tr>
@@ -63,12 +63,12 @@
                 <td>{{ product.dato10 }}</td>
                 <td>{{ product.dato11 }}</td>
                 <td>{{ product.dato12 }}</td>
-                <td>
+                <td class="bg-verde">
                   <div class="border-round font-bold">
                     <p-select [options]="estadoAprobacion" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
                   </div>
                 </td>
-                <td>
+                <td class="bg-verde">
                   <input
                   type="analista"
                   pInputText
diff --git a/src/app/pages/actualizacion-pd/actualizacion-pd.component.scss b/src/app/pages/actualizacion-pd/actualizacion-pd.component.scss
index b645d5d..e69de29 100644
--- a/src/app/pages/actualizacion-pd/actualizacion-pd.component.scss
+++ b/src/app/pages/actualizacion-pd/actualizacion-pd.component.scss
@@ -1,5 +0,0 @@
-::v-deep(.mi-tabla-redondeada .p-datatable-wrapper) {
-  border-radius: 12px;
-  border: 1px solid var(--surface-border);
-  overflow: hidden;
-}
diff --git a/src/app/pages/ajuste-pd/ajuste-pd.component.html b/src/app/pages/ajuste-pd/ajuste-pd.component.html
index 3eee7ab..23e5fe2 100644
--- a/src/app/pages/ajuste-pd/ajuste-pd.component.html
+++ b/src/app/pages/ajuste-pd/ajuste-pd.component.html
@@ -2,19 +2,19 @@
   <div class="flex justify-content-center flex-wrap">
     <div class="flex align-items-center justify-content-center  px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Resumen</div>
     <div class="flex align-items-center justify-content-center  px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Revisión de actualizaciones de PD</div>
-    <div class="flex align-items-center justify-content-center  px-5 py-3 bg-blue-400 font-bold border-round my-1 mr-2">Revision de ajustes de PD</div>
+    <div class="flex align-items-center justify-content-center  px-5 py-3 tablaAzul font-bold border-round my-1 mr-2">Revision de ajustes de PD</div>
   </div>
 
 
 
   <div class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1">
-    <div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round ">
+    <div class="col-6 md:col-3 lg:col-2 tablaAzul border-round ">
         <div class="border-round font-bold ">
           <div class="h-4rem">Filtro Empresa</div>
           <p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
         </div>
     </div>
-    <div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round">
+    <div class="col-6 md:col-3 lg:col-2 tablaAzul border-round">
         <div class="border-round font-bold">
           <div class="h-4rem">Filtro Código Cronograma</div>
           <p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
@@ -23,7 +23,7 @@
   </div>
 <!-- Tabla1 -->
 <!-- <div class="font-bold text-black-alpha-90 my-2">Título de la tabla:</div> -->
-  <p-table class="mi-tabla-redondeada"
+  <p-table  id="azul"
     [value]="products" stripedRows
     showGridlines
     [paginator]="true"
@@ -34,28 +34,28 @@
         <ng-template #header>
           <tr>
             <th colspan="10" style="background-color: #F8F9FA;border: none;"></th>
-            <th colspan="3" class="bg-blue-400 text-white font-bold text-center">Cronograma base vigente</th>
+            <th colspan="3" class="tablaAzul text-white font-bold text-center">Cronograma base vigente</th>
             <th colspan="4" class="bg-blue-700 text-white font-bold text-center">Cronograma base ajustado</th>
         </tr>
             <tr>
-                <th class="bg-blue-400 text-white font-bold">Empresa</th>
-                <th class="bg-blue-400 text-white font-bold">Código de cronograma</th>
-                <th class="bg-blue-400 text-white font-bold">Etapa del Servicio</th>
-                <th class="bg-blue-400 text-white font-bold">Nombre sistema</th>
-                <th class="bg-blue-400 text-white font-bold">Nombre sistema</th>
-                <th class="bg-blue-400 text-white font-bold">Nombre localidad</th>
-                <th class="bg-blue-400 text-white font-bold">Tipo de inversión</th>
-                <th class="bg-blue-400 text-white font-bold">Código de glosa PD</th>
-                <th class="bg-blue-400 text-white font-bold">Descripción glosa</th>
-                <th class="bg-blue-400 text-white font-bold">Monto Inversión Total (UF)</th>
-                <th class="bg-blue-400 text-white font-bold">Año de Inicio</th>
-                <th class="bg-blue-400 text-white font-bold">Año de Término</th>
-                <th class="bg-blue-400 text-white font-bold">Mes de Término</th>
+                <th class="tablaAzul text-white font-bold">Empresa</th>
+                <th class="tablaAzul text-white font-bold">Código de cronograma</th>
+                <th class="tablaAzul text-white font-bold">Etapa del Servicio</th>
+                <th class="tablaAzul text-white font-bold">Nombre sistema</th>
+                <th class="tablaAzul text-white font-bold">Nombre sistema</th>
+                <th class="tablaAzul text-white font-bold">Nombre localidad</th>
+                <th class="tablaAzul text-white font-bold">Tipo de inversión</th>
+                <th class="tablaAzul text-white font-bold">Código de glosa PD</th>
+                <th class="tablaAzul text-white font-bold">Descripción glosa</th>
+                <th class="tablaAzul text-white font-bold">Monto Inversión Total (UF)</th>
+                <th class="tablaAzul text-white font-bold">Año de Inicio</th>
+                <th class="tablaAzul text-white font-bold">Año de Término</th>
+                <th class="tablaAzul text-white font-bold">Mes de Término</th>
                 <th class="bg-blue-700 text-white font-bold">Tipo de ajuste</th>
                 <th class="bg-blue-700 text-white font-bold">Año de Inicio</th>
                 <th class="bg-blue-700 text-white font-bold">Año de Término</th>
                 <th class="bg-blue-700 text-white font-bold">Mes de Término</th>
-                <th class="bg-blue-400 text-white font-bold">Nota</th>
+                <th class="tablaAzul text-white font-bold">Nota</th>
                 <th class="bg-green-400 text-white font-bold">Estado aprobación</th>
                 <th class="bg-green-400 text-white font-bold">Observación</th>
             </tr>
@@ -75,17 +75,17 @@
                 <td>{{ product.dato13 }}</td>
                 <td>{{ product.dato14 }}</td>
                 <td>{{ product.dato15 }}</td>
-                <td>{{ product.dato16 }}</td>
-                <td>{{ product.dato17 }}</td>
-                <td>{{ product.dato18 }}</td>
-                <td>{{ product.dato11 }}</td>
+                <td class="bg-azulFuerte">{{ product.dato16 }}</td>
+                <td class="bg-azulFuerte">{{ product.dato17 }}</td>
+                <td class="bg-azulFuerte">{{ product.dato18 }}</td>
+                <td class="bg-azulFuerte">{{ product.dato11 }}</td>
                 <td>{{ product.dato12 }}</td>
-                <td>
+                <td class="bg-verde">
                   <div class="border-round font-bold">
                     <p-select [options]="estadoAprobacion" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
                   </div>
                 </td>
-                <td>
+                <td class="bg-verde">
                   <input
                   type="analista"
                   pInputText
diff --git a/src/app/pages/ajuste-pd/ajuste-pd.component.scss b/src/app/pages/ajuste-pd/ajuste-pd.component.scss
index b645d5d..e69de29 100644
--- a/src/app/pages/ajuste-pd/ajuste-pd.component.scss
+++ b/src/app/pages/ajuste-pd/ajuste-pd.component.scss
@@ -1,5 +0,0 @@
-::v-deep(.mi-tabla-redondeada .p-datatable-wrapper) {
-  border-radius: 12px;
-  border: 1px solid var(--surface-border);
-  overflow: hidden;
-}
diff --git a/src/app/pages/concesiones/concesiones.component.html b/src/app/pages/concesiones/concesiones.component.html
index f84b2b6..fb3eb42 100644
--- a/src/app/pages/concesiones/concesiones.component.html
+++ b/src/app/pages/concesiones/concesiones.component.html
@@ -1,7 +1,7 @@
 <div class="p-3 text-white">
   <!-- Tabla1 -->
   <div class="font-bold my-2 tituloTabla">Cronogramas cargados:</div>
-  <p-table
+  <p-table id="azul"
     [value]="products" stripedRows
     showGridlines
     [paginator]="true"
@@ -27,8 +27,8 @@
                 <td>{{ product.codigoCronograma }}</td>
                 <td>{{ product.codigoCronogramaAjuste }}</td>
                 <td>{{ product.tipoCarga }}</td>
-                <td>{{ product.estadoRevision }}</td>
-                <td>
+                <td class="bg-verde">{{ product.estadoRevision }}</td>
+                <td class="bg-verde">
                   <!-- analista -->
                     <input
                     type="analista"
@@ -40,8 +40,8 @@
                     style="background-color: white; color: black;width: 228px !important;"
                   />
                 </td>
-                <td>{{ product.fechaIngreso }}</td>
-                <td>
+                <td class="bg-verde">{{ product.fechaIngreso }}</td>
+                <td class="bg-verde">
                   <!-- {{ product.semaforo }} -->
                   <div class="text-center">
                     <i class="pi pi-circle-fill" style="font-size: 24px;"
@@ -98,7 +98,7 @@
 
 <!-- Tabla2 -->
 <div class="font-bold my-2 tituloTabla">Cronogramas solicitados y pendientes de carga:</div>
-<p-table sortField="price" [sortOrder]="-1"
+<p-table id="azul" sortField="price" [sortOrder]="-1"
     [value]="products" stripedRows
     showGridlines
     [paginator]="true"
diff --git a/src/app/pages/resumen/resumen.component.html b/src/app/pages/resumen/resumen.component.html
index 8d9dab6..37d2349 100644
--- a/src/app/pages/resumen/resumen.component.html
+++ b/src/app/pages/resumen/resumen.component.html
@@ -1,12 +1,12 @@
 <div class="p-3 text-white">
   <div class="flex justify-content-center flex-wrap">
-    <div class="flex align-items-center justify-content-center  px-5 py-3 bg-blue-400 font-bold border-round my-1 mr-2">Resumen</div>
+    <div class="flex align-items-center justify-content-center  px-5 py-3 tablaAzul font-bold border-round my-1 mr-2">Resumen</div>
     <div class="flex align-items-center justify-content-center  px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Revisión de actualizaciones de PD</div>
     <div class="flex align-items-center justify-content-center  px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Revision de ajustes de PD</div>
   </div>
 <!-- Tabla1 -->
 <div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
-  <p-table class="mi-tabla-redondeada"
+  <p-table  id="verde"
     [value]="products" stripedRows
     showGridlines
     [paginator]="true"
@@ -38,7 +38,7 @@
 </p-table>
 
 <div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
-  <p-table class="mi-tabla-redondeada"
+  <p-table  id="ploma"
     [value]="products" stripedRows
     showGridlines
     [paginator]="true"
@@ -48,10 +48,10 @@
     [rowsPerPageOptions]="[5, 10, 20]">
         <ng-template #header>
             <tr>
-                <th class="surface-400 text-white font-bold">Empresa</th>
-                <th class="surface-400 text-white font-bold">Código de cronograma</th>
-                <th class="surface-400 text-white font-bold">Nombre sistema</th>
-                <th class="surface-400 text-white font-bold">Tipo</th>
+                <th class="tablaPloma text-white font-bold">Empresa</th>
+                <th class="tablaPloma text-white font-bold">Código de cronograma</th>
+                <th class="tablaPloma text-white font-bold">Nombre sistema</th>
+                <th class="tablaPloma text-white font-bold">Tipo</th>
             </tr>
         </ng-template>
         <ng-template #body let-product>
diff --git a/src/app/pages/unidad-informacion/unidad-informacion.component.html b/src/app/pages/unidad-informacion/unidad-informacion.component.html
index 62b50bf..e3c0c4d 100644
--- a/src/app/pages/unidad-informacion/unidad-informacion.component.html
+++ b/src/app/pages/unidad-informacion/unidad-informacion.component.html
@@ -1,7 +1,7 @@
 <div class="p-3 text-white">
 <!-- Tabla1 -->
 <div class="font-bold tituloTabla my-2">Cronogramas solicitados y pendientes de carga:</div>
-  <p-table class="mi-tabla-redondeada"
+  <p-table  id="azul"
     [value]="products" stripedRows
     showGridlines
     [paginator]="true"
@@ -11,12 +11,12 @@
     [rowsPerPageOptions]="[5, 10, 20]">
         <ng-template #header>
             <tr>
-                <th class="bg-blue-400 text-white font-bold">Empresa</th>
-                <th class="bg-blue-400 text-white font-bold">Código de cronograma SINAR</th>
-                <th class="bg-blue-400 text-white font-bold">Contiene obras del año</th>
-                <th class="bg-blue-400 text-white font-bold">N° Oficio que aprueba</th>
-                <th class="bg-blue-400 text-white font-bold">Tipo de carga</th>
-                <th class="bg-blue-400 text-white font-bold">Fecha de solicitud</th>
+                <th class="tablaAzul text-white font-bold">Empresa</th>
+                <th class="tablaAzul text-white font-bold">Código de cronograma SINAR</th>
+                <th class="tablaAzul text-white font-bold">Contiene obras del año</th>
+                <th class="tablaAzul text-white font-bold">N° Oficio que aprueba</th>
+                <th class="tablaAzul text-white font-bold">Tipo de carga</th>
+                <th class="tablaAzul text-white font-bold">Fecha de solicitud</th>
             </tr>
         </ng-template>
         <ng-template #body let-product>
@@ -32,7 +32,7 @@
   </p-table>
 <!-- Tabla2 -->
 <div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
-  <p-table class="mi-tabla-redondeada"
+  <p-table  id="verde"
     [value]="products" stripedRows
     showGridlines
     [paginator]="true"
@@ -61,7 +61,7 @@
 </p-table>
 <!-- Tabla3 -->
 <div class="font-bold tituloTabla my-2">Cronogramas rechazados:</div>
-  <p-table class="mi-tabla-redondeada"
+  <p-table  id="ploma"
     [value]="products" stripedRows
     showGridlines
     [paginator]="true"
@@ -71,11 +71,11 @@
     [rowsPerPageOptions]="[5, 10, 20]">
         <ng-template #header>
             <tr>
-                <th class="surface-400 text-white font-bold">Empresa</th>
-                <th class="surface-400 text-white font-bold">Código de cronograma</th>
-                <th class="surface-400 text-white font-bold">Nombre sistema</th>
-                <th class="surface-400 text-white font-bold">Tipo</th>
-                <th class="surface-400 text-white font-bold">Fecha rechazo</th>
+                <th class="tablaPloma text-white font-bold">Empresa</th>
+                <th class="tablaPloma text-white font-bold">Código de cronograma</th>
+                <th class="tablaPloma text-white font-bold">Nombre sistema</th>
+                <th class="tablaPloma text-white font-bold">Tipo</th>
+                <th class="tablaPloma text-white font-bold">Fecha rechazo</th>
             </tr>
         </ng-template>
         <ng-template #body let-product>
diff --git a/src/styles.scss b/src/styles.scss
index dbc9130..7ca5283 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -56,16 +56,76 @@
     color: white !important;
   }
 
-  .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
+  #azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
     --p-datatable-row-striped-background: #EAF3FB;
     background: var(--p-datatable-row-striped-background);
   }
 
-  .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  #azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
     --p-datatable-row-striped-background: #BCDAEF;
     background: var(--p-datatable-row-striped-background);
   }
 
+  .tablaVerde{
+    background-color: #008BC6 !important;
+    color: white !important;
+  }
+
+  #verde .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
+    --p-datatable-row-striped-background: #F5F9F5;
+    background: var(--p-datatable-row-striped-background);
+  }
+
+  #verde .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+    --p-datatable-row-striped-background: #D0E1CD;
+    background: var(--p-datatable-row-striped-background);
+  }
+
+  .tablaPloma {
+    background-color: #706f6f !important;
+    color: white !important;
+  }
+
+  #ploma .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
+    --p-datatable-row-striped-background: #E7E7E7;
+    background: var(--p-datatable-row-striped-background);
+  }
+
+  #ploma .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+    --p-datatable-row-striped-background: #CBCBCB;
+    background: var(--p-datatable-row-striped-background);
+  }
+
+  .tablaVerde {
+    background-color: #706f6f !important;
+    color: white !important;
+  }
+
+  #azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) > td.bg-verde {
+    --p-datatable-row-striped-background: #F5F9F5;
+    background: var(--p-datatable-row-striped-background);
+  }
+
+  #azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) > td.bg-verde {
+    --p-datatable-row-striped-background: #D0E1CD;
+    background: var(--p-datatable-row-striped-background);
+  }
+
+  .tablaAzulFuerte{
+    background-color: #156082 !important;
+    color: white !important;
+  }
+
+  #azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) > td.bg-azulFuerte {
+    --p-datatable-row-striped-background: #DCEAF7;
+    background: var(--p-datatable-row-striped-background);
+  }
+
+  #azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) > td.bg-azulFuerte {
+    --p-datatable-row-striped-background: #A6CAEC;
+    background: var(--p-datatable-row-striped-background);
+  }
+
   /* Para redondear esquinas de tablas */
   .p-datatable-table-container{
     border-radius: var(--p-content-border-radius) !important;