/* ============================================================
   EDUCCA — camada da página sobre o design system da XP
   (css/xp-shell.css + css/xp.css, copiados de xpsistemas.com.br)
   Só tons e componentes próprios do Educca ficam aqui.
   ============================================================ */
:root{
  --edu:#2d6a4f;       /* verde amazônia — cor do sistema */
  --edu-ink:#1f5a40;
  --edu-50:#e8f4ec;
  --edu-forest:#1b4332; /* verde floresta */
  --edu-mint:#74c69d;
}
.tone-edu{ --tone:var(--edu); --tone-50:var(--edu-50); --tone-ink:var(--edu-ink); --hl:#ffd166; }
.hero.tone-edu::before{ background:radial-gradient(closest-side, rgba(255,209,102,.32), transparent); }
.hero.tone-edu{ --hero-c:#2d6a4f; }

/* marca: XP + nome do produto */
.xs-brand-name small{ display:block; font:500 11px/1 var(--xs-body); letter-spacing:.02em; opacity:.7; margin-top:3px; }
.xs-brand-name{ line-height:1; }

/* ---- mocks ---- */
.face{ display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:center; }
.face-cam{ width:76px; height:76px; border-radius:16px; background:linear-gradient(160deg,#2d6a4f,#1b4332); position:relative; display:grid; place-items:center; }
.face-cam::before{ content:""; position:absolute; inset:10px; border:2px solid #74c69d; border-radius:12px;
  clip-path:polygon(0 0,30% 0,30% 8%,8% 8%,8% 30%,0 30%,0 70%,8% 70%,8% 92%,30% 92%,30% 100%,70% 100%,70% 92%,92% 92%,92% 70%,100% 70%,100% 30%,92% 30%,92% 8%,70% 8%,70% 0,100% 0,100% 100%,0 100%); }
.face-cam svg{ width:34px; height:34px; color:#d8f3dc; }
.face-scan{ position:absolute; left:12px; right:12px; height:2px; background:#74c69d; box-shadow:0 0 10px #74c69d; top:16px; animation:scan 2.4s var(--ease) infinite alternate; }
@keyframes scan{ to{ top:58px; } }
.wa-row{ display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border-radius:10px; background:#e9f8ef; color:#0b6b3a; font:500 12px/1.35 var(--body); }
.wa-row i{ width:26px; height:26px; flex:none; border-radius:50%; background:#0f9d58; display:grid; place-items:center; }
.wa-row b{ color:#0b5a31; }

.toggle{ width:34px; height:20px; border-radius:999px; background:var(--line); position:relative; flex:none; }
.toggle::after{ content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.toggle.on{ background:var(--edu); }
.toggle.on::after{ left:17px; }
.mock-row .who{ display:flex; align-items:center; gap:10px; }
.mock-row .av{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--edu-50); color:var(--edu-ink); font:600 10.5px/1 var(--display); }

.meter{ height:10px; border-radius:999px; background:var(--line-2); overflow:hidden; margin-top:10px; position:relative; }
.meter i{ position:absolute; inset:0 auto 0 0; border-radius:999px; background:linear-gradient(90deg,#f59e0b,#f97316); }
.meter::after{ content:""; position:absolute; top:-3px; bottom:-3px; left:75%; width:2px; background:var(--ink); opacity:.5; }
.alert-row{ display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:10px 12px; border-radius:10px; background:#fff7e6; color:#92400e; font:500 12px/1.4 var(--body); }

.panic-ring{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:#dc2626; color:#fff; font:700 12px/1 var(--display); letter-spacing:.06em;
  box-shadow:0 0 0 8px rgba(220,38,38,.18), 0 0 0 16px rgba(220,38,38,.08); animation:ring 1.6s ease-in-out infinite; }
@keyframes ring{ 50%{ box-shadow:0 0 0 12px rgba(220,38,38,.22), 0 0 0 24px rgba(220,38,38,.06); } }
.flow{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.flow span{ font:500 10.5px/1 var(--mono); padding:6px 8px; border-radius:6px; background:rgba(255,255,255,.06); color:#a7b2c7; }
.flow span.on{ background:#dc2626; color:#fff; }

/* Meu Cantinho */
.cantinho{ border-radius:var(--r-xl); padding:clamp(24px,3vw,36px); background:linear-gradient(160deg,#1b4332,#0d2219); color:#d8f3dc; position:relative; overflow:hidden; }
.cantinho::after{ content:""; position:absolute; right:-120px; top:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(closest-side, rgba(116,198,157,.35), transparent); }
.cantinho h3{ color:#fff; }
.moods{ display:flex; gap:8px; margin-top:16px; }
.moods span{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); }
.moods span.on{ background:rgba(116,198,157,.25); border-color:#74c69d; }
.cantinho-list{ display:grid; gap:10px; margin-top:18px; position:relative; z-index:1; }
.cantinho-list div{ padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); font-size:14px; line-height:1.45; color:#b7e4c7; }
.cantinho-list b{ display:block; color:#fff; font:600 14.5px/1.3 var(--display); }
.lock-row{ display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:9px; background:rgba(116,198,157,.14); color:#b7e4c7; font:500 11.5px/1.3 var(--mono); margin-top:14px; position:relative; z-index:1; }

.soon-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.soon-tags span{ font:500 11.5px/1 var(--mono); padding:7px 9px; border-radius:6px; border:1px dashed #b9c3d3; color:var(--ink-3); }

.file-row{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line-2); }
.file-row:first-of-type{ border-top:0; }
.file-row .ext{ font:700 10.5px/1 var(--mono); padding:6px 7px; border-radius:6px; background:var(--edu-50); color:var(--edu-ink); min-width:44px; text-align:center; }
.file-row small{ display:block; color:var(--ink-3); font-size:11.5px; margin-top:2px; }

@media (prefers-reduced-motion:reduce){ .face-scan,.panic-ring{ animation:none; } }

/* ============================================================
   APLICATIVO — telas desenhadas em HTML/CSS
   Cores do EduccaMobile (constants/Colors.ts)
   ============================================================ */
.app-sec{ --ap:#006b3c; --ap-dk:#004d2a; --ap-gold:#f5a623; --ap-bg:#f7f9f5; --ap-line:#e0e8e2; --ap-txt:#1a2e1f; }
.phones{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); justify-items:center; }
.phone-fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:18px; max-width:290px; }
.phone-fig figcaption{ text-align:center; font-size:14px; line-height:1.5; color:var(--ink-3); }
.phone-fig figcaption b{ display:block; font:600 16px/1.3 var(--display); color:var(--ink); margin-bottom:4px; }
.phone{ width:256px; height:530px; border-radius:40px; padding:9px; background:#0b1220;
  box-shadow:0 30px 60px rgba(11,18,32,.22), inset 0 0 0 1px rgba(255,255,255,.08); position:relative; }
.phone::before{ content:""; position:absolute; top:17px; left:50%; width:74px; height:20px; margin-left:-37px; border-radius:999px; background:#0b1220; z-index:3; }
.scr{ height:100%; border-radius:32px; overflow:hidden; background:var(--ap-bg); display:flex; flex-direction:column; font:400 11px/1.35 var(--body); color:var(--ap-txt); position:relative; }
.scr b{ color:inherit; }
.scr small{ display:block; font-size:9.5px; color:#6b7c70; }
.ap-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ap-top{ background:linear-gradient(160deg,var(--ap),var(--ap-dk)); color:#fff; padding:44px 16px 18px; border-radius:0 0 22px 22px; }
.ap-top small{ color:rgba(255,255,255,.75); }
.ap-top b{ display:block; color:#fff; font:700 16px/1.2 var(--display); }
.ap-top i{ display:block; font-style:normal; font-size:10px; color:var(--ap-gold); margin-top:3px; }
.ap-top--sm{ padding:44px 16px 14px; }
.ap-top--sm b{ font-size:14px; }
.ap-sos{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:#dc2626; font-size:17px; box-shadow:0 6px 14px rgba(220,38,38,.4); }
.ap-body{ flex:1; padding:12px 12px 0; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.ap-stats,.ap-sum{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.ap-stats div,.ap-sum div{ background:#fff; border:1px solid var(--ap-line); border-radius:12px; padding:8px; text-align:center; }
.ap-stats b,.ap-sum b{ display:block; font:700 17px/1.1 var(--display); color:var(--ap); }
.ap-sum .p{ border-color:#16a34a; } .ap-sum .p b{ color:#16a34a; }
.ap-sum .f{ border-color:#dc2626; } .ap-sum .f b{ color:#dc2626; }
.ap-warn{ background:#fff7e6; border:1px solid #fde3b0; border-radius:12px; padding:8px 10px; }
.ap-warn b{ display:block; color:#92400e; font-size:11px; }
.ap-h{ font:700 12px/1 var(--display); color:var(--ap-txt); margin-top:4px; }
.ap-card{ background:#fff; border:1px solid var(--ap-line); border-radius:12px; padding:9px 10px; display:grid; gap:4px; }
.ap-card b{ font:700 12px/1.2 var(--display); }
.ap-chip{ font:600 9px/1 var(--body); padding:4px 7px; border-radius:999px; background:#fff4de; color:#b26b00; }
.ap-act{ font:600 9.5px/1 var(--body); padding:5px 8px; border-radius:8px; background:var(--ap); color:#fff; }
.ap-tabs{ display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border-top:1px solid var(--ap-line); padding:7px 4px 14px; text-align:center; font-size:14px; }
.ap-tabs span{ opacity:.45; } .ap-tabs span.on{ opacity:1; }
.ap-tabs small{ font:600 8.5px/1.2 var(--body); color:var(--ap-txt); margin-top:2px; }
.ap-tabs .on small{ color:var(--ap); }
.ap-btns{ gap:6px; }
.ap-btns span{ flex:1; text-align:center; font:600 9.5px/1 var(--body); padding:8px 4px; border-radius:10px; background:#e8f4ec; color:var(--ap); }
.ap-btns span.r{ background:#fdecec; color:#b91c1c; }
.ap-al{ display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid var(--ap-line); border-left:3px solid #16a34a; border-radius:10px; padding:7px 9px; font-weight:600; }
.ap-al.off{ border-left-color:#dc2626; background:#fffafa; }
.ap-al em{ font:700 9.5px/1 var(--body); font-style:normal; padding:5px 7px; border-radius:999px; }
.ap-al em.p{ background:#dcfce7; color:#15803d; } .ap-al em.f{ background:#fee2e2; color:#b91c1c; }
.ap-save{ margin-top:auto; margin-bottom:14px; text-align:center; font:700 11px/1 var(--display); color:#fff; background:var(--ap); padding:12px; border-radius:12px; box-shadow:0 8px 16px rgba(0,107,60,.25); }
.scr--sos{ background:linear-gradient(180deg,#3b0a0a,#1c0505); color:#fecaca; }
.ap-top--sos{ background:transparent; padding:46px 16px 6px; text-align:center; }
.ap-top--sos b{ font-size:14px; }
.sos-body{ flex:1; display:flex; flex-direction:column; align-items:center; gap:18px; padding:8px 14px 16px; }
.sos-btn{ position:relative; width:170px; height:170px; display:grid; place-items:center; }
.sos-btn svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.sos-prog{ stroke-dasharray:503; stroke-dashoffset:503; animation:sosHold 2.6s var(--ease) infinite; }
@keyframes sosHold{ 0%{ stroke-dashoffset:503; } 70%,100%{ stroke-dashoffset:0; } }
.sos-btn span{ width:128px; height:128px; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(circle at 35% 30%,#ef4444,#b91c1c 70%);
  color:#fff; font:800 17px/1 var(--display); letter-spacing:.06em; box-shadow:0 0 0 10px rgba(239,68,68,.15), 0 16px 30px rgba(0,0,0,.4); }
.sos-btn span small{ color:rgba(255,255,255,.8); font:500 9.5px/1 var(--body); letter-spacing:0; margin-top:6px; }
.sos-ways{ display:grid; gap:7px; width:100%; }
.sos-ways div{ display:flex; gap:9px; align-items:center; padding:8px 10px; border-radius:11px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-size:9.5px; color:#fca5a5; }
.sos-ways i{ font-style:normal; font-size:15px; }
.sos-ways b{ display:block; color:#fff; font:600 11px/1.25 var(--display); }
@media (max-width:980px){
  .phones{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:20px; padding:4px 4px 24px; margin:0 calc(-1 * var(--gutter)); padding-left:var(--gutter); padding-right:var(--gutter); justify-content:flex-start; }
  .phone-fig{ flex:0 0 auto; scroll-snap-align:center; }
}
@media (prefers-reduced-motion:reduce){ .sos-prog{ animation:none; stroke-dashoffset:120; } }