/* =========================================== */
/* ESTILOS ESPECÍFICOS PARA VISTA DE USUARIO   */
/* Diseño para la interfaz de usuario final    */
/* Centro de Cambio Global y Sustentabilidad   */
/* =========================================== */

/* =========================================== */
/* BARRA DE HERRAMIENTAS DEL USUARIO           */
/* Contiene buscador y filtros principales     */
/* =========================================== */
.user-toolbar {
    padding: 1.5rem 0;                     /* Espaciado vertical interno: 1.5rem arriba/abajo */
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); /* Degradado sutil de blanco a gris claro */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); /* Sombra suave para dar efecto de elevación */
    margin-bottom: 2rem;                   /* Separación de 2rem con la sección siguiente */
    position: sticky;                      /* Se mantiene fija al hacer scroll */
    top: 0;                                /* Posicionada en la parte superior de la ventana */
    z-index: 1000;                         /* Valor alto para estar por encima de otros elementos */
    border-bottom: 3px solid #2e7d32;      /* Línea verde corporativa de 3px en la parte inferior */
}

/* Contenedor del cuadro de búsqueda */
.user-toolbar .search-box {
    border-radius: 8px;                    /* Bordes redondeados de 8px */
    overflow: hidden;                      /* Oculta cualquier contenido que sobresalga del borde redondeado */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera para profundidad */
}

/* Campo de entrada de texto para búsqueda */
.user-toolbar .search-box input {
    border-left: none;                     /* Elimina el borde izquierdo para unirse mejor con el icono */
    padding: 0.75rem;                      /* Espaciado interno de 0.75rem (12px) */
    font-size: 0.95rem;                    /* Tamaño de fuente ligeramente reducido (95% del tamaño base) */
}

/* Contenedor del icono de búsqueda */
.user-toolbar .search-box .input-group-text {
    border-right: none;                    /* Elimina borde derecho para unión perfecta con el input */
    background-color: white;               /* Fondo blanco para coincidir con el campo de entrada */
}

/* Botón de búsqueda */
.user-toolbar .search-box button {
    padding: 0.75rem 1.5rem;              /* Espaciado interno: 0.75rem vertical, 1.5rem horizontal */
    font-weight: 500;                      /* Grosor de fuente medio (semi-negrita) */
}

/* Elementos select (filtros desplegables) */
.user-toolbar .form-select {
    border-radius: 8px;                    /* Bordes redondeados de 8px */
    padding: 0.75rem;                      /* Espaciado interno de 0.75rem */
    border: 1px solid #ddd;                /* Borde gris claro de 1px */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Sombra muy sutil */
    transition: all 0.3s ease;             /* Transición suave de 0.3 segundos para todos los cambios */
}

/* Estado cuando el select tiene foco (es seleccionado) */
.user-toolbar .form-select:focus {
    border-color: #2e7d32;                 /* Cambia el borde a verde corporativo */
    box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25); /* Resplandor verde al enfocar */
}

/* =========================================== */
/* ENCABEZADO DE LA SECCIÓN                    */
/* Título y subtítulo de la página             */
/* =========================================== */
.section-header {
    padding: 1rem 0;                       /* Espaciado vertical de 1rem (16px) */
    border-bottom: 2px solid #e9ecef;      /* Línea divisoria de 2px gris claro en la parte inferior */
    margin-bottom: 2rem;                   /* Margen inferior de 2rem para separar del contenido */
}

/* Título principal de la sección */
.section-title {
    color: #1a237e;                        /* Color azul oscuro para el título */
    font-weight: 700;                      /* Texto en negrita (peso 700) */
    font-size: 2rem;                       /* Tamaño de fuente grande (2x el tamaño base) */
    margin-bottom: 0.5rem;                 /* Separación de 0.5rem con el subtítulo */
}

/* Subtítulo descriptivo */
.section-subtitle {
    font-size: 1.1rem;                     /* Tamaño de fuente ligeramente aumentado (110%) */
    color: #6c757d;                        /* Color gris para texto secundario */
}

/* =========================================== */
/* CONTENEDOR PRINCIPAL DE TARJETAS            */
/* Organización de todas las tarjetas          */
/* =========================================== */
.user-files-container {
    display: flex;                         /* Usa el modelo de caja flexible (flexbox) */
    flex-direction: column;                /* Organiza los elementos en columna (vertical) */
    gap: 1.25rem;                          /* Espacio de 1.25rem (20px) entre cada tarjeta */
}

/* =========================================== */
/* TARJETAS INDIVIDUALES DE RECURSOS           */
/* Estilos para cada elemento de la lista      */
/* =========================================== */
.user-file-card {
    background: white;                     /* Fondo blanco puro */
    border-radius: 12px;                   /* Bordes muy redondeados (12px) */
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); /* Sombra media para efecto de elevación */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave con curva personalizada */
    border: 1px solid #e0e0e0;             /* Borde gris muy claro de 1px */
    padding: 1.25rem;                      /* Espaciado interno de 1.25rem (20px) */
    position: relative;                    /* Posicionamiento relativo para elementos hijos absolutos */
    overflow: hidden;                      /* Oculta contenido que se salga del área de la tarjeta */
}

/* Efecto cuando el usuario pasa el mouse sobre la tarjeta */
.user-file-card:hover {
    transform: translateY(-4px);           /* Mueve la tarjeta 4px hacia arriba */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); /* Sombra más intensa y extendida */
    border-color: #2e7d32;                 /* Cambia el borde a verde corporativo */
}

/* Estilo para tarjetas de recursos no disponibles */
.user-file-card.unavailable {
    opacity: 0.8;                          /* Reduce la opacidad al 80% para indicar inactividad */
    background-color: #f8f9fa;             /* Fondo gris muy claro para diferenciar visualmente */
}

/* Elimina efectos hover en tarjetas no disponibles */
.user-file-card.unavailable:hover {
    transform: none;                       /* Sin movimiento al hacer hover */
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); /* Mantiene la sombra original */
    border-color: #e0e0e0;                 /* Mantiene el borde gris original */
}

/* Línea decorativa vertical que aparece en el lado izquierdo al hacer hover */
.user-file-card::before {
    content: '';                           /* Pseudo-elemento sin contenido */
    position: absolute;                    /* Posicionamiento absoluto respecto a la tarjeta */
    left: 0;                               /* Pegado al borde izquierdo */
    top: 0;                                /* Pegado al borde superior */
    height: 100%;                          /* Ocupa toda la altura de la tarjeta */
    width: 5px;                            /* Ancho de 5px para la línea */
    background: linear-gradient(to bottom, #2e7d32, #4caf50); /* Degradado vertical de verde oscuro a claro */
    opacity: 0;                            /* Inicialmente invisible */
    transition: opacity 0.3s ease;         /* Transición suave para la opacidad */
}

/* Muestra la línea decorativa cuando se hace hover */
.user-file-card:hover::before {
    opacity: 1;                            /* Hace visible la línea verde */
}

/* =========================================== */
/* CONTENEDOR DE ICONOS                        */
/* Espacio que contiene el icono de cada tipo  */
/* =========================================== */
.file-icon-container {
    padding: 0 1.5rem 0 0;                /* Espaciado: 0 arriba/abajo, 1.5rem derecha, 0 izquierda */
    display: flex;                         /* Usa flexbox para centrar contenido */
    align-items: center;                   /* Centra verticalmente */
    justify-content: center;               /* Centra horizontalmente */
}

/* =========================================== */
/* ICONOS DE TIPOS DE ARCHIVOS                 */
/* Representación visual de cada tipo          */
/* =========================================== */
.file-icon {
    width: 80px;                           /* Ancho fijo de 80px */
    height: 100px;                         /* Alto fijo de 100px (proporción rectangular) */
    position: relative;                    /* Posicionamiento relativo para pseudo-elementos */
    color: white;                          /* Texto blanco dentro del icono */
    text-align: center;                    /* Texto centrado horizontalmente */
    font-size: 12px;                       /* Tamaño de fuente pequeño (12px) */
    font-weight: 600;                      /* Texto semi-negrita (peso 600) */
    display: flex;                         /* Flexbox para centrar contenido */
    align-items: center;                   /* Centra verticalmente */
    justify-content: center;               /* Centra horizontalmente */
    flex-shrink: 0;                        /* Evita que el icono se reduzca en layouts flexibles */
    border-radius: 10px;                   /* Bordes redondeados de 10px */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad al icono */
    transition: all 0.3s ease;             /* Transición suave para todas las propiedades */
}

/* Efecto hover en los iconos */
.user-file-card:hover .file-icon {
    transform: scale(1.05) rotate(-2deg);  /* Aumenta tamaño 5% y rota -2 grados */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Sombra más intensa al hacer hover */
}

/* Texto dentro del icono (ej: "LIB", "REV") */
.icon-text {
    position: relative;                    /* Posicionamiento relativo para estar sobre pseudo-elementos */
    z-index: 2;                            /* Nivel de apilamiento alto para estar visible */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Sombra de texto para mejor legibilidad */
}

/* =========================================== */
/* COLORES ESPECÍFICOS POR TIPO DE ICONO       */
/* Cada tipo tiene su propio esquema de color  */
/* =========================================== */

/* Libro - Azul corporativo */
.file-icon.Libro {
    background: linear-gradient(135deg, #1565C0, #2196F3); /* Degradado azul de oscuro a claro */
}

/* Revista - Rosa/Rojo */
.file-icon.Revista {
    background: linear-gradient(135deg, #C2185B, #E91E63); /* Degradado rosa/rojo */
}

/* Mapa - Verde */
.file-icon.Mapa {
    background: linear-gradient(135deg, #388E3C, #4CAF50); /* Degradado verde */
}

/* Artículo - Púrpura */
.file-icon.Articulo {
    background: linear-gradient(135deg, #7B1FA2, #9C27B0); /* Degradado púrpura */
}

/* Folleto - Naranja */
.file-icon.Folleto {
    background: linear-gradient(135deg, #FF9800, #FFB74D); /* Degradado naranja */
}

/* Disco - Marrón */
.file-icon.Disco {
    background: linear-gradient(135deg, #795548, #8D6E63); /* Degradado marrón */
}

/* =========================================== */
/* CONTENEDOR DE INFORMACIÓN DEL RECURSO       */
/* Área donde va el contenido principal        */
/* =========================================== */
.file-info-container {
    padding: 0 1rem;                       /* Espaciado horizontal de 1rem (16px) */
}

/* =========================================== */
/* INFORMACIÓN DETALLADA DEL RECURSO           */
/* Contiene todos los metadatos del recurso    */
/* =========================================== */
.user-file-info {
    padding: 0.5rem 0;                     /* Espaciado vertical de 0.5rem (8px) */
}

/* =========================================== */
/* TÍTULO DEL RECURSO                          */
/* Nombre principal del documento              */
/* =========================================== */
.file-title {
    font-size: 1.3rem;                     /* Tamaño de fuente 1.3x el base (aprox 20.8px) */
    font-weight: 700;                      /* Texto en negrita */
    color: #1a237e;                        /* Color azul oscuro */
    margin-bottom: 0.5rem;                 /* Separación inferior de 0.5rem */
    line-height: 1.4;                      /* Espaciado entre líneas de 1.4 (40% más que normal) */
    transition: color 0.3s ease;           /* Transición suave para cambio de color */
}

/* Cambia color del título al hacer hover en la tarjeta */
.user-file-card:hover .file-title {
    color: #2e7d32;                        /* Cambia a verde corporativo */
}

/* =========================================== */
/* BADGE DE AÑO                                */
/* Indicador del año de publicación            */
/* =========================================== */
.file-year {
    font-size: 0.8rem;                     /* Tamaño de fuente pequeño (80% del base) */
    padding: 0.25rem 0.75rem;              /* Espaciado interno pequeño */
}

/* =========================================== */
/* METADATOS DEL RECURSO                       */
/* Tipo, idioma, autor, escala, etc.           */
/* =========================================== */
.file-meta {
    display: flex;                         /* Organiza elementos en línea */
    gap: 1rem;                             /* Espacio de 1rem entre elementos */
    margin-bottom: 0.75rem;                /* Separación inferior de 0.75rem */
    flex-wrap: wrap;                       /* Permite que los elementos bajen de línea si no caben */
    align-items: center;                   /* Alinea verticalmente al centro */
}

/* =========================================== */
/* TIPO DE RECURSO (BADGE)                     */
/* Etiqueta que indica el tipo (Libro, Revista)*/
/* =========================================== */
.file-type {
    background-color: #e8f5e8;             /* Fondo verde muy claro */
    color: #2e7d32;                        /* Texto verde corporativo */
    padding: 0.3rem 1rem;                  /* Espaciado interno: 0.3rem vertical, 1rem horizontal */
    border-radius: 20px;                   /* Bordes completamente redondeados (forma de píldora) */
    font-size: 0.8rem;                     /* Tamaño de fuente pequeño */
    font-weight: 600;                      /* Texto semi-negrita */
    text-transform: uppercase;             /* Convierte texto a mayúsculas */
    letter-spacing: 0.5px;                 /* Espaciado entre letras de 0.5px */
}

/* =========================================== */
/* IDIOMA DEL RECURSO                          */
/* Indicador del idioma del documento          */
/* =========================================== */
.file-language {
    color: #666;                           /* Color gris medio */
    font-size: 0.9rem;                     /* Tamaño de fuente 90% del base */
    display: flex;                         /* Flexbox para alinear icono y texto */
    align-items: center;                   /* Centra verticalmente icono y texto */
}

/* =========================================== */
/* AUTOR DEL RECURSO                           */
/* Nombre del autor o creador                  */
/* =========================================== */
.file-author {
    color: #666;                           /* Color gris medio */
    font-size: 0.9rem;                     /* Tamaño de fuente 90% del base */
    display: flex;                         /* Flexbox para alinear icono y texto */
    align-items: center;                   /* Centra verticalmente icono y texto */
}

/* =========================================== */
/* ESCALA (PARA MAPAS)                         */
/* Indicador de escala en mapas                */
/* =========================================== */
.file-scale {
    color: #666;                           /* Color gris medio */
    font-size: 0.9rem;                     /* Tamaño de fuente 90% del base */
    display: flex;                         /* Flexbox para alinear icono y texto */
    align-items: center;                   /* Centra verticalmente icono y texto */
}

/* =========================================== */
/* DESCRIPCIÓN DEL RECURSO                     */
/* Resumen o abstract del documento            */
/* =========================================== */
.file-description {
    color: #555;                           /* Color gris oscuro (más que los metadatos) */
    line-height: 1.6;                      /* Espaciado entre líneas generoso (60% más que normal) */
    margin-bottom: 1rem;                   /* Separación inferior de 1rem */
    font-size: 0.95rem;                    /* Tamaño de fuente 95% del base (ligeramente reducido) */
}

/* =========================================== */
/* PALABRAS CLAVE                              */
/* Etiquetas temáticas del recurso             */
/* =========================================== */
.file-keywords {
    display: flex;                         /* Organiza palabras clave en línea */
    gap: 0.5rem;                           /* Espacio pequeño (0.5rem) entre etiquetas */
    flex-wrap: wrap;                       /* Permite que bajen de línea si no caben */
    margin-bottom: 1rem;                   /* Separación inferior de 1rem */
}

/* Estilo individual de cada palabra clave */
.keyword {
    background-color: #f1f8ff;             /* Fondo azul muy claro */
    color: #1976d2;                        /* Texto azul */
    padding: 0.25rem 0.75rem;              /* Espaciado interno pequeño */
    border-radius: 15px;                   /* Bordes redondeados (forma de píldora) */
    font-size: 0.8rem;                     /* Tamaño de fuente pequeño */
    border: 1px solid #e3f2fd;             /* Borde azul muy claro */
}

/* =========================================== */
/* INFORMACIÓN DE DISPONIBILIDAD               */
/* Cantidad disponible y estado                */
/* =========================================== */
.file-availability {
    display: flex;                         /* Organiza en línea la info y el estado */
    justify-content: space-between;        /* Espacia los elementos a los extremos */
    align-items: center;                   /* Centra verticalmente ambos elementos */
    padding-top: 1rem;                     /* Espaciado superior de 1rem (separación visual) */
    border-top: 1px solid #f0f0f0;         /* Línea divisoria gris muy clara */
    margin-top: 1rem;                      /* Margen superior de 1rem */
}

/* =========================================== */
/* CONTENEDOR DE INFORMACIÓN DE DISPONIBILIDAD */
/* Muestra cantidad disponible y total         */
/* =========================================== */
.availability-info {
    display: flex;                         /* Organiza elementos en columna */
    flex-direction: column;                /* Apila los elementos verticalmente */
    gap: 0.2rem;                           /* Espacio muy pequeño (0.2rem) entre elementos */
}

/* =========================================== */
/* CANTIDAD DISPONIBLE                         */
/* Número de unidades disponibles              */
/* =========================================== */
.available-count {
    font-weight: 600;                      /* Texto semi-negrita */
    color: #333;                           /* Color gris oscuro (casi negro) */
    font-size: 1rem;                       /* Tamaño de fuente normal */
    display: flex;                         /* Flexbox para alinear icono y texto */
    align-items: center;                   /* Centra verticalmente icono y texto */
}

/* =========================================== */
/* CANTIDAD TOTAL                              */
/* Número total de unidades                    */
/* =========================================== */
.total-count {
    color: #666;                           /* Color gris medio (más claro que el disponible) */
    font-size: 0.85rem;                    /* Tamaño de fuente ligeramente reducido */
}

/* =========================================== */
/* ESTADO DEL RECURSO                          */
/* Disponible, No disponible, Pocas unidades   */
/* =========================================== */
.status {
    padding: 0.5rem 1.2rem;                /* Espaciado interno: 0.5rem vertical, 1.2rem horizontal */
    border-radius: 20px;                   /* Bordes completamente redondeados (píldora) */
    font-size: 0.85rem;                    /* Tamaño de fuente reducido */
    font-weight: 600;                      /* Texto semi-negrita */
    text-transform: uppercase;             /* Texto en mayúsculas */
    letter-spacing: 0.5px;                 /* Espaciado entre letras de 0.5px */
    min-width: 140px;                      /* Ancho mínimo para consistencia visual */
    text-align: center;                    /* Texto centrado horizontalmente */
    display: flex;                         /* Flexbox para alinear icono y texto */
    align-items: center;                   /* Centra verticalmente icono y texto */
    justify-content: center;               /* Centra horizontalmente el contenido */
}

/* Estado: Disponible */
.status.available {
    background-color: #e8f5e8;             /* Fondo verde muy claro */
    color: #2e7d32;                        /* Texto verde corporativo */
    border: 1px solid #c8e6c9;             /* Borde verde claro */
}

/* Estado: No disponible */
.status.unavailable {
    background-color: #ffebee;             /* Fondo rojo muy claro */
    color: #c62828;                        /* Texto rojo */
    border: 1px solid #ffcdd2;             /* Borde rojo claro */
}

/* =========================================== */
/* CONTENEDOR DE ACCIONES                      */
/* Área donde va el botón "Ver Recurso"        */
/* =========================================== */
.action-container {
    padding: 0 1rem;                       /* Espaciado horizontal de 1rem */
}

/* =========================================== */
/* BOTÓN "VER RECURSO"                         */
/* Acción principal para ver detalles          */
/* =========================================== */
.view-btn {
    display: flex;                         /* Flexbox para organizar icono y texto */
    flex-direction: column;                /* Apila icono y texto verticalmente */
    align-items: center;                   /* Centra horizontalmente */
    justify-content: center;               /* Centra verticalmente */
    gap: 0.5rem;                           /* Espacio de 0.5rem entre icono y texto */
    background: linear-gradient(135deg, #2e7d32, #4caf50); /* Degradado verde corporativo */
    border: none;                          /* Sin borde por defecto */
    color: white;                          /* Texto blanco */
    padding: 1.25rem 1rem;                 /* Espaciado interno: 1.25rem vertical, 1rem horizontal */
    border-radius: 10px;                   /* Bordes redondeados de 10px */
    cursor: pointer;                       /* Cambia cursor a "mano" al pasar sobre él */
    transition: all 0.3s ease;             /* Transición suave para todos los efectos */
    font-size: 0.9rem;                     /* Tamaño de fuente 90% del base */
    font-weight: 600;                      /* Texto semi-negrita */
    width: 110px;                          /* Ancho fijo de 110px */
    height: 110px;                         /* Alto fijo de 110px (cuadrado) */
    text-align: center;                    /* Texto centrado horizontalmente */
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3); /* Sombra verde sutil */
}

/* Efecto hover en botón habilitado */
.view-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #1b5e20, #2e7d32); /* Degradado verde más oscuro */
    transform: translateY(-2px);           /* Eleva el botón 2px */
    box-shadow: 0 6px 18px rgba(46, 125, 50, 0.4); /* Sombra más intensa y elevada */
}

/* Efecto cuando se hace clic (activo) */
.view-btn:active:not(:disabled) {
    transform: translateY(0);              /* Vuelve a posición original */
}

/* Estado deshabilitado del botón */
.view-btn.disabled {
    background: #adb5bd;                   /* Fondo gris para indicar deshabilitado */
    cursor: not-allowed;                   /* Cursor de "no permitido" */
    opacity: 0.7;                          /* Transparencia al 70% */
    box-shadow: none;                      /* Sin sombra */
}

/* =========================================== */
/* ICONO DENTRO DEL BOTÓN                      */
/* Icono de ojo para "Ver"                     */
/* =========================================== */
.action-icon {
    font-size: 1.5rem;                     /* Tamaño de icono grande (1.5x del texto) */
}

/* =========================================== */
/* TEXTO DENTRO DEL BOTÓN                      */
/* Etiqueta "Ver Recurso"                      */
/* =========================================== */
.action-text {
    font-weight: 600;                      /* Texto semi-negrita */
    font-size: 0.85rem;                    /* Tamaño de fuente ligeramente reducido */
}

/* =========================================== */
/* ESTILOS PARA EL MODAL DE DETALLES           */
/* Ventana emergente con información completa  */
/* =========================================== */

/* Alerta informativa en la parte superior del modal */
.resource-details .alert {
    border-radius: 8px;                    /* Bordes redondeados de 8px */
    border-left: 4px solid #2e7d32;        /* Línea verde vertical a la izquierda */
    background-color: #f8f9fa;             /* Fondo gris muy claro */
}

/* Encabezados de tabla en el modal */
.resource-details .table th {
    width: 40%;                            /* Ancho fijo del 40% para los títulos */
    font-weight: 600;                      /* Texto semi-negrita */
    color: #495057;                        /* Color gris oscuro para texto */
    padding-left: 1.5rem;                  /* Espaciado izquierdo de 1.5rem */
    background-color: #f8f9fa;             /* Fondo gris muy claro para diferenciar */
}

/* Celdas de datos en la tabla del modal */
.resource-details .table td {
    padding-left: 1.5rem;                  /* Espaciado izquierdo de 1.5rem */
    color: #212529;                        /* Color casi negro para buen contraste */
}

/* Efecto hover en filas de la tabla */
.resource-details .table-hover tbody tr:hover {
    background-color: #f1f8ff;             /* Fondo azul muy claro al pasar el mouse */
}

/* =========================================== */
/* ICONOS PEQUEÑOS PARA EL MODAL               */
/* Versión reducida de los iconos principales  */
/* =========================================== */
.small-file-icon {
    width: 40px;                           /* Ancho reducido a 40px (mitad del original) */
    height: 50px;                          /* Alto reducido a 50px (mitad del original) */
    border-radius: 6px;                    /* Bordes menos redondeados (6px) */
    display: flex;                         /* Flexbox para centrar contenido */
    align-items: center;                   /* Centra verticalmente */
    justify-content: center;               /* Centra horizontalmente */
    font-size: 10px;                       /* Tamaño de fuente muy pequeño */
    font-weight: 600;                      /* Texto semi-negrita */
    color: white;                          /* Texto blanco */
    position: relative;                    /* Para posibles pseudo-elementos */
}

/* Colores para iconos pequeños (mismos que los grandes) */
.small-file-icon.libro {
    background: linear-gradient(135deg, #1565C0, #2196F3);
}

.small-file-icon.revista {
    background: linear-gradient(135deg, #C2185B, #E91E63);
}

.small-file-icon.mapa {
    background: linear-gradient(135deg, #388E3C, #4CAF50);
}

.small-file-icon.articulo {
    background: linear-gradient(135deg, #7B1FA2, #9C27B0);
}

.small-file-icon.folleto {
    background: linear-gradient(135deg, #FF9800, #FFB74D);
}

.small-file-icon.disco {
    background: linear-gradient(135deg, #795548, #8D6E63);
}

/* =========================================== */
/* CLASE UTILITARIA PARA ANCHO DE COLUMNA      */
/* Define el 40% del ancho para tablas         */
/* =========================================== */
.w-40 {
    width: 40% !important;                 /* Ancho del 40%, !important para prioridad */
}

/* =========================================== */
/* BOTONES EN EL PIE DEL MODAL                 */
/* Estilos para botones de cerrar, etc.        */
/* =========================================== */
.modal-footer .btn {
    min-width: 100px;                      /* Ancho mínimo de 100px para consistencia */
}

/* =========================================== */
/* ESPACIADO ADICIONAL PARA SEPARAR ICONOS     */
/* Añade espacio y línea divisoria a iconos    */
/* =========================================== */
.user-file-card .row > .col-auto:first-child {
    padding-right: 1.5rem;                 /* Espacio adicional de 1.5rem a la derecha del icono */
    border-right: 1px solid #f0f0f0;       /* Línea divisoria sutil gris muy claro */
}

/* Cambia color de la línea divisoria al hacer hover */
.user-file-card:hover .row > .col-auto:first-child {
    border-right-color: rgba(46, 125, 50, 0.2); /* Verde muy transparente al hacer hover */
}

/* =========================================== */
/* PAGINACIÓN                                  */
/* Navegación entre páginas de resultados      */
/* =========================================== */
.pagination {
    margin-top: 2rem;                      /* Separación superior de 2rem del contenido */
}

/* Enlaces de paginación */
.pagination .page-link {
    color: #2e7d32;                        /* Color verde corporativo */
    border: 1px solid #e0e0e0;             /* Borde gris claro */
    margin: 0 2px;                         /* Margen horizontal pequeño de 2px */
    border-radius: 6px;                    /* Bordes redondeados de 6px */
    transition: all 0.3s ease;             /* Transición suave para efectos */
}

/* Efecto hover en enlaces de paginación */
.pagination .page-link:hover {
    background-color: #e8f5e8;             /* Fondo verde muy claro */
    border-color: #2e7d32;                 /* Borde verde */
    color: #2e7d32;                        /* Texto verde (se mantiene igual) */
}

/* Página activa actual */
.pagination .page-item.active .page-link {
    background-color: #2e7d32;             /* Fondo verde sólido */
    border-color: #2e7d32;                 /* Borde verde */
    color: white;                          /* Texto blanco para contraste */
}

/* =========================================== */
/* MEDIA QUERIES - DISEÑO RESPONSIVO           */
/* Ajustes para diferentes tamaños de pantalla */
/* =========================================== */

/* =========================================== */
/* TABLETAS GRANDES (max-width: 992px)         */
/* Pantallas como tablets horizontales         */
/* =========================================== */
@media (max-width: 992px) {
    /* Reduce padding de tarjetas */
    .user-file-card {
        padding: 1rem;                     /* Reduce padding de 1.25rem a 1rem */
    }
    
    /* Reduce espacio alrededor del icono */
    .file-icon-container {
        padding: 0 1rem;                   /* Reduce espacio derecho de 1.5rem a 1rem */
    }
    
    /* Reduce tamaño del icono */
    .file-icon {
        width: 70px;                       /* Reduce ancho de 80px a 70px */
        height: 90px;                      /* Reduce alto de 100px a 90px */
    }
    
    /* Reduce tamaño del botón */
    .view-btn {
        width: 100px;                      /* Reduce ancho de 110px a 100px */
        height: 100px;                     /* Reduce alto de 110px a 100px */
    }
}

/* =========================================== */
/* TABLETAS (max-width: 768px)                 */
/* Tablets verticales y pantallas pequeñas     */
/* =========================================== */
@media (max-width: 768px) {
    /* Reduce padding de la barra de herramientas */
    .user-toolbar {
        padding: 1rem 0;                   /* Reduce padding vertical de 1.5rem a 1rem */
    }
    
    /* Añade espacio entre filas en barra de herramientas */
    .user-toolbar .row {
        gap: 1rem;                         /* Espacio de 1rem entre elementos */
    }
    
    /* Reduce tamaño del título de sección */
    .section-title {
        font-size: 1.5rem;                 /* Reduce de 2rem a 1.5rem */
    }
    
    /* Cambia a disposición vertical en tarjetas */
    .user-file-card {
        flex-direction: column;            /* Cambia de fila a columna */
        padding: 1.25rem;                  /* Restaura padding original */
    }
    
    /* Ajusta espaciado del icono para móvil */
    .file-icon-container {
        padding: 0;                        /* Elimina padding horizontal */
        margin-bottom: 1rem;               /* Añade margen inferior de 1rem */
    }
    
    /* Reduce aún más el icono */
    .file-icon {
        width: 60px;                       /* Reduce a 60px de ancho */
        height: 80px;                      /* Reduce a*/
    }
}