/* ==========================================================================
   ai-magic.css · Vínculo
   Capa visual del efecto "Mejorar texto con IA".
   Usa los tokens del tema (--accent, --ink, --rose, --line, --muted).
   Compatible con cualquier tema (aqua, etc.) sin cambios.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Host del efecto (wrapper del textarea)
   -------------------------------------------------------------------------- */

/* El padre del textarea necesita position:relative para alojar
   la aurora y la capa de partículas. Si tu .field-wrap ya es relative,
   con esto basta. */
.ai-magic-host {
    position: relative;
}

/* --------------------------------------------------------------------------
   2 · Aurora animada detrás del textarea
   -------------------------------------------------------------------------- */

.ai-magic-aurora {
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    background: linear-gradient(
        115deg,
        var(--accent, #4a90b8) 0%,
        #7eb4d3 22%,
        #c9a8e2 50%,
        #f0c674 75%,
        var(--accent, #4a90b8) 100%
    );
    background-size: 300% 100%;
    filter: blur(10px);
    transition: opacity .45s ease;
}

.ai-magic-host.is-magic .ai-magic-aurora {
    opacity: .55;
    animation: ai-aurora-flow 3s linear infinite;
}

@keyframes ai-aurora-flow {
    to { background-position: 300% 0; }
}

/* El textarea se monta encima de la aurora */
.ai-magic-host > textarea,
.ai-magic-host > .input,
.ai-magic-host > .msg-body-input {
    position: relative;
    z-index: 1;
}

/* Mientras la magia está activa, suavizamos el borde del textarea
   para que la aurora se note. Si tu textarea tiene focus-ring, también. */
.ai-magic-host.is-magic > textarea,
.ai-magic-host.is-magic > .input,
.ai-magic-host.is-magic > .msg-body-input {
    border-color: transparent !important;
    box-shadow: none !important;
    transition: border-color .35s, box-shadow .35s;
}

/* --------------------------------------------------------------------------
   3 · Capa de partículas (sparkles)
   -------------------------------------------------------------------------- */

.ai-magic-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}

.ai-magic-spark {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
    animation: ai-spark-fly 1.4s cubic-bezier(.2, .7, .4, 1) forwards;
}

@keyframes ai-spark-fly {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    18% { opacity: 1; }
    100% {
        opacity: 0;
        transform:
            translate(
                calc(-50% + var(--dx, 0px)),
                calc(-50% + var(--dy, 0px))
            )
            scale(var(--ds, 1))
            rotate(var(--dr, 360deg));
    }
}

/* --------------------------------------------------------------------------
   4 · Cursor parpadeante (durante el typewriter)
   -------------------------------------------------------------------------- */

.ai-magic-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--accent, #4a90b8);
    vertical-align: text-bottom;
    margin-left: 1px;
    animation: ai-cursor-blink .7s steps(2) infinite;
    border-radius: 1px;
}

@keyframes ai-cursor-blink {
    50% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   5 · Estados del botón "Mejorar texto"
   -------------------------------------------------------------------------- */

/* La clase .ai-magic-btn se compone con tu botón existente
   (no reemplaza su background ni padding salvo en estados activos). */
.ai-magic-btn {
    position: relative;
    transition: transform .2s, box-shadow .3s, background .35s;
}

.ai-magic-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(15, 40, 70, 0.35);
}

.ai-magic-btn:active {
    transform: scale(.97);
}

/* Loading: shimmer en el fondo + spin del ícono */
.ai-magic-btn[data-ai-state="loading"] {
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--ink, #1a2733) 0%,
        color-mix(in srgb, var(--ink, #1a2733) 60%, var(--accent, #4a90b8)) 50%,
        var(--ink, #1a2733) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: ai-shine 1.4s linear infinite;
    color: #fff !important;
}

@keyframes ai-shine {
    to { background-position: -200% 0; }
}

.ai-magic-btn[data-ai-state="loading"] .ai-magic-icon {
    animation: ai-icon-spin 1s linear infinite;
}

@keyframes ai-icon-spin {
    to { transform: rotate(360deg); }
}

/* Done: verde de éxito brevemente */
.ai-magic-btn[data-ai-state="done"] {
    background: var(--ai-success-bg, #1d6e56) !important;
    color: #fff !important;
}

/* Error: usa el rose del tema */
.ai-magic-btn[data-ai-state="error"] {
    background: var(--rose, #c33) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   6 · Look "default" del botón Mejorar (opcional, podés reemplazarlo)
   -------------------------------------------------------------------------- */

/* Si tu ai-text.js no tiene un estilo propio, este produce el look del
   screenshot (pill oscuro con sparkle). Borrá esta sección si ya tenés
   un estilo definido en otro lado. */
.ai-improve-btn {
    background: var(--ink, #1a2733);
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 999px;
    font: 500 13px/1 'Inter', system-ui, sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ai-magic-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    transition: transform .4s;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7 · Accesibilidad — respetar prefers-reduced-motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ai-magic-aurora,
    .ai-magic-spark,
    .ai-magic-cursor,
    .ai-magic-btn[data-ai-state="loading"],
    .ai-magic-btn[data-ai-state="loading"] .ai-magic-icon,
    .nav-magic-sparkle,
    .ai-magic-host--always-on > .ai-magic-aurora {
        animation: none !important;
    }
    .ai-magic-host.is-magic .ai-magic-aurora,
    .ai-magic-host--always-on > .ai-magic-aurora {
        opacity: .35;
    }
}

/* --------------------------------------------------------------------------
   8 · Variantes para usos fuera de mensajería
   -------------------------------------------------------------------------- */

/* 8a · Estrellita pulsante en items de menú (sidebar Configuración).
   Negra para definir la silueta + halo accent en dos capas para destello. */
.nav-magic-sparkle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0a0a0a;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter:
        drop-shadow(0 0 3px rgba(10, 10, 10, .55))
        drop-shadow(0 0 12px var(--accent, #4a90b8))
        drop-shadow(0 0 22px color-mix(in srgb, var(--accent, #4a90b8) 70%, transparent));
    animation: ai-sparkle-pulse 2.2s ease-in-out infinite;
}

@keyframes ai-sparkle-pulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: .9;
        filter:
            drop-shadow(0 0 3px rgba(10, 10, 10, .55))
            drop-shadow(0 0 10px var(--accent, #4a90b8))
            drop-shadow(0 0 18px color-mix(in srgb, var(--accent, #4a90b8) 50%, transparent));
    }
    50% {
        transform: scale(1.3) rotate(22deg);
        opacity: 1;
        filter:
            drop-shadow(0 0 4px rgba(10, 10, 10, .65))
            drop-shadow(0 0 16px var(--accent, #4a90b8))
            drop-shadow(0 0 28px color-mix(in srgb, var(--accent, #4a90b8) 80%, transparent));
    }
}

/* 8b · Aurora "siempre encendida" para CTAs persistentes (avatar vacío,
   campos incompletos). No requiere is-magic ni botón asociado. */
.ai-magic-host--always-on > .ai-magic-aurora {
    opacity: .55;
    animation: ai-aurora-flow 3.5s linear infinite;
}

/* 8c · Variante circular: aurora con border-radius 50%, ideal para avatares.
   inset:-12px expande la aurora más allá del avatar para que se vea el halo
   incluso si el avatar tiene overflow:hidden. */
.ai-magic-host--circle {
    position: relative;
    overflow: visible;
    display: inline-block;
    isolation: isolate;
}

.ai-magic-host--circle > .ai-magic-aurora {
    border-radius: 50%;
    inset: -12px;
    filter: blur(14px);
    z-index: 0;
}

/* El contenido (foto/iniciales) por encima de la aurora. Excluye explícitamente
   la aurora misma para que su z-index:0 prevalezca y el halo quede DETRÁS. */
.ai-magic-host--circle > *:not(.ai-magic-aurora) {
    position: relative;
    z-index: 1;
}

/* 8d · Botón "Sugerir" inline para el campo Mi página. Más chico que el
   ai-improve-btn de mensajería para no romper el layout vertical del card. */
.ai-improve-btn--inline {
    margin-top: 8px;
    padding: 7px 12px;
    font-size: 12px;
    align-self: flex-start;
}

/* 8e · Fila bio: botón Sugerir bio + counter "0/250".
   En desktop ambos en una línea. En mobile el counter cae abajo (flex-wrap)
   para que el botón conserve toda su zona tap.
   position+z-index aseguran que el botón quede por encima de la aurora
   del bioMagicHost (que tiene inset:-4px y se extiende fuera del wrapper). */
.bio-meta {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    position: relative;
    z-index: 2;
}
.bio-meta > * { pointer-events: auto; }

.bio-counter {
    font: 600 12px/1 'JetBrains Mono', monospace;
    color: var(--muted, #6b7780);
    letter-spacing: .04em;
    font-feature-settings: "tnum" 1;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2, #f3f5f7) 60%, transparent);
    transition: color .15s, background .15s;
}
.bio-counter.is-warn {
    color: var(--warn, #b45309);
    background: color-mix(in srgb, var(--warn, #b45309) 12%, transparent);
}
.bio-counter.is-full {
    color: var(--danger, #b91c1c);
    background: color-mix(in srgb, var(--danger, #b91c1c) 14%, transparent);
}

/* 8f-bis · Icono AM/PM dentro de celdas de hora (.cal-hour, .agv2-time-label,
   .sched-time). Compacto, vertical-align con el número, hereda el color
   del texto vía currentColor. */
.ampm-icon {
    display: inline-block;
    vertical-align: -1px;
    margin-right: 3px;
    opacity: 0.85;
    flex-shrink: 0;
}
.ampm-icon-am { color: color-mix(in srgb, var(--accent, #4a90b8) 70%, #f0c674); }
.ampm-icon-pm { color: color-mix(in srgb, var(--ink, #1a2733) 80%, var(--accent, #4a90b8)); }

/* --------------------------------------------------------------------------
   8g · Slots de hora del form "Nueva cita" — grid uniforme en mobile.
   Sin esto, "9:00 AM" (7 chars) y "12:30 PM" (8 chars) crean celdas de
   anchos distintos en flex y la grilla se ve descuadrada. Forzando
   33.333% por celda con gap homogéneo, las 3 columnas quedan parejas
   tanto en H24 como en AM_PM.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #slotGroup .slot {
        flex: 1 1 calc(33.333% - 4px);
        text-align: center;
        padding: 7px 6px;
    }
}

/* --------------------------------------------------------------------------
   8h · Mini-badge "Meet auto" en la barra de meta del modal de WhatsApp.
   Reemplaza el card grande "meet-generation-card" para ahorrar espacio
   vertical sin perder la señal de que el link se va a generar al abrir WS.
   -------------------------------------------------------------------------- */
.meet-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #4a90b8) 12%, transparent);
    color: color-mix(in srgb, var(--accent, #4a90b8) 85%, var(--ink));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.meet-mini-badge[hidden] { display: none; }
.meet-mini-badge svg { flex-shrink: 0; opacity: 0.85; }

/* --------------------------------------------------------------------------
   8b · Hint estático de "campo vacío" (sin animación)
   Reemplazo de la aurora pulsante para slug/bio cuando estaban vacíos.
   Borde accent fino + tinte sutil del fondo. Sin blur, sin breathe.
   -------------------------------------------------------------------------- */
.field-empty-hint {
    position: relative;
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--accent, #4a90b8) 42%, var(--line, #e3e6ea)),
        0 1px 2px color-mix(in srgb, var(--accent, #4a90b8) 8%, transparent);
    transition: box-shadow .25s ease;
}

/* --------------------------------------------------------------------------
   8c · Fill-wizard tooltip · un solo tooltip flotante que se mueve campo
   a campo durante el setup de /configuracion. Posición fixed/absolute
   manejada por perfil.js. Reusa el lenguaje visual del tour-tooltip
   (pill PASO N · dots · botones Saltar/Siguiente).
   -------------------------------------------------------------------------- */
.fill-wizard-tip {
    position: absolute;
    z-index: 1100;
    padding: 14px 16px 12px;
    background: color-mix(in srgb, var(--surface, #fff) 96%, var(--accent, #4a90b8));
    border: 1px solid color-mix(in srgb, var(--accent, #4a90b8) 36%, var(--line, #e3e6ea));
    border-radius: 12px;
    box-shadow:
        0 18px 40px -18px color-mix(in srgb, var(--accent, #4a90b8) 38%, transparent),
        0 3px 10px -4px rgba(0, 0, 0, .1);
    font-family: 'Inter', system-ui, sans-serif;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: auto;
}
.fill-wizard-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Flechita variable según data-arrow="top|bottom" */
.fill-wizard-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: inherit;
    border-top: 1px solid color-mix(in srgb, var(--accent, #4a90b8) 36%, var(--line, #e3e6ea));
    border-left: 1px solid color-mix(in srgb, var(--accent, #4a90b8) 36%, var(--line, #e3e6ea));
}
.fill-wizard-tip[data-arrow="top"] .fill-wizard-arrow {
    top: -7px;
    transform: rotate(45deg);
}
.fill-wizard-tip[data-arrow="bottom"] .fill-wizard-arrow {
    bottom: -7px;
    transform: rotate(225deg);
}

.fill-wizard-tip .tour-tooltip-step {
    display: inline-block;
    margin-bottom: 8px;
}
.fill-wizard-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink, #1a2733);
    margin: 0 0 4px;
    line-height: 1.3;
}
.fill-wizard-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2, #4b5563);
    margin: 0 0 12px;
}

@media (max-width: 640px) {
    .fill-wizard-tip {
        padding: 12px 14px 10px;
    }
    .fill-wizard-title { font-size: 13.5px; }
    .fill-wizard-text { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .fill-wizard-tip { transition: none; }
}

/* --------------------------------------------------------------------------
   9 · Disponibilidad por modalidad
   -------------------------------------------------------------------------- */

/* El toolbar arriba define qué modalidad pinta el click. Las celdas abiertas
   muestran iconos según su modalidad: ambas = casa+video, presencial = casa,
   virtual = video. Click toggle entre cerrado y la modalidad activa. */

.sched-cell.available::after,
.sched-cell.available:not(.modalidad-presencial):not(.modalidad-en-linea)::before {
    content: "";
    position: absolute;
    top: 4px;
    width: 11px;
    height: 11px;
    pointer-events: none;
    z-index: 2;
    -webkit-mask: var(--mode-icon) center / contain no-repeat;
    mask: var(--mode-icon) center / contain no-repeat;
}

/* Solo presencial · 1 ícono casa, esquina top-right */
.sched-cell.available.modalidad-presencial::after {
    right: 5px;
    background: color-mix(in srgb, var(--accent, #4a90b8) 78%, var(--ink-2));
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 14V8l5-4 5 4v6M6 14v-3h4v3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Solo virtual · 1 ícono video, esquina top-right */
.sched-cell.available.modalidad-en-linea::after {
    right: 5px;
    background: var(--ok, #16A34A);
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='4.5' width='9.5' height='7' rx='1.5' fill='none' stroke='black' stroke-width='1.05'/%3E%3Cpath d='M11.5 7l2.5-1.6v5.2L11.5 9' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ambas · casa (::before) + video (::after) lado a lado en top-right */
.sched-cell.available:not(.modalidad-presencial):not(.modalidad-en-linea)::before {
    right: 18px;
    background: color-mix(in srgb, var(--accent, #4a90b8) 78%, var(--ink-2));
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 14V8l5-4 5 4v6M6 14v-3h4v3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sched-cell.available:not(.modalidad-presencial):not(.modalidad-en-linea)::after {
    right: 5px;
    background: var(--ok, #16A34A);
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='4.5' width='9.5' height='7' rx='1.5' fill='none' stroke='black' stroke-width='1.05'/%3E%3Cpath d='M11.5 7l2.5-1.6v5.2L11.5 9' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Toolbar "Yo atiendo: Ambas | Solo presencial | Solo virtual" */
.availability-modalidad-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--surface-2, #f6f7f8) 60%, transparent);
    border: 1px solid var(--line, #e3e6ea);
    border-radius: 10px;
    font-size: 12.5px;
}
.availability-modalidad-toolbar .modalidad-toolbar-label {
    color: var(--muted, #6b7780);
    margin-right: 4px;
    font-weight: 500;
}
.availability-modalidad-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink, #1a2733);
    cursor: pointer;
    font-size: 12.5px;
    transition: background .15s, border-color .15s;
}
.availability-modalidad-toolbar button:hover {
    background: var(--surface, #fff);
}
.availability-modalidad-toolbar button.active {
    background: var(--surface, #fff);
    border-color: color-mix(in srgb, var(--accent, #4a90b8) 38%, var(--line));
    color: var(--ink, #1a2733);
    font-weight: 600;
}

/* 8f · Bio en la página pública.
   - padding-inline-end: aire a la derecha para que el texto no toque el borde del card.
   - text-wrap: pretty (todos los tamaños): evita huérfanas y reparte palabras.
   - max-width 52ch SOLO en desktop para columnas balanceadas; en mobile el ancho lo
     manda el contenedor. */
.public-booking-bio {
    padding-inline-end: 14px;
}
.public-booking-bio p {
    text-wrap: pretty;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .public-booking-bio p {
        max-width: 52ch;
        line-height: 1.55;
    }
}