/* CSS para el estilo de la página de login */

@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, tree;

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  html {
    color-scheme: light dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
  }

  [data-theme='dark'] {
    color-scheme: dark only;
  }

  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  body {
    font-family: Arial, sans-serif; /* Establece la familia de fuentes */
    display: flex; /* Usa flexbox para centrar */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 100vh; /* Altura completa del viewport */
    margin: 0; /* Elimina el margen predeterminado */
    background-color: #f0f0f0; /* Fondo gris claro */
  }

  /* Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

/* Estilo del contenedor de login: define la caja para el formulario de login */
.login-container {
    background-color: white; /* Fondo blanco para el contenedor */
    padding: 20px; /* Relleno dentro del contenedor */
    border-radius: 8px; /* Esquinas redondeadas */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    width: 300px; /* Ancho fijo */
    text-align: center; /* Centra el texto dentro */
    position: relative; /* Para posicionar elementos hijos */
    z-index: 1; /* Asegurar que esté encima del fondo */
}

/* Estilo del encabezado */
h1 {
    margin-bottom: 20px; /* Espacio debajo del encabezado */
    color: #333; /* Color gris oscuro */
}

/* Estilo del grupo de entrada: para etiquetas e inputs */
.input-group {
    margin-bottom: 15px; /* Espacio debajo de cada grupo */
    text-align: left; /* Alinea el texto a la izquierda */
}

/* Estilo de la etiqueta */
label {
    display: block; /* Hace que la etiqueta sea un elemento de bloque */
    margin-bottom: 5px; /* Espacio debajo de la etiqueta */
    color: #555; /* Color gris medio */
}

/* Estilo de los inputs */
input[type="text"], input[type="password"] {
    width: 100%; /* Ancho completo */
    padding: 10px; /* Relleno dentro de los inputs */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 4px; /* Esquinas redondeadas */
    box-sizing: border-box; /* Incluye el relleno en el ancho */
    background-color: white; /* Fondo blanco */
    color: #333; /* Texto negro */
}

input[type="text"]:focus, input[type="password"]:focus {
    outline: none;
    border-color: #007bff; /* Borde azul al foco */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Estilo de los botones */
button {
    width: 100%; /* Ancho completo */
    padding: 10px; /* Relleno dentro de los botones */
    margin-top: 10px; /* Espacio encima de los botones */
    border: none; /* Sin borde */
    border-radius: 4px; /* Esquinas redondeadas */
    cursor: pointer; /* Cursor de puntero al pasar el mouse */
    font-size: 16px; /* Tamaño de fuente */
}

/* Estilo del botón de login */
#loginBtn {
    background-color: #4CAF50; /* Fondo verde */
    color: white; /* Texto blanco */
}

/* Estilo del botón de guardar */
#saveBtn {
    background-color: #2196F3; /* Fondo azul */
    color: white; /* Texto blanco */
}

/* Efectos de hover en los botones */
button:hover {
    opacity: 0.9; /* Ligeramente transparente al pasar el mouse */
}

/* Estilo del div de mensaje: para mostrar retroalimentación */
#message {
    margin-top: 20px; /* Espacio encima del mensaje */
    color: red; /* Color rojo para errores */
}

/* Estilos para la pantalla de bienvenida */
.welcome-screen {
    position: fixed; /* Posición fija */
    top: 0; /* Arriba */
    left: 0; /* Izquierda */
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    background-color: black; /* Fondo negro */
    display: flex; /* Usar flexbox */
    flex-direction: column; /* Dirección columna */
    justify-content: center; /* Centrar verticalmente */
    align-items: center; /* Centrar horizontalmente */
    color: white; /* Texto blanco */
    text-align: center; /* Centrar texto */
}

.welcome-screen h1 {
    font-size: 4em; /* Tamaño grande */
    margin-bottom: 50px; /* Espacio debajo */
}

.welcome-screen button {
    background-color: transparent; /* Fondo transparente */
    color: white; /* Texto blanco */
    border: 2px solid white; /* Borde blanco */
    padding: 10px 20px; /* Relleno reducido */
    border-radius: 4px; /* Esquinas redondeadas */
    cursor: pointer; /* Cursor de puntero */
    margin: 10px; /* Margen */
    font-size: 1.2em; /* Tamaño de fuente */
    max-width: 300px; /* Ancho máximo */
}

.welcome-screen button:hover {
    opacity: 0.9; /* Transparencia al pasar el mouse */
}

/* Estilos para la consola de administrador */
.admin-console {
    background: white;
    border-radius: 12px;
    border: 2px solid #ddd;
    position: fixed; /* Posición fija */
    top: 50%; /* Centrar verticalmente */
    left: 50%; /* Centrar horizontalmente */
    transform: translate(-50%, -50%); /* Ajuste para centrar */
    width: 90%; /* Ancho responsive */
    max-width: 800px; /* Ancho máximo */
    height: auto; /* Altura automática */
    max-height: 80vh; /* Altura máxima */
    display: flex; /* Usar flexbox */
    flex-direction: column; /* Dirección columna */
    justify-content: flex-start; /* Alinear arriba */
    align-items: center; /* Centrar horizontalmente */
    color: #333; /* Color de texto negro */
    padding: 0; /* Sin relleno, el aside maneja el padding */
    box-sizing: border-box; /* Incluir relleno en ancho */
    overflow-y: auto; /* Scroll si es necesario */
    font-family: 'Noto Sans Mono', monospace; /* Fuente monoespaciada */
    font-size: 0.875rem; /* Tamaño de fuente */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.admin-console aside {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}

.admin-console header {
    padding: 0.5rem;
    display: grid;
    gap: 0.5rem;
    border-bottom: 2px solid #ddd;
    background: #f8f9fa;
}

.admin-console h1 {
    font-size: 0.875rem;
    margin: 0;
}

.admin-console h1 a {
    padding-block: 0.5rem;
    padding-left: 2px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #333;
    text-decoration: none;
    outline-color: #007bff;
}

.admin-console h1 svg {
    width: 16px;
}

.admin-console nav {
    overflow: hidden;
    padding: 0.5rem;
}

.admin-console .user-management-content {
    height: 100%;
    overflow: auto;
}

.admin-console h2 {
    color: #333; /* Color de texto negro */
    margin-bottom: 20px; /* Espacio debajo */
    font-size: 1rem; /* Tamaño de fuente */
}

.admin-console button {
    background-color: #007bff; /* Fondo azul */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    padding: 10px 15px; /* Relleno */
    border-radius: 4px; /* Esquinas redondeadas */
    cursor: pointer; /* Cursor de puntero */
    margin-bottom: 20px; /* Espacio debajo */
    max-width: 300px; /* Ancho máximo */
    font-size: inherit; /* Tamaño de fuente heredado */
}

.admin-console button:hover {
    background-color: #0056b3; /* Azul más oscuro al hover */
}

/* Estilo del formulario de usuario */
.user-form {
    margin-bottom: 20px; /* Espacio debajo */
    display: flex; /* Usar flexbox */
    flex-direction: column; /* Dirección columna */
    align-items: stretch; /* Estirar elementos */
    width: 100%; /* Ancho completo */
    gap: 10px; /* Espacio entre elementos */
}

.user-form input, .user-form select {
    padding: 8px; /* Relleno */
    margin: 5px; /* Margen */
    border: 1px solid #ccc; /* Borde gris */
    border-radius: 4px; /* Esquinas redondeadas */
    background-color: white; /* Fondo blanco */
    color: #333; /* Color de texto negro */
    max-width: 300px; /* Ancho máximo */
    width: 100%; /* Ancho completo */
    font-size: inherit; /* Tamaño de fuente heredado */
}

.user-form input:focus, .user-form select:focus {
    outline: none;
    border-color: #007bff; /* Borde azul al foco */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.user-form button {
    background-color: #28a745; /* Fondo verde */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    padding: 8px 15px; /* Relleno */
    border-radius: 4px; /* Esquinas redondeadas */
    cursor: pointer; /* Cursor de puntero */
    margin: 5px; /* Margen */
    max-width: 300px; /* Ancho máximo */
    font-size: inherit; /* Tamaño de fuente heredado */
}

.user-form button:hover {
    background-color: #218838; /* Verde más oscuro al hover */
}

/* Estilo de la tabla de usuarios */
#userTable {
    width: 100%; /* Ancho completo */
    max-width: 800px; /* Ancho máximo */
    border-collapse: collapse; /* Colapso de bordes */
    margin-top: 20px; /* Espacio encima */
    color: #333; /* Color de texto negro */
    font-size: inherit; /* Tamaño de fuente heredado */
}

#userTable th, #userTable td {
    border: 1px solid #ddd; /* Borde gris claro */
    padding: 8px; /* Relleno */
    text-align: left; /* Alineación a la izquierda */
    background-color: white; /* Fondo blanco */
}

#userTable th {
    background-color: #f8f9fa; /* Fondo gris claro para headers */
    font-weight: bold;
}

#userTable button {
    margin-right: 5px; /* Espacio a la derecha */
    padding: 5px 10px; /* Relleno */
    border: none; /* Sin borde */
    border-radius: 4px; /* Esquinas redondeadas */
    cursor: pointer; /* Cursor de puntero */
    background-color: #007bff; /* Fondo azul */
    color: white; /* Texto blanco */
    max-width: 100px; /* Ancho máximo */
    font-size: inherit; /* Tamaño de fuente heredado */
}

.edit-btn {
    background-color: #ffc107; /* Fondo amarillo para editar */
    color: #212529; /* Texto oscuro */
}

.delete-btn {
    background-color: #dc3545; /* Fondo rojo para borrar */
}

#userTable button:hover {
    opacity: 0.8; /* Transparencia al hover */
}