/* ═══ Ayuda — Article Styles ═══ */
.ayuda-content { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; line-height: 1.8; color: #333; }
.ayuda-content h1 { color: #003B7A; font-size: 2rem; margin-bottom: 0.25rem; }
.ayuda-content h2 { color: #003B7A; font-size: 1.4rem; margin-top: 2rem; border-bottom: 2px solid #00C8F8; padding-bottom: 0.5rem; }
.ayuda-content h3 { color: #005bb5; font-size: 1.2rem; margin-top: 1.5rem; }
.ayuda-content p { margin-bottom: 1rem; }
.ayuda-content ul, .ayuda-content ol { margin-bottom: 1rem; padding-left: 2rem; }
.ayuda-content li { margin-bottom: 0.5rem; }
.ayuda-content pre { background: #f5f7fa; padding: 1rem; border-radius: 8px; overflow-x: auto; font-size: 0.9rem; }
.ayuda-content code { background: #f0f4f8; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9em; }
.ayuda-breadcrumb { max-width: 800px; margin: 1rem auto 0; padding: 0 1rem; font-size: 0.9rem; color: #666; }
.ayuda-breadcrumb a { color: #003B7A; text-decoration: none; }
.ayuda-breadcrumb a:hover { text-decoration: underline; }
.ayuda-meta { max-width: 800px; margin: 0 auto; padding: 0 1rem; font-size: 0.85rem; color: #888; margin-bottom: 0.5rem; }
.ayuda-meta i { margin-right: 0.4rem; }
.ayuda-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.ayuda-table th, .ayuda-table td { border: 1px solid #dde3ea; padding: 0.75rem; text-align: left; }
.ayuda-table th { background: #003B7A; color: #fff; font-weight: 600; }
.ayuda-table tr:nth-child(even) { background: #f5f7fa; }
.ayuda-note { background: #e8f4fd; border-left: 4px solid #00C8F8; padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; margin: 1rem 0; }
.img-placeholder { background: #f0f4f8; border: 2px dashed #c0c8d0; padding: 1rem; border-radius: 8px; text-align: center; color: #666; }
.ayuda-video-wrap { margin: 1.5rem 0; text-align: center; }
.ayuda-video { max-width: 100%; width: 100%; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.ayuda-img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #e2e8f0; margin: 1rem 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; transition: opacity 0.2s; }
.ayuda-img:hover { opacity: 0.85; }
.app-link { color: #005bb5; font-weight: 600; text-decoration: underline; }
.app-link:hover { color: #003B7A; }

/* Related articles */
.ayuda-related { margin-top: 2.5rem; padding: 1.5rem; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; }
.ayuda-related h3 { color: #003B7A; font-size: 1.1rem; margin: 0 0 1rem; border: none; padding: 0; }
.ayuda-related h3 i { margin-right: 0.5rem; color: #00C8F8; }
.ayuda-related ul { list-style: none; padding: 0; margin: 0; }
.ayuda-related li { padding: 0.5rem 0; border-bottom: 1px solid #e2e8f0; }
.ayuda-related li:last-child { border-bottom: none; }
.ayuda-related a { color: #005bb5; text-decoration: none; font-weight: 500; }
.ayuda-related a:hover { color: #003B7A; text-decoration: underline; }

/* CTA */
.ayuda-cta { background: linear-gradient(135deg, #003B7A 0%, #005bb5 100%); color: #fff; padding: 2rem; border-radius: 12px; text-align: center; margin-top: 3rem; }
.ayuda-cta h3 { color: #fff; margin-bottom: 1rem; border: none; padding: 0; }
.ayuda-cta a { display: inline-block; background: #00C8F8; color: #003B7A; padding: 0.75rem 2rem; border-radius: 30px; font-weight: 700; text-decoration: none; margin: 0.5rem; transition: transform 0.2s; }
.ayuda-cta a:hover { transform: translateY(-2px); }

/* Lightbox Modal */
.lightbox-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 99999; justify-content: center; align-items: center; cursor: zoom-out; }
.lightbox-overlay.active { display: flex; }
.lightbox-overlay img { max-width: 98vw; max-height: 96vh; width: auto; height: auto; min-width: 60vw; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); cursor: default; }
.lightbox-close { position: fixed; top: 0.5rem; right: 0.5rem; color: #fff; font-size: 2.5rem; cursor: pointer; z-index: 100000; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); border-radius: 50%; transition: background 0.2s; border: none; }
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ═══ Ayuda — Index Styles ═══ */
.kb-hero { background: linear-gradient(135deg, #003B7A 0%, #005bb5 100%); color: #fff; padding: 3rem 1rem; text-align: center; }
.kb-hero h1 { font-size: 2.2rem; margin-bottom: 0.5rem; }
.kb-hero p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto 1.5rem; }
.kb-search-wrap { max-width: 500px; margin: 0 auto; position: relative; }
.kb-search-wrap input { width: 100%; padding: 1rem 1rem 1rem 3rem; border: none; border-radius: 50px; font-size: 1rem; font-family: inherit; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.kb-search-wrap i { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: #999; }

/* Category navigation chips */
.cat-nav { max-width: 900px; margin: 1.5rem auto 0; padding: 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.cat-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.15); color: #fff; padding: 0.5rem 1rem; border-radius: 25px; font-size: 0.85rem; text-decoration: none; transition: all 0.2s; border: 1px solid rgba(255,255,255,0.25); }
.cat-chip:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }
.cat-chip .cat-count { background: rgba(255,255,255,0.25); padding: 0.1rem 0.5rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }

/* Category sections */
.kb-container { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
.kb-category-section { margin-bottom: 2.5rem; }
.kb-category-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid #e2e8f0; }
.kb-category-header i { font-size: 1.4rem; color: #003B7A; background: #e8f4fd; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; }
.kb-category-header h2 { font-size: 1.3rem; color: #003B7A; margin: 0; }
.cat-badge { background: #e8f4fd; color: #003B7A; padding: 0.2rem 0.75rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; margin-left: auto; white-space: nowrap; }

.kb-cards-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
.kb-card { display: flex; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem; text-decoration: none; color: #333; transition: all 0.2s; }
.kb-card:hover { border-color: #00C8F8; box-shadow: 0 4px 12px rgba(0,200,248,0.15); transform: translateY(-2px); }
.kb-card-icon { background: #e8f4fd; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #003B7A; font-size: 1.1rem; }
.kb-card-body { flex: 1; padding: 0 1rem; }
.kb-card-body h3 { font-size: 1rem; color: #003B7A; margin-bottom: 0.25rem; }
.kb-card-body p { font-size: 0.85rem; color: #666; margin: 0; line-height: 1.4; }
.kb-card-arrow { color: #00C8F8; font-size: 1.2rem; flex-shrink: 0; }
.kb-no-results { text-align: center; padding: 2rem; color: #666; display: none; }
.kb-ticket { text-align: center; padding: 2rem 1rem; margin: 0 auto 2rem; max-width: 600px; }
.kb-ticket a { display: inline-block; background: #003B7A; color: #fff; padding: 0.75rem 2rem; border-radius: 30px; text-decoration: none; font-weight: 600; }
.kb-ticket a:hover { background: #005bb5; }

/* Search-mode: hide category headers when searching */
.kb-container.searching .kb-category-header { display: none; }
.kb-container.searching .kb-category-section { margin-bottom: 0; }
.kb-container.searching .kb-cards-wrap { gap: 0.5rem; }

@media (max-width: 600px) {
    .kb-category-header h2 { font-size: 1.1rem; }
    .cat-nav { gap: 0.35rem; }
    .cat-chip { font-size: 0.78rem; padding: 0.4rem 0.75rem; }
}