/* DONACIONES PREMIUM — USA VARIABLES DE design-system.css */
/* La paleta aquí es solo un alias local para facilitar la lectura */


.donacion-hero-v2 {
    background: var(--brand-primary);
    padding: 80px 0 160px;
    margin-bottom: -80px;
    position: relative;
    overflow: hidden;
}

.pet-card-modern-v2 {
    background: transparent;
    border-radius: 20px;
    overflow: hidden;
    width: 320px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.3);
}

.pet-img-box-v2 {
    background: var(--neutral-100); /* Neutro en lugar de amarillo hardcodeado */
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pet-img-box-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La foto llena siempre el espacio sin bordes de color */
}

.pet-card-footer-v2 {
    background: #1a5276;
    color: white;
}

.badge-pill-orange {
    background: var(--brand-accent, #f39c12);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.4);
}

.accent-orange-text {
    color: var(--accent-orange-don);
}

.stats-row-v2 .stat-val {
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.stats-row-v2 .stat-lab {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.7;
    letter-spacing: 1px;
}

.wave-shape {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 0;
}

/* IMPACT CARDS - Feedback visual de selección */
.impact-card-v2 {
    background: white;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.4s var(--transition-std);
    border: 3px solid transparent !important;
    display: block;
    overflow: hidden;
    position: relative;
}

.impact-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* Selector corregido para vinculación con Radios root */
#c1:checked ~ #causas label[for="c1"],
#c2:checked ~ #causas label[for="c2"],
#c3:checked ~ #causas label[for="c3"] {
    border-color: var(--brand-accent) !important;
    background: #fffaf2;
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 45px rgba(243, 156, 18, 0.2) !important;
}

/* Feedback en el Icono cuando está seleccionado */
#c1:checked ~ #causas label[for="c1"] .i-icon,
#c2:checked ~ #causas label[for="c2"] .i-icon,
#c3:checked ~ #causas label[for="c3"] .i-icon {
    background: var(--brand-accent) !important;
    color: white;
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 8px 20px rgba(243, 156, 18, 0.3);
}

/* Indicador de "Check" dinámico */
.impact-card-v2::after {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    color: var(--brand-accent);
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
    z-index: 10;
}

#c1:checked ~ #causas label[for="c1"]::after,
#c2:checked ~ #causas label[for="c2"]::after,
#c3:checked ~ #causas label[for="c3"]::after {
    opacity: 1;
    transform: scale(1);
}

.i-img { height: 200px; background: #222; position: relative; overflow: hidden; }
.i-img img { height: 100%; width: 100%; object-fit: cover; opacity: 0.8; }
.u-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #007bff; color: white; padding: 5px 15px; font-size: 0.75rem; font-weight: 800; z-index: 2; border-radius: 0 0 10px 10px; }

.i-icon { 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.5rem; 
    color: #1a5276; 
    background: #eef6ff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    transition: all 0.3s ease;
    margin: 0 auto;
}

/* Colores "soft" para los estados no seleccionados */
.bg-danger-soft  { background: #ffebeb !important; color: #dc3545 !important; }
.bg-warning-soft { background: #fff8e1 !important; color: #f39c12 !important; }
.bg-primary-soft { background: #e3f2fd !important; color: #007bff !important; }

/* FORMS (Imagen 1) */
.bg-light-soft { background: #f8f9fa; }

.toggle-pill {
    display: flex;
    background: #eef2f6;
    padding: 5px;
    border-radius: 12px;
}

.t-btn {
    flex: 1;
    text-align: center;
    padding: 13px 12px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    color: #64748b;
    transition: all 0.3s;
    border: 2px solid transparent;
    user-select: none;
}

/* Botón DINERO activo */
#typeD:checked ~ div .btnD {
    background: #1a5276;
    color: white !important;
    border-color: #1a5276;
    box-shadow: 0 6px 20px rgba(26, 82, 118, 0.35);
    transform: scale(1.02);
}

/* Botón ALIMENTO activo */
#typeA:checked ~ div .btnA {
    background: #1a5276;
    color: white !important;
    border-color: #1a5276;
    box-shadow: 0 6px 20px rgba(26, 82, 118, 0.35);
    transform: scale(1.02);
}


.btn-monto {
    background: white; border: 2px solid #dee2e6; color: #1a5276;
    padding: 10px 20px; border-radius: 10px; font-weight: 700; transition: all 0.25s;
    cursor: pointer;
}

.btn-monto-label {
    background: white; border: 2px solid #dee2e6; color: #1a5276;
    padding: 10px 20px; border-radius: 10px; font-weight: 700; transition: all 0.25s;
    cursor: pointer; display: inline-block;
}

.btn-monto:hover,
.btn-monto-label:hover { background: #eef6ff; border-color: #1a5276; }

/* Estilo activo asociado al estado de la pestaña */
.monto-radio:checked + .btn-monto-label {
    background: #1a5276;
    color: white;
    border-color: #1a5276;
    box-shadow: 0 4px 12px rgba(26,82,118,0.3);
}

/* Banner de confirmacion tras donacion exitosa */
.alert-donacion-success {
    background: linear-gradient(135deg, #f0fff4, #dcfce7);
    border: 2px solid #6ee7b7;
    color: #065f46;
}


.input-icon-box {
    background: white; border: 1px solid #dee2e6; border-radius: 10px; padding: 12px 18px; display: flex; align-items: center; margin-top: 10px;
}

.input-icon-box i { font-size: 1.2rem; margin-right: 15px; }
.input-icon-box input { border: none; font-weight: 600; padding: 0; box-shadow: none !important; background: transparent; }

/* DONOR BOX (Imagen 1) */
.donor-box {
    background: #ffffff; border: 1px solid #eef2f6; box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.avatar-blue {
    width: 48px; height: 48px; background: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}

/* RESUMEN BOX (Imagen 1 - Exclusividad) */
.resumen-box {
    background: white; border: 2px solid #007bff; box-shadow: 0 10px 30px rgba(0, 123, 255, 0.05);
}

.btn-primary-modern {
    background: #1a5276;
    color: white;
    border: none;
    box-shadow: 0 10px 30px rgba(26, 82, 118, 0.35);
    transition: all 0.3s;
}

.btn-primary-modern:hover {
    background: #154360;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(26, 82, 118, 0.45);
    color: white;
}

/* ============================================================
   PANEL DINERO vs PANEL ALIMENTO (ZERO-JS CONDITIONAL DISPLAY)
   Exclusividad visual: Ocultamiento directo atado a los radio buttons principales.
   Utiliza sibling combinators (~) para alcanzar componentes anidados.
   ============================================================ */

/* Si DINERO NO está seleccionado, ocultar sus causas, sección y panel derecho */
#typeD:not(:checked) ~ #causas,
#typeD:not(:checked) ~ #aporte #sectionD,
#typeD:not(:checked) ~ #aporte .panel-tipo-dinero {
    display: none !important;
}

/* Si ALIMENTOS NO está seleccionado, ocultar sus entradas y panel de entrega */
#typeA:not(:checked) ~ #aporte #sectionA,
#typeA:not(:checked) ~ #aporte .panel-tipo-alimento {
    display: none !important;
}

.panel-tipo-dinero,
.panel-tipo-alimento {
    animation: fadeInPanel 0.4s ease forwards;
}

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Estilos del modal de pasarela de pagos */
.payment-option-radio { position: absolute; opacity: 0; pointer-events: none; }

.payment-option-card {
    border: 2px solid #eef2f6;
    border-radius: 14px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    gap: 14px;
    background: white;
    font-weight: 600;
    color: #1e293b;
}

.payment-option-card:hover {
    border-color: #1a5276;
    background: #f0f6fc;
}

.payment-option-radio:checked + .payment-option-card {
    border-color: #1a5276 !important;
    background: #eef6ff;
    box-shadow: 0 4px 15px rgba(26, 82, 118, 0.15);
}

.payment-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* =======================================================
   PASARELA DE PAGO SIMULADO - HACK CSS
   ======================================================= */
.pago-panel                              { display: none; }
#pNequi:checked    ~ div .pago-panel-cel { display: block; }
#pDaviplata:checked ~ div .pago-panel-cel { display: block; }
#pPse:checked      ~ div .pago-panel-pse { display: block; }
#pTarjeta:checked  ~ div .pago-panel-tar { display: block; }

/* Resaltar label del metodo seleccionado */
#pNequi:checked    ~ div label[for="pNequi"],
#pDaviplata:checked ~ div label[for="pDaviplata"],
#pPse:checked      ~ div label[for="pPse"],
#pTarjeta:checked  ~ div label[for="pTarjeta"] {
    border-color: #1a5276 !important;
    background: #eef6ff;
    box-shadow: 0 4px 12px rgba(26,82,118,0.15);
}

/* =======================================================
   UTILIDADES DE COLOR Y TEXTO (Reemplazo de Inline)
   ======================================================= */
.text-brand { color: #1a5276 !important; }
.text-accent { color: #f39c12 !important; }
.text-success-dark { color: #1a8a4a !important; }
.text-pse { color: #0066cc !important; }
.text-nequi { color: #7c3aed !important; }
.text-tarjeta { color: #10b981 !important; }
.text-muted-small { font-size: 0.78rem; opacity: 0.8; }
.text-xsmall-bold { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.5px; }

/* =======================================================
   COMPONENTES DE ENTREGA (Alimentos)
   ======================================================= */
.card-entrega {
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.card-entrega-presencial {
    border-color: #bae6fd;
    background: #f0f9ff;
}

.card-entrega-domicilio {
    border-color: #fde68a;
    background: #fffbeb;
}

/* =======================================================
   COMPONENTES DE MAPA Y SEDE
   ======================================================= */
.sede-info-box {
    background: #eef6ff;
    border: 2px solid #c8dff5;
}

.map-container-rounded {
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
}

/* =======================================================
   PASARELA DE PAGOS - PANELES DE COLOR
   ======================================================= */
.modal-custom-header { background: #f8f9fa; }
.modal-custom-footer { background: #f8f9fa; }

.pago-panel-v2 {
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border-width: 1.5px;
    border-style: solid;
}

.pago-panel-celular { background: #f8f2ff; border-color: #e0cffc; }
.pago-panel-pse     { background: #eef4ff; border-color: #c3d9ff; }
.pago-panel-tarjeta { background: #f0fff8; border-color: #a7f3d0; }

.alert-simulacion {
    background: #fff8e1;
    color: #92400e;
}

.input-no-border-left { border-left: 0 !important; }
.input-no-border-right { border-right: 0 !important; }
.input-monospace-track { font-family: monospace; letter-spacing: 2px; font-size: 1rem; }

/* =======================================================
   REGLAS DEL HACK DE CSS PURO (Migradas desde el HTML)
   ======================================================= */

/* Tipo donacion: ocultar Causas cuando Alimento */
#typeA:checked ~ section#causas                         { display: none !important; }

/* Tipo donacion: alternar paneles de la columna derecha */
#typeD:checked ~ .container-aporte .panel-tipo-alimento { display: none !important; }
#typeA:checked ~ .container-aporte .panel-tipo-dinero   { display: none !important; }

/* Actualización de Resumen con CSS (Hack Dinámico) */
.r-c1, .r-c2, .r-c3, .r-m1, .r-m2, .r-m3, .r-m4 { display: none; }

#c1:checked ~ .container-aporte .resumen-box .r-c1 { display: inline; }
#c2:checked ~ .container-aporte .resumen-box .r-c2 { display: inline; }
#c3:checked ~ .container-aporte .resumen-box .r-c3 { display: inline; }

#m1:checked ~ .container-aporte .resumen-box .r-m1 { display: inline; }
#m2:checked ~ .container-aporte .resumen-box .r-m2 { display: inline; }
#m3:checked ~ .container-aporte .resumen-box .r-m3 { display: inline; }
#m4:checked ~ .container-aporte .resumen-box .r-m4 { display: inline; }

/* Si el usuario escribe en personalizado, invalidamos los spans predeterminados y mostramos hint */
#montoPersonalizado:not(:placeholder-shown) {
    border-color: #28a745;
}
.container-aporte:has(#montoPersonalizado:not(:placeholder-shown)) .resumen-hint-custom {
    display: inline !important;
}
.container-aporte:has(#montoPersonalizado:not(:placeholder-shown)) .r-m1,
.container-aporte:has(#montoPersonalizado:not(:placeholder-shown)) .r-m2,
.container-aporte:has(#montoPersonalizado:not(:placeholder-shown)) .r-m3,
.container-aporte:has(#montoPersonalizado:not(:placeholder-shown)) .r-m4 {
    display: none !important;
}

/* Entrega alimento: resaltar opcion seleccionada */
.entrega-radio:checked + .entrega-card                  {
    border-color:#1a5276 !important; background:#eef6ff;
}

/* Utilidades Finales - Donaciones */
.resumen-hint-custom {
    display: none;
    font-size: 0.9rem;
    color: #f39c12 !important;
}

.text-donor-tag {
    font-size: 0.6rem;
}