/* ========================================================================
   ELENIA — Dashboard. Premium health-tracking app shell + components.
   Reuses the landing's palette & type. Responsive: sidebar -> bottom tabs.
   ======================================================================== */
:root{
  --verde:#166534; --verde-vivo:#4ADE80; --verde-suave:#DCFCE7; --verde-prof:#0F766E;
  --carbon:#111827; --fondo:#F4F7F4;
  --ink:#0c1410; --ink-2:#3a463f; --ink-3:#6b7a70;
  --line:#e6ebe7; --line-2:#d8e0da; --white:#fff;
  --verde-deep:#0c3d20;
  --grad-green:linear-gradient(135deg,#22c55e,#166534);
  --red:#dc2626; --amber:#d97706;
  --r:16px; --r-lg:22px; --r-sm:11px;
  --sh-sm:0 1px 2px rgba(16,40,24,.04),0 3px 10px rgba(16,40,24,.05);
  --sh:0 6px 16px rgba(16,40,24,.06),0 20px 44px rgba(12,61,32,.08);
  --sh-lg:0 12px 30px rgba(16,40,24,.10),0 40px 80px rgba(12,61,32,.14);
  --fd:"Schibsted Grotesk",system-ui,sans-serif;
  --fb:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --side-w:248px;
}
*{box-sizing:border-box;margin:0}
*{scrollbar-width:thin;scrollbar-color:rgba(107,122,112,.4) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(107,122,112,.32);border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:rgba(107,122,112,.55)}
::-webkit-scrollbar-corner{background:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:var(--fb);background:var(--fondo);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
input{font:inherit}
h1,h2,h3,h4{font-family:var(--fd);font-weight:800;letter-spacing:-.02em;line-height:1.1}
::selection{background:var(--verde-vivo);color:var(--verde-deep)}
img{display:block;max-width:100%}

/* generic icon styling */
.side svg,.topbar svg,.tab svg,.iconbtn svg,.navi svg,.moresheet svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* reusable line-icon (emoji-free) */
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;flex:0 0 auto}
.ic--lg{width:1.55em;height:1.55em}
.ql__i,.metric__i,.notif__i{color:var(--verde)}
.streak .ic{color:var(--amber)}
.doc span,.pay span,.intg span{color:var(--ink-2);font-size:1.35rem;display:grid;place-items:center}
.logtabs button{color:var(--ink-2)} .logtabs button.is-on{color:var(--verde)}
.moodrow .ic{color:var(--verde)}
.badge span{color:var(--verde)} .badge:not(.is-on) span{color:var(--ink-3)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--fd);font-weight:600;
  font-size:.92rem;padding:.7em 1.2em;border-radius:100px;white-space:nowrap;transition:.3s var(--ease)}
.btn--sm{padding:.55em .95em;font-size:.85rem}
.btn--block{width:100%}
.btn--solid{background:var(--verde);color:#fff;box-shadow:0 6px 16px rgba(22,101,52,.22)}
.btn--solid:hover{background:var(--verde-deep);transform:translateY(-1px)}
.btn--ghost{background:var(--white);color:var(--ink);border:1px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--verde);color:var(--verde)}
.btn--danger{background:#fff;color:var(--red);border:1px solid #f3c9c9}
.btn--danger:hover{background:var(--red);color:#fff}
.link{font-family:var(--fd);font-weight:600;font-size:.85rem;color:var(--verde)}
.link:hover{color:var(--verde-deep);text-decoration:underline}
.muted{color:var(--ink-3)} .mb{margin-bottom:14px} .mt{margin-top:10px}
.pill{font-family:var(--fd);font-weight:700;font-size:.72rem;padding:5px 11px;border-radius:100px;background:var(--fondo);color:var(--ink-2)}
.pill--green{background:var(--verde-suave);color:var(--verde)}
.eyebrow{font-family:var(--fd);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verde);margin-bottom:4px}

/* ============================================================ app shell */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}

.side{position:fixed;inset:0 auto 0 0;width:var(--side-w);background:var(--white);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:22px 16px;z-index:40}
.side__brand{display:flex;align-items:center;gap:.4em;min-height:44px;font-family:var(--fd);font-weight:800;font-size:1.5rem;letter-spacing:-.04em;color:var(--ink);padding:4px 10px 22px}
.side__brand .brand__mark{width:1.16em;height:1.16em;flex:none;color:var(--verde,#166534)}
.side__nav{display:flex;flex-direction:column;gap:3px;flex:1}
.navi{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-family:var(--fd);font-weight:600;
  font-size:.95rem;color:var(--ink-2);position:relative;transition:.2s var(--ease)}
.navi:hover{background:var(--fondo);color:var(--ink)}
.navi.is-active{background:var(--verde-suave);color:var(--verde)}
.navi.is-active svg{stroke:var(--verde)}
.navi__dot{position:absolute;right:12px;min-width:18px;height:18px;border-radius:100px;background:var(--verde);color:#fff;
  font-family:var(--fd);font-weight:700;font-size:.66rem;display:grid;place-items:center;padding:0 5px}
.side__cta{background:linear-gradient(160deg,var(--verde-deep),#0a2e18);color:#dff3e7;border-radius:var(--r);padding:16px;margin:8px 0 14px}
.side__cta p{font-size:.74rem;color:#9fc9b0;margin-bottom:2px}
.side__cta strong{font-family:var(--fd);display:block;font-size:1rem;margin-bottom:12px;color:#fff}
.side__me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;width:100%;transition:.2s}
.side__me:hover{background:var(--fondo)}
.side__me img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.side__me b{font-family:var(--fd);font-size:.9rem;display:block}
.side__me i{font-size:.76rem;color:var(--ink-3);font-style:normal}

.main{grid-column:2;display:flex;flex-direction:column;min-width:0;overflow-x:clip}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:14px clamp(16px,3vw,32px);
  background:rgba(244,247,244,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar__menu{display:none}
.topbar__title h1{font-size:1.5rem}
.topbar__title p{font-size:.82rem;color:var(--ink-3)}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line-2);
  border-radius:100px;padding:8px 16px;width:min(320px,34vw)}
.search svg{width:17px;height:17px;fill:none;stroke:var(--ink-3);stroke-width:2}
.search input{border:0;outline:0;background:none;width:100%;font-size:.9rem}
.iconbtn{position:relative;width:42px;height:42px;border-radius:12px;background:var(--white);border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink-2);transition:.2s}
.iconbtn:hover{border-color:var(--verde);color:var(--verde)}
.iconbtn--plus{background:var(--verde);color:#fff;border-color:var(--verde);box-shadow:0 6px 14px rgba(22,101,52,.25)}
.iconbtn--plus:hover{background:var(--verde-deep);color:#fff}
.iconbtn__badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:100px;background:var(--red);
  color:#fff;font-family:var(--fd);font-weight:700;font-size:.62rem;display:grid;place-items:center;padding:0 4px;border:2px solid var(--fondo)}
.topbar__av{width:42px;height:42px;border-radius:50%;object-fit:cover;cursor:pointer}

/* views */
.views{padding:clamp(16px,3vw,32px);flex:1}
.view{display:none;animation:fade .4s var(--ease)}
.view.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;grid-auto-flow:row dense;max-width:1320px;margin-inline:auto}
.span-2{grid-column:span 2}
.metrics,.measures,.fields,.reslist,.badges,.quicklog{min-width:0}

/* ---------------------------------------------------------------- card */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-sm)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card__head h2{font-size:1.4rem}
.card__head h3{font-size:1.08rem}
.card__head .link{flex:0 0 auto}

/* ring hero */
.card--ring{background:linear-gradient(135deg,#fff, #f3faf5)}
.streak{font-family:var(--fd);font-weight:700;font-size:.9rem;background:#fff5e6;color:var(--amber);padding:6px 12px;border-radius:100px}
.ringrow{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.ring{position:relative;width:170px;height:170px;flex:0 0 auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__t{fill:none;stroke:var(--verde-suave);stroke-width:13}
.ring__f{fill:none;stroke:var(--verde);stroke-width:13;stroke-linecap:round;stroke-dasharray:490;stroke-dashoffset:490;
  transition:stroke-dashoffset 1.2s var(--ease)}
.ring__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring__c b{font-family:var(--fd);font-weight:800;font-size:2.4rem;color:var(--verde);line-height:1}
.ring__c b::after{content:"%";font-size:.5em}
.ring__c span{font-size:.74rem;color:var(--ink-3)}
.ringstats{list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;min-width:160px}
.ringstats li{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line);padding-bottom:10px}
.ringstats li:last-child{border:0;padding:0}
.ringstats span{font-size:.86rem;color:var(--ink-3);width:92px}
.ringstats b{font-family:var(--fd);font-weight:700;font-size:1.05rem}
.ringstats i{font-style:normal;font-size:.8rem;margin-left:auto;color:var(--ink-3)}
.up{color:var(--verde)} .down{color:var(--verde)}

/* quick log */
.quicklog{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quicklog button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;border-radius:14px;
  background:var(--fondo);font-family:var(--fd);font-weight:600;font-size:.82rem;color:var(--ink-2);transition:.2s var(--ease)}
.quicklog button:hover{background:var(--verde-suave);color:var(--verde);transform:translateY(-2px)}
.ql__i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;background:#fff}

/* metrics */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 26px}
.metric{display:flex;align-items:center;gap:12px}
.metric__i{width:38px;height:38px;border-radius:11px;background:var(--fondo);display:grid;place-items:center;font-size:1.05rem;flex:0 0 auto}
.metric>div{flex:1}
.metric p{display:flex;justify-content:space-between;font-size:.86rem;color:var(--ink-2);margin-bottom:6px}
.metric p b{font-family:var(--fd);color:var(--ink)}
.bar{display:block;height:8px;border-radius:100px;background:var(--line);overflow:hidden}
.bar u{display:block;height:100%;width:0;border-radius:100px;background:var(--grad-green);transition:width 1s var(--ease)}

/* checklist */
.checklist{list-style:none;display:flex;flex-direction:column;gap:4px}
.checklist label{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:10px;cursor:pointer;font-size:.92rem;transition:.15s}
.checklist label:hover{background:var(--fondo)}
.checklist input{appearance:none;width:21px;height:21px;border:2px solid var(--line-2);border-radius:7px;flex:0 0 auto;transition:.2s;position:relative}
.checklist input:checked{background:var(--verde);border-color:var(--verde)}
.checklist input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.checklist input:checked+span{color:var(--ink-3);text-decoration:line-through}
.checklist span i{font-style:normal}

/* appointment card */
.appt{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.appt img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.appt b{font-family:var(--fd);font-weight:700;display:block}
.appt span{font-size:.8rem;color:var(--ink-3)}
.appt__when{font-family:var(--fd);font-weight:600;color:var(--verde);margin-top:4px}
.appt__act{display:flex;gap:8px}

/* specialist note */
.card--note .note{display:flex;gap:12px}
.note img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.note p{font-size:.92rem;color:var(--ink-2)}
.note i{display:block;margin-top:6px;color:var(--ink-3);font-size:.8rem}

/* goal */
.goal__bar{position:relative;height:14px;border-radius:100px;background:var(--verde-suave);margin:18px 0 30px}
.goal__bar u{display:block;height:100%;border-radius:100px;background:var(--grad-green)}
.goal__bar b{position:absolute;top:-26px;transform:translateX(-50%);font-family:var(--fd);font-weight:800;color:var(--verde);font-size:.9rem}
.goal__nums{display:flex;justify-content:space-between}
.goal__nums span{font-size:.8rem;color:var(--ink-3);display:flex;flex-direction:column;gap:3px}
.goal__nums b{font-family:var(--fd);font-size:1.15rem;color:var(--ink)}
.goal__nums span:last-child b{color:var(--verde)}

/* charts */
.chart{width:100%;height:200px}
.chart svg,.barchart svg{width:100%;height:100%;overflow:visible}
.barchart{height:200px}

/* badges */
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.badge{display:flex;align-items:center;gap:10px;padding:11px;border-radius:13px;background:var(--fondo);opacity:.5;filter:grayscale(1)}
.badge.is-on{opacity:1;filter:none;background:var(--verde-suave)}
.badge span{font-size:1.3rem}
.badge b{font-family:var(--fd);font-weight:600;font-size:.84rem}

/* measures */
.measures{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.measures>div{background:var(--fondo);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:3px}
.measures span{font-size:.78rem;color:var(--ink-3)}
.measures b{font-family:var(--fd);font-weight:800;font-size:1.3rem}
.measures i{font-style:normal;font-size:.78rem}

/* photos */
.photos{display:flex;gap:12px;flex-wrap:wrap}
.photos figure{width:120px}
.photos img{width:120px;height:150px;object-fit:cover;border-radius:14px}
.photos figcaption{text-align:center;font-size:.76rem;color:var(--ink-3);margin-top:6px}
.photos__add{width:120px;height:150px;border-radius:14px;border:2px dashed var(--line-2);color:var(--ink-3);
  font-size:1.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.photos__add span{font-size:.78rem}
.photos__add:hover{border-color:var(--verde);color:var(--verde)}

/* plan meals */
.seg{display:inline-flex;background:var(--fondo);border-radius:100px;padding:4px}
.seg button{font-family:var(--fd);font-weight:600;font-size:.84rem;padding:6px 16px;border-radius:100px;color:var(--ink-3)}
.seg button.is-on{background:#fff;color:var(--verde);box-shadow:var(--sh-sm)}
.meals{display:flex;flex-direction:column;gap:12px}
.meal{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:14px;border-radius:14px;background:var(--fondo)}
.meal__t{grid-row:1;font-family:var(--fd);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--verde)}
.meal b{grid-row:2;font-family:var(--fd);font-weight:700}
.meal i{grid-row:3;font-style:normal;font-size:.82rem;color:var(--ink-3)}
.meal .link{grid-row:1/4;grid-column:2;align-self:center}

.recipes{display:flex;flex-direction:column;gap:10px}
.recipe{display:flex;gap:11px;align-items:center;padding:8px;border-radius:13px;transition:.2s}
.recipe:hover{background:var(--fondo)}
.recipe img{width:54px;height:54px;border-radius:11px;object-fit:cover}
.recipe b{font-family:var(--fd);font-weight:600;font-size:.92rem;display:block}
.recipe i{font-style:normal;font-size:.8rem;color:var(--ink-3)}
.checklist--cart input:checked+span{color:var(--ink-3)}

/* ---------------------------------------------------------- chat view */
.chatwrap{display:grid;grid-template-columns:248px minmax(0,1fr) 320px;gap:18px;max-width:1320px;margin-inline:auto;height:calc(100vh - 150px);min-height:480px}
.chatcard{display:flex;flex-direction:column;padding:0;overflow:hidden}
.teamlist{padding:14px;display:flex;flex-direction:column;gap:4px;align-self:start}
.teamlist__h{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:4px 6px 10px}
.teamrow{display:flex;align-items:center;gap:11px;padding:10px;border-radius:13px;transition:.2s var(--ease);text-align:left;width:100%}
.teamrow:hover{background:var(--fondo)}
.teamrow img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.teamrow b{font-family:var(--fd);font-weight:700;font-size:.92rem;display:block;line-height:1.2}
.teamrow span{font-size:.78rem;color:var(--ink-3)}
.teamrow.is-on{background:var(--verde-suave)}
.teamrow.is-on span{color:var(--verde)}
.chat__top{display:flex;align-items:center;gap:11px;padding:14px 20px;border-bottom:1px solid var(--line)}
.chat__top img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.chat__top b{font-family:var(--fd);font-weight:700;display:block}
.chat__top .online{font-size:.78rem;color:var(--verde)}
.chat__top .btn{margin-left:auto}
.chat__body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--fondo)}
.msg{display:flex;gap:9px;max-width:78%}
.msg img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;align-self:flex-end}
.msg p{padding:10px 14px;border-radius:16px;font-size:.92rem;line-height:1.45}
.msg--in p{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
.msg--out{align-self:flex-end;flex-direction:row-reverse}
.msg--out p{background:var(--verde);color:#fff;border-bottom-right-radius:5px}
.day{align-self:center;font-size:.74rem;color:var(--ink-3);background:#fff;border:1px solid var(--line);padding:3px 12px;border-radius:100px;margin:4px 0}
.chat__input{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line)}
.chat__input input{flex:1;border:1px solid var(--line-2);border-radius:100px;padding:11px 18px;outline:0}
.chat__input input:focus{border-color:var(--verde)}
.iconbtn--send{background:var(--verde);color:#fff;border-color:var(--verde)}
.iconbtn--send svg{fill:#fff;stroke:#fff}
.notescard{overflow-y:auto}
.prof{text-align:center;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:16px}
.prof img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 10px}
.prof b{font-family:var(--fd);font-weight:700;font-size:1.05rem;display:block}
.prof span{font-size:.82rem;color:var(--ink-3)}
.prof__bio{font-size:.82rem;color:var(--ink-3);margin-top:10px}
.notescard h4{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.notes{list-style:none;display:flex;flex-direction:column;gap:12px}
.notes li{background:var(--fondo);border-radius:12px;padding:12px}
.notes b{font-family:var(--fd);font-weight:700;font-size:.84rem;color:var(--verde)}
.notes p{font-size:.86rem;color:var(--ink-2);margin-top:3px}

/* ---------------------------------------------------------- citas */
.apptlist{display:flex;flex-direction:column;gap:10px}
.apptrow{display:flex;align-items:center;gap:16px;padding:14px;border-radius:14px;background:var(--fondo)}
.apptrow__date{width:54px;height:54px;border-radius:13px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;justify-content:center;flex:0 0 auto}
.apptrow__date b{font-family:var(--fd);font-weight:800;font-size:1.3rem;color:var(--verde);line-height:1}
.apptrow__date span{font-size:.72rem;color:var(--ink-3);text-transform:uppercase}
.apptrow__info{flex:1}
.apptrow__info b{font-family:var(--fd);font-weight:700;display:block}
.apptrow__info span{font-size:.82rem;color:var(--ink-3)}
.apptrow__act{display:flex;gap:8px}
.apptlist--past .apptrow{opacity:.9}
.apptlist--past .apptrow .btn{flex:0 0 auto}

/* rich appointment cards */
.apptcard{background:var(--fondo);border-radius:16px;padding:14px;transition:opacity .3s}
.apptcard__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.apptcard__row .apptrow__info{min-width:140px}
.apptcard__row .apptrow__act{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.apptcard__meta{display:flex;align-items:center;gap:8px;margin-top:5px}
.apptcard__time{font-family:var(--fd);font-weight:600;font-size:.82rem;color:var(--ink-2)}
.badge-st{font-family:var(--fd);font-weight:700;font-size:.66rem;letter-spacing:.03em;padding:3px 9px;border-radius:100px}
.badge-st--ok{background:var(--verde-suave);color:var(--verde)}
.badge-st--alt{background:#fff3e6;color:var(--amber)}
.badge-st--off{background:#f6dcdc;color:var(--red)}
.apptcard.is-cancelled{opacity:.62}
.apptcard.is-cancelled .apptrow__info>b{text-decoration:line-through}
.apptcard.is-cancelled .apptrow__date b{color:var(--ink-3)}
.apptnotes{margin-top:12px;border-top:1px solid var(--line-2);padding-top:11px}
.apptnotes summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--fd);font-weight:600;font-size:.86rem;color:var(--ink-2);list-style:none}
.apptnotes summary::-webkit-details-marker{display:none}
.apptnotes summary .ic{color:var(--verde)}
.apptnotes summary i{color:var(--ink-3);font-style:normal}
.preplist{list-style:none;margin:11px 0;display:flex;flex-direction:column;gap:7px}
.preplist li{position:relative;padding-left:16px;font-size:.88rem;color:var(--ink-2)}
.preplist li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--verde)}
.prepform{display:flex;gap:8px;margin-bottom:10px}
.prepform input{flex:1;border:1px solid var(--line-2);border-radius:10px;padding:9px 13px;outline:0;font-size:.88rem;background:#fff}
.prepform input:focus{border-color:var(--verde)}
.apptnotes .link{display:inline-flex;align-items:center;gap:6px}
.empty{text-align:center;padding:26px 16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.sched__days button:disabled,.sched__slots button:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed;background:var(--fondo)}
.sched__days button:disabled:hover,.sched__slots button:disabled:hover{background:var(--fondo);color:var(--ink-2)}
.schednote{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--ink-3);margin-bottom:14px}
.schednote .ic{color:var(--amber)}

/* homework */
.hwfoot{display:flex;align-items:center;gap:12px;margin-top:12px}
.hwfoot .bar{flex:1}
.hwfoot span{font-family:var(--fd);font-weight:700;font-size:.8rem;color:var(--verde);flex:0 0 auto}

/* modal extras */
.fldlabel{font-family:var(--fd);font-weight:600;font-size:.8rem;color:var(--ink-3);margin:14px 0 9px}
.fldlabel i{font-style:normal}
.policy{display:flex;gap:9px;align-items:flex-start;background:#fff7e9;border-radius:12px;padding:12px 13px;font-size:.84rem;color:#8a6516;margin:4px 0 4px;line-height:1.45}
.policy .ic{color:var(--amber);flex:0 0 auto;margin-top:1px}
.modalrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.modalrow .btn{justify-content:center}
.modal__card--lg{width:min(560px,100%)}
.modal__card--lg .logbody{max-height:68vh;overflow-y:auto}
.sumsec{padding:15px 0;border-bottom:1px solid var(--line)}
.sumsec:first-child{padding-top:6px}
.sumsec:last-child{border:0}
.sumsec h4{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.sumsec p{font-size:.92rem;color:var(--ink-2);line-height:1.5}
.sumsec .doc{margin-top:8px}
.sumsec .hwlist{margin-top:2px}
.sched__days,.sched__slots{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.sched__days button,.sched__slots button{font-family:var(--fd);font-weight:600;font-size:.86rem;padding:9px 15px;border-radius:11px;
  background:var(--fondo);color:var(--ink-2);transition:.2s}
.sched__days button:hover,.sched__slots button:hover{background:var(--verde-suave);color:var(--verde)}
.sched__days button.is-on,.sched__slots button.is-on{background:var(--verde);color:#fff}

/* ---------------------------------------------------------- recursos */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:0 auto 20px;max-width:1320px}
.chip{font-family:var(--fd);font-weight:600;font-size:.86rem;padding:8px 16px;border-radius:100px;background:var(--white);
  border:1px solid var(--line-2);color:var(--ink-2);transition:.2s}
.chip:hover{border-color:var(--verde);color:var(--verde)}
.chip.is-on{background:var(--verde);color:#fff;border-color:var(--verde)}
.reslist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1320px;margin-inline:auto}
.res{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--white);border:1px solid var(--line);
  box-shadow:var(--sh-sm);transition:.35s var(--ease)}
.res:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.res__img{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative}
.res__tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--verde);font-family:var(--fd);
  font-weight:700;font-size:.7rem;padding:4px 10px;border-radius:100px}
.res__tag--v{background:var(--verde);color:#fff}
.res b{font-family:var(--fd);font-weight:700;font-size:1rem;display:block;padding:14px 16px 2px}
.res i{font-style:normal;font-size:.8rem;color:var(--ink-3);display:block;padding:0 16px 16px}

/* ---------------------------------------------------------- registros */
.rectable{width:100%;border-collapse:collapse}
.rectable td{padding:11px 4px;border-bottom:1px solid var(--line);font-size:.92rem}
.rectable tr:last-child td{border:0}
.rectable td:first-child{color:var(--ink-3)}
.rectable td:nth-child(2) b{font-family:var(--fd)}
.rectable td:last-child{text-align:right}
.docs{display:flex;flex-direction:column;gap:10px}
.doc{display:flex;align-items:center;gap:11px;padding:11px;border-radius:12px;background:var(--fondo)}
.doc span{font-size:1.3rem}
.doc b{font-family:var(--fd);font-weight:600;font-size:.9rem;display:block}
.doc i{font-style:normal;font-size:.78rem;color:var(--ink-3)}
.upload{padding:13px;border-radius:12px;border:2px dashed var(--line-2);color:var(--ink-3);font-family:var(--fd);font-weight:600;font-size:.86rem}
.upload:hover{border-color:var(--verde);color:var(--verde)}

/* ---------------------------------------------------------- cuenta */
.acct{max-width:940px;margin-inline:auto}
.acct__tabs{display:flex;gap:4px;background:var(--white);border:1px solid var(--line);border-radius:100px;padding:5px;margin-bottom:20px;overflow-x:auto}
.acct__tabs button{font-family:var(--fd);font-weight:600;font-size:.86rem;padding:8px 16px;border-radius:100px;color:var(--ink-3);white-space:nowrap}
.acct__tabs button.is-on{background:var(--verde);color:#fff}
.acct__panel{display:none;flex-direction:column;gap:16px}
.acct__panel.is-on{display:flex;animation:fade .3s var(--ease)}
.profedit{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.profedit img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.profedit b{font-family:var(--fd);font-weight:700;font-size:1.1rem;display:block}
.profedit span{font-size:.84rem;color:var(--ink-3);display:block;margin-bottom:4px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:var(--ink-3);font-weight:500}
.fields input{border:1px solid var(--line-2);border-radius:11px;padding:11px 14px;outline:0;color:var(--ink);font-weight:500}
.fields input:focus{border-color:var(--verde)}
.subhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.subhead h3{font-size:1.4rem;margin:2px 0}
.subact{display:flex;gap:8px;flex-wrap:wrap}
.pay{display:flex;align-items:center;gap:11px}
.pay span{font-size:1.5rem}
.pay b{font-family:var(--fd);font-weight:600;display:block}
.pay i{font-style:normal;font-size:.8rem;color:var(--ink-3)}
.integrations{display:flex;flex-direction:column;gap:10px}
.intg{display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px;background:var(--fondo)}
.intg span{font-size:1.4rem}
.intg>div{flex:1}
.intg b{font-family:var(--fd);font-weight:600;display:block}
.intg i{font-style:normal;font-size:.8rem}
.intg .online{color:var(--verde)}
.intg .intg--wa{color:#25D366}
.intg .btn{margin-left:auto}
.toggles{display:flex;flex-direction:column}
.tgl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.92rem;cursor:pointer}
.tgl:last-child{border:0}
.tgl input{display:none}
.tgl i{width:42px;height:24px;border-radius:100px;background:var(--line-2);position:relative;transition:.25s;flex:0 0 auto}
.tgl i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.25s var(--ease)}
.tgl input:checked+i{background:var(--verde)}
.tgl input:checked+i::after{transform:translateX(18px)}

/* ============================================================ bottom tabs */
.tabbar{display:none}

/* ============================================================ modal/panels */
.scrim{position:fixed;inset:0;background:rgba(8,20,12,.42);backdrop-filter:blur(2px);z-index:50;animation:fade .25s}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px}
.modal__card{background:#fff;border-radius:22px;width:min(440px,100%);box-shadow:var(--sh-lg);overflow:hidden;animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0}
.modal__head h3{font-size:1.2rem}
.logtabs{display:flex;gap:6px;padding:14px 20px;flex-wrap:wrap}
.logtabs button{width:44px;height:44px;border-radius:13px;background:var(--fondo);font-size:1.2rem;transition:.2s;display:grid;place-items:center}
.logtabs button.is-on{background:var(--verde-suave);box-shadow:inset 0 0 0 2px var(--verde)}
.logbody{padding:4px 20px 22px}
.logbody h4{font-size:1.05rem;margin-bottom:4px}
.logbody .lbsub{font-size:.85rem;color:var(--ink-3);margin-bottom:16px}
.waterrow{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0 20px}
.waterrow b{font-family:var(--fd);font-weight:800;font-size:2.2rem;min-width:130px;text-align:center}
.round{width:48px;height:48px;border-radius:50%;background:var(--verde-suave);color:var(--verde);font-size:1.5rem;display:grid;place-items:center}
.round:hover{background:var(--verde);color:#fff}
.biginput{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 18px}
.biginput input{width:140px;text-align:center;font-family:var(--fd);font-weight:800;font-size:2.4rem;border:0;border-bottom:2px solid var(--line-2);outline:0;color:var(--verde)}
.biginput input:focus{border-color:var(--verde)}
.biginput span{font-family:var(--fd);font-weight:600;color:var(--ink-3)}
.moodrow{display:flex;justify-content:space-between;margin:6px 0 20px}
.moodrow button{font-size:2rem;width:54px;height:54px;border-radius:14px;transition:.2s}
.moodrow button:hover,.moodrow button.is-on{background:var(--verde-suave);transform:scale(1.08)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 20px}
.chiprow button{font-family:var(--fd);font-weight:600;font-size:.86rem;padding:9px 14px;border-radius:11px;background:var(--fondo);color:var(--ink-2)}
.chiprow button.is-on{background:var(--verde);color:#fff}

/* notifications panel */
.notif{position:fixed;top:70px;right:clamp(16px,3vw,32px);width:min(360px,92vw);background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--sh-lg);z-index:60;overflow:hidden;animation:pop .3s var(--ease)}
.notif__head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.notif__head h3{font-size:1.05rem}
.notif__list{list-style:none;max-height:60vh;overflow-y:auto}
.notif__list li{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.notif__list li.is-unread{background:#f3faf5}
.notif__i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:1.05rem;flex:0 0 auto;background:var(--fondo)}
.notif__list b{font-family:var(--fd);font-weight:600;font-size:.9rem}
.notif__list p{font-size:.84rem;color:var(--ink-2)}
.notif__list i{font-style:normal;font-size:.74rem;color:var(--ink-3)}
.ql--n{background:#eafce9} .ql--w{background:#e6f4ff} .ql--a{background:#fff1e6} .ql--s{background:#eef0ff} .ql--p{background:#fef3e6} .ql--m{background:#fdeef6}

/* más sheet */
.moresheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-radius:22px 22px 0 0;box-shadow:var(--sh-lg);
  padding:10px 14px 26px;display:flex;flex-direction:column;gap:3px;animation:slideup .3s var(--ease)}
@keyframes slideup{from{transform:translateY(100%)}}
.moresheet__grip{width:42px;height:4px;border-radius:4px;background:var(--line-2);margin:6px auto 12px}

/* toast */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--carbon);color:#fff;font-family:var(--fd);
  font-weight:600;font-size:.9rem;padding:12px 20px;border-radius:100px;box-shadow:var(--sh-lg);z-index:80;animation:pop .3s var(--ease)}

/* ============================================================ responsive */
@media (max-width:1000px){
  .app{grid-template-columns:1fr}
  .side{transform:translateX(-100%);transition:transform .35s var(--ease);box-shadow:var(--sh-lg);z-index:55}
  .side.is-open{transform:none}
  .side.is-open ~ .tabbar{display:none}
  .main{grid-column:1}
  .topbar__menu{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2)}
  .search{display:none}
  .chatwrap{grid-template-columns:1fr;height:auto}
  .notescard{display:none}
  .teamlist{flex-direction:row;overflow-x:auto;gap:8px;align-self:auto}
  .teamlist__h{display:none}
  .teamrow{flex:0 0 auto;width:auto}
  .reslist{grid-template-columns:repeat(2,1fr)}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;align-items:center}
  .tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--fd);font-weight:600;font-size:.66rem;color:var(--ink-3);padding:4px 10px;flex:1}
  .tab.is-active{color:var(--verde)}
  .tab.is-active svg{stroke:var(--verde)}
  .tab--fab{flex:0 0 auto;background:var(--verde);color:#fff;width:52px;height:52px;border-radius:50%;justify-content:center;
    box-shadow:0 8px 18px rgba(22,101,52,.32);margin-top:-22px}
  .tab--fab svg{stroke:#fff;width:24px;height:24px}
  .views{padding-bottom:96px}
}
@media (max-width:680px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .span-2{grid-column:span 1}
  .metrics{grid-template-columns:1fr}
  .measures{grid-template-columns:repeat(2,1fr)}
  .reslist{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .quicklog{grid-template-columns:repeat(3,1fr)}
  .topbar__av{display:none}
  .ringrow{justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}