/**
 * Estilos específicos para la visualización pública de campañas de mecenazgo
 * Archivo optimizado y organizado
 */

/* ===== CONTENEDORES PRINCIPALES ===== */
.campaigns-container {
    margin-bottom: 30px;
}

.campaign-detail-container {
    margin-bottom: 40px;
}

/* ===== TARJETAS DE CAMPAÑAS (LISTADO) ===== */
.campaign-card {
    transition: all 0.3s ease;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
}

.campaign-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.campaign-card .card-img-container {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.campaign-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.campaign-card:hover .card-img-top {
    transform: scale(1.05);
}

.campaign-card .card-title {
    font-weight: 700;
    margin-bottom: 15px;
}

.campaign-card .card-text {
    color: #666;
    font-size: 0.9rem;
}

.campaign-card .card-footer {
    background-color: transparent;
    border-top: 1px solid #4b4b4b;
    padding: 15px;
}

/* Badges de estado en tarjetas */
.campaign-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 20px;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.campaign-badge.campaign-active {
    background-color: #28a745;
}

.card-title span.badge {
    float: right;
}

.campaign-badge.campaign-ended {
    background-color: #6c757d;
}

/* Información de financiación */
.campaign-funding {
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.funding-amount {
    font-size: 1.1rem;
   
}

.amount{font-size: 3rem; font-weight: 700;}

/* ===== PÁGINA DE DETALLE DE CAMPAÑA ===== */
.campaign-header {
    padding: 20px 0;
    
    margin-bottom: 30px;
}

.campaign-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.campaign-banner img {
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Estilos para la descripción del banner */
.campaign-banner-description {
    padding: 15px;
    background-color: #f8f9fa;
    border-left: 3px solid #25b9d7;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* Estadísticas y recaudación */
.campaign-stats {}

/* Navegación por pestañas */
.campaign-nav {
    margin-bottom: 20px;
}

.campaign-nav .nav-tabs {
    border-bottom: 0px solid #ddd;
}


.campaign-nav .nav-item {
    width:fit-content;
    display: inline-block;
}

.campaign-nav .nav-link {
    color: #6c757d;
    font-weight: 600;
    padding: 10px 15px;
    border: none;
    /*border-bottom: 3px solid transparent;*/
    transition: all 0.3s;
}

.campaign-nav .nav-link:hover {
    color: #ffb303;
}

.campaign-nav .nav-link.active{
    color: #ffb303;
    background: none;
    border-bottom: 3px solid #ffb303;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:focus{
    color: #ffb303;
    background: none;
    border-bottom: 3px solid #ffb303;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #f6f6f6 #f6f6f6 #ddd;
}

/* Contenido principal */
.campaign-content {
    line-height: 1.7;
}

/* ===== NIVELES DE RECOMPENSA ===== */
.reward-levels h3,
.campaign-levels h3,
.campaign-addons h3 {
    margin-bottom: 20px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.level-item,
.addon-item {
    border: 1px solid #454545;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.level-item:hover,
.addon-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.level-stats,
.addon-stats {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dotted #eee;
}

#pledges h3.h4 {
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Estilos para las imágenes de niveles de recompensa */
.level-item .card-body img {
    width: 100%;
    height: 120px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Mantiene la proporción sin distorsionar */
    border-radius: 4px;
    margin-bottom: 15px;
}

.level-item .card-body {
    padding-top: 15px;
}
.campaign-boton-compra{margin-top: 15px;}

/* ===== CONTADOR DE TIEMPO ===== */
.countdown {
    
    
}

.countdown-days,
.countdown-hours,
.countdown-minutes,
.countdown-seconds {
    display: inline-block;
    min-width: 30px;
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
}
.campaign-content img {width: 100%; height: auto;}
/* Estilos para la sección de FAQ */
.campaign-faq h4 {
   /* color: #232323; */
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.campaign-faq h4::before {
    content: "Pregunta: ";
    color: #ffb303;
    font-weight: bold;
}

.campaign-faq p {
    margin-left: 20px;
    margin-bottom: 20px;
    line-height: 1.6;
}
/* Estilos noticias */
.news-title {
    color: #ffb303;
    font-size: 2rem;
    font-weight: 600;
    margin-top: 20px;
}
.news-content p{margin:20px 0 40px 0;
}
.text-center {text-align: center;}
/* Estilos para la sección de comentarios */

.project-comments span.badge, .comment-replies span.badge{
    padding: 0px 5px;
    background-color: #000000;
    font-size: xx-small;
    line-height: 2em;
    border-radius: 20px;
}

.campaign-comments {
    padding: 15px 0;
}

.comment{
    margin-bottom: 35px;
}

.comment-form {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.comment-list {
    margin-top: 30px;
}

.comment-item {
    padding: 15px;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.comment-author {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment-author-name {
    font-weight: 600;
    color: #232323;
}

.comment-date {
    font-size: 0.9em;
    color: #6c757d;
    margin-left: 10px;
}

.comment-content,.reply-content  {
    line-height: 1.6;
   /*color: #212529;*/
   background-color: rgb(65, 65, 65);
   padding: 10px 10px 2px 20px;
    
}
.rounded {
    border-radius: 5px;
}

.comment-own {
  /*  
  background-color: rgba(255, 154, 82, 0.3);
    border-color: #FF9A52;
    */
}
.pending-approval-badge{
    float: right;
   /* height: 100px;*/
    width: 120px;
    text-align: center;
} 

.alert-warning.pending-approval-badge  .material-icons{
    margin-right: 0px;
    font-size: 2.5em;
} 
.pending-approval-badge p{
    margin-top: 5px;
    font-size: smaller;
} 

.reply {
    margin-top:20px

}
.reply-action {text-align:right;padding-top: 10px;}
.reply-button {color: #999999; font-weight: 600; cursor: pointer;font-size: 0.7em;}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    .campaign-title {
        font-size: 1.8rem;
    }
    
    .campaign-banner {
        margin-top: 20px;
    }
    
    .campaign-stats {
        padding: 15px;
    }
}