/* Diseños Generales */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* B o d y */
body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "header header"
    "nav nav"
    "aside main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto auto 1fr auto;
}

/* H e a d e r */
header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background-color: #333;
  color: white;
}

.header-brand {
  flex: 1;
  font-size: 1.5rem;
  margin-left: 1rem;
}

.header-brand h1 {
  font-size: 1.5rem;
}

.header-search {
  flex: 2;
  display: flex;
  justify-content: center;
}

.header-search input[type="text"] {
  width: 300px; /* Ajusta el ancho según tus necesidades */
  height: 30px; /* Ajusta la altura según tus necesidades */
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.header-search button {
  width: 100px; /* Ajusta el ancho según tus necesidades */
  height: 30px; /* Ajusta la altura según tus necesidades */
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #333;
  color: white;
  cursor: pointer;
}

.header-search button:hover {
  background-color: #575656;
}

.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 1rem;
}

.header-right p {
  margin-right: 1rem;
}


/* N a v */
nav {
  grid-area: nav;
  background-color: #575656;
  color: white;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
}

nav ul li {
  position: relative;
}

nav ul li a {
  display: block;
  padding: 0.1rem 0.5rem;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

nav ul li a:hover {
  background-color: #444;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #575656;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
}

nav ul ul li {
  width: 200px;
}

nav ul ul li a {
  padding: 0.5rem 1rem;
}

nav ul ul li a:hover {
  background-color: #444;
}

nav ul li:hover > ul {
  display: block;
}


/* A s i d e */
aside {
  grid-area: aside;
  background-color: #f4f4f4;
  padding: 1rem;
}


/* M a i n */
main {
  grid-area: main;
  padding: 1rem;
}


/* F o o t e r */
footer {
  grid-area: footer;
  background-color: #c8ebaa;
  color: white;
  padding: 0.5rem;
  text-align: center;
}








/*** Por Pagina ***/
/* login.php */
  #login-h2 {
    margin-bottom: 2.5rem;
    /* Aumenta el margen inferior */
  }

  .form-login {
    display: flex;
    flex-direction: column; /* Coloca los elementos en una columna */
    align-items: flex-start; /* Alinea los elementos a la izquierda */
    gap: 0.5rem; /* Espaciado entre los elementos */
    width: 100%; /* Asegura que el formulario ocupe todo el ancho disponible */
    max-width: 400px; /* Ancho máximo para el formulario */
    margin-bottom: 1rem; /* Espaciado inferior entre los campos */
  }

  .form-login label {
    font-size: 1.2em; /* Ajusta el tamaño de la fuente */
    width: 100%; /* Asegura que el label ocupe todo el ancho */
  }

  .form-login input {
    font-size: 1em; /* Ajusta el tamaño de la fuente */
    padding: 0.5rem; /* Espaciado interno */
    width: 100%; /* Asegura que el input ocupe todo el ancho */
    border: 1px solid #ccc; /* Borde del input */
    border-radius: 4px; /* Bordes redondeados */
  }

  .form-login button {
    font-size: 1em; /* Ajusta el tamaño de la fuente */
    padding: 0.5rem 1rem; /* Espaciado interno */
    width: 100%; /* Asegura que el botón ocupe todo el ancho */
    background-color: #333; /* Color de fondo */
    color: white; /* Color del texto */
    border: none; /* Sin bordes */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    text-align: center; /* Centra el texto dentro del botón */
  }

  .form-login button:hover {
    background-color: #575656; /* Cambia el color al pasar el mouse */
  }




/* dashboard.php */

/* Espaciado para headers en dashboard.php */
.tableros h1,
.tableros h2,
.tableros h3 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* Tabla de CMTS para tableros.php */
.cmts-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  font-size: 1rem;
}

.cmts-table th,
.cmts-table td {
  border: 1px solid #e0e0e0;
  padding: 0.7em 1.2em;
  text-align: center;
}

.cmts-table th {
  background: #333;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

.cmts-table tbody tr:nth-child(even) {
  background: #f7f7f7;
}

.cmts-table tbody tr:hover {
  background: #e0f0ff;
  transition: background 0.2s;
}

/* Opcional: resaltar valores altos en rojo y bajos en verde */
.cmts-table .danger {
  color: #c0392b;
  font-weight: bold;
}

.cmts-table .ok {
  color: #27ae60;
  font-weight: bold;
}

.alertas h1,
.alertas h2,
.alertas h3 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* dispositivos.php */
  .cmts-table {
    width: 100%;
    text-align: center;
    border-collapse: collapse; /* Mantén esto si prefieres bordes colapsados */
    border: 3px solid black; /* Borde negro que cubre toda la tabla */
  }

  .cmts-table th {
    background-color: #f4f4f4; /* Fondo claro para diferenciar el encabezado */
    color: #333; /* Texto oscuro */
    font-weight: bold;
    padding: 10px;
    border: 1px solid black; /* Asegura bordes visibles en el encabezado */
  }

  .cmts-table td {
    padding: 8px;
    border: 1px solid black; /* Asegura bordes visibles en las celdas */
  }

  .cmts-table tr.inactive {
    background-color: rgb(248, 120, 120); /* Fondo rojo para filas inactivas */
  }

  .cmts-table tr:hover {
    background-color: #e0e0e0; /* Fondo gris claro al pasar el mouse */
  }




/* cmts.php */
  /* container*/
  .container-cmts {
    display: flex; /* Activa el modo flexbox */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en varias filas si es necesario */
    gap: 10px; /* Espaciado entre los elementos */
    justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
    align-items: flex-start; /* Alinea los elementos al inicio verticalmente */
    margin: 5px 0; /* Margen superior e inferior */
  }

  .container-cmts > div {
    flex: 1 1 calc(33.33% - 20px); /* Cada elemento ocupa un tercio del ancho del contenedor menos el espacio del gap */
    min-width: 300px; /* Ancho mínimo para evitar que los elementos se vuelvan demasiado pequeños */
    background-color: #f9f9f9; /* Fondo claro para diferenciar las secciones */
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 5px; /* Bordes redondeados */
    padding: 15px; /* Espaciado interno */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra ligera */
  }

  .container-cmts .alertas,

  /* nodoscmts*/
  .container-cmts .nodoscmts {
    flex: 1 1 100%; /* Por defecto, cada sección ocupa el 100% del ancho */
  }

  .container-cmts .nodoscmts table {
    width: 100%;
    line-height: 0.5;
    text-align: center;
    border-collapse: collapse;
    border: 3px solid black;
  }

  .container-cmts .nodoscmts th {
    background-color: #f4f4f4;
    color: #333;
    font-weight: bold;
    padding: 10px;
    border: 1px solid black;
  }

  .container-cmts .nodoscmts td {
    padding: 8px;
    border: 1px solid black;
  }

  .container-cmts .nodoscmts tr:hover {
    background-color: #e0e0e0;
  }     

  .nodoscmts {
    margin-top: 20px;
    /* Opcional, si prefieres agregar margen superior */
  }
  .nodoscmts table {
    width: 60%;
    text-align: center;
    border-collapse: collapse; /* Colapsa los bordes para evitar bordes dobles */
    border: 3px solid black; /* Borde negro que cubre toda la tabla */
  }

  .nodoscmts th {
    background-color: #f4f4f4; /* Fondo claro para diferenciar el encabezado */
    color: #333; /* Texto oscuro */
    font-weight: bold;
    font-size: 0.9rem; /* Tamaño de fuente reducido */
    padding: 6px; /* Reduce el espaciado interno */
    border: 1px solid black; /* Bordes visibles en el encabezado */
  }

  .nodoscmts td {
    font-size: 0.85rem; /* Tamaño de fuente reducido */
    padding: 4px; /* Reduce el espaciado interno */
    border: 1px solid black; /* Bordes visibles en las celdas */
  }

  .nodoscmts tr:hover {
    background-color: #e0e0e0; /* Fondo gris claro al pasar el mouse */
  }

  .nodoscmts tr.inactive {
    background-color: rgb(248, 120, 120); /* Fondo rojo para filas inactivas */
  }

  .nodoscmts caption {
    caption-side: top;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
  }




/* puerto.php*/

  /* Estilo para la tabla */
  .tabla_cm {
    /* width: 80%; */
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    text-align: left;
  }

  .tabla_cm thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
  }

  .tabla_cm th, .tabla_cm td {
    padding: 12px 15px;
    border: 1px solid #dddddd;
  }

  .tabla_cm tbody tr:nth-child(even) {
    background-color: #f3f3f3;
  }

  .tabla_cm tbody tr:hover {
    background-color: #f1f1f1;
  }

  .tabla_cm a {
    color: #009879;
    text-decoration: none;
  }

  .tabla_cm a:hover {
    text-decoration: underline;
  }

  /* Estilo para las celdas condicionales */
  .dw-yellow-bg {
    background-color: #fff3cd;
    color: #856404;
  }

  .dw-red-bg {
    background-color: #f8d7da;
    color: #721c24;
  }

  .up-yellow-bg {
    background-color: #fff3cd;
    color: #856404;
  }

  .rup-ed-bg {
    background-color: #f8d7da;
    color: #721c24;
  }

  .yellow-bg {
    background-color: #fff3cd;
    color: #856404;
  }

  .red-bg {
    background-color: #f8d7da;
    color: #721c24;
  }

  /* Estilo para las gráficas */
  .error-container, .snr-container {
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    min-height: 700px;
  }

  .error-container h2, .snr-container h3 {
    text-align: center;
    color: #333333;
    margin-bottom: 20px;
  }

  canvas {
    display: block;
    margin: 0 auto;
    width: 100%; /* Ancho relativo al contenedor */
    height: 400px; /* Altura fija para el gráfico */
    /* height: auto; */
  }




/* mac.php */

  form button {
    font-size: 1rem;
    /* Aumenta el tamaño de la fuente */
    padding: 5px 15px;
    /* Aumenta el espaciado interno */
    border-radius: 8px;
    /* Bordes redondeados */
    background-color: #007bff;
    /* Color de fondo */
    color: white;
    /* Color del texto */
    border: none;
    /* Sin bordes */
    cursor: pointer;
    /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease;
    /* Transición suave al pasar el mouse */
  }

  form button:hover {
    background-color: #0056b3;
    /* Cambia el color al pasar el mouse */
  }


  /* Contenedor principal */
  .mac-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    margin: 20px auto;
  }

  /* Título principal */
  .mac-container h1 {
    /* text-align: center; */
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 5px;
  }

  /* Información de la dirección MAC */
  .mac-container p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
  }

  /* Mensajes de error o éxito */
  .mac-container .error-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .mac-container .success-message {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  /* Tabla de resultados del comando */
  .mac-container pre {
    background-color: #333;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto;
    font-family: monospace;
    font-size: 1.2rem;
    line-height: 1.4;
    white-space: pre-wrap;       /* CSS3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    max-width: 100%;            /* Ensure pre doesn't exceed container width */
  }

  /* Estilos para resaltar valores importantes */
  /* Add the new single highlight class */
  .mac-container pre .highlight {
    color: #ffff00 !important; /* Yellow text */
    font-weight: bold;
    background-color: rgba(255, 255, 0, 0.1); /* Subtle yellow background */
  }

  /* Botones */
  .mac-container button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .mac-container button:hover {
    background-color: #0056b3;
  }

  /* Botones */
  .button-group {
    margin-bottom: 10px;
  }

  .button-group button {
    padding: 10px 20px;
    margin-right: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }

  .button-group button:hover {
    background-color: #0056b3;
  }

  .button-group button.active {
    background-color: #0056b3;
}

/* Contenedor de botones */
.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  /* Espaciado entre filas */
}

/* Botones generales */
.command-group,
.button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  /* Espaciado entre botones */
  margin-bottom: 10px;
}

.command-group button,
.button-group button {
  padding: 10px 20px;
  font-size: 1rem;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.command-group button:hover,
.button-group button:hover {
  background-color: #0056b3;
}

.command-group button.active,
.button-group button.active {
  background-color: #0056b3;
  font-weight: bold;
}



/* busqueda.php */
.resultados-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  text-align: left;
  border: 1px solid #ddd;
}

/* Encabezado de la tabla */
.resultados-table thead tr {
  background-color: #333;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.resultados-table th,
.resultados-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

/* Filas alternas */
.resultados-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Efecto hover */
.resultados-table tbody tr:hover {
  background-color: #f1f1f1;
}

/* Enlaces dentro de la tabla */
.resultados-table a {
  color: #007bff;
  text-decoration: none;
}

.resultados-table a:hover {
  text-decoration: underline;
}

/* Celdas condicionales (ejemplo: estado) */
.resultados-table .estado-activo {
  background-color: #d4edda;
  color: #155724;
}

.resultados-table .estado-inactivo {
  background-color: #f8d7da;
  color: #721c24;
}

/* Ajuste de texto para columnas largas */
.resultados-table td {
  word-wrap: break-word;
  max-width: 200px;
}