/* Estilos personalizados para el blog */
.post-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.post-img-container {
    overflow: hidden;
    border-radius: .25rem 0 0 .25rem;
}
.post-img-container img {
    transition: transform 0.4s ease;
}
.post-card:hover .post-img-container img {
    transform: scale(1.1);
    }

.navbar li {
    margin: 0 10px;
    font-size: 11px;
}

/* Barra de filtros más compacta */
.filtros-bar .form-control,
.filtros-bar .form-select {
    height: 32px;              /* Más bajo que el default de Bootstrap */
    padding: 2px 8px;          /* Menos padding interno */
    font-size: 0.85rem;         /* Texto más chico */
}

.filtros-bar .btn {
    height: 32px;
    font-size: 0.85rem;
    padding: 2px 10px;
}

/* Ajuste para alinear verticalmente */
.filtros-bar .col-md,
.filtros-bar .col-md-auto {
    display: flex;
    align-items: center;
}
/* Achicar el input de búsqueda en el navbar */
.navbar .form-control {
    max-width: 180px;  /* ancho máximo */
    padding: 0.375rem 0.5rem; /* menos padding para hacerlo más compacto */
    font-size: 0.9rem; /* letra un poco más chica */
}

/* Opcional: achicar también el botón de búsqueda si está al lado */
.navbar .btn, 
.navbar .btn-outline-secondary {
    padding: 0.375rem 0.5rem;
    font-size: 0.9rem;
}

/* Contenedor de imagen con overlay */
.bg-image{
  position: relative;
  height: 100%;
  min-height: 85vh;            /* asegura altura agradable en desktop */
  overflow: hidden;
}
.bg-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform .8s ease;
}

/* 1) Degradado blanco hacia la derecha (se funde con el formulario) */
.fade-right-white::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,.85) 88%,
    #fff 100%
  );
  pointer-events:none;
}

/* 2) (Opcional) Degradado blanco hacia abajo. Cambiá la clase si preferís este. */
.fade-bottom-white::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,.9) 95%,
    #fff 100%
  );
  pointer-events:none;
}

/* 3) (Opcional) Leve zoom al pasar el mouse */
.soft-zoom:hover img{
  transform: scale(1.03);
}

/* 4) (Opcional) Un tinte suave para bajar contraste sin blanquear del todo */
.bg-image::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.06); /* subí/bajá el .06 a gusto */
  pointer-events:none;
}
/* Imagen con overlay y efecto */
.bg-image-passwd{
  position: relative;
  min-height: 85vh;
  background: #fff;
  overflow: hidden;
}
.bg-image-passwd img{
  transition: transform .8s ease;
}
.soft-zoom:hover img{ transform: scale(1.03); }

/* Fundido blanco desde todas las puntas */
.fade-all-white::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    circle,
    rgba(255,255,255,0) 65%,
    rgba(255,255,255,.75) 88%,
    #fff 100%
  );
  pointer-events:none;
}

/* Tarjeta tipo “glass” sutil */
.glass-card{
  border-radius: 1rem;
  box-shadow:
    0 10px 30px rgba(0,0,0,.08),
    0 2px 8px rgba(0,0,0,.04);
}

/* Título con tracking leve */
.letter-1{ letter-spacing: .5px; }

/* Input group más delicado */
.input-group-text{
  background:#f8f9fa;
  border-color:#e7e7e7;
}
.form-control{
  border-color:#e7e7e7;
}
.form-control:focus{
  border-color:#9ad0ff;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.1);
}

.bg-imagen-login {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
/* Contenedor de imagen con overlay */
.bg-image-login{
  position: relative;
  height: 100%;
  min-height: 85vh;            /* asegura altura agradable en desktop */
  overflow: hidden;
}
.bg-image-login img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform .8s ease;
}

/* 1) Degradado blanco hacia la derecha (se funde con el formulario) */
.fade-right-white::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,.85) 88%,
    #fff 100%
  );
  pointer-events:none;
}

/* 2) (Opcional) Degradado blanco hacia abajo. Cambiá la clase si preferís este. */
.fade-bottom-white::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,.9) 95%,
    #fff 100%
  );
  pointer-events:none;
}

/* 3) (Opcional) Leve zoom al pasar el mouse */
.soft-zoom:hover img{
  transform: scale(1.03);
}

/* 4) (Opcional) Un tinte suave para bajar contraste sin blanquear del todo */
.bg-image-login::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.06); /* subí/bajá el .06 a gusto */
  pointer-events:none;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5); /* gris oscuro semitransparente */
  border-radius: 50%;
  background-size: 50%, 50%; /* achica la flecha dentro del círculo */
}

.carousel-control-prev,
.carousel-control-next {
  width: 50px; /* ancho de área clickeable */
}

.img-grande {
  width: 100%;
  height: 400px; /* tamaño fijo para la vista grande */
  object-fit: cover;
}

.img-chica {
  width: 100%;
  height: 150px; /* tamaño fijo para la vista previa */
  object-fit: cover;
}
.post-nav-card img {
    transition: transform 0.3s ease;
 }
.post-nav-card:hover img {
    transform: scale(1.05);
}

/* ===== Footer look & feel ===== */
.footer-dark{
  background: #252b30; /* base */
  color: #e6eaed;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-title{
  letter-spacing:.5px; font-weight:700;
}
.footer-subtitle{
  text-transform:uppercase; letter-spacing:.12rem;
  font-size:.82rem; color:#98a4ad; font-weight:700;
}
.footer-text{
  color:#b7c1c8; margin:0;
}

/* Social buttons */
.social-btn{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.15); border-radius:50%;
  color:#e6eaed; transition:all .2s ease;
}
.social-btn:hover{ transform:translateY(-2px); border-color:#7cc0ff; color:#7cc0ff; }

/* Category chips */
.chip-link{
  display:inline-block; padding:.45rem .7rem; font-size:.82rem; font-weight:600;
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
  color:#e6eaed; text-decoration:none; background:rgba(255,255,255,.04);
  transition:all .15s ease;
}
.chip-link:hover{
  background:rgba(124,192,255,.12); border-color:rgba(124,192,255,.5); color:#eaf5ff;
}

/* Footer links */
.footer-link{
  color:#d7dee3; text-decoration:none; position:relative; padding:.15rem 0; display:inline-block;
}
.footer-link:hover{ color:#ffffff; }
.footer-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:#7cc0ff; transition:width .2s ease;
}
.footer-link:hover::after{ width:100%; }

/* Divider */
.footer-divider{ border-color:rgba(255,255,255,.08); }

/* Minor color utility */
.text-secondary-400{ color:#9fb0ba; }

/* Responsive tune */
@media (max-width: 991.98px){
  .footer-dark .col-lg-5{ order:3 }
  .footer-dark .col-lg-3{ order:2 }
}
/*INDEX Bienvenida*/
/* Hover effect en cards */
.hover-card:hover {
    transform: translateY(-5px);
    transition: 0.3s ease-in-out;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}

/* Oculta el texto feo del ClearableFileInput de Django */
.clearable-file-input a,
.clearable-file-input label[for="id_avatar-clear"] {
  display: none !important;
}