Comentarios en style.css

static/style.css

@@ -1,9 +1,12 @@
 @import url('https://fonts.gogleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
+/* Variables globales */
 :root {
    --ancho-menu: 250px;
  }
  
+/* Estilo general por defecto */
+
 * {
    margin: 0;
    padding: 0;
@@ -11,6 +14,8 @@
    font-family: 'Poppins', sans-serif;
 }
 
+/* Estilo del body */
+
 body {
    width: 100%;
    background: #E5E7EB;
@@ -18,6 +23,8 @@ body {
    display: flex;
 }
 
+/* Estilo del menú lateral */
+
 #menu {
    background: #E3DBFC;
    width: var(--ancho-menu); /* si cambia este valor puede afectar a otros calculos más abajo, por ejemplo el ancho de navigation */
@@ -81,6 +88,8 @@ body {
    transition: 0.3s ease;
 }
 
+/* Estilo del contenedor principal */
+
 #interface {
    width: calc(100% - var(--ancho-menu)); /* el 200px es el ancho del menú. Si cambia este hay que cambiarlo aquí */
    margin-left: var(--ancho-menu); /* el 200px es el ancho del menú. Si cambia este hay que cambiarlo aquí */
@@ -100,6 +109,7 @@ body {
    font-size: 15px;
 }
 
+/* Estilo de la barra de navegación */
 
 #interface .navigation {
    display: flex;
@@ -150,6 +160,8 @@ body {
    border-width: 50%;
 }
 
+/* Estilo del formulario de inicio de sesión */
+
 #login-form {
    display: flex;
    justify-content: left;
@@ -188,6 +200,7 @@ body {
    width: 100%;
    border-radius: 5px;
 }
+
 #login-form .input-password input {
    border: 1px solid #E3DBFC;
    outline: none;
@@ -240,6 +253,7 @@ body {
    margin-top: 30px;
 }
 
+/* Estilo del contenedor del menú burger para mostrar-ocultar el menú lateral */
 
 .n1 {
    display: flex;
@@ -247,6 +261,8 @@ body {
    align-items: center;
 }
 
+/* Estilo del botón de menú burger */
+
 #menu-btn {
    display: none;
    color: #2b2b2b;
@@ -255,6 +271,8 @@ body {
    margin-right: 20px;
 }
 
+/* Estilo del título de las páginas */
+
 .i-name {
    color: #444a53;
    padding: 30px 30px 0 30px;
@@ -263,6 +281,8 @@ body {
    margin-top: 70px;
 }
 
+/* Estilo de las tarjetas mostradas en el interfaz */
+
 .values {
    display: flex;
    padding: 30px 40px 0 30px;
@@ -318,6 +338,8 @@ body {
    color: #828997;
 }
 
+/* Estilo del panel principal donde irá el contenido */
+
 .board{
    width: 94%;
    margin: 30px 0 30px 30px;
@@ -352,7 +374,9 @@ body {
    text-align: start;
 }
 
-.botones{
+/* Estilo del contenedor para recoger los botones */
+
+.botones {
    width: 94%;
    margin: 30px 0px 30px 0px;
    overflow: auto;
@@ -360,6 +384,8 @@ body {
    border-radius: 8px;
 }
 
+/* Estilo de la tabla o tablas que van el el board */
+
 table {
    border-collapse: collapse;
 }
@@ -400,6 +426,8 @@ tbody tr td {
    font-weight: 600;
 }
 
+/* Control de los tamaños en modo responsive */
+
 @media (max-width: 769px) {
    #menu {
       width: 170px;
@@ -470,6 +498,8 @@ tbody tr td {
  }
 }
 
+/* Botón desplegable (usado para el menú de usuario) */
+
 .dropbtn {
    background-color: #fff;
    color: white;
@@ -483,6 +513,7 @@ tbody tr td {
    position: relative;
    display: inline-block;
 }
+
 .dropdown-content {
    display: none;
    position: absolute;
@@ -491,6 +522,7 @@ tbody tr td {
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
 }
+
 .dropdown-content a {
    color: black;
    padding: 12px 16px;
@@ -498,6 +530,7 @@ tbody tr td {
    display: block;
    text-align: left;
 }
+
 .dropdown-content a:hover {background-color: #f1f1f1;}
 .dropdown:hover .dropdown-content {
    display: block;
@@ -520,6 +553,8 @@ tbody tr td {
    font-size: 16px;
 }
 
+/* Estilo del contenedor para albergar un form */
+
 .div-form {
    width: 60%;
    padding: 90px 0 0 0;