/**
 * ============================================================
 * PERSONAL.CSS — Extensiones decorativas de AXIS v2
 * ============================================================
 * Este archivo define los estilos visuales especiales,
 * animaciones, y detalles personalizados que no deben formar
 * parte del núcleo general del tema.
 *
 * 👉 Base visual (colores, fondos, botones, inputs, etc.):
 *     /assets/css/tema-axis.css
 *
 * 👉 Personal.css solo amplía o decora, nunca reemplaza.
 */

/* ============================================================
   1️⃣ TÍTULO CON FRANJA Y EFECTO DE BRILLO (TITLE-BAND)
   ============================================================ */
/* Franja principal usada en títulos o encabezados destacados */
.title-band {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #0d1b1e,
    #043f2f,
    #0d1b1e
  ); /* Gradiente verde-azul oscuro */
  color: #ffffff;
  padding: 15px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: lowercase;
}

/* ✨ Efecto de brillo animado */
.title-band::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  animation: shine 3s infinite linear;
  border-radius: 10px;
}
@keyframes shine {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

/* ============================================================
   2️⃣ TARJETAS ESPECIALES DEL DASHBOARD PRIVADO
   ============================================================ */
/* 🔒 Tarjetas deshabilitadas (módulos no disponibles) */
.card-disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(60%);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.card-disabled:hover {
  transform: none;
  box-shadow: none !important;
}

/* 🧩 Tarjetas “en desarrollo” o pendientes de activación */
.card-pending {
  position: relative;
  background-color: #1f2937; /* Gris oscuro neutro */
  border: 1px dashed #facc15; /* Amarillo tenue */
  color: #facc15 !important;
  opacity: 0.85;
  transition: 0.3s ease;
}
.card-pending:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.3);
}

/* Etiqueta amarilla en esquina superior derecha */
.card-pending::after {
  content: "En desarrollo";
  position: absolute;
  top: 10px;
  right: 10px;
  background: #facc15;
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

/* ============================================================
   3️⃣ EFECTOS VISUALES Y DECORACIONES VARIAS
   ============================================================ */
/* ✨ Brillo sutil para íconos interactivos */
.icon-glow:hover {
  text-shadow: 0 0 10px rgba(44, 165, 157, 0.8);
  transition: text-shadow 0.3s ease;
}

/* 💨 Suaviza transiciones en elementos animados */
.transition-smooth {
  transition: all 0.3s ease-in-out;
}

/* ============================================================
   4️⃣ SECCIÓN DE FILTROS Y ENTRADAS RESPONSIVAS
   ============================================================ */
/* Mejor lectura en modo oscuro */
.form-control.bg-dark,
.form-select.bg-dark {
  background-color: #1e293b !important; /* Azul gris oscuro */
  color: #e2e8f0 !important; /* Gris claro */
}

/* Ajusta el input-group */
.input-group-text {
  border-radius: 0.5rem 0 0 0.5rem;
}

/* Igualar altura del botón del input-group */
.input-axis .form-control {
  height: calc(3.5rem + 2px); /* altura uniforme */
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
  font-size: 1rem;
}
.input-axis .btn {
  height: calc(3.5rem + 2px);
  border-radius: 0 0.5rem 0.5rem 0;
}

/* ============================================================
   5️⃣ FILTROS RESPONSIVOS PARA PIZARRA Y LISTADOS
   ============================================================ */
@media (max-width: 768px) {
  .filters-container select,
  .filters-container .input-group {
    width: 100% !important;
  }

  .filters-container {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .filters-container .input-group-text {
    border-radius: 0.5rem 0.5rem 0 0 !important;
  }

  .filters-container .form-control {
    border-radius: 0 0 0.5rem 0.5rem !important;
  }

  #linksContainer .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ============================================================
   FIN DE PERSONAL.CSS
   ============================================================ */

/* Franja title-band extendida en ancho completo */
.title-band.w-100 {
  text-transform: lowercase;
  font-size: 1rem;
  background: linear-gradient(90deg, #064e3b, #0d1b1e, #064e3b);
  border-radius: 0; /* toda la franja */
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* Cards de links públicos */
#linksPublicos .card.axis-card {
  background-color: #111827;
  transition: all 0.3s ease;
}
#linksPublicos .card.axis-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 10px rgba(44, 165, 157, 0.4);
}

/* Ajuste visual para inputs dentro de card oscura */
.card .form-control {
  background-color: #111827 !important;
  color: #e5e7eb !important;
  border: 1px solid #2ca59d !important;
}
.card .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(44, 165, 157, 0.25);
  border-color: var(--color-secundario) !important;
}

/* Botón mostrar contraseña */
#togglePassword {
  height: var(--altura-input);
}

/* ======= FORMULARIO LOGIN ======= */

/* Color más visible para placeholders */
.placeholder-light::placeholder,
.form-control::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
  font-style: italic;
}

/* Labels con mejor separación */
.form-label {
  margin-bottom: 0.4rem;
}

/* Ajuste de iconos dentro del label */
.form-label i {
  font-size: 1rem;
  vertical-align: middle;
}

/* Botón del ojo al mismo alto que input */
#togglePassword {
  height: var(--altura-input);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholders más visibles */
.placeholder-light::placeholder,
.form-control::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  font-style: italic;
}

/* Mensaje de error en login */
#alertError {
  border-radius: 0.5rem;
  font-weight: 500;
  background-color: rgba(231, 76, 60, 0.9);
  color: #fff;
  text-align: center;
}

/* =====================================================
   BLOQUE VISUAL — Alineación de badges
   ===================================================== */
.badges-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.badges-left {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.badges-right {
  display: flex;
  align-items: center;
}

/* =====================================================
   BLOQUE VISUAL — Cards de Links
   ===================================================== */

.axis-card-link {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.axis-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

/* Fondo del título del link */
.axis-card-title {
  background: rgba(255, 215, 0, 0.15); /* dorado translúcido */
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Grupo de badges centradas */
.axis-badges-group .badge {
  margin: 0.15rem;
  font-weight: 600;
}

/* Colores personalizados */
.badge-cat {
  background-color: #ffd700;
  color: #0f5132;
}

.badge-publico {
  background-color: #0d6efd;
  color: #fff;
}

.badge-privado {
  background-color: #6c757d;
  color: #fff;
}

.badge-visible {
  background-color: #198754;
  color: #fff;
}

.badge-oculto {
  background-color: #212529;
  color: #fff;
}