/**
 * Estilos: Gestor de Archivos / Intranet
 *
 * Incluye estilos para:
 * - Documentos de producto (frontend)
 * - Gestión de documentos (intranet)
 * - Control de visibilidad por tipo de usuario
 *
 * INSTALACIÓN:
 * 1. Copiar a: themes/child_{tema}/css/gestor-archivos.css
 * 2. Registrar en panel: Ajustes Cache > CSS del tema > añadir: ,css/gestor-archivos.css
 *
 * @package Iridian
 * @date 2026-01-23
 * @updated 2026-02-03
 */

/* ============================================
   DOCUMENTOS DE PRODUCTO (FRONTEND)
   ============================================ */
/* Contenedor principal */
.product-documents { padding: 0 15px 15px; }
.product-documents-title { font-size: clamp(18px, 8.970px + 0.911vw, 22px); margin-bottom: 20px; padding-bottom: 10px; }
/* Grupos de documentos */
.doc-group { margin-bottom: 25px; }
.doc-group:last-child { margin-bottom: 0; }
.doc-group-title { font-size: 16px; font-weight: normal; margin-bottom: 15px; color: #222222; }
/* Lista de documentos */
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-item { display: flex; align-items: center; padding: 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 10px; transition: all 0.3s ease; }
.doc-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-color: #007bff; }
.doc-item:last-child { margin-bottom: 0; }
.doc-item.doc-restricted { opacity: 0.7; background: #f5f5f5; }
.doc-item { --button-color: #ffffff; --button-color-hover: #ffffff; --button-bg-color: var(--main-color-1); --button-bg-color-hover: #222222; --button-font-size: 12px; --button-border-type: solid; --button-border-color: transparent; --button-border-color-hover: transparent; --button-border-radius: 4px; --button-padding-left: 20px; --button-padding-right: 20px; --button-padding-top: 8px; --button-padding-bottom: 8px; --button-border-size: 0; --form-input-font-size: 14px; --form-input-placeholder-font-size: var(--form-input-font-size); --form-textarea-height: auto; }
/* Icono del archivo */
.doc-icon { font-size: 20px; margin-right: 10px; width: 35px; text-align: center; flex-shrink: 0; }
/* Colores por tipo de archivo */
.doc-icon.fa-file-pdf { color: #dc3545; }
.doc-icon.fa-file-word { color: #2b579a; }
.doc-icon.fa-file-excel { color: #217346; }
.doc-icon.fa-file-powerpoint { color: #d24726; }
.doc-icon.fa-file-image { color: #4caf50; }
.doc-icon.fa-file-archive { color: #ff9800; }
.doc-icon.fa-file-alt { color: #6c757d; }
.doc-icon.fa-file { color: #6c757d; }
/* Contenido del documento */
.doc-content { flex: 1; min-width: 0; }
.doc-type, .doc-title { display: block; font-weight: normal; color: #222222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 1; }
.doc-desc { display: block; font-size: 0.85rem; color: #666; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Botones de acción */
.doc-item .btn { flex-shrink: 0; margin-left: 15px; gap: 10px; }
.btn-download { background-color: #28a745; border-color: #28a745; color: #fff; }
.btn-download:hover { background-color: #218838; border-color: #1e7e34; color: #fff; }
.btn-login { background-color: #007bff; border-color: #007bff; color: #fff; }
.btn-login:hover { background-color: #0056b3; border-color: #004085; color: #fff; }
.btn-restricted { background-color: #6c757d; border-color: #6c757d; color: #fff; cursor: not-allowed; }
/* Mensaje de login */
.doc-login-prompt { margin-top: 20px; padding: 12px 15px; background: #e7f3ff; border: 1px solid #b8daff; border-radius: 6px; color: #004085; font-size: 0.95rem; }
.doc-login-prompt a { font-weight: 600; color: #004085; text-decoration: underline; }
.doc-login-prompt a:hover { color: #002752; }

/* ============================================
   GESTIONAR DOCUMENTOS (INTRANET - ADMIN)
   ============================================ */
/* Dropzone */
.gestionar-documentos .dropzone, .gestionar-documentos .dropzone-area { border: 2px dashed #3FBBCA; border-radius: 8px; background: #f0f8fa; min-height: 150px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; transition: all 0.2s ease; padding: 15px; }
.gestionar-documentos .dropzone:hover, .gestionar-documentos .dropzone-area:hover { background: #e3f2f5; border-color: #3d8c97; }
.gestionar-documentos .dropzone .dz-message, .gestionar-documentos .dropzone-area .dz-message { text-align: center; margin: 0; width: 100%; flex-basis: 100%; padding: 20px 0; }
.gestionar-documentos .dropzone .dz-message h5, .gestionar-documentos .dropzone-area .dz-message h5 { margin-bottom: 15px; }
/* Preview de archivos en Dropzone */
.gestionar-documentos .dropzone .dz-preview, .gestionar-documentos .dropzone-area .dz-preview { margin: 10px; background: #fff; border-radius: 8px; border: 1px solid #e0e0e0; padding: 5px; min-width: 140px; vertical-align: top; position: relative; width: 100%; display: grid; align-items: center; gap: 0 20px; grid-template-columns: auto 3fr 1fr; }
.gestionar-documentos .dropzone .dz-preview .dz-image:has(img:not([src]), img[src=""]), .gestionar-documentos .dropzone-area .dz-preview .dz-image:has(img:not([src]), img[src=""]) { display: none; }
.gestionar-documentos .dropzone .dz-preview .dz-image, .gestionar-documentos .dropzone-area .dz-preview .dz-image { border-radius: 6px; overflow: hidden; width: 120px; height: 120px; margin: 0 auto 8px; display: block; margin: 0; width: 30px; height: auto; grid-column: 1; grid-row: 1 / -1; }
.gestionar-documentos .dropzone .dz-preview .dz-image img, .gestionar-documentos .dropzone-area .dz-preview .dz-image img { width: 100%; height: 100%; object-fit: cover; }
.gestionar-documentos .dropzone .dz-preview .dz-details, .gestionar-documentos .dropzone-area .dz-preview .dz-details { text-align: center; padding: 5px 0; font-size: 0.8rem; color: #495057; opacity: 1; position: relative; background: transparent; min-height: auto; display: flex; flex-direction: row-reverse; justify-content: space-between; grid-column: 2 / 3; grid-row: 1; padding: 0; padding-left: 5px; }
.gestionar-documentos .dropzone .dz-preview:has(img:not([src]), img[src=""]) .dz-details, .gestionar-documentos .dropzone-area .dz-preview:has(img:not([src]), img[src=""]) .dz-details { grid-column: 1/3; }
.gestionar-documentos .dropzone .dz-preview .dz-details .dz-filename, .gestionar-documentos .dropzone-area .dz-preview .dz-details .dz-filename { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gestionar-documentos .dropzone .dz-preview .dz-details .dz-filename span, .gestionar-documentos .dropzone-area .dz-preview .dz-details .dz-filename span { background: transparent; border: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; width: 100%; display: block; }
.gestionar-documentos .dropzone .dz-preview .dz-details .dz-size, .gestionar-documentos .dropzone-area .dz-preview .dz-details .dz-size { font-size: 0.75rem; color: #6c757d; margin-bottom: 0; }
.gestionar-documentos .dropzone .dz-preview .dz-details .dz-size span, .gestionar-documentos .dropzone-area .dz-preview .dz-details .dz-size span { background: transparent; border: none; padding: 0; }
.gestionar-documentos .dropzone .dz-preview .dz-remove, .gestionar-documentos .dropzone-area .dz-preview .dz-remove { display: block; text-align: center; margin-top: 8px; font-size: 0.8rem; color: #dc3545; text-decoration: none; cursor: pointer; grid-column: 3; grid-row: 1; text-align: right; margin: 0; padding-right: 5px; }
.gestionar-documentos .dropzone .dz-preview .dz-remove:hover, .gestionar-documentos .dropzone-area .dz-preview .dz-remove:hover { color: #a71d2a; text-decoration: underline; }
.gestionar-documentos .dropzone .dz-preview .dz-progress, .gestionar-documentos .dropzone-area .dz-preview .dz-progress { height: 8px; border-radius: 4px; margin-top: 8px; background: #e9ecef; opacity: 1; position: relative; top: auto; left: auto; width: 100%; grid-column: 2; grid-row: 2; display: none; }
.gestionar-documentos .dropzone .dz-preview .dz-progress .dz-upload, .gestionar-documentos .dropzone-area .dz-preview .dz-progress .dz-upload { background: linear-gradient(135deg, #28a745 0%, #20913c 100%); border-radius: 4px; }
/* Ocultar círculos de éxito/error de Dropzone */
.gestionar-documentos .dropzone .dz-preview .dz-success-mark, .gestionar-documentos .dropzone .dz-preview .dz-error-mark, .gestionar-documentos .dropzone-area .dz-preview .dz-success-mark, .gestionar-documentos .dropzone-area .dz-preview .dz-error-mark { display: none; opacity: 0; visibility: hidden; }
/* Tabla de documentos */
.gestionar-documentos .table { margin-bottom: 0; }
.gestionar-documentos .table thead th { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: #495057; border-bottom: 2px solid #dee2e6; padding: 12px 8px; }
.gestionar-documentos .table td { vertical-align: middle; padding: 12px 8px; border-color: #f0f0f0; }
.gestionar-documentos .table tbody tr { transition: background-color 0.15s ease; }
.gestionar-documentos .table tbody tr:hover { background-color: #f8fbff; }
/* Texto en tabla - asegurar visibilidad */
.gestionar-documentos .table tbody td small { color: #6c757d; background: transparent; }
.gestionar-documentos .table tbody tr:hover td small { color: #495057; }
/* Icono de archivo en tabla */
.gestionar-documentos .file-icon { font-size: 1.25rem; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #f8f9fa; }
/* Colores de iconos por tipo */
.gestionar-documentos .file-icon.fa-file-pdf { color: #dc3545; background: #fdeaea; }
.gestionar-documentos .file-icon.fa-file-word { color: #2b579a; background: #e8f0fa; }
.gestionar-documentos .file-icon.fa-file-excel { color: #217346; background: #e8f5ed; }
.gestionar-documentos .file-icon.fa-file-powerpoint { color: #d24726; background: #fdf0ec; }
.gestionar-documentos .file-icon.fa-file-image { color: #4caf50; background: #edf7ee; }
.gestionar-documentos .file-icon.fa-file-archive { color: #ff9800; background: #fff8e6; }
.gestionar-documentos .file-icon.fa-file-alt, .gestionar-documentos .file-icon.fa-file { color: #6c757d; background: #f5f5f5; }
/* Badges de categoría mejorados */
.gestionar-documentos .badge { font-weight: 500; font-size: 0.75rem; padding: 5px 10px; border-radius: 12px; }
.gestionar-documentos .badge-secondary { background-color: #e9ecef; color: #495057; }
/* Contenedor de botones de acción */
.gestionar-documentos .table td:last-child { white-space: nowrap; }
/* Botones de acción compactos */
.gestionar-documentos .table .btn-action:not([data-toggle]), .gestionar-documentos .btn-action:not([data-toggle]) { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 0.8rem; margin: 0 2px; transition: all 0.15s ease; vertical-align: middle; }
.gestionar-documentos .btn-action i { font-size: 0.8rem; line-height: 0; }
/* Colores de botones de acción */
.gestionar-documentos .table .btn-outline-primary.btn-action, .gestionar-documentos .btn-outline-primary.btn-action { color: #007bff; border-color: #dee2e6; background: #fff; }
.gestionar-documentos .table .btn-outline-primary.btn-action:hover, .gestionar-documentos .btn-outline-primary.btn-action:hover { background: #007bff; border-color: #007bff; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,123,255,0.3); }
.gestionar-documentos .table .btn-outline-success.btn-action, .gestionar-documentos .btn-outline-success.btn-action { color: #28a745; border-color: #dee2e6; background: #fff; }
.gestionar-documentos .table .btn-outline-success.btn-action:hover, .gestionar-documentos .btn-outline-success.btn-action:hover { background: #28a745; border-color: #28a745; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(40,167,69,0.3); }
.gestionar-documentos .table .btn-outline-danger.btn-action, .gestionar-documentos .btn-outline-danger.btn-action { color: #dc3545; border-color: #dee2e6; background: #fff; }
.gestionar-documentos .table .btn-outline-danger.btn-action:hover, .gestionar-documentos .btn-outline-danger.btn-action:hover { background: #dc3545; border-color: #dc3545; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(220,53,69,0.3); }
/* Botones de subir/cancelar archivos */
.gestionar-documentos .card-body #uploadActions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.gestionar-documentos .card-body #uploadActions .btn { border-radius: 6px; padding: 8px 16px; font-weight: 500; font-size: 0.875rem; }
.gestionar-documentos .card-body #uploadActions .btn-secondary { background: #fff; border-color: #dee2e6; color: #6c757d; }
.gestionar-documentos .card-body #uploadActions .btn-secondary:hover { background: #f8f9fa; border-color: #c8cbcf; color: #495057; }
.gestionar-documentos .card-body #uploadActions .btn-success { background: linear-gradient(135deg, #28a745 0%, #20913c 100%); border-color: #28a745; color: #fff; }
.gestionar-documentos .card-body #uploadActions .btn-success:hover { background: linear-gradient(135deg, #218838 0%, #1e7e34 100%); border-color: #1e7e34; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(40,167,69,0.4); }
/* Card headers mejorados */
.gestionar-documentos .card { border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.04); }
.gestionar-documentos .card .card-header { background: #fff; border-bottom: 1px solid #e0e0e0; font-weight: 600; padding: 15px 20px; }
.gestionar-documentos .card .card-header.bg-primary { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); }
/* Contador de documentos */
.gestionar-documentos #docCount { font-size: 0.8rem; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }

/* ============================================
   DOCUMENTOS INTRANET (VISTA USUARIO)
   ============================================ */
.documentos-intranet .categoria-card { border-radius: 8px; overflow: hidden; }
.documentos-intranet .card-header { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); }
.documentos-intranet .card-header .btn-link { color: #333; text-decoration: none; font-weight: 600; }
.documentos-intranet .card-header .btn-link:hover { color: var(--primary-color, #007bff); }
.documentos-intranet .documento-item { transition: background-color 0.2s; }
.documentos-intranet .documento-item:hover { background-color: #f8f9fa; }
.documentos-intranet .documento-item h5 { font-size: 1rem; font-weight: 600; }
.documentos-intranet .list-group-item { border-left: none; border-right: none; }
.documentos-intranet .list-group-item:first-child { border-top: none; }

/* ============================================
   CONTROL DE VISIBILIDAD POR TIPO DE USUARIO
   Nota: Aquí se usa !important porque es crítico
   para la seguridad/control de acceso
   ============================================ */
/* Ocultar para visitantes (tipo 1 o no logueado) */
body.user-type-1 .hide-for-visitors, body.user-type-none .hide-for-visitors { display: none !important; }
/* Ocultar fabricante para tipo 1 */
body.user-type-1 .product-manufacturer, body.user-type-none .product-manufacturer { display: none !important; }
/* Ocultar fichas técnicas para tipo 1 */
body.user-type-1 .doc-group[data-type="ficha_tecnica"], body.user-type-none .doc-group[data-type="ficha_tecnica"] { display: none !important; }
/* Ocultar fichas de seguridad para tipo 1 */
body.user-type-1 .doc-group[data-type="ficha_seguridad"], body.user-type-none .doc-group[data-type="ficha_seguridad"] { display: none !important; }

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

@media (max-width: 991px) {
.product-documents { padding: 0 0 30px; }
.product-documents-title { margin-bottom: 5px; }
#tableDocumentos { border: none; }
}

@media (max-width: 768px) {
/* Tabla de gestión responsive */
.gestionar-documentos .table thead { display: none; }
.gestionar-documentos .table tbody tr { display: block; margin-bottom: 15px; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 15px; background: #fff; }
.gestionar-documentos .table tbody td { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 !important; border: none; border-bottom: 1px solid #f0f0f0; width: auto; }
.gestionar-documentos .table tbody td:last-child { border-bottom: none; justify-content: flex-end; padding-top: 12px; }
.gestionar-documentos .table tbody td:before { content: attr(data-label); font-weight: 600; font-size: 0.8rem; color: #6c757d; /* text-transform: uppercase; */ white-space: nowrap; }
.gestionar-documentos .table tbody td:first-child { display: none; }
.gestionar-documentos .btn-action { width: 40px; height: 40px; margin: 0 4px; }
.gestionar-documentos .docs-header { flex-direction: column; row-gap: 15px; align-items: start; }
.gestionar-documentos .docs-header .btn-action { width: unset; height: unset; margin: 0; }
}

@media (max-width: 576px) {
.doc-item { flex-wrap: wrap; padding: 10px; }
.doc-icon { font-size: 1.5rem; margin-right: 10px; }
.doc-content { flex: 1 1 calc(100% - 100px); }
.doc-item .btn { margin-left: 0; margin-top: 10px; width: 100%; text-align: center; }
.doc-item .btn span { display: inline; }
/* Gestión de documentos en móvil */
.gestionar-documentos .card-header { padding: 12px 15px; }
.gestionar-documentos .card-body { padding: 15px; }
.gestionar-documentos .row.mb-3 > div { margin-bottom: 10px; }
.gestionar-documentos .dropzone .dz-preview .dz-image, .gestionar-documentos .dropzone-area .dz-preview .dz-image{display: none;}
.gestionar-documentos .dropzone, .gestionar-documentos .dropzone-area{padding: 10px;}
}

/* ==========================================
   DROPZONE - OCULTAR CÍRCULOS SUCCESS/ERROR
   ========================================== */
#bulkDropzone .dz-preview .dz-success-mark, #bulkDropzone .dz-preview .dz-error-mark, #bulkDropzone .dz-preview .dz-success-mark, #bulkDropzone .dz-preview .dz-error-mark, .dropzone-bulk .dz-preview .dz-success-mark, .dropzone-bulk .dz-preview .dz-error-mark { display: none; opacity: 0; visibility: hidden; pointer-events: none; width: 0; height: 0; position: absolute; left: -9999px; }
#bulkDropzone .dz-preview .dz-success-mark *, #bulkDropzone .dz-preview .dz-error-mark *, .dropzone-bulk .dz-preview .dz-success-mark *, .dropzone-bulk .dz-preview .dz-error-mark * { display: none; }

/* ==========================================
   BULK UPLOAD MODAL - CARD STYLE PREVIEWS
   ========================================== */
/* Contenedor principal dropzone */
#bulkDropzone { border: 2px dashed #28a745; border-radius: 8px; background: #f8f9fa; min-height: 200px; padding: 20px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 15px; }
#bulkDropzone:hover { background: #e8f5e9; border-color: #1e7e34; }
/* Mensaje cuando está vacío */
#bulkDropzone .dz-message { width: 100%; text-align: center; padding: 30px 20px; margin: 0; }
/* Ocultar mensaje cuando hay archivos */
#bulkDropzone.dz-started .dz-message { display: none; }
/* Card de preview individual */
#bulkDropzone .dz-preview { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; width: 150px; min-height: 180px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.2s ease; position: relative; margin: 0; }
#bulkDropzone .dz-preview:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
/* Thumbnail/imagen */
#bulkDropzone .dz-preview .dz-image { width: 80px; height: 80px; border-radius: 6px; overflow: hidden; margin-bottom: 10px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; }
#bulkDropzone .dz-preview .dz-image img { width: 100%; height: 100%; object-fit: cover; }
/* Detalles del archivo */
#bulkDropzone .dz-preview .dz-details { text-align: center; width: 100%; opacity: 1; position: relative; min-height: auto; padding: 0; background: transparent; }
/* Tamaño del archivo */
#bulkDropzone .dz-preview .dz-details .dz-size { font-size: 0.75rem; color: #6c757d; margin-bottom: 4px; }
#bulkDropzone .dz-preview .dz-details .dz-size span { background: transparent; border: none; padding: 0; }
/* Nombre del archivo */
#bulkDropzone .dz-preview .dz-details .dz-filename { font-size: 0.8rem; font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
#bulkDropzone .dz-preview .dz-details .dz-filename span { background: transparent; border: none; padding: 0; }
/* Barra de progreso */
#bulkDropzone .dz-preview .dz-progress { width: 100%; height: 6px; background: #e9ecef; border-radius: 3px; margin-top: 10px; overflow: hidden; position: relative; opacity: 1; top: auto; left: auto; }
#bulkDropzone .dz-preview .dz-progress .dz-upload { background: linear-gradient(90deg, #28a745, #20c997); height: 100%; border-radius: 3px; transition: width 0.3s ease; }
/* Link para quitar archivo */
#bulkDropzone .dz-preview .dz-remove { display: block; margin-top: 10px; font-size: 0.75rem; color: #dc3545; text-decoration: none; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.15s ease; }
#bulkDropzone .dz-preview .dz-remove:hover { background: #fdeaea; color: #a71d2a; text-decoration: none; }
/* Estados de éxito/error con borde en lugar de círculos */
#bulkDropzone .dz-preview.dz-success { border-color: #28a745; background: #f8fff8; }
#bulkDropzone .dz-preview.dz-error { border-color: #dc3545; background: #fff8f8; }
/* Mensaje de error */
#bulkDropzone .dz-preview .dz-error-message { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #dc3545; color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 0.7rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
#bulkDropzone .dz-preview.dz-error:hover .dz-error-message { opacity: 1; }
/* Responsive para el modal */

@media (max-width: 576px) {
#bulkDropzone { justify-content: center; }
#bulkDropzone .dz-preview { width: 120px; min-height: 160px; }
#bulkDropzone .dz-preview .dz-image { width: 60px; height: 60px; }
#bulkDropzone .dz-preview .dz-details .dz-filename { max-width: 100px; }
}
.gestionar-documentos:not(.no_group) .no_group { display: none; }
.gestionar-documentos:not(.has_group) .has_group { display: none; }
.gestionar-documentos { --button-color: #ffffff; --button-color-hover: #ffffff; --button-bg-color: var(--main-color-1); --button-bg-color-hover: #222222; --button-font-size: 12px; --button-border-type: solid; --button-border-color: transparent; --button-border-color-hover: transparent; --button-border-radius: 4px; --button-padding-left: 20px; --button-padding-right: 20px; --button-padding-top: 8px; --button-padding-bottom: 8px; --button-border-size: 0; --form-input-font-size: 14px; --form-input-placeholder-font-size: var(--form-input-font-size); --form-textarea-height: auto; }
.gestionar-documentos .btn-success { --button-color: #fff; --button-bg-color: #28a745; --button-border-color: #28a745; --button-color-hover: #fff; --button-bg-color-hover: #218838; --button-border-color-hover: #1e7e34; }
.gestionar-documentos .btn-success:disabled { --button-color: #fff; --button-bg-color: #28a745; --button-border-color: #28a745; }
.gestionar-documentos .btn-secondary { --button-color: #fff; --button-bg-color: #6c757d; --button-border-color: #6c757d; --button-color-hover: #fff; --button-bg-color-hover: #5a6268; --button-border-color-hover: #545b62; }
.gestionar-documentos .btn-secondary:disabled { --button-color: #fff; --button-bg-color: #6c757d; --button-border-color: #6c757d; }
.gestionar-documentos .btn-info { --button-color: #fff; --button-bg-color: #17a2b8; --button-border-color: #17a2b8; --button-color-hover: #fff; --button-bg-color-hover: #138496; --button-border-color-hover: #117a8b; }
.gestionar-documentos .btn-info:disabled { --button-color: #fff; --button-bg-color: #17a2b8; --button-border-color: #17a2b8; }
.gestionar-documentos .btn-danger { --button-color: #fff; --button-bg-color: #dc3545; --button-border-color: #dc3545; --button-color-hover: #fff; --button-bg-color-hover: #c82333; --button-border-color-hover: #bd2130; }
.gestionar-documentos .btn-danger:disabled { --button-color: #fff; --button-bg-color: #dc3545; --button-border-color: #dc3545; }
.gestionar-documentos .btn-warning { --button-color: #212529; --button-bg-color: #ffc107; --button-border-color: #ffc107; --button-color-hover: #212529; --button-bg-color-hover: #e0a800; --button-border-color-hover: #d39e00; }
.gestionar-documentos .btn-warning:disabled { --button-color: #212529; --button-bg-color: #ffc107; --button-border-color: #ffc107; }
.gestionar-documentos .btn-action { --button-color: #fff; --button-bg-color: #007bff; --button-border-color: #007bff; --button-color-hover: #fff; --button-bg-color-hover: #0069d9; --button-border-color-hover: #0062cc; }
.gestionar-documentos .btn-action:disabled { --button-color: #fff; --button-bg-color: #007bff; --button-border-color: #007bff; }
.gestionar-documentos #modalEditar .edit-buttons { display: flex; justify-content: end; flex-wrap: wrap; gap: 10px; }
.gestionar-documentos label:has(~ .form-control), .gestionar-documentos label:has(.form-control) { font-size: 16px; }
.gestionar-documentos .modal .modal-dialog { max-width: 700px; }
.gestionar-documentos #uploadActions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: end; }
.gestionar-documentos #uploadActions .btn.dismiss { margin-right: auto; }
.gestionar-documentos #filesCount { font-size: 12px; width: 100%; }
.docs-header { display: flex; justify-content: space-between; padding-bottom: 20px; margin-bottom: 25px; border-bottom: 1px solid #eee; align-items: center; }
.docs-header .docs-title, .intranet-page-header .intranet-page-title { font-size: 22px; font-weight: 600; color: #2d3748; margin: 0 0 4px 0; line-height: 1.2; text-transform: none; }
.docs-header .docs-intro, .intranet-page-header .intranet-page-intro { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.45; }
/* Capçalera unificada per a totes les pàgines de la intranet (excepte la home, que té .docs-header amb botó d'acció) */
.intranet-page-header { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid #d6ebef; }
/* Capçalera unificada per a pàgines d'autenticació (login modal, recuperar pwd, registre) */
.auth-page-header { padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid #d6ebef; text-align: center; }
.auth-page-header .auth-page-title { font-size: 22px; font-weight: 600; color: #2d3748; margin: 0 0 6px 0; line-height: 1.2; text-transform: none; }
.auth-page-header .auth-page-intro { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.45; }
/* Modal d'accés (login) — mateix llenguatge visual que els modals de la intranet */
.auth-modal .modal-content { border: 1px solid #d6ebef; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.auth-modal .auth-modal-body { border-radius: 8px; background: #fff; }
.auth-modal .close { position: absolute; top: 12px; right: 16px; font-size: 24px; line-height: 1; opacity: 0.6; z-index: 2; }
.auth-modal .close:hover { opacity: 1; }
.auth-modal #frm_login .btn-intranet { background: var(--main-color-3); border-color: var(--main-color-3); color: #fff; padding: 10px 28px; }
.auth-modal #frm_login .btn-intranet:hover, .auth-modal #frm_login .btn-intranet:focus { background: #3d8c97; border-color: #3d8c97; color: #fff; }
.auth-modal #frm_login .form-style:focus { border-color: #3FBBCA; box-shadow: 0 0 0 3px rgba(81, 174, 188, .2); }
.auth-modal a { color: #3FBBCA; }
.auth-modal a:hover { color: #3d8c97; }
/* Espai inferior al formulari de recuperar contrasenya */
#frm_recuperar_pwd { margin-bottom: 30px; }
/* Seccions del formulari "Mis datos" */
.misdatos-section { border: 1px solid #d6ebef; border-radius: 8px; padding: 16px 20px 8px 20px; margin: 0 0 18px 0; background: #fff; }
.misdatos-section--title { font-size: 12px; font-weight: 700; color: #3FBBCA; text-transform: uppercase; letter-spacing: 0.5px; width: auto; padding: 0 8px; margin-left: -8px; margin-bottom: 8px; border: none; }
.docs-header-info { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.docs-list { position: relative; container-type: inline-size; container-name: docsList; }
/* === Filtres: layout net i consistent === */
.docs-list:has(#tableDocumentos.no-docs) .filtros-wrapper { display: none !important; }
.docs-list .filtros-wrapper { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; padding: 14px 16px; margin-bottom: 18px; background: #f0f8fa; border: 1px solid #d6ebef; border-radius: 8px; }
/* Cada wrapper de filtre: label a sobre, input a sota */
.docs-list .filtros-wrapper > div { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 180px; margin: 0; }
.docs-list .filtros-wrapper label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; margin: 0 0 4px 2px; }
.docs-list .filtros-wrapper label i { color: #9aa3b2; }
/* Selects + buscador: mateix estil */
.docs-list .filtros-wrapper .filtro-buscar, .docs-list .filtros-wrapper .filtro-gama, .docs-list .filtros-wrapper .filtro-proveedor, .docs-list .filtros-wrapper .filtro-empresa, .docs-list .filtros-wrapper .filtro-categoria { display: block; width: 100%; height: 36px; padding: 6px 10px; font-size: 14px; line-height: 1.4; color: #2d3748; background-color: #fff; border: 1px solid #c5dee3; border-radius: 6px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer; box-sizing: border-box; }
.docs-list .filtros-wrapper .filtro-buscar { cursor: text; }
.docs-list .filtros-wrapper .filtro-buscar:hover, .docs-list .filtros-wrapper select:hover { border-color: #9cc8d0; }
.docs-list .filtros-wrapper .filtro-buscar:focus, .docs-list .filtros-wrapper select:focus { outline: none; border-color: #3FBBCA; box-shadow: 0 0 0 3px rgba(81, 174, 188, .2); }
/* El buscador ocupa una mica més perquè és el filtre més usat */
.docs-list .filtros-wrapper .filtro-buscar-wrapper { flex: 2 1 280px; min-width: 220px; }
/* === Modal "Añadir documento" / "Editar documento": equiparat al disseny de filtres + taula === */
#modalArchivos .modal-content, #modalEditar .modal-content, #modalProductDoc .modal-content { border: 1px solid #d6ebef; border-radius: 8px; }
#modalArchivos .modal-header, #modalEditar .modal-header, #modalProductDoc .modal-header { background: #e3f2f5; border-bottom: 1px solid #bcdee4; padding: 14px 20px; }
#modalArchivos .modal-title, #modalEditar .modal-title, #modalProductDoc .modal-title { color: #2d3748; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
#modalArchivos .modal-body, #modalEditar .modal-body, #modalProductDoc .modal-body { padding: 18px 20px; }
/* Labels: mateix estil que els filtres (uppercase, 12px, gris) */
#modalArchivos .modal-body label, #modalEditar .modal-body label, #modalProductDoc .modal-body label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; margin: 0 0 4px 2px; }
#modalArchivos .modal-body label small, #modalEditar .modal-body label small, #modalProductDoc .modal-body label small { text-transform: none; font-size: 11px; letter-spacing: 0; font-weight: 500; color: #9aa3b2; }
/* Inputs / selects / textarea: mateix estil que els filtres */
#modalArchivos .modal-body .form-control, #modalEditar .modal-body .form-control, #modalProductDoc .modal-body .form-control { height: 36px; padding: 6px 10px; font-size: 14px; line-height: 1.4; color: #2d3748; background-color: #fff; border: 1px solid #c5dee3; border-radius: 6px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box; }
#modalArchivos .modal-body textarea.form-control, #modalEditar .modal-body textarea.form-control, #modalProductDoc .modal-body textarea.form-control { height: auto; min-height: 64px; line-height: 1.45; }
#modalArchivos .modal-body .form-control:hover, #modalEditar .modal-body .form-control:hover, #modalProductDoc .modal-body .form-control:hover { border-color: #9cc8d0; }
#modalArchivos .modal-body .form-control:focus, #modalEditar .modal-body .form-control:focus, #modalProductDoc .modal-body .form-control:focus { outline: none; border-color: #3FBBCA; box-shadow: 0 0 0 3px rgba(81, 174, 188, .2); }
/* Text d'ajuda dins el dropzone */
#modalArchivos .dropzone-area .dz-message h5, #modalArchivos .dropzone .dz-message h5 { font-size: 14px; font-weight: 600; color: #2d3748; }
#modalArchivos .dropzone-area .dz-message p, #modalArchivos .dropzone .dz-message p { font-size: 12px; color: #6b7280; margin-bottom: 0; }
#modalArchivos .dropzone-area .dz-message i, #modalArchivos .dropzone .dz-message i { color: #3FBBCA; }
/* Comptador de fitxers + botons d'acció */
#modalArchivos #filesCount { color: #6b7280; font-size: 12px; }
#modalArchivos #uploadActions .btn-success { background: #3FBBCA; border-color: #3FBBCA; }
#modalArchivos #uploadActions .btn-success:hover:not(:disabled) { background: #3d8c97; border-color: #3d8c97; }
#modalArchivos #uploadActions .btn-success:disabled { background: #c5dee3; border-color: #c5dee3; color: #fff; cursor: not-allowed; opacity: 1; }
#modalArchivos #uploadActions .btn-danger:disabled { background: #e6e6e6; border-color: #e6e6e6; color: #fff; cursor: not-allowed; opacity: 1; pointer-events: none; }
#modalArchivos #uploadActions .btn-danger:not(:disabled):hover { background: #b02a37; border-color: #b02a37; }
/* Botons del modal Editar */
#modalEditar .edit-buttons .btn-success { background: #3FBBCA; border-color: #3FBBCA; }
#modalEditar .edit-buttons .btn-success:hover { background: #3d8c97; border-color: #3d8c97; }
/* Botons del modal "Subir/Editar Documento" de producte */
#modalProductDoc #uploadActions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: end; margin-top: 10px; }
#modalProductDoc #uploadActions .btn.dismiss { margin-right: auto; }
#modalProductDoc #uploadActions .btn-success { background: #3FBBCA; border-color: #3FBBCA; }
#modalProductDoc #uploadActions .btn-success:hover { background: #3d8c97; border-color: #3d8c97; }
#modalProductDoc #currentFileInfo { color: #3FBBCA !important; font-size: 12px; }
/* Menú "opcions" de la intranet: tipografia regular */
#opcions .btn { font-weight: normal; }
/* Estat per defecte (inactiu): cyan molt suau */
#opcions .btn-intranet { background: #e3f2f5; color: #2d3748; border: 1px solid transparent; transition: background .15s ease, color .15s ease; }
#opcions .btn-intranet:hover, #opcions .btn-intranet:focus { background: #c5e2e7; color: #2d3748; }
/* Estat actiu del menú "opcions" de la intranet */
#opcions .btn-intranet.active, #opcions .btn-intranet.active:hover, #opcions .btn-intranet.active:focus { background: var(--main-color-3) !important; color: #fff !important; }
/* Mòbil: cada filtre ocupa la fila completa */

@media (max-width: 575.98px) {
.docs-list .filtros-wrapper { gap: 10px; padding: 12px; }
.docs-list .filtros-wrapper > div { flex: 1 1 100%; min-width: 0; }
}
#tableDocumentos_wrapper { max-height: 500px; overflow-y: auto; overflow-x: hidden; }
/* === DataTables Override === */
/* Wrapper general */
#tableDocumentos_wrapper { font-family: inherit; }
/* Selector "Mostrar X registros" */
#tableDocumentos_length { margin-bottom: 15px; }
#tableDocumentos_length label { font-size: 14px; color: #555; }
#tableDocumentos_length select { border: 1px solid #c5dee3; border-radius: 6px; padding: 4px 8px; margin: 0 5px; font-size: 14px; }
/* Amagar info "Mostrando 1 a 10 de 19 registros" */
#tableDocumentos_info { font-size: 14px; padding-left: 5px; color: #333; }
/* Taula */
#tableDocumentos { border-bottom: unset !important; border-collapse: separate; border-spacing: 0; width: 100% !important; table-layout: fixed; }
/* Headers */
#tableDocumentos thead th { position: sticky; top: 0; z-index: 2; background: #e3f2f5; color: #333; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px; border-bottom: 1px solid #bcdee4; border-top: none; }
/* Treure icones d'ordenació per defecte de DataTables */
#tableDocumentos thead .sorting, #tableDocumentos thead .sorting_asc, #tableDocumentos thead .sorting_desc { background-image: none !important; }
/* Files */
#tableDocumentos tbody td { padding: 10px 12px; border-bottom: 1px solid #e6f0f3; font-size: 14px; vertical-align: middle; }
#tableDocumentos tbody tr:hover { background-color: #edf6f8; }
/* Truncar text llarg al títol del document i nom de fitxer */
#tableDocumentos td.file-name small, #tableDocumentos td.file-title strong { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word; overflow-wrap: anywhere; max-width: none !important; width: 100%; display: block; font-size: 12px; line-height: 1.35; }
#tableDocumentos thead th:nth-child(2) { width: 130px; }
#tableDocumentos thead th:nth-child(3) { width: 120px; }
#tableDocumentos thead th:nth-child(4) { width: 95px; }
#tableDocumentos thead th:nth-child(5) { width: 100px; }
/* Paginació: només fletxes i números, sense textos */
#tableDocumentos_paginate { margin-top: 15px; text-align: right; }
#tableDocumentos_paginate .paginate_button { border: 1px solid #c5dee3 !important; border-radius: 6px !important; padding: 6px 12px !important; margin: 0 2px !important; background: #fff !important; color: #555 !important; font-size: 13px; cursor: pointer; transition: all 0.2s; }
#tableDocumentos_paginate .paginate_button:hover { background: #e3f2f5 !important; color: #3FBBCA !important; border-color: #3FBBCA !important; }
#tableDocumentos_paginate .paginate_button.current { background: #3FBBCA !important; color: #fff !important; border-color: #3FBBCA !important; font-weight: 600; }
#tableDocumentos_paginate .paginate_button.disabled { opacity: 0.4; cursor: default; }
/* Substituir text "Previous"/"Next" per fletxes via CSS */
#tableDocumentos_paginate .paginate_button.previous, #tableDocumentos_paginate .paginate_button.next { font-size: 0; }
#tableDocumentos_paginate .paginate_button.previous::after { font-size: 13px; content: '‹'; }
#tableDocumentos_paginate .paginate_button.next::after { font-size: 13px; content: '›'; }
/* Treure estils per defecte DataTables que sobren */
table.dataTable.no-footer { border-bottom: none; }
td.file-title div { display: flex; justify-content: start; align-items: center; gap: 15px; }
td.file-name small, td.file-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; width: 100%; display: block; }
th.date, td.date { width: 90px; min-width: 80px; }
.dt-top-bar { display: flex; align-items: center; padding: 8px 15px; gap: 15px; }
.dt-top-bar .dataTables_length { margin: 0; }
.dt-top-bar .dataTables_filter { display: none; }

/* === Filtros colapsables en mobile === */
@media (max-width: 767.98px) {
  .docs-list .filtros-wrapper.filtros-collapsed { display: none !important; }
  #toggleFiltros { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; padding: 5px 10px;}
}

/* Bloquear scroll interior cuando hay un modal abierto */
body.modal-open #tableDocumentos_wrapper { overflow: hidden; }

/* Ocultar mensaje dropzone cuando hay archivo cargado */
#dropzoneUpload.dz-started .dz-message { display: none; }

/* Ocultar preview de imagen del dropzone en mobile */
@media (max-width: 575.98px) {
  #dropzoneUpload .dz-preview .dz-image { display: none; }
  #dropzoneUpload .dz-preview { width: 100%; min-height: 0; flex-direction: row; align-items: center; padding: 8px 12px; margin: 0; display: flex; flex-wrap: wrap; gap: 0; }
  #dropzoneUpload .dz-preview .dz-details { text-align: left; }
}

/* === Contenidor d accions de pagina (page-actions) === */
.page-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #e8eaed; }
.page-actions .btn-intranet { background: var(--main-color-3); border: 1px solid var(--main-color-3); color: #fff; padding: 8px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.page-actions .btn-intranet:hover { background: #3d8c97; border-color: #3d8c97; color: #fff; }
.page-actions .btn-intranet.btn-invert { background: #fff; border: 1px solid #c5dee3; color: #2d3748; margin-right: auto; }
.page-actions .btn-intranet.btn-invert:hover { background: #e3f2f5; border-color: #9cc8d0; color: #2d3748; }