/* ===== Resaltado al volver desde Perfil ===== */
.user-highlight {
  animation: flash-row 1.2s ease-in-out 2;
  background-color: rgba(50, 115, 220, 0.12) !important;
}

@keyframes flash-row {
  0% { background-color: rgba(50, 115, 220, 0.12); }
  50% { background-color: rgba(50, 115, 220, 0.28); }
  100% { background-color: rgba(50, 115, 220, 0.12); }
}

.blink-edit {
  animation: blink 0.5s step-start 6;
}

@keyframes blink {
  50% { opacity: 0.3; }
}

.file-icon-large {
  font-size: 2.5em;
  line-height: 1;
}

/* ===== ICONOS FONT AWESOME DE ARCHIVOS ===== */
.file-icon-fa {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* ===== ICONOS PNG DE ARCHIVOS ===== */
.file-icon-png {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  object-fit: contain;
}

/* Iconos grandes para vista de iconos */
.file-icon-large .file-icon-fa {
  font-size: 2.5em;
  margin-right: 0;
}

.file-icon-large .file-icon-png {
  margin-right: 0;
}

/* Iconos en tablas */
.table .file-icon-fa {
  font-size: 1.2em;
  margin-right: 8px;
}

.table .file-icon-png {
  margin-right: 8px;
}

/* Colores específicos para cada tipo de archivo */
.file-icon-fa.fa-file-word { color: #2B579A; }        /* Word - Azul */
.file-icon-fa.fa-file-excel { color: #217346; }       /* Excel - Verde */
.file-icon-fa.fa-file-powerpoint { color: #D24726; }  /* PowerPoint - Rojo */
.file-icon-fa.fa-file-pdf { color: #DC143C; }         /* PDF - Rojo */
.file-icon-fa.fa-file-lines { color: #6B7280; }       /* TXT - Gris */
.file-icon-fa.fa-file-csv { color: #217346; }         /* CSV - Verde */
.file-icon-fa.fa-file-image { color: #10B981; }       /* Imagen - Verde */
.file-icon-fa.fa-file-video { color: #8B5CF6; }       /* Video - Púrpura */
.file-icon-fa.fa-file-audio { color: #F59E0B; }       /* Audio - Naranja */
.file-icon-fa.fa-file-zipper { color: #EF4444; }      /* Comprimido - Rojo */
.file-icon-fa.fa-file-code { color: #1F2937; }        /* Código - Negro */
.file-icon-fa.fa-file { color: #6B7280; }             /* Genérico - Gris */

/* Iconos en móvil */
@media (max-width: 768px) {
  .file-icon-fa {
    font-size: 1em;
    margin-right: 6px;
  }
  
  .file-icon-png {
    margin-right: 6px;
  }
  
  .file-icon-large .file-icon-fa {
    font-size: 2em;
  }
  
  .table .file-icon-fa {
    font-size: 1.1em;
    margin-right: 6px;
  }
  
  .table .file-icon-png {
    margin-right: 6px;
  }
}

/* Iconos extra pequeños para móvil */
@media (max-width: 480px) {
  .file-icon-fa {
    font-size: 0.9em;
    margin-right: 4px;
  }
  
  .file-icon-png {
    margin-right: 4px;
  }
  
  .file-icon-large .file-icon-fa {
    font-size: 1.8em;
  }
  
  .table .file-icon-fa {
    font-size: 1em;
    margin-right: 4px;
  }
  
  .table .file-icon-png {
    margin-right: 4px;
  }
  
  /* Ajustes para móvil en celdas de archivos */
  .table .file-name-cell a {
    flex-direction: row;
    align-items: center;
  }
  
  .table .file-name-cell .file-icon-png {
    flex-shrink: 0;
    margin-right: 4px;
  }
  
  .table .file-name-cell a > span {
    flex: 1;
    min-width: 0;
  }
}

.file-name {
  max-height: 3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.buttons.are-small .button {
  margin: 0.1em;
}

.box.has-background-black-ter {
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.box.has-background-black-ter:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border-color: #3273dc;
}

.buttons.are-centered {
  justify-content: center;
}

/* Estilos para checkboxes */
.checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* ===== PROTECCIÓN: CSS SIMPLE QUE FUNCIONABA BIEN ===== */
/* Esta lógica simple permite que los checkboxes aparezcan/desaparezcan sin romper el layout */
/* Si se rompe, restaurar a esta versión que funcionaba perfectamente */
/* NO TOCAR - FUNCIONA BIEN CON ROLES */

/* ===== ESTILOS ESPECÍFICOS PARA TABLA DE USUARIOS ===== */
/* Mejoras de orden y alineación para la página de usuarios */
.table.user-table {
  table-layout: fixed; /* Control de ancho de columnas */
}

.table.user-table th,
.table.user-table td {
  padding: 0.4rem 0.5rem; /* Padding más compacto */
  vertical-align: middle;
}

/* Columna de checkbox más compacta */
.table.user-table th:first-child,
.table.user-table td:first-child {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0.3rem 0.2rem;
  text-align: center;
}

/* Columna de nombre con mejor espaciado */
.table.user-table th:nth-child(2),
.table.user-table td:nth-child(2) {
  width: 25%;
  min-width: 150px;
}

/* Columnas de email y empresa */
.table.user-table th:nth-child(3),
.table.user-table td:nth-child(3),
.table.user-table th:nth-child(4),
.table.user-table td:nth-child(4) {
  width: 20%;
  min-width: 120px;
}

/* Columna de rol más compacta */
.table.user-table th:nth-child(5),
.table.user-table td:nth-child(5) {
  width: 10%;
  min-width: 80px;
  text-align: center;
}

/* Columna de subir más compacta */
.table.user-table th:nth-child(6),
.table.user-table td:nth-child(6) {
  width: 8%;
  min-width: 60px;
  text-align: center;
}

/* Columna de acciones más compacta */
.table.user-table th:last-child,
.table.user-table td:last-child {
  width: 17%;
  min-width: 200px;
  text-align: right;
}

/* Botones de acciones más compactos */
.table.user-table .buttons.is-grouped {
  margin: 0;
  gap: 0.2rem;
}

.table.user-table .buttons.is-grouped .button {
  margin: 0;
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
}

/* Tags más compactos */
.table.user-table .tag {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  margin: 0;
}

/* Iconos de usuario más pequeños */
.table.user-table .file-name-cell {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.table.user-table .file-name-cell .icon {
  font-size: 0.8rem;
  margin: 0;
}

/* ===== ESTILOS PARA CARDS MÓVILES DE USUARIOS ===== */
.user-card {
  background-color: #2a2a2a;
  border: 1px solid #4a4a4a;
  border-radius: 8px;
}

.user-card .card-content {
  padding: 1rem;
}

.user-card .title.is-6 {
  margin-bottom: 0.25rem;
  color: #ffffff;
}

.user-card .subtitle.is-7 {
  margin-bottom: 0.5rem;
  color: #b5b5b5;
}

.user-card .content p {
  margin-bottom: 0.5rem;
  color: #e0e0e0;
}

.user-card .content strong {
  color: #ffffff;
}

.user-card .buttons {
  margin-top: 0.75rem;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.user-card .buttons .button {
  margin: 0;
  flex: 1;
  min-width: calc(50% - 0.125rem);
}

/* Checkbox en cards móviles */
.user-card .user-checkbox {
  margin-right: 0.5rem;
}

/* Tags en cards móviles */
.user-card .tag {
  font-size: 0.65rem;
  padding: 0.15rem 0.3rem;
}

/* ===== ESTILOS PARA BÚSQUEDA ===== */
#search-users {
  border-radius: 20px;
  padding-left: 2.5rem;
  transition: all 0.3s ease;
}

#search-users:focus {
  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
  border-color: #485fc7;
}

#search-results-count {
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

/* Animación para elementos que aparecen/desaparecen */
.user-item, .user-card {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.user-item[style*="display: none"], .user-card[style*="display: none"] {
  opacity: 0;
  transform: scale(0.95);
}

/* ===== ESTILOS PARA CONTADOR DE BÚSQUEDA ===== */
#search-results-container {
  transition: all 0.3s ease;
}

/* ===== ESTILOS ESPECÍFICOS PARA TABLA DE EMPRESAS ===== */
/* Mejoras de orden y alineación para la página de empresas */
.table.empresa-table {
  table-layout: fixed; /* Control de ancho de columnas */
}

.table.empresa-table th,
.table.empresa-table td {
  padding: 0.4rem 0.5rem; /* Padding más compacto */
  vertical-align: middle;
}

/* Columna de checkbox más compacta */
.table.empresa-table th:first-child,
.table.empresa-table td:first-child {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0.3rem 0.2rem;
  text-align: center;
}

/* Columnas con anchos específicos */
.table.empresa-table .nombre-column {
  width: 30%;
  min-width: 200px;
}

.table.empresa-table .ruc-column {
  width: 15%;
  min-width: 120px;
}

.table.empresa-table .usuarios-column {
  width: 15%;
  min-width: 100px;
}

.table.empresa-table .fecha-column {
  width: 15%;
  min-width: 100px;
}

.table.empresa-table .acciones-column {
  width: 25%;
  min-width: 150px;
}

/* Estilos para celdas específicas */
.empresa-name-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.empresa-name {
  font-weight: 500;
  color: #363636;
}

/* Botones de acciones más compactos */
.table.empresa-table .buttons.are-small {
  margin-bottom: 0;
}

.table.empresa-table .button.is-small {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Tags más compactos */
.table.empresa-table .tag.is-small {
  font-size: 0.65rem;
  padding: 0.2rem 0.4rem;
}

/* ===== ESTILOS PARA CARDS MÓVILES DE EMPRESAS ===== */
.empresa-card {
  background-color: #2a2a2a;
  border: 1px solid #4a4a4a;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.empresa-card:hover {
  border-color: #3273dc;
  box-shadow: 0 2px 8px rgba(50, 115, 220, 0.2);
}

.empresa-card .card-content {
  padding: 1rem;
}

.empresa-card .title.is-6 {
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.empresa-card .subtitle.is-7 {
  color: #b5b5b5;
  margin-bottom: 0.5rem;
}

.empresa-card .content.is-small {
  color: #dbdbdb;
  margin-bottom: 0.75rem;
}

.empresa-card .content.is-small p {
  margin-bottom: 0.25rem;
}

.empresa-card .buttons.are-small {
  margin-top: 0.5rem;
}

.empresa-card .button.is-small {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Checkbox en cards móviles */
.empresa-card .checkbox {
  margin-right: 0.75rem;
}

.empresa-card .checkbox input[type="checkbox"] {
  margin-right: 0.25rem;
}

/* Tags en cards móviles */
.empresa-card .tag.is-info.is-small {
  font-size: 0.65rem;
  padding: 0.2rem 0.4rem;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .empresa-card .level.is-mobile {
    align-items: flex-start;
  }
  
  .empresa-card .level-left {
    flex-basis: auto;
    flex-grow: 1;
  }
  
  .empresa-card .level-right {
    flex-basis: auto;
    flex-shrink: 0;
  }
  
  .empresa-card .buttons.are-small {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

/* ===== ESTILOS ESPECÍFICOS PARA PERFIL ===== */
/* Avatar grande para vista web */
.avatar-circle-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3273dc, #23d160);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 2rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Avatar normal para vista móvil */
.avatar-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3273dc, #23d160);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Tabla de perfil - Estilos compatibles con temas */
.table.profile-table {
  border: none;
  background-color: transparent;
}

.table.profile-table td {
  border: none;
  padding: 0.75rem 0.5rem;
  vertical-align: middle;
}

/* Anchos específicos para la tabla de perfil */
.table.profile-table th:first-child,
.table.profile-table td:first-child {
  width: 40%;
  min-width: 180px;
  max-width: 250px;
}

.table.profile-table th:last-child,
.table.profile-table td:last-child {
  width: 60%;
}

/* Asegurar que el texto se ajuste correctamente */
.table.profile-table td.has-text-weight-semibold {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Card móvil de perfil */
.profile-mobile-card {
  background-color: #2a2a2a;
  border: 1px solid #4a4a4a;
  border-radius: 8px;
}

.profile-mobile-card .card-content {
  padding: 1.5rem;
}

.profile-mobile-card .title.is-5 {
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.profile-mobile-card .subtitle.is-6 {
  color: #b5b5b5;
  margin-bottom: 1rem;
}

.profile-mobile-card .field {
  margin-bottom: 1rem;
}

.profile-mobile-card .label.is-small {
  color: #b5b5b5;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.profile-mobile-card .input.is-static {
  background-color: #363636;
  border-color: #4a4a4a;
  color: #ffffff;
}

/* ===== ESTILOS PARA CAMBIO DE CONTRASEÑA ===== */
/* Indicador de fortaleza de contraseña */
.password-strength {
  margin-top: 0.5rem;
}

.password-strength .progress {
  height: 0.5rem;
  border-radius: 0.25rem;
}

.password-strength .progress.is-danger {
  background-color: #ff3860;
}

.password-strength .progress.is-warning {
  background-color: #ffdd57;
}

.password-strength .progress.is-info {
  background-color: #3273dc;
}

.password-strength .progress.is-success {
  background-color: #23d160;
}

/* Consejos de seguridad */
.notification.is-info {
  background-color: #1e3a8a;
  border: 1px solid #3b82f6;
}

.notification.is-info .title.is-6 {
  color: #ffffff;
}

.notification.is-info ul {
  color: #e5e7eb;
}

.notification.is-info li {
  margin-bottom: 0.25rem;
}

/* Botones de acción */
.field.is-grouped .button {
  margin-right: 0.5rem;
}

.field.is-grouped .button:last-child {
  margin-right: 0;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .avatar-circle-large {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .profile-mobile-card .card-content {
    padding: 1rem;
  }
  
  .notification.is-info {
    margin-top: 1rem;
  }
  
  .columns .column.is-4 {
    margin-top: 1rem;
  }
}

/* ===== DESKTOP - SOLO WEB (NO TOCAR) ===== */
@media (min-width: 769px) {
  /* Estilos básicos para la tabla - SIMPLE Y EFECTIVO */
  .table th,
  .table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.5rem;
  }
}

/* Columna de nombre de archivo con ancho flexible */
.file-name-cell {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Asegurar alineación vertical */
.table tbody tr td {
  vertical-align: middle !important;
}

/* Para iconos de emoji/texto en las celdas de nombre */
.table .file-name-cell a {
  display: flex !important;
  align-items: center !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  max-width: 100%;
  overflow: hidden;
}

/* Asegurar que el icono no se comprima */
.table .file-name-cell .file-icon-png {
  flex-shrink: 0;
  margin-right: 8px;
}

/* El texto debe truncarse, no el icono */
.table .file-name-cell a > span:not(.file-icon-png) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

/* ===== ALINEACIÓN DE HEADERS ===== */
/* Forzar alineación a la izquierda del header "Nombre" para superusuarios (columna 3) */
.table thead tr th:nth-child(3) {
  text-align: left !important;
  padding-left: 0.25rem !important;
}

/* ===== ANCHOS RESPONSIVOS DE TABLAS ===== */
/* Dashboard y Folder View - Distribución inteligente de columnas */

/* Forzar layout fijo para que los anchos se respeten */
.table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* Desktop y Tablet (769px+) */
@media (min-width: 769px) {
  /* Tabla con checkbox (dashboard y folder_view) */
  .table thead tr th:nth-child(1) {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }
  
  /* Columna Nombre - Flexible, toma el espacio restante */
  .table thead tr th:nth-child(2) {
    width: auto !important;
    min-width: 300px !important;
    max-width: none !important;
  }
  
  /* Columna Tamaño - 150px responsivo */
  .table thead tr th:nth-child(3) {
    width: 150px !important;
    min-width: 120px !important;
    max-width: 180px !important;
    text-align: center !important;
  }
  
  /* Columna Fecha/Creado - 150px responsivo */
  .table thead tr th:nth-child(4) {
    width: 150px !important;
    min-width: 120px !important;
    max-width: 180px !important;
    text-align: center !important;
  }
  
  /* Columna Actualizado/Acciones - 150px responsivo */
  .table thead tr th:nth-child(5) {
    width: 150px !important;
    min-width: 120px !important;
    max-width: 180px !important;
    text-align: center !important;
  }
  
  /* Estilos específicos para columnas de acciones con botones */
  .table tbody tr td:nth-child(5) .buttons {
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }
  
  .table tbody tr td:nth-child(5) .button {
    min-width: auto !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  /* Aplicar anchos a las celdas del tbody también */
  .table tbody tr td:nth-child(1) {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }
  
  .table tbody tr td:nth-child(2) {
    width: auto !important;
    min-width: 300px !important;
    max-width: none !important;
  }
  
  .table tbody tr td:nth-child(3) {
    width: 150px !important;
    min-width: 120px !important;
    max-width: 180px !important;
    text-align: center !important;
  }
  
  .table tbody tr td:nth-child(4) {
    width: 150px !important;
    min-width: 120px !important;
    max-width: 180px !important;
    text-align: center !important;
  }
  
  .table tbody tr td:nth-child(5) {
    width: 150px !important;
    min-width: 120px !important;
    max-width: 180px !important;
    text-align: center !important;
  }
  
  /* Asegurar que el texto se trunque SOLO en columnas de fecha/tamaño, NO en nombre */
  .table tbody tr td:nth-child(3),
  .table tbody tr td:nth-child(4),
  .table tbody tr td:nth-child(5) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
  
  /* La columna de nombre (columna 2) NO debe tener truncamiento forzado */
  .table tbody tr td:nth-child(2) {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* El span dentro de la celda de nombre tampoco debe truncarse */
  .table tbody tr td:nth-child(2) span {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: none !important;
  }
}

/* Tablet pequeño (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
  /* Reducir anchos en tablet pequeño */
  .table thead tr th:nth-child(3),
  .table thead tr th:nth-child(4),
  .table thead tr th:nth-child(5),
  .table tbody tr td:nth-child(3),
  .table tbody tr td:nth-child(4),
  .table tbody tr td:nth-child(5) {
    width: 120px !important;
    min-width: 100px !important;
    max-width: 140px !important;
    text-align: center !important;
  }
}

/* Pantallas grandes (1200px+) */
@media (min-width: 1200px) {
  /* Aumentar anchos en pantallas grandes */
  .table thead tr th:nth-child(3),
  .table thead tr th:nth-child(4),
  .table thead tr th:nth-child(5),
  .table tbody tr td:nth-child(3),
  .table tbody tr td:nth-child(4),
  .table tbody tr td:nth-child(5) {
    width: 180px !important;
    min-width: 150px !important;
    max-width: 200px !important;
    text-align: center !important;
  }
}

/* ===== FIX: evitar colapso de la columna "Nombre" (columna 2) en desktop ===== */
@media (min-width: 769px) {
  .table thead tr th:nth-child(2),
  .table tbody tr td:nth-child(2) {
    min-width: 320px !important;
    width: auto !important;
    text-align: left !important;
  }
}

/* Forzar alineación a la izquierda del header "Nombre" para usuarios regulares (columna 1) */
.table thead tr th:nth-child(1) {
  text-align: left !important;
  padding-left: 0.25rem !important;
}

/* ===== CORRECCIÓN: ALINEACIÓN CHECKBOX MAESTRO Y HIJOS ===== */
/* Asegurar que checkbox maestro y checkboxes hijos estén perfectamente alineados */
.table thead tr th:nth-child(1),
.table tbody tr td:nth-child(1) {
  padding-left: 0.25rem !important;  /* MISMO padding para ambos */
  text-align: left !important;       /* MISMA alineación para ambos */
}

/* ===== CORRECCIÓN: ALINEACIÓN CHECKBOX MAESTRO Y HIJOS EN FOLDER_VIEW ===== */
/* Asegurar que checkbox maestro y checkboxes hijos estén perfectamente alineados en folder_view */
/* Usa la misma estructura que dashboard, por lo que aplica la misma corrección */

/* Estilos para evitar desbordamiento en la tabla */
.table {
  table-layout: fixed;
  width: 100%;
}

.table th,
.table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.5rem;
}

/* ===== DESKTOP - SOLO WEB (NO TOCAR) ===== */
@media (min-width: 769px) {
  /* ===== MEJORAS EN TABLAS - ESPACIADO DE COLUMNAS ===== */

  /* Columna de nombre de archivo con más espacio (aplicable a todas las tablas) */
  .file-name-cell {
    max-width: none; /* Permitir que se expanda */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ===== PROTECCIÓN: NO TOCAR - REGLAS SIMPLES QUE FUNCIONABAN ===== */
  /* Estas reglas simples permiten que la tabla funcione bien con o sin checkboxes */
  /* Si se rompe, restaurar a esta versión que funcionaba perfectamente */

  /* ===== RESTAURADO: LÓGICA ANTERIOR QUE FUNCIONABA ===== */
  /* NO TOCAR - Esta es la lógica simple que funcionaba bien */

  .file-icon-large {
    font-size: 2.5em;
    line-height: 1;
  }

  .file-name {
    max-height: 3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .buttons.are-small .button {
    margin: 0.1em;
  }

  .box.has-background-black-ter {
    transition: all 0.2s ease;
    border: 1px solid transparent;
  }

  .box.has-background-black-ter:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-color: #3273dc;
  }

  .buttons.are-centered {
    justify-content: center;
  }

  /* Estilos para checkboxes */
  .checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .checkbox input[type="checkbox"] {
    margin-right: 0.5rem;
  }

  /* Estilos para evitar desbordamiento en la tabla */
  .table {
    table-layout: fixed;
    width: 100%;
  }

  .table th,
  .table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.5rem;
  }
}

/* Columna de nombre de archivo con ancho flexible */
.file-name-cell {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Columna de acciones con ancho fijo */
.table th:last-child,
.table td:last-child {
  width: 200px;
  min-width: 200px;
}

/* Botones en la columna de acciones */
.buttons.are-small .button {
  margin: 0.1em;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  min-width: auto;
}

/* Responsive para la tabla */
@media (max-width: 768px) {
  /* ===== MÓVIL - SOLO CHECKBOX Y NOMBRE ===== */
  /* Alineación a la izquierda y ocultación de columnas innecesarias */
  /* Compatible con superuser (con checkbox) y usuario regular (sin checkbox) */
  
  /* OCULTAR COLUMNAS INNECESARIAS EN MÓVIL */
  .table th:nth-child(3), .table td:nth-child(3),  /* Tamaño */
  .table th:nth-child(4), .table td:nth-child(4),  /* Creado */
  .table th:nth-child(5), .table td:nth-child(5) { /* Actualizado */
    display: none !important;  /* Ocultar completamente */
  }
  
  /* REGLAS MÓVIL - PADDING CERO ABSOLUTO */
  .table th, .table td {
    padding: 0 !important;  /* CERO ABSOLUTO - Ultra agresivo */
  }
  
  /* Checkboxes: anulación completa de Bulma */
  .table input[type="checkbox"] {
    margin: 0 !important;  /* Sin margen */
    padding: 0 !important;  /* Sin padding */
    display: inline-block !important;
    vertical-align: middle !important;
  }
  
  /* Columna checkbox: alineación a la izquierda */
  .table th:nth-child(1), .table td:nth-child(1) {
    width: 20px !important;  /* Más pequeño */
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 0 !important;  /* CERO ABSOLUTO */
    text-align: left !important;  /* ALINEACIÓN A LA IZQUIERDA */
    padding-left: 0 !important;   /* Sin padding izquierdo */
  }
  
  /* Columna nombre: separación mínima de 3px del checkbox */
  .table th:nth-child(2), .table td:nth-child(2) {
    width: auto !important;  /* Ancho automático */
    max-width: calc(100vw - 30px) !important;  /* Resto de la pantalla */
    padding: 0 !important;  /* CERO ABSOLUTO */
    margin: 0 !important;   /* CERO margin */
    padding-left: 3px !important;  /* Separación mínima de 3px del checkbox */
  }
  
  /* Elementos internos: anulación completa de espaciado */
  .table td:nth-child(2) * {
    margin: 0 !important;  /* Sin margen en TODOS los elementos */
    padding: 0 !important;  /* Sin padding en TODOS los elementos */
  }
  
  /* Iconos: sin margen, sin padding */
  .table .file-name-cell .icon {
    margin: 0 !important;  /* Sin margen */
    padding: 0 !important;  /* Sin padding */
  }
  
  /* Enlaces: sin margen, sin padding */
  .table .file-name-cell a {
    margin: 0 !important;  /* Sin margen */
    padding: 0 !important;  /* Sin padding */
    display: inline-block;
    max-width: calc(100vw - 30px) !important;  /* Resto de la pantalla */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .table th:last-child,
  .table td:last-child {
    width: 150px;
    min-width: 150px;
  }
  
  .buttons.are-small .button {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
  
  .buttons.are-small .button:not(:last-child) {
    margin-bottom: 0.2rem;
  }
  
  /* Vista de iconos responsive */
  .column.is-3 {
    flex: none;
    width: 50%;
  }
  
  .file-icon-large {
    font-size: 2em;
  }
  
  .file-name {
    font-size: 0.8em;
  }
}

@media (max-width: 480px) {
  .table th:last-child,
  .table td:last-child {
    width: 120px;
    min-width: 120px;
  }
  
  .buttons.are-small {
    flex-direction: column;
    align-items: stretch;
  }
  
  .buttons.are-small .button {
    margin: 0.1rem 0;
    width: 100%;
  }
  
  /* Vista de iconos responsive */
  .column.is-3 {
    flex: none;
    width: 100%;
  }
}

/* Mejorar el truncado de nombres largos en ambas tablas */
.table .file-name-cell a {
  display: inline-block;
  max-width: 100%; /* Usar todo el espacio disponible */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3273dc;
  text-decoration: none;
  /* Asegurar que los iconos estén alineados a la izquierda */
  text-align: left;
}

/* Aplicar tu solución original mejorada */
.table {
  table-layout: fixed;
  width: 100%;
}

.table th,
.table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.5rem;
}

/* Reglas duplicadas eliminadas - ya están definidas arriba */

/* Columna de nombre de archivo con ancho flexible - MEJORADO */
.file-name-cell {
  max-width: none; /* Cambio: permitir que ocupe todo el espacio */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 200px; /* Asegurar espacio mínimo */
}

/* Estilos para checkboxes - tu solución original */
.checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* Mejorar truncado para mostrar extensiones al final */
.file-name-cell a {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mejorar el truncado para mostrar extensiones */
.table .file-name-cell a {
  max-width: 100%; /* Usar todo el espacio disponible */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block; /* Cambiar a block para mejor control */
}

.table .file-name-cell a:hover {
  color: #2366d1;
  text-decoration: underline;
}

/* Estilos específicos para iconos en dashboard y folder_view */
.table .file-name-cell {
  text-align: left; /* Alineación a la izquierda para iconos y nombres */
  padding-left: 0; /* Sin padding para pegar al checkbox */
}

.table .file-name-cell a {
  display: flex;
  align-items: center;
  gap: 4px; /* Espacio mínimo entre icono y nombre */
  padding-left: 0; /* Sin padding adicional */
}

/* Asegurar que el contenido de la celda esté alineado a la izquierda */
.table td.file-name-cell {
  text-align: left;
  vertical-align: middle;
  padding-left: 0; /* Sin padding para pegar al checkbox */
}

/* Ajustes responsive para ambas tablas */
@media (max-width: 768px) {
  /* Dashboard responsive */
  .table th:nth-child(2),
  .table td:nth-child(2),
  .table th:nth-child(1),
  .table td:nth-child(1) {
    min-width: 150px; /* Reducir en móvil */
  }
  
  .table th:nth-child(3),
  .table td:nth-child(3),
  .table th:nth-child(2),
  .table td:nth-child(2) {
    width: 70px; /* Reducir ancho de tamaño en móvil */
  }
  
  .table th:nth-child(4),
  .table td:nth-child(4),
  .table th:nth-child(5),
  .table td:nth-child(5),
  .table th:nth-child(3),
  .table td:nth-child(3),
  .table th:nth-child(4),
  .table td:nth-child(4) {
    width: 100px; /* Reducir ancho de fechas en móvil */
  }
  
  /* Folder_view responsive - usa la misma lógica que dashboard */
  /* No necesita estilos específicos porque usa la misma clase */
}

@media (max-width: 480px) {
  /* ===== MÓVIL PEQUEÑO: RESPONSIVE COMPACTO ===== */
  
  /* Para superusuarios (con checkbox) */
  .table th:nth-child(2),
  .table td:nth-child(2),
  .table th:nth-child(1),
  .table td:nth-child(1) {
    min-width: 120px; /* Aún más pequeño en móviles pequeños */
  }
  
  /* Para usuarios regulares (sin checkbox) - columna Nombre es la primera */
  .table th:nth-child(1),
  .table td:nth-child(1) {
    min-width: 120px; /* Aún más pequeño en móviles pequeños */
  }
  
  .table th:nth-child(3),
  .table td:nth-child(3),
  .table th:nth-child(2),
  .table td:nth-child(2) {
    width: 60px; /* Muy compacto en móviles pequeños */
  }
  
  .table th:nth-child(4),
  .table td:nth-child(4),
  .table th:nth-child(5),
  .table td:nth-child(5),
  .table th:nth-child(3),
  .table td:nth-child(3),
  .table th:nth-child(4),
  .table td:nth-child(4) {
    width: 80px; /* Muy compacto en móviles pequeños */
  }
  
  /* Folder_view responsive pequeño - usa la misma lógica que dashboard */
  /* No necesita estilos específicos porque usa la misma clase */
}

/* Columna de acciones con ancho fijo */
.table th:last-child,
.table td:last-child {
  width: 200px;
  min-width: 200px;
}

/* Botones en la columna de acciones */
.buttons.are-small .button {
  margin: 0.1em;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  min-width: auto;
}

/* ===== PROTECCIÓN: RESPONSIVE SIMPLE QUE FUNCIONABA ===== */
/* Responsive básico que funcionaba bien con tu lógica anterior */
@media (max-width: 768px) {
  .table th:last-child,
  .table td:last-child {
    width: 150px;
    min-width: 150px;
  }
  
  .buttons.are-small .button {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
  
  .buttons.are-small .button:not(:last-child) {
    margin-bottom: 0.2rem;
  }
  
  /* Vista de iconos responsive */
  .column.is-3 {
    flex: none;
    width: 50%;
  }
  
  .file-icon-large {
    font-size: 2em;
  }
  
  .file-name {
    font-size: 0.8em;
  }
}

@media (max-width: 480px) {
  .table th:last-child,
  .table td:last-child {
    width: 120px;
    min-width: 120px;
  }
  
  .buttons.are-small {
    flex-direction: column;
    align-items: stretch;
  }
  
  .buttons.are-small .button {
    margin: 0.1rem 0;
    width: 100%;
  }
  
  /* Vista de iconos responsive */
  .column.is-3 {
    flex: none;
    width: 100%;
  }
}



.preview-image {
  transition: all 0.3s ease;
  cursor: zoom-in;
}

.preview-image:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.has-background-light {
  background-color: #f5f5f5 !important;
}

.notification {
  border-radius: 6px;
}

.box {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Estilos para archivos de código */
pre {
  background-color: #f8f9fa !important;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  line-height: 1.6;
  tab-size: 2;
}

/* Sintaxis destacada básica */
.syntax-python .keyword { color: #d73a49; font-weight: bold; }
.syntax-python .string { color: #032f62; }
.syntax-python .comment { color: #6a737d; font-style: italic; }
.syntax-python .number { color: #005cc5; }

.syntax-javascript .keyword { color: #d73a49; font-weight: bold; }
.syntax-javascript .string { color: #032f62; }
.syntax-javascript .comment { color: #6a737d; font-style: italic; }
.syntax-javascript .number { color: #005cc5; }
.syntax-javascript .function { color: #6f42c1; }

.syntax-html .tag { color: #d73a49; font-weight: bold; }
.syntax-html .attribute { color: #6f42c1; }
.syntax-html .string { color: #032f62; }
.syntax-html .comment { color: #6a737d; font-style: italic; }

.syntax-css .property { color: #d73a49; font-weight: bold; }
.syntax-css .value { color: #032f62; }
.syntax-css .selector { color: #6f42c1; }
.syntax-css .comment { color: #6a737d; font-style: italic; }

.syntax-sql .keyword { color: #d73a49; font-weight: bold; }
.syntax-sql .string { color: #032f62; }
.syntax-sql .comment { color: #6a737d; font-style: italic; }
.syntax-sql .function { color: #6f42c1; }

.syntax-json .key { color: #d73a49; font-weight: bold; }
.syntax-json .string { color: #032f62; }
.syntax-json .number { color: #005cc5; }
.syntax-json .boolean { color: #6f42c1; }

.syntax-xml .tag { color: #d73a49; font-weight: bold; }
.syntax-xml .attribute { color: #6f42c1; }
.syntax-xml .string { color: #032f62; }
.syntax-xml .comment { color: #6a737d; font-style: italic; }

/* Controles de PDF */
.pdf-controls {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

/* Mejoras para Office Online Viewer */
iframe {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* Responsive design */
@media (max-width: 768px) {
  .preview-image {
    max-width: 100% !important;
    max-height: 400px !important;
  }
  
  iframe, embed {
    height: 400px !important;
  }
  
  .buttons.are-small .button {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
  }
}

@media (max-width: 480px) {
  .level {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .level-right {
    margin-top: 1rem;
  }
  
  .buttons {
    flex-wrap: wrap;
  }
}

/* Animaciones y transiciones */
.box {
  transition: all 0.2s ease;
}

.box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.notification {
  transition: all 0.2s ease;
}

.notification:hover {
  transform: translateY(-1px);
}

/* Mejoras para archivos de texto */
pre {
  transition: all 0.2s ease;
}

pre:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Estilos para el breadcrumb */
.breadcrumb {
  background-color: transparent;
  padding: 0;
}

.breadcrumb ul {
  background-color: transparent;
}

.breadcrumb li a {
  color: #3273dc;
  text-decoration: none;
}

.breadcrumb li a:hover {
  color: #2366d1;
  text-decoration: underline;
}

.breadcrumb li.is-active a {
  color: #b5b5b5;
  cursor: default;
}

.breadcrumb li.is-active a:hover {
  text-decoration: none;
}


.file-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.level {
  flex-wrap: wrap;
}

.level-left,
.level-right {
  flex-shrink: 1;
  min-width: 0;
}

.file-header-text {
  min-width: 0;
  overflow: hidden;
}

.file-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 768px) {
  .file-title {
    font-size: 1.2rem;
  }

  .file-header-text {
    width: 100%;
  }

  .level-right {
    justify-content: flex-start;
    width: 100%;
    margin-top: 0.5rem;
  }

  .buttons {
    flex-wrap: wrap;
  }

  .buttons .button {
    margin-bottom: 0.5rem;
  }
}



  /* Truncar textos con “…” */
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Anchos sensatos para truncar en móvil */
  @media (max-width: 768px) {
    .truncate-sm {
      max-width: 70vw;   /* nombre en tablas */
      display: inline-block;
      vertical-align: middle;
    }
    .compact-title {
      font-size: 1.05rem;   /* título pequeño en header móvil */
      line-height: 1.25;
      margin-bottom: .25rem;
      font-weight: 700;
    }
    .compact-actions .button{
      height: 2rem;
      font-size: .85rem;
      padding: 0 .6rem;
    }
    /* Visor PDF a pantalla completa (resta la altura del header) */
    .pdf-shell {
      height: calc(100vh - 56px);
      overflow: auto;
    }
  }

  /* En desktop el nombre puede respirar más */
  @media (min-width: 769px) {
    .truncate-md { max-width: 420px; display:inline-block; }
  }

/* ===== Mobile tweaks (≤ 480px) ===== */
@media (max-width: 480px) {
  /* Títulos y subtítulos más compactos */
  h1.title   { font-size: 1.35rem; line-height: 1.25; margin-bottom: .5rem; }
  h2.subtitle{ font-size: 1.05rem; margin-bottom: .4rem; }

  /* Botones y barras de acciones */
  .buttons.are-small .button,
  .button { font-size: .8rem; padding: .35rem .55rem; }
  .level .button { margin-bottom: .35rem; }

  /* Iconos grandes (carpeta/archivo) más chicos */
  .file-icon-large { font-size: 1.65rem; }
  .box .content .file-name { font-size: .85rem; }
  .box .content .file-size { font-size: .75rem; }

  /* Breadcrumb y separaciones */
  .breadcrumb { font-size: .8rem; margin-bottom: .5rem; }
  .level { gap: .5rem; }

  /* Tablas en lista: altura y tipografía más chica */
  table.table td, table.table th { padding: .4rem .5rem; font-size: .85rem; }
  /* .file-name-cell a { display: inline-block; max-width: 65vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } */ /* COMENTADO: causa truncado de nombres */

  /* Inputs y formularios compactos */
  .input { height: 2.1rem; font-size: .85rem; }
}

/* Un pelín más pequeño en 481–768px (tablets) */
@media (max-width: 768px) {
  h1.title { font-size: 1.6rem; }
  .file-icon-large { font-size: 1.9rem; }
}


/* Título más chico en móviles */
@media (max-width: 480px) {
  h1.title { font-size: 1.5rem; line-height: 1.2; }
  .file-icon-large { font-size: 2.2rem; } /* antes 3–4rem */
  .buttons.are-small .button { padding: 0.4rem 0.6rem; }
  /* Ocultar columnas extras en tablas (ya usas is-hidden-mobile en HTML) */
}

/* Truncar nombres largos en listas */
/* .file-name-cell .truncate,
.table .file-name-cell a {
  display: inline-block;
  max-width: 66vw;          /* ancho legible móvil */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} */ /* COMENTADO: causa truncado de nombres */

/* (Opcional) oculta el input inline de crear en móvil si lo conservas */
@media (max-width: 480px) {
  form[action$="/folders/create"] .input { display: none; }
}
/* Iconos-only en móvil para los botones de subida */
@media (max-width: 480px) {
  .file.has-name .file-cta .file-label { display: none; }  /* oculta texto */
  .file.has-name .file-cta { padding: .5rem .6rem; }       /* compacto */
  .file.has-name { justify-content: center; }
  .file .file-icon { font-size: 1.25rem; line-height: 1; } /* icono pequeño */
}

/* Controles compactos en tablas/lista */
@media (max-width: 480px) {
  .table { font-size: .9rem; }
  .button, .select select, .input { height: 2.2rem; font-size: .9rem; }
  .level .title { font-size: 1.5rem; }
}

/* Truncar nombres largos en la lista (ya lo usas pero reforzamos) */
/* .table .file-name-cell a {
  display:inline-block; max-width: 70vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
} */ /* COMENTADO: causa truncado de nombres */


/* Coloca el botón de eliminar arriba a la derecha en desktop */
@media (min-width: 769px){
  .box .field.is-grouped { align-items:center; }
  .box .field.is-grouped > .control:last-child { margin-left: 0; }
}

/* En móvil el botón es de ancho completo y va antes de la tabla (ya lo marca is-hidden-desktop) */
.is-hidden-desktop + .table { margin-top: .5rem; }

/* Evitar duplicado visual de Iconos/Lista: no pintar botones locales */


/* Barra de acciones masivas (sticky y responsiva) */
#bulk-actions {
  position: sticky;
  top: 56px;           /* debajo del navbar */
  z-index: 30;
  display: none;       /* oculta por defecto */
  margin: 0 0 .75rem 0;
}
#bulk-actions.show { display: block; }

/* Contenedor interno para alinear el botón a la izquierda */
#bulk-actions .actions {
  display: inline-flex;
  gap: .5rem;
}

/* Ajuste de top según viewport */
@media (min-width: 1024px){ #bulk-actions{ top: 64px; } }


/* Barra superior de acciones masivas */
#bulk-delete-bar { 
  display:flex; 
  justify-content:flex-start; 
  gap:.5rem;
}

@media (max-width: 768px){
  #bulk-delete-bar { 
    position:static; 
    margin-bottom:.5rem;
  }
}


/* === OVERRIDE: Título en previsualizador === */
.file-title{
  font-size: clamp(1.1rem, 1.5vw + 0.9rem, 1.8rem);
  line-height: 1.25;
}

/* compact-title ya existe en tu CSS; lo reforzamos en móviles */
@media (max-width: 768px){
  .compact-title { font-size: 1.05rem; line-height: 1.25; margin-bottom: .25rem; }
}

@media (max-width: 480px){
  .compact-title { font-size: 0.95rem; }
  .file-header-text .subtitle { font-size: .8rem; }
}


/*controla el espacio de los margenes del header */

@media (max-width:768px){
  .fv-row1, .fv-row2{ margin: .15rem 0; }
  .breadcrumb{ margin: .25rem 0 .35rem; }
}



/* Encabezados de secciones más compactos */
.box > .level{ margin-bottom:.4rem; }


/* Mobile: header ARRIBA, listas DEBAJO */
@media (max-width: 768px){
  .fv-page{ display:flex; flex-direction:column; }
  .fv-header{ order: 1 !important; }
  .fv-sections{ order: 2 !important; }

  /* y mantenemos el header alineado a la izquierda (no centrado ni en columna) */
  .fv-header .buttons.are-small{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    gap: .5rem;
  }
}
  

  /* Fila 1: Select + Iconos/Lista  |  Breadcrumb */
  .fv-row1{ 
    display:flex; 
    flex-direction: column;      /* apila izquierda */
    align-items: stretch; 
    gap: .5rem; 
    margin: .25rem 0;
  }
  .fv-left{
    display:flex; 
    align-items:center; 
    gap:.5rem; 
    width:100%;
    flex-wrap: wrap;
  }
  .fv-left .select{ order:1; flex:0 0 auto; }   /* Select con ancho fijo */
  .fv-left .buttons{ order:2; margin-left: auto; } /* Iconos/Lista alineados a la derecha */
  .fv-header .buttons.are-small{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;   /* quita 100% del override global */
    gap: .5rem;
  }

  .fv-row1 .buttons .button,
  .fv-row2 .buttons .button{ width: auto !important; }
  .fv-row1 .buttons, .fv-row2 .buttons{ flex-wrap: wrap; } /* si no entran, bajan en fila */
  .fv-breadcrumb{ margin:0; }                   /* compacto */

  /* Fila 2: Título | Botones */
  .fv-row2{
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    flex-wrap: wrap;             /* si no cabe, los botones bajan */
    gap:.5rem; 
    margin:.25rem 0;
  }
  .fv-row2 .title{ font-size:1.12rem; line-height:1.25; margin:0; }
  .fv-row2 .buttons{ margin:0; }

  /* Cajas compactas */
  .box{ margin-top:.5rem; padding:.75rem 1rem; }
  .box > .level{ margin-bottom:.35rem; align-items:center; }
  .box > .level .level-right label{ display:flex; align-items:center; gap:.35rem; }
  .subtitle{ margin-bottom:.35rem !important; }




/* ===== Header base (necesario siempre) ===== */
.fv-row1,
.fv-row2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin:.5rem 0;
}
.fv-left{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.fv-breadcrumb{ margin:0; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


/* ===== Forzar alineación a la izquierda en las secciones de lista ===== */
.fv-sections .box { text-align: left; }

/* Asegurar encabezados y contenido a la izquierda */
.fv-sections .box .subtitle { text-align: left; }
/*.fv-sections .box .level     { justify-content: space-between; width: 100%; }*/
.fv-sections .box .level-left,
.fv-sections .box .level-right { align-items: center; }

/* Tablas: texto a la izquierda siempre */
.fv-sections .box .table th,
.fv-sections .box .table td { text-align: left; }

/* Si algún hijo trae centrado (p.ej. de modo iconos), lo anulamos aquí */
.fv-sections .box .has-text-centered { text-align: left !important; }


/* ===== FolderView: alineación y breadcrumb ===== */

/* Breadcrumb a la derecha en desktop */
.fv-row1 .fv-breadcrumb{ margin-right:auto; }

/* En móvil apilamos y dejamos breadcrumb a la izquierda */
@media (max-width:768px){
  .fv-row1{ flex-direction:column; align-items:stretch; }
  .fv-row1 .fv-breadcrumb{ margin-left:0; }
}

/* ===== Secciones (Subcarpetas / Archivos) siempre a la izquierda en móvil ===== */
@media (max-width:768px){
  /* Header de cada box: forzamos layout de level a izquierda/derecha */
  .box .level{ 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    text-align:left; 
  }
  .box .level-left{ display:flex; justify-content:flex-start; }
  .box .level-right{ display:flex; justify-content:flex-end; }

  /* Títulos y tablas sin centrado */
  .box .subtitle{ text-align:left !important; }
  .box table{ text-align:left; }

  /* Celdas de la tabla a la izquierda (modo lista) */
  .table, .table th, .table td{ text-align:left; }
}


/* ===== Alinear títulos y "Seleccionar todos" a la izquierda en móvil ===== */
@media (max-width: 768px){
  /* El header de cada box (Subcarpetas / Archivos) */
  .box .level{
    display:flex !important;       /* evitar modo block de Bulma en móvil */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;   /* base a la izquierda */
    text-align: left;
  }

  /* Título a la izquierda ocupando toda la fila */
  .box .level .level-left{
    display:flex;
    width:100%;
    justify-content:flex-start;
  }
  .box .level .subtitle{
    text-align:left !important;
    margin: 0;                     /* compacto */
  }

  /* El checkbox "Seleccionar todos" debajo del título y a la izquierda */
  .box .level .level-right{
    display:flex;
    width:100%;
    justify-content:flex-start;    /* <- esto lo deja pegado a la izquierda */
    margin-top:.35rem;
  }
  .box .level .level-right label.checkbox{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    text-align:left;
  }

  /* Por si la tabla heredaba centrado */
  .table, .table th, .table td{ text-align:left; }
}


/* ===== Forzar encabezados de sección a la izquierda en móvil ===== */
@media (max-width: 768px){
  /* El header de cada sección dentro de .box */
  .box > .level{
    display: flex !important;
    flex-direction: column !important;      /* título arriba, checkbox debajo */
    align-items: flex-start !important;      /* todo a la izquierda */
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .box > .level .level-left,
  .box > .level .level-right{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;  /* alineación izquierda */
    text-align: left !important;
  }

  /* Quita cualquier centrado heredado */
  .box > .level .has-text-centered,
  .box > .level .subtitle{
    text-align: left !important;
  }

  /* Ajuste visual del label del checkbox */
  .box > .level .level-right label.checkbox{
    margin-left: 0 !important;
    gap: .35rem;
  }
}


/* FIX: Encabezados de 'Subcarpetas' y 'Archivos' a la IZQUIERDA en móvil */
@media (max-width: 768px){
  .fv-sections .box > .level{
    display: flex !important;
    flex-direction: column !important;    /* título arriba, checkbox debajo */
    align-items: flex-start !important;    /* todo a la izquierda */
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .fv-sections .box > .level .level-left,
  .fv-sections .box > .level .level-right{
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important; /* checkbox a la izquierda */
    align-items: center !important;
    text-align: left !important;
  }

  .fv-sections .box > .level .level-right label.checkbox{
    margin-left: 0 !important;
    gap: .35rem;
  }
}

/* === FIX móvil: títulos y "Seleccionar todos" pegados a la IZQUIERDA === */
@media (max-width: 768px){

  /* Anula el space-between que centra el encabezado */
  .fv-sections .box .level{
    justify-content: flex-start !important;
  }

  /* Encabezado de cada box en columna, todo a la izquierda */
  .fv-sections .box > .level{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Título a la izquierda ocupando la fila */
  .fv-sections .box > .level .level-left{
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
  }
  .fv-sections .box > .level .level-left .subtitle{
    text-align: left !important;
    margin: 0 !important;
    align-self: flex-start !important;
    width: auto !important;
  }

  /* "Seleccionar todos" debajo del título y a la izquierda */
  .fv-sections .box > .level .level-right{
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: .35rem !important;
    text-align: left !important;
  }
  .fv-sections .box > .level .level-right label.checkbox{
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    margin-left: 0 !important;
  }

  /* Por si alguna tabla heredó centrado */
  .fv-sections .box table,
  .fv-sections .box th,
  .fv-sections .box td{
    text-align: left !important;
  }
}


/* FIX móvil: "Seleccionar todos" pegado a la izquierda */
@media (max-width: 768px){
  .fv-sections .box > .level .level-right{
    margin-left: 0 !important;        /* anula el auto de Bulma */
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
  }
  .fv-sections .box > .level .level-right .checkbox{
    margin: 0 !important;
    display: inline-flex !important;
    gap: .35rem !important;
  }
}


/* === Forzar header de Subcarpetas / Archivos a la izquierda en móvil === */
@media (max-width: 768px){
  /* 1) El header de cada caja en columna, sin space-between */
  .fv-sections .box > .level{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* 2) Título (arriba) y checkbox maestro (abajo) ocupan 100% y se alinean a la izquierda */
  .fv-sections .box > .level .level-left,
  .fv-sections .box > .level .level-right{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* 3) OVERRIDE CLAVE: quitar el empuje a la derecha heredado de Bulma */
  .fv-sections .box > .level .level-right{
    margin-left: 0 !important;
  }

  /* 4) Por si algún centrado se cuela dentro del label */
  .fv-sections .box > .level .level-right label,
  .fv-sections .box > .level .level-right .checkbox{
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* 5) Anular cualquier “space-between” previo en móvil */
  .fv-sections .box .level{
    justify-content: flex-start !important;
  }
}


/* === Alinear "Seleccionar todas/todos" a la izquierda en móvil === */
@media (max-width: 768px){
  /* El contenedor derecho del header de cada box */
  .fv-left-align{
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important; /* <- izquierda */
    align-items: center !important;
    margin-left: 0 !important;              /* anula empuje de Bulma */
    text-align: left !important;
  }

  /* Por si label tuviera algún centrado o margen auto */
  .fv-left-align .checkbox{
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* Evita que otro .box .level imponga centrados en móvil */
  .fv-sections .box > .level{
    display: flex !important;
    flex-direction: column !important;      /* título arriba, checkbox abajo */
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
}


/* === FIX definitivo: encabezado de cada box a la IZQUIERDA en móvil === */
@media (max-width: 768px){
  .fv-sections > .box > .level{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .fv-sections > .box > .level > .level-right{
    margin-left: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important; /* <- aquí está la clave */
    text-align: left !important;
  }
  .fv-sections > .box > .level > .level-right .checkbox{
    margin-left: 0 !important;
  }
}


/* ===== Folder section headers ===== */
.fv-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* En móvil: apilar y alinear TODO a la izquierda */
@media (max-width: 768px) {
  .fv-sections .box > .fv-section-header.level {
    display: block !important;              /* anula comportamiento de Bulma */
  }
  .fv-sections .box > .fv-section-header .level-left,
  .fv-sections .box > .fv-section-header .level-right {
    display: block !important;
    width: 100% !important;
    text-align: left !important;            /* que no se centre */
  }
  .fv-sections .box > .fv-section-header .level-right {
    margin-left: 0 !important;              /* Bulma empuja a la derecha */
    margin-top: .35rem !important;          /* un respiro bajo el título */
  }
  .fv-sections .box > .fv-section-header .level-right .checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    margin: 0 !important;
  }
}

/* Desktop: poner "Seleccionar todas/todos" a la IZQUIERDA igual que el título */
@media (min-width: 769px) {
  .fv-sections .box > .fv-section-header {
    justify-content: flex-start !important;   /* título + checkbox a la izquierda */
    gap: 1rem;                                 /* pequeño espacio entre ambos */
  }
  .fv-sections .box > .fv-section-header .level-right {
    margin-left: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
}

/* Encabezado de cada sección: título arriba, maestro debajo, todo a la izquierda */
.fv-sections > .box > .level{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}
.fv-sections > .box > .level .level-left,
.fv-sections > .box > .level .level-right{
  width: 100%;
  justify-content: flex-start;
}

/* ===== DISEÑO UNIFICADO DE MODALES - COMPATIBLE CON TEMAS ===== */

/* Estilos básicos del modal de Bulma */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.modal.is-active {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Diseño unificado para todos los modales - Solo estructura y layout */
.modal-card {
  position: relative;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
}

.modal-card-head {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.modal-card-body {
  padding: 1.5rem;
  overflow-y: auto;
}

.modal-card-foot {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ===== ELEMENTOS DENTRO DE MODALES - Solo efectos y transiciones ===== */

/* Efectos de hover para botones en modales */
.modal-card-foot .button {
  transition: all 0.2s ease;
}

.modal-card-foot .button:hover {
  transform: translateY(-1px);
}
}

/* Botón de cerrar del modal */
.modal-card-head{
  display:flex;
  align-items:flex-start;   /* alinea vertical (arriba) el contenido */
}
.modal-card-head .modal-card-title{ margin:0; }
.modal-card-head .delete{
  margin-left:auto;         /* lo manda al extremo derecho */
  /* si lo quieres centrado verticalmente: align-self:center; */
  width:20px; height:20px; display:inline-flex; justify-content:center; align-items:center;
}


.modal-card-head .delete::before,
.modal-card-head .delete::after {
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform-origin: center center;
}

.modal-card-head .delete::before {
  height: 2px;
  width: 50%;
}

.modal-card-head .delete::after {
  height: 50%;
  width: 2px;
}

.modal-card-head .delete:hover {
  opacity: 0.8;
}

.modal-card-head .delete:focus {
  opacity: 0.8;
}

/* Estilo específico para el botón de cerrar del modal de editar usuario */
#edit-user-modal .modal-card-head .delete {
  background-color: transparent !important;
  border: none !important;
}

/* Menú contextual */
.context-menu {
  position: fixed;
  background: #2c2c2c;
  border: 1px solid #4a4a4a;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  min-width: 150px;
  padding: 4px 0;
  font-size: 14px;
}

.context-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  color: #ffffff;
  transition: background-color 0.2s;
}

.context-menu-item:hover {
  background-color: #4a4a4a;
}

.context-menu-item .icon {
  margin-right: 8px;
  font-size: 16px;
}

.context-menu-item span:not(.icon) {
  font-weight: 500;
}

/* Modal responsivo para móviles */
@media screen and (max-width: 768px) {
  .modal-card {
    margin: 0 20px;
    max-height: calc(100vh - 40px);
    width: calc(100% - 40px);
  }
  
  .modal-card-head {
    padding: 1rem;
  }
  
  .modal-card-title {
    font-size: 1.1rem;
    line-height: 1.3;
  }
  
  .modal-card-body {
    padding: 1rem;
  }
  
  .modal-card-foot {
    padding: 1rem;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .modal-card-foot .button {
    width: 100%;
    justify-content: center;
  }
  
  /* Mejorar legibilidad en móviles */
  .radio {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s;
  }
  
  .radio:hover {
    background-color: #f5f5f5;
  }
  
  .radio input[type="radio"] {
    margin-right: 0.5rem;
  }
  
  /* Notificación de duplicados más compacta */
  .notification.is-warning.is-light {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }
  
  /* Iconos más grandes en móviles */
  .icon-text .icon {
    font-size: 1.2rem;
  }
  
  /* Botones más grandes para touch */
  .button.is-medium {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    min-height: 44px; /* Mínimo recomendado para touch */
  }
}

/* ===== ANIMACIONES PARA TODOS LOS MODALES ===== */

/* Animación suave para todos los modales */
.modal-card {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tamaños específicos para diferentes tipos de modales */
#duplicate-handler-modal .modal-card,
#create-root-modal .modal-card,
#create-modal .modal-card {
  max-width: 500px;
  margin: 0 auto;
}

#edit-user-modal .modal-card {
  width: 760px;
  max-width: 92vw;
}

@media (min-width: 1024px) {
  #edit-user-modal .modal-card { 
    width: 840px; 
  }
}

/* ===== ESTILOS ESPECÍFICOS PARA MODALES (si es necesario) ===== */

/* Los estilos específicos se han eliminado ya que ahora usamos el diseño unificado */

/* Avisos que se desvanecen automáticamente */
.notification {
  animation: slideInDown 0.4s ease-out;

}

/* Animación de entrada */
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Spinner de carga */
.upload-spinner {
  display: none;
}
.upload-spinner.is-active {
  display: inline-block;
}

/* Avisos de advertencia específicos */
.notification.is-warning {
  animation: slideInDown 0.5s ease-out, fadeOut 8s ease-in forwards;
  animation-delay: 0s, 3s; /* Comienza a desvanecerse después de 3 segundos */
}

/* Avisos de éxito */
.notification.is-success {
  animation: slideInDown 0.5s ease-out, fadeOut 6s ease-in forwards;
  animation-delay: 0s, 2s; /* Comienza a desvanecerse después de 2 segundos */
}

/* Avisos de error */
.notification.is-danger {
  animation: slideInDown 0.5s ease-out, fadeOut 10s ease-in forwards;
  animation-delay: 0s, 5s; /* Comienza a desvanecerse después de 5 segundos */
}

/* Animación de desvanecimiento */
@keyframes fadeOut {
  0% {
    opacity: 1;
    max-height: 200px;
    margin-bottom: 1rem;
  }
  50% {
    opacity: 0.7;
    max-height: 200px;
    margin-bottom: 1rem;
  }
  100% {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
  }
}

/* Hover para mantener visible */
.notification:hover {
  animation-play-state: paused;
}

/* Botón de cerrar manual */
.notification .delete {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.notification .delete:hover {
  background: rgba(0, 0, 0, 0.4);
}

.notification .delete::before,
.notification .delete::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  background: white;
  transform: rotate(45deg);
}

.notification .delete::after {
  transform: rotate(-45deg);
}

/* Contenedor de avisos con transiciones suaves */
.container .notification {
  transition: all 0.3s ease;
}

/* Avisos específicos para duplicados */
.notification:contains("No se cargó ningún archivo") {
  animation-duration: 8s;
  animation-delay: 0s, 3s;
}

.notification:contains("Algunos archivos ya existen") {
  animation-duration: 8s;
  animation-delay: 0s, 3s;
}

/* === File Preview full layout === */
.fp-toolbar { padding: .75rem 0; border-bottom: 1px solid #2b2b2b; }

.fp-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;           /* drawer oculto = 1 columna */
  gap: 0;
  height: calc(100vh - 64px);           /* ocupa la pantalla bajo la navbar de base.html */
}

.fp-canvas {
  width: 100%;
  height: 100%;
  overflow: auto;                        /* scroll interno del visor */
  background: #111;                      /* contraste con PDF/iframe */
  border: none;
}

/* Drawer lateral derecho */
.fp-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 90vw;
  height: 100%;
  background: #1c1c1c;
  border-left: 1px solid #2b2b2b;
  box-shadow: -12px 0 24px rgba(0,0,0,.35);
  padding: 1rem;
  overflow: auto;
}
.fp-drawer.is-hidden { display: none; }

.fp-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}
.fp-drawer-body p { margin-bottom: .5rem; }



/* Botón de subida más compacto */
.compact-file .file-cta { padding: .35rem .6rem; }
.compact-file .file-label { font-size: .85rem; }
.compact-file .file-icon { font-size: .95rem; margin-right: .35rem; }


  /* Fila de subida: horizontal en desktop, compacta */
  .upload-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; }
  /* Bulma mete margen abajo en .file; lo quitamos para alinear en línea */
  .upload-row .file{ margin:0; }
  /* Un poco más compacto el CTA */
  .upload-row .file-cta{ padding:.35rem .75rem; }
  
  /* Alinear botones de subida con el dropdown "Público" */
  .upload-box {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  
  /* Ajustar el padding del box para alineación perfecta */
  .box {
    padding-left: 0 !important;
  }

  /* En móvil permitimos salto a dos líneas ordenado */
  @media (max-width: 640px){
    .upload-row{ flex-wrap:wrap; }
  }





  /* —— Controles de subida compactos en móvil —— */
@media (max-width: 640px){
  /* fila y espacios */
  .upload-row{ gap:.4rem; }

  /* cajas de Bulma .file (archivos/carpeta) */
  .compact-file .file-cta{
    padding:.30rem .55rem;   /* menos alto/ancho */
    min-height:auto;
  }
  .compact-file .file-label{ font-size:.85rem; }
  .compact-file .file-icon{ font-size:1rem; margin-right:.35rem; }

  /* botón "Cargar" */
  #btn-upload.button{
    padding:.35rem .6rem;
    font-size:.85rem;
    line-height:1.05;
  }
}

/* ===== Reordenar cabecera en MÓVIL ===== */
@media (max-width: 768px){
  /* Fila 1 de la cabecera: primero breadcrumb, luego selector + toggles */
  .fv-row1{
    display:flex; flex-wrap:wrap; gap:.5rem;
    align-items:center;
  }
  .fv-row1 .fv-breadcrumb{ order:1; width:100%; }    /* 1) Breadcrumb arriba */
  .fv-row1 .fv-left{
    order:2; width:100%;
    display:flex; align-items:center; gap:.5rem;     /* 2) Público + Iconos/Lista en MISMA FILA */
  }
  .fv-row1 .fv-left .buttons{
    display:flex; gap:.5rem; flex-wrap:nowrap; margin-left:auto;
  }
  .fv-row1 .fv-left .buttons .button{ white-space:nowrap; }

  /* Ocultar los botones grandes de la fila 2 en móvil (los duplicamos abajo) */
  .fv-row2 .buttons{ display:none; }

  /* Subida + barra de acciones móvil en la misma zona (3ª sección) */
  .upload-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
  .fv-mobile-actions{ display:flex !important; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
}

/* Oculto por defecto la barra de acciones móvil; sólo se muestra con la media-query */
.fv-mobile-actions{ display:none; }


/* ===== Compacto y ordenado en móvil (<=768px) ===== */
@media (max-width: 768px){

  /* Orden: 1) breadcrumb  2) selector+Iconos/Lista */
  .fv-row1{ display:flex; flex-direction:column; gap:.35rem; }
  .fv-row1 .fv-breadcrumb{ order:1; margin:0; }
  .fv-row1 .fv-left{
    order:2; display:flex; align-items:center; flex-wrap:wrap; gap:.4rem;
  }
  .fv-row1 .fv-left .buttons{ margin:0; }

  /* Título y acciones, más apretado */
  .fv-row2{ display:flex; align-items:center; justify-content:space-between; margin:.25rem 0 .35rem; }
  .fv-row2 .buttons .button{ padding:.35rem .6rem; height:auto; line-height:1.1; }

  /* Caja de subida compacta (solo esta) */
  .upload-box{ padding:.6rem .7rem; }
  .upload-row{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
  .upload-row .control{ margin:0; }

  /* “Tiles” de archivo/carpeta pequeños */
  .file.is-small.is-boxed{ padding:.25rem; }
  .file.is-small .file-cta{ padding:.35rem .55rem; font-size:.9rem; }
  .file.is-small .file-icon{ font-size:1rem; margin-right:.35rem; }

  /* Botones móviles al final de la fila (Atrás/Arriba/Crear) */
  .fv-mobile-actions{ order:99; gap:.35rem; }
  .fv-mobile-actions .button,
  #btn-upload.button{ padding:.35rem .6rem; height:auto; line-height:1.1; font-size:.95rem; }

  /* Breadcrumb y select un pelín más compactos */
  .fv-breadcrumb{ font-size:.95rem; }
  .select.is-small select{ 
    padding-right: 1.4rem; /* espacio para la flecha */
    padding-left: 0.75rem; /* padding izquierdo para el texto */
  }
}


/* ===== Ajuste fino móvil (≤768px) ===== */
@media (max-width: 768px){

  /* Header más compacto */
  .fv-header{ margin: .2rem 0 .4rem; }
  .fv-row1{ display:flex; flex-direction:column; gap:.25rem; }
  .fv-row1 .fv-breadcrumb{ order:1; margin:.1rem 0 .2rem; font-size:.92rem; }
  .fv-row1 .fv-left{ order:2; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
  .fv-row1 .fv-left .buttons{ margin:0; }

  .fv-row2{ margin:.15rem 0 .25rem; align-items:center; }
  .fv-row2 .title{ font-size:1.15rem; margin:.15rem 0 .25rem; }

  /* Caja de subida súper compacta */
  .upload-box{ padding:.45rem .55rem; margin:.25rem 0 .45rem; border-radius:.5rem; }
  .upload-row{ gap:.3rem; align-items:center; }

  /* Tiles de “Subir archivos/carpeta” pequeños */
  .file.is-small.is-boxed{ padding:.2rem; }
  .file.is-small .file-cta{ padding:.3rem .5rem; font-size:.86rem; }
  .file.is-small .file-icon{ font-size:.95rem; margin-right:.28rem; }

  /* Botones pequeños y menos altos */
  .buttons.are-small .button,
  .fv-mobile-actions .button,
  #btn-upload.button{
    padding:.32rem .56rem; height:auto; line-height:1.05; font-size:.88rem;
  }

  /* Select un poco más denso */
  .select.is-small select{ 
    padding-right: 1.3rem; /* espacio para la flecha */
    padding-left: 0.7rem; /* padding izquierdo para el texto */
  }

  /* Tablas y cajas más cerradas */
  .box{ padding:.75rem .8rem; }
  table.table td, table.table th{ padding:.42rem .5rem; }
}


/* ——— Reordenar y compactar en móvil (≤768px) ——— */
@media (max-width: 768px) {
  /* Hace que .fv-row1 y .fv-row2 "salgan" al nivel de .fv-page para poder ordenarlas */
  .fv-page { display: flex; flex-direction: column; }
  .fv-header { display: contents; order: 0 !important; } /* header arriba SIEMPRE */

  /* Orden deseado */
  .fv-row1   { order: 0; }      /* 1) Breadcrumb + selector + Iconos/Lista */
  .upload-box{ order: 1; }      /* 2) Subidas + acciones móviles */
  .fv-row2   { order: 2; }      /* 3) Título (los botones grandes ya se ocultan) */
  .fv-row3   { order: 3; }      /* 4) Buscador */
  .fv-sections { order: 4; }

  /* Breadcrumb + selector + toggles en la MISMA fila, sin huecos */
  .fv-row1 { gap: .35rem; margin: .15rem 0; }
  .fv-row1 .fv-left { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
  .fv-row1 .fv-left .buttons { margin-left:auto; display:flex; gap:.35rem; }
  
  /* Estilos para buscador en móvil */
  .fv-row3 { margin-top: 0.5rem; }
  .fv-row3 .field { margin-bottom: 0; }
  .fv-row3 .input { font-size: 0.875rem; }
  .fv-row3 .button { font-size: 0.875rem; }
  
/* ===== FORZAR OCULTACIÓN DE BOTONES EN MÓVIL ===== */
.is-hidden-mobile { display: none !important; }

/* ===== FORZAR OCULTACIÓN ESPECÍFICA DE BOTÓN DESKTOP EN MÓVIL ===== */
@media (max-width: 768px) {
  #btn-open-create-root { display: none !important; }
  .fv-row2 .buttons { display: none !important; }
}

  /* Oculta los botones grandes de la fila 2 (usamos los compactos de la caja de subida) */
  .fv-row2 .buttons { display: none; }
  .fv-row2 .title { font-size: 1.1rem; margin: .25rem 0; }
}

/* ===== ESTILOS PARA BUSCADOR ===== */
.fv-row3 {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fv-row3 .field {
  margin-bottom: 0;
}

.fv-row3 .input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 8px;
}

.fv-row3 .input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.fv-row3 .input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: #3273dc;
  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}

.fv-row3 .button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 8px;
}

.fv-row3 .button:hover {
  background: rgba(255, 255, 255, 0.2);
}

#search-results-count {
  margin-top: 0.25rem;
  font-style: italic;
  transition: opacity 0.2s ease;
}

/* ===== ANIMACIONES PARA BÚSQUEDA FACEBOOK-LIKE ===== */
.card, tbody tr {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.card {
  opacity: 1;
  transform: scale(1);
}

tbody tr {
  opacity: 1;
  transform: translateX(0);
}

/* ===== FORZAR OCULTACIÓN DE BOTONES EN WEB ===== */
@media (min-width: 769px) {
  .is-hidden-tablet { display: none !important; }
  
  /* ===== FORZAR OCULTACIÓN ESPECÍFICA DE BOTÓN MÓVIL EN WEB ===== */
  #btn-open-create-root-mobile { display: none !important; }
  .fv-mobile-actions { display: none !important; }
}

  /* Caja de subida súper compacta */
  .upload-box { 
    padding: .45rem .55rem .45rem 0; /* Sin padding izquierdo para alineación */
    margin: .25rem 0 .45rem; 
    border-radius: .5rem; 
  }
  .upload-row { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; }
  .fv-mobile-actions { display:flex !important; gap:.35rem; flex-wrap:wrap; }

  /* Botones/tiles pequeños y cómodos para dedo */
  .file.is-small .file-cta { padding:.3rem .5rem; font-size:.86rem; }
  .file.is-small .file-icon { font-size:.95rem; margin-right:.28rem; }
  #btn-upload.button,
  .fv-mobile-actions .button { padding:.32rem .56rem; height:auto; line-height:1.05; font-size:.88rem; }

  /* Pequeñas reducciones de espacios generales */
  .box > .level { margin-bottom: .35rem; }
  table.table td, table.table th { padding: .42rem .5rem; }
}


/* =========================
   Móvil: fila compacta para
   Breadcrumb + "Público" + (Iconos/Lista)
   ========================= */
   @media (max-width: 768px) {
    /* Acerca el bloque a la barra "Carpeter" */
    .fv-row1 { margin: .25rem 0 .45rem; }
  
    /* Breadcrumb más pegado y compacto */
    .fv-breadcrumb { margin: .15rem 0 .35rem; }
    .fv-breadcrumb .breadcrumb li + li::before { margin: 0 .3rem; }
  
    /* Una sola fila: [Breadcrumb] ya va arriba,
       aquí hacemos que Select + Iconos/Lista compartan línea */
    .fv-row1 .fv-left{
      display: grid;
      grid-template-columns: auto 1fr; /* select ancho auto, botones ocupan el resto */
      align-items: center;
      column-gap: .4rem;
      row-gap: .25rem;
    }
  
    /* El select "Público" se achica y no rompe la fila */
    .fv-row1 .fv-left .select{ width: auto; } /* Ancho automático para que no ocupe todo */
    .fv-row1 .fv-left .select select{
      height: 2.05rem;
      padding: 0 0.6rem 0 0.6rem; /* padding uniforme pero con espacio para la flecha */
      padding-right: 1.4rem; /* espacio específico para la flecha */
      font-size: .9rem;
    }
  
    /* Botones Iconos/Lista compactos y sin salto de línea */
    .fv-row1 .fv-left .buttons{
      display: flex;
      gap: .35rem;
      white-space: nowrap;
    }
    .fv-row1 .fv-left .buttons .button{
      padding: .28rem .6rem;
      height: auto;
      line-height: 1.05;
      font-size: .88rem;
    }
  }
  

  /* Título más discreto y con menos margen */
.title.compact-title {
  margin-bottom: .35rem;
  line-height: 1.2;
}

/* En móviles, todo más compacto */
@media (max-width: 768px) {
  /* fila compacta (selector + Iconos/Lista) */
  .fv-row1 {
    margin-top: .25rem;
    margin-bottom: .25rem;
    gap: .5rem;
  }
  .fv-row1 .select select {
    height: 2.1rem;
    font-size: .9rem;
    padding-right: 1.5rem; /* espacio para el caret - reducido para acercar la flecha */
    padding-left: 0.75rem; /* padding izquierdo para el texto */
  }
  .fv-row1 .buttons {
    gap: .35rem;
    white-space: nowrap; /* evita salto de Iconos/Lista */
  }
  .fv-row1 .buttons .button {
    font-size: .9rem;
    line-height: 1.1;
    padding: .35rem .6rem;
  }

  /* caja de subida: menos padding/altura */
  .box.mb-4 {
    padding: .75rem;
  }
  .upload-row {
    gap: .5rem;
    margin-top: .25rem;
    flex-wrap: wrap;
  }

  /* inputs de archivo en versión pequeña real */
  .file.is-small .file-cta {
    font-size: .9rem;
    padding: .4rem .6rem;
  }
  .file.is-small .file-icon {
    font-size: 1rem;
    margin-right: .35rem;
  }
}

/* Evita que cualquier .compact-file en botones afecte paddings si quedó alguno suelto */
button.compact-file { all: unset; }


/* Mismo ancho controlado que en folder_view */
.fv-row1 .select select { 
  max-width: 260px; 
  min-width: 120px; /* Asegurar ancho mínimo para que la flecha esté cerca */
  padding-right: 1.4rem !important; /* espacio para la flecha - forzar en desktop */
  padding-left: 0.75rem !important; /* padding izquierdo para el texto */
}
@media (max-width: 480px) {
  .fv-row1 .select select { 
    max-width: 200px; 
    min-width: 100px; /* Asegurar ancho mínimo en móvil */
  }
  .fv-row1 .buttons .button { padding: 0.35rem 0.6rem; }
}


/* Título más compacto, igual que en folder_view */
.compact-title { margin: 0; font-size: clamp(1.05rem, 1.2vw + .9rem, 1.6rem); }

/* Forzar padding correcto en desktop para el select */
@media (min-width: 769px) {
  .fv-row1 .select select,
  .fv-row1 .select.is-small select {
    padding-right: 1.4rem !important;
    padding-left: 0.75rem !important;
    width: auto !important; /* Permitir que se ajuste al contenido */
  }
  
  /* Asegurar que el select no se estire demasiado */
  .fv-row1 .fv-left .select {
    flex: 0 0 auto !important; /* No crecer, solo el tamaño necesario */
  }
  
  /* Alinear botones Iconos/Lista a la derecha */
  .fv-row1 .fv-left .buttons {
    margin-left: auto !important; /* Empujar a la derecha */
    order: 2 !important;
  }
}

/* Header compacto */
.fv-header { margin-bottom: .5rem; }
.fv-row2 { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }

@media (max-width: 768px){
  .fv-row2 { flex-wrap: wrap; }
  .fv-row2 .buttons { margin-left: auto; }
}


/* ==== Alinear y compactar la fila de subida SOLO en dashboard ==== */
@media (max-width: 768px){
  #dash-upload-row{
    display:flex;
    align-items:center;
    gap:.5rem;
    flex-wrap:nowrap;           /* evita saltos si cabe en una línea */
    margin-bottom:0 !important; /* que el borde del box quede recto */
  }
  #dash-upload-row .control{ margin-bottom:0 !important; }

  /* Normaliza altura entre los .file (Bulma) y los .button */
  #dash-upload-row .file.is-boxed{ --rowh: 36px; }
  #dash-upload-row .file.is-boxed .file-cta{
    height:var(--rowh);
    padding:0 .7rem;
    display:flex; align-items:center; line-height:1;
  }
  #dash-upload-row .file.is-boxed .file-icon{
    display:inline-flex; align-items:center; margin-right:.35rem;
  }
  #dash-upload-row .button{
    height:var(--rowh);
    padding:0 .85rem; line-height:1;
  }
}

.fv-breadcrumb { margin: 0 0 .5rem 0; }

/* ===== Modal: Editar usuario (más ancho y cómodo) ===== */
#edit-user-modal .modal-card {
  width: 760px;          /* tamaño base en desktop */
  max-width: 92vw;       /* evita desbordes en pantallas pequeñas */
}

@media (min-width: 1024px) {
  #edit-user-modal .modal-card { width: 840px; }
}

#edit-user-modal .modal-card-body {
  max-height: calc(100vh - 240px); /* que no se “corte” */
  overflow: auto;
}

/* Un poco más de aire a la sección de permisos */
#edit-user-modal .field .checkbox { display: block; margin-bottom: .5rem; }



/* Modal edición: siempre por encima y sin reflow del fondo */
html.is-clipped { overflow: hidden !important; }

#edit-user-modal { position: fixed; inset: 0; z-index: 9999; }
#edit-user-modal .modal-background { position: fixed; inset: 0; }


#edit-user-modal {
  display: flex;          /* siempre preparado */
  opacity: 0;             /* invisible hasta que llegue la clase */
  pointer-events: none;
  transition: opacity .3s ease;
}
#edit-user-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* === Forzar fullscreen real en móvil para el visor === */
@media (max-width: 768px){
  /* El root ya es fixed 0..0, solo nos aseguramos de forzar alturas */
  .pv-root{ height: 100dvh; }                    /* usa viewport dinámico */
  .pv-body{ min-height: 0; }
  .pv-view{ min-height: 0; }
  /* Anula el 400px !important global de styles.css */
  .pv-root .pv-canvas{
    height: calc(100dvh - 56px) !important;      /* ajusta 56px si tu barra cambia */
    width: 100vw !important;
    display: block;
  }
}
@media (min-width: 769px){
  .pv-root .pv-canvas{ height: calc(100vh - 64px) !important; }
} /* 64px si tu navbar cambia */  

/* ===== Toolbar compacta y en una sola línea ===== */
.pv-toolbar{
  flex-wrap: nowrap;               /* no permite salto de línea */
  gap: .5rem;
}
.pv-title{
  flex: 1 1 auto;                  /* el título ocupa el espacio libre */
  max-width: none;
  white-space: nowrap;             /* una línea */
  overflow: hidden;
  text-overflow: ellipsis;         /* … cuando no entra */
}
.pv-actions{
  flex: 0 0 auto;
  display: inline-flex;
  gap: .35rem;
}
.pv-actions .button{
  white-space: nowrap;             /* evita que “Descargar”/“Volver” partan */
}

/* — Móvil — */
@media (max-width:768px){
  .pv-toolbar{ padding: .45rem .6rem; gap: .4rem; }
  .pv-title{
    font-size: .98rem;             /* más pequeño en celular */
    max-width: 54vw;               /* reserva ancho a botones */
  }
  .pv-actions .button{
    height: 1.9rem;
    font-size: .8rem;
    padding: 0 .5rem;              /* botones más compactos */
  }
}

/* Botón icono compacto (móvil: solo el ícono) */
/* Botón de eliminar compacto SOLO en móvil */
@media (max-width: 768px){
  .button.is-danger.is-light.is-small .icon { margin: 0; }
  .button.is-danger.is-light.is-small { padding: .25rem .4rem; line-height: 1; }
}


/* aún más pequeño en pantallas chicas */
@media (max-width: 768px){
  .btn-icon { padding: .25rem .35rem; }
}

/* Empresas: mostrar … en desktop y 🗑️ solo en móvil */
.emp-trash .emp-trash-icon{ display:none; }           /* por defecto (desktop) */

@media (max-width:768px){
  .emp-trash{ padding:.25rem .4rem; line-height:1; }
  .emp-trash .emp-ellipsis{ display:none !important; }
  .emp-trash .emp-trash-icon{ display:inline !important; }
}


/* Botón GUARDAR compacto en móvil */
@media (max-width: 768px){
  .emp-save{
    font-size: .80rem;
    padding: .28rem .6rem;
    line-height: 1.1;
    min-width: auto;   /* por si algún estilo le ponía ancho mínimo */
  }
}


/* compactar acciones y fijarlas arriba en móvil */
.pv-actions .button{ margin:0; }  /* anula margen de Bulma si quedó */

@media (max-width:768px){
  .pv-toolbar{ align-items:center; padding:.5rem .6rem; } /* alinea título con botones */
  .pv-actions{
    display:flex; flex-direction:column; align-items:flex-end;
    gap:.35rem; margin:0 !important; min-width:44px;
  }
  .pv-actions .button{ padding:.35rem; min-width:auto; line-height:1; }
  .pv-actions .button .icon{ margin:0; }
  .pv-title{ margin:0; max-width:calc(100vw - 64px); } /* deja espacio a la columna de iconos */
}

/* Fix: que los íconos nunca se oculten en móvil */
.file-grid .column { display: block !important; }
.file-grid .is-hidden-mobile { display: initial !important; }


/* --- Perfil --- */
.avatar-circle{
  width: 72px; height: 72px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#1f2937,#0f172a);
  color:#e5e7eb; font-weight:700; font-size:1.25rem;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.profile-card .card-content{ padding-top: 1.25rem; }


@media (max-width: 1023px){
  .navbar-menu { background: #1f2937; } /* gris oscuro */
}
.navbar-burger { cursor: pointer; 
}
.navbar-burger span { background: #e5e7eb; } /* gris claro */


/* Ajustes del header de la tarjeta de perfil */
.profile-card .card-header {
  align-items: center;         /* centra verticalmente */
  flex-wrap: nowrap;           /* evita saltos raros */
}

.card-header-actions {
  margin-left: auto;           /* empuja el botón a la derecha */
  padding: .5rem;              /* espacio de respiración */
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  /* Botón compacto en móvil */
  .card-header-actions .button {
    padding: .35rem .5rem;
    border-radius: 9999px;
  }
}


/* --- Navbar SIEMPRE arriba de cualquier barra sticky/overlays --- */
.navbar { 
  position: sticky;   /* ya es top fijo visualmente */
  top: 0;
  z-index: 1000;      /* > que #bulk-actions (30) y cualquier card/header */
}

/* Ajuste de tamaño del logo en la navbar (sobrescribe Bulma: 1.75rem) */
.navbar .navbar-brand .navbar-item img {
  max-height: 2.25rem; /* 36px */
  height: 36px;
}

/* ===== MENÚ DE PERFIL - MEJORAS VISUALES ===== */

/* Dropdown del navbar con mejor z-index */
.navbar-dropdown {
  position: absolute;
  z-index: 1100;
  border-radius: 8px;
  background: #2c2c2c;
  animation: slideDown 0.2s ease-out;
}

/* Animación de entrada del dropdown */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enlace del perfil con hover effect */
.navbar-item.has-dropdown .navbar-link {
  transition: all 0.2s ease;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  display: flex;  /* Separar icono, nombre y flecha */
  align-items: center;  /* Alineación vertical */
  gap: 1rem;  /* Separación mayor entre elementos para web */
}

/* Estilos específicos para el nombre de usuario */
.navbar-item.has-dropdown .navbar-link .user-name {
  flex: 1;  /* Ocupa el espacio disponible */
  white-space: nowrap;  /* Evita que se rompa el nombre */
  overflow: hidden;  /* Oculta texto que se desborde */
  text-overflow: ellipsis;  /* Muestra "..." si es muy largo */
  max-width: 150px;  /* Límite de ancho para nombres largos */
  margin-right: 0.5rem;  /* Separación adicional de la flecha */
}

/* Ocultar flecha automática de Bulma */
.navbar-item.has-dropdown .navbar-link::after {
  display: none !important;
}

/* Flecha personalizada controlada por nosotros */
.navbar-item.has-dropdown .navbar-link .custom-arrow {
  font-size: 0.6rem;
  color: #ffffff;
  line-height: 1;
  margin-left: 0.5rem;
  align-self: center;
}

.navbar-item.has-dropdown .navbar-link:hover {
  background-color: #4a4a4a;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Items del dropdown con hover effects */
.navbar-dropdown .navbar-item {
  transition: all 0.2s ease;
  border-radius: 4px;
  margin: 0.25rem;
}

.navbar-dropdown .navbar-item:hover {
  transform: translateX(4px);
}

/* Separador del dropdown */
.navbar-dropdown .navbar-divider {
  margin: 0.5rem 0.75rem;
}

/* Mejoras para móvil */
@media (max-width: 768px) {
  .navbar-dropdown {
    min-width: 200px;
  }
  
  .navbar-dropdown .navbar-item {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 6px;
    margin: 0.25rem 0.5rem;
  }
  
  .navbar-dropdown .navbar-item:hover {
    transform: none; /* Sin transform en móvil */
  }
  
  /* Mejor contraste en móvil */
  .navbar-item.has-dropdown .navbar-link {
    background-color: #2a2a2a;
    border: 1px solid #4a4a4a;
    gap: 0.5rem;  /* Separación menor en móvil */
  }
  
  .navbar-item.has-dropdown .navbar-link:hover {
    background-color: #3a3a3a;
    border-color: #5a5a5a;
  }
}

/* (opcional) dale stacking al contenedor para evitar nuevos contextos */
.navbar-menu { position: relative; z-index: 1000; }

/* Card de perfil: que el header envuelva y no se sobresalga en móvil */
.profile-card .card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* clave */
}

.profile-card .card-header-title {
  flex: 1 1 auto;
}

.profile-card .card-header .card-header-icon {
  margin-left: auto;
}

/* En móvil, el botón pasa a la siguiente línea y ocupa ancho natural */
@media (max-width: 768px) {
  .profile-card .card-header .card-header-icon {
    order: 2;
    width: auto;
    margin: .5rem 1rem 0; /* se separa y no tapa nada */
  }
  .profile-card .card-header-title {
    order: 1;
    margin: .5rem 1rem .25rem;
  }
}

/* ===== ESTILOS PARA EL MODAL DE AYUDA ===== */

/* Tabs del modal de ayuda */

.tab-content {

  display: none;

  animation: fadeIn 0.3s ease-in;

}



.tab-content.is-active {

  display: block;

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



/* Estilos para las cajas de funcionalidades */

.tab-content .box {

  height: 100%;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.tab-content .box:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}



/* Estilos para la tabla de atajos */

.tab-content .table kbd {

  background-color: #f5f5f5;

  border: 1px solid #dbdbdb;

  border-radius: 3px;

  padding: 2px 6px;

  font-size: 0.75rem;

  font-family: monospace;

}



/* Estilos para las cajas de soporte */

.tab-content .box.has-text-centered {

  transition: transform 0.2s ease;

}



.tab-content .box.has-text-centered:hover {

  transform: scale(1.02);

}



/* Responsive para el modal de ayuda */

@media screen and (max-width: 768px) {

  .modal-card[style*="max-width: 800px"] {

    max-width: 95vw !important;

    margin: 0 10px;

  }

  

  .tab-content .columns.is-multiline .column.is-half {

    width: 100% !important;

  }

  

  .tabs.is-boxed ul {

    flex-wrap: wrap;

  }

  

  .tabs.is-boxed li {

    flex: 1;

    min-width: 120px;

  }

}



/* ===== ESTILOS PARA EL MODAL DE AYUDA ===== */
/* Tabs del modal de ayuda */
.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in;
}

.tab-content.is-active {
  display: block;
}

.tab-content .title.is-5 {
  margin-top: 1.5rem !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Estilos para las cajas de funcionalidades */
.tab-content .box {
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tab-content .box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Estilos para la tabla de atajos */
.tab-content .table {
  table-layout: fixed !important;
  width: 100% !important;
}

.tab-content .table th:first-child,
.tab-content .table td:first-child {
  width: 40% !important;
  min-width: 200px !important;
  max-width: 40% !important;
}

.tab-content .table th:last-child,
.tab-content .table td:last-child {
  width: 60% !important;
  max-width: 60% !important;
}

.tab-content .table kbd {
  background-color: #f5f5f5;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-family: monospace;
  white-space: nowrap;
}

/* Estilos para las cajas de soporte */
.tab-content .box.has-text-centered {
  transition: transform 0.2s ease;
}

.tab-content .box.has-text-centered:hover {
  transform: scale(1.02);
}

/* Responsive para el modal de ayuda */
@media screen and (max-width: 768px) {
  .modal-card[style*="max-width: 800px"] {
    max-width: 95vw !important;
    margin: 0 10px;
  }
  
  .tab-content .columns.is-multiline .column.is-half {
    width: 100% !important;
  }
  
  .tabs.is-boxed ul {
    flex-wrap: wrap;
  }
  
  .tabs.is-boxed li {
    flex: 1;
    min-width: 120px;
  }
}