.list-group-item.align-items-stretch { align-items: stretch; }

.biblioteca-acciones {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  align-self: stretch;
}

.biblioteca-acciones .btn {
  width: 44px; /* opcional: ancho fijo */
  padding: .35rem .4rem;
}

/* Estilos específicos para la versión móvil (fila horizontal) */
.biblioteca-acciones-mobile {
  display: flex;               /* se activará en xs por utilidades d-sm-none */
  flex-direction: row;
  justify-content: flex-end;
  gap: .5rem;
  width: 100%;
}
/* CSS: cards avatar */
  .avatar-card {
    position: relative; /* necesario para posicionar el overlay */
    overflow: hidden;
  }
  .avatar-overlay-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 10;
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
    border-radius: 0.35rem;
    border: none;
    background: rgba(0, 123, 255, 0.95);
    color: var(--color-white);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  .avatar-overlay-btn.show {
    display: inline-block;
  }
  .avatar-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    display: none;
    z-index: 5;
  }
  .avatar-overlay-backdrop.show {
    display: block;
  }
  /* Colores para niveles de avatares */
  .card-gold    { border: 3px solid #D4AF37 !important;   }
  .card-silver  { border: 3px solid #C0C0C0 !important;   }
  .card-bronze  { border: 2px solid #CD7F32 !important;   }
  .card-premium {
      position: relative;
      border-radius: 12px;
      border: 4px solid transparent;
      z-index: 0;
    }
    
    .card-premium::before {
      content: "";
      position: absolute;
      inset: -4px; /* coincide con el grosor del borde */
      border-radius: inherit;
      background: linear-gradient(
        90deg,
        #FFD700,   /* oro */
        #F5E1A4,   /* champagne */
        #E5E4E2,   /* platino */
        #FFFFFF,   /* blanco brillante */
        #FFD700    /* oro otra vez */
      );
      background-size: 300% 300%;
      animation: card-premium-flow 8s linear infinite;
      z-index: -1;
    }
    @keyframes card-premium-flow {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }    
    /* Fallback: borde platino si no hay soporte */
    @supports not (mask-composite: exclude) {
      .card-premium {
        border: 4px solid #E5E4E2;
      }
    }

/* compatibilidad iOS */
    /* Fallback para gap en flex (Safari antiguo no soporta gap en flex) */
    .row.g-2 {
      display: flex;
      flex-wrap: wrap;
      margin-left: -0.5rem;
      margin-right: -0.5rem;
    }
    .row.g-2 > .col-6,
    .row.g-2 > .col-sm-4,
    .row.g-2 > .col-md-3,
    .row.g-2 > .col-lg-2 {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      margin-bottom: 0.75rem; /* separación vertical consistente */
    }
    
    /* Asegurar que las columnas respeten el ancho responsive de Bootstrap */
    .row.g-2 > .col-6 { flex: 0 0 50%; max-width: 50%; }
    @media (min-width: 576px) { .row.g-2 > .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } }
    @media (min-width: 768px) { .row.g-2 > .col-md-3 { flex: 0 0 25%; max-width: 25%; } }
    @media (min-width: 992px) { .row.g-2 > .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; } }
    
    /* Imágenes: evitar espacios en línea y problemas de render en iOS */
    .card img,
    .card .img-fluid {
      display: block;
      width: 100%;
      height: auto;
      -webkit-user-drag: none;
      image-rendering: -webkit-optimize-contrast;
    }
    /* tabs corregir comportamiento en iOS */
    /*
    .tab-pane { display: none; }
    .tab-pane.active { display: block !important; }
    .tab-pane { -webkit-backface-visibility: hidden; transform: translateZ(0); }
      .d-none {
        display: none !important;
      }
      @media (min-width: 576px) {
        .d-sm-flex {
          display: flex !important;
        }
        .d-none.d-sm-flex,
        .d-sm-flex.d-none {
          display: flex !important;
        }
        .d-sm-flex.d-none,
        .d-none.d-sm-flex {
          display: none !important;
        }
      }
      .d-none,
      .d-sm-flex {
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }
    */
    /* Forzar que la tarjeta mantenga su flujo y el footer quede abajo si existe */
    .card {
      /* no cambiamos tu markup; esto solo asegura consistencia en navegadores */
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }   
    /* Footer empujado abajo (funciona también en Safari) */
    .card .card-footer {
      margin-top: auto;
    }    
    /* Evitar comportamiento táctil que pueda afectar layout en iOS */
    html, body {
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    /* Si usas gap en otros sitios, añade fallback visual */
    @supports (gap: 1rem) {
      .row.g-2 {
        gap: 0.5rem;
        margin-left: 0;
        margin-right: 0;
      }
      .row.g-2 > * { padding-left: 0; padding-right: 0; margin-bottom: 0; }
    }

  .card-avatar, ficha-avatar {
    min-width : 160px;
  }