*{box-sizing:border-box}html{font-size:16px}body{margin:0;color:var(--are-ink);background:var(--are-bg);font-family:var(--are-font);line-height:1.45}
button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--are-focus);outline-offset:2px}
.are-brandbar{height:6px;background:var(--are-yellow)}
.are-apphead{background:#fff;border-bottom:1px solid var(--are-line);position:sticky;top:0;z-index:20}
.are-topbar{min-height:66px;display:flex;align-items:center;padding:8px 24px;border-bottom:1px solid var(--are-line)}
.are-brand{display:flex;align-items:center;gap:11px}.are-brand strong{font-size:20px}.are-brand small{display:block;color:var(--are-muted);font-size:12px}.are-headeractions{margin-left:auto;display:flex;gap:9px}
.are-nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 4px;padding:0 18px;background:#fff}.are-nav button{min-height:48px;padding:0 13px;border:0;border-bottom:3px solid transparent;background:transparent;color:#4c566a;font-weight:650}.are-nav button:hover{background:#f8f9fb}.are-nav button.active{color:var(--are-ink);border-color:var(--are-yellow)}
.are-page{max-width:var(--are-page-max);margin:auto;padding:26px 30px 52px}.are-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.are-eyebrow{font-size:13px;font-weight:750;color:var(--are-muted);text-transform:uppercase;letter-spacing:.07em}.are-page h1{font-size:28px;line-height:1.15;margin:4px 0}.are-pagehead p{margin:0;color:var(--are-muted)}.are-actions{display:flex;gap:9px;flex-wrap:wrap}
.are-btn{min-height:var(--are-control-h);border:1px solid var(--are-line);background:#fff;color:var(--are-ink);border-radius:9px;padding:0 15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.are-btn:hover{border-color:#aab2c0}.are-btn.primary{background:var(--are-yellow);border-color:#e6b000}.are-btn.danger{color:var(--are-red)}
.are-grid{display:grid;gap:16px}.are-kpis{grid-template-columns:repeat(5,minmax(145px,1fr));margin-bottom:18px}.are-card{background:#fff;border:1px solid var(--are-line);border-radius:var(--are-radius);padding:18px;box-shadow:0 1px 2px rgba(23,32,51,.03)}.are-card.click:hover{box-shadow:var(--are-shadow);transform:translateY(-1px)}
.are-kpi-top{display:flex;align-items:center;justify-content:space-between;color:var(--are-muted);font-size:13px}.are-kpi strong{font-size:30px;display:block;margin-top:10px}.are-kpi small{color:var(--are-muted)}.are-critical{border-left:4px solid var(--are-red)}.are-pending{border-left:4px solid var(--are-yellow)}
.are-pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 9px;font-size:12px;font-weight:750;background:#eef1f5}.are-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}.are-pill.green{color:var(--are-green);background:#eaf7f1}.are-pill.amber{color:var(--are-amber);background:#fff5df}.are-pill.red{color:var(--are-red);background:#fdecef}.are-pill.blue{color:var(--are-blue);background:#ebf2fc}
.are-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:16px}.are-field{display:flex;flex-direction:column;gap:6px}.are-field label{font-size:12px;font-weight:700;color:var(--are-muted)}.are-field input,.are-field select,.are-field textarea{min-height:44px;border:1px solid var(--are-line);border-radius:9px;background:#fff;padding:0 12px;color:var(--are-ink)}.are-field.grow{flex:1;min-width:220px}
.are-tablebox{background:#fff;border:1px solid var(--are-line);border-radius:var(--are-radius);overflow:auto}.are-table{width:100%;border-collapse:collapse;min-width:760px}.are-table th,.are-table td{padding:12px 14px;border-bottom:1px solid var(--are-line);text-align:left}.are-table th{font-size:12px;color:var(--are-muted);background:#fafbfc}.are-table tbody tr:hover{background:#fffbea}
.are-modal-backdrop{position:fixed;inset:0;background:rgba(23,32,51,.42);display:grid;place-items:center;padding:20px;z-index:50}.are-modal{width:min(680px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:14px;border:1px solid var(--are-line);box-shadow:var(--are-shadow);padding:20px}.are-hidden{display:none!important}
@media(max-width:900px){.are-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.are-page{padding:20px 16px 40px}.are-pagehead{flex-direction:column}.are-nav{justify-content:flex-start;overflow:auto;flex-wrap:nowrap}}
@media(max-width:560px){.are-kpis{grid-template-columns:1fr}.are-topbar{padding:8px 14px}.are-brand small{display:none}}

/* ==========================================================
   ARE DESIGN SYSTEM v0.4 — APPROVED FUNCTIONAL PATTERNS
   Visual baseline: white header + ARE People language.
   ========================================================== */
.are-apphead,.are-topbar,.are-nav{background:var(--are-header-bg)}
.are-section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.are-section-title h2{margin:0;font-size:18px;line-height:1.25}.are-section-title p{margin:3px 0 0;color:var(--are-muted);font-size:13px}
.are-iconbox{width:34px;height:34px;border-radius:10px;display:inline-grid;place-items:center;background:var(--are-soft);color:var(--are-ink);flex:0 0 auto}.are-iconbox.yellow{background:var(--are-yellow-soft)}.are-iconbox.green{background:var(--are-soft-green);color:var(--are-green)}.are-iconbox.blue{background:var(--are-soft-blue);color:var(--are-blue)}.are-iconbox.red{background:var(--are-soft-red);color:var(--are-red)}

/* Tabs / ficha 360 */
.are-tabs{display:flex;align-items:center;gap:22px;overflow:auto;border-bottom:1px solid var(--are-line);white-space:nowrap}.are-tab{border:0;background:transparent;padding:13px 1px 11px;color:var(--are-muted);font-weight:650;border-bottom:3px solid transparent}.are-tab.active{color:var(--are-ink);border-bottom-color:var(--are-yellow)}
.are-record-head{display:flex;align-items:center;gap:14px;padding:4px 0 18px}.are-avatar{width:48px;height:48px;border-radius:12px;background:var(--are-yellow);display:grid;place-items:center;font-weight:800;font-size:18px}.are-record-title{min-width:0;flex:1}.are-record-title h2{margin:0 0 5px;font-size:21px}.are-record-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.are-record-side{display:flex;gap:24px;align-items:center;color:var(--are-muted);font-size:12px}.are-record-side strong{display:block;color:var(--are-ink);font-size:13px}.are-360-grid{display:grid;grid-template-columns:1.1fr 1.1fr .9fr;gap:14px;margin-top:14px}.are-info-panel{border:1px solid var(--are-line);border-radius:var(--are-radius);padding:15px;background:#fff}.are-info-panel h3{font-size:14px;margin:0 0 12px}.are-kv{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:7px 0;font-size:13px}.are-kv span:first-child{color:var(--are-muted)}

/* Timeline */
.are-timeline{position:relative;padding-left:23px}.are-timeline:before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--are-line)}.are-timeline-item{position:relative;display:grid;grid-template-columns:92px 1fr auto;gap:12px;padding:0 0 22px}.are-timeline-item:before{content:"";position:absolute;left:-19px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--are-blue);box-shadow:0 0 0 4px #fff}.are-timeline-time{font-size:12px;color:var(--are-muted)}.are-timeline-content strong{font-size:13px}.are-timeline-content p{margin:3px 0 0;color:var(--are-muted);font-size:12.5px}

/* Agenda / calendar */
.are-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}.are-calendar{display:grid;grid-template-columns:repeat(7,minmax(96px,1fr));border:1px solid var(--are-line);border-radius:var(--are-radius);overflow:auto;background:#fff}.are-cal-head,.are-cal-day{min-width:96px;border-right:1px solid var(--are-line);border-bottom:1px solid var(--are-line);padding:8px}.are-cal-head{font-size:11px;font-weight:750;color:var(--are-muted);text-align:center;background:#fafbfc}.are-cal-day{min-height:92px;font-size:12px}.are-cal-date{font-weight:700;margin-bottom:5px}.are-event{display:block;border-radius:6px;padding:5px 6px;margin:3px 0;background:var(--are-soft-blue);border-left:3px solid var(--are-blue);font-size:10.5px}.are-event.green{background:var(--are-soft-green);border-color:var(--are-green)}.are-event.amber{background:var(--are-soft-amber);border-color:var(--are-yellow)}.are-event.red{background:var(--are-soft-red);border-color:var(--are-red)}

/* Conversation / chat */
.are-chat{display:flex;flex-direction:column;gap:12px}.are-message{display:flex;gap:8px;align-items:flex-start}.are-message.me{justify-content:flex-end}.are-message-avatar{width:30px;height:30px;border-radius:50%;background:#e9edf3;flex:0 0 auto}.are-message-bubble{max-width:78%;padding:10px 12px;border-radius:12px;background:#f1f4f8;font-size:13px}.are-message.me .are-message-bubble{background:#eaf3ff}.are-message-meta{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--are-muted);margin-bottom:4px}.are-internal-note{padding:11px 12px;border-radius:10px;background:var(--are-soft-amber);border:1px solid #f4dfaa;font-size:12.5px}.are-chat-compose{display:flex;gap:8px;border-top:1px solid var(--are-line);padding-top:12px}.are-chat-compose input{flex:1;min-height:42px;border:1px solid var(--are-line);border-radius:9px;padding:0 12px}

/* Upload / attachments */
.are-dropzone{border:1.5px dashed #91bdf8;border-radius:var(--are-radius);padding:26px;text-align:center;background:#fbfdff;color:var(--are-muted)}.are-dropzone strong{display:block;color:var(--are-ink);margin-bottom:3px}.are-file-list{display:flex;flex-direction:column;margin-top:12px}.are-file{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--are-line)}.are-file strong{font-size:13px}.are-file small{display:block;color:var(--are-muted);font-size:11.5px}.are-progress{height:5px;border-radius:99px;background:#e9edf3;overflow:hidden;margin-top:6px}.are-progress>span{display:block;height:100%;background:var(--are-yellow)}

/* Meeting report editor */
.are-editor{border:1px solid var(--are-line);border-radius:var(--are-radius);overflow:hidden;background:#fff}.are-editor-title{width:100%;border:0;border-bottom:1px solid var(--are-line);min-height:42px;padding:0 12px;font-weight:650}.are-editor-toolbar{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:7px 8px;border-bottom:1px solid var(--are-line);background:#fafbfc}.are-editor-toolbar button{min-width:30px;height:30px;border:1px solid transparent;background:transparent;border-radius:6px}.are-editor-toolbar button:hover{background:#eef1f5}.are-editor-body{min-height:230px;padding:15px;font-size:13px}.are-editor-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px;border-top:1px solid var(--are-line)}

/* Sync status */
.are-sync-list{display:flex;flex-direction:column;gap:7px}.are-sync-row{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;border:1px solid var(--are-line);border-radius:10px;padding:9px 10px;background:#fff}.are-sync-row strong{font-size:13px}.are-sync-row small{display:block;font-size:11px;color:var(--are-muted)}.are-sync-row.success{background:var(--are-soft-green)}.are-sync-row.syncing{background:var(--are-soft-blue)}.are-sync-row.pending{background:var(--are-soft-amber)}.are-sync-row.error{background:var(--are-soft-red)}.are-sync-row.stale{background:#f5f6f8}.are-sync-row.never{background:#f7f8fa}

/* Renewal indicators */
.are-renewal-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.are-renewal-kpi{border:1px solid var(--are-line);border-radius:10px;padding:11px;background:#fff}.are-renewal-kpi span{font-size:11.5px;color:var(--are-muted)}.are-renewal-kpi strong{display:block;font-size:25px;line-height:1.1;margin-top:5px}.are-warning-list{margin-top:10px;background:var(--are-soft-amber);border:1px solid #f1deb1;border-radius:10px;padding:10px}.are-warning-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(168,96,0,.12);font-size:12px}.are-warning-row:last-child{border-bottom:0}

/* SLA */
.are-sla{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}.are-sla-ring{--pct:82;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--are-yellow) calc(var(--pct)*1%),#e9edf3 0);position:relative}.are-sla-ring:after{content:"";position:absolute;width:58px;height:58px;border-radius:50%;background:#fff}.are-sla-ring strong{position:relative;z-index:1;font-size:17px}.are-sla-legend{display:grid;gap:5px;font-size:11.5px;color:var(--are-muted)}.are-sla-renewal{padding:10px;border-radius:10px;background:var(--are-soft);font-size:11.5px;text-align:center}

/* Empty / Loading / Error / Success */
.are-state-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.are-state{min-height:140px;border:1px solid var(--are-line);border-radius:10px;padding:12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#fff}.are-state strong{font-size:12px}.are-state p{margin:0;color:var(--are-muted);font-size:11px}.are-state-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#eef1f5}.are-state.error .are-state-icon{background:var(--are-soft-red);color:var(--are-red)}.are-state.success .are-state-icon{background:var(--are-soft-green);color:var(--are-green)}.are-skeleton{width:100%;display:grid;gap:6px}.are-skeleton span{height:8px;border-radius:99px;background:linear-gradient(90deg,#edf0f4,#f8f9fb,#edf0f4);background-size:200% 100%;animation:areShimmer 1.3s infinite}.are-skeleton span:nth-child(2){width:78%}.are-skeleton span:nth-child(3){width:56%}@keyframes areShimmer{to{background-position:-200% 0}}

@media(max-width:1000px){.are-360-grid{grid-template-columns:1fr}.are-record-head{align-items:flex-start;flex-wrap:wrap}.are-record-side{width:100%}.are-renewal-kpis{grid-template-columns:1fr 1fr}.are-state-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.are-timeline-item{grid-template-columns:1fr auto}.are-timeline-time{grid-column:1/-1}.are-record-side{flex-direction:column;align-items:flex-start;gap:8px}.are-renewal-kpis,.are-state-grid{grid-template-columns:1fr}.are-sla{grid-template-columns:1fr;text-align:center}.are-sla-ring{margin:auto}}

/* v1.1 icon integration */
.are-icon{display:inline-block;vertical-align:middle;flex:0 0 auto}.are-btn .are-icon,.are-nav .are-icon{margin:0}.are-nav button{display:inline-flex;align-items:center;gap:7px}.are-icon-btn{width:40px;height:40px;border:1px solid var(--are-line);border-radius:9px;background:#fff;display:inline-grid;place-items:center;color:var(--are-ink)}.are-icon-btn:hover{background:var(--are-yellow-soft);border-color:#d6bd55}.are-icon-btn.ghost{border-color:transparent;background:transparent}.are-icon-btn.ghost:hover{background:#f6f7f9}.are-icon-btn.danger{color:var(--are-red)}
.are-search{position:relative;min-width:240px}.are-search input{width:100%;min-height:40px;border:1px solid var(--are-line);border-radius:9px;background:#f5f7fa;padding:0 12px 0 38px;color:var(--are-ink)}.are-search .are-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--are-muted);pointer-events:none}
