/* KillerBytes Blog - Estilos */
:root {
	--bg: #0b0c10;
	--bg-soft: #11131a;
	--card: #141824;
	--text: #e6e8ef;
	--muted: #b6b9c4;
	--brand: #7c5cff;
	--brand-2: #22d3ee;
	--border: #232633;
	--ring: rgba(124, 92, 255, 0.35);
	--shadow: 0 10px 30px rgba(0,0,0,.3), 0 6px 10px rgba(0,0,0,.25);
}

[data-theme="light"] {
	--bg: #f7f8fb;
	--bg-soft: #ffffff;
	--card: #ffffff;
	--text: #0c1021;
	--muted: #4a4f63;
	--brand: #5b3df6;
	--brand-2: #0ea5e9;
	--border: #e3e6ef;
	--ring: rgba(14, 165, 233, 0.35);
	--shadow: 0 12px 30px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	background: radial-gradient(1200px 800px at 10% -10%, rgba(124,92,255,.15), transparent 60%),
							radial-gradient(900px 600px at 100% 0%, rgba(34,211,238,.12), transparent 50%),
							var(--bg);
	color: var(--text);
}

.kb-header {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border);
	backdrop-filter: blur(8px);
	background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.1))
							var(--bg-soft);
}
.kb-brand { display: flex; align-items: center; gap: .75rem; }
.kb-logo { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow); }
.kb-title h1 { margin: 0; font-size: 1.1rem; letter-spacing: .3px; }
.kb-title p { margin: 0; color: var(--muted); font-size: .9rem; }

.kb-actions { display: flex; align-items: center; gap: .6rem; }
.kb-icon-btn {
	background: var(--card); border: 1px solid var(--border); color: var(--text);
	border-radius: 10px; padding: .45rem .6rem; cursor: pointer; box-shadow: var(--shadow);
}
.kb-icon-btn:hover { outline: 2px solid var(--ring); }

.kb-search { display: flex; align-items: center; gap: .5rem; background: var(--card); border: 1px solid var(--border); padding: .45rem .65rem; border-radius: 12px; min-width: 260px; }
.kb-search input {
	background: transparent; border: none; outline: none; color: var(--text); width: 100%;
}
.kb-search svg { color: var(--muted); }

.kb-tags { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px dashed var(--border); }
.kb-tag { padding: .35rem .6rem; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer; }
.kb-tag.active { color: #fff; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-color: transparent; }

.kb-container { max-width: 1050px; margin: 0 auto; padding: 1rem; }
.kb-grid {
	display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; align-items: stretch;
}

.kb-card {
	grid-column: span 6;
	display: flex; flex-direction: column; gap: .65rem; padding: 1rem;
	border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(124,92,255,.065), rgba(34,211,238,.05)) var(--card);
	box-shadow: var(--shadow);
	transition: transform .15s ease, outline-color .15s ease;
}
.kb-card:hover { transform: translateY(-2px); outline: 2px solid var(--ring); }
.kb-card header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kb-card h3 { margin: 0; font-size: 1.05rem; }
.kb-card .kb-meta { color: var(--muted); font-size: .85rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.kb-card .kb-tags-mini { display: flex; gap: .4rem; flex-wrap: wrap; }
.kb-chip { font-size: .75rem; color: var(--muted); border: 1px dashed var(--border); padding: .15rem .45rem; border-radius: 999px; }
.kb-card .kb-body { color: var(--text); opacity: .9; white-space: pre-wrap; }
.kb-card .kb-actions { justify-content: flex-start; }
.kb-btn { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: white; border: none; padding: .55rem .8rem; border-radius: 10px; cursor: pointer; font-weight: 600; }
.kb-btn.secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.kb-btn.ghost { background: transparent; color: var(--muted); border: 1px dashed var(--border); }

.kb-empty, .kb-error { text-align: center; opacity: .9; border: 1px dashed var(--border); border-radius: 12px; padding: 1.25rem; margin-top: 1rem; }
.kb-error { color: #ffb4b4; background: rgba(255, 0, 0, .05); }

.kb-footer { text-align: center; padding: 2rem 1rem; color: var(--muted); }

/* Modal */
.kb-modal { position: fixed; inset: 0; display: none; }
.kb-modal[aria-hidden="false"] { display: block; }
.kb-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(1px); }
.kb-modal-content { position: relative; margin: 5vh auto; width: min(920px, 92vw); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 1rem; }
.kb-modal-close { position: absolute; top: .6rem; right: .6rem; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: .2rem .55rem; cursor: pointer; }

#threadDetail h2 { margin-top: .2rem; margin-bottom: .2rem; }
#threadDetail .kb-meta { color: var(--muted); font-size: .9rem; }
#threadDetail .kb-detail-body { white-space: pre-wrap; line-height: 1.5; margin: .5rem 0 1rem; }
#threadDetail .kb-detail-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }

.kb-notes {
	display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: start;
	border-top: 1px dashed var(--border); padding-top: 1rem; margin-top: .5rem;
}
.kb-notes textarea {
	width: 100%; min-height: 140px; padding: .6rem; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.kb-notes .kb-note-actions { display: flex; gap: .5rem; }
.kb-note-list { display: grid; gap: .5rem; }
.kb-note { border: 1px solid var(--border); background: var(--card); border-radius: 10px; padding: .5rem .6rem; color: var(--text); }
.kb-note time { display: block; color: var(--muted); font-size: .8rem; }

/* Responsive */
@media (max-width: 900px) { .kb-card { grid-column: span 12; } .kb-notes { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .kb-search { min-width: 0; width: 100%; } .kb-header { flex-wrap: wrap; } }