/* =============================================================================
   MaaSAI Data Integrator: tema del editor Node-RED
   Paleta oficial:  navy #223F61 - orange #E78C3A - sand #D8D1BE
                    off-white #F3F2EE - ink #262626
   Tipografía: Outfit (Google Fonts, con fallback a sans del sistema)
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --maasai-navy: #223F61;
    --maasai-navy-dark: #1a324e;
    --maasai-orange: #E78C3A;
    --maasai-orange-dark: #d97b25;
    --maasai-sand: #D8D1BE;
    --maasai-bg: #F3F2EE;
    --maasai-ink: #262626;

    /* -------------------------------------------------------------------------
       Variables propias de Node-RED 4.x: aquí es donde vive el "rojo Node-RED".
       Se remapean las de identidad de marca a la paleta MaaSAI. Los rojos
       semánticos (errores, debug, diffs, notificaciones) se dejan intactos.
       ------------------------------------------------------------------------- */

    /* Botones primarios de diálogos (Aceptar, Instalar, Guardar...) */
    --red-ui-workspace-button-background-primary: var(--maasai-navy);
    --red-ui-workspace-button-background-primary-hover: var(--maasai-navy-dark);

    /* Botón Deploy y su desplegable */
    --red-ui-deploy-button-background: var(--maasai-orange);
    --red-ui-deploy-button-background-hover: var(--maasai-orange-dark);
    --red-ui-deploy-button-background-active: #c96f1e;
    --red-ui-deploy-button-color: var(--maasai-ink);
    --red-ui-deploy-button-color-active: var(--maasai-ink);

    /* Cabecera y sus menus desplegables */
    --red-ui-header-background: var(--maasai-navy);
    --red-ui-header-accent: var(--maasai-orange);
    --red-ui-header-button-background-active: var(--maasai-navy-dark);
    --red-ui-header-menu-background: var(--maasai-navy-dark);
    --red-ui-header-menu-item-hover: #2c4f79;
    --red-ui-header-menu-item-border-active: var(--maasai-orange);

    /* Texto tipo codigo (ids de flujo y nodos en el sidebar, antes rojo) */
    --red-ui-text-color-code: var(--maasai-navy);

    /* Seleccion en el lienzo: alinear el naranja por defecto con el de marca */
    --red-ui-node-selected-color: var(--maasai-orange);
    --red-ui-port-selected-color: var(--maasai-orange);
    --red-ui-view-lasso-stroke: var(--maasai-orange);
    --red-ui-link-link-active-color: var(--maasai-orange);

    /* Guia de tours (popup de novedades) */
    --red-ui-tourGuide-border: var(--maasai-orange);
    --red-ui-tourGuide-heading-color: var(--maasai-navy);

    /* Cabeceras de la paleta lateral */
    --red-ui-palette-header-background: var(--maasai-sand);
    --red-ui-palette-header-color: var(--maasai-ink);
}

/* ---------- Tipografía del cromo del editor (no toca las etiquetas del lienzo) */
#red-ui-header,
.red-ui-menu,
.red-ui-tabs,
.red-ui-sidebar,
.red-ui-palette,
.red-ui-info,
.red-ui-editor-dialog,
.red-ui-notification,
.red-ui-typedInput-options,
.red-ui-popover {
    font-family: 'Outfit', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* ---------- Cabecera */
#red-ui-header {
    background: var(--maasai-navy) !important;
    border-bottom: 3px solid var(--maasai-orange);
    color: #fff;
}
#red-ui-header .red-ui-header-logo img {
    height: 24px !important;
    margin-top: 0;
}
#red-ui-header .red-ui-header-logo,
#red-ui-header .red-ui-header-logo span {
    color: #fff !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}
#red-ui-header .red-ui-header-toolbar > li > a,
#red-ui-header .button {
    color: #f3f2ee !important;
}
#red-ui-header .red-ui-header-toolbar > li > a:hover,
#red-ui-header .button:hover {
    background: rgba(231, 140, 58, 0.25) !important;
}

/* ---------- Botón Deploy */
#red-ui-header .red-ui-deploy-button {
    background: var(--maasai-orange) !important;
    color: var(--maasai-ink) !important;
    border: none !important;
}
#red-ui-header .red-ui-deploy-button:hover {
    background: var(--maasai-orange-dark) !important;
}
#red-ui-header .red-ui-deploy-button-spinner img {
    filter: brightness(0.2);
}
#red-ui-header span.red-ui-deploy-button-group.open .red-ui-deploy-button {
    background: var(--maasai-orange-dark) !important;
}

/* ---------- Lienzo y pestañas de flujo */
#red-ui-workspace-chart {
    background: var(--maasai-bg) !important;
}
.red-ui-tabs {
    background: #fff;
}
.red-ui-tab.active {
    border-top: 2px solid var(--maasai-orange) !important;
}
.red-ui-tab.active a.red-ui-tab-label {
    color: var(--maasai-navy) !important;
    font-weight: 600;
}
.red-ui-tabs .red-ui-tab a.red-ui-tab-label {
    color: #5c6773;
}

/* ---------- Paleta lateral */
.red-ui-palette {
    background: var(--maasai-bg) !important;
}
.red-ui-palette-category .red-ui-palette-header {
    background: var(--maasai-sand) !important;
    color: var(--maasai-ink) !important;
}
.red-ui-palette-header span {
    font-weight: 600;
}

/* ---------- Sidebar derecha */
.red-ui-sidebar-header {
    background: var(--maasai-sand) !important;
    color: var(--maasai-ink) !important;
}
.red-ui-info-header {
    color: var(--maasai-navy);
}

/* ---------- Botones y acentos genéricos */
.red-ui-button.primary,
.red-ui-editor-dialog .ui-dialog-buttonset button.primary {
    background: var(--maasai-navy) !important;
    border-color: var(--maasai-navy) !important;
    color: #fff !important;
}
.red-ui-button.primary:hover {
    background: #2c4f79 !important;
}
a,
.red-ui-info a {
    color: #1c5d99;
}

/* ---------- Selección / focus con acento naranja */
.red-ui-flow-node.red-ui-flow-node-selected,
.red-ui-flow-subflow-port.selected {
    stroke: var(--maasai-orange) !important;
}
.red-ui-typedInput-container.red-ui-typedInput-focus,
input:focus,
select:focus,
textarea:focus {
    outline-color: var(--maasai-orange) !important;
    border-color: var(--maasai-orange) !important;
    box-shadow: 0 0 0 1px rgba(231, 140, 58, .4) !important;
}

/* ---------- Scrollbars discretos acordes a la paleta */
::-webkit-scrollbar-thumb {
    background: var(--maasai-sand);
}

/* ---------- Footer de financiacion UE */
#maasai-eu-footer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 6px;
    font-size: 11px;
    color: #5c6773;
    white-space: nowrap;
    vertical-align: middle;
}
#maasai-eu-footer img {
    height: 13px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 1px;
    display: inline-block;
}
#maasai-eu-footer a {
    color: #1c5d99;
    text-decoration: none;
}
#maasai-eu-footer a:hover {
    text-decoration: underline;
}

/* ---------- Pantalla de login: logo centrado con el boton debajo */
#node-dialog-login {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    gap: 6px;
}
#node-dialog-login > div {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}
#node-dialog-login-image {
    max-width: 360px;
    height: auto;
    display: block;
}
#node-dialog-login-fields {
    width: auto !important;
    margin: 0 !important;
}
#node-dialog-login-fields .form-row {
    display: flex;
    justify-content: center;
    margin: 0;
}