/* Importar Google Fonts para titulares y contenido */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap');

/* Variables CSS para facilitar el mantenimiento y cambio de colores */
:root {
  --background: #121212;
  --container-bg: #1e1e1e;
  --text-color: #e0e0e0;
  --accent: #bb86fc;
  --button-bg: #bb86fc;
  --button-hover-bg: #9a67ea;
  --input-bg: #2c2c2c;
  --input-border: #444;
  --modal-bg: #1e1e1e;
}
*{
  box-sizing: border-box;
}
/* Estilos generales */
body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--background);
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

/* Titulares usan Poppins */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

/* Contenedor centralizado y con sombra sutil */
.container {
  width: 90%;
  max-width: 600px;
  margin: 50px auto;
  background: var(--container-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.container_dashboard {
  width: 90%;
  margin: auto auto;
  background: var(--container-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Títulos centrados con un margen inferior */
h1 {
  text-align: center;
  margin-bottom: 20px;
}

/* Etiquetas de formulario con espacio y color adecuado */
form label {
  display: block;
  margin-top: 15px;
  font-weight: 500;
}

/* Campos de entrada con estilo minimalista y colores oscuros */
form input[type="text"],
form input[type="email"],
form input[type="password"] {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  box-sizing: border-box;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-color);
  outline: none;
  transition: border-color 0.3s ease;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus {
  border-color: var(--accent);
}

/* Botón moderno y centrado */
button {
  display: block;
  margin: 30px auto 0;
  padding: 12px 24px;
  background: var(--button-bg);
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease;
}

button:hover {
  background: var(--button-hover-bg);
}

/* Estilos para el Modal */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8); /* Fondo semitransparente oscuro */
}

.modal-content {
  background-color: var(--modal-bg);
  margin: 10% auto;
  padding: 20px;
  border: 1px solid var(--input-border);
  width: 80%;
  max-width: 600px;
  border-radius: 8px;
  position: relative;
  text-align: center;
}

.modal-close {
  color: #bbb;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
  color: #fff;
}
/* ================================
   Estilos Modernos para la Tabla de Administración
   ================================ */
   .admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px; /* Separa verticalmente las filas */
    margin-top: 20px;
  }
  
  /* Encabezado de la tabla */
  .admin-table thead {
    background-color: var(--accent);
    border-radius: 8px;
  }
  
  .admin-table thead th {
    padding: 12px;
    text-align: left;
    color: var(--text-color);
    font-weight: 600;
  }
  
  /* Filas de la tabla */
  .admin-table tbody tr {
    background-color: var(--container-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: background-color 0.3s ease;
  }
  
  .admin-table tbody tr:hover {
    background-color: var(--input-bg);
  }
  
  .admin-table tbody tr td {
    padding: 12px;
    vertical-align: middle;
  }
  
  /* Estilos para los enlaces de acción */
  .admin-table tbody tr td a {
    color: var(--button-bg);
    text-decoration: none;
    margin-right: 8px;
    font-weight: 500;
    transition: color 0.3s ease;
  }
  
  .admin-table tbody tr td a:hover {
    color: var(--button-hover-bg);
  }
  .btn {
    display: inline-block;      /* Para que se comporte como un elemento de bloque en línea */
    padding: 12px 24px;         /* Espaciado interno para simular el tamaño de un botón */
    background: var(--button-bg);  /* Usa la variable definida o un color, por ejemplo: #bb86fc */
    color: #fff;                /* Texto en color blanco */
    text-decoration: none;      /* Sin subrayado */
    border-radius: 4px;         /* Bordes redondeados */
    font-size: 16px;            /* Tamaño de fuente adecuado */
    transition: background 0.3s ease; /* Transición suave para el hover */
    margin: 10px 0;             /* Espacio vertical si lo necesitas */
  }
  
  .btn:hover {
    background: var(--button-hover-bg); /* Cambia a un color más oscuro al pasar el mouse */
  }
  .pagination {
    text-align: center;
    margin-top: 20px;
  }
  
  .pagination .btn,
  .pagination .current-page {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    background: var(--button-bg);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease;
  }
  
  .pagination .btn:hover {
    background: var(--button-hover-bg);
  }
  
  .pagination .current-page {
    background: var(--accent);
    font-weight: bold;
  }
  /* Modal (general) */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  background-color: var(--modal-bg);
  margin: 10% auto;
  padding: 20px;
  border: 1px solid var(--input-border);
  width: 80%;
  max-width: 600px;
  border-radius: 8px;
  position: relative;
  text-align: center;
}

.modal-close {
  color: #bbb;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
  color: #fff;
}
.admin-modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8); /* Fondo semitransparente oscuro */
}