/* ========================================
  ARCHIVO: components.css
  DESCRIPCIÓN: Estilos de componentes reutilizables en toda la aplicación
  OBJETIVO: Definir botones, cards, formularios, tablas, badges con estilos consistentes
   ======================================== */

/* ======================================
  SECTION 1: BOTONES (Buttons)
  Estilos base y variantes de botones
   ====================================== */

/* Estilo base para TODOS los botones */
.btn {
  /* Usar flexbox para centrar iconos y texto */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Espacio entre icono y texto */
  gap: 0.5rem;
  
  /* Relleno interno: top/bottom 0.5rem, left/right 1rem */
  padding: 0.5rem 1rem;
  
  /* Bordes redondeados para apariencia moderna */
  border-radius: var(--border-radius);
  
  /* Peso de fuente semibold para mayor legibilidad */
  font-weight: 500;
  
  /* Heredar fuente del documento */
  font-family: var(--font-family);
  
  /* Borde sutil del botón */
  border: 1px solid var(--border-color);
  
  /* Fondo semitransparente con efecto vidrio */
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  
  /* Cursor de puntero para indicar que es clickeable */
  cursor: pointer;
  
  /* Transición suave en todos los cambios visuales */
  transition: all var(--transition-normal);
  
  /* Tamaño de fuente ligeramente pequeño */
  font-size: 0.9rem;
  
  /* Color del texto */
  color: var(--text-main);
  
  /* Sombra sutil para dar profundidad */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Estado hover: cuando pasas el ratón sobre el botón */
.btn:hover {
  /* Fondo más opaco al pasar el ratón */
  background-color: rgba(255, 255, 255, 0.1);
  
  /* Mover el botón hacia arriba 2px para efecto de "levantamiento" */
  transform: translateY(-2px);
  
  /* Sombra más pronunciada para el efecto levantamiento */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Estado activo: cuando haces click en el botón */
.btn:active {
  /* Mover el botón hacia abajo 1px para efecto de "presión" */
  transform: translateY(1px);
}

/* ======================================
  SECTION 2: BOTÓN PRIMARIO
  Botones de acción principal (crear, guardar)
   ====================================== */

.btn-primary {
  /* Fondo azul (color primario) con 80% de opacidad */
  background-color: rgba(59, 130, 246, 0.8);
  
  /* Borde azul más transparente */
  border-color: rgba(59, 130, 246, 0.5);
  
  /* Texto blanco para máximo contraste */
  color: #fff;
  
  /* Sombra azul sutil */
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* Estado hover del botón primario */
.btn-primary:hover {
  /* Fondo azul más opaco (100%) */
  background-color: rgba(59, 130, 246, 1);
  
  /* Sombra azul más pronunciada */
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

/* ======================================
  SECTION 3: BOTÓN DE ACENTO
  Botones secundarios o de énfasis (opciones alternas)
   ====================================== */

.btn-accent {
  /* Fondo naranja (color acento) con 80% de opacidad */
  background-color: rgba(245, 158, 11, 0.8);
  
  /* Borde naranja más transparente */
  border-color: rgba(245, 158, 11, 0.5);
  
  /* Texto blanco */
  color: #fff;
  
  /* Sombra naranja sutil */
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

/* Estado hover del botón acento */
.btn-accent:hover {
  /* Fondo naranja más opaco */
  background-color: rgba(245, 158, 11, 1);
  
  /* Sombra naranja más pronunciada */
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

/* ======================================
  SECTION 4: BOTÓN PELIGROSO
  Botones para acciones destructivas (eliminar)
   ====================================== */

.btn-danger {
  /* Fondo rojo (color peligro) con 80% de opacidad */
  background-color: rgba(239, 68, 68, 0.8);
  
  /* Borde rojo más transparente */
  border-color: rgba(239, 68, 68, 0.5);
  
  /* Texto blanco */
  color: #fff;
  
  /* Sombra roja sutil */
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

/* Estado hover del botón peligro */
.btn-danger:hover {
  /* Fondo rojo más opaco */
  background-color: rgba(239, 68, 68, 1);
  
  /* Sombra roja más pronunciada */
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

/* ======================================
  SECTION 5: CARDS
  Contenedores de contenido con efecto glassmorphism
   ====================================== */

.card {
  /* Color de fondo semitransparente (efecto vidrio) */
  background-color: var(--surface-color);
  
  /* Aplicar efecto glassmorphism */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  
  /* Borde sutil */
  border: var(--glass-border);
  
  /* Bordes redondeados grandes para apariencia moderna */
  border-radius: var(--border-radius-lg);
  
  /* Relleno interno */
  padding: 1.5rem;
  
  /* Sombra elegante */
  box-shadow: var(--glass-shadow);
  
  /* Transición suave en transformación y sombra */
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Estado hover: las cards se elevan ligeramente */
.card:hover {
  /* Mover la card hacia arriba 2px */
  transform: translateY(-2px);
  
  /* Sombra más pronunciada para efecto de elevación */
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
}

/* ======================================
  SECTION 6: FORMULARIOS (Forms)
  Estilos para inputs, selects, textareas
   ====================================== */

/* Grupo de formulario: contenedor de label + input */
.form-group {
  /* Espacio abajo entre grupos */
  margin-bottom: 1rem;
  
  /* Usar flexbox con dirección vertical */
  display: flex;
  flex-direction: column;
}

/* Label dentro de form-group */
.form-group label {
  /* Espacio abajo del label */
  margin-bottom: 0.4rem;
  
  /* Tamaño de fuente ligeramente pequeño */
  font-size: 0.9rem;
  
  /* Color de texto secundario */
  color: var(--text-muted);
}

/* Inputs, selects, textareas */
.form-control {
  /* Fondo oscuro semitransparente */
  background-color: rgba(0, 0, 0, 0.2);
  
  /* Borde sutil */
  border: 1px solid var(--border-color);
  
  /* Color del texto */
  color: var(--text-main);
  
  /* Relleno interno */
  padding: 0.6rem;
  
  /* Bordes redondeados */
  border-radius: var(--border-radius);
  
  /* Heredar fuente del documento */
  font-family: inherit;
  
  /* Tamaño de fuente normal */
  font-size: 1rem;
  
  /* Transición suave en cambios */
  transition: all var(--transition-fast);
}

/* Estado focus: cuando haces click en el input */
.form-control:focus {
  /* Remover el outline por defecto del navegador */
  outline: none;
  
  /* Borde azul primario */
  border-color: var(--primary-color);
  
  /* Fondo más oscuro */
  background-color: rgba(0, 0, 0, 0.4);
  
  /* Sombra azul alrededor del input */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

/* ======================================
  SECTION 7: TABLAS (Tables)
  Estilos para tablas de datos
   ====================================== */

/* Contenedor de tabla con scroll */
.table-wrapper {
  /* Permitir scroll horizontal */
  overflow-x: auto;
  
  /* Altura máxima: 60% del viewport */
  max-height: 60vh;
  
  /* Permitir scroll vertical */
  overflow-y: auto;
  
  /* Sombra interna para indicar scroll disponible */
  box-shadow: inset -15px 0 15px -15px rgba(0,0,0,0.5), 
              inset 15px 0 15px -15px rgba(0,0,0,0.5);
}

/* Scrollbar personalizado dentro de table-wrapper */
.table-wrapper::-webkit-scrollbar {
  /* Ancho de la scrollbar */
  width: 8px;
  
  /* Alto de la scrollbar */
  height: 8px;
}

/* Fondo de la scrollbar */
.table-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

/* Thumb (parte movible) de la scrollbar */
.table-wrapper::-webkit-scrollbar-thumb {
  /* Color semitransparente */
  background: rgba(255, 255, 255, 0.1);
  
  /* Bordes redondeados */
  border-radius: 4px;
}

/* Tabla de datos */
.data-table {
  /* Ocupar ancho completo */
  width: 100%;
  
  /* Collapsar bordes para evitar duplicados */
  border-collapse: collapse;
  
  /* Alineación de texto a la izquierda */
  text-align: left;
}

/* Celdas de tabla (th = headers, td = datos) */
.data-table th, .data-table td {
  /* Relleno interno generoso */
  padding: 1rem;
  
  /* Borde inferior entre filas */
  border-bottom: 1px solid var(--border-color);
  
  /* Ancho mínimo para evitar texto muy ajustado */
  min-width: 130px;
}

/* Encabezados de tabla */
.data-table th {
  /* Color de texto secundario */
  color: var(--text-muted);
  
  /* Peso de fuente semibold */
  font-weight: 500;
  
  /* Tamaño de fuente pequeño */
  font-size: 0.85rem;
  
  /* Convertir a mayúsculas para énfasis */
  text-transform: uppercase;
  
  /* Evitar que el texto del encabezado quiebre líneas */
  white-space: nowrap;
  
  /* Fijar encabezado arriba durante scroll */
  position: sticky;
  top: 0;
  
  /* Asegurar que el encabezado esté por encima del contenido */
  z-index: 10;
  
  /* Fondo oscuro para el encabezado */
  background-color: rgba(15, 23, 42, 0.85);
  
  /* Efecto glassmorphism en encabezado */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* Sombra sutil bajo el encabezado */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Estado hover en filas de tabla */
.data-table tbody tr:hover {
  /* Fondo muy ligeramente más claro al pasar el ratón */
  background-color: rgba(255, 255, 255, 0.02);
}

/* ======================================
  SECTION 8: BADGES DE ESTADO
  Pequeñas etiquetas para mostrar estado (Pendiente, En proceso, Completado)
   ====================================== */

/* Badge base (todos los estados) */
.status-badge {
  /* Relleno reducido para tamaño pequeño */
  padding: 0.25rem 0.6rem;
  
  /* Bordes muy redondeados (píldora) */
  border-radius: 999px;
  
  /* Tamaño de fuente muy pequeño */
  font-size: 0.8rem;
  
  /* Texto semibold para legibilidad */
  font-weight: 600;
}

/* Badge para estado PENDIENTE */
.status-pending {
  /* Fondo naranja con 20% opacidad */
  background-color: rgba(245, 158, 11, 0.2);
  
  /* Texto naranja */
  color: var(--accent-color);
}

/* Badge para estado EN PROGRESO */
.status-progress {
  /* Fondo azul con 20% opacidad */
  background-color: rgba(59, 130, 246, 0.2);
  
  /* Texto azul */
  color: var(--primary-color);
}

/* Badge para estado COMPLETADO/TERMINADO */
.status-finished {
  /* Fondo verde con 20% opacidad */
  background-color: rgba(16, 185, 129, 0.2);
  
  /* Texto verde */
  color: var(--success-color);
}

/* ======================================
  SECTION 9: UTILIDADES DE HEADER
  Estilos para encabezados de vistas
   ====================================== */

/* Encabezado de vista: contiene título y botones */
.view-header {
  /* Distribución: espacio entre elementos */
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* Espacio abajo del header */
  margin-bottom: 2rem;
  
  /* Permitir que el contenido se ajuste en pantallas pequeñas */
  flex-wrap: wrap;
  
  /* Espacio entre elementos */
  gap: 1rem;
}

/* ======================================
  SECTION 10: FILAS DE FORMULARIO
  Layout para agrupar inputs lado a lado
   ====================================== */

.form-row {
  /* Colocar elementos horizontalmente */
  display: flex;
  
  /* Espacio entre inputs */
  gap: 1rem;
  
  /* Ocupar ancho completo */
  width: 100%;
}

/* Cada input en form-row ocupa espacio igual */
.form-row .form-group {
  /* Ocupar espacio disponible equitativamente */
  flex: 1;
  
  /* Evitar que el contenido cause overflow */
  min-width: 0;
}

/* En pantallas pequeñas, apilar inputs verticalmente */
@media (max-width: 600px) {
  .form-row {
    /* Cambiar a dirección vertical */
    flex-direction: column;
    
    /* Sin espacio entre elementos apilados */
    gap: 0;
  }
}

/* ======================================
  SECTION 11: BOTONES DE ACCIÓN
  Agrupar múltiples botones (editar, eliminar)
   ====================================== */

.action-buttons {
  /* Colocar botones lado a lado */
  display: flex;
  
  /* Espacio entre botones */
  gap: 0.5rem;
  
  /* Permitir que se ajusten en pantallas pequeñas */
  flex-wrap: wrap;
}

/* ======================================
  SECTION 12: BOTONES DEL MODAL
  Botones en la parte inferior del modal
   ====================================== */

.modal-buttons {
  /* Colocar botones horizontalmente */
  display: flex;
  
  /* Espacio entre botones */
  gap: 1rem;
  
  /* Espacio arriba de los botones */
  margin-top: 1.5rem;
  
  /* Permitir ajuste en pantallas pequeñas */
  flex-wrap: wrap;
  
  /* Ocupar ancho completo */
  width: 100%;
}
/* Cada botón del modal ocupa espacio igual */
.modal-buttons .btn {
  /* Ocupar espacio disponible */
  flex: 1; 
  /* Ancho mínimo para evitar botones demasiado pequeños */
  min-width: 100px;
}
/* ======================================
  SECTION 13: TEXTO DE DESCRIPCIÓN
  Para descripciones largas con truncado
   ====================================== */
.description-text {
  /* Ancho máximo para evitar líneas demasiado largas */
  max-width: 250px;
  /* Romper palabras largas para mantener el ancho */
  word-break: break-word;
  /* Preparar para líneas limitadas */
  display: -webkit-box;
  /* Limitar a 3 líneas */
  -webkit-line-clamp: 3;
  line-clamp: 3;
  /* Orientación de caja para líneas */
  -webkit-box-orient: vertical;
  /* Ocultar el texto que excede */
  overflow: hidden;
  /* Puntos suspensivos al final */
  text-overflow: ellipsis;
}
/* ======================================
  SECTION 14: GRILLAS ADAPTATIVAS
  Grillas que se ajustan automáticamente
   ====================================== */
.grid-fluid {
  /* Usar CSS Grid */
  display: grid;
  /* Crear columnas automáticas con tamaño mínimo y máximo
    auto-fit: ajustar número de columnas según espacio
    minmax(250px, 30vw): mínimo 250px, máximo 30% del viewport width
     1fr: último valor es el tamaño flexible */
  grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30vw, 350px), 1fr));
  /* Espacio entre elementos */
  gap: 1.5rem;
  /* Espacio abajo de la grilla */
  margin-bottom: 2rem;
}
/* ========================================
  NOTAS DE IMPLEMENTACIÓN:
  1. BOTONES: Las sombras de color hacen que parezca que
      cada botón tiene su propio "aura" de color
  2. TRANSICIONES: Todos los cambios visuales usan transiciones
      para que sean suaves, no abruptos
  3. TABLAS: El position: sticky en th mantiene encabezados
      visibles mientras scrolleas
  4. BADGES: Los colores semi-opacos mantienen la coherencia
      visual sin saturar
  5. RESPONSIVE: form-row se convierte en columna en móviles
      usando media query
   ======================================== */