/**
 * Maestro IM - Rider Inteligente 2D (Refactorización Pro)
 * Archivo: assets/panel/js/agrupaciones/riders/mim-agrupaciones-riders-styles.css
 * 
 * Responsabilidad:
 * - Proveer la identidad visual premium oscura (Dark Mode) de Maestro IM.
 * - Aislar los estilos del Rider para no contaminar el panel general de WordPress.
 * - Definir la cuadrícula estructural (Toolbar, Workspace, Inspector, Dock).
 * - Estilizar los estados interactivos (Hover, Dragging, Seleccionado, Bloqueado).
 */

/* ==========================================================================
   VARIABLES GLOBALES DEL RIDER PRO
   ========================================================================== */
   :root {
    --mim-bg-main: #0B0C10;
    --mim-bg-panel: #111622;
    --mim-bg-card: #151B28;
    
    --mim-border-light: rgba(255, 255, 255, 0.08);
    --mim-border-solid: #232D42;
    
    --mim-text-primary: #F8FAFC;
    --mim-text-secondary: #94A3B8;
    
    --mim-accent-emerald: #10B981; /* Canvas & Geometría */
    --mim-accent-blue: #38BDF8;    /* Audio & Patch */
    --mim-accent-pink: #F472B6;    /* Monitores */
    --mim-accent-amber: #F59E0B;   /* Backline */
    --mim-accent-indigo: #818CF8;  /* Logística */
    --mim-accent-purple: #A855F7;  /* IA & Export */
    --mim-accent-danger: #EF4444;  /* Alertas & Borrado */
}

/* ==========================================================================
   RESETEO Y CONTENEDOR PRINCIPAL
   ========================================================================== */
.mim-rider-editor,
#mim-js-riders-workspace-grid,
#mim-js-agrupaciones-workspace-grid .mim-riders-layout-grid {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.mim-rider-editor *,
.mim-riders-layout-grid * {
    box-sizing: border-box;
}

/* ==========================================================================
   INTERACCIÓN DEL CANVAS SVG (ARRASTRE, CLIC, HOVER)
   ========================================================================== */
.mim-elemento-interactivo {
    cursor: grab;
    transition: filter 0.2s;
}

.mim-elemento-interactivo:active {
    cursor: grabbing;
}

.mim-elemento-interactivo[data-bloqueado="true"] {
    cursor: not-allowed;
}

/* Efecto hover suave solo si no está bloqueado ni siendo arrastrado */
.mim-elemento-interactivo:not([data-bloqueado="true"]):hover circle {
    stroke: var(--mim-accent-emerald);
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4));
}

.mim-tarima:hover rect {
    stroke: var(--mim-accent-emerald);
}

.mim-stage-name-float {
    pointer-events: none;
    user-select: none;
}

/* Scrollbars personalizadas para el área del Canvas y paneles */
.mim-rider-workspace::-webkit-scrollbar,
#mim-stage-inspector-panel::-webkit-scrollbar,
#mim-js-backstage-results::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mim-rider-workspace::-webkit-scrollbar-track,
#mim-stage-inspector-panel::-webkit-scrollbar-track,
#mim-js-backstage-results::-webkit-scrollbar-track {
    background: var(--mim-bg-main);
    border-radius: 4px;
}

.mim-rider-workspace::-webkit-scrollbar-thumb,
#mim-stage-inspector-panel::-webkit-scrollbar-thumb,
#mim-js-backstage-results::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

.mim-rider-workspace::-webkit-scrollbar-thumb:hover,
#mim-stage-inspector-panel::-webkit-scrollbar-thumb:hover,
#mim-js-backstage-results::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* ==========================================================================
   PESTAÑAS INFERIORES (TABS FULL-WIDTH)
   ========================================================================== */
.mim-full-tab {
    position: relative;
    overflow: hidden;
}

.mim-full-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: all 0.2s ease;
    transform: translateX(-50%);
}

.mim-full-tab:hover::after {
    width: 40%;
}

.mim-full-tab.active::after {
    width: 100%;
}

/* ==========================================================================
   ESTILOS DE TABLAS Y FORMULARIOS (INSPECTOR, INPUT LIST, LOGÍSTICA)
   ========================================================================== */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

.mim-rider-editor select option,
.mim-riders-layout-grid select option {
    background: var(--mim-bg-panel);
    color: var(--mim-text-primary);
}

/* Botones de acción estándar */
.mim-rider-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--mim-border-solid);
    color: var(--mim-text-primary);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mim-rider-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--mim-text-secondary);
}

/* ==========================================================================
   TARJETAS DEL CATÁLOGO DE PRODUCCIONES (mim-panel-riders.js)
   ========================================================================== */
.mim-postit {
    position: relative;
    overflow: hidden;
}

.mim-postit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--mim-accent-emerald);
    opacity: 0.8;
}

/* ==========================================================================
   RESPONSIVIDAD (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 992px) {
    /* El Grid pasa de 75/25 a 100% (Canvas arriba, Inspector abajo) */
    .mim-riders-layout-grid {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row !important;
    }
    
    #mim-js-riders-canvas-container {
        min-height: 400px !important;
    }
}

@media (max-width: 768px) {
    .mim-grid-oficina {
        grid-template-columns: 1fr !important;
    }
    
    .mim-rider-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}