/**
 * WIYU Seguros — Tema específico de vertical
 * Acento: Violeta #6450D2 (CMF · Ley 20.667 · Ramos)
 */
:root {
  --accent:       #6450D2;
  --accent-dark:  #5140B2;
  --accent-soft:  #F5F3FC;
  --accent-glow:  rgba(100,80,210,.12);
  --accent-text:  #6450D2;
  --border-brand: rgba(100,80,210,.28);
  --bg-sidebar:   #FAFAF9;
}
.view { display: none; min-height: 100vh; }
.view.active { display: flex; }
#viewDashboard { flex-direction: row; }
#viewDetail    { flex-direction: column; background: var(--bg-soft); }

/* Panel de ramos (exclusivo Seguros) */
.ramo-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 24px; }
.ramo-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.ramo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ramo-card-icon { font-size: 24px; margin-bottom: 6px; }
.ramo-card-name { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.ramo-card-count { font-size: 22px; font-weight: 800; color: var(--text-1); }
.ramo-card-score { font-size: 11px; margin-top: 4px; }

/* Ramo tag */
.ramo-tag { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(100,80,210,.2); white-space: nowrap; }
.tipo-badge { font-size: 11px; padding: 3px 8px; border-radius: 8px; background: var(--bg-soft); color: var(--text-2); border: 1px solid var(--border); }

.chart-alerts-row { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-bottom: 24px; }
@media(max-width:1100px) { .chart-alerts-row { grid-template-columns: 1fr; } }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 32px 56px; max-width: 1320px; margin: 0 auto; }
@media(max-width:900px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-right { display: flex; flex-direction: column; gap: 18px; }
canvas#trendChart { width: 100% !important; }

/* Empty original containers remain hidden until they have a defined example. */
.suitability-section[hidden], #suitBanner[hidden] { display: none; }