/* Tailwind overrides and shared styles for blog, docs, and recursos pages */

:root {
    --fudi-bg-start: #0A1628;
    --fudi-bg-mid: #1A2F4F;
    --fudi-bg-surface: #0F1F37;
    --fudi-border: #2C4868;
    --fudi-ink: #8B9CB6;
    --fudi-ink-strong: #FFFFFF;
    --fudi-accent: #26D0A8;
    --fudi-accent-strong: #00897B;
    --fudi-sky: #3498DB;
    --fudi-gold: #FFD700;
    --fudi-rose: #E63946;
    --fudi-purple: #9B59B6;
    --fudi-gradient: linear-gradient(135deg, #0A1628 0%, #1A2F4F 50%, #0A1628 100%);
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--fudi-bg-start);
    color: var(--fudi-ink-strong);
}

a {
    color: var(--fudi-accent);
    transition: color 150ms ease;
}

a:hover {
    color: var(--fudi-accent-strong);
}

.bg-fudi-surface {
    background: var(--fudi-gradient);
}

.card-fudi {
    background: var(--fudi-bg-surface);
    border: 1px solid var(--fudi-border);
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(12, 20, 35, 0.45);
}

.gradient-bar {
    height: 0.5rem;
    background: linear-gradient(90deg, var(--fudi-accent) 0%, var(--fudi-accent-strong) 100%);
}

.shadow-fudi {
    box-shadow: 0 20px 60px rgba(12, 20, 35, 0.45);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    background: rgba(38, 208, 168, 0.12);
    color: var(--fudi-accent);
    border: 1px solid rgba(38, 208, 168, 0.35);
}

.chip-muted {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(20, 33, 55, 0.8);
    color: var(--fudi-ink);
    border: 1px solid #1f304d;
    font-weight: 600;
    font-size: 0.85rem;
}

.search-shell {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: #12243d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 40px rgba(0, 0, 0, 0.35);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.link-soft:hover {
    color: var(--fudi-ink-strong);
}

/* Tailwind CDN gap fillers for custom ring/shadow colors used in nav/buttons */
.ring-2 {
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 0 2px var(--tw-ring-color, rgba(255, 255, 255, 0.2));
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
}

.ring-\[\#1a5247\]\/40 {
    --tw-ring-color: rgba(26, 82, 71, 0.4);
}

.shadow-\[\#26D0A8\]\/35 {
    box-shadow: 0 12px 30px rgba(38, 208, 168, 0.35);
}

/* Tailwind CDN gap fillers for custom bg/border utilities used in nav/footer */
.bg-\[\#0A1628\] {
    background-color: #0A1628;
}

.bg-\[\#0A1628\]\/92 {
    background-color: rgba(10, 22, 40, 0.92);
}

.bg-\[\#1A2F4F\] {
    background-color: #1A2F4F;
}

.border-\[\#2C4868\] {
    border-color: #2C4868;
}

/* Custom colors used on recursos cards (Tailwind CDN lacks arbitrary values) */
.bg-\[\#142b46\] {
    background-color: #142b46;
}

.text-\[\#8B9CB6\] {
    color: #8B9CB6;
}

.from-\[\#26D0A8\] {
    --tw-gradient-from: #26D0A8;
    --tw-gradient-to: rgba(38, 208, 168, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#00897B\] {
    --tw-gradient-to: #00897B;
}

/* Minimal prose-like defaults for EditorJS-rendered content */
.prose,
.prose-invert {
    color: #d9e3f0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose-invert h1,
.prose-invert h2,
.prose-invert h3,
.prose-invert h4 {
    color: #ffffff;
    font-weight: 800;
}

.prose p,
.prose ul,
.prose ol,
.prose-invert p,
.prose-invert ul,
.prose-invert ol {
    color: #8B9CB6;
}

.prose blockquote,
.prose-invert blockquote {
    border-left: 3px solid #26D0A8;
    padding-left: 1rem;
    color: #c6d5e9;
    font-style: italic;
    margin: 1rem 0;
}

.prose code,
.prose-invert code {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.15rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.95rem;
    color: #e6f3ff;
}

.prose pre,
.prose-invert pre {
    background: #0f1f37;
    border: 1px solid #2C4868;
    border-radius: 0.9rem;
    padding: 1rem;
    overflow-x: auto;
    color: #e6f3ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 40px rgba(0, 0, 0, 0.35);
}

.prose table,
.prose-invert table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    border: 1px solid #2C4868;
}

.prose th,
.prose td,
.prose-invert th,
.prose-invert td {
    padding: 0.65rem 0.8rem;
    border: 1px solid #2C4868;
    color: #d9e3f0;
}

.prose th,
.prose-invert th {
    background: rgba(38, 208, 168, 0.1);
    color: #ffffff;
    text-align: left;
}

/* Toast styles for support form feedback */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #0F1F37;
    border: 1px solid #2C4868;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 20px 60px rgba(10, 22, 40, 0.45);
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease;
    z-index: 1000;
    max-width: 400px;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-content {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.toast-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: #26D0A8;
}

.toast-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.toast-description {
    color: #8B9CB6;
}