/* =========================================================
   NORTE DIGITAL: CORE STYLES & VARIABLES
   ========================================================= */
   :root {
    --primary: #D3795C;      /* Terracota Oficial do Manual */
    --slate-custom: #3C4F5A; /* Cinza Ardósia */
    --petrol: #2A6369;       /* Azul Petróleo */
    --background-light: #FFF8ED; /* Off-White */
}

body {
    background-color: var(--background-light);
    background-image: radial-gradient(var(--slate-custom) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    font-family: 'Open Sans', sans-serif;
    
    /* ATUALIZAÇÃO MOBILE: Performance e prevenção de overflow */
    background-attachment: scroll; 
    overflow-x: hidden;
    width: 100%;
}

@media (min-width: 768px) {
    body { background-attachment: fixed; }
}

/* =========================================================
   UTILITÁRIOS VINTAGE & COMPONENTES FÍSICOS
   ========================================================= */
.retro-shadow {
    box-shadow: 4px 4px 0px 0px var(--slate-custom);
    transition: all 0.1s ease;
}

.retro-shadow:active {
    box-shadow: 0px 0px 0px 0px var(--slate-custom) !important;
    transform: translate(2px, 2px) !important;
}

.window-frame {
    border: 2px solid var(--slate-custom);
}

/* ATUALIZAÇÃO MOBILE: Ajuste de proporção das sombras */
@media (max-width: 640px) {
    .retro-shadow { box-shadow: 3px 3px 0px 0px var(--slate-custom); }
    .window-frame { box-shadow: 4px 4px 0px 0px var(--slate-custom); }
}

/* Animações Globais */
.animate-spin-slow {
    animation: spin 12s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =========================================================
   FLUXOGRAMA INTERATIVO (UX AI MODULE)
   ========================================================= */
.flowchart-node {
    background-color: white;
    border: 2px solid var(--slate-custom);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
}

.flowchart-node:hover, .flowchart-node.active-node {
    background-color: var(--background-light);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px 0px var(--petrol);
    border-color: var(--petrol);
}

.flowchart-node:hover .node-icon, .flowchart-node.active-node .node-icon {
    color: var(--primary);
}

/* ATUALIZAÇÃO MOBILE: Feedback visual táctil */
.flowchart-node:active {
    transform: scale(0.98);
    background-color: var(--background-light);
}

/* Simulação de cabos esquemáticos por trás dos cards */
.flowchart-circuit::before {
    content: '';
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 50%;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      var(--slate-custom) 0,
      var(--slate-custom) 4px,
      transparent 4px,
      transparent 8px
    );
    z-index: 0;
    opacity: 0.15;
}

@media (max-width: 640px) {
    .flowchart-circuit::before { left: 1.5rem; }
}