html, body { margin: 0; height: 100%; overflow: hidden; }
    #blocklyDiv { width: 100%; height: 100%; }

    /* Resaltado de ejecución (D-4): glow verde en el script corriendo, rojo en
       el bloque con error. Aplicado al <g> del bloque por window.botcito.*. */
    .botcito-running { filter: drop-shadow(0 0 6px #59C059) drop-shadow(0 0 6px #59C059); }
    .botcito-error { filter: drop-shadow(0 0 7px #E53935) drop-shadow(0 0 7px #E53935); }

    /* K-2 (= F8-S2 del hermano): sin barras de scroll (más espacio para
       programar). Se ocultan las barras SVG de Blockly (lienzo Y flyout: ambas
       son .blocklyScrollbarVertical/Horizontal) y la barra NATIVA de la lista de
       categorías (WebView Chromium). Las barras quedan ACTIVAS en el inject
       (move.scrollbars:true) para conservar el arrastre del lienzo; acá solo se
       ocultan. Son overlays: no dejan hueco. */
    .blocklyScrollbarVertical,
    .blocklyScrollbarHorizontal { display: none !important; }
    .blocklyToolbox { scrollbar-width: none; }            /* Firefox */
    .blocklyToolbox::-webkit-scrollbar { display: none; } /* Chromium/WebView */

    /* K-3 (= F8-S3 del hermano): se oculta el ícono de la papelera integrada de
       Blockly. El objeto papelera sigue ACTIVO (registra los bloques borrados); el
       panel de borrados se abre desde el basurero del grupo de controles
       (botcito.toggleTrash). */
    .blocklyTrash { display: none; }
    /* K-3: fondo celeste claro semitransparente para los paneles de bloques. El
       flyout de categorías y el de la papelera comparten .blocklyFlyoutBackground,
       así que ambos quedan del mismo celeste. */
    .blocklyFlyoutBackground {
      fill: #EAF2F8 !important;
      fill-opacity: 0.9 !important;
    }

    /* K-10 (= F8-R2-S2): el campo del nombre de "variable local" y "repetir con" se
       ve como un CHIP (pastilla naranja oscuro, texto blanco), la misma familia
       visual que el chip arrastrable botcito_local_get. Los selectores usan la clase
       de TIPO del <g> del bloque + hijo directo, para no teñir campos de bloques
       anidados en sus huecos. El TAMAÑO de pastilla lo pone FieldLocalName. */
    g.botcito_local > g.blocklyTextInputField > rect.blocklyFieldRect,
    g.botcito_for > g.blocklyTextInputField > rect.blocklyFieldRect {
      /* !important: Blockly pinta el fondo del campo por estilo inline. */
      fill: #C46A10 !important;
      stroke: #9A520C !important;
    }
    g.botcito_local > g.blocklyTextInputField > text.blocklyFieldText,
    g.botcito_for > g.blocklyTextInputField > text.blocklyFieldText {
      fill: #FFFFFF !important;
    }

    /* Toolbox estilo Scratch 3: circulitos de color en vez de tiras laterales.
       Los colores repiten la paleta de src/theme.js en el MISMO ORDEN que las
       categorías del toolbox (src/toolbox.js); si se reordena, actualizar acá. */
    .blocklyToolboxCategory {
      border-left: none !important;
      /* !important: Blockly pone padding-left:0 inline al no haber jerarquía */
      padding: 8px 12px 8px 10px !important;
    }
    .blocklyToolboxCategoryIcon {
      /* Blockly lo oculta cuando la categoría no define icono; acá ES el icono. */
      visibility: visible !important;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      margin-right: 8px;
      vertical-align: middle;
    }
    .blocklyToolboxCategoryLabel {
      vertical-align: middle;
      font-weight: bold;
    }
    /* Circulitos por CLASE de categoría (fase BP; antes CSS posicional
       nth-child): el perfil de placa puede filtrar/reordenar categorías, así
       que el color ahora SIGUE a la categoría vía su cssconfig (catCss en
       src/toolbox.js). Colores = paleta de src/theme.js. */
    .botcito-cat-icon-control   { background: #FFAB19; }
    .botcito-cat-icon-operators { background: #59C059; }
    .botcito-cat-icon-variables { background: #FF8C1A; }
    .botcito-cat-icon-pins      { background: #4C97FF; }
    .botcito-cat-icon-motors    { background: #0FBD8C; }
    .botcito-cat-icon-sound     { background: #CF63CF; }
    .botcito-cat-icon-lights    { background: #00BCD4; }
    .botcito-cat-icon-sensors   { background: #5CB1D6; }
    .botcito-cat-icon-screen    { background: #5C6BC0; }
    .botcito-cat-icon-faces     { background: #EF5350; }
    .botcito-cat-icon-console   { background: #9966FF; }
    .botcito-cat-icon-functions { background: #FF6680; }

    /* Diálogos propios (alert/confirm/prompt de Blockly) */
    .botcito-dialog-overlay {
      position: fixed; inset: 0; z-index: 100;
      background: rgba(0, 0, 0, 0.4);
      display: flex; align-items: center; justify-content: center;
    }
    .botcito-dialog {
      background: #fff; border-radius: 12px; padding: 16px;
      min-width: 240px; max-width: 80%;
      font-family: sans-serif; font-size: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    .botcito-dialog p { margin: 0; }
    .botcito-dialog input {
      width: 100%; box-sizing: border-box;
      font-size: 16px; padding: 6px; margin-top: 12px;
    }
    .botcito-dialog-buttons {
      display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
    }
    .botcito-dialog-buttons button {
      font-size: 15px; padding: 8px 16px;
      border: 0; border-radius: 8px; background: #e0e0e0;
    }
    .botcito-dialog-buttons button.primary { background: #4C97FF; color: #fff; }