/* ═══════════════════════════════════════
DESIGN TOKENS — DARK THEME
═══════════════════════════════════════ */
:root {
--bg:        #0D0F14;
--bg2:       #121419;
--surface:   #181B23;
--surface2:  #1E222C;
--surface3:  #252A35;
--border:    rgba(255,255,255,0.06);
--border2:   rgba(255,255,255,0.12);

--text:      #F0F2F7;
--text2:     #8B90A0;
--text3:     #555A6A;

--accent:    #6C63FF;
--accent2:   #8B85FF;
--accent-bg: rgba(108,99,255,0.12);
--accent-glow: rgba(108,99,255,0.25);

--green:     #1DB974;
--green-bg:  rgba(29,185,116,0.12);
--blue:      #3A9BDC;
--blue-bg:   rgba(58,155,220,0.12);
--pink:      #E063A8;
--pink-bg:   rgba(224,99,168,0.12);
--amber:     #F0A640;
--amber-bg:  rgba(240,166,64,0.12);
--teal:      #14C8A8;
--teal-bg:   rgba(20,200,168,0.12);
--violet:    #A67AF4;
--violet-bg: rgba(166,122,244,0.12);

--r:    14px;
--r-sm: 8px;
--r-xs: 5px;
--sidebar-w: 268px;
--shadow: 0 4px 24px rgba(0,0,0,0.4);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
font-size: 14px;
line-height: 1.6;
overflow-x: hidden;
}

/* ═══════════════════════════════════════
AUTH SCREEN
═══════════════════════════════════════ */
#auth-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
position: relative;
overflow: hidden;
}
#auth-screen::before {
content: '';
position: absolute;
top: -30%;
left: -20%;
width: 60%;
height: 60%;
background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
pointer-events: none;
}
#auth-screen::after {
content: '';
position: absolute;
bottom: -20%;
right: -10%;
width: 40%;
height: 40%;
background: radial-gradient(ellipse, rgba(20,200,168,0.12) 0%, transparent 70%);
pointer-events: none;
}

.auth-card {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 20px;
padding: 40px;
width: 100%;
max-width: 420px;
box-shadow: var(--shadow);
position: relative;
z-index: 1;
}

.auth-logo {
text-align: center;
margin-bottom: 32px;
}
.auth-logo-icon {
width: 52px; height: 52px;
background: var(--accent);
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
box-shadow: 0 0 24px var(--accent-glow);
}
.auth-logo-icon i { font-size: 26px; color: #fff; }
.auth-brand {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--text);
}
.auth-tagline { font-size: 13px; color: var(--text3); margin-top: 3px; }

.auth-tabs {
display: flex;
background: var(--surface2);
border-radius: var(--r-sm);
padding: 4px;
margin-bottom: 28px;
gap: 4px;
}
.auth-tab {
flex: 1;
padding: 9px;
border-radius: 6px;
border: none;
background: none;
font-size: 14px;
font-family: 'Inter', sans-serif;
color: var(--text2);
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
}
.auth-tab.active {
background: var(--surface3);
color: var(--text);
box-shadow: var(--shadow-sm);
}

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.form-group { margin-bottom: 16px; }
.form-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text2);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 7px;
}
.form-input {
width: 100%;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 11px 14px;
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder { color: var(--text3); }
.form-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}

.btn-primary {
width: 100%;
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--r-sm);
padding: 13px;
font-size: 14px;
font-weight: 600;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 16px var(--accent-glow);
margin-top: 8px;
}
.btn-primary:hover {
background: var(--accent2);
transform: translateY(-1px);
box-shadow: 0 6px 24px var(--accent-glow);
}
.btn-primary:active { transform: translateY(0); }

.auth-divider {
text-align: center;
font-size: 12px;
color: var(--text3);
margin: 20px 0;
position: relative;
}
.auth-divider::before {
content: '';
position: absolute;
top: 50%; left: 0; right: 0;
height: 1px;
background: var(--border);
}
.auth-divider span {
background: var(--surface);
padding: 0 10px;
position: relative;
}

/* ═══════════════════════════════════════
APP LAYOUT
═══════════════════════════════════════ */
#app { display: none; flex-direction: column; min-height: 100vh; }
#app.visible { display: flex; }

.app-body {
display: flex;
flex: 1;
min-height: 0;
}

/* ═══════════════════════════════════════
SIDEBAR
═══════════════════════════════════════ */
.sidebar {
width: var(--sidebar-w);
flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 0;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}

.sidebar-header {
padding: 24px 20px 0;
}

.logo {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
margin-bottom: 20px;
}
.logo-icon {
width: 34px; height: 34px;
background: var(--accent);
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 12px var(--accent-glow);
}
.logo-icon i { font-size: 18px; color: #fff; }
.logo-text {
font-family: 'Space Grotesk', sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--text);
}

.nav-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text3);
margin: 4px 0 6px;
padding: 0 8px;
}

.nav-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--r-sm);
font-size: 13.5px;
font-weight: 500;
color: var(--text2);
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
transition: background 0.15s, color 0.15s;
margin-bottom: 2px;
}
.nav-btn:hover { background: var(--surface2); color: var(--text); }
.nav-btn.active {
background: var(--accent-bg);
color: var(--accent2);
}
.nav-btn.active i { color: var(--accent); }
.nav-btn i { font-size: 17px; }

.sidebar-nav { padding: 0 12px; flex: 1; }

.area-chip {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 12px;
border-radius: var(--r-sm);
font-size: 13px;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
margin-bottom: 2px;
transition: all 0.15s;
color: var(--text2);
}
.area-chip:hover { background: var(--surface2); }
.area-chip.on { color: var(--text); }
.area-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.sidebar-user {
padding: 16px 20px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 10px;
}
.user-avatar {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--accent-bg);
border: 2px solid var(--accent);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
font-weight: 700;
color: var(--accent2);
flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--text3); }
.btn-logout {
background: none;
border: none;
color: var(--text3);
cursor: pointer;
padding: 4px;
border-radius: var(--r-xs);
transition: color 0.15s;
font-size: 16px;
}
.btn-logout:hover { color: #E24B4A; }

/* ═══════════════════════════════════════
MAIN CONTENT
═══════════════════════════════════════ */
.main {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
background: var(--bg);
}

.main-inner {
flex: 1;
padding: 32px 40px;
max-width: 920px;
}

.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 28px;
gap: 16px;
}
.page-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 28px;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.page-subtitle { font-size: 13px; color: var(--text3); margin-top: 4px; }

.date-badge {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--r-sm);
padding: 9px 16px;
font-size: 13px;
color: var(--text2);
display: flex;
align-items: center;
gap: 7px;
white-space: nowrap;
flex-shrink: 0;
font-weight: 500;
}

/* ═══════════════════════════════════════
METRICS
═══════════════════════════════════════ */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
.metric-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 18px 20px;
position: relative;
overflow: hidden;
animation: fadeUp 0.3s ease both;
}
.metric-card:nth-child(2) { animation-delay: 0.05s; }
.metric-card:nth-child(3) { animation-delay: 0.1s; }
.metric-card::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 60px; height: 60px;
border-radius: 50%;
opacity: 0.06;
transform: translate(20px, -20px);
}
.metric-val {
font-family: 'Space Grotesk', sans-serif;
font-size: 28px;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.metric-lbl { font-size: 12px; color: var(--text3); margin-top: 5px; }
.metric-bar { margin-top: 12px; height: 3px; border-radius: 2px; background: var(--surface3); overflow: hidden; }
.metric-bar-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.5s; }

/* ═══════════════════════════════════════
SECTIONS
═══════════════════════════════════════ */
.section { margin-bottom: 28px; }
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.section-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text3);
}

/* ═══════════════════════════════════════
VIEWS
═══════════════════════════════════════ */
.view { display: none; }
.view.active { display: block; }

/* ═══════════════════════════════════════
TASKS
═══════════════════════════════════════ */
.tasks-list {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
}
.task-row {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
border-bottom: 1px solid var(--border);
transition: background 0.12s;
animation: fadeUp 0.2s ease;
}
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: var(--surface2); }

.check {
width: 20px; height: 20px;
border-radius: 50%;
border: 1.5px solid var(--border2);
cursor: pointer;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
background: none;
}
.check.done { border-color: var(--green); background: var(--green); }
.check.done i { color: #fff; font-size: 11px; display: block; }
.check i { display: none; }

.task-text { flex: 1; font-size: 14px; transition: all 0.2s; }
.task-text.done { text-decoration: line-through; color: var(--text3); }

.area-tag {
font-size: 11px;
padding: 3px 9px;
border-radius: 20px;
font-weight: 600;
white-space: nowrap;
}

.task-delete {
background: none; border: none; cursor: pointer;
color: var(--text3); font-size: 15px; padding: 3px 5px;
opacity: 0;
transition: opacity 0.15s, color 0.15s;
border-radius: var(--r-xs);
}
.task-row:hover .task-delete { opacity: 1; }
.task-delete:hover { color: #E24B4A; background: rgba(226,75,74,0.1); }

.add-row {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-top: 1px solid var(--border);
background: var(--surface2);
}
.add-input {
flex: 1;
border: none;
background: none;
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text);
outline: none;
}
.add-input::placeholder { color: var(--text3); }
.add-select {
border: 1px solid var(--border2);
border-radius: var(--r-xs);
padding: 6px 8px;
font-size: 13px;
font-family: 'Inter', sans-serif;
background: var(--surface3);
color: var(--text);
cursor: pointer;
outline: none;
}
.btn-add {
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--r-sm);
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.btn-add:hover { background: var(--accent2); }

/* ═══════════════════════════════════════
SCHEDULE — Cronograma
═══════════════════════════════════════ */
.schedule { display: flex; flex-direction: column; gap: 0; }
.sched-block {
display: flex;
gap: 0;
position: relative;
}
.sched-block::before {
content: '';
position: absolute;
left: 62px;
top: 0; bottom: 0;
width: 1px;
background: var(--border);
}
.sched-time {
width: 62px;
flex-shrink: 0;
font-size: 11px;
color: var(--text3);
padding-top: 12px;
font-variant-numeric: tabular-nums;
text-align: right;
padding-right: 14px;
font-weight: 500;
}
.sched-body {
flex: 1;
margin: 3px 0 3px 14px;
border-radius: var(--r-sm);
padding: 8px 12px;
position: relative;
border-left: 3px solid transparent;
transition: transform 0.15s, box-shadow 0.15s;
}
.sched-body:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }
.sched-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.sched-title { font-size: 12px; font-weight: 600; }
.sched-dur {
font-size: 10px;
font-weight: 400;
opacity: 0.6;
margin-left: 5px;
}
.sched-actions {
display: flex;
gap: 3px;
opacity: 0;
transition: opacity 0.15s;
}
.sched-body:hover .sched-actions { opacity: 1; }
.sched-btn {
background: rgba(255,255,255,0.08);
border: none;
border-radius: var(--r-xs);
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: inherit;
font-size: 12px;
transition: background 0.15s;
}
.sched-btn:hover { background: rgba(255,255,255,0.15); }
.sched-btn.danger:hover { background: rgba(226,75,74,0.2); color: #E24B4A; }

.sched-desc { font-size: 11px; margin-top: 2px; opacity: 0.75; }

/* Checkbox de conclusão */
.sched-check {
flex-shrink: 0;
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.25);
background: transparent;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 10px;
color: transparent;
transition: border-color 0.15s, background 0.15s, color 0.15s;
padding: 0;
}
.sched-check:hover { border-color: rgba(255,255,255,0.5); }
.sched-check.checked {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}

/* Estado concluído — grifo no título */
.sched-done .sched-title {
text-decoration: line-through;
opacity: 0.45;
}
.sched-done .sched-dur { opacity: 0.35; }
.sched-done .sched-desc { opacity: 0.4; }
.sched-done .sched-body { opacity: 0.7; }
.sched-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sched-pill { font-size: 11px; padding: 2px 9px; border-radius: 20px; font-weight: 500; }

.sched-add-btn {
margin: 10px 0 10px 76px;
display: flex;
align-items: center;
gap: 7px;
background: none;
border: 1px dashed var(--border2);
border-radius: var(--r-sm);
padding: 9px 14px;
color: var(--text3);
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
font-family: 'Inter', sans-serif;
}
.sched-add-btn:hover { border-color: var(--accent); color: var(--accent2); background: var(--accent-bg); }

/* ═══════════════════════════════════════
ALLOCATION
═══════════════════════════════════════ */
.alloc-grid { display: flex; flex-direction: column; gap: 10px; }
.alloc-row {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px;
}
.alloc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.alloc-name { font-size: 14px; font-weight: 600; }
.alloc-num { font-size: 13px; color: var(--text2); }
.alloc-bar { height: 5px; border-radius: 3px; background: var(--surface3); overflow: hidden; }
.alloc-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.alloc-slider {
width: 100%;
margin-top: 12px;
accent-color: var(--accent);
cursor: pointer;
}

/* ═══════════════════════════════════════
SEMANAL — Weekly Planner
═══════════════════════════════════════ */
.week-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
margin-bottom: 24px;
}
.day-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 8px;
text-align: center;
cursor: pointer;
transition: all 0.15s;
min-height: 80px;
}
.day-card:hover { border-color: var(--border2); background: var(--surface2); }
.day-card.today { border-color: var(--accent); background: var(--accent-bg); }
.day-card.selected { border-color: var(--accent2); box-shadow: 0 0 0 3px var(--accent-bg); }
.day-name { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text3); letter-spacing: 0.06em; margin-bottom: 4px; }
.day-num { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: var(--text2); line-height: 1; }
.day-card.today .day-num { color: var(--accent2); }
.day-dots { display: flex; justify-content: center; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.day-dot { width: 5px; height: 5px; border-radius: 50%; }

.week-form-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
}
.week-form-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.week-form-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
}
.week-form-body { padding: 20px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

.form-group-dark { margin-bottom: 16px; }
.form-label-dark {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 6px;
}
.form-input-dark {
width: 100%;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 13px;
font-family: 'Inter', sans-serif;
font-size: 13.5px;
color: var(--text);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input-dark::placeholder { color: var(--text3); }
.form-input-dark:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
.form-textarea {
resize: vertical;
min-height: 80px;
font-family: 'Inter', sans-serif;
}

.priority-group { display: flex; gap: 6px; }
.priority-btn {
flex: 1;
padding: 7px;
border: 1px solid var(--border);
border-radius: var(--r-xs);
background: none;
cursor: pointer;
font-size: 12px;
font-family: 'Inter', sans-serif;
color: var(--text2);
transition: all 0.15s;
font-weight: 500;
}
.priority-btn:hover { border-color: var(--border2); color: var(--text); }
.priority-btn.active-high { background: rgba(226,75,74,0.12); border-color: #E24B4A; color: #E24B4A; }
.priority-btn.active-medium { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }
.priority-btn.active-low { background: var(--green-bg); border-color: var(--green); color: var(--green); }

.week-events-list { margin-top: 20px; }
.week-event-item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
margin-bottom: 6px;
transition: background 0.12s;
animation: fadeUp 0.2s ease;
}
.week-event-item:hover { background: var(--surface2); }
.event-time-badge {
font-size: 11px;
font-weight: 600;
color: var(--text3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
min-width: 80px;
}
.event-content { flex: 1; min-width: 0; }
.event-title { font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-area-tag { font-size: 11px; color: var(--text3); margin-top: 1px; }
.event-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.week-event-item:hover .event-actions { opacity: 1; }
.event-btn {
background: none; border: none; cursor: pointer;
color: var(--text3); font-size: 15px; padding: 3px 5px;
border-radius: var(--r-xs);
transition: all 0.15s;
}
.event-btn:hover { background: var(--surface3); color: var(--text); }
.event-btn.del:hover { color: #E24B4A; background: rgba(226,75,74,0.1); }

.priority-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}

/* ═══════════════════════════════════════
MODAL
═══════════════════════════════════════ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--r);
padding: 28px;
width: 100%;
max-width: 480px;
box-shadow: var(--shadow);
animation: modalIn 0.2s ease;
}
@keyframes modalIn {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--text);
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-close {
background: none; border: none; cursor: pointer;
color: var(--text3); font-size: 20px;
padding: 2px; border-radius: var(--r-xs);
transition: color 0.15s;
}
.modal-close:hover { color: var(--text); }
.modal-footer {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 20px;
}
.btn-secondary {
background: var(--surface2);
color: var(--text2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 9px 18px;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: all 0.15s;
}
.btn-secondary:hover { background: var(--surface3); color: var(--text); }
.btn-confirm {
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--r-sm);
padding: 9px 20px;
font-size: 13px;
font-weight: 600;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: all 0.15s;
box-shadow: 0 2px 12px var(--accent-glow);
}
.btn-confirm:hover { background: var(--accent2); }

/* ═══════════════════════════════════════
FOOTER
═══════════════════════════════════════ */
footer {
background: var(--surface);
border-top: 1px solid var(--border);
padding: 14px 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.footer-brand {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text3);
font-weight: 500;
}
.footer-brand span { color: var(--accent2); }
.footer-links {
display: flex;
gap: 20px;
}
.footer-link {
font-size: 12px;
color: var(--text3);
text-decoration: none;
transition: color 0.15s;
}
.footer-link:hover { color: var(--text2); }
.footer-copy { font-size: 12px; color: var(--text3); }

/* ═══════════════════════════════════════
TOAST
═══════════════════════════════════════ */
.toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 200;
display: flex;
flex-direction: column;
gap: 8px;
}
.toast {
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--r-sm);
padding: 12px 16px;
font-size: 13px;
color: var(--text);
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: 9px;
animation: toastIn 0.3s ease;
max-width: 280px;
}
@keyframes toastIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.toast.success i { color: var(--green); }
.toast.error i { color: #E24B4A; }
.toast.info i { color: var(--accent2); }

/* ═══════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 820px) {
.sidebar { display: none; }
.main-inner { padding: 20px 18px; }
.metrics { grid-template-columns: repeat(2, 1fr); }
.week-grid { grid-template-columns: repeat(4, 1fr); }
.form-row, .form-row-3 { grid-template-columns: 1fr; }
footer { padding: 12px 18px; }
.footer-links { display: none; }
}

/* ═══════════════════════════════════════
EMPTY STATE
═══════════════════════════════════════ */
.empty-state {
padding: 32px;
text-align: center;
color: var(--text3);
}
.empty-state i { font-size: 32px; opacity: 0.4; display: block; margin-bottom: 10px; }
.empty-state p { font-size: 14px; }

/* ═══════════════════════════════════════
CHIP INPUT TAGS
═══════════════════════════════════════ */
.color-picker-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.color-swatch {
width: 24px; height: 24px;
border-radius: 50%;
cursor: pointer;
border: 3px solid transparent;
transition: all 0.15s;
}
.color-swatch.selected { border-color: #fff; transform: scale(1.15); }

/* scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border2); }

/* ═══════════════════════════════════════
WEEKLY TABS LAYOUT — ABAS HORIZONTAIS
═══════════════════════════════════════ */
.weekly-tabs-layout {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 4px;
}

/* Barra horizontal de dias */
.day-tabs-bar {
  display: flex;
  flex-direction: row;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 0;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.day-tabs-bar::-webkit-scrollbar { display: none; }

.day-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 56px;
  padding: 12px 8px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  color: var(--text3);
  transition: all 0.18s;
  font-family: inherit;
  position: relative;
  white-space: nowrap;
}

.day-tab-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

.day-tab-btn.active {
  background: var(--accent-bg);
  color: var(--accent2);
  border-bottom-color: var(--accent);
}

.day-tab-short {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.day-tab-num {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  font-family: 'Space Grotesk', sans-serif;
}

/* Conteúdo do dia */
.day-tab-content {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
}

.day-tab-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.day-tab-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
}

.day-tab-date {
  font-size: 13px;
  color: var(--text3);
}

/* Itens do cronograma */
.day-sched-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 6px;
  transition: opacity 0.15s;
}
.day-sched-item:hover { opacity: 0.9; }

.day-sched-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  min-width: 40px;
  padding-top: 2px;
  letter-spacing: 0.3px;
  font-family: 'Space Grotesk', sans-serif;
}

.day-sched-body { flex: 1; }

.day-sched-title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.day-sched-dur {
  font-size: 11px;
  font-weight: 400;
  color: var(--text3);
  background: rgba(255,255,255,0.06);
  padding: 1px 7px;
  border-radius: 20px;
}

.day-sched-desc {
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.5;
}

.day-tasks-section { margin-top: 8px; }

/* Responsive */
@media (max-width: 820px) {
  .day-tab-btn { min-width: 44px; padding: 10px 4px; }
  .day-tab-short { font-size: 10px; }
  .day-tab-content { padding: 14px 14px; }
}