/* Panel de ayuda (core/_help_menu.html + core/js/help_panel.js).
   Es un panel lateral NO modal: la pantalla de atrás sigue usable, así se
   puede seguir una explicación paso a paso con el panel abierto. */

.help-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 9990;
    width: min(26rem, 100vw);
    display: flex; flex-direction: column;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -12px 0 32px -12px rgba(15, 23, 42, .25);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
}
.help-panel.is-open {
    transform: none; visibility: visible;
    transition: transform .22s ease;
}

.help-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 1rem;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 70%);
    border-bottom: 1px solid #e2e8f0;
}
.help-panel-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: .625rem;
    background: #3b82f6; color: #fff;
    box-shadow: 0 4px 10px -4px rgba(59, 130, 246, .7);
}
.help-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: .5rem; color: #64748b;
}
.help-icon-btn:hover { background: #f1f5f9; color: #0f172a; }
.help-close-btn {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .375rem .625rem; border-radius: .5rem;
    font-size: .8125rem; font-weight: 500; color: #475569;
    border: 1px solid #e2e8f0; background: #fff;
}
.help-close-btn:hover { color: #0f172a; border-color: #cbd5e1; background: #f8fafc; }

.help-tabs {
    display: flex; gap: .25rem; padding: .5rem .75rem 0;
    border-bottom: 1px solid #e2e8f0;
}
.help-tabs button {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .5rem .75rem; margin-bottom: -1px;
    font-size: .8125rem; font-weight: 500; color: #64748b;
    border-bottom: 2px solid transparent;
}
.help-tabs button:hover { color: #0f172a; }
.help-tabs button[aria-selected="true"] { color: #2563eb; border-color: #3b82f6; }

.help-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.help-pane[hidden] { display: none; }
.help-pane-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* Guía */
.help-search {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; border: 1px solid #e2e8f0; border-radius: .625rem;
    background: #f8fafc;
}
.help-search:focus-within { border-color: #3b82f6; background: #fff; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.help-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: .875rem; color: #0f172a; }
.help-group-title {
    margin: 0 0 .375rem; font-size: .625rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #94a3b8;
}
.help-card {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .625rem .75rem; border: 1px solid #e2e8f0; border-radius: .75rem;
    background: #fff;
}
.help-card + .help-card { margin-top: .375rem; }
.help-card-link:hover { border-color: #93c5fd; background: #f8fbff; }
.help-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: .5rem;
    background: #dbeafe; color: #2563eb;
}
.help-card-icon.is-screen { background: #d1fae5; color: #059669; }
.help-contexto {
    padding: .75rem; border-radius: .75rem;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    border: 1px solid #dbeafe;
}
.help-empty { padding: 1rem 0; text-align: center; font-size: .8125rem; color: #94a3b8; }

/* Chat */
.help-chat-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.help-chat-empty { margin: auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .375rem; }
.help-chat-hero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 9999px; margin-bottom: .25rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff;
    box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .8);
}
.help-chat-hints { display: flex; flex-direction: column; gap: .375rem; width: 100%; margin-top: .75rem; }
.help-chat-hints button {
    text-align: left; font-size: .8125rem; color: #0f172a;
    padding: .5rem .75rem; border: 1px solid #e2e8f0; border-radius: .625rem; background: #fff;
}
.help-chat-hints button:hover { border-color: #93c5fd; background: #f8fbff; }

.help-msg-user {
    align-self: flex-end; max-width: 85%;
    padding: .5rem .75rem; border-radius: 1rem 1rem .25rem 1rem;
    background: #3b82f6; color: #fff; font-size: .875rem; white-space: pre-wrap; word-wrap: break-word;
}
.help-msg-bot { align-self: flex-start; max-width: 100%; font-size: .875rem; color: #0f172a; line-height: 1.5; }
.help-msg-bot p { margin: 0 0 .5rem; }
.help-msg-bot p:last-child { margin-bottom: 0; }
.help-msg-bot ol, .help-msg-bot ul { margin: 0 0 .5rem; padding-left: 1.25rem; }
.help-msg-bot ol { list-style: decimal; }
.help-msg-bot ul { list-style: disc; }
.help-msg-bot li { margin: .125rem 0; }
.help-msg-bot code { font-size: .8em; padding: .05rem .3rem; border-radius: .25rem; background: #f1f5f9; }
.help-msg-bot a {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .05rem .5rem; border-radius: 9999px;
    background: #eff6ff; color: #1d4ed8; font-weight: 500; font-size: .8125rem;
    text-decoration: none; border: 1px solid #dbeafe;
}
.help-msg-bot a:hover { background: #dbeafe; }
.help-msg-bot a::after { content: '→'; font-size: .75em; }
.help-msg-error { font-size: .75rem; color: #ef4444; }
.help-msg-tools { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .375rem; }
.help-msg-tools span {
    font-size: .6875rem; color: #64748b; padding: .05rem .5rem;
    border-radius: 9999px; background: #f1f5f9;
}
.help-typing { display: inline-flex; gap: .25rem; padding: .5rem .25rem; }
.help-typing i { width: .375rem; height: .375rem; border-radius: 9999px; background: #94a3b8; animation: help-bounce 1s infinite ease-in-out; }
.help-typing i:nth-child(2) { animation-delay: .15s; }
.help-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes help-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.help-chat-compose {
    display: flex; align-items: flex-end; gap: .5rem;
    margin: 0 .75rem; padding: .375rem .375rem .375rem .75rem;
    border: 1px solid #e2e8f0; border-radius: .875rem; background: #fff;
}
.help-chat-compose:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.help-chat-compose textarea {
    flex: 1; resize: none; border: 0; outline: 0; padding: .375rem 0;
    font-size: .875rem; color: #0f172a; max-height: 8rem; background: transparent;
}
.help-chat-send {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: .625rem; background: #3b82f6; color: #fff;
}
.help-chat-send:hover { background: #2563eb; }
.help-chat-send:disabled { opacity: .45; }
.help-chat-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem 1rem .75rem; font-size: .6875rem; color: #94a3b8;
}
.help-chat-foot button { display: inline-flex; align-items: center; gap: .25rem; color: #64748b; }
.help-chat-foot button:hover { color: #0f172a; }