:root {
    --controls-v-padding: 8px;              /* Padding vertical controles */
    --controls-h-padding: 12px;             /* Padding horizontal controles */
    --controls-gap: 6px;                    /* Espacio entre botones de control */
    --button-base-width: 38px;              /* Ancho/Alto base botón control */
    /* Cálculo para wrap en portrait */
    --button-width-plus-gap: calc(var(--button-base-width) + var(--controls-gap));
}

/* --- Lienzo de Dibujo --- */
#pizarraCanvas {
    display: block; width: 100%; height: 100%;
    background-color: var(--bg-darker);
    cursor: crosshair;
    touch-action: none; /* Previene scroll/zoom mientras se dibuja */
    position: absolute; top: 0; left: 0; z-index: 1; /* Detrás de los controles */
}

/* --- Contenedor de Controles Inferior (Colores + Acciones Landscape) --- */
#controles-bottom {
    position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 95%; /* Ancho basado en contenido, máximo 95% */
    padding: var(--controls-v-padding) var(--controls-h-padding);
    background-color: var(--bg-color);
    border-radius: calc(var(--border-radius-lg) * 1.5); /* Más redondeado */
    display: flex; flex-wrap: nowrap; /* No wrap por defecto (landscape) */
    justify-content: center; align-items: center; gap: var(--controls-gap);
    z-index: 10; /* Encima del canvas */
    overflow-x: auto; /* Scroll horizontal si no caben (landscape) */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    scrollbar-width: thin; /* Estilo scrollbar */
}
/* Estilos scrollbar para Webkit (Chrome, Safari) */
#controles-bottom::-webkit-scrollbar { height: 4px; }
#controles-bottom::-webkit-scrollbar-thumb { background-color: var(--bg-color); border-radius: 2px; }
#controles-bottom::-webkit-scrollbar-track { background: transparent; }

/* --- Contenedor de Controles Superior (Acciones Portrait) --- */
#controles-top {
    position: fixed; top: 10px; left: 0; right: 0;
    width: 100%; max-width: 100%;
    padding: calc(var(--controls-v-padding) - 2px) var(--controls-h-padding);
    background: transparent; /* El fondo lo tendrán los botones */
    display: none; /* Oculto por defecto, visible en portrait */
    justify-content: space-between; align-items: center;
    z-index: 10; /* Encima del canvas */
    pointer-events: none; /* Permite clicks "a través" del contenedor */
}
#controles-top > * { /* Estilos comunes para botones dentro del top */
    pointer-events: auto; /* Habilita interacción con los botones */
    background-color: var(--bg-color);
}
/* Centrar el botón del medio (Limpiar) */
#controles-top > *:nth-child(2) {
    position: absolute; left: 50%; transform: translateX(-50%);
}

/* --- Estilo Común para Botones de Control (Color y Acción) --- */
.control-button {
    width: var(--button-base-width); height: var(--button-base-width);
    border-radius: var(--border-radius-lg);
    border: 2px solid transparent; /* Borde inicial transparente */
    background-color: var(--bg-color); /* Usa color de botón de navegación */
    cursor: pointer; padding: 0;
    display: inline-flex; /* Alinea ícono/contenido */
    justify-content: center; align-items: center;
    font-size: 1.6em; /* Tamaño del ícono */
    color: var(--button-text-color);
    flex-shrink: 0; /* Evita que se encojan */
    opacity: 0; /* Para animación de entrada */
    animation: popInButton 0.5s ease-out forwards; /* Animación entrada */
    outline: none; /* Quita outline por defecto */
    text-decoration: none; /* Quita subrayado si es <a> */
    -webkit-tap-highlight-color: transparent; /* Sin highlight azul en mobile */
    user-select: none; /* Evita selección de ícono */
}

/* --- Estilo Botones de Color --- */
.color-button {
    font-size: 0; /* Oculta texto si lo hubiera accidentalmente */
}
.color-button.selected {
    border-color: var(--front-darkest);
    transform: scale(1.1);
}
.color-button:not(.selected):hover {
    transform: scale(1.08);
}

/* --- Estados Hover, Active, Focus para botones de ACCIÓN --- */
.action-button:not(:disabled):hover {
    background-color: var(--nav-button-hover-bg);
    transform: scale(1.05);
    &.action-button-center { transform: translateX(-50%) scale(1.05); } /* Caso especial botón centrado top */
}
/* :focus-visible hereda de style.css, pero ajustamos transform y fondo */
.action-button:not(:disabled):focus-visible {
     background-color: var(--nav-button-hover-bg);
     transform: scale(1.05);
     &.action-button-center { transform: translateX(-50%) scale(1.05); }
}
.action-button:not(:disabled):active {
    background-color: var(--nav-button-active-bg);
    transform: scale(0.97);
    &.action-button-center { transform: translateX(-50%) scale(0.97); }
}
/* Active para botones de color (más sutil) */
.color-button:active {
    transform: scale(0.95);
}

/* Botones Deshabilitados (usa :disabled pseudo-clase y variable global) */
.control-button:disabled {
    cursor: not-allowed;
    background-color: var(--bg-color); /* Mantiene fondo nav */
    transform: none !important; /* Sobrescribe transforms */
    box-shadow: none !important; /* Sin sombra */
    border-color: transparent !important; /* Sin borde especial */
}

/* Separador visual (solo en la barra inferior en landscape) */
.separator-bottom {
    width: 1px; height: 25px; background-color: var(--border-color);
    margin: 0 4px; /* Espacio alrededor */
    flex-shrink: 0; opacity: 0; /* Para animación */
    animation: popInButton 0.5s ease-out forwards;
    align-self: center; /* Centra verticalmente en la barra */
}

/* --- Animación PopIn --- */
@keyframes popInButton {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
/* Animación específica para botón central superior */
#controles-top > *:nth-child(2) { animation-name: popInButtonCenter; }
@keyframes popInButtonCenter {
    from { opacity: 0; transform: translateX(-50%) scale(0.8); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* --- Animación Escalonada (Base) --- */
/* Delay base para que aparezcan después de cargar */
#controles-bottom > *, #controles-top > * { animation-delay: 0.1s; }

/* --- Animación Escalonada Inferior (12 colores + sep + 3 acciones) --- */
/* Se aplica un delay creciente a cada elemento hijo directo */
#controles-bottom > *:nth-child(1) { animation-delay: 0.1s; }
#controles-bottom > *:nth-child(2) { animation-delay: 0.15s; }
#controles-bottom > *:nth-child(3) { animation-delay: 0.2s; }
#controles-bottom > *:nth-child(4) { animation-delay: 0.25s; }
#controles-bottom > *:nth-child(5) { animation-delay: 0.3s; }
#controles-bottom > *:nth-child(6) { animation-delay: 0.35s; }
#controles-bottom > *:nth-child(7) { animation-delay: 0.4s; }
#controles-bottom > *:nth-child(8) { animation-delay: 0.45s; }
#controles-bottom > *:nth-child(9) { animation-delay: 0.5s; }
#controles-bottom > *:nth-child(10) { animation-delay: 0.55s; } /* Blanco */
#controles-bottom > *:nth-child(11) { animation-delay: 0.6s; }  /* Gris */
#controles-bottom > *:nth-child(12) { animation-delay: 0.65s; } /* Negro */
/* Separador y Acciones (índices basados en su posición en el HTML) */
#controles-bottom > .separator-bottom { animation-delay: 0.7s; }
#controles-bottom > .action-button-bottom:nth-of-type(1) { animation-delay: 0.75s; } /* Volver */
#controles-bottom > .action-button-bottom:nth-of-type(2) { animation-delay: 0.8s; }  /* Limpiar */
#controles-bottom > .action-button-bottom:nth-of-type(3) { animation-delay: 0.85s; } /* Deshacer */

/* --- Animación Escalonada Superior (Portrait: Volver - Limpiar - Deshacer) --- */
#controles-top > *:nth-child(1) { animation-delay: 0.1s; } /* Volver (Izquierda) */
#controles-top > *:nth-child(2) { animation-delay: 0.15s; } /* Limpiar (Centro) */
#controles-top > *:nth-child(3) { animation-delay: 0.2s; } /* Deshacer (Derecha) */


/* --- Media Queries para Responsividad y Orientación --- */

/* Estilos para Orientación Vertical (Portrait) */
@media (orientation: portrait) {
    #controles-top { display: flex; } /* Muestra controles superiores */
    #controles-bottom {
         flex-wrap: wrap; /* Permite que los colores pasen a la siguiente línea */
         justify-content: center;
         overflow-x: hidden; /* Oculta scroll horizontal */
         /* Forzar wrap después de 6 elementos: Ancho = 6 * (ancho botón + gap) + padding*2 */
         width: calc(6 * var(--button-width-plus-gap) + 2 * var(--controls-h-padding));
         max-width: 95%; /* Límite de ancho */
    }
    /* Oculta acciones y separador de la barra inferior en portrait */
    #controles-bottom .action-button-bottom,
    #controles-bottom .separator-bottom { display: none; }

     /* Ajustes para pantallas pequeñas en vertical (ej: menos de 380px de ancho) */
     @media (max-width: 380px) {
         :root { /* Reducir tamaño botones y gap */
             --button-base-width: 34px;
             --controls-gap: 4px;
             --button-width-plus-gap: calc(var(--button-base-width) + var(--controls-gap));
         }
         .control-button { width: var(--button-base-width); height: var(--button-base-width); }
         #controles-bottom {
            bottom: 5px; padding: 6px 8px; gap: var(--controls-gap);
            /* Recalcular ancho para botones más pequeños y wrap en 6 */
            width: calc(6 * var(--button-width-plus-gap) + 2 * 8px);
         }
         #controles-top { top: 5px; padding: 4px 10px; }
         #controles-top .control-button { width: var(--button-base-width); height: var(--button-base-width); font-size: 1.5em; }
         .back-icon-button { font-size: 1.4em; }
     }
}

/* Estilos para Teléfonos en Horizontal (Landscape) y pantallas MUY bajas */
@media (orientation: landscape) and (max-height: 450px) {
     :root { /* Reducir tamaño y gap en landscape bajo */
         --button-base-width: 32px;
         --controls-gap: 4px;
         --button-width-plus-gap: calc(var(--button-base-width) + var(--controls-gap));
     }
    #controles-bottom {
        flex-wrap: nowrap; /* Asegura que esté en una línea */
        overflow-x: auto; /* Permite scroll si no cabe */
        padding: 4px 8px; gap: var(--controls-gap); bottom: 5px;
        width: max-content; /* Ancho automático basado en contenido */
    }
    .control-button { width: var(--button-base-width); height: var(--button-base-width); font-size: 1.3em; }
    .back-icon-button { font-size: 1.2em; }
    .separator-bottom { height: 20px; margin: 0 2px; } /* Más pequeño */
    #controles-top { display: none; } /* Oculta controles superiores */
}