:root {

    --rensa-navy: #071b33;
    --rensa-navy-light: #102942;
    --rensa-blue: #123c66;

    --rensa-orange: #f58220;
    --rensa-orange-dark: #d96b11;

    --white: #ffffff;

    --gray-bg: #f4f7fa;
    --gray-border: #d9e1e8;
    --gray-text: #667686;
}


* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--gray-bg);

    color: #14283d;
}


.org-app {

    width: 100%;
    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fb 100%
        );

}


/* =========================================================
   CABECERA
========================================================= */

.org-header {

    min-height: 108px;

    padding:
        22px
        clamp(20px, 4vw, 60px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    background: var(--rensa-navy);

    color: white;

}


.org-brand {

    display: flex;
    align-items: center;

    gap: 25px;

}


.org-logo {

    font-size: 32px;
    font-weight: 900;

    letter-spacing: 3px;

    white-space: nowrap;

}


.org-logo span {

    color: var(--rensa-orange);

}


.org-header h1 {

    margin: 0 0 4px;

    font-size:
        clamp(22px, 2.4vw, 34px);

}


.org-header p {

    margin: 0;

    color: #b6c7d8;

    font-size: 14px;

}


/* =========================================================
   BUSCADOR
========================================================= */

.org-search {

    display: flex;

    width: min(470px, 100%);

}


.org-search input {

    flex: 1;

    min-width: 0;

    padding: 13px 15px;

    border: 1px solid #36516a;

    border-right: 0;

    border-radius: 8px 0 0 8px;

    background: #0c2741;

    color: white;

    font-size: 14px;

    outline: none;

}


.org-search input::placeholder {

    color: #8fa5ba;

}


.org-search input:focus {

    border-color: var(--rensa-orange);

}


.org-search button {

    padding: 0 18px;

    border: 0;

    border-radius: 0 8px 8px 0;

    background: var(--rensa-orange);

    color: white;

    font-weight: 800;

    cursor: pointer;

}


/* =========================================================
   BARRA DE HERRAMIENTAS
========================================================= */

.org-toolbar {

    min-height: 58px;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    padding:
        10px
        clamp(15px, 4vw, 60px);

    background: white;

    border-bottom:
        1px solid var(--gray-border);

    box-shadow:
        0 3px 15px
        rgba(8, 27, 51, .05);

}


.org-toolbar button {

    border:
        1px solid #d0d9e2;

    border-radius: 7px;

    padding: 9px 13px;

    background: white;

    color: #193551;

    font-weight: 700;

    cursor: pointer;

}


.org-toolbar button:hover {

    border-color: var(--rensa-orange);

    color: var(--rensa-orange);

}


.org-toolbar-separator {

    width: 1px;
    height: 26px;

    background: #d8e0e7;

    margin: 0 5px;

}


/* =========================================================
   CONTENEDOR DEL ORGANIGRAMA
========================================================= */

.chart-container {

    width: 100%;

    height: calc(100vh - 166px);

    min-height: 720px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f5f8fb 72%
        );

}


/* =========================================================
   TARJETA PERSONA
========================================================= */

.rensa-node {

    width: 100%;
    height: 100%;

    background: white;

    border:
        1px solid #d9e2e9;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 7px 22px
        rgba(7, 27, 51, .10);

    position: relative;

}


.rensa-node::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 5px;

    background:
        var(--rensa-orange);

}


.rensa-node-persona {

    padding: 18px 16px 14px;

    text-align: center;

}


.rensa-photo {

    width: 72px;
    height: 72px;

    margin: 2px auto 10px;

    border-radius: 50%;

    overflow: hidden;

    background: #e9eff4;

    border:
        3px solid white;

    box-shadow:
        0 0 0 2px
        var(--rensa-orange);

}


.rensa-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.rensa-initials {

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #153c62;

    color: white;

    font-size: 22px;
    font-weight: 800;

}


.rensa-name {

    color: var(--rensa-navy);

    font-size: 15px;
    font-weight: 800;

    line-height: 1.25;

    margin-bottom: 5px;

}


.rensa-position {

    color: var(--rensa-orange-dark);

    font-size: 13px;
    font-weight: 700;

    line-height: 1.25;

}


.rensa-area {

    margin-top: 7px;

    color: var(--gray-text);

    font-size: 11px;

}


/* =========================================================
   TARJETA ESTRUCTURAL
========================================================= */

.rensa-node-estructura {

    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px 22px;

    background:
        linear-gradient(
            135deg,
            #071b33,
            #10395e
        );

    color: white;

    border-radius: 13px;

    border:
        2px solid var(--rensa-orange);

    box-shadow:
        0 7px 23px
        rgba(7,27,51,.18);

    text-align: center;

}


.rensa-node-estructura .puesto {

    font-size: 17px;
    font-weight: 900;

    line-height: 1.25;

    text-transform: uppercase;

    letter-spacing: .4px;

}


/* =========================================================
   BOTÓN + / -
========================================================= */

.org-node-button {

    width: 34px;
    height: 34px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--rensa-orange);

    color: white;

    border: 3px solid white;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.18);

    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

}


/* =========================================================
   RESALTADO BÚSQUEDA
========================================================= */

.node-highlighted
.rensa-node {

    outline:
        4px solid
        rgba(245,130,32,.40);

}


/* =========================================================
   ESTADOS
========================================================= */

.org-error {

    margin: 20px;

    padding: 16px;

    background: #ffe6e6;

    color: #9b3030;

    border-radius: 8px;

}


.org-vacio {

    width: min(600px, 90%);

    margin: 70px auto;

    padding: 35px;

    text-align: center;

    border-radius: 15px;

    background: white;

    box-shadow:
        0 5px 25px
        rgba(0,0,0,.06);

}


.org-vacio strong,
.org-vacio span {

    display: block;

}


.org-vacio strong {

    color: var(--rensa-navy);

    font-size: 20px;

    margin-bottom: 8px;

}


.org-vacio span {

    color: var(--gray-text);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 800px) {

    .org-header {

        align-items: stretch;

        flex-direction: column;

        gap: 15px;

    }


    .org-brand {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

    }


    .org-search {

        width: 100%;

    }


    .chart-container {

        height: 780px;
        min-height: 780px;

    }


    .org-toolbar {

        justify-content: center;

    }

}