vistas padres modulo "Mis hijos"

Front/src/app/modules/Padres/pages/bitacora-hijos/bitacora-hijos.component.css

@@ -1,69 +1,115 @@
-.container {
-  display: flex;
-  justify-content: center;
-  padding: 40px 20px;
+.centrar {
+    margin-top: 4%;
+    line-height: auto;
+    text-align: center;
 }
 
-.table-wrapper {
-  width: 100%;
-  max-width: 1000px;
-  min-width: 300px;
-  background: white;
-  padding: 15px 10px;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  overflow-x: auto;
-  box-sizing: border-box;
-}
 .input {
     width: 500px;
     color: rgb(0, 140, 255);
 }
 
+.inline {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
 
-.centrar {
-  margin-top: 4%;
-  line-height: auto;
-  text-align: center;
+.red {
+    background-color: red;
+    border: none !important;
+    color: white;
+    padding: 5px 20px;
+    text-align: center;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 16px;
+    border-radius: 6px;
+    height: 35px;
 }
 
-.fondo {
-  border-radius: 10px;
-  line-height: 1;
-  display: inline-block;
-  vertical-align: middle;
+.contenedor-inputCard{
+  width: 500px !important;
 }
 
-.content {
-  margin: 0;
-  padding: 10px 70px;
-  font-weight: 500;
-  font-size: 32px;
-  color: white;
-  font-family: "Serenity Medium";
+.container-col {
+    display: flex;
+    flex-direction: column;
+    padding-top: 100px;
+    padding-left: 30px;
+    padding-right: 65px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .container-col {
-  display: flex;
-  flex-direction: column;
-  padding-top: 100px;
-  padding-left: 65px;
-  padding-right: 65px;
-  width: 100%;
-  box-sizing: border-box;
+    padding: 20px 15px;
+    margin-top: 5px;
 }
 
-.table-container {
-  width: 100%;
+.input {
+    width: 100% !important;
+    max-width: 100%;
 }
 
 .table-responsive {
-  overflow-x: auto;
-  white-space: nowrap;
+    overflow-x: auto;
+}
+
+.table-container {
+    width: 100%;
+    min-width: 300px;
+}
+
+table.mat-table {
+    width: 100%;
+}
+
+@media (max-width: 600px) {
+
+
+    .mat-cell, .mat-header-cell {
+        padding: 4px 8px;
+        font-size: 12px;
+    }
+
+    .centrar {
+        margin-top: 10%;
+    }
+
+    .fondo p.content {
+        font-size: 16px;
+    }
+
+    mat-paginator {
+        font-size: 12px;
+    }
 }
 
-mat-paginator {
-  margin-top: 10px;
-  display: flex;
-  justify-content: right;
+@media (max-width: 400px) {
+    .mat-column-importancia {
+        display: none;
+    }
+
+    .container-col {
+        padding: 10px 5px;
+    }
+
+    .red {
+        padding: 3px 10px;
+        font-size: 14px;
+        height: 30px;
+    }
+}
+
+button[mat-button] {
+    font-size: 12px;
+    padding: 0 8px;
 }
+
+mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+}
+

Front/src/app/modules/Padres/pages/bitacora-hijos/bitacora-hijos.component.html

@@ -9,16 +9,14 @@
 <div class="container-col fadeIn">
 
   <!-- Buscador -->
-  <div class="flex-row container-search">
-    <mat-form-field appearance="outline" class="input">
-      <mat-label>Buscar</mat-label>
-      <input matInput (keyup)="applyFilter($event)" placeholder="Buscar bitácora..." #input>
-      <button *ngIf="input.value" matSuffix mat-icon-button aria-label="Limpiar" (click)="input.value=''; applyFilter($event)">
-        <mat-icon>close</mat-icon>
-      </button>
-      <mat-icon matSuffix>search</mat-icon>
-    </mat-form-field>
-  </div>
+    <div class="flex-row container-search">
+        <div class="contenedor-inputCard">
+            <mat-form-field class="input">
+                <input class="input" (keyup)="applyFilter($event)" matInput placeholder="Buscar" #input>
+                <mat-icon matSuffix>search</mat-icon>
+            </mat-form-field>
+        </div>
+    </div>
 
   <!-- Tabla -->
   <div class="table-container mat-elevation-z8">

Front/src/app/modules/Padres/pages/circularHijos/circular-hijos.component.css

@@ -15,6 +15,7 @@
     cursor: pointer;
 }
 
+
 .red {
     background-color: red;
     border: none !important;
@@ -28,6 +29,10 @@
     height: 35px;
 }
 
+.contenedor-inputCard{
+  width: 500px !important;
+}
+
 .container-col {
     display: flex;
     flex-direction: column;
@@ -63,6 +68,10 @@ table.mat-table {
 
 @media (max-width: 600px) {
 
+.fondo{
+margin-left: 6px;
+width:300px;
+}
 
     .mat-cell, .mat-header-cell {
         padding: 4px 8px;