body{background:#f7f5f1;color:#101828;font-family:Arial,Helvetica,sans-serif}.navbar-brand img{width:54px;height:54px;object-fit:contain}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-family:Georgia,serif;font-size:1rem;letter-spacing:.04em}.brand-copy small{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:#7d1117;margin-top:4px}.btn-brand,.btn-primary{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff}.btn-brand:hover,.btn-primary:hover{filter:brightness(.92);color:#fff}.hero{background:linear-gradient(135deg,#fff 0%,#f8f1e7 55%,#f0e3cf 100%);padding:72px 0;border-bottom:1px solid #eadfce}.eyebrow{color:var(--gold);text-transform:uppercase;font-weight:700;letter-spacing:.14em;font-size:.83rem}.hero h1{font-family:Georgia,serif;color:var(--secondary);font-size:clamp(2.4rem,5vw,5rem);line-height:.98}.hero-logo{max-width:300px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.08))}.section-title{font-family:Georgia,serif;color:var(--secondary)}.course-card{border:0;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 12px 35px rgba(11,24,51,.09);height:100%;transition:.2s}.course-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,24,51,.15)}.course-poster{aspect-ratio:4/5;object-fit:cover;width:100%}.course-card .card-body{padding:1.35rem}.badge-gold{background:#f2e5d2;color:#8a5d22}.price{font-size:1.25rem;font-weight:800;color:var(--primary)}.detail-poster{border-radius:20px;box-shadow:0 16px 45px rgba(0,0,0,.12);width:100%}.detail-card,.panel-card{background:#fff;border:0;border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.07)}.course-copy{font-size:1.08rem;line-height:1.75}.site-footer{background:#0b1833;color:#fff}.footer-bottom{background:#071024}.footer-brand{font-family:Georgia,serif;font-size:1.4rem}.footer-wa{color:#fff;text-decoration:none;font-weight:700;font-size:1.25rem}.admin-sidebar a{display:block;padding:.65rem .8rem;color:#243148;text-decoration:none;border-radius:9px}.admin-sidebar a:hover{background:#f2ede7;color:#7d1117}.material-row{border:1px solid #e7e2da;border-radius:14px;padding:1rem;background:#fff}.status-pill{font-size:.78rem;padding:.35rem .65rem;border-radius:999px;font-weight:700}.status-pending{background:#fff3cd;color:#7a5b00}.status-approved,.status-active{background:#d1e7dd;color:#0f5132}.status-rejected{background:#f8d7da;color:#842029}.receipt-img{max-width:100%;max-height:480px;object-fit:contain;border-radius:12px;background:#f7f7f7}.form-control,.form-select{border-radius:10px;padding:.7rem}.table>:not(caption)>*>*{vertical-align:middle}.login-shell{min-height:70vh;display:flex;align-items:center}.login-card{max-width:520px;margin:auto;background:#fff;border-radius:20px;box-shadow:0 16px 45px rgba(0,0,0,.08);padding:2rem}@media(max-width:767px){.hero{padding:48px 0}.brand-copy{display:none}.hero-logo{max-width:210px}.course-poster{aspect-ratio:3/4}}
.user-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.28rem .55rem;border:1px solid #e7e2da;border-radius:999px;background:#fff}.user-avatar,.user-initial{width:34px;height:34px;border-radius:50%;object-fit:cover}.user-initial,.avatar-letter{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-weight:800}.notif-badge{position:absolute;top:2px;right:2px;background:var(--primary);color:#fff;border-radius:999px;font-size:.65rem;min-width:18px;height:18px;line-height:18px;text-align:center;padding:0 4px}.notification-menu{width:min(390px,90vw);border-radius:14px;overflow:hidden}.notif-item{padding:.8rem 1rem;border-bottom:1px solid #f0ede8}.notif-item.unread,.notification-page-item.unread{background:#fff8ed}.notification-page-item{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;text-decoration:none;color:inherit;border-bottom:1px solid #eee}.payment-choice{display:flex;align-items:flex-start;gap:1rem;border:1px solid #e4dfd7;border-radius:16px;padding:1rem;cursor:pointer;background:#fff}.payment-choice:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 3px rgba(181,134,61,.12)}.payment-choice input{margin-top:.45rem}.payment-choice small{display:block;color:#6c757d;margin-top:.2rem}.payment-icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#f5ede2;color:var(--primary);font-size:1.25rem}.purchase-summary{background:#faf8f4;border-radius:18px;padding:1rem}.account-card{display:block;border:1px solid #e4dfd7;border-radius:16px;padding:1rem;cursor:pointer;background:#fff}.account-card:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 3px rgba(181,134,61,.12)}.account-card input{float:right}.account-card small{display:block}.success-icon{width:76px;height:76px;border-radius:50%;background:#d1e7dd;color:#0f5132;display:grid;place-items:center;font-size:2.2rem;margin:auto}.profile-avatar{width:128px;height:128px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 8px 24px rgba(0,0,0,.12);margin:auto}.profile-initial{display:grid;place-items:center;background:var(--primary);color:#fff;font-size:3rem;font-weight:800}.avatar-sm{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px}.gateway-head{background:var(--secondary);color:#fff}.fake-card{background:linear-gradient(135deg,#121b35,#263653);color:#fff;border-radius:22px;padding:1.5rem;box-shadow:0 20px 40px rgba(11,24,51,.22);max-width:460px;margin:auto}.fake-card-number{font-size:1.55rem;letter-spacing:.12em;margin:2.2rem 0 1.4rem;font-family:monospace}.rotate-90{transform:rotate(90deg)}

/* Mis cursos: cuadrícula consistente */
.my-courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.5rem;align-items:stretch}.my-courses-grid .course-card{width:100%;max-width:none}.my-courses-grid .course-poster{height:360px;aspect-ratio:auto;object-fit:cover}.my-courses-grid .card-body{min-height:190px}
.menu-notif-count{display:inline-flex;min-width:20px;height:20px;padding:0 6px;align-items:center;justify-content:center;border-radius:999px;background:var(--primary);color:#fff;font-size:.7rem;font-weight:700}.mobile-menu-top{display:none}.user-dropdown{min-width:250px;border-radius:14px;overflow:hidden}.payment-account-currency{display:inline-flex;padding:.18rem .48rem;border-radius:999px;background:#eef2f7;font-weight:700;font-size:.72rem}.whatsapp-proof-box{background:#edf9f1;border:1px solid #ccebd6;border-radius:16px;padding:1rem}.review-link-card{max-width:720px;margin:auto}.live-class-card{border:1px solid #e3ded5;background:linear-gradient(135deg,#fff,#faf4ea);border-radius:16px;padding:1rem 1.2rem}
@media(max-width:991.98px){
 body.menu-open{overflow:hidden}.main-navbar{z-index:1040}.main-navbar .navbar-collapse{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;background:#fff;z-index:1060;padding:1.25rem;overflow-y:auto;transform:none!important}.main-navbar .navbar-collapse:not(.show){display:none!important}.main-navbar .navbar-collapse.collapsing{display:block!important;height:100dvh!important;transition:none}.mobile-menu-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid #eee}.main-navbar .navbar-nav{align-items:stretch!important;gap:.25rem}.main-navbar .nav-link{padding:.9rem 1rem;border-radius:12px;font-size:1.05rem}.main-navbar .nav-link:hover{background:#f7f3ee}.user-menu-trigger{padding:.4rem!important}.user-chip{width:100%;justify-content:flex-start;padding:.65rem .8rem}.user-chip .bi-chevron-down{margin-left:auto}.user-dropdown{position:static!important;transform:none!important;width:100%;margin-top:.5rem!important;box-shadow:none!important;border:1px solid #eee!important}.main-navbar .btn-brand{width:100%;margin:0!important}.brand-copy{display:none}
}
@media(max-width:575.98px){.my-courses-grid{grid-template-columns:1fr}.my-courses-grid .course-poster{height:auto;aspect-ratio:4/5}.container.py-5{padding-top:2rem!important;padding-bottom:2rem!important}}

/* Mejora visual: transferencia y Mis cursos */
.payment-accounts-grid{align-items:stretch}
.account-card{position:relative;padding:0;overflow:hidden;border:1px solid #ded8cf;transition:.18s ease;box-shadow:0 5px 16px rgba(11,24,51,.04)}
.account-card:hover{border-color:#c6aa7d;box-shadow:0 8px 22px rgba(11,24,51,.08)}
.account-card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;background:#faf8f4;border-bottom:1px solid #eee8df}
.account-card-head>div{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.account-card-head input{float:none;margin:0;width:18px;height:18px;flex:0 0 18px}
.account-details{padding:.9rem 1.1rem 1.05rem}
.account-detail-row{display:grid;grid-template-columns:125px 1fr;gap:.75rem;padding:.42rem 0;border-bottom:1px dashed #ece6dd;align-items:start}
.account-detail-row:last-of-type{border-bottom:0}
.account-detail-row span{font-size:.78rem;color:#697386;text-transform:uppercase;letter-spacing:.035em;font-weight:700}
.account-detail-row strong{font-size:.94rem;color:#182230;overflow-wrap:anywhere}
.account-instructions{margin-top:.8rem;padding:.75rem .85rem;border-radius:10px;background:#fff7e8;color:#634b21;font-size:.82rem;line-height:1.5}
.payment-step{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem;border:1px solid #e5dfd6;border-radius:15px;background:#fff}
.payment-step-number{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:800}
.whatsapp-proof-box{background:#f3fbf5;border-color:#cbe8d2}
.whatsapp-proof-box .payment-step-number{background:#198754;font-size:1.15rem}

/* Mis cursos: tarjetas más compactas, completas y en cuadrícula */
.my-courses-grid{grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1.1rem}
.my-courses-grid .course-card{border-radius:16px;min-width:0}
.my-courses-grid .course-poster{height:245px;aspect-ratio:auto;object-fit:contain;background:#f4f1ec;padding:0}
.my-courses-grid .card-body{padding:1rem;min-height:165px}
.my-courses-grid .card-body h2{font-size:1rem;margin-bottom:.45rem}
.my-courses-grid .card-body p{font-size:.78rem;line-height:1.45;margin-bottom:.75rem}
.my-courses-grid .card-body .btn{font-size:.86rem;padding:.55rem .75rem}
.my-courses-grid .badge.position-absolute{font-size:.68rem;margin:.65rem!important}

@media(min-width:1200px){.my-courses-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:768px) and (max-width:1199.98px){.my-courses-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767.98px){
 .my-courses-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
 .my-courses-grid .course-poster{height:190px}
 .my-courses-grid .card-body{padding:.8rem;min-height:150px}
 .account-detail-row{grid-template-columns:105px 1fr}
}
@media(max-width:480px){
 .my-courses-grid{grid-template-columns:1fr 1fr;gap:.65rem}
 .my-courses-grid .course-poster{height:165px}
 .my-courses-grid .card-body{padding:.7rem;min-height:145px}
 .my-courses-grid .card-body h2{font-size:.9rem}
 .my-courses-grid .card-body p,.my-courses-grid .small{font-size:.7rem}
 .my-courses-grid .card-body .btn{font-size:.75rem;padding:.48rem .4rem}
 .account-detail-row{grid-template-columns:1fr;gap:.1rem;padding:.4rem 0}
 .payment-step{padding:.9rem;gap:.75rem}
}

/* Header: centro de notificaciones fuera del menú de usuario */
.header-notification{position:relative;z-index:1080}
.notification-bell-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid transparent;color:#253148;background:transparent;padding:0}
.notification-bell-btn:hover,.notification-bell-btn:focus{background:#f7f3ee;border-color:#e8e0d5;color:var(--primary)}
.header-notif-badge{position:absolute;top:-2px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--primary);color:#fff;border:2px solid #fff;font-size:.65rem;font-weight:800;display:grid;place-items:center}
.notification-preview-menu{width:min(410px,calc(100vw - 24px));padding:0;border-radius:16px;overflow:hidden;margin-top:.7rem!important}
.notification-preview-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid #eee8df;background:#fff}
.notification-preview-list{max-height:390px;overflow-y:auto}
.notification-preview-item{position:relative;display:grid;grid-template-columns:38px 1fr auto;gap:.75rem;padding:.85rem 1rem;text-decoration:none;color:#1e293b;border-bottom:1px solid #f0ece6;transition:.15s ease}
.notification-preview-item:hover{background:#faf7f2;color:#1e293b}
.notification-preview-item.unread{background:#fff9ee}
.notification-preview-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f3eee7;color:var(--primary);font-size:1rem}
.notification-preview-icon.type-success{background:#e8f6ee;color:#198754}.notification-preview-icon.type-danger{background:#fdebed;color:#b42318}
.notification-preview-copy{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.notification-preview-copy strong{font-size:.88rem}.notification-preview-copy small{font-size:.77rem;line-height:1.35;color:#667085;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-preview-copy time{font-size:.69rem;color:#98a2b3}
.notification-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);margin-top:.3rem}
.notification-preview-footer{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.8rem 1rem;text-decoration:none;font-weight:700;font-size:.84rem;color:var(--primary);background:#fff}
.notification-preview-empty{padding:2rem 1rem;display:flex;align-items:center;justify-content:center;gap:.6rem;color:#8a94a6}

/* Selector de vista de Mis cursos */
.course-view-switcher{display:inline-flex;align-items:center;padding:4px;background:#fff;border:1px solid #e5ded5;border-radius:12px;box-shadow:0 5px 15px rgba(11,24,51,.04)}
.course-view-btn{border:0;background:transparent;color:#667085;padding:.48rem .7rem;border-radius:9px;display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600}
.course-view-btn:hover{background:#f7f3ee;color:#243148}.course-view-btn.active{background:var(--primary);color:#fff}

/* Cuadrícula predeterminada: ocupa el ancho disponible y agrega filas automáticamente */
.my-courses-grid.course-view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:1.15rem;align-items:stretch}
.my-courses-grid.course-view-grid .course-card{width:100%;max-width:none}
.my-courses-grid.course-view-grid .course-poster{height:255px;object-fit:contain;background:#f4f1ec}

/* Columnas: tarjetas más anchas, 2 por fila */
.my-courses-grid.course-view-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.my-courses-grid.course-view-column .course-card{display:grid!important;grid-template-columns:190px 1fr;min-height:240px;overflow:hidden}
.my-courses-grid.course-view-column .course-poster{width:190px;height:100%;min-height:240px;object-fit:cover;background:#f4f1ec}
.my-courses-grid.course-view-column .course-card>.position-relative{height:100%}.my-courses-grid.course-view-column .course-card>.position-relative .course-poster{height:100%}
.my-courses-grid.course-view-column .card-body{min-height:0;padding:1.05rem}

/* Lista: una fila compacta por curso */
.my-courses-grid.course-view-list{display:flex;flex-direction:column;gap:.8rem}
.my-courses-grid.course-view-list .course-card{display:grid!important;grid-template-columns:115px minmax(0,1fr);width:100%;min-height:145px;overflow:hidden}
.my-courses-grid.course-view-list .course-poster{width:115px;height:145px;object-fit:cover;background:#f4f1ec}
.my-courses-grid.course-view-list .course-card>.position-relative{height:145px}.my-courses-grid.course-view-list .course-card>.position-relative .course-poster{height:145px;width:115px}
.my-courses-grid.course-view-list .card-body{min-height:0;padding:.9rem 1rem}.my-courses-grid.course-view-list .card-body h2{font-size:1rem}.my-courses-grid.course-view-list .card-body .btn{width:auto!important;align-self:flex-start;min-width:180px}
.payment-admin-card:target{outline:3px solid rgba(181,134,61,.35);box-shadow:0 0 0 6px rgba(181,134,61,.10),0 10px 28px rgba(0,0,0,.07)}

@media(max-width:991.98px){
 .header-notification{margin-left:auto!important;z-index:1085}
 .main-navbar .navbar-toggler{z-index:1085}
 .notification-preview-menu{position:fixed!important;top:58px!important;right:12px!important;left:auto!important;transform:none!important;width:min(410px,calc(100vw - 24px));max-height:calc(100dvh - 76px)}
 .notification-preview-list{max-height:calc(100dvh - 190px)}
 .my-courses-grid.course-view-column{grid-template-columns:1fr}
}
@media(max-width:767.98px){
 .course-view-switcher{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.course-view-btn{justify-content:center}.course-view-btn span{display:none}
 .my-courses-grid.course-view-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
 .my-courses-grid.course-view-grid .course-poster{height:200px}
 .my-courses-grid.course-view-column .course-card{grid-template-columns:145px 1fr;min-height:190px}.my-courses-grid.course-view-column .course-poster{width:145px;min-height:190px}
}
@media(max-width:480px){
 .notification-preview-menu{top:54px!important;right:8px!important;width:calc(100vw - 16px)}
 .my-courses-grid.course-view-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.my-courses-grid.course-view-grid .course-poster{height:160px}
 .my-courses-grid.course-view-column .course-card{grid-template-columns:110px 1fr;min-height:170px}.my-courses-grid.course-view-column .course-poster{width:110px;min-height:170px}.my-courses-grid.course-view-column .card-body{padding:.75rem}
 .my-courses-grid.course-view-list .course-card{grid-template-columns:90px 1fr;min-height:125px}.my-courses-grid.course-view-list .course-poster,.my-courses-grid.course-view-list .course-card>.position-relative .course-poster{width:90px;height:125px}.my-courses-grid.course-view-list .course-card>.position-relative{height:125px}.my-courses-grid.course-view-list .card-body{padding:.7rem}.my-courses-grid.course-view-list .card-body .btn{min-width:0;width:100%!important}
}