@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* ===== GENERAL ===== */
* {
  box-sizing: border-box;
}
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #ece9e6, #ffffff);
  color: #333;
}

/* ===== CONTENEDOR ===== */
.container {
  max-width: 700px;
  margin: 40px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}

/* ===== ENCABEZADO ===== */
header h1 {
  font-size: 2rem;
  font-weight: 600;
  color: #381fec;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ===== FORM GROUPS ===== */
.form-group {
  margin-bottom: 1.5rem;
  text-align: left;
}
label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}
select, .days-grid input[type="checkbox"] {
  cursor: pointer;
}
select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border 0.3s;
}
select:focus {
  border-color: #6c47ff;
  outline: none;
}

/* ===== GRID DE DÍAS ===== */
.days-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}
.days-grid label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  background: #f4f6ff;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  transition: background 0.3s;
}
.days-grid input:checked + span,
.days-grid input:checked + label {
  background: #6c47ff20;
}

/* ===== BOTÓN DE ASIGNAR ===== */
.assign-btn {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #381fec, #6c47ff);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}
.assign-btn:hover {
  background: linear-gradient(135deg, #6c47ff, #381fec);
  transform: scale(1.03);
}

/* ===== STATUS ===== */
.status {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 500;
  color: #28a745;
}

/* ===== SHARE LINK ===== */
#share-container {
  margin: 1.5rem 0;
  text-align: left;
}
#share-container p {
  font-size: 14px;
  color: #555;
}
#share-link {
  color: #381fec;
  text-decoration: none;
  font-weight: 600;
  word-break: break-all;
}
#share-link:hover {
  color: #6c47ff;
  text-decoration: underline;
}

/* ===== TARJETAS DE ASIGNACIÓN ===== */
.assignment-card {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  text-align: left;
  position: relative;
}
.assignment-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: #381fec;
}
.assignment-card p {
  font-size: 14px;
  margin-bottom: 8px;
  color: #555;
}
.assignment-card a {
  display: inline-block;
  padding: 8px 14px;
  background: linear-gradient(135deg, #28a745, #2ecc71);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s, transform 0.2s;
}
.assignment-card a:hover {
  background: linear-gradient(135deg, #2ecc71, #28a745);
  transform: scale(1.05);
}
.assignment-card .actions {
  margin-top: 12px;
}
.assignment-card button {
  padding: 8px 14px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.assignment-card .edit-btn {
  background: #ffc107;
  color: #fff;
  margin-right: 8px;
}
.assignment-card .edit-btn:hover {
  background: #e0a800;
  transform: scale(1.05);
}
.assignment-card .del-btn {
  background: #dc3545;
  color: #fff;
}
.assignment-card .del-btn:hover {
  background: #c82333;
  transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .container {
    padding: 20px;
    border-radius: 0;
    box-shadow: none;
  }
  header h1 {
    font-size: 1.6rem;
  }
  .assignment-card h3 {
    font-size: 1.1rem;
  }
  .assign-btn {
    font-size: 14px;
    padding: 12px;
  }
  select {
    font-size: 13px;
  }
}
/* Estilos específicos para la sección de Crear Empleado */
#create-employee-section {
  margin-bottom: 30px; /* Espacio debajo de esta sección */
  padding: 20px; /* Espaciado interno */
  border: 1px solid #e0e0e0; /* Borde sutil */
  border-radius: 10px; /* Bordes redondeados */
  background-color: #fcfcfc; /* Fondo ligeramente diferente */
}

#create-employee-section h2 {
  color: #381fec; /* Color del título */
  font-size: 1.5rem; /* Tamaño del título */
  margin-top: 0; /* Elimina el margen superior por defecto */
  margin-bottom: 20px; /* Espacio debajo del título */
  border-bottom: 2px solid #381fec; /* Subraya el título */
  padding-bottom: 10px; /* Espacio entre el texto del título y la línea */
}

/*
   Los estilos para los inputs, labels, form-group y el botón
   con clase .assign-btn ya deberían estar definidos en tu CSS general
   y aplicarse a este formulario por herencia y selectores de clase/elemento.

   Por ejemplo, estilos como:
   .form-group { margin-bottom: ... }
   label { display: block; ... }
   input[type="text"], input[type="tel"], input[type="email"] { width: 100%; padding: ... }
   .assign-btn { background: ... color: ... }
   .status { margin-top: ... }

   ...ya deberían aplicar a los elementos dentro de #employee-form y #create-employee-section.
   Solo añade las reglas de arriba para la sección y el h2 si quieres personalizar su contenedor.
*/

/* Si necesitas ajustar el margen del botón de crear empleado específicamente */
#create-employee-section .assign-btn {
    margin-top: 15px; /* Ajusta si el margen general de .assign-btn no te convence aquí */
}

/* Estilo para el div de estado del empleado */
#employee-status {
    /* Hereda de .status, pero podrías añadir estilos aquí si necesitas especificidad */
    margin-top: 10px; /* Espacio arriba del mensaje de estado */
}