/* UI Estilo Aplicación (Viewport completo) */
body, html { overflow: hidden; height: 100%; }
.main-wrapper { height: calc(100vh - 100px); }

/* Barra lateral Pro (Acordeón) */
.sidebar-tools {
    width: 320px;
    background: white;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 2px 0 10px rgba(0,0,0,0.05);
    z-index: 1000;
}
.tools-header { padding: 0.75rem; border-bottom: 1px solid #eee; background-color: #f8f9fa; }
.tools-body { 
    flex-grow: 1; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
}

/* Personalización del Acordeón */
.accordion-button { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.accordion-button:not(.collapsed) { background-color: #e8f5e9; color: var(--verde-hierba); }
.accordion-body { padding: 1rem 0.75rem; max-height: 400px; overflow-y: auto; }

/* Grillas de Elementos (Drag Sources) */
.element-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* Cartas de Inventario (Plantas y Objetos) */
.tool-item-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 6px;
    text-align: center;
    background: white;
    transition: all 0.2s;
    cursor: grab;
}
.tool-item-card:hover { border-color: var(--verde-hierba); background-color: #f9fdf9; transform: translateY(-2px); }
.tool-item-card img { width: 45px; height: 45px; object-fit: contain; border-radius: 4px; }
.tool-item-card span { font-size: 0.65rem; display: block; margin-top: 3px; color: #555; line-height: 1.1; }

/* Botones de Formas (Shapes) */
.shape-btn {
    width: 100%;
    height: 60px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}
.shape-btn:hover { background: #e9ecef; border-color: #ccc; }
.shape-btn i { font-size: 1.5rem; color: #555; }
.shape-btn span { font-size: 0.7rem; color: #666; margin-top: 2px; }

/* Canvas Wrapper */
.canvas-wrapper {
    flex-grow: 1;
    background-color: #f4f4f4;
    background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
    background-size: 20px 20px;
    position: relative;
}

/* Por defecto, el aviso de móvil está oculto */
.planner-mobile-notice {
    display: none;
}
/* En pantallas pequeñas (móviles y tablets verticales) */
@media (max-width: 991px) {
    .planner-section {
        display: none !important; /* Oculta todo el planificador */
    }
    .planner-mobile-notice {
        display: block !important; /* Muestra el mensaje informativo */
    }
}