/* =============================================================
   Index_Coachmark.css  –  Capitiz FAB Coachmark
   Referenciado desde: Views/Home/Index.cshtml (HeadSection03)
   ============================================================= */

/* ── Google Font: Caveat (handwritten) ─────────────────────── */
/* Se carga vía @import para no bloquear el render principal   */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&display=swap');

/* ── Variables locales (no colisionan con las del sitio) ────── */
:root {
    --cpt-cm-purple : #550ABD;
    --cpt-cm-blue   : #31A8FF;
    --cpt-cm-pink   : #FFCCD5;
    --cpt-cm-pink2  : #FFC2D1;
    --cpt-cm-white  : #f8f9fa;
}

/* ── Overlay oscuro con agujero sobre el FAB ────────────────── */
#cptCoachmarkOverlay {
    position : fixed;
    inset     : 0;
    z-index   : 9990;        /* por encima del FAB (z-index site ~100) */
    pointer-events : none;
    opacity   : 0;
    animation : cptCmFadeIn .7s ease .8s forwards;
}

@keyframes cptCmFadeIn { to { opacity: 1; } }

/*
  Vignette radial:
  El FAB en Index.cshtml está en bottom:103px, right:20px, tamaño ~56px.
  Centro FAB desde bottom-right = (20 + 28, 103 + 28) = (48px, 131px).
  Usamos calc() con las variables del sitio para mantener sincronía.
*/
#cptCoachmarkOverlay::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : radial-gradient(
        ellipse 160px 160px
        at calc(100% - 48px) calc(100% - 131px),
        transparent 42px,
        rgba(8, 10, 18, 0.88) 110px
    );
    pointer-events : all;   /* el fondo oscuro sí intercepta clicks */
}

/* ── Pulse rings sobre el FAB ───────────────────────────────── */
#cptCoachmarkPulse {
    position : fixed;
    bottom   : 103px;
    right    : 20px;
    width    : 56px;
    height   : 56px;
    border-radius  : 50%;
    pointer-events : none;
    z-index  : 9991;
    opacity  : 0;
    animation : cptCmFadeIn .3s ease 1.1s forwards;
}

#cptCoachmarkPulse::before,
#cptCoachmarkPulse::after {
    content       : '';
    position      : absolute;
    inset         : -5px;
    border-radius : 50%;
    border        : 1.5px solid rgba(49, 168, 255, .55);
    animation     : cptCmRipple 2.6s ease-out 1.4s infinite;
}

#cptCoachmarkPulse::after { animation-delay: 2.2s; }

@keyframes cptCmRipple {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(2);   opacity:  0; }
}

/* ── Burbuja de texto + botón ───────────────────────────────── */
#cptCoachmarkBubble {
    position         : fixed;
    bottom           : 220px;   /* encima del FAB con margen cómodo */
    right            : 14px;
    z-index          : 9992;
    pointer-events   : none;
    opacity          : 0;
    transform-origin : bottom right;
    display          : flex;
    flex-direction   : column;
    align-items      : flex-start;
    gap              : 0;
    animation        : cptCmBubbleIn .65s cubic-bezier(.22,1,.36,1) 2.1s forwards;
}

@keyframes cptCmBubbleIn {
    from { opacity: 0; transform: translateY(14px) rotate(-5deg); }
    to   { opacity: 1; transform: translateY(0)    rotate(-4deg); }
}

.cpt-cm-title {
    font-family  : 'Caveat', cursive;
    font-size    : clamp(1.6rem, 3.4vw, 2.1rem);
    font-weight  : 700;
    color        : var(--cpt-cm-white);
    white-space  : nowrap;
    line-height  : 1.25;
    letter-spacing: .01em;
}

.cpt-cm-sub {
    font-family  : 'Caveat', cursive;
    font-size    : clamp(1rem, 2.1vw, 1.25rem);
    font-weight  : 600;
    color        : var(--cpt-cm-blue);
    margin-top   : 3px;
    white-space  : nowrap;
    line-height  : 1.35;
}

/* SVG underline blanco animado */
.cpt-cm-underline-svg { display: block; margin-top: -1px; }

.cpt-cm-underline-path {
    fill              : none;
    stroke            : #ffffff;
    stroke-width      : 2px;
    stroke-linecap    : round;
    stroke-dasharray  : 230;
    stroke-dashoffset : 230;
    opacity           : 0;
    animation         : cptCmShow .01s linear 2.75s forwards,
                        cptCmDraw  .5s ease   2.75s forwards;
}

/* Botón "Entendido" */
.cpt-cm-dismiss {
    pointer-events: all;
    background: none;
    border: none;
    color: #ffffff;
    font-family: 'Caveat', cursive;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    font-weight: 600;
    letter-spacing: .02em;
    padding: 0;
    margin-top: 28px;
    cursor: pointer;
    opacity: 0;
    position: relative;
    text-decoration: none;
    transition: color .2s;
    animation: cptCmFadeIn .4s ease 3.2s forwards;
}

.cpt-cm-dismiss::after {
    content    : '';
    position   : absolute;
    left       : 0;
    bottom     : -2px;
    width      : 0;
    height     : 1.5px;
    background : rgba(255,255,255,.4);
    transition : width .3s ease;
}

.cpt-cm-dismiss:hover { color: #31A8FF; }
.cpt-cm-dismiss:hover::after { width: 100%; }

/* ── SVG flecha orgánica ────────────────────────────────────── */
#cptCoachmarkArrow {
    position       : fixed;
    bottom         : 0;
    right          : 0;
    width          : min(480px, 94vw);
    height         : min(390px, 60vh);
    overflow       : visible;
    pointer-events : none;
    z-index        : 9992;
    opacity        : 0;
    animation      : cptCmFadeIn .01s linear .6s forwards;
}

.cpt-cm-ink {
    fill             : none;
    stroke-linecap   : round;
    stroke-linejoin  : round;
}

/* Cuerpo de la flecha */
.cpt-cm-arrow-body {
    stroke            : var(--cpt-cm-blue);
    stroke-width      : 2.2;
    stroke-dasharray  : 300;
    stroke-dashoffset : 300;
    opacity           : 0;
    animation         : cptCmShow .01s linear 1.5s forwards,
                        cptCmDraw  .95s cubic-bezier(.5,0,.3,1) 1.5s forwards;
}

/* Punta de la flecha */
.cpt-cm-arrow-tip {
    stroke            : var(--cpt-cm-blue);
    stroke-width      : 2.2;
    stroke-dasharray  : 44;
    stroke-dashoffset : 44;
    opacity           : 0;
    animation         : cptCmShow .01s linear 2.4s forwards,
                        cptCmDraw  .28s ease   2.4s forwards;
}

/* ── Keyframes compartidos ──────────────────────────────────── */
@keyframes cptCmDraw { to { stroke-dashoffset: 0; } }
@keyframes cptCmShow { to { opacity: 1; } }

/* ── Estado oculto (post-dismiss) ───────────────────────────── */
.cpt-cm-gone { display: none !important; }

/* ── Responsive móvil ───────────────────────────────────────── */
@media (max-width: 576px) {
    #cptCoachmarkBubble {
        bottom : 195px;
        right  : 10px;
    }

    #cptCoachmarkPulse {
        bottom : 103px;
        right  : 20px;
    }
}