/* =====================================================================
   ClassAssist · Sistema de diseño estilo iOS (portal.css)
   Listas agrupadas, títulos grandes, barra de pestañas translúcida,
   colores del sistema y modo claro/oscuro. Móvil = pestañas abajo;
   escritorio = barra lateral.
   ===================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../vendor/inter/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------ TOKENS · CLARO ------------------------------ */
:root {
  --ca-bg:#f2f2f7; --ca-bg-elev:#ffffff;
  --ca-group:#ffffff; --ca-group-2:#efeff4; --ca-field:#efeff4;
  --ca-sep:rgba(60,60,67,.13); --ca-sep-strong:rgba(60,60,67,.26);
  --ca-ink:#000000; --ca-ink-2:#3c3c43; --ca-lab:#6d6d72; --ca-lab-2:#a0a0a6;
  --ca-blue:#007aff; --ca-green:#34c759; --ca-red:#ff3b30; --ca-orange:#ff9500; --ca-purple:#af52de; --ca-teal:#30b0c7; --ca-yellow:#ffcc00;
  --ca-bar:rgba(249,249,249,.82); --ca-grad:linear-gradient(135deg,#0a84ff,#32ade6);
  --ca-shadow:0 10px 30px rgba(20,30,60,.08); --ca-shadow-lg:0 22px 50px rgba(20,30,60,.16);
  --ca-ring-focus:0 0 0 4px rgba(0,122,255,.28);
  --ca-r-row:16px; --ca-r-card:20px; --ca-r-tile:12px;
  --sidebar-width:264px; --tabbar-h:84px;
  --ca-ease:cubic-bezier(.25,.1,.25,1); --ca-spring:cubic-bezier(.34,1.4,.5,1);
  /* semánticos / alias que usa el JS */
  --ca-present:var(--ca-green); --ca-leave:var(--ca-orange); --ca-absent:var(--ca-red); --ca-accent:var(--ca-blue);
  --ca-present-soft:color-mix(in srgb,var(--ca-green) 16%,transparent);
  --ca-leave-soft:color-mix(in srgb,var(--ca-orange) 16%,transparent);
  --ca-absent-soft:color-mix(in srgb,var(--ca-red) 15%,transparent);
  --ca-blue-soft:color-mix(in srgb,var(--ca-blue) 14%,transparent);
}
/* ------------------------------ TOKENS · OSCURO ------------------------------ */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ca-bg:#000000; --ca-bg-elev:#1c1c1e;
  --ca-group:#1c1c1e; --ca-group-2:#2c2c2e; --ca-field:#2c2c2e;
  --ca-sep:rgba(84,84,88,.55); --ca-sep-strong:rgba(84,84,88,.8);
  --ca-ink:#ffffff; --ca-ink-2:#ebebf5; --ca-lab:#98989f; --ca-lab-2:#5a5a60;
  --ca-blue:#0a84ff; --ca-green:#30d158; --ca-red:#ff453a; --ca-orange:#ff9f0a; --ca-purple:#bf5af2; --ca-teal:#40c8e0; --ca-yellow:#ffd60a;
  --ca-bar:rgba(30,30,32,.74); --ca-grad:linear-gradient(135deg,#0a84ff,#41b8f4);
  --ca-shadow:0 10px 30px rgba(0,0,0,.5); --ca-shadow-lg:0 22px 50px rgba(0,0,0,.6);
  --ca-ring-focus:0 0 0 4px rgba(10,132,255,.4);
}}
:root[data-theme="dark"]{
  --ca-bg:#000000; --ca-bg-elev:#1c1c1e; --ca-group:#1c1c1e; --ca-group-2:#2c2c2e; --ca-field:#2c2c2e;
  --ca-sep:rgba(84,84,88,.55); --ca-sep-strong:rgba(84,84,88,.8);
  --ca-ink:#ffffff; --ca-ink-2:#ebebf5; --ca-lab:#98989f; --ca-lab-2:#5a5a60;
  --ca-blue:#0a84ff; --ca-green:#30d158; --ca-red:#ff453a; --ca-orange:#ff9f0a; --ca-purple:#bf5af2; --ca-teal:#40c8e0; --ca-yellow:#ffd60a;
  --ca-bar:rgba(30,30,32,.74); --ca-grad:linear-gradient(135deg,#0a84ff,#41b8f4);
  --ca-shadow:0 10px 30px rgba(0,0,0,.5); --ca-shadow-lg:0 22px 50px rgba(0,0,0,.6);
  --ca-ring-focus:0 0 0 4px rgba(10,132,255,.4);
}

/* ------------------------------ BASE ------------------------------ */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Inter",sans-serif;
  background:var(--ca-bg); color:var(--ca-ink); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em; line-height:1.47; font-size:16px;
  transition:background-color .3s ease,color .3s ease;
}
:where(a,button,input,select,textarea):focus-visible{outline:none;box-shadow:var(--ca-ring-focus);border-radius:10px}
a{color:var(--ca-blue);text-decoration:none}
.text-muted{color:var(--ca-lab)!important}
.tnum{font-variant-numeric:tabular-nums}

/* ------------------------------ BARRA LATERAL (ESCRITORIO) ------------------------------ */
.sidebar{
  width:var(--sidebar-width);height:100vh;position:fixed;top:0;left:0;z-index:1000;
  background:color-mix(in srgb,var(--ca-bg-elev) 70%,var(--ca-bg));
  backdrop-filter:blur(20px);border-right:1px solid var(--ca-sep);
  display:flex;flex-direction:column;padding:22px 12px 14px;gap:2px;
}
.sidebar-header{display:flex;align-items:center;gap:11px;padding:6px 12px 16px}
.brand-icon{width:34px;height:34px;border-radius:10px;background:var(--ca-grad);display:grid;place-items:center;color:#fff;flex:0 0 auto;box-shadow:0 6px 14px rgba(10,132,255,.32)}
.brand-icon i{font-size:1.1rem}
.brand-text{color:var(--ca-ink);font-weight:800;font-size:1.2rem;margin:0;letter-spacing:-.02em}
.nav-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.nav-item{margin:0}
.nav-sep{font-size:.68rem;font-weight:700;color:var(--ca-lab);text-transform:uppercase;letter-spacing:.05em;padding:16px 12px 6px}
.nav-link-custom{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--ca-ink);text-decoration:none;font-size:.94rem;font-weight:600;transition:background var(--ca-ease) .18s}
.nav-link-custom i{font-size:1.15rem;color:var(--ca-lab);width:22px;text-align:center;transition:color .18s}
.nav-link-custom .nav-badge{margin-left:auto;background:var(--ca-red);color:#fff;font-size:.66rem;font-weight:800;min-width:19px;height:19px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.nav-link-custom:hover{background:var(--ca-group-2)}
.nav-link-custom.active{background:var(--ca-blue);color:#fff}
.nav-link-custom.active i{color:#fff}
.sidebar .sb-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px 12px}
.sidebar .sb-user .avatar{width:34px;height:34px;font-size:.78rem;border-radius:50%}
.sidebar .sb-user b{font-size:.85rem;font-weight:700;color:var(--ca-ink)}
.sidebar .sb-user span{font-size:.72rem;color:var(--ca-lab);display:block}

/* ------------------------------ BARRA DE PESTAÑAS (MÓVIL) ------------------------------ */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;width:100%;height:var(--tabbar-h);z-index:2000;
  background:var(--ca-bar);backdrop-filter:saturate(180%) blur(22px);border-top:1px solid var(--ca-sep);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-inner{display:flex;justify-content:space-around;align-items:flex-start;height:100%;padding:9px 4px 0}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--ca-lab);flex:1;font-size:.63rem;font-weight:600;position:relative;transition:color .18s}
.bottom-nav-item i{font-size:1.5rem}
.bottom-nav-item.active{color:var(--ca-blue)}
.bottom-nav-item .nav-badge{position:absolute;top:-2px;right:26%;min-width:8px;height:8px;background:var(--ca-red);border-radius:999px;border:2px solid var(--ca-bar)}

/* ------------------------------ CONTENIDO + TÍTULO GRANDE ------------------------------ */
.main-content{margin-left:var(--sidebar-width);min-height:100vh;padding:0}
.ca-scroll{max-width:920px;margin:0 auto;padding:8px 20px 40px}
.ca-large{padding:14px 4px 10px}
.ca-large .eyebrow{font-size:.82rem;font-weight:600;color:var(--ca-lab);text-transform:capitalize}
.ca-large h1{margin:2px 0 0;font-size:2.1rem;font-weight:800;letter-spacing:-.03em}
.ca-large .r{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--ca-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:0 0 auto;box-shadow:0 6px 14px rgba(10,132,255,.3)}

/* ------------------------------ LISTAS AGRUPADAS ------------------------------ */
.ca-gtitle{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:600;color:var(--ca-lab);text-transform:uppercase;letter-spacing:.02em;margin:24px 8px 8px}
.ca-gtitle a{color:var(--ca-blue);text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:500}
.ca-group{background:var(--ca-group);border-radius:var(--ca-r-row);overflow:hidden;box-shadow:var(--ca-shadow)}
.ca-row{display:flex;align-items:center;gap:12px;padding:13px 16px;position:relative;color:inherit;text-decoration:none;min-height:52px}
a.ca-row,.ca-row.tap{cursor:pointer}
a.ca-row:active,.ca-row.tap:active{background:var(--ca-group-2)}
.ca-row+.ca-row::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:var(--ca-sep)}
.ca-row .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.ca-row .ic i{font-size:1rem}
.ic-blue{background:var(--ca-blue)}.ic-green{background:var(--ca-green)}.ic-orange{background:var(--ca-orange)}.ic-red{background:var(--ca-red)}.ic-purple{background:var(--ca-purple)}.ic-teal{background:var(--ca-teal)}.ic-gray{background:#8e8e93}
.ca-row .t{flex:1;min-width:0}
.ca-row .t b{font-size:.98rem;font-weight:500;display:block;color:var(--ca-ink)}
.ca-row .t span{font-size:.8rem;color:var(--ca-lab);display:block;margin-top:1px}
.ca-row .val{color:var(--ca-lab);font-size:.95rem;font-weight:400;white-space:nowrap}
.ca-row .chev{color:var(--ca-lab-2);font-size:1.05rem;flex:0 0 auto}
.ca-row .chev::before{content:"\203A";font-weight:700}

/* ------------------------------ CARTA PRINCIPAL (ESTADO) ------------------------------ */
.ca-hero{background:var(--ca-group);border-radius:var(--ca-r-card);padding:20px;box-shadow:var(--ca-shadow)}
.ca-hero .head{display:flex;align-items:center;gap:14px}
.ca-avring{width:64px;height:64px;border-radius:50%;flex:0 0 auto;padding:3px;background:conic-gradient(var(--ca-green) 0 100%)}
.ca-avring.out{background:conic-gradient(var(--ca-orange) 0 100%)}
.ca-avring.none{background:conic-gradient(var(--ca-lab-2) 0 100%)}
.ca-avring .a{width:100%;height:100%;border-radius:50%;background:var(--ca-grad);color:#fff;display:grid;place-items:center;font-size:1.25rem;font-weight:700;border:3px solid var(--ca-group);overflow:hidden}
.ca-avring .a img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ca-hero .who{min-width:0}
.ca-hero .who b{font-size:1.15rem;font-weight:800;display:block;letter-spacing:-.01em}
.ca-hero .who .meta{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:3px;font-size:.82rem;color:var(--ca-lab);align-items:center}
.ca-hero .who .chipg{background:var(--ca-field);color:var(--ca-ink-2);font-weight:600;padding:2px 9px;border-radius:999px;font-size:.75rem}
.ca-ctrl{font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-st{display:flex;align-items:center;gap:9px;margin:18px 0 2px;flex-wrap:wrap}
.ca-st .d{width:11px;height:11px;border-radius:50%;background:var(--ca-green);box-shadow:0 0 0 0 var(--ca-green);animation:caPulse 2s var(--ca-ease) infinite;flex:0 0 auto}
.ca-st b{font-size:1.5rem;font-weight:800;color:var(--ca-green);letter-spacing:-.02em}
.ca-st .since{width:100%;color:var(--ca-lab);font-size:.85rem;margin-top:2px}
.ca-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}
.ca-tile{background:var(--ca-field);border-radius:13px;padding:12px 8px;text-align:center}
.ca-tile .l{font-size:.65rem;color:var(--ca-lab);text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.ca-tile .n{font-size:1.12rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
.ca-tile .n.g{color:var(--ca-green)}.ca-tile .n.b{color:var(--ca-blue)}.ca-tile .n.o{color:var(--ca-orange)}

/* Tira de la semana */
.ca-week{display:flex;justify-content:space-between;gap:5px;margin-top:16px;padding-top:16px;border-top:1px solid var(--ca-sep)}
.ca-wd{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1}
.ca-wd .dd{font-size:.7rem;font-weight:700;color:var(--ca-lab)}
.ca-wd .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--ca-sep);font-size:.72rem;font-weight:700}
.ca-wd .dot i{font-size:.85rem}
.ca-wd .dot.p{background:var(--ca-green)}.ca-wd .dot.a{background:var(--ca-red)}.ca-wd .dot.t{background:var(--ca-blue);box-shadow:0 0 0 3px var(--ca-blue-soft)}
.ca-wd .dot.n{background:transparent;border:1.5px dashed var(--ca-sep-strong);color:var(--ca-lab)}

/* Acciones rápidas */
.ca-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.ca-qa{background:var(--ca-group);border-radius:16px;padding:14px 6px;text-align:center;position:relative;box-shadow:var(--ca-shadow);color:inherit;text-decoration:none;transition:transform .12s var(--ca-spring)}
.ca-qa:active{transform:scale(.95)}
.ca-qa .qi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin:0 auto 7px;color:#fff}
.ca-qa .qi i{font-size:1.15rem}
.ca-qa span{font-size:.68rem;font-weight:600;color:var(--ca-ink);display:block;line-height:1.25}
.ca-qa .dotbadge{position:absolute;top:9px;right:calc(50% - 22px);width:9px;height:9px;background:var(--ca-red);border-radius:50%;border:2px solid var(--ca-group)}

/* ------------------------------ MOVIMIENTOS / FEED (filas iOS) ------------------------------ */
.ca-mov b{font-weight:600}
.ca-mov .tm{color:var(--ca-lab);font-size:.9rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ------------------------------ TABLA SEMANAL (dashboard) — filas iOS ------------------------------ */
.ca-daylist .ca-row .day{flex:1;font-weight:600;font-size:.95rem}
.ca-in{color:var(--ca-green);font-weight:600;font-variant-numeric:tabular-nums}
.ca-out{color:var(--ca-ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.ca-miss{color:var(--ca-red);font-weight:600}
.ca-pending{color:var(--ca-lab);font-style:italic}
.ca-daylist .times{display:flex;gap:14px;font-size:.9rem}

/* ------------------------------ HISTORIAL · SEMESTRE ------------------------------ */
.ca-sem{background:var(--ca-group);border-radius:var(--ca-r-card);padding:20px;display:flex;gap:18px;align-items:center;box-shadow:var(--ca-shadow)}
.ca-ring{width:96px;height:96px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:conic-gradient(var(--ca-green) calc(var(--pct,0)*1%), var(--ca-sep) 0)}
.ca-ring .in{width:74px;height:74px;border-radius:50%;background:var(--ca-group);display:grid;place-items:center;line-height:1}
.ca-ring .pct{font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums}
.ca-ring .pl{font-size:.6rem;color:var(--ca-lab);font-weight:700;text-transform:uppercase;margin-top:2px}
.ca-semst{flex:1;display:flex;flex-direction:column;gap:9px}
.ca-semrow{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:500}
.ca-semrow .sq{width:11px;height:11px;border-radius:4px;flex:0 0 auto}
.ca-semrow .sn{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.ca-monthbar{display:flex;gap:8px;overflow-x:auto;margin:20px 2px 4px;scrollbar-width:none}
.ca-monthbar::-webkit-scrollbar{display:none}
.ca-mchip{white-space:nowrap;font-size:.86rem;font-weight:600;color:var(--ca-ink);background:var(--ca-group);padding:8px 15px;border-radius:999px;cursor:pointer;box-shadow:var(--ca-shadow)}
.ca-mchip.on{background:var(--ca-blue);color:#fff}
.ca-cal{background:var(--ca-group);border-radius:var(--ca-r-card);padding:16px 14px;box-shadow:var(--ca-shadow)}
.ca-calhd,.ca-calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ca-calhd span{text-align:center;font-size:.68rem;font-weight:700;color:var(--ca-lab);padding-bottom:6px}
.ca-cd{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:500;color:var(--ca-ink)}
.ca-cd.mut{color:var(--ca-lab);opacity:.4}
.ca-cd.p{background:var(--ca-present-soft);color:var(--ca-green);font-weight:700}
.ca-cd.a{background:var(--ca-absent-soft);color:var(--ca-red);font-weight:700}
.ca-cd.l{background:var(--ca-leave-soft);color:var(--ca-orange);font-weight:700}
.ca-cd.t{outline:2px solid var(--ca-blue);outline-offset:-2px}
.ca-legend{display:flex;justify-content:center;gap:16px;margin-top:14px;font-size:.72rem;color:var(--ca-lab);font-weight:500}
.ca-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* ------------------------------ ALERTAS · timeline iOS ------------------------------ */
.ca-filter{display:flex;background:var(--ca-group-2);border-radius:10px;padding:2px;margin:6px 0 4px}
.ca-filter button{flex:1;border:0;background:transparent;font-family:inherit;font-size:.86rem;font-weight:600;color:var(--ca-ink);padding:7px;border-radius:8px;cursor:pointer}
.ca-filter button.active{background:var(--ca-group);box-shadow:0 1px 3px rgba(0,0,0,.14)}

/* ------------------------------ PERFIL / AJUSTES ------------------------------ */
.ca-prof{display:flex;align-items:center;gap:16px;padding:6px 4px 8px}
.ca-prof .big{width:74px;height:74px;border-radius:50%;background:var(--ca-grad);color:#fff;display:grid;place-items:center;font-size:1.7rem;font-weight:700;flex:0 0 auto;box-shadow:0 10px 22px rgba(10,132,255,.3)}
.ca-prof h2{margin:0;font-size:1.3rem;font-weight:800}
.ca-prof p{margin:2px 0 0;color:var(--ca-lab);font-size:.9rem}
.ca-danger{color:var(--ca-red)!important;font-weight:600}
.ca-switch{width:51px;height:31px;border-radius:999px;background:var(--ca-sep-strong);position:relative;flex:0 0 auto;cursor:pointer;transition:background .2s}
.ca-switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:left .2s var(--ca-spring)}
.ca-switch.on{background:var(--ca-green)}.ca-switch.on::after{left:22px}

/* ------------------------------ BOTONES / FORM (login, registro) ------------------------------ */
.ca-btn{display:block;width:100%;border:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:1.05rem;padding:15px;border-radius:14px;text-align:center;transition:transform .12s var(--ca-spring),filter .15s}
.ca-btn:active{transform:scale(.98)}
.ca-btn-primary{background:var(--ca-blue);color:#fff;box-shadow:0 8px 20px rgba(10,132,255,.3)}
.ca-btn-primary:hover{filter:brightness(1.05);color:#fff}
.ca-btn-plain{background:var(--ca-field);color:var(--ca-ink)}
.ca-field-group{background:var(--ca-group);border-radius:var(--ca-r-row);overflow:hidden}
.ca-field{display:flex;align-items:center;gap:12px;padding:14px 16px;position:relative}
.ca-field+.ca-field::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:var(--ca-sep)}
.ca-field .fi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.ca-field input{border:none;background:transparent;flex:1;font-family:inherit;font-size:1rem;color:var(--ca-ink);outline:none;min-width:0}
.ca-field .eye{color:var(--ca-lab);cursor:pointer;background:none;border:0;display:grid;place-items:center}

/* ------------------------------ ESQUELETOS (coinciden con el layout) ------------------------------ */
.sk{position:relative;overflow:hidden;background:var(--ca-group-2);border-radius:8px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ca-group) 65%,transparent),transparent);animation:caShimmer 1.5s ease infinite}
.sk-line{height:12px;border-radius:6px;margin:6px 0}
.sk-line.sm{height:9px}
.sk-line.w-30{width:30%}.sk-line.w-40{width:40%}.sk-line.w-50{width:50%}.sk-line.w-60{width:60%}.sk-line.w-70{width:70%}.sk-line.w-80{width:80%}.sk-line.w-100{width:100%}
.sk-circle{width:30px;height:30px;border-radius:8px;flex:0 0 auto}
.sk-avatar{width:64px;height:64px;border-radius:50%;flex:0 0 auto}
.skeleton-feed{display:flex;flex-direction:column}
.skeleton-row{display:flex;gap:12px;align-items:center;padding:14px 16px}
.skeleton-row+.skeleton-row{border-top:1px solid var(--ca-sep)}
/* Esqueleto que imita la carta principal (.ca-hero) */
.sk-hero{background:var(--ca-group);border-radius:var(--ca-r-card);padding:20px;box-shadow:var(--ca-shadow)}
.sh-top{display:flex;align-items:center;gap:14px}
.sh-status{display:block;height:26px;width:60%;border-radius:8px;margin:20px 0 4px}
.sh-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}
.sh-tiles .sk{height:58px;border-radius:13px}
.sh-week{display:flex;justify-content:space-between;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid var(--ca-sep)}
.sh-week .sk{width:26px;height:26px;border-radius:50%}

/* ------------------------------ BARRA DE CARGA (mínima, arriba) ------------------------------ */
#ca-progress{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:10000;background:var(--ca-grad);
  box-shadow:0 0 10px color-mix(in srgb,var(--ca-blue) 55%,transparent);
  opacity:0;transition:width .3s var(--ca-ease),opacity .4s ease;pointer-events:none;border-radius:0 3px 3px 0}
#ca-progress.activa{opacity:1}

/* selector de tema (en Ajustes) */
.ca-tema{position:relative;display:inline-block}
.ca-tema-btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--ca-field);border:none;border-radius:9px;padding:.4rem .7rem;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ca-ink);font-family:inherit}
.ca-tema-btn svg{width:16px;height:16px}
.ca-tema-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;margin:0;padding:.3rem;list-style:none;background:var(--ca-group);border:1px solid var(--ca-sep);border-radius:14px;box-shadow:var(--ca-shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:2600}
.ca-tema-menu.abierto{opacity:1;visibility:visible;transform:translateY(0)}
.ca-tema-opcion{display:flex;align-items:center;gap:.55rem;width:100%;background:transparent;border:0;border-radius:9px;padding:.55rem .6rem;cursor:pointer;text-align:left;font-size:.9rem;color:var(--ca-ink);font-family:inherit}
.ca-tema-opcion:hover{background:var(--ca-group-2)}
.ca-tema-opcion svg{width:17px;height:17px;color:var(--ca-lab)}
.ca-tema-opcion .ca-tema-check{margin-left:auto;color:var(--ca-blue);opacity:0;font-weight:700}
.ca-tema-opcion.activo{color:var(--ca-blue)}.ca-tema-opcion.activo svg{color:var(--ca-blue)}.ca-tema-opcion.activo .ca-tema-check{opacity:1}

/* ------------------------------ ANIMACIONES ------------------------------ */
@keyframes caPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ca-green) 45%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes caShimmer{100%{transform:translateX(100%)}}
@keyframes caSpin{to{transform:rotate(360deg)}}
@keyframes caBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes caLoad{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes caFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes caPop{0%{transform:scale(.55);opacity:0}62%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
@keyframes caRippleGo{to{transform:scale(2.6);opacity:0}}
@keyframes caRise{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}

/* Micro-interacciones */
.ca-qa,.ca-mchip,.ca-cd,.ca-tile,.student-avatar{transition:transform .16s var(--ca-spring),box-shadow .2s var(--ca-ease)}
.ca-qa:hover{transform:translateY(-3px);box-shadow:var(--ca-shadow-lg)}
.ca-tile:hover{transform:translateY(-2px)}
.ca-cd:hover{transform:scale(1.1)}
.ca-mchip:hover{transform:translateY(-1px)}
.ca-field .fi{transition:transform .18s var(--ca-spring)}
.ca-field-group:focus-within{box-shadow:0 0 0 3px var(--ca-blue-soft)}
.ca-field:focus-within .fi{transform:scale(1.06)}
@media (prefers-reduced-motion:no-preference){
  .bottom-nav-item.active i{animation:caPop .45s var(--ca-spring)}
  .ca-wd .dot{animation:caPop .5s var(--ca-spring) backwards}
  .ca-wd:nth-child(1) .dot{animation-delay:.04s}.ca-wd:nth-child(2) .dot{animation-delay:.11s}
  .ca-wd:nth-child(3) .dot{animation-delay:.18s}.ca-wd:nth-child(4) .dot{animation-delay:.25s}
  .ca-wd:nth-child(5) .dot{animation-delay:.32s}.ca-wd:nth-child(6) .dot{animation-delay:.39s}
  .ca-tiles .ca-tile{opacity:0;animation:caRise .5s var(--ca-ease) forwards}
  .ca-tiles .ca-tile:nth-child(1){animation-delay:.06s}.ca-tiles .ca-tile:nth-child(2){animation-delay:.14s}.ca-tiles .ca-tile:nth-child(3){animation-delay:.22s}
}
@media (prefers-reduced-motion:no-preference){
  .stagger-item{opacity:0;animation:caRise .5s var(--ca-ease) forwards}
  .delay-1{animation-delay:.05s}.delay-2{animation-delay:.13s}.delay-3{animation-delay:.22s}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ------------------------------ ACCESO (login / registro / verificar) ------------------------------ */
.ca-auth{min-height:100vh;display:flex;background:var(--ca-bg)}
.ca-auth-hero{position:relative;background:linear-gradient(160deg,#c4e3ff 0%,#eaf6ff 55%,#dcf3e6 100%);display:flex;align-items:center;justify-content:center;padding:30px;overflow:hidden;text-align:center}
.ca-auth-hero::before,.ca-auth-hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.35);filter:blur(2px)}
.ca-auth-hero::before{width:170px;height:170px;top:-50px;left:-40px}
.ca-auth-hero::after{width:120px;height:120px;bottom:40px;right:-30px;background:rgba(52,199,89,.12)}
.ca-auth-hero .hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:420px;width:100%}
.ca-auth-hero .scene{width:300px;max-width:84%;height:auto;border-radius:26px;filter:drop-shadow(0 22px 38px rgba(12,74,140,.26));animation:caFloatY 5s ease-in-out infinite}
.ca-auth-hero .word b{font-size:1.7rem;font-weight:900;letter-spacing:-.01em;display:block;color:#0e2a4a}
.ca-auth-hero .word span{font-size:.96rem;color:#2b5079;display:block;margin-top:4px}
.hero-feats{list-style:none;padding:0;margin:8px 0 0;display:none;flex-direction:column;gap:12px;text-align:left;width:100%;max-width:300px}
.hero-feats li{display:flex;align-items:center;gap:12px;color:#123a63;font-weight:600;font-size:.96rem;opacity:0;animation:caRise .55s var(--ca-ease) forwards}
.hero-feats li:nth-child(1){animation-delay:.2s}.hero-feats li:nth-child(2){animation-delay:.34s}.hero-feats li:nth-child(3){animation-delay:.48s}
.hero-feats li i{width:28px;height:28px;border-radius:9px;background:#34c759;color:#fff;display:grid;place-items:center;font-size:.9rem;flex:0 0 auto;box-shadow:0 8px 16px rgba(52,199,89,.34)}
.ca-auth-panel{background:var(--ca-bg);display:flex;flex-direction:column;justify-content:center;padding:28px 24px 40px}
.ca-auth-panel .inner{width:100%;max-width:420px;margin:0 auto}
.welcome{margin:0 0 4px;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--ca-ink)}
.welcome + .wsub{margin:0 0 18px;color:var(--ca-lab);font-size:.95rem}
.ca-remember{display:flex;align-items:center;justify-content:space-between;background:var(--ca-group);border-radius:14px;padding:13px 16px;margin-top:12px;cursor:pointer}
.ca-remember .lbl{font-size:.98rem;font-weight:500;color:var(--ca-ink)}
.ca-remember input{display:none}
.ca-remember input:checked + .ca-switch{background:var(--ca-green)}
.ca-remember input:checked + .ca-switch::after{left:22px}
.forgot{display:block;text-align:center;color:var(--ca-blue);font-weight:600;font-size:.92rem;text-decoration:none;margin-top:16px}
.orsep{display:flex;align-items:center;gap:12px;color:var(--ca-lab);font-size:.82rem;margin:20px 0}
.orsep::before,.orsep::after{content:"";flex:1;height:1px;background:var(--ca-sep)}
.rega{text-align:center;margin:18px 0 4px;font-size:.92rem;color:var(--ca-lab)}
.rega a{color:var(--ca-blue);font-weight:700}
.ca-alert{background:var(--ca-absent-soft);color:var(--ca-red);border-radius:12px;padding:11px 14px;font-size:.9rem;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.ca-alert.ok{background:var(--ca-present-soft);color:var(--ca-green)}
.ca-step-chip{display:inline-block;background:var(--ca-field);color:var(--ca-ink-2);font-weight:700;font-size:.74rem;padding:4px 11px;border-radius:999px;margin-bottom:8px}
.ca-strength{height:6px;border-radius:999px;background:var(--ca-group-2);overflow:hidden;margin-top:10px}
.ca-strength i{display:block;height:100%;width:0;border-radius:999px;transition:width .3s,background .3s}
.ca-hint{font-size:.78rem;color:var(--ca-lab);margin-top:8px;display:flex;align-items:center;gap:6px}
.ca-hint.err{color:var(--ca-red)}
.ca-otp{display:flex;gap:9px;justify-content:center;margin:8px 0}
.ca-otp input{width:46px;height:56px;text-align:center;font-size:1.5rem;font-weight:700;color:var(--ca-ink);background:var(--ca-group);border:1.5px solid var(--ca-sep);border-radius:14px;outline:none;transition:border-color .2s,box-shadow .2s}
.ca-otp input:focus{border-color:var(--ca-blue);box-shadow:var(--ca-ring-focus)}
.ca-gen{background:none;border:0;color:var(--ca-blue);font-weight:600;font-size:.85rem;font-family:inherit;cursor:pointer;padding:0}
.ca-select{border:none;background:transparent;color:var(--ca-ink);font-family:inherit;font-size:1rem;flex:1;outline:none;min-width:0}
.ca-step{display:none}.ca-step.on{display:block;animation:caRise .4s var(--ca-ease)}
@media (max-width:899.98px){
  .ca-auth{flex-direction:column}
  .ca-auth-hero{min-height:246px;border-radius:0 0 34px 34px}
  .ca-auth-hero .scene{width:208px}
  .ca-auth-hero .word b{font-size:1.4rem}
  .ca-auth-panel{flex:1;margin-top:-26px;border-radius:26px 26px 0 0;z-index:2;padding-top:26px}
}
@media (min-width:900px){
  .ca-auth-hero{flex:1;min-height:100vh}
  .ca-auth-hero .scene{width:320px}
  .ca-auth-hero .word b{font-size:2rem}
  .hero-feats{display:flex}
  .ca-auth-panel{width:min(50%,560px);min-height:100vh;overflow-y:auto}
}

/* ------------------------------ TRANSICIONES DE PÁGINA (View Transitions API) ------------------------------ */
@view-transition { navigation: auto; }
/* La barra de pestañas, la lateral y la marca del hero PERSISTEN entre páginas → sensación nativa */
.bottom-nav{ view-transition-name: ca-tabbar; }
.sidebar{ view-transition-name: ca-sidebar; }
/* El contenido entra con un cross-fade + leve deslizamiento */
::view-transition-old(root){ animation: caVtOut .24s var(--ca-ease) both; }
::view-transition-new(root){ animation: caVtIn .32s var(--ca-ease) both; }
@keyframes caVtOut{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes caVtIn{ from{ opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none!important; }
}

/* ------------------------------ REVELADO AL HACER SCROLL (mejora progresiva) ------------------------------ */
.ca-js .ca-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ca-ease),transform .55s var(--ca-ease)}
.ca-js .ca-reveal.ca-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .ca-js .ca-reveal{opacity:1!important;transform:none!important;transition:none!important} }

/* ------------------------------ MATERIAL "VIDRIO LÍQUIDO" (calmado, iOS 26) ------------------------------ */
.bottom-nav{ -webkit-backdrop-filter:saturate(180%) blur(26px); backdrop-filter:saturate(180%) blur(26px); box-shadow:inset 0 .5px 0 rgba(255,255,255,.14), 0 -10px 34px rgba(0,0,0,.06); }
.sidebar{ -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px); box-shadow:inset -.5px 0 0 rgba(255,255,255,.05); }
.ca-tema-menu,.ca-idioma-menu{ -webkit-backdrop-filter:saturate(160%) blur(20px); backdrop-filter:saturate(160%) blur(20px); background:color-mix(in srgb,var(--ca-group) 86%,transparent); }

/* ------------------------------ RESPONSIVO ------------------------------ */
@media (max-width:991.98px){
  .sidebar{display:none}
  .bottom-nav{display:block}
  .main-content{margin-left:0;min-height:100vh}
  .ca-scroll{padding:6px 16px calc(var(--tabbar-h) + 24px)}
  .ca-large h1{font-size:1.9rem}
}
@media (min-width:992px){
  /* En escritorio, la carta principal y los laterales en dos columnas */
  .ca-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
  .ca-large{padding-top:22px}
}