/* Responsive design */
/* body{
  background-color: rebeccapurple;
} */

@media (max-width: 768px) {

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  /* B o d y */
  body {
    grid-template-areas:
      "header"
      "nav"
      "aside"
      "main"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    width: 100%;
    /* background-color: red; */
  }

  /* H e a d e r */
  header {
    display: flex;
    /* Asegura que siga siendo un flex container */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Centra todos los elementos en el eje horizontal */
    height: auto;
    width:  100%;
    gap: 2px;
    /* background-color: red; */
    /* padding: 1rem; */
    /* Agrega padding para evitar que los elementos se peguen al borde */
  }

  /* 
  header * {
    border: 1px solid red;
  } */

  .header-brand {
    /* border: 1px solid blue; */
    width: 100%;
    margin-left: 0;
    flex: 1;
  }

  .header-brand h1 {
    /* border: 1px solid white; */
    font-size: 1.5rem;
    text-align: center;
  }

  .header-search {
    /* border: 1px solid green; */
    width: 100%;
    /* Asegura que tome el ancho disponible */
    display: flex;
    justify-content: center;
    /* Centra horizontalmente el input y el botón */
    align-items: center;
    /* Centra verticalmente */
    margin-top: 1px;
    /* Agrega separación con otros elementos */
  }

  .header-search input[type="text"] {
    width: 60%;
    /* Ajusta el tamaño en pantallas pequeñas */
    max-width: 300px;
  }

  .header-search button {
    /* width: 100px; */
    height: 30px;
    /* Espacio entre el input y el botón */
  }

  /* Nav */
  nav {
    grid-area: nav;
    display: flex;
    justify-content: left;
    /* align-items: center; */
    width: 100%;
    font-size: 1.2rem;
  }

  nav ul {
    display: flex;
    flex-direction: column;
  }

  nav ul li {
    width: 100%;
  }

  nav ul ul {
    position: static;
  }

  nav ul ul li {
    width: 100%;
  }

  /* aside */
  aside {
    grid-area: aside;
    width: 100%;
  }

  /* Main */
  main {
    /* background-color: #c6ea35; */
    grid-area: main;
    /* width: 100%; */
    max-width:inherit;
      /* hereda el ancho del contenedor padre */
    overflow-x: auto;
    /* Permite scroll horizontal si es necesario */
    /* display: block; */
      /* Cambia a bloque para evitar problemas de flexbox */
  }

  /* Footer */
  footer {
    grid-area: footer;
    font-size: 0.7rem;
    width: 100;
  }


/*** Por Pagina *********************************************/

/*login.php*/
  .form-login {
    align-items: center;
    /* Centra los elementos horizontalmente */
    max-width: 90%;
    /* Reduce el ancho máximo del formulario */
    margin: 0 auto 1rem;
    /* Centra el formulario horizontalmente */
  }

  .form-login label {
    font-size: 1rem;
    /* Reduce el tamaño de la fuente */
    text-align: center;
    /* Centra el texto del label */
  }

  .form-login input {
    font-size: 0.9rem;
    /* Reduce el tamaño de la fuente */
    padding: 0.4rem;
    /* Ajusta el espaciado interno */
  }

  .form-login button {
    font-size: 0.9rem;
    /* Reduce el tamaño de la fuente */
    padding: 0.4rem 0.8rem;
    /* Ajusta el espaciado interno */
  }
    

/*Dashboard*/
  .warning table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
  }

  .warning table thead,
  .warning table tbody,
  .warning table th,
  .warning table td,
  .warning table tr {
    display: block;
  }

  .warning table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .warning table tr {
    border: 1px solid #ccc;
  }

  .warning table td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .warning table td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-title);
    font-weight: bold;
  }


/* dispositivos.php */
  /* .dispositivos * {
    margin: 0;     padding: 0;     border: 1px solid #f00d0d;
  } */

  .cmts-table {
    /* background-color: rgb(173, 178, 183); */
    width: 100%; /* La tabla ocupará todo el ancho del contenedor */
    max-width: 100%; /* Evita que la tabla se desborde */
    table-layout: fixed; /* Ajusta las columnas al ancho disponible */
    word-wrap: break-word; /* Permite que el contenido largo se ajuste */
    overflow-x: auto; /* Habilita el desplazamiento horizontal si es necesario */
    display: block; /* Cambia a bloque para diseño responsivo */
    border: 2px black solid;
  }

  .cmts-table thead,
  .cmts-table tbody,
  .cmts-table th,
  .cmts-table td,
  .cmts-table tr {
    display: block; /* Cada fila y celda se comportan como bloques */
  }

  .cmts-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px; /* Oculta el encabezado en pantallas pequeñas */
  }

  .cmts-table tr {
    border: 1px solid #3c3b3b;
  }

  .cmts-table td {
    border: 1px solid #eee;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%; /* Espacio para las etiquetas de datos */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cmts-table td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; /* Ancho de las etiquetas de datos */
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-title); /* Usa el atributo data-title como etiqueta */
    font-weight: bold;
  }


/* cmts.php */
  .maincmts2 {
    border: 1px solid #0c0c88;
  }

  .alertas {
    /* border: 1px solid #c6ea35; */
    margin-bottom: 20px;
      /* padding: 10px;
      margin: 10px 0; */
  }

  .alertas h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
  } 

  .nodoscmts table {
    border: 1px solid #c6ea35;
    width:100%;
  }


/* puerto.php */
  .table-container {
    max-height: 1000px;
    /* Ajusta la altura del contenedor */
    overflow-y: auto;
    /* Permite scroll vertical */
    overflow-x: auto;
    /* Permite scroll horizontal si es necesario */
    border: 1px solid #ddd;
    position: relative;
    /* Necesario para evitar bugs en algunos navegadores */
  }

  .port-table-section h2, h3{
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 10px;
    /* Espacio entre el título y la tabla */
  }

  .port-table-section table {
    width: 100%;
    border-collapse: collapse;
    /* min-width: 800px; */
    /* Evita que las columnas se encojan demasiado */
  }

  .port-table-section  th,  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .port-table-section thead {
    position: sticky;
    top: 0;
    background: #333;
    /* Asegura que el encabezado no sea transparente */
    color: white;
    z-index: 1000;
  }


}