/* credit-modals.css — modales globales (login / hazte Pro / packs IA / tope diario).
   Salió de partials/credit-modals.blade.php (2026-08-23); va en todas las páginas
   y como archivo queda cacheado por asset_v(). */
.nc-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    display: none; align-items: flex-start; justify-content: center;
    z-index: 9999; padding: 20px;
    /* En un móvil bajo el modal puede ser más alto que la pantalla. Con
       align-items:center el sobrante se sale por ARRIBA y no hay forma de
       llegar a los botones (el scroll solo descubre lo de abajo). El
       margin:auto del hijo lo centra cuando cabe y lo deja arriba cuando no,
       que es lo que hace que este overflow se pueda desplazar de verdad. */
    overflow-y: auto; overscroll-behavior: contain;
    animation: ncFade .2s ease-out;
}
.nc-modal-backdrop.open { display: flex; }
@keyframes ncFade { from { opacity: 0; } to { opacity: 1; } }

.nc-modal {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 30px 28px;
    max-width: 440px; width: 100%; position: relative;
    margin: auto;   /* centra si cabe, deja desplazar si no — ver el backdrop */
    animation: ncPop .25s cubic-bezier(.2,.9,.32,1.2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
/* Pantallas estrechas: se recupera alto sin tocar la jerarquía. */
@media (max-width: 420px) {
    .nc-modal-backdrop { padding: 14px; }
    .nc-modal { padding: 24px 18px; }
    .nc-modal-emoji { font-size: 38px; }
    .nc-modal-title { font-size: 20px; }
    .nc-btn { padding: 12px 14px; }
}
@keyframes ncPop { from { opacity:0; transform: scale(.92); } to { opacity:1; transform: scale(1); } }

.nc-modal-close {
    position: absolute; top: 12px; right: 14px;
    width: 30px; height: 30px; border-radius: 50%;
    background: transparent; border: none; color: var(--muted);
    font-size: 20px; cursor: pointer; transition: all .15s;
    display: flex; align-items: center; justify-content: center;
}
.nc-modal-close:hover { background: var(--bg3); color: var(--text); }

.nc-modal-emoji {
    font-size: 44px; margin-bottom: 8px; line-height: 1;
    text-align: center;
}
.nc-modal-title {
    font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 800;
    color: var(--text); margin-bottom: 8px; text-align: center;
    letter-spacing: -0.3px;
}
.nc-modal-text {
    font-size: 14px; color: var(--muted); line-height: 1.5;
    text-align: center; margin-bottom: 22px;
}
.nc-modal-text strong { color: var(--text); font-weight: 700; }
.nc-modal-text .nc-highlight { color: var(--orange); font-weight: 700; }

.nc-modal-actions {
    display: flex; flex-direction: column; gap: 10px;
}
.nc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--radius-button);
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700;
    text-decoration: none; cursor: pointer; border: 1px solid; transition: all .2s;
}
.nc-btn-primary {
    background: var(--orange); color: white; border-color: var(--orange);
}
.nc-btn-primary:hover { background: var(--orange2); box-shadow: 0 4px 14px color-mix(in srgb, var(--orange) 35%, transparent); }
.nc-btn-ghost {
    background: transparent; color: var(--text); border-color: var(--border);
}
.nc-btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.nc-modal-link {
    display: block; text-align: center; margin-top: 4px;
    font-size: 13px; color: var(--muted); text-decoration: none; font-weight: 600;
}
.nc-modal-link:hover { color: var(--orange); text-decoration: underline; }
/* Aclaración bajo el botón de descarga PRO: qué se lleva exactamente. */
.nc-gift-note {
    margin: -2px 0 2px; font-size: 12px; line-height: 1.5;
    color: var(--muted); text-align: center;
}
.nc-gift-note a { color: var(--orange); text-decoration: none; font-weight: 600; white-space: nowrap; }
.nc-gift-note a:hover { text-decoration: underline; }
/* Variante IA: morado (los créditos IA SIEMPRE van en morado + 🤖). */
.nc-btn-ai { background: var(--purple); color: white; border-color: var(--purple); }
.nc-btn-ai:hover { filter: brightness(1.1); box-shadow: 0 4px 14px color-mix(in srgb, var(--purple) 35%, transparent); }

.nc-bonus-banner {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
    border-radius: var(--radius-input); padding: 10px 14px;
    font-size: 13px; color: var(--green); font-weight: 600;
    text-align: center; margin-bottom: 16px;
}

/* Botón PRO plateado (igual que el modal del catálogo). */
.ncm-pro { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:11px; flex-wrap:wrap;
    padding:14px 18px; border-radius:14px; text-decoration:none; margin-bottom:10px;
    background:linear-gradient(135deg,#f6f7f9 0%,#d6dae0 24%,#eef0f3 50%,#c2c7cf 76%,#e8eaee 100%);
    border:1px solid rgba(0,0,0,.14); box-shadow:0 4px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.75);
    color:#1f2430; transition:transform .12s, box-shadow .2s; }
.ncm-pro::after { content:''; position:absolute; top:0; left:-60%; width:42%; height:100%; pointer-events:none;
    background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%);
    transform:skewX(-20deg); animation:ncmShine 3.4s ease-in-out infinite; }
@keyframes ncmShine { 0%{left:-60%} 60%{left:130%} 100%{left:130%} }
.ncm-pro:hover { transform:translateY(-1px); box-shadow:0 7px 22px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.85); }
.ncm-pro-badge { position:relative; z-index:1; font-family:'Outfit',sans-serif; font-weight:800; font-size:12px; color:#fff;
    padding:5px 10px; border-radius:8px; background:linear-gradient(135deg,#2b3242,#10131b); white-space:nowrap; }
.ncm-pro-price { position:relative; z-index:1; display:inline-flex; align-items:baseline; gap:6px; color:#10131b; }
.ncm-pro-price s { color:#7a8190; font-weight:600; font-size:13px; }
.ncm-pro-price b { font-family:'Outfit',sans-serif; font-weight:800; font-size:21px; line-height:1; }
.ncm-pro-price .per { font-size:12px; color:#4b5563; font-weight:600; }
.ncm-pro-cta { position:relative; z-index:1; font-family:'Outfit',sans-serif; font-weight:800; font-size:13px; color:#10131b; white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .ncm-pro::after { display:none; } }

/* Selector de packs IA dentro del modal (morado = IA, siempre).
   Los 5 chips caben en UNA fila (flex:1 + modal un pelin mas ancho);
   el "Más elegido" lleva badge flotante y viene preseleccionado. */
#ncModalNoAi .nc-modal { max-width: 500px; }
.ncai-packs { display:flex; gap:7px; margin:22px 0 10px; }
.ncai-pack {
    position:relative; flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:center; gap:1px;
    padding:10px 4px 8px; border-radius:var(--radius-button); cursor:pointer;
    border:1.5px solid var(--border); background:var(--bg3); color:var(--text);
    font-family:'Outfit',sans-serif; transition:all .15s;
}
.ncai-pack b { font-weight:800; font-size:15px; }
.ncai-pack small { font-weight:600; font-size:10px; color:var(--muted); }
.ncai-pack:hover { border-color:var(--purple); }
.ncai-pack.active {
    border-color:var(--purple); background:color-mix(in srgb, var(--purple) 12%, transparent);
    color:var(--purple); box-shadow:0 2px 10px color-mix(in srgb, var(--purple) 25%, transparent);
}
.ncai-pack.active small { color:var(--purple); }
.ncai-star {
    position:absolute; top:-9px; left:50%; transform:translateX(-50%);
    background:var(--purple); color:#fff; font-size:9px; font-weight:800;
    padding:2px 7px; border-radius:999px; white-space:nowrap; letter-spacing:.02em;
}
.ncai-sum { text-align:center; font-size:13.5px; margin-bottom:14px; color:var(--text); }
.ncai-sum b { font-family:'Outfit',sans-serif; font-weight:800; font-size:17px; color:var(--purple); }
.ncai-sum span { color:var(--muted); font-size:12px; margin-left:6px; }
.ncai-loader { text-align:center; padding:12px; font-size:12.5px; color:var(--muted); font-style:italic; }
#ncaiButtons { min-height:0; }
.ncai-err { display:none; font-size:12.5px; color:#f87171; text-align:center; margin-top:8px; line-height:1.5; }
@media (max-width: 480px) { .ncai-packs { flex-wrap:wrap; } .ncai-pack { flex:1 1 30%; } }