/* ============================================================================
   SISCREDI - DOCUMENTOS COMPONENT STYLES
   ============================================================================
   Estilos para el componente de gestión de documentos
   Incluye dropzone, lista de documentos, preview y acciones

   Características:
   - Dropzone con soporte drag & drop
   - Cards de documentos con preview
   - Iconos según tipo de archivo
   - Badges de categoría
   - Responsive design
   ============================================================================ */

/* ==========================================================================
   CONTENEDOR PRINCIPAL
   ========================================================================== */

.documentos-container {
  margin-bottom: var(--bs-spacer-4, 1.5rem);
}

.documentos-header {
  border-bottom: 1px solid var(--bs-border-color-translucent);
  padding-bottom: var(--bs-spacer-3, 1rem);
}

.documentos-titulo {
  color: var(--bs-heading-color);
  font-weight: var(--bs-font-weight-semibold, 600);
  font-size: var(--bs-font-size-base, 1rem);
  display: flex;
  align-items: center;
}

.documentos-contador {
  font-size: 0.75rem;
  font-weight: var(--bs-font-weight-normal, 400);
}

/* ==========================================================================
   ZONA DE UPLOAD / DROPZONE
   ========================================================================== */

.documentos-upload-zone {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background-color: transparent;
}

.documentos-dropzone {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

.documentos-dropzone:hover {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-primary);
}

.documentos-dropzone.border-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  border-color: var(--bs-primary);
}

.documentos-dropzone i {
  color: var(--bs-secondary-color);
  transition: color 0.2s ease-in-out;
}

.documentos-dropzone:hover i,
.documentos-dropzone.border-primary i {
  color: var(--bs-primary);
}

/* Input file oculto */
.documentos-input-file {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   PREVIEW DE ARCHIVOS SELECCIONADOS
   ========================================================================== */

.documentos-archivos-preview {
  max-height: 200px;
  overflow-y: auto;
}

.documentos-archivos-preview .list-group-item {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

.documentos-archivos-preview .list-group-item-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.1);
}

/* ==========================================================================
   BARRA DE PROGRESO
   ========================================================================== */

.documentos-progress .progress {
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

.documentos-progress .progress-bar {
  font-size: 0.75rem;
  font-weight: var(--bs-font-weight-medium, 500);
}

/* ==========================================================================
   ESTADOS (LOADING, VACÍO)
   ========================================================================== */

.documentos-loading,
.documentos-vacio {
  padding: var(--bs-spacer-4, 1.5rem);
  background-color: var(--bs-tertiary-bg);
  border-radius: var(--bs-border-radius);
  border: 1px dashed var(--bs-border-color);
}

.documentos-loading .sc-spinner {
  --sc-spinner-size: 2rem;
}

.documentos-vacio i {
  color: var(--bs-secondary-color);
}

/* ==========================================================================
   GRID DE DOCUMENTOS
   ========================================================================== */

.documentos-grid {
  /* Utiliza el sistema de grid de Bootstrap */
}

/* ==========================================================================
   CARD DE DOCUMENTO INDIVIDUAL
   ========================================================================== */

.documento-card {
  transition: all 0.2s ease-in-out;
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
}

.documento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--bs-primary);
}

/* Preview / Icono del documento */
.documento-preview {
  position: relative;
  overflow: hidden;
}

.documento-icono {
  background-color: var(--bs-tertiary-bg);
  min-height: 100px;
}

.documento-icono i {
  opacity: 0.8;
}

.documento-card:hover .documento-icono i {
  opacity: 1;
}

/* Badge de categoría */
.documento-categoria {
  font-size: 0.65rem;
  font-weight: var(--bs-font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Información del documento */
.documento-nombre {
  font-size: 0.875rem;
  font-weight: var(--bs-font-weight-medium, 500);
  color: var(--bs-body-color);
  max-width: 100%;
}

.documento-info {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

/* ==========================================================================
   BOTONES DE ACCIÓN
   ========================================================================== */

.documento-card .btn-group .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.documento-btn-eliminar {
  opacity: 0.6;
  transition: opacity 0.2s ease-in-out;
}

.documento-card:hover .documento-btn-eliminar {
  opacity: 1;
}

/* ==========================================================================
   ALERTAS
   ========================================================================== */

.documentos-alertas {
  margin-bottom: var(--bs-spacer-3, 1rem);
}

.documentos-alertas .alert {
  margin-bottom: 0;
  font-size: 0.875rem;
}

/* ==========================================================================
   ICONOS POR TIPO DE ARCHIVO
   ========================================================================== */

/* PDF */
.bi-file-earmark-pdf {
  color: var(--bs-danger);
}

/* Imágenes */
.bi-file-earmark-image.text-success {
  color: var(--bs-success);
}

.bi-file-earmark-image.text-info {
  color: var(--bs-info);
}

.bi-file-earmark-image.text-warning {
  color: var(--bs-warning);
}

/* Word */
.bi-file-earmark-word {
  color: var(--bs-primary);
}

/* Excel */
.bi-file-earmark-excel {
  color: var(--bs-success);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablets y móviles */
@media (max-width: 767.98px) {
  .documentos-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .documentos-btn-cargar {
    width: 100%;
  }

  .documento-icono {
    min-height: 80px;
  }

  .documento-card .card-body {
    padding: 0.75rem;
  }

  .documento-card .card-footer {
    padding: 0.75rem;
  }
}

/* Pantallas pequeñas */
@media (max-width: 575.98px) {
  .documento-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .documentos-dropzone {
    padding: 1.5rem 1rem;
  }

  .documentos-dropzone i {
    font-size: 2.5rem;
  }
}

/* ==========================================================================
   TEMA OSCURO (si aplica)
   ========================================================================== */

[data-bs-theme="dark"] .documentos-dropzone {
  background-color: var(--bs-dark-bg-subtle);
}

[data-bs-theme="dark"] .documentos-dropzone:hover,
[data-bs-theme="dark"] .documentos-dropzone.border-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.15);
}

[data-bs-theme="dark"] .documento-card {
  background-color: var(--bs-dark-bg-subtle);
}

[data-bs-theme="dark"] .documento-icono {
  background-color: var(--bs-dark);
}

[data-bs-theme="dark"] .documentos-loading,
[data-bs-theme="dark"] .documentos-vacio {
  background-color: var(--bs-dark-bg-subtle);
  border-color: var(--bs-border-color);
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

@keyframes documentoFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.documento-item {
  animation: documentoFadeIn 0.3s ease-out;
}

/* Stagger animation para múltiples items */
.documento-item:nth-child(1) { animation-delay: 0ms; }
.documento-item:nth-child(2) { animation-delay: 50ms; }
.documento-item:nth-child(3) { animation-delay: 100ms; }
.documento-item:nth-child(4) { animation-delay: 150ms; }
.documento-item:nth-child(5) { animation-delay: 200ms; }
.documento-item:nth-child(6) { animation-delay: 250ms; }

/* ==========================================================================
   INTEGRACIÓN CON FORMULARIOS EXISTENTES
   ========================================================================== */

/* Estilos para inputs de archivo en formularios (estilo existente) */
.form-control[type="file"] {
  padding: 0.375rem 0.75rem;
}

.form-control[type="file"]::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  margin-right: 0.75rem;
  color: var(--bs-btn-color, #fff);
  background-color: var(--bs-btn-bg, var(--bs-primary));
  border: 0;
  border-right: 1px solid var(--bs-border-color);
  transition: background-color 0.15s ease-in-out;
}

.form-control[type="file"]:hover::file-selector-button {
  background-color: var(--bs-primary-hover, var(--bs-primary));
}