/* ============================================================
   LEONHART
   APÉNDICE A — DIAGRAMA DE FLUJO

   El pergamino rojizo pertenece al grimorio.
   Este archivo solamente dibuja el diagrama.
   ============================================================ */


.appendix-a-viewport {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.appendix-a-diagram {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


/* ============================================================
   CANVAS DEL DIAGRAMA
   ============================================================ */

.appendix-flow {

    --flow-text-dark: #25160f;
    --flow-text-light: #f5eedf;

    --flow-line: #d6bb8a;
    --flow-dashed: #5e9bd2;

    --flow-label-bg: #65362f;

    --flow-inicio-bg: #1c150c;
    --flow-inicio-border: #d4a347;
    --flow-inicio-text: #e1b65b;

    --flow-proceso-bg: #5c3b1e;
    --flow-proceso-border: #b37a3d;

    --flow-decision-bg: #153b5c;
    --flow-decision-border: #5d91c0;

    --flow-accion-bg: #27521f;
    --flow-accion-border: #5d9b4f;

    --flow-alerta-bg: #631915;
    --flow-alerta-border: #ba4944;

    --flow-db-bg: #1f2838;
    --flow-db-border: #6686b5;


    position: absolute;

    top: 0;
    left: 0;

    width: max-content;

    min-width: 1450px;

    padding:
        20px
        30px
        35px;

    box-sizing: border-box;

    transform-origin:
        top left;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    color:
        var(--flow-text-dark);
}


/* ============================================================
   SVG
   ============================================================ */

.appendix-flow-lines {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    z-index: 1;
}



/* ============================================================
   ESTRUCTURA
   ============================================================ */

.appendix-flow .flow-content {

    position: relative;

    z-index: 10;

    display: flex;

    gap: 55px;

    align-items:
        flex-start;
}


.appendix-flow .flow-left-col {

    width: 220px;

    flex: 0 0 220px;

    display: flex;

    flex-direction:
        column;

    gap: 26px;
}


.appendix-flow .flow-main-col {

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    min-width:
        1110px;
}


.appendix-flow .flow-branches {

    display: flex;

    align-items:
        flex-start;

    gap: 22px;

    margin-top:
        55px;
}


.appendix-flow .flow-branch {

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    gap: 27px;

    min-width:
        max-content;
}


.appendix-flow .flow-split {

    display: flex;

    justify-content:
        center;

    align-items:
        flex-start;

    gap: 15px;

    width: 100%;
}


.appendix-flow .flow-split-item {

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    gap: 26px;
}



/* ============================================================
   NODOS
   ============================================================ */

.appendix-flow .flow-node {

    position: relative;

    z-index: 2;

    width: 150px;

    box-sizing:
        border-box;

    padding:
        10px;

    border:
        2px solid;

    border-radius:
        6px;

    text-align:
        center;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.25;

    color:
        var(--flow-text-light);

    box-shadow:

        2px 4px 8px
        rgba(0,0,0,.44),

        inset 0 0 8px
        rgba(0,0,0,.35);
}


.appendix-flow .flow-node span {

    position: relative;

    z-index: 2;
}



/* ============================================================
   TIPOS
   ============================================================ */

.appendix-flow .flow-inicio {

    background:
        var(--flow-inicio-bg);

    border-color:
        var(--flow-inicio-border);

    color:
        var(--flow-inicio-text);

    font-weight:
        700;
}


.appendix-flow .flow-proceso {

    background:
        var(--flow-proceso-bg);

    border-color:
        var(--flow-proceso-border);
}


.appendix-flow .flow-accion {

    background:
        var(--flow-accion-bg);

    border-color:
        var(--flow-accion-border);
}


.appendix-flow .flow-alerta {

    background:
        var(--flow-alerta-bg);

    border-color:
        var(--flow-alerta-border);
}



/* ============================================================
   DECISIÓN
   ============================================================ */

.appendix-flow .flow-decision {

    width:
        125px;

    height:
        125px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        8px 0;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    box-shadow:
        none;

    font-size:
        11px;
}


.appendix-flow .flow-diamond {

    position: absolute;

    width:
        86px;

    height:
        86px;

    background:
        var(--flow-decision-bg);

    border:
        2px solid
        var(--flow-decision-border);

    transform:
        rotate(45deg);

    box-shadow:

        2px 4px 8px
        rgba(0,0,0,.45),

        inset 0 0 8px
        rgba(0,0,0,.38);

    z-index:
        -1;
}



/* ============================================================
   ESPERAR ACCIÓN
   ============================================================ */

.appendix-flow .flow-wait-node {

    width:
        auto;

    min-width:
        220px;

    padding:
        13px 28px;

    font-size:
        14px;
}



/* ============================================================
   ESTADO
   ============================================================ */

.appendix-flow .flow-estado {

    width:
        300px;

    margin-top:
        55px;
}



/* ============================================================
   BACKEND
   ============================================================ */

.appendix-flow .flow-backend {

    width:
        400px;

    margin-top:
        35px;

    font-size:
        14px;
}



/* ============================================================
   BASES DE DATOS
   ============================================================ */

.appendix-flow .flow-dbs-container {

    display:
        flex;

    gap:
        48px;

    margin-top:
        27px;
}


.appendix-flow .flow-db {

    width:
        180px;

    padding:
        27px
        15px
        18px;

    background:
        var(--flow-db-bg);

    border-color:
        var(--flow-db-border);

    border-radius:
        50% / 15%;
}


.appendix-flow .flow-db::before {

    content:
        "";

    position:
        absolute;

    top:
        -2px;

    left:
        -2px;

    right:
        -2px;

    height:
        18px;

    border:
        2px solid
        var(--flow-db-border);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.05);
}



/* ============================================================
   NÚMEROS 1–4
   ============================================================ */

.appendix-flow .flow-step-num {

    display:
        inline-block;

    width:
        18px;

    height:
        18px;

    margin-right:
        5px;

    border:
        1px solid
        var(--flow-inicio-border);

    border-radius:
        50%;

    text-align:
        center;

    line-height:
        18px;

    font-size:
        11px;
}



/* ============================================================
   LEYENDA
   ============================================================ */

.appendix-flow .flow-legend {

    margin-top:
        7px;

    padding:
        13px;

    border:
        2px solid
        rgba(211,173,117,.45);

    border-radius:
        7px;

    background:
        rgba(25,10,8,.18);
}


.appendix-flow .flow-legend h3 {

    margin:
        0
        0
        10px;

    text-align:
        center;

    font-family:
        'Cinzel',
        serif;

    font-size:
        14px;

    color:
        #ead1aa;
}


.appendix-flow .flow-legend-item {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        7px;

    font-size:
        11px;

    font-weight:
        600;

    color:
        #ecd8bb;
}


.appendix-flow .flow-leg-box {

    width:
        18px;

    height:
        13px;

    flex:
        0 0 auto;

    border:
        2px solid;

    border-radius:
        3px;
}


.appendix-flow .flow-leg-inicio {

    background:
        var(--flow-inicio-bg);

    border-color:
        var(--flow-inicio-border);
}


.appendix-flow .flow-leg-proceso {

    background:
        var(--flow-proceso-bg);

    border-color:
        var(--flow-proceso-border);
}


.appendix-flow .flow-leg-accion {

    background:
        var(--flow-accion-bg);

    border-color:
        var(--flow-accion-border);
}


.appendix-flow .flow-leg-alerta {

    background:
        var(--flow-alerta-bg);

    border-color:
        var(--flow-alerta-border);
}


.appendix-flow .flow-leg-decision {

    width:
        12px;

    height:
        12px;

    margin:
        0
        3px;

    border-radius:
        0;

    background:
        var(--flow-decision-bg);

    border-color:
        var(--flow-decision-border);

    transform:
        rotate(45deg);
}


.appendix-flow .flow-leg-db {

    border-radius:
        50% / 15%;

    background:
        var(--flow-db-bg);

    border-color:
        var(--flow-db-border);
}



/* ============================================================
   ETIQUETAS DE LAS CONEXIONES
   ============================================================ */

.appendix-flow .flow-line-label {

    position:
        absolute;

    z-index:
        20;

    transform:
        translate(-50%, -50%);

    padding:
        2px
        4px;

    background:
        var(--flow-label-bg);

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    text-align:
        center;

    white-space:
        nowrap;

    color:
        #e6d1ae;
}


.appendix-flow .flow-label-no {

    color:
        #ff7069;
}


.appendix-flow .flow-label-yes {

    color:
        #8fcf82;
}


.appendix-flow .flow-label-blue {

    color:
        #8dbcea;
}


/* ============================================================
   EVITAR QUE REGLAS GLOBALES DEL GRIMORIO OCULTEN EL DIAGRAMA
   ============================================================ */

.appendix-a-document
.appendix-flow * {

    box-sizing:
        border-box;
}


/* ============================================================
   LEONHART — APÉNDICE A
   DIAGRAMA EN TINTA NEGRA / GRABADO ANTIGUO
   ============================================================ */

.appendix-flow {

    --ink-black: #211914;
    --ink-black-dark: #120e0b;
    --ink-black-soft: rgba(33, 25, 20, .08);
    --ink-black-medium: rgba(33, 25, 20, .55);
    --ink-black-faint: rgba(33, 25, 20, .25);

    color:
        var(--ink-black) !important;

    /*
       multiply hace que el diagrama parezca
       impreso directamente sobre el pergamino
    */
    mix-blend-mode:
        multiply;

    filter:
        grayscale(1)
        contrast(1.18)
        sepia(.10);

    opacity:
        .94;
}


/* ============================================================
   TODOS LOS NODOS
   ============================================================ */

.appendix-flow .flow-node {

    color:
        var(--ink-black-dark) !important;

    background:
        rgba(24, 18, 14, .025) !important;

    border-color:
        var(--ink-black) !important;

    box-shadow:

        inset 0 0 0 1px
        rgba(25, 18, 14, .06),

        inset 0 0 9px
        rgba(25, 18, 14, .045)

        !important;

    text-shadow:
        none !important;
}


/* ============================================================
   INICIO
   Doble línea estilo manuscrito
   ============================================================ */

.appendix-flow .flow-inicio {

    background:

        repeating-linear-gradient(
            45deg,

            transparent 0,
            transparent 4px,

            rgba(25,18,14,.025) 4px,
            rgba(25,18,14,.025) 5px
        ) !important;

    border:
        3px double
        var(--ink-black) !important;

    color:
        var(--ink-black-dark) !important;
}


/* ============================================================
   PROCESOS
   ============================================================ */

.appendix-flow .flow-proceso {

    background:
        rgba(20, 15, 12, .018) !important;

    border:
        1.6px solid
        rgba(25, 18, 14, .82) !important;
}


/* ============================================================
   ACCIONES
   Rayado de grabado
   ============================================================ */

.appendix-flow .flow-accion {

    background:

        repeating-linear-gradient(
            -45deg,

            transparent 0,
            transparent 3px,

            rgba(25,18,14,.035) 3px,
            rgba(25,18,14,.035) 4px
        ) !important;

    border:
        2px solid
        var(--ink-black) !important;
}


/* ============================================================
   ALERTAS
   Más oscuras, pero siguen siendo tinta
   ============================================================ */

.appendix-flow .flow-alerta {

    color:
        var(--ink-black-dark) !important;

    background:

        repeating-linear-gradient(
            45deg,

            rgba(20,14,11,.055) 0,
            rgba(20,14,11,.055) 2px,

            transparent 2px,
            transparent 5px
        ) !important;

    border:
        2px solid
        var(--ink-black-dark) !important;
}


/* ============================================================
   DECISIONES
   ============================================================ */

.appendix-flow .flow-decision {

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

    color:
        var(--ink-black-dark) !important;
}


.appendix-flow .flow-diamond {

    background:

        repeating-linear-gradient(
            45deg,

            rgba(25,18,14,.055) 0,
            rgba(25,18,14,.055) 2px,

            transparent 2px,
            transparent 5px
        ) !important;

    border:
        2px solid
        var(--ink-black) !important;

    box-shadow:
        inset 0 0 8px
        rgba(20,14,11,.06) !important;
}


/* ============================================================
   BASES DE DATOS
   ============================================================ */

.appendix-flow .flow-db {

    color:
        var(--ink-black-dark) !important;

    background:
        rgba(20, 15, 12, .025) !important;

    border:
        2px solid
        var(--ink-black) !important;
}


.appendix-flow .flow-db::before {

    background:
        rgba(20, 15, 12, .018) !important;

    border-color:
        var(--ink-black) !important;
}


/* ============================================================
   NÚMEROS 1, 2, 3, 4
   ============================================================ */

.appendix-flow .flow-step-num {

    color:
        var(--ink-black-dark) !important;

    border-color:
        var(--ink-black) !important;

    background:
        transparent !important;
}


/* ============================================================
   TODAS LAS LÍNEAS SVG
   ============================================================ */

.appendix-flow
.appendix-flow-lines path {

    stroke:
        var(--ink-black) !important;

    opacity:
        .82;
}


/* ============================================================
   LÍNEAS PUNTEADAS
   Conservamos significado pero eliminamos azul
   ============================================================ */

.appendix-flow
.appendix-flow-lines
path[stroke-dasharray] {

    stroke:
        var(--ink-black) !important;

    opacity:
        .48;
}


/* ============================================================
   PUNTAS DE FLECHA
   ============================================================ */

.appendix-flow
#appendix-arrow path,

.appendix-flow
#appendix-arrow-blue path {

    fill:
        var(--ink-black) !important;

    stroke:
        none !important;
}


/* ============================================================
   ETIQUETAS SOBRE LAS LÍNEAS
   ============================================================ */

.appendix-flow .flow-line-label {

    background:
        rgba(222, 202, 165, .90) !important;

    color:
        var(--ink-black-dark) !important;

    border:
        none !important;

    box-shadow:
        none !important;

    text-shadow:
        none !important;
}


/*
   Sí / No / Logs / Recursos
   ya no utilizan colores
*/

.appendix-flow .flow-label-no,
.appendix-flow .flow-label-yes,
.appendix-flow .flow-label-blue {

    color:
        var(--ink-black-dark) !important;
}


/* ============================================================
   LEYENDA
   ============================================================ */

.appendix-flow .flow-legend {

    background:
        rgba(20,15,12,.015) !important;

    border:
        1px solid
        rgba(25,18,14,.56) !important;

    box-shadow:
        none !important;
}


.appendix-flow .flow-legend h3,
.appendix-flow .flow-legend-item {

    color:
        var(--ink-black-dark) !important;
}


/* ============================================================
   SÍMBOLOS DE LA LEYENDA
   Todos negros, diferencia por forma
   ============================================================ */

.appendix-flow .flow-leg-box {

    background:
        rgba(20,15,12,.035) !important;

    border-color:
        var(--ink-black) !important;
}


.appendix-flow .flow-leg-decision {

    background:

        repeating-linear-gradient(
            45deg,

            rgba(20,15,12,.05) 0,
            rgba(20,15,12,.05) 2px,

            transparent 2px,
            transparent 4px
        ) !important;

    border-color:
        var(--ink-black) !important;
}


.appendix-flow .flow-leg-db {

    background:
        rgba(20,15,12,.025) !important;

    border-color:
        var(--ink-black) !important;
}


/* ============================================================
   PEQUEÑAS IMPERFECCIONES DE TINTA
   ============================================================ */

.appendix-flow .flow-node {

    outline:
        1px solid
        rgba(30,20,15,.025);

    outline-offset:
        1px;
}


/* ============================================================
   APÉNDICE A — DIAGRAMA EN TINTA
   MISMO LENGUAJE DE "LA VÍSPERA"
   ============================================================ */

.appendix-flow {

    --vispera-ink: #2c2014;
    --vispera-ink-dark: #1c140d;
    --vispera-ink-soft: rgba(44,32,20,.06);
    --vispera-ink-mid: rgba(44,32,20,.60);

    color:
        var(--vispera-ink) !important;

    mix-blend-mode:
        multiply;

    filter:
        sepia(.20)
        contrast(1.10);

    opacity:
        .94;
}


/* ============================================================
   NODOS
   ============================================================ */

.appendix-flow .flow-node {

    background:
        rgba(44,32,20,.025) !important;

    border:
        1.5px solid
        rgba(44,32,20,.82) !important;

    color:
        var(--vispera-ink-dark) !important;

    box-shadow:

        inset 0 0 7px
        rgba(44,32,20,.035)

        !important;

    text-shadow:
        none !important;
}


/* Inicio */

.appendix-flow .flow-inicio {

    border:
        3px double
        var(--vispera-ink) !important;

    background:
        rgba(44,32,20,.035) !important;

    color:
        var(--vispera-ink-dark) !important;
}


/* Proceso */

.appendix-flow .flow-proceso {

    background:
        rgba(44,32,20,.018) !important;
}


/* Acción — rayado suave */

.appendix-flow .flow-accion {

    background:

        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 4px,
            rgba(44,32,20,.028) 4px,
            rgba(44,32,20,.028) 5px
        )

        !important;
}


/* Alerta — rayado un poco más marcado */

.appendix-flow .flow-alerta {

    background:

        repeating-linear-gradient(
            45deg,
            rgba(44,32,20,.045) 0,
            rgba(44,32,20,.045) 2px,
            transparent 2px,
            transparent 5px
        )

        !important;

    border:
        2px solid
        var(--vispera-ink-dark) !important;

    color:
        var(--vispera-ink-dark) !important;
}


/* ============================================================
   ROMBOS
   ============================================================ */

.appendix-flow .flow-decision {

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

    color:
        var(--vispera-ink-dark) !important;
}


.appendix-flow .flow-diamond {

    background:

        repeating-linear-gradient(
            45deg,
            rgba(44,32,20,.045) 0,
            rgba(44,32,20,.045) 2px,
            transparent 2px,
            transparent 5px
        )

        !important;

    border:
        1.7px solid
        var(--vispera-ink) !important;

    box-shadow:
        none !important;
}


/* ============================================================
   BASES DE DATOS
   ============================================================ */

.appendix-flow .flow-db {

    background:
        rgba(44,32,20,.025) !important;

    border:
        1.7px solid
        var(--vispera-ink) !important;

    color:
        var(--vispera-ink-dark) !important;
}


.appendix-flow .flow-db::before {

    background:
        rgba(44,32,20,.018) !important;

    border-color:
        var(--vispera-ink) !important;
}


/* ============================================================
   NÚMEROS
   ============================================================ */

.appendix-flow .flow-step-num {

    background:
        transparent !important;

    border-color:
        var(--vispera-ink) !important;

    color:
        var(--vispera-ink-dark) !important;
}


/* ============================================================
   LÍNEAS
   ============================================================ */

.appendix-flow
.appendix-flow-lines path {

    stroke:
        var(--vispera-ink) !important;

    opacity:
        .72;
}


/* líneas punteadas */

.appendix-flow
.appendix-flow-lines
path[stroke-dasharray] {

    stroke:
        var(--vispera-ink) !important;

    opacity:
        .42;
}


/* flechas */

.appendix-flow
#appendix-arrow path,

.appendix-flow
#appendix-arrow-blue path {

    fill:
        var(--vispera-ink) !important;

    stroke:
        none !important;
}


/* ============================================================
   ETIQUETAS
   ============================================================ */

.appendix-flow .flow-line-label {

    background:
        rgba(209,184,148,.94) !important;

    color:
        var(--vispera-ink-dark) !important;

    border:
        none !important;

    box-shadow:
        none !important;

    text-shadow:
        none !important;
}


.appendix-flow .flow-label-no,
.appendix-flow .flow-label-yes,
.appendix-flow .flow-label-blue {

    color:
        var(--vispera-ink-dark) !important;
}


/* ============================================================
   LEYENDA
   ============================================================ */

.appendix-flow .flow-legend {

    background:
        rgba(44,32,20,.018) !important;

    border:
        1px solid
        rgba(44,32,20,.48) !important;

    box-shadow:
        none !important;
}


.appendix-flow .flow-legend h3,
.appendix-flow .flow-legend-item {

    color:
        var(--vispera-ink-dark) !important;
}


.appendix-flow .flow-leg-box {

    background:
        rgba(44,32,20,.025) !important;

    border-color:
        var(--vispera-ink) !important;
}


/* Rombo de leyenda */

.appendix-flow .flow-leg-decision {

    background:

        repeating-linear-gradient(
            45deg,
            rgba(44,32,20,.045) 0,
            rgba(44,32,20,.045) 2px,
            transparent 2px,
            transparent 4px
        )

        !important;

    border-color:
        var(--vispera-ink) !important;
}


/* Base de datos de leyenda */

.appendix-flow .flow-leg-db {

    background:
        rgba(44,32,20,.025) !important;

    border-color:
        var(--vispera-ink) !important;
}