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

    /* Resaltado del script en ejecución (verde) o con error (rojo), F4-S4 */
    .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); }

    /* F8-S2: 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 */

    /* F8-S3: 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; }
    /* F8-S3: 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;
    }

    /* F8-R2-S2: el campo del nombre de "variable local" y "repetir con" se ve
       como un CHIP (pastilla naranja oscuro, texto blanco), no como un cuadro de
       texto: es la misma familia visual que el chip arrastrable botcito_local_get
       (de él se saca el chip arrastrando; tocarlo lo renombra). Los selectores
       usan la clase de TIPO del <g> del bloque + hijo directo, para no teñir
       campos de bloques anidados en sus huecos. */
    g.botcito_local > g.blocklyTextInputField > rect.blocklyFieldRect,
    g.botcito_for > g.blocklyTextInputField > rect.blocklyFieldRect {
      /* !important: Blockly pinta el fondo del campo por estilo inline.
         Mismos colores que el chip arrastrable (local_variable_blocks:
         primario de cuerpo + terciario de borde); el TAMAÑO de pastilla lo
         pone el campo FieldLocalName (blocks/botcito.js), no este CSS. */
      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; cada categoría lleva su
       clase (ver abajo), así que el orden no importa. */
    .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 de categoría por CLASE (fase BP): el color sigue a la
       categoría aunque el perfil de placa cambie el orden u oculte alguna.
       Reemplaza las reglas posicionales nth-child, que se rompían al filtrar.
       La clase la pone cssconfig.icon en src/toolbox.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; }