From 925caf8480c85eacc13bb02fd4df37a99725af35 Mon Sep 17 00:00:00 2001
From: JuanSanhueza <juan.sanhueza@valposystems.com>
Date: Wed, 30 Apr 2025 17:37:42 -0400
Subject: [PATCH] =?UTF-8?q?Colores,=20tipograf=C3=ADa,=20alternado=20tabla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/footer/footer.component.html   |  2 +-
 .../actualizacion-pd.component.html           | 25 ++------
 .../actualizacion-pd.component.ts             |  9 ++-
 .../pages/ajuste-pd/ajuste-pd.component.html  | 23 ++------
 .../pages/ajuste-pd/ajuste-pd.component.ts    |  9 ++-
 .../concesiones/concesiones.component.html    | 57 ++++++-------------
 .../concesiones/concesiones.component.ts      | 11 +++-
 src/app/pages/login/login.component.html      | 44 +++++++-------
 src/app/pages/login/login.component.scss      |  4 +-
 src/app/pages/resumen/resumen.component.html  |  8 +--
 .../unidad-informacion.component.html         | 12 ++--
 src/styles.scss                               | 37 +++++++++---
 12 files changed, 113 insertions(+), 128 deletions(-)

diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
index 5b702d0..01d494a 100644
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -2,7 +2,7 @@
 <footer class="footer mt-5">
     <div class="footer-content">
       <div class="footer-left">
-        <i class="pi pi-building"></i>
+        <!-- <i class="pi pi-building"></i> -->
         <div class="footer-text">
           <div>Superintendencia de Servicios Sanitarios</div>
           <div>Área de Información y Tecnologías</div>
diff --git a/src/app/pages/actualizacion-pd/actualizacion-pd.component.html b/src/app/pages/actualizacion-pd/actualizacion-pd.component.html
index 72e7e59..1212a6e 100644
--- a/src/app/pages/actualizacion-pd/actualizacion-pd.component.html
+++ b/src/app/pages/actualizacion-pd/actualizacion-pd.component.html
@@ -11,30 +11,20 @@
     <div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round ">
         <div class="border-round font-bold ">
           <div class="h-4rem">Filtro Empresa</div>
-          <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
-            <option selected>Seleccione...</option>
-            <option value="1">Opcion 1</option>
-            <option value="2">Opcion 2</option>
-            <option value="3">Opcion 3</option>
-          </select>
+          <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="border-round font-bold">
           <div class="h-4rem">Filtro Código Cronograma</div>
-            <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
-              <option selected>Seleccione...</option>
-              <option value="1">Opcion 1</option>
-              <option value="2">Opcion 2</option>
-              <option value="3">Opcion 3</option>
-            </select>
+          <p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
           </div>
     </div>
   </div>
 <!-- Tabla1 -->
-<div class="font-bold my-2 text-black-alpha-90">Título de la tabla:</div>
+<div class="font-bold my-2 tituloTabla">Título de la tabla:</div>
   <p-table class="mi-tabla-redondeada"
-    [value]="products"
+    [value]="products" stripedRows
     showGridlines>
         <ng-template #header>
             <tr>
@@ -70,12 +60,7 @@
                 <td>{{ product.dato12 }}</td>
                 <td>
                   <div class="border-round font-bold">
-                    <select id="selectContieneObras" class="w-full p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary"
-                    style="appearance: auto;background-color: white; width: 228px !important;">
-                        <option selected>Seleccione...</option>
-                        <option value="true">Aprobado</option>
-                        <option value="false">Rechazado</option>
-                    </select>
+                    <p-select [options]="estadoAprobacion" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
                   </div>
                 </td>
                 <td>
diff --git a/src/app/pages/actualizacion-pd/actualizacion-pd.component.ts b/src/app/pages/actualizacion-pd/actualizacion-pd.component.ts
index 1bce053..f342334 100644
--- a/src/app/pages/actualizacion-pd/actualizacion-pd.component.ts
+++ b/src/app/pages/actualizacion-pd/actualizacion-pd.component.ts
@@ -2,17 +2,20 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { TableModule } from 'primeng/table';
 import { InputTextModule } from 'primeng/inputtext';
+import { SelectModule } from 'primeng/select';
 
 @Component({
   selector: 'app-actualizacion-pd',
-  imports: [FormsModule, TableModule, InputTextModule],
+  imports: [FormsModule, TableModule, InputTextModule, SelectModule],
   templateUrl: './actualizacion-pd.component.html',
   styleUrl: './actualizacion-pd.component.scss'
 })
 export class ActualizacionPdComponent {
   pageTitle: string = 'Cronogramas cargados:';
-
-  estadoAprobacion: string[] = ['Rechazado', 'Aprobado'];
+  select1: any = '';
+  selectedCity: any = '';
+  empresas: any[] = [{name: 'Empresa A'}, {name: 'Empresa B'}, {name: 'Empresa C'}];
+  estadoAprobacion: any[] = [{name:'Rechazado'}, {name:'Aprobado'}];
 
   products: any[] = [
     {
diff --git a/src/app/pages/ajuste-pd/ajuste-pd.component.html b/src/app/pages/ajuste-pd/ajuste-pd.component.html
index e388488..7212bfa 100644
--- a/src/app/pages/ajuste-pd/ajuste-pd.component.html
+++ b/src/app/pages/ajuste-pd/ajuste-pd.component.html
@@ -11,30 +11,20 @@
     <div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round ">
         <div class="border-round font-bold ">
           <div class="h-4rem">Filtro Empresa</div>
-          <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
-            <option selected>Seleccione...</option>
-            <option value="1">Opcion 1</option>
-            <option value="2">Opcion 2</option>
-            <option value="3">Opcion 3</option>
-          </select>
+          <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="border-round font-bold">
           <div class="h-4rem">Filtro Código Cronograma</div>
-            <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
-              <option selected>Seleccione...</option>
-              <option value="1">Opcion 1</option>
-              <option value="2">Opcion 2</option>
-              <option value="3">Opcion 3</option>
-            </select>
+          <p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
           </div>
     </div>
   </div>
 <!-- Tabla1 -->
 <!-- <div class="font-bold text-black-alpha-90 my-2">Título de la tabla:</div> -->
   <p-table class="mi-tabla-redondeada"
-    [value]="products"
+    [value]="products" stripedRows
     showGridlines>
         <ng-template #header>
           <tr>
@@ -87,12 +77,7 @@
                 <td>{{ product.dato12 }}</td>
                 <td>
                   <div class="border-round font-bold">
-                    <select id="selectContieneObras" class="w-full p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary"
-                    style="appearance: auto;background-color: white; width: 228px !important;">
-                        <option selected>Seleccione...</option>
-                        <option value="true">Aprobado</option>
-                        <option value="false">Rechazado</option>
-                    </select>
+                    <p-select [options]="estadoAprobacion" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
                   </div>
                 </td>
                 <td>
diff --git a/src/app/pages/ajuste-pd/ajuste-pd.component.ts b/src/app/pages/ajuste-pd/ajuste-pd.component.ts
index e995f7f..5bc6924 100644
--- a/src/app/pages/ajuste-pd/ajuste-pd.component.ts
+++ b/src/app/pages/ajuste-pd/ajuste-pd.component.ts
@@ -2,14 +2,21 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { TableModule } from 'primeng/table';
 import { InputTextModule } from 'primeng/inputtext';
+import { SelectModule } from 'primeng/select';
 
 @Component({
   selector: 'app-ajuste-pd',
-  imports: [FormsModule, TableModule, InputTextModule],
+  imports: [FormsModule, TableModule, InputTextModule, SelectModule],
   templateUrl: './ajuste-pd.component.html',
   styleUrl: './ajuste-pd.component.scss'
 })
 export class AjustePdComponent {
+  selectedCity: any = '';
+  empresas: any[] = [{name: 'Empresa A'}, {name: 'Empresa B'}, {name: 'Empresa C'}];
+
+  select1: any = '';
+  estadoAprobacion: any[] = [{name:'Rechazado'}, {name:'Aprobado'}];
+
   products: any[] = [
     {
       empresa: 'Empresa A',
diff --git a/src/app/pages/concesiones/concesiones.component.html b/src/app/pages/concesiones/concesiones.component.html
index b2ebb31..716c17b 100644
--- a/src/app/pages/concesiones/concesiones.component.html
+++ b/src/app/pages/concesiones/concesiones.component.html
@@ -1,15 +1,15 @@
 <div class="p-3 text-white">
   <!-- Tabla1 -->
-  <div class="font-bold my-2 text-black-alpha-90">Cronogramas cargados:</div>
+  <div class="font-bold my-2 tituloTabla">Cronogramas cargados:</div>
   <p-table
-    [value]="products"
+    [value]="products" stripedRows
     showGridlines>
         <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">Código cronograma de ajuste</th>
-                <th class="bg-blue-400 font-bold text-white">Tipo de carga</th>
+                <th class="tablaAzul font-bold">Empresa</th>
+                <th class="tablaAzul font-bold">Código de cronograma</th>
+                <th class="tablaAzul font-bold">Código cronograma de ajuste</th>
+                <th class="tablaAzul font-bold">Tipo de carga</th>
                 <th class="bg-green-400 font-bold text-white font-bold">Estado de revisión</th>
                 <th class="bg-green-400 font-bold text-white font-bold">Analista</th>
                 <th class="bg-green-400 font-bold text-white font-bold">Fecha ingreso</th>
@@ -53,46 +53,25 @@
   <div class="col-12 md:col-6 lg:col-2">
       <div class="border-round font-bold">
         <div class="h-4rem">Filtro Empresa</div>
-        <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
-          <option selected>Seleccione...</option>
-          <option value="1">Opcion 1</option>
-          <option value="2">Opcion 2</option>
-          <option value="3">Opcion 3</option>
-        </select>
+        <p-select [options]="empresas" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
       </div>
   </div>
   <div class="col-12 md:col-6 lg:col-2">
       <div class="border-round font-bold">
         <div class="h-4rem">Filtro Código Cronograma SINAR</div>
-        <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
-          <option selected>Seleccione...</option>
-          <option value="1">Opcion 1</option>
-          <option value="2">Opcion 2</option>
-          <option value="3">Opcion 3</option>
-      </select>
+        <p-select [options]="empresas" [(ngModel)]="select2" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
       </div>
   </div>
   <div class="col-12 md:col-6 lg:col-2">
       <div class="border-round font-bold">
         <div class="h-4rem">Filtro tipo de carga</div>
-        <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
-          <option selected>Seleccione...</option>
-          <option value="actualizacion">Actualización</option>
-          <option value="nueva">Nueva</option>
-          <option value="concesion">Concesión</option>
-          <option value="ajuste">Ajuste</option>
-          <option value="ato">ATO</option>
-      </select>
+        <p-select [options]="tipoCarga" [(ngModel)]="select3" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
       </div>
   </div>
   <div class="col-12 md:col-6 lg:col-2">
       <div class="border-round font-bold">
         <div class="h-4rem">¿Contiene obras del año?</div>
-        <select id="selectContieneObras" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
-            <option selected>Seleccione...</option>
-            <option value="true">SI</option>
-            <option value="false">NO</option>
-        </select>
+        <p-select [options]="contieneObras" [(ngModel)]="select4" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
       </div>
   </div>
   <div class="col-12 md:col-12 lg:col-2">
@@ -115,18 +94,18 @@
 </div>
 
 <!-- Tabla2 -->
-<div class="font-bold my-2 text-black-alpha-90">Cronogramas solicitados y pendientes de carga:</div>
+<div class="font-bold my-2 tituloTabla">Cronogramas solicitados y pendientes de carga:</div>
 <p-table
-    [value]="products"
+    [value]="products" stripedRows
     showGridlines>
         <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 SINAR</th>
-                <th class="bg-blue-400 font-bold text-white">Contiene obras del año</th>
-                <th class="bg-blue-400 font-bold text-white">N° Oficio que aprueba</th>
-                <th class="bg-blue-400 font-bold text-white">Tipo de carga</th>
-                <th class="bg-blue-400 font-bold text-white">Fecha de solicitud</th>
+                <th class="tablaAzul font-bold">Empresa</th>
+                <th class="tablaAzul font-bold">Código de cronograma SINAR</th>
+                <th class="tablaAzul font-bold">Contiene obras del año</th>
+                <th class="tablaAzul font-bold">N° Oficio que aprueba</th>
+                <th class="tablaAzul font-bold">Tipo de carga</th>
+                <th class="tablaAzul font-bold">Fecha de solicitud</th>
             </tr>
         </ng-template>
         <ng-template #body let-product>
diff --git a/src/app/pages/concesiones/concesiones.component.ts b/src/app/pages/concesiones/concesiones.component.ts
index 5d23561..54fdab8 100644
--- a/src/app/pages/concesiones/concesiones.component.ts
+++ b/src/app/pages/concesiones/concesiones.component.ts
@@ -2,16 +2,23 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { TableModule } from 'primeng/table';
 import { InputTextModule } from 'primeng/inputtext';
+import { SelectModule } from 'primeng/select';
 
 @Component({
   selector: 'app-concesiones',
-  imports: [FormsModule, TableModule, InputTextModule],
+  imports: [FormsModule, TableModule, InputTextModule, SelectModule],
   templateUrl: './concesiones.component.html',
   styleUrl: './concesiones.component.scss'
 })
 export class ConcesionesComponent {
+  select1: any = '';
+  select2: any = '';
+  select3: any = '';
+  select4: any = '';
   pageTitle: string = 'Cronogramas cargados:';
-
+  empresas: any[] = [{name: 'Empresa A'}, {name: 'Empresa B'}, {name: 'Empresa C'}];
+  tipoCarga: any[] = [{name: 'Actualización'}, {name: 'Nueva'}, {name: 'Concesión'}, {name: 'Ajuste'}, {name: 'ATO'}];
+  contieneObras: any[] = [{name:'Si'}, {name:'No'}];
   products: any[] = [
     {
       empresa: 'Empresa A',
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
index 5be8145..6488d88 100644
--- a/src/app/pages/login/login.component.html
+++ b/src/app/pages/login/login.component.html
@@ -7,7 +7,7 @@
       <div class="text-drop">1.0</div>
     </div>
     <div class="header-text">
-      <div class="sub-title">Sistema Administrador de Cronogramas</div>
+      <div class="sub-title">Administrador de Cronogramas</div>
     </div>
   </div>
 </div>
@@ -24,40 +24,40 @@
         </div>
 
         <form (ngSubmit)="onLogin()">
-          
+
           <!-- Email -->
-          <input 
-            type="email" 
-            pInputText 
-            [(ngModel)]="email" 
-            name="email" 
-            placeholder="Email" 
-            class="input-with-icon w-full mb-3" 
+          <input
+            type="email"
+            pInputText
+            [(ngModel)]="email"
+            name="email"
+            placeholder="Email"
+            class="input-with-icon w-full mb-3"
             style="background-color: white; color: black;"
           />
 
           <!-- Password -->
-          <input 
-            type="password" 
-            pInputText 
-            [(ngModel)]="password" 
-            name="password" 
-            placeholder="Password" 
+          <input
+            type="password"
+            pInputText
+            [(ngModel)]="password"
+            name="password"
+            placeholder="Password"
             class="input-with-lock w-full"
             style="background-color: white; color: black;"
           />
 
           <!-- Botón -->
           <div class="login-actions">
-            <button 
-              pButton 
-              type="submit" 
-              label="Autenticar" 
+            <button
+              pButton
+              type="submit"
+              label="Autenticar"
               class="p-button-primary w-full"
               style="color: white">
             </button>
           </div>
-          
+
         </form>
 
         <!-- <form (ngSubmit)="onLogin()">
@@ -75,7 +75,7 @@
               <i class="pi pi-lock"></i>
             </span>
           </div>
-          
+
           <div class="login-actions">
             <button pButton type="submit" label="Autenticar" class="p-button-primary"></button>
           </div>
@@ -92,4 +92,4 @@
 </main>
 
   <!-- FOOTER -->
-  <app-footer></app-footer>
\ No newline at end of file
+  <app-footer></app-footer>
diff --git a/src/app/pages/login/login.component.scss b/src/app/pages/login/login.component.scss
index 8e891a4..5870570 100644
--- a/src/app/pages/login/login.component.scss
+++ b/src/app/pages/login/login.component.scss
@@ -152,7 +152,7 @@
 }
 
 .login-page-custom {
-  -ms-flex-align: center !important; 
+  -ms-flex-align: center !important;
   align-items: center !important;
   background-color: #e9ecef !important;
   display: -ms-flexbox !important;
@@ -217,7 +217,7 @@
 }
 
 .sub-title {
-  font-size: 1.8rem;
+  font-size: 3.0rem;
   margin-bottom: 0px;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   transform: translate(-4%);
diff --git a/src/app/pages/resumen/resumen.component.html b/src/app/pages/resumen/resumen.component.html
index 83dd844..96554fc 100644
--- a/src/app/pages/resumen/resumen.component.html
+++ b/src/app/pages/resumen/resumen.component.html
@@ -5,9 +5,9 @@
     <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 text-black-alpha-90 my-2">Cronogramas aprobados:</div>
+<div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
   <p-table class="mi-tabla-redondeada"
-    [value]="products"
+    [value]="products" stripedRows
     showGridlines>
         <ng-template #header>
             <tr>
@@ -32,9 +32,9 @@
         </ng-template>
 </p-table>
 
-<div class="font-bold text-black-alpha-90 my-2">Cronogramas aprobados:</div>
+<div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
   <p-table class="mi-tabla-redondeada"
-    [value]="products"
+    [value]="products" stripedRows
     showGridlines>
         <ng-template #header>
             <tr>
diff --git a/src/app/pages/unidad-informacion/unidad-informacion.component.html b/src/app/pages/unidad-informacion/unidad-informacion.component.html
index fbf2ba8..0efe38b 100644
--- a/src/app/pages/unidad-informacion/unidad-informacion.component.html
+++ b/src/app/pages/unidad-informacion/unidad-informacion.component.html
@@ -1,8 +1,8 @@
 <div class="p-3 text-white">
 <!-- Tabla1 -->
-<div class="font-bold text-black-alpha-90 my-2">Cronogramas solicitados y pendientes de carga:</div>
+<div class="font-bold tituloTabla my-2">Cronogramas solicitados y pendientes de carga:</div>
   <p-table class="mi-tabla-redondeada"
-    [value]="products"
+    [value]="products" stripedRows
     showGridlines>
         <ng-template #header>
             <tr>
@@ -26,9 +26,9 @@
         </ng-template>
   </p-table>
 <!-- Tabla2 -->
-<div class="font-bold text-black-alpha-90 my-2">Cronogramas aprobados:</div>
+<div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
   <p-table class="mi-tabla-redondeada"
-    [value]="products"
+    [value]="products" stripedRows
     showGridlines>
         <ng-template #header>
             <tr>
@@ -50,9 +50,9 @@
         </ng-template>
 </p-table>
 <!-- Tabla3 -->
-<div class="font-bold text-black-alpha-90 my-2">Cronogramas rechazados:</div>
+<div class="font-bold tituloTabla my-2">Cronogramas rechazados:</div>
   <p-table class="mi-tabla-redondeada"
-    [value]="products"
+    [value]="products" stripedRows
     showGridlines>
         <ng-template #header>
             <tr>
diff --git a/src/styles.scss b/src/styles.scss
index e2d159a..00b3846 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -8,21 +8,22 @@
     --border-color: #dee2e6;         /* Color bordes */
     --background-color: #f8f9fa;     /* Fondo gris claro */
   }
-  
+
   /* Estilos globales */
   html, body {
     margin: 0;
     padding: 0;
     height: 100%;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
+    font-family: "Museo Sans 300", "Museo Sans 700" !important;
     font-size: 14px;
     color: var(--text-color);
   }
-  
+
   body {
     background-color: var(--background-color);
   }
-  
+
   /* Clases de utilidad */
   .mb-1 { margin-bottom: 0.25rem !important; }
   .mb-2 { margin-bottom: 0.5rem !important; }
@@ -32,15 +33,33 @@
   .mt-2 { margin-top: 0.5rem !important; }
   .mt-3 { margin-top: 1rem !important; }
   .mt-4 { margin-top: 1.5rem !important; }
-  
+
   /* Personalizaciones globales de PrimeNG */
-  .p-component {
+ /*  .p-component {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  }
-  
+  } */
+
   .p-button.p-button-text {
     &:focus {
       box-shadow: none;
     }
   }
-  
\ No newline at end of file
+
+  .tituloTabla{
+    color: #002147;
+  }
+
+  .tablaAzul{
+    background-color: #008BC6 !important;
+    color: white !important;
+  }
+
+  .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) {
+    --p-datatable-row-striped-background: #BCDAEF;
+    background: var(--p-datatable-row-striped-background);
+  }