/* Diseño aplicado desde la propuesta anime aprobada. Las tarjetas y el progreso son HTML interactivo. */
:root{--navy:#192a40;--ink:#091528;--turquoise:#00bcad;--paper:#f7fafb}
body{font-family:'Trebuchet MS','Segoe UI',sans-serif;background:#f7fafb}
#sidebar{width:245px;background:linear-gradient(120deg,#20344b,#142136);padding:32px 19px;box-shadow:8px 0 30px #17304412}
.shell{margin-left:245px}.brand{font-size:32px;font-weight:850;letter-spacing:-1.2px;font-style:italic;gap:15px;position:relative}.brand strong{font-weight:900}.brand:after{content:'';position:absolute;bottom:-15px;right:6px;width:112px;height:6px;border-radius:100% 25%;background:#ffe32a;transform:rotate(-6deg)}.brand-symbol{flex-shrink:0;width:55px;height:57px;background:#ff4b8b;color:white;border:4px solid white;box-shadow:-6px 6px 0 #62dfdc;border-radius:15px;font-size:26px;letter-spacing:0;padding:0;transform:rotate(-9deg)}
.nav-caption{visibility:hidden;margin:25px 0 7px;height:8px}nav{gap:9px}nav a{padding:11px 16px;font-size:18px;font-weight:500;border-radius:40px;color:#fff;gap:17px}nav a.active{background:linear-gradient(110deg,#83e9ef,#9deef0);color:#061728;font-weight:800}nav .nav-icon{width:29px;height:29px;display:flex;flex-shrink:0}.nav-icon svg{width:100%;height:100%}nav a[data-route=progreso]{border-top:2px solid #b6c4d0;border-radius:0;margin-top:14px;padding-top:24px}nav a:last-child{margin-top:0;border:0}.sidebar-bottom{min-height:100px;position:relative;overflow:hidden;padding:35px 10px 5px}.sidebar-bottom>*{display:none}.sidebar-bottom:before,.sidebar-bottom:after{content:'';position:absolute;width:190px;height:35px;background:#ffde16;bottom:20px;left:-45px;transform:rotate(-27deg);border-radius:60% 10% 50% 8%}.sidebar-bottom:after{background:#b53af1;bottom:-8px;left:15px;height:25px}
.topbar{height:72px;background:#fff;border-bottom:0}.topbar .avatar{background:#a9e9e6}.topbar .local-pill{color:#217165}.home-view .topbar{display:none}.home-view main{padding:0 23px 25px;max-width:1650px;min-height:0}.home-view footer{margin-top:20px}.anime-banner{position:relative;margin:0 -23px;aspect-ratio:1320/452;background-image:url('assets/images/diseno-anime.png');background-size:126.667% auto;background-position:right top;background-repeat:no-repeat;overflow:hidden}.hero-profile{position:absolute;top:0;right:0;width:16%;height:19%;background:#fff;border-radius:0 0 0 60px;display:flex;align-items:center;justify-content:space-evenly;gap:10px;padding:10px 16px}.hero-profile a{width:33%;max-width:40px;display:flex;color:var(--ink)}.hero-profile svg{width:100%;height:auto}.conecta-actions{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:-5px;z-index:2}.conecta-tile{border:3px solid white;border-radius:34px;padding:20px 18px 24px;text-decoration:none;min-height:211px;position:relative;box-shadow:0 4px 0 #dde8ea25;transition:transform .18s,box-shadow .18s}.conecta-tile:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 12px 24px #192a4020}.conecta-tile:focus-visible{outline:4px solid #142136;outline-offset:3px}.conecta-tile.aqua{background:linear-gradient(135deg,#b3efea,#a2e7e5);--accent:#00b7aa}.conecta-tile.rose{background:linear-gradient(135deg,#ffbfdc,#ffadd1);--accent:#ee3b87}.conecta-tile.sun{background:linear-gradient(135deg,#ffed98,#ffe16a);--accent:#ff9700}.conecta-tile.purple{background:linear-gradient(135deg,#ddc3ff,#ccacfa);--accent:#7542b7}.conecta-tile.sky{background:linear-gradient(135deg,#c4f1fd,#abe2f9);--accent:#009db9}.tile-icon{display:block;width:64px;height:64px;margin:0 0 10px}.tile-icon svg{width:100%;height:100%;stroke-width:1.6}.conecta-tile h2{font-size:clamp(22px,2.6vw,37px);font-weight:900;letter-spacing:-1.5px;margin-bottom:10px;line-height:1.05}.conecta-tile p{color:#091528;font-size:clamp(12px,1.25vw,18px);line-height:1.15;margin:0;padding-right:13px}.tile-doodle{position:absolute;right:12px;top:0;color:var(--accent);font-size:53px;line-height:1;text-shadow:2px 2px white,-2px -2px white;transform:rotate(-15deg)}.tile-next{position:absolute;bottom:19px;right:15px;width:28px;height:28px;display:grid;place-items:center;border:2px solid white;border-radius:50%;background:var(--accent);font-size:31px;font-weight:700;color:#fff;line-height:18px;padding-bottom:4px}.conecta-bottom{display:grid;grid-template-columns:1.2fr 1fr;gap:25px;margin-top:24px}.journey-panel,.next-panel{background:linear-gradient(120deg,#fff,#f8fcfc);border:3px solid #e3eef0;box-shadow:0 3px 7px #18394808;border-radius:32px;min-height:156px;padding:22px 25px;text-decoration:none;position:relative;overflow:hidden}.journey-panel h2,.next-panel h2{display:flex;align-items:center;gap:13px;font-size:23px;margin:0 0 14px;letter-spacing:-1px}.journey-panel h2 svg,.next-panel h2 svg{height:33px;width:33px}.journey-meter{display:flex;align-items:center;gap:18px;max-width:77%}.journey-meter .progress-line{flex:1;height:24px;background:#afede9;margin:4px 0}.journey-meter .progress-line span{background:#00bcae;border-radius:20px}.journey-meter strong{font-size:27px;white-space:nowrap}.journey-caption{font-size:11px;color:#526d7a}.rocket{position:absolute;right:14px;bottom:-10px;font-size:85px;transform:rotate(-12deg)}.next-panel{display:grid;grid-template-columns:1fr 36%;align-items:center;gap:14px}.next-panel h2{font-size:20px;white-space:nowrap}.next-panel h3{font-size:30px;letter-spacing:-1px;display:flex;align-items:center;justify-content:space-between;margin:0;gap:12px}.next-panel h3 span{border-radius:50%;background:#00bcae;color:white;width:36px;height:36px;text-align:center;line-height:29px;font-size:40px}.school-preview{height:108px;background-image:url('assets/images/diseno-anime.png');background-size:780% auto;background-position:96% 93%;border-radius:18px}.card{border-radius:25px}.page-heading h1{font-weight:900}.button{border-radius:25px}.progress-card{background:var(--navy)}
@media(min-width:1600px){#sidebar{width:290px;padding:35px 26px}.shell{margin-left:290px}nav a{font-size:22px;padding:14px 18px}.brand{font-size:38px}.conecta-tile{min-height:245px;padding:25px}.tile-icon{height:76px;width:76px}.conecta-tile h2{font-size:40px}.conecta-tile p{font-size:19px}}
@media(max-width:1100px) and (min-width:761px){#sidebar{width:205px;padding:26px 12px}.shell{margin-left:205px}.brand{font-size:27px;gap:11px}.brand-symbol{width:44px;height:47px}nav a{font-size:15px;gap:12px;padding:11px}.nav-icon{max-width:25px}.home-view main{padding-left:15px;padding-right:15px}.anime-banner{margin:0 -15px}.conecta-actions{gap:7px}.conecta-tile{padding:16px 10px 45px;border-radius:24px;min-height:190px}.tile-icon{width:47px;height:47px}.tile-doodle{font-size:38px}.conecta-tile h2{font-size:25px}.conecta-tile p{font-size:12px}.conecta-bottom{gap:12px}.journey-panel,.next-panel{padding:18px 15px}.journey-panel h2,.next-panel h2{font-size:17px}.next-panel{grid-template-columns:1fr}.school-preview{display:none}.next-panel h3{font-size:26px}.rocket{font-size:62px}.journey-meter strong{font-size:23px}}
@media(max-width:760px){#sidebar{width:245px}.shell{margin-left:0}.home-view .topbar{display:flex;height:62px;padding:0 16px}.home-view .breadcrumb{font-size:10px}.home-view main{padding:0 12px 25px}.anime-banner{margin:0 -12px;aspect-ratio:1320/452}.hero-profile{display:none}.anime-banner:after{content:'';position:absolute;right:0;top:0;width:16%;height:19%;border-bottom-left-radius:40px;background:#fff}.conecta-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:8px}.conecta-tile{min-height:188px;padding:16px 20px;border-radius:29px}.conecta-tile h2{font-size:29px}.conecta-tile p{font-size:15px}.tile-icon{width:53px;height:53px}.tile-doodle{font-size:43px;right:18px;top:7px}.conecta-tile:last-child{grid-column:1/-1;min-height:108px;padding-left:100px;padding-top:20px}.conecta-tile:last-child .tile-icon{position:absolute;left:22px;top:25px}.conecta-tile:last-child p br{display:none}.conecta-tile:last-child .tile-doodle{right:55px}.conecta-bottom{grid-template-columns:1fr;gap:14px;margin-top:16px}.journey-panel,.next-panel{min-height:145px;padding:20px}.journey-panel h2,.next-panel h2{font-size:21px}.next-panel h3{font-size:29px}.rocket{font-size:76px}.school-preview{height:100px}.hero-profile a{max-width:20px}footer{font-size:10px}.topbar .local-pill{display:none}}