/* Página inicial do aplicativo Família/Aluno — composição baseada na referência aprovada. */
#familia-aluno.family-view {
  padding: 12px 2.5%;
  max-width: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(107, 132, 255, .09), transparent 28%),
    linear-gradient(180deg, #f6f9ff 0%, #edf4fb 100%);
}

#familia-aluno .family-home-shell {
  --home-navy: #09264d;
  --home-blue: #194f94;
  --home-violet: #6548ee;
  --home-muted: #667b9f;
  min-height: calc(100vh - 24px);
  max-width: 1510px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid #dfe8f6;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5fc 100%);
  box-shadow: 0 24px 70px rgba(27, 54, 98, .12);
  padding-bottom: 0;
  overflow: hidden;
}

#familia-aluno .family-home-topbar {
  height: 68px;
  padding: 0 30px;
  border-bottom: 1px solid #dbe5f2;
  background: rgba(255,255,255,.94);
}

#familia-aluno .family-brand > img {
  width: 154px;
  height: 48px;
}

#familia-aluno .family-home-account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

#familia-aluno .family-notification-button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  color: #375783;
  background: #f7faff;
  font-size: 20px;
  position: relative;
}

#familia-aluno .family-notification-button b {
  position: absolute;
  right: 2px;
  top: -3px;
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #ee5364;
  font-size: 10px;
}

#familia-aluno .family-student-selector,
#familia-aluno .family-guardian-selector {
  height: 48px;
  border: 1px solid #dce6f2;
  border-radius: 13px;
  background: #fff;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  text-align: left;
  box-shadow: 0 4px 15px rgba(39, 67, 106, .03);
}

#familia-aluno .family-student-selector { width: 252px; min-width: 252px; }
#familia-aluno .family-guardian-selector { width: 205px; }
#familia-aluno .family-student-selector > i,
#familia-aluno .family-guardian-selector > i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  background: #eaf3ff;
  color: #1d6cd1;
}

#familia-aluno .family-guardian-selector > i { background: #f0edff; color: #6548df; }
#familia-aluno .family-student-selector strong,
#familia-aluno .family-student-selector small,
#familia-aluno .family-guardian-selector strong,
#familia-aluno .family-guardian-selector small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#familia-aluno .family-student-selector strong,
#familia-aluno .family-guardian-selector strong { color: var(--home-navy); font-size: 11px; }
#familia-aluno .family-student-selector small,
#familia-aluno .family-guardian-selector small { color: #7487a4; font-size: 9px; margin-top: 1px; }
#familia-aluno .family-student-selector em,
#familia-aluno .family-guardian-selector em { color: #6680a4; font-style: normal; }
#familia-aluno .family-account-divider { width: 1px; height: 30px; background: #e1e8f2; margin: 0 2px; }
#familia-aluno .family-exit-control { display: none; }

#familia-aluno .family-home-content {
  max-width: 1395px;
  padding: 27px 20px 0;
}

#familia-aluno .family-home-welcome {
  position: relative;
  min-height: 104px;
  margin: -27px -20px 12px;
  padding: 29px 38px 16px;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(239,247,255,.35) 0 52%, rgba(225,237,255,.88) 70%, rgba(241,246,255,.55) 100%);
}

#familia-aluno .family-home-welcome::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 48%;
  height: 100%;
  opacity: .45;
  background: repeating-linear-gradient(122deg, transparent 0 30px, rgba(105,83,232,.08) 31px 43px, transparent 44px 70px);
  clip-path: polygon(12% 0,100% 0,100% 100%,0 100%);
}

#familia-aluno .family-home-welcome > div:first-child { position: relative; z-index: 2; }
#familia-aluno .family-home-welcome > div:first-child > span {
  color: #617ba1;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}
#familia-aluno .family-home-welcome h1 { color: var(--home-navy); font-size: 29px; letter-spacing: -.04em; margin: 5px 0; }
#familia-aluno .family-home-welcome h1 b { color: var(--home-violet); }
#familia-aluno .family-home-welcome p { color: #60779c; font-size: 12px; }

#familia-aluno .family-welcome-art {
  position: absolute;
  z-index: 2;
  right: 22px;
  top: 13px;
  width: 49%;
  height: 88px;
  display: grid;
  grid-template-columns: 1fr 165px 1fr;
  align-items: center;
  gap: 18px;
}
#familia-aluno .family-welcome-art blockquote,
#familia-aluno .family-welcome-art p { margin: 0; color: #284f91; font-size: 13px; line-height: 1.45; font-style: italic; }
#familia-aluno .family-welcome-art p { transform: rotate(-4deg); text-align: center; color: #5276c4; }
#familia-aluno .family-books { height: 76px; position: relative; color: #4e7ee5; font-size: 48px; filter: drop-shadow(0 8px 12px rgba(57,74,169,.15)); }
#familia-aluno .family-books > i { position: absolute; left: 22px; top: 25px; color: #584de2; font-style: normal; }
#familia-aluno .family-books > b { position: absolute; right: 7px; top: 2px; font-size: 44px; color: #f1a453; }

#familia-aluno .family-home-summary {
  min-height: 106px;
  margin: 0 0 16px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 64px minmax(310px,1.7fr) repeat(3,minmax(155px,.62fr)) 170px;
  align-items: center;
  gap: 16px;
  border-radius: 18px;
  background: linear-gradient(120deg,#17478b 0%,#0d5792 70%,#1768a0 100%);
  box-shadow: 0 12px 28px rgba(17,76,139,.22);
}
#familia-aluno .family-summary-sun {
  width: 64px;
  height: 64px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.11);
  font-size: 34px;
  font-style: normal;
}
#familia-aluno .family-summary-copy span { color: #d8e8ff; font-size: 9px; letter-spacing: .05em; }
#familia-aluno .family-summary-copy h2 { color: #fff; font-size: 18px; margin: 5px 0 3px; }
#familia-aluno .family-summary-copy p { color: #c7dcf5; font-size: 11px; }
#familia-aluno .family-summary-metric {
  min-height: 55px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  border-left: 1px solid rgba(255,255,255,.25);
  padding-left: 16px;
}
#familia-aluno .family-summary-metric > i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(114,162,255,.2); color: #e7f2ff; font-style: normal; font-size: 20px; }
#familia-aluno .family-summary-metric.green > i { background: rgba(44,194,148,.2); color: #75e4bd; }
#familia-aluno .family-summary-metric.cyan > i { background: rgba(61,188,222,.2); color: #7ddcef; }
#familia-aluno .family-summary-metric p { margin: 0; min-width: 0; }
#familia-aluno .family-summary-metric strong,
#familia-aluno .family-summary-metric span,
#familia-aluno .family-summary-metric small { display: block; color: #fff; }
#familia-aluno .family-summary-metric strong { font-size: 21px; line-height: 1; }
#familia-aluno .family-summary-metric span { font-size: 10px; font-weight: 700; margin-top: 2px; }
#familia-aluno .family-summary-metric small { color: #bcd4ed; font-size: 8px; margin-top: 2px; }
#familia-aluno .family-home-summary > button { min-height: 42px; border: 1px solid rgba(255,255,255,.85); border-radius: 12px; background: rgba(255,255,255,.05); color: #fff; font-size: 11px; font-weight: 800; padding: 0 14px; }
#familia-aluno .family-home-summary > button:hover { background: rgba(255,255,255,.13); }

#familia-aluno .family-home-shortcuts {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px;
  margin: 0 0 11px;
}
#familia-aluno .family-home-shortcuts + .family-home-shortcuts { margin-top: 0; margin-bottom: 16px; }
#familia-aluno .family-home-shortcuts > button {
  min-height: 67px;
  border-radius: 14px;
  padding: 10px 14px;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  position: relative;
  box-shadow: 0 3px 10px rgba(40,68,103,.025);
}
#familia-aluno .family-home-shortcuts > button:hover { transform: translateY(-2px); border-color: #cbd8e9; box-shadow: 0 9px 20px rgba(40,68,103,.08); }
#familia-aluno .family-home-shortcuts i { width: 47px; height: 47px; border-radius: 14px; font-size: 19px; }
#familia-aluno .family-home-shortcuts i.health { background:#ffecf0; color:#d6546d; }
#familia-aluno .family-home-shortcuts i.photos { background:#e8f2ff; color:#307bd8; }
#familia-aluno .family-home-shortcuts i.messages { background:#eeedff; color:#5b57c9; }
#familia-aluno .family-home-shortcuts strong { color: var(--home-navy); font-size: 13px; }
#familia-aluno .family-home-shortcuts small { color: #7185a3; font-size: 10px; }
#familia-aluno .family-home-shortcuts em { color: #51729c; font-size: 18px; }
#familia-aluno .family-home-shortcuts u { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #f25b6d; top: 10px; right: 10px; text-decoration: none; }
#familia-aluno .family-home-shortcuts .family-ok-chip { display: inline-block; padding: 3px 9px; border-radius: 10px; background: #def5e9; color: #1d926a; font-size: 9px; }
#familia-aluno .family-home-shortcuts .family-new-chip { position:absolute; right:34px; top:16px; padding:4px 9px; border-radius:10px; background:#e5f1ff; color:#2d6ed1; font-size:9px; }

#familia-aluno .family-home-grid {
  grid-template-columns: minmax(0, 1.58fr) minmax(390px, 1fr);
  gap: 14px;
  align-items: stretch;
}
#familia-aluno .family-home-day,
#familia-aluno .family-home-material,
#familia-aluno .family-home-next,
#familia-aluno .family-important { border-radius: 15px; border: 1px solid #dce6f1; background: #fff; box-shadow: 0 3px 12px rgba(39,63,96,.025); }
#familia-aluno .family-home-day { padding: 14px 18px 12px; }
#familia-aluno .family-home-day .family-section-heading { margin: 0 0 10px; }
#familia-aluno .family-home-day .family-section-heading > div { display: flex; align-items: center; gap: 12px; }
#familia-aluno .family-home-day .family-section-heading > div > i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #eeebff; color: #5d49dd; font-style: normal; font-size: 18px; }
#familia-aluno .family-home-day .family-section-heading span { color: inherit; letter-spacing: 0; }
#familia-aluno .family-home-day .family-section-heading strong,
#familia-aluno .family-home-day .family-section-heading small { display: block; }
#familia-aluno .family-home-day .family-section-heading strong { color: var(--home-navy); font-size: 14px; }
#familia-aluno .family-home-day .family-section-heading small { color: #7185a3; font-size: 10px; margin-top: 2px; font-weight: 500; }
#familia-aluno .family-home-day .family-section-heading button { font-size: 10px; }

#familia-aluno .family-timeline { position: relative; padding-left: 80px; }
#familia-aluno .family-timeline::before { content:""; position:absolute; left: 58px; top: 15px; bottom: 17px; width:1px; background:#dce5f1; }
#familia-aluno .family-timeline article {
  height: 68px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  position: relative;
  margin: 7px 0;
  padding: 7px 12px 7px 58px;
  border: 1px solid #e0e8f2;
  border-radius: 13px;
  background: linear-gradient(100deg,#fbfdff,#f5f9fd);
}
#familia-aluno .family-timeline article > time { position:absolute; left:-80px; width:48px; color:#57749b; font-size:10px; text-align:center; }
#familia-aluno .family-timeline article > i { position:absolute; left:-14px; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-style:normal; font-size:17px; z-index:2; }
#familia-aluno .family-timeline article > i::before { content:""; position:absolute; left:-25px; width:9px; height:9px; border-radius:50%; border:3px solid currentColor; background:#fff; }
#familia-aluno .family-timeline article > i.violet { color:#634ee6; background:#eeebff; }
#familia-aluno .family-timeline article > i.green { color:#1d9a6e; background:#e3f7ed; }
#familia-aluno .family-timeline article > i.blue { color:#2b80d8; background:#e4f1ff; }
#familia-aluno .family-timeline article > i.rose { color:#e05270; background:#ffecef; }
#familia-aluno .family-timeline article > div { min-width:0; }
#familia-aluno .family-timeline article > div > b { display:inline-block; border-radius:8px; padding:3px 8px; color:#6754d7; background:#ece9ff; font-size:8px; }
#familia-aluno .family-timeline article > div > b.green { color:#178a63; background:#def4e9; }
#familia-aluno .family-timeline article > div > b.blue { color:#277bcf; background:#e1efff; }
#familia-aluno .family-timeline article > div > b.rose { color:#d44e68; background:#ffe5ea; }
#familia-aluno .family-timeline article strong { display:block; color:var(--home-navy); font-size:12px; margin:3px 0 1px; }
#familia-aluno .family-timeline article p { color:#7185a3; font-size:10px; margin:0; }
#familia-aluno .family-timeline article > small { color:#6780a3; font-size:9px; }
#familia-aluno .family-timeline article > em { color:#c67827; background:#fff1dc; border-radius:9px; padding:6px 9px; font-size:9px; font-style:normal; font-weight:700; }

#familia-aluno .family-home-side { gap: 10px; }
#familia-aluno .family-home-material,
#familia-aluno .family-home-next,
#familia-aluno .family-important { padding: 10px 14px; }
#familia-aluno .family-home-material { height:112px; }
#familia-aluno .family-home-next { height:177px; }
#familia-aluno .family-important { height:90px; padding-top:8px; padding-bottom:8px; }
#familia-aluno .family-home-material { background: linear-gradient(120deg,#fffdf5,#fff8df); border-color:#ecd27d; }
#familia-aluno .family-side-title { display:flex; align-items:center; gap:9px; min-height:30px; }
#familia-aluno .family-side-title > i { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:#fff0dc; color:#dc8425; font-style:normal; }
#familia-aluno .family-side-title > p { margin:0; flex:1; }
#familia-aluno .family-side-title strong,
#familia-aluno .family-side-title small { display:block; }
#familia-aluno .family-side-title strong { color:var(--home-navy); font-size:13px; }
#familia-aluno .family-side-title small { color:#8b9ab0; font-size:9px; margin-top:2px; }
#familia-aluno .family-side-title > b { margin-left:auto; font-size:30px; }
#familia-aluno .family-side-title > button { border:0; background:transparent; margin-left:auto; color:#2f5dd7; font-size:9px; font-weight:800; }
#familia-aluno .family-home-material > button { margin-top:7px; width:100%; min-height:49px; display:grid; grid-template-columns:22px 1fr 12px; gap:10px; align-items:center; text-align:left; border:1px solid #f0e4bb; border-radius:11px; background:#fff; padding:7px 11px; color:inherit; }
#familia-aluno .family-home-material > button > i { width:18px; height:18px; border:1px solid #afbdd0; border-radius:5px; }
#familia-aluno .family-home-material > button strong,
#familia-aluno .family-home-material > button small { display:block; }
#familia-aluno .family-home-material > button strong { color:var(--home-navy); font-size:11px; }
#familia-aluno .family-home-material > button small { color:#7486a0; font-size:9px; margin-top:2px; }
#familia-aluno .family-home-material > button em { color:#5f7699; font-style:normal; }

#familia-aluno .family-home-next article { grid-template-columns:38px 1fr 12px; height:42px; padding:2px 0; gap:9px; }
#familia-aluno .family-home-next article em { color:#6b82a3; font-style:normal; }
#familia-aluno .family-home-next time { width:36px; height:36px; }
#familia-aluno .family-home-next strong { font-size:10px; color:var(--home-navy); }
#familia-aluno .family-home-next small { font-size:9px; }

#familia-aluno .family-important > .family-side-title > i { background:#fff0dc; }
#familia-aluno .family-important > button { width:100%; border:0; border-top:1px solid #edf1f6; background:#fff; display:grid; grid-template-columns:8px 1fr auto; gap:10px; align-items:center; text-align:left; padding:5px 2px 0; }
#familia-aluno .family-important > button > i { width:7px; height:7px; border-radius:50%; background:#ee5e70; }
#familia-aluno .family-important > button strong,
#familia-aluno .family-important > button small { display:block; }
#familia-aluno .family-important > button strong { color:var(--home-navy); font-size:10px; }
#familia-aluno .family-important > button small { color:#7486a0; font-size:9px; margin-top:2px; }
#familia-aluno .family-important > button time { color:#8294ac; font-size:9px; }

#familia-aluno .family-home-footer { min-height:78px; display:flex; justify-content:space-between; align-items:flex-end; padding:13px 0 0; color:#8ba0bb; }
#familia-aluno .family-home-footer span strong,
#familia-aluno .family-home-footer span small { display:block; }
#familia-aluno .family-home-footer span strong { font-size:10px; color:#617a9b; }
#familia-aluno .family-home-footer span small { font-size:8px; }
#familia-aluno .family-home-footer p { margin:0; text-align:right; font-size:10px; line-height:1.3; }

#familia-aluno .family-bottom-nav {
  left: 50%;
  right: auto;
  bottom: 10px;
  transform: translateX(-50%);
  width: 540px;
  height: 56px;
  gap: 0;
  justify-content: space-around;
  border: 1px solid #dce6f2;
  border-radius: 16px;
  box-shadow: 0 9px 25px rgba(30,54,89,.12);
  overflow: visible;
}
#familia-aluno .family-bottom-nav button { width: 92px; color:#5f7698; font-size:9px; border-radius:12px; }
#familia-aluno .family-bottom-nav button.active { color:#5747e0; background:linear-gradient(180deg,#f6f3ff,#eeeaff); }
#familia-aluno .family-bottom-nav i { font-size:17px; }
#familia-aluno .family-bottom-nav b { top:2px; right:20px; }

@media (max-width: 1240px) {
  #familia-aluno .family-welcome-art { opacity:.62; }
  #familia-aluno .family-home-summary { grid-template-columns:58px minmax(260px,1.5fr) repeat(3,minmax(120px,.62fr)); }
  #familia-aluno .family-home-summary > button { display:none; }
  #familia-aluno .family-summary-metric { padding-left:10px; gap:7px; }
  #familia-aluno .family-home-grid { grid-template-columns:minmax(0,1.35fr) minmax(330px,.85fr); }
}

@media (max-width: 980px) {
  #familia-aluno .family-home-account .family-account-divider,
  #familia-aluno .family-guardian-selector { display:none; }
  #familia-aluno .family-welcome-art { display:none; }
  #familia-aluno .family-home-summary { grid-template-columns:58px 1fr repeat(3,120px); }
  #familia-aluno .family-summary-copy p { display:none; }
  #familia-aluno .family-home-shortcuts { grid-template-columns:repeat(2,1fr)!important; }
  #familia-aluno .family-home-grid { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  #familia-aluno.family-view { padding:0; }
  #familia-aluno .family-home-shell { border:0; border-radius:0; min-height:100dvh; }
  #familia-aluno .family-home-topbar { padding:0 14px; }
  #familia-aluno .family-brand > img { width:122px; }
  #familia-aluno .family-student-selector { width:auto; min-width:0; grid-template-columns:34px 14px; padding:5px 8px; }
  #familia-aluno .family-student-selector span { display:none; }
  #familia-aluno .family-home-content { padding:18px 12px 18px; }
  #familia-aluno .family-home-welcome { margin:-18px -12px 10px; padding:25px 18px 13px; min-height:100px; }
  #familia-aluno .family-home-welcome h1 { font-size:23px; }
  #familia-aluno .family-home-summary { display:grid; grid-template-columns:52px 1fr; padding:15px; min-height:auto; }
  #familia-aluno .family-summary-sun { width:52px; height:52px; }
  #familia-aluno .family-summary-metric { grid-column:1 / -1; border-left:0; border-top:1px solid rgba(255,255,255,.2); padding:10px 0 0; min-height:45px; }
  #familia-aluno .family-home-shortcuts { gap:8px; }
  #familia-aluno .family-home-shortcuts > button { min-height:61px; grid-template-columns:39px 1fr auto; padding:8px; gap:8px; }
  #familia-aluno .family-home-shortcuts i { width:39px; height:39px; border-radius:11px; }
  #familia-aluno .family-home-shortcuts strong { font-size:11px; }
  #familia-aluno .family-home-shortcuts small { font-size:8px; }
  #familia-aluno .family-home-day { padding:14px 12px 12px; }
  #familia-aluno .family-home-day .family-section-heading { align-items:flex-start; gap:10px; }
  #familia-aluno .family-home-day .family-section-heading > div { min-width:0; align-items:flex-start; }
  #familia-aluno .family-home-day .family-section-heading small { font-size:12px; line-height:1.45; }
  #familia-aluno .family-home-day .family-section-heading button { flex:0 0 92px; line-height:1.35; white-space:normal; }
  #familia-aluno .family-timeline { padding-left:55px; }
  #familia-aluno .family-timeline::before { left:38px; top:22px; bottom:22px; }
  #familia-aluno .family-timeline article {
    height:auto;
    min-height:108px;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    padding:12px 10px 12px 48px;
    overflow:hidden;
  }
  #familia-aluno .family-timeline article > time { left:-57px; top:50%; width:37px; transform:translateY(-50%); font-size:12px; }
  #familia-aluno .family-timeline article > i { left:-11px; top:50%; transform:translateY(-50%); }
  #familia-aluno .family-timeline article > i::before { left:-20px; }
  #familia-aluno .family-timeline article > div { align-self:center; overflow:hidden; }
  #familia-aluno .family-timeline article > div > b { font-size:9px; }
  #familia-aluno .family-timeline article strong { font-size:14px; line-height:1.3; overflow-wrap:anywhere; }
  #familia-aluno .family-timeline article p {
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font-size:12px;
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  #familia-aluno .family-timeline article > small,
  #familia-aluno .family-timeline article > em { display:none; }
  #familia-aluno .family-bottom-nav { position:fixed; width:calc(100% - 18px); bottom:8px; }
  #familia-aluno .family-home-footer { padding-bottom:55px; }
}

@media (max-width: 430px) {
  #familia-aluno .family-home-shortcuts { grid-template-columns:1fr!important; }
  #familia-aluno .family-home-welcome h1 { font-size:21px; }
}