/* BrandWatch — estilos base (complementan Tailwind) */
.btn { display: inline-flex; align-items: center; padding: .45rem .9rem; border-radius: .5rem; font-weight: 600; font-size: .85rem; transition: all .15s; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: #4f8cff; color: #fff; }
.btn-primary:hover { background: #3b78eb; }
.btn-secondary { background: #fff; color: #374151; border-color: #e5e7eb; }
.btn-secondary:hover { background: #f9fafb; }
.btn-danger { background: #fff; color: #e11d48; border-color: #fecdd3; }
.btn-danger:hover { background: #fff1f2; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card { background: #fff; border-radius: 14px; border: 1px solid #eceef3; padding: 1.25rem 1.4rem; }
.kpi-card { background: #f5f6fb; border-radius: 12px; padding: 1.1rem 1.2rem .6rem; display: flex; flex-direction: column; min-height: 165px; }
.kpi-card .kpi-icon { font-size: 1.6rem; color: #3b4256; margin-bottom: .6rem; position: relative; }
.kpi-card .kpi-icon::after { content: ""; position: absolute; left: 14px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #b9c6ff; z-index: -1; }
.kpi-card .kpi-label { font-size: .72rem; color: #374151; font-weight: 500; }
.kpi-card .kpi-value { font-size: 1.75rem; font-weight: 800; color: #111827; line-height: 1.1; margin: .15rem 0 .35rem; }
.kpi-card canvas { width: 100% !important; height: 44px !important; }

.section-title { font-size: 1.7rem; font-weight: 800; color: var(--brand, #4f8cff); letter-spacing: -.02em; }
.report-logo { max-height: 52px; max-width: 240px; object-fit: contain; }
#report .rank, #report .mention-title, #report .text-brand { color: var(--brand, #4f8cff); }
#report .wordcloud span { color: var(--brand, #4f8cff); }
.section-sub { font-size: .8rem; color: #6b7280; }
.chart-title { font-size: .85rem; font-weight: 600; color: #111827; margin-bottom: .6rem; }
.chart-box { position: relative; height: 260px; width: 100%; min-width: 0; overflow: hidden; }
.chart-box canvas { max-width: 100%; }
.card, .card > div, .grid > * { min-width: 0; }

.input { width: 100%; border: 1px solid #e5e7eb; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; background: #fff; }
.input:focus { outline: 2px solid #c7d7ff; border-color: #4f8cff; }
.label { display: block; font-size: .75rem; font-weight: 600; color: #4b5563; margin-bottom: .3rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; user-select: none; }
.chip.active { background: #eef3ff; border-color: #4f8cff; color: #2f63d6; }

.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600; color: #fff; }
.badge-positive { background: #2fd6a3; } .badge-negative { background: #ff2d55; } .badge-neutral { background: #9ca3af; } .badge-pending { background: #cbd5e1; color: #374151; }

.table { width: 100%; font-size: .8rem; }
.table th { text-align: left; font-weight: 600; color: #6b7280; padding: .45rem .6rem; font-size: .72rem; }
.table td { padding: .55rem .6rem; border-top: 1px solid #f1f3f8; }
.table tr:nth-child(even) td { background: #f8f9fc; }
.rank { color: #4f8cff; font-weight: 700; }

.heat-grid { display: grid; grid-template-columns: 38px repeat(24, 1fr); gap: 2px; font-size: .62rem; color: #6b7280; }
.heat-cell { aspect-ratio: 1.15; border-radius: 2px; background: #eef2fb; }
.heat-day { display: flex; align-items: center; }
.heat-hour { text-align: center; transform: rotate(-45deg); transform-origin: center; white-space: nowrap; height: 28px; line-height: 28px; }

.toast { background: #111827; color: #fff; padding: .6rem 1rem; border-radius: .6rem; font-size: .85rem; box-shadow: 0 6px 20px rgba(0,0,0,.2); animation: fadein .2s; }
.toast.error { background: #e11d48; } .toast.success { background: #16b385; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }

.mention-item { display: flex; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid #f1f3f8; }
.mention-item .avatar { width: 40px; height: 40px; border-radius: 50%; background: #dbe4ff; display: grid; place-items: center; color: #4f8cff; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.mention-item .avatar img { width: 100%; height: 100%; object-fit: cover; }
.mention-title { color: #4f8cff; font-weight: 600; font-size: .85rem; }
.mention-meta { font-size: .7rem; color: #6b7280; margin: .15rem 0 .35rem; }
.mention-text { font-size: .82rem; color: #111827; }

.wordcloud { display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: center; line-height: 1.1; }
.wordcloud span { color: #4f8cff; font-weight: 600; opacity: .85; }

.spinner { width: 18px; height: 18px; border: 2px solid #c7d7ff; border-top-color: #4f8cff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg,#eef0f5 25%,#f6f7fa 50%,#eef0f5 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media print { #app-header, .no-print { display: none !important; } #report-header { display: flex !important; } .card { break-inside: avoid; } body { background: #fff; } }