/* === Tipografía escolar === */
@font-face{
  font-family:'EscolarG';
  src:url('escolar_G.woff2') format('woff2');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#fafbfe;
  --bar:#f7f7fb;
  --border:#e6e6f2;
  --text:#1f2340;
  --muted:#636a8a;
  --btn:#ffffff;

  /* Altura visible del asa/botón del panel (mantiene el canvas despejado) */
  --handle-h:44px;
  --strip-h: var(--handle-h);

  /* Panel look & feel */
  --panel-radius: 14px;
  --panel-bg: color-mix(in srgb, #ffffff 92%, transparent);
  --panel-shadow: 0 12px 30px rgba(31,35,64,0.12);
}

html,body{
  height:100%; margin:0;
  background:var(--bg); color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Lienzo ===== */
#container{
  position:fixed; top:0; left:0; right:0;
  bottom:calc(var(--strip-h) + env(safe-area-inset-bottom,0px));
  z-index: 1; /* Permite que elementos con z-index mayor aparezcan encima */
}

/* ===== Panel inferior (animado) ===== */
#details-panel{
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(8px + env(safe-area-inset-bottom,0px));
  z-index: 1000;

  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: var(--panel-shadow);
  overflow: hidden;

  /* oculto el cuerpo dejando visible el asa */
  transform: translateY(calc(100% - var(--handle-h)));
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

/* abierto: panel arriba del todo */
#details-panel:not(.collapsed){
  transform: translateY(0);
}

/* Botón/asa del panel (bonito) */
#details-toggle{
  appearance:none; border:0; width:100%;
  height: var(--handle-h);
  background: linear-gradient(#fff, #f7f8ff);
  display:flex; align-items:center; justify-content:center;
  gap:10px; cursor:pointer;
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#1f2340;
  box-shadow: inset 0 1px 0 #ffffff;
}
#details-toggle:hover{ background: linear-gradient(#fff, #f2f4ff); }
#details-toggle:active{ background: linear-gradient(#f7f8ff, #eef0ff); }
#details-toggle .ico{ width:18px; height:18px; display:inline-block; }
#details-toggle .caret{
  width:18px; height:18px; display:inline-block;
  transform: rotate(180deg);
  transition: transform .25s ease;
}
/* cuando está colapsado, la flecha apunta hacia arriba */
#details-panel.collapsed #details-toggle .caret{ transform: rotate(0deg); }

/* Cuerpo del panel */
#details-body{
  padding: 12px 16px 16px;
}
#details-panel #details-body{ margin-top:0; } /* mantiene compat */

/* Tipografía escolar en textos clave */
#status{
  font-weight:600;
  font-family:'EscolarG', sans-serif;
  font-size:22px;
}
#breakdown{
  display:grid; grid-template-columns:140px 1fr;
  gap:4px 12px; margin-top:8px;
  font-family:'EscolarG', sans-serif; font-size:18px;
}
#mode-hint, #sum-info, #challenge{
  color:var(--muted);
  font-family:'EscolarG', sans-serif;
}

/* Colores C, D, U */
.c{ color:#2ecc71; font-weight:700; }
.d{ color:#ff3b30; font-weight:700; }
.u{ color:#1f78ff; font-weight:700; }

/* ===== Toolbox flotante ===== */
.toolbox{
  position:fixed; top:14px; left:14px;
  background:var(--bar);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:1200;
  box-sizing:border-box;
}

/* Cabecera (si la usas) */
.toolbox-handle{
  padding:10px 14px; min-height:44px;
  display:flex; align-items:center; gap:8px;
  font-weight:600; cursor:grab;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.9);
  border-top-left-radius:12px; border-top-right-radius:12px;
}
.toolbox-handle:active{ cursor:grabbing; }

/* Contenedor de botones */
#toolbox-content{
  display:flex; flex-wrap:nowrap;
  gap:0; padding:0; /* 🔒 sin huecos en desktop */
}

/* Botones estilo Photoshop */
.tool-btn{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  background:var(--btn);
  cursor:pointer;
  font-size:20px;
  margin:0; padding:0;
  line-height:1;
  transition:background .15s;
  border-radius:0;          /* sin esquinas salvo extremos */
}
.tool-btn + .tool-btn{ border-left:none; }

/* esquinas solo en extremos (desktop) */
.tool-btn:first-child{
  border-top-left-radius:8px; border-bottom-left-radius:8px;
}
.tool-btn:last-child{
  border-top-right-radius:8px; border-bottom-right-radius:8px;
}

/* Estados */
.tool-btn:hover{ background:#f0f0f5; }
.tool-btn:active{ background:#e7e7f2; }
.tool-btn:focus-visible{ outline:2px solid #6c5ce7; outline-offset:2px; }
.tool-btn .icon{ pointer-events:none; }
.tool-btn svg{ width:22px; height:22px; display:block; }

/* ===== Responsive ===== */
@media (max-width: 720px){
  .toolbox{ max-width:94vw; }

  /* En móvil, la botonera hace wrap y separa botones en 2 filas */
  #toolbox-content{
    flex-wrap: wrap;
    gap: 6px;            /* separamos botones, ya no unimos bordes */
    padding: 8px;
  }
  .tool-btn{
    border-radius:8px;   /* cada botón redondeado */
    border:1px solid var(--border);
  }
  .tool-btn + .tool-btn{ border-left:1px solid var(--border); } /* anulamos el “pegado” */
}

/* Panel responsive: márgenes más pequeños */
@media (max-width: 600px){
  #details-panel{
    left: 8px; right: 8px;
  }
  #details-body{
    padding: 10px 12px 12px;
  }
}

/* Tirador para mover la toolbox */
.toolbox .tb-drag-handle{
  width: 10px; height: 44px; margin-right: 6px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      to bottom,
      #ddd 0, #ddd 2px, transparent 2px, transparent 4px
    );
  cursor: grab;
  flex: 0 0 auto;
}
.toolbox .tb-drag-handle:active{ cursor: grabbing; }
@media (max-width: 540px){
  .toolbox .tb-drag-handle{ height: 40px; }
}
/* Marca de agua fija al margen derecho, siempre visible sobre el canvas */
.board-watermark {
  position: absolute;
  right: 16px;              /* separación del borde derecho */
  top: 50%;
  transform: translateY(-50%);
  opacity: .12;             /* ajusta opacidad a gusto */
  max-width: min(22vw, 220px);
  height: auto;
  z-index: 20;              /* por encima del canvas */
  pointer-events: none;     /* no bloquea clics/drag del tablero */
  user-select: none;
}