/*
 * Tema Pawcitas para Shepherd.js v11.
 * Aplica overrides sobre la clase custom `pawcitas-shepherd` (declarada en
 * onboarding-tour.js → defaultStepOptions.classes). El selector base de Shepherd
 * sigue siendo .shepherd-element / .shepherd-content / etc.
 *
 * Paleta:
 *   --pw-deep   #0D2E3D  fondo oscuro Pawcitas
 *   --pw-mint   #49EDCB  acento turquesa
 *   --pw-text   #1a3540  texto sobre fondo claro
 *   --pw-muted  #6c7a83  texto secundario
 */
.pawcitas-shepherd.shepherd-element {
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(13, 46, 61, 0.25);
    border: 1px solid rgba(73, 237, 203, 0.25);
    max-width: 420px;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

.pawcitas-shepherd .shepherd-content {
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

/* !important quirúrgico: Shepherd CSS (CDN, lazy-load) se descarga DESPUÉS
 * de este archivo, por lo que sus reglas ganan por orden de cascada.
 * Marcamos solo las propiedades visuales que el default sobrescribe. */
.pawcitas-shepherd .shepherd-header {
    background: linear-gradient(135deg, #0D2E3D 0%, #154458 100%) !important;
    padding: 14px 18px 12px !important;
    border-bottom: 3px solid #49EDCB !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.pawcitas-shepherd .shepherd-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px !important;
}

.pawcitas-shepherd .shepherd-cancel-icon {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 18px;
    line-height: 1;
    transition: color 0.15s;
}
.pawcitas-shepherd .shepherd-cancel-icon:hover {
    color: #49EDCB !important;
}

.pawcitas-shepherd .shepherd-text {
    padding: 16px 18px;
    color: #1a3540;
    font-size: 13.5px;
    line-height: 1.55;
}

.pawcitas-shepherd .shepherd-text p {
    margin: 0 0 10px;
}
.pawcitas-shepherd .shepherd-text p:last-child {
    margin-bottom: 0;
}

.pawcitas-shepherd .shepherd-text strong {
    color: #0D2E3D;
    font-weight: 600;
}

.pawcitas-shepherd .shepherd-text .text-muted {
    color: #6c7a83 !important;
}

.pawcitas-shepherd .shepherd-footer {
    padding: 10px 16px 14px;
    background: #f7fafb;
    border-top: 1px solid #e6edf0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.pawcitas-shepherd .shepherd-button {
    border: 0;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
    line-height: 1.2;
}
.pawcitas-shepherd .shepherd-button:focus {
    outline: 2px solid rgba(73, 237, 203, 0.6);
    outline-offset: 1px;
}
.pawcitas-shepherd .shepherd-button:active {
    transform: translateY(1px);
}

.pawcitas-shepherd .shepherd-button-primary {
    background: #0D2E3D;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(13, 46, 61, 0.18);
}
.pawcitas-shepherd .shepherd-button-primary:hover {
    background: #154458;
    box-shadow: 0 4px 12px rgba(13, 46, 61, 0.28);
}

.pawcitas-shepherd .shepherd-button-secondary {
    background: #ffffff;
    color: #5a6d77;
    border: 1px solid #d6dee2;
}
.pawcitas-shepherd .shepherd-button-secondary:hover {
    background: #f0f4f5;
    color: #0D2E3D;
    border-color: #b8c4ca;
}

/* Overlay: oscurece la página y resalta el target con un halo turquesa. */
.shepherd-modal-overlay-container {
    fill-opacity: 0.55;
    transition: opacity 0.2s ease-out;
}

/* Flecha del tooltip alineada al header oscuro. */
.pawcitas-shepherd .shepherd-arrow:before {
    background-color: #0D2E3D;
}
.pawcitas-shepherd[data-popper-placement^="bottom"] .shepherd-arrow:before {
    background-color: #0D2E3D;
}
.pawcitas-shepherd[data-popper-placement^="top"] .shepherd-arrow:before {
    background-color: #f7fafb;
    border-right: 1px solid #e6edf0;
    border-bottom: 1px solid #e6edf0;
}

/* Steps sin attachTo (welcome / cierre) → Shepherd los centra; añadimos un sutil
 * resaltado superior en mint para distinguirlos como modales de "transición". */
.pawcitas-shepherd.shepherd-centered {
    max-width: 480px;
}

/* ─── Toast de auto-avance ─────────────────────────────────────────────────
 * Aparece cuando el polling detecta que el usuario completó la acción del paso
 * actual (ej: configuró Stripe, dio de alta un proveedor). Visual feedback
 * antes de que el tour avance automáticamente.
 */
.pawcitas-tour-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0D2E3D;
    color: #49EDCB;
    padding: 12px 22px;
    border-radius: 28px;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(13, 46, 61, 0.35), 0 0 0 1px rgba(73, 237, 203, 0.2);
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.pawcitas-tour-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.pawcitas-tour-toast i {
    color: #49EDCB;
    font-size: 18px;
}

/* ─── Pill del banner naranja ─────────────────────────────────────────────
 * Botón "🎓 Tomar tour" que aparece al lado de los chips de pasos pendientes
 * cuando el usuario actual es master y aún no completó el tour.
 */
#onboardingBanner .ob-tour-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0D2E3D;
    color: #49EDCB;
    border: 1px solid #0D2E3D;
    padding: 5px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    margin-left: auto;
}
#onboardingBanner .ob-tour-pill:hover {
    background: #154458;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(13, 46, 61, 0.25);
}
#onboardingBanner .ob-tour-pill i {
    font-size: 12px;
}
#onboardingBanner .ob-header {
    /* Permitir que la pill flote a la derecha del título. */
    justify-content: flex-start;
}
#onboardingBanner .ob-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}