:root{
  --ink:#10233f;
  --muted:#64748b;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --purple:#7c3aed;
  --green:#16a34a;
  --red:#dc2626;
  --surface:rgba(255,255,255,.91);
  --line:#dbe7f5;
  --shadow:0 22px 60px rgba(30,64,175,.16);
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,body{
  min-height:100%;
}

body{
  margin:0;
  font-family:Inter,ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 5% -8%,rgba(6,182,212,.22),transparent 58%),
    radial-gradient(900px 620px at 98% 0%,rgba(249,115,22,.16),transparent 58%),
    linear-gradient(135deg,#eaf7ff 0%,#f5f3ff 50%,#fff9e8 100%);
  overflow-x:hidden;
}

button{
  font:inherit;
}

.app{
  width:min(1500px,100%);
  min-height:100dvh;
  margin:0 auto;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hero{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  padding:13px 17px;
  color:#fff;
  background:linear-gradient(120deg,#0f4bd8 0%,#2563eb 44%,#7c3aed 100%);
  box-shadow:0 18px 42px rgba(30,64,175,.22);
}

.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.11);
  pointer-events:none;
}

.hero::before{
  width:210px;
  height:210px;
  left:-70px;
  top:-140px;
}

.hero::after{
  width:170px;
  height:170px;
  right:-45px;
  bottom:-120px;
}

.heroInner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:13px;
  align-items:center;
}

.heroIcon{
  width:52px;
  height:52px;
  border-radius:17px;
  display:grid;
  place-items:center;
  font-size:29px;
  color:#173a7a;
  background:linear-gradient(145deg,#fff,#e6f6ff);
  box-shadow:0 12px 26px rgba(15,23,42,.22);
}

.hero h1{
  margin:0;
  font-size:clamp(27px,3.7vw,45px);
  line-height:1;
  letter-spacing:-.04em;
}

.hero p{
  margin:5px 0 0;
  font-size:clamp(12px,1.4vw,16px);
  font-weight:700;
  opacity:.95;
}

.fullscreenBtn{
  align-self:start;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.16);
  color:#fff;
  padding:9px 12px;
  border-radius:14px;
  cursor:pointer;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}

.fullscreenBtn:hover{
  background:rgba(255,255,255,.24);
}

.fullscreenBtn.active{
  background:#111827;
  border-color:#111827;
}

.layout{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:370px minmax(0,1fr);
  gap:12px;
}

.panel,
.viewerCard{
  min-height:0;
  background:var(--surface);
  border:1px solid rgba(255,255,255,.84);
  border-radius:24px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.panel{
  padding:13px;
  overflow:auto;
  scrollbar-width:thin;
}

.panelTitle,
.sectionHead,
.viewerTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.panelTitle{
  margin-bottom:9px;
}

.panelTitle h2,
.viewerTop h2{
  margin:0;
  font-weight:1000;
  letter-spacing:-.025em;
}

.panelTitle h2{
  font-size:21px;
}

.tag{
  padding:5px 9px;
  border-radius:999px;
  background:#ede9fe;
  color:#6d28d9;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.infoBlock,
.paletteBlock,
.progressBlock,
.research{
  margin-top:9px;
  padding:11px;
  border-radius:17px;
  border:1px solid #e2e8f0;
  background:#fff;
}

h3{
  margin:0 0 6px;
  font-size:13px;
  color:#0f3f9f;
}

p,li{
  font-size:12px;
  line-height:1.42;
  color:var(--muted);
}

p{
  margin:5px 0;
}

#paleta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0;
}

.color{
  position:relative;
  width:43px;
  height:43px;
  padding:0;
  border-radius:50%;
  border:3px solid #111827;
  background:var(--swatch,#fff);
  cursor:pointer;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.32),
    0 7px 14px rgba(15,23,42,.12);
  transition:transform .12s ease,box-shadow .12s ease;
}

.color:hover{
  transform:translateY(-2px);
}

.color.activo{
  outline:5px solid #111827;
  outline-offset:4px;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.35),
    0 0 0 10px rgba(37,99,235,.16);
}

.eraser-btn{
  background:#fff;
  display:grid;
  place-items:center;
}

.eraser-icon{
  position:relative;
  width:29px;
  height:16px;
  display:flex;
  transform:rotate(-17deg);
  border:2px solid #111827;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(15,23,42,.15);
  pointer-events:none;
}

.eraser-pink{
  width:45%;
  background:linear-gradient(135deg,#fda4af,#fb7185);
}

.eraser-white{
  flex:1;
  background:linear-gradient(135deg,#fff,#e5e7eb);
}

.selectedColor{
  padding:8px 10px;
  border-radius:13px;
  background:#f8fbff;
  border:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
}

.sectionHead h3{
  margin:0;
}

.timePill{
  padding:5px 8px;
  border-radius:999px;
  background:#eef6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
  font-size:10px;
  font-weight:900;
}

.statsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:9px;
}

.statCard{
  padding:9px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}

.statCard span{
  display:block;
  font-size:10px;
  color:var(--muted);
}

.statCard strong{
  display:block;
  margin-top:3px;
  font-size:17px;
}

.status{
  margin-top:8px;
  padding:9px 10px;
  border-radius:13px;
  font-size:11px;
  font-weight:900;
}

.status.good{
  color:#166534;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
}

.status.bad{
  color:#991b1b;
  background:#fef2f2;
  border:1px solid #fecaca;
}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}

.actions button{
  border:1px solid #dbe7f5;
  background:#fff;
  color:var(--ink);
  border-radius:13px;
  padding:9px 10px;
  cursor:pointer;
  font-size:11px;
  font-weight:900;
  box-shadow:0 5px 12px rgba(15,23,42,.06);
}

.actions button.primary{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  border-color:transparent;
}

.research summary{
  cursor:pointer;
  font-size:12px;
  font-weight:950;
  color:#0f3f9f;
}

#preguntas{
  padding-left:20px;
  margin-bottom:0;
}

.viewerCard{
  padding:12px;
  display:flex;
  flex-direction:column;
}

.viewerTop{
  padding:3px 4px 10px;
}

.viewerTop h2{
  margin-top:3px;
  font-size:22px;
}

.viewerEyebrow{
  font-size:10px;
  font-weight:950;
  color:#6d28d9;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.viewerHint{
  padding:7px 10px;
  border-radius:999px;
  background:#eef6ff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  font-size:10px;
  font-weight:900;
  text-align:center;
}

#viewer{
  position:relative;
  flex:1;
  min-height:500px;
  overflow:hidden;
  border-radius:19px;
  border:1px solid #dbe7f5;
  background:
    radial-gradient(circle at 50% 40%,#ffffff 0%,#eef6ff 58%,#dbeafe 100%);
}

#viewer canvas{
  width:100%!important;
  height:100%!important;
  display:block;
  touch-action:none;
}

.aviso{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:30;
  width:min(680px,calc(100vw - 32px));
  padding:13px 16px;
  border-radius:15px;
  background:#fff;
  color:#991b1b;
  border:2px solid #fecaca;
  box-shadow:0 18px 42px rgba(15,23,42,.22);
  text-align:center;
  font-size:12px;
  font-weight:900;
}

.oculto{
  display:none;
}

@media(max-height:760px) and (min-width:861px){
  .app{padding:6px;gap:6px}
  .hero{padding:9px 13px}
  .heroIcon{width:43px;height:43px;font-size:24px}
  .hero h1{font-size:31px}
  .hero p{font-size:11px;margin-top:3px}
  .layout{grid-template-columns:330px minmax(0,1fr);gap:8px}
  .panel,.viewerCard{padding:9px}
  #viewer{min-height:430px}
  .infoBlock,.paletteBlock,.progressBlock,.research{padding:9px}
}

@media(max-width:860px){
  .heroInner{
    grid-template-columns:auto 1fr;
  }

  .fullscreenBtn{
    grid-column:1/-1;
    width:100%;
  }

  .layout{
    grid-template-columns:1fr;
  }

  .viewerCard{
    order:1;
  }

  .panel{
    order:2;
  }

  #viewer{
    min-height:58vh;
  }
}

@media(max-width:560px){
  .app{padding:6px}

  .hero{
    padding:10px 12px;
    border-radius:20px;
  }

  .heroIcon{
    width:42px;
    height:42px;
    font-size:23px;
  }

  .hero h1{
    font-size:26px;
  }

  .hero p{
    font-size:11px;
  }

  .viewerTop{
    align-items:flex-start;
    flex-direction:column;
  }

  #viewer{
    min-height:52vh;
  }

  .statsGrid,
  .actions{
    grid-template-columns:1fr;
  }

  .color{
    width:40px;
    height:40px;
  }
}


/* Paleta simétrica: 4 círculos arriba y 4 abajo */
#paleta{
  display:grid;
  grid-template-columns:repeat(4,43px);
  justify-content:start;
  align-items:center;
  gap:14px 16px;
  margin:12px 0;
}

@media(max-width:560px){
  #paleta{
    grid-template-columns:repeat(4,40px);
    gap:12px 14px;
  }
}