/* ============================================================================
   Smart Factory ADO — Sistema visual ejecutivo
   Paleta: grafito/acero + cobre industrial (acento) + azul de datos (secundario)
   Tipografia: Fraunces (display) + IBM Plex Sans (texto) + IBM Plex Mono (datos)
   ============================================================================ */

:root {
    --sfa-bg: #EEF1F1;
    --sfa-panel: #FFFFFF;
    --sfa-ink: #1B1F23;
    --sfa-steel: #232B33;
    --sfa-steel-2: #313C47;
    --sfa-line: #D7DBDA;
    --sfa-accent: #B8511F;
    --sfa-accent-dark: #8F3F17;
    --sfa-data: #3E6B8A;
    --sfa-muted: #6B7580;
    --sfa-ok: #3F7D5C;
    --sfa-warn: #B8511F;
    --sfa-pend: #6B7580;
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
    --font-mono: 'IBM Plex Mono', Consolas, monospace;
}

body {
    background: var(--sfa-bg);
    color: var(--sfa-ink);
    font-family: var(--font-body);
}

h1, h2, h3, h4, .sfa-display {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* ---------- Header ---------- */
.sfa-header {
    background: var(--sfa-steel);
    border-bottom: 3px solid var(--sfa-accent);
}
.sfa-brand { display: flex; align-items: center; gap: .75rem; }
.sfa-brand-mark {
    font-family: var(--font-mono);
    background: var(--sfa-accent);
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
    padding: .35rem .5rem;
    border-radius: 3px;
    letter-spacing: .05em;
}
.sfa-brand-text {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.15;
    display: flex;
    flex-direction: column;
}
.sfa-brand-text small {
    font-family: var(--font-body);
    color: #B7C2CB;
    font-size: .68rem;
    letter-spacing: .03em;
    font-weight: 400;
}
.sfa-footer {
    background: var(--sfa-steel);
    color: #9AA6AF;
    font-size: .8rem;
    margin-top: 3rem;
}

/* ---------- Botones ---------- */
.sfa-btn-accent {
    background: var(--sfa-accent);
    border: 1px solid var(--sfa-accent);
    color: #fff;
    font-weight: 500;
}
.sfa-btn-accent:hover { background: var(--sfa-accent-dark); color: #fff; }
.btn-outline-sfa {
    border: 1px solid var(--sfa-steel-2);
    color: var(--sfa-steel-2);
    background: transparent;
}
.btn-outline-sfa:hover { background: var(--sfa-steel-2); color: #fff; }

/* ---------- Tarjetas de proyecto (Index) ---------- */
.sfa-project-card {
    background: var(--sfa-panel);
    border: 1px solid var(--sfa-line);
    border-top: 3px solid var(--sfa-data);
    border-radius: 4px;
    padding: 1.25rem 1.4rem;
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}
.sfa-project-card:hover {
    box-shadow: 0 8px 24px rgba(35, 43, 51, .10);
    transform: translateY(-2px);
}
.sfa-project-card .sfa-estado {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 3px;
    background: #EEF1F1;
    color: var(--sfa-steel-2);
}
.sfa-progress-track {
    height: 6px;
    background: var(--sfa-line);
    border-radius: 3px;
    overflow: hidden;
}
.sfa-progress-fill {
    height: 100%;
    background: var(--sfa-accent);
}

/* ---------- Spine (columna vertebral del proyecto: los 7 pasos) ---------- */
.sfa-spine {
    position: relative;
    padding-left: 2.75rem;
}
.sfa-spine::before {
    content: "";
    position: absolute;
    left: 1.15rem;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background: linear-gradient(180deg, var(--sfa-accent), var(--sfa-data));
}
.sfa-paso {
    position: relative;
    margin-bottom: 1.75rem;
}
.sfa-paso-node {
    position: absolute;
    left: -2.75rem;
    top: .35rem;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--sfa-panel);
    border: 2px solid var(--sfa-steel-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--sfa-steel-2);
    z-index: 2;
}
.sfa-paso-node.tiene-items {
    border-color: var(--sfa-accent);
    color: var(--sfa-accent);
    background: #FBF1EC;
}
.sfa-paso-card {
    background: var(--sfa-panel);
    border: 1px solid var(--sfa-line);
    border-radius: 4px;
    padding: 1.25rem 1.4rem;
}
.sfa-paso-eyebrow {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sfa-data);
}
.sfa-paso-pregunta {
    font-style: italic;
    color: var(--sfa-muted);
    font-size: .92rem;
    border-left: 2px solid var(--sfa-line);
    padding-left: .75rem;
    margin: .5rem 0 .9rem;
}

/* ---------- Items dinamicos dentro de cada paso ---------- */
.sfa-item {
    border: 1px solid var(--sfa-line);
    border-radius: 4px;
    padding: .65rem .9rem;
    margin-bottom: .5rem;
    background: #FAFBFB;
}
.sfa-item.categoria-positivo { border-left: 3px solid var(--sfa-ok); }
.sfa-item.categoria-negativo { border-left: 3px solid var(--sfa-warn); }
.sfa-item-titulo { font-weight: 600; }
.sfa-item-meta {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--sfa-muted);
    letter-spacing: .02em;
}
.badge-estado-pendiente { background: #E4E7E7; color: var(--sfa-steel-2); }
.badge-estado-enproceso { background: #E8EEF2; color: var(--sfa-data); }
.badge-estado-completado { background: #E5EFE9; color: var(--sfa-ok); }
.sfa-vinculo {
    font-size: .72rem;
    color: var(--sfa-data);
}

/* ---------- Formularios ---------- */
.form-label { font-weight: 500; font-size: .85rem; }
.sfa-form-card {
    background: var(--sfa-panel);
    border: 1px solid var(--sfa-line);
    border-radius: 4px;
    padding: 1.75rem;
}

/* ---------- Nav link secundario en el header ---------- */
.sfa-nav-link {
    color: #D8E0E6;
    border: 1px solid #3E4A55;
    background: transparent;
}
.sfa-nav-link:hover { color: #fff; border-color: var(--sfa-data); background: rgba(62,107,138,.25); }

/* ---------- Modulo Estrategia de IA: pilares en paralelo (no secuencial) ---------- */
.sfa-pilar-card {
    background: var(--sfa-panel);
    border: 1px solid var(--sfa-line);
    border-top: 3px solid var(--sfa-data);
    border-radius: 4px;
    padding: 1.1rem 1.3rem;
    height: 100%;
}
.sfa-pilar-titulo {
    font-family: var(--font-display);
    font-size: 1rem;
}
.sfa-area-block {
    border: 1px solid var(--sfa-line);
    border-radius: 4px;
    padding: .9rem 1rem;
    margin-bottom: .85rem;
    background: #FAFBFB;
}

/* ---------- VCards de la pagina de inicio ---------- */
.sfa-vcard {
    position: relative;
    background: var(--sfa-panel);
    border: 1px solid var(--sfa-line);
    border-radius: 6px;
    padding: 2rem 1.75rem 1.75rem;
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}
.sfa-vcard:hover {
    box-shadow: 0 10px 28px rgba(35, 43, 51, .12);
    transform: translateY(-3px);
}
.sfa-vcard-data { border-top: 4px solid var(--sfa-data); }
.sfa-vcard-accent { border-top: 4px solid var(--sfa-accent); }
.sfa-vcard-num {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--sfa-muted);
    letter-spacing: .05em;
}
.sfa-vcard-icon {
    font-size: 1.6rem;
    color: var(--sfa-steel-2);
    margin-bottom: .75rem;
    display: block;
}
.sfa-vcard-cta {
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 600;
    color: var(--sfa-steel-2);
    letter-spacing: .02em;
}
.sfa-vcard:hover .sfa-vcard-cta { color: var(--sfa-accent); }