/* EDUCypher V5 · visual reliability layer
   Loaded last. Keeps the existing PHP/MySQL features and backgrounds,
   but makes typography, contrast, cards and media consistent. */

:root{
  --ui-accent:var(--custom-accent,#ff625d);
  --ui-bg:#080d16;
  --ui-bg-soft:#0d1421;
  --ui-surface:rgba(15,24,38,.94);
  --ui-surface-2:rgba(20,31,48,.96);
  --ui-surface-3:rgba(28,42,63,.92);
  --ui-text:#f6f8fc;
  --ui-heading:#ffffff;
  --ui-muted:#b5c0d1;
  --ui-subtle:#8c9ab0;
  --ui-line:rgba(255,255,255,.12);
  --ui-line-strong:rgba(255,255,255,.20);
  --ui-shadow:0 22px 65px rgba(0,0,0,.28);
  --ui-shadow-soft:0 12px 34px rgba(0,0,0,.18);
  --ui-radius:22px;
  --ui-radius-sm:14px;
  --ui-content:1440px;
}
html[data-theme="light"]{
  --ui-bg:#edf2f8;
  --ui-bg-soft:#f5f8fc;
  --ui-surface:rgba(255,255,255,.94);
  --ui-surface-2:rgba(248,251,255,.98);
  --ui-surface-3:rgba(235,241,249,.98);
  --ui-text:#18263a;
  --ui-heading:#0d1b2d;
  --ui-muted:#506079;
  --ui-subtle:#66758b;
  --ui-line:rgba(18,41,70,.14);
  --ui-line-strong:rgba(18,41,70,.23);
  --ui-shadow:0 22px 60px rgba(31,48,72,.14);
  --ui-shadow-soft:0 10px 28px rgba(31,48,72,.10);
}

html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{
  color:var(--ui-text);
  font-family:var(--body,system-ui,-apple-system,"Segoe UI",Arial,sans-serif);
  font-weight:400;
  line-height:1.62;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color:var(--ui-bg);
}
/* Keep visual presets decorative instead of allowing them to compete with content. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,8,15,.10),rgba(4,8,15,.32) 48%,rgba(4,8,15,.56));
}
html[data-theme="light"] body::before{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(245,248,252,.56) 50%,rgba(237,242,248,.76))}
body>*{position:relative;z-index:1}

h1,h2,h3,h4,h5,h6{
  color:var(--ui-heading);
  font-family:var(--display,system-ui,-apple-system,"Segoe UI",Arial,sans-serif);
  font-weight:700;
  text-wrap:balance;
}
p{color:var(--ui-muted)}
strong,b{color:inherit}
.eyebrow{
  color:color-mix(in srgb,var(--ui-accent) 62%,#cde0ff 38%);
  font-family:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,monospace;
  font-size:.72rem;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.15em;
}
.section{max-width:var(--ui-content);padding-left:clamp(22px,5vw,78px);padding-right:clamp(22px,5vw,78px)}
.section-heading{align-items:flex-end;margin-bottom:38px}
.section-heading h2,.section-title{font-size:clamp(2.15rem,4vw,4.25rem);line-height:.98;letter-spacing:-.052em}
.section-heading p:not(.eyebrow){color:var(--ui-muted);font-size:.94rem;line-height:1.6}

/* Navigation: readable on every background preset. */
.navbar,.learn-nav,.project-header{
  background:linear-gradient(180deg,rgba(7,12,21,.88),rgba(7,12,21,.72));
  border-color:var(--ui-line)!important;
  backdrop-filter:blur(22px) saturate(1.16);
  -webkit-backdrop-filter:blur(22px) saturate(1.16);
}
html[data-theme="light"] .navbar,
html[data-theme="light"] .learn-nav,
html[data-theme="light"] .project-header{background:linear-gradient(180deg,rgba(250,252,255,.95),rgba(247,250,254,.88))}
.navbar nav a,.learn-nav nav a{color:var(--ui-muted);font-weight:600;letter-spacing:.01em}
.navbar nav a:hover,.navbar nav a.active,.learn-nav nav a:hover,.learn-nav nav a.active{color:var(--ui-heading)}
.brand{color:var(--ui-heading)!important;font-weight:750;letter-spacing:-.06em}

/* Hero: strong hierarchy without giant, thin display type. */
.hero{min-height:min(860px,100svh);padding-top:150px}
.hero-inner{max-width:1280px}
.hero-title{
  color:var(--ui-heading);
  font-size:clamp(4.1rem,11vw,10rem);
  font-weight:750;
  line-height:.88;
  letter-spacing:-.068em;
  max-width:12ch;
  text-shadow:0 16px 55px rgba(0,0,0,.20);
}
.hero-specialties{color:var(--ui-heading);font-size:clamp(1.05rem,1.8vw,1.45rem);font-weight:600;max-width:860px}
.hero-tagline{color:var(--ui-muted);font-size:1.02rem;line-height:1.7;max-width:620px}
.hero-meta,.scroll-hint{color:var(--ui-subtle)}
.hero-glow{opacity:.82;filter:saturate(.85)}
html[data-theme="light"] .hero-glow{opacity:.22}

/* Buttons and controls. */
.btn,button:not(.text-button):not(.icon-button):not(.media-tile):not(.filter):not(.chip){
  border-color:var(--ui-line);
  background:color-mix(in srgb,var(--ui-surface-2) 92%,transparent);
  color:var(--ui-text);
  font-weight:650;
  box-shadow:none;
}
.btn.glass{background:color-mix(in srgb,var(--ui-surface-2) 84%,transparent);border-color:var(--ui-line)}
.btn.primary,button.primary{
  background:var(--ui-accent)!important;
  color:#071019!important;
  font-weight:750!important;
  box-shadow:0 12px 30px color-mix(in srgb,var(--ui-accent) 26%,transparent)!important;
}
html[data-theme="light"] .btn.primary,html[data-theme="light"] button.primary{color:#fff!important}
.text-button{color:color-mix(in srgb,var(--ui-accent) 58%,#bcd9ff 42%);font-weight:650}
input,textarea,select{
  color:var(--ui-text)!important;
  background:var(--ui-surface)!important;
  border-color:var(--ui-line-strong)!important;
}
input::placeholder,textarea::placeholder{color:var(--ui-subtle)}

/* Project cards: media-first, high contrast, stable proportions. */
.cards{gap:clamp(18px,2vw,28px)}
.project-card{
  background:linear-gradient(160deg,var(--ui-surface-2),var(--ui-surface));
  border:1px solid var(--ui-line);
  border-radius:var(--ui-radius);
  box-shadow:var(--ui-shadow-soft);
  min-width:0;
  isolation:isolate;
}
.project-card:hover{border-color:var(--ui-line-strong);box-shadow:var(--ui-shadow);transform:translateY(-5px)}
.project-preview{
  position:relative;
  height:auto;
  aspect-ratio:16/9;
  min-height:210px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--ui-accent) 20%,transparent),transparent 36%),
    linear-gradient(145deg,#17253a,#0d1522);
  border-bottom:1px solid var(--ui-line);
}
html[data-theme="light"] .project-preview{background:radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--ui-accent) 13%,transparent),transparent 38%),linear-gradient(145deg,#eef4fb,#dfe8f4)}
.project-preview img,.project-preview video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  background:#0c1420;
  transition:opacity .25s ease,transform .5s ease;
}
.project-preview.media-broken img,.project-preview.media-broken video{display:none!important}
.project-preview .preview-symbol{
  position:relative;
  z-index:0;
  color:color-mix(in srgb,var(--ui-text) 21%,transparent);
  font-family:var(--display,system-ui,sans-serif);
  font-size:clamp(3.3rem,7vw,6.1rem);
  font-weight:700;
  letter-spacing:-.08em;
  user-select:none;
}
.project-preview.media-broken::after{
  content:"MEDIA NO DISPONIBLE";
  position:absolute;
  left:20px;
  bottom:17px;
  z-index:2;
  color:var(--ui-subtle);
  font:700 .62rem/1.2 ui-monospace,monospace;
  letter-spacing:.12em;
}
.project-preview .status-pill{z-index:3;top:16px;left:16px}
.status-pill{
  color:var(--ui-text)!important;
  background:color-mix(in srgb,var(--ui-surface) 88%,transparent);
  border-color:var(--ui-line-strong);
  font-weight:650;
  box-shadow:0 7px 18px rgba(0,0,0,.14);
}
.card-copy{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;min-height:330px}
.card-copy .eyebrow{margin-bottom:10px}
.card-copy h3{
  margin:0 0 12px;
  color:var(--ui-heading);
  font-size:clamp(1.28rem,1.7vw,1.62rem);
  font-weight:720;
  line-height:1.13;
  letter-spacing:-.035em;
}
.card-copy p{color:var(--ui-muted);font-size:.93rem;line-height:1.62;min-height:0;margin:0 0 18px}
.chips{gap:7px;margin-top:auto}
.chip{
  color:var(--ui-muted);
  background:color-mix(in srgb,var(--ui-surface-3) 86%,transparent);
  border-color:var(--ui-line);
  border-radius:999px;
  padding:6px 10px;
  font-size:.74rem;
  font-weight:600;
}
.card-actions{margin-top:22px;padding-top:18px;border-top:1px solid var(--ui-line)}
.card-actions .btn{min-height:40px}

/* Bento and ordinary content surfaces. */
.bento-block,.panel,.credential,.resource-card,.home-learning-card,.journal-card,.contact-form,.preference-card,.course-module,.lesson-sidebar>div,.sub-panel{
  color:var(--ui-text);
  background:linear-gradient(150deg,var(--ui-surface-2),var(--ui-surface));
  border-color:var(--ui-line)!important;
  box-shadow:var(--ui-shadow-soft);
}
.bento-block.wide{background:radial-gradient(ellipse at 88% 0%,color-mix(in srgb,var(--ui-accent) 13%,transparent),transparent 42%),linear-gradient(150deg,var(--ui-surface-2),var(--ui-surface))}
.bento-block p,.panel p,.credential p,.resource-card p,.journal-card p,.home-learning-card p{color:var(--ui-muted)}
.metric-number{color:var(--ui-heading);font-weight:700}
.event-card{border-color:var(--ui-line)}
.event-date{color:color-mix(in srgb,var(--ui-accent) 55%,#c7dcff 45%);font-weight:700}
.credential{padding:28px 20px 24px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:linear-gradient(150deg,var(--ui-surface-2),var(--ui-surface));box-shadow:var(--ui-shadow-soft)}
.credential:before{display:none}

/* Gallery/media tiles: never expose browser broken-image text. */
.media-tile{background:var(--ui-surface);border-color:var(--ui-line);box-shadow:var(--ui-shadow-soft)}
.media-tile img{min-height:150px;background:var(--ui-surface-3);object-fit:cover}
.media-tile.media-broken img{display:none}
.media-tile.media-broken::before{content:"Imagen no disponible";display:grid;place-items:center;min-height:180px;color:var(--ui-subtle);font:700 .72rem ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.tile-label{color:var(--ui-muted)}

/* Learning, journal and project pages inherit the same readable surfaces. */
.learn-nav,.project-header{box-shadow:0 10px 35px rgba(0,0,0,.12)}
.learning-library,.lesson-page,.journal-page,.shop-page{color:var(--ui-text)}
.course-branch>header small,.lesson-course-index .sidebar-section-label{color:var(--ui-subtle);opacity:1}
.journal-pill{border-color:var(--ui-line-strong);color:var(--ui-muted)}
.rich-text-content,.detail-body-text,.lesson-content{color:var(--ui-text)}
.rich-text-content p,.detail-body-text p,.lesson-content p{color:var(--ui-muted)}

/* Dialogs/preferences: avoid the old hard-coded black panel against light mode. */
#experience-preferences,.detail-dialog,.lightbox,#forum-dialog{
  background:var(--ui-bg-soft)!important;
  color:var(--ui-text)!important;
  border-color:var(--ui-line-strong)!important;
  box-shadow:0 30px 120px rgba(0,0,0,.42)!important;
}
.preferences-head{border-color:var(--ui-line)!important}

/* Footer. */
footer{color:var(--ui-muted);border-color:var(--ui-line)}
footer .brand{color:var(--ui-heading)!important}

/* Compact layout without sacrificing legibility. */
html[data-density="compact"] .card-copy{min-height:300px;padding:20px}
html[data-density="compact"] .project-preview{min-height:185px}

@media(max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-copy{min-height:310px}
}
@media(max-width:760px){
  .section{padding-top:68px;padding-bottom:68px}
  .section-heading{align-items:flex-start;flex-direction:column;gap:10px}
  .cards{grid-template-columns:1fr}
  .project-preview{min-height:0}
  .card-copy{min-height:0}
  .hero{min-height:760px;padding-top:130px}
  .hero-title{font-size:clamp(3.6rem,19vw,7rem)}
  .navbar{padding-left:20px;padding-right:20px}
}
@media(prefers-reduced-motion:reduce){
  .project-card,.project-preview img,.project-preview video{transition:none!important}
}