/* ══════════════════════════════════════════════════════════
   BASE — Reset, Typography, Layout, Utilities
   ══════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-primary);background-color:var(--bg-primary);background-image:var(--body-bg-gradient);background-size:cover;background-position:center;background-attachment:fixed;overflow:hidden;height:100vh}
body.tema-alumno{background-image:var(--student-bg-gradient)}
body.tema-docente{background-image:var(--docente-bg-gradient)}
body.tema-admin{background-image:var(--admin-bg-gradient)}
a{color:var(--accent-blue);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--accent-cyan)}
img,svg{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}
ul,ol{list-style:none}
::selection{background:rgba(59,130,246,0.3);color:var(--text-primary)}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover)}
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}

/* Layout */
#app{display:flex;height:100vh;width:100vw;overflow:hidden}
#sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);height:100vh;background:var(--bg-secondary);border-right:1px solid var(--border-default);display:flex;flex-direction:column;transition:width .4s var(--ease-out),min-width .4s var(--ease-out);z-index:var(--z-sidebar);overflow:hidden}
#main-content{flex:1;height:100vh;overflow-y:auto;overflow-x:hidden;position:relative}
.page-content{padding:var(--content-padding);max-width:var(--content-max);margin:0 auto;animation:cascadeFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;position:relative;z-index:1;opacity:0}

/* Background Pattern & Shield */
#main-content::before {
  content: ''; position: fixed; top: 0; left: var(--sidebar-width); right: 0; bottom: 0;
  background-image: linear-gradient(var(--pattern-color) 1px, transparent 1px), linear-gradient(90deg, var(--pattern-color) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none; z-index: 0;
}
body.tema-alumno #main-content::after, body.tema-docente #main-content::after {
  content: ''; position: fixed; top: 50%; left: calc(var(--sidebar-width) + (100% - var(--sidebar-width)) / 2); transform: translate(-50%, -50%);
  width: 40vw; height: 40vw; background-image: url('/static/assets/escudo.png');
  background-position: center; background-repeat: no-repeat; background-size: contain;
  opacity: var(--watermark-opacity); pointer-events: none; z-index: 0;
}
@media (max-width: 768px) {
  #main-content::before { left: 0; }
  body.tema-alumno #main-content::after, body.tema-docente #main-content::after { left: 50%; width: 60vw; height: 60vw; }
}


/* Typography */
h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:-0.035em}
h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl);letter-spacing:-0.025em}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-8);flex-wrap:wrap;gap:var(--space-4)}
.page-header h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold)}
.page-header .subtitle{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-1)}

/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes cascadeFade{0%{opacity:0;transform:translateY(24px) scale(0.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 8px rgba(59,130,246,0.15)}50%{box-shadow:0 0 20px rgba(59,130,246,0.30)}}
@keyframes bellRing{0%,100%{transform:rotate(0deg)}20%{transform:rotate(15deg)}40%{transform:rotate(-15deg)}60%{transform:rotate(10deg)}80%{transform:rotate(-10deg)}}
@keyframes skeletonPulse{0%,100%{opacity:0.6;background-color:#e2e4eb}50%{opacity:1;background-color:#f1f3f9}}

/* Utilities */
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.flex-1{flex:1}
.text-center{text-align:center}.text-right{text-align:right}.text-sm{font-size:var(--font-size-sm)}.text-xs{font-size:var(--font-size-xs)}
.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-success{color:var(--accent-green)}.text-danger{color:var(--accent-red)}.text-warning{color:var(--accent-amber)}.text-info{color:var(--accent-blue)}
.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}
.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}
.mr-2{margin-right:var(--space-2)}.ml-auto{margin-left:auto}.w-full{width:100%}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid{display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.page-content{padding:var(--space-4)}}

/* Loading — Skeleton Loader */
.loading-container{display:flex;align-items:center;justify-content:center;min-height:300px;flex-direction:column;gap:var(--space-4);width:100%;max-width:600px;margin:0 auto;padding:var(--space-8)}
.loading-spinner{width:100%;display:flex;flex-direction:column;gap:var(--space-4)}
.loading-spinner::before,.loading-spinner::after{content:'';display:block;height:16px;border-radius:var(--radius-sm);animation:skeletonPulse 1.5s ease-in-out infinite;background:var(--bg-surface-hover)}
.loading-spinner::before{width:60%}
.loading-spinner::after{width:90%}
.loading-text{color:var(--text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);letter-spacing:0.04em;text-transform:uppercase}