/* =========================================
   VARIABLES & SOFT UI
   ========================================= */
:root {
    --color-primary: #0B3E23;
    --color-secondary: #4A5F3C;
    --color-gold: #C3A26E;
    --color-gold-light: #E3C68D;
    
    --color-text-main: #353535;
    --color-text-muted: #666666;
    
    --bg-canvas: #FAFAFA;
    --card-bg: #FAFAFA;
    
    --shadow-light: -6px -6px 16px #FFFFFF;
    --shadow-dark:  6px 6px 16px rgba(166, 171, 189, 0.3);
    
    --card-width: 220px;
    --border-radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Krub', sans-serif;
    background-color: var(--bg-canvas);
    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
    height: 100vh;
    display: flex; flex-direction: column; overflow: hidden;
}

/* HEADER & TOOLBAR */
header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    padding: 10px 40px;
    display: flex; align-items: center; gap: 25px;
    border-bottom: 1px solid rgba(195, 162, 110, 0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    flex-shrink: 0; z-index: 100;
}

.header-logo img { height: 55px; width: auto; }
.header-divider { height: 40px; width: 2px; background: var(--color-gold); opacity: 0.5; border-radius: 2px; }
.header-text h1 { color: var(--color-primary); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.header-text h2 { color: var(--color-text-muted); font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }

.toolbar {
    background: #fff; padding: 10px 40px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #f0f0f0;
    z-index: 90;
}

.selector-group label { color: var(--color-primary); font-weight: 600; margin-right: 10px; }
#areaSelect { 
    padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 8px; 
    min-width: 280px; background: #fafafa; color: var(--color-text-main); font-family: 'Krub';
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05);
}

.actions-group { display: flex; gap: 12px; }

.btn-action {
    padding: 9px 20px; border-radius: 8px; cursor: pointer; border: none; font-weight: 600; font-size: 0.9rem;
    display: flex; align-items: center; gap: 8px; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-action.primary { background: var(--color-primary); color: white; box-shadow: 0 4px 10px rgba(11, 62, 35, 0.3); }
.btn-action.primary:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(11, 62, 35, 0.4); }
.btn-action.secondary { background: white; border: 1px solid #e0e0e0; color: var(--color-primary); }
.btn-action.secondary:hover { background: #f9f9f9; border-color: var(--color-primary); }

/* CANVAS & ÁRBOL */
#canvas-viewport { 
    flex: 1; overflow: hidden; position: relative; cursor: grab; 
    display: flex; justify-content: center; align-items: center;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.02);
}
#canvas-viewport:active { cursor: grabbing; }

#organigram-container { 
    padding: 100px; 
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; justify-content: center;
}

.tree { white-space: nowrap; }
.tree ul { padding-top: 40px; position: relative; display: flex; justify-content: center; }
.tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 10px 0 10px; }

/* Conectores Generales */
.tree li::before, .tree li::after {
    content: ''; position: absolute; top: 0; right: 50%;
    border-top: 2px solid var(--color-gold); width: 50%; height: 40px;
    z-index: -1;
}
.tree li::after { right: auto; left: 50%; border-left: 2px solid var(--color-gold); }
.tree li:only-child::after, .tree li:only-child::before { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid var(--color-gold); border-radius: 0 16px 0 0; }
.tree li:first-child::after { border-radius: 16px 0 0 0; }
.tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--color-gold); width: 0; height: 40px; z-index: -1; }

/* --- GHOST LI (CORRECCIÓN DE ALINEACIÓN WEB) --- */
.ghost-li {
    padding-top: 0 !important; 
    position: relative;
}

.ghost-li::after {
    border-left: none !important;
}

/* Espacio ajustado para igualar altura de tarjetas promedio (Web) */
.ghost-li > ul {
    padding-top: 125px !important; /* Antes 140px */
    position: relative;
}

/* Línea Vertical ajustada */
.ghost-li > ul::before {
    content: '';
    position: absolute;
    top: 0 !important; 
    left: 50%;
    height: 125px !important; /* Igualar al padding-top */
    border-left: 2px solid var(--color-gold);
    width: 0;
    z-index: -1;
}

/* TARJETAS */
.card {
    background: var(--card-bg); width: var(--card-width); min-height: 80px; padding: 16px; 
    display: inline-flex; flex-direction: column; justify-content: center;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-dark), var(--shadow-light); border: 1px solid rgba(255,255,255, 0.7);
    position: relative; transition: all 0.3s ease; z-index: 2; 
    text-align: center;
    white-space: normal !important; 
    word-wrap: break-word; 
    hyphens: none; 
}

.card:hover { 
    transform: translateY(-6px); 
    box-shadow: 8px 8px 20px rgba(166, 171, 189, 0.4), -8px -8px 20px #FFFFFF;
    z-index: 10;
}

.card-role { font-size: 0.75rem; color: var(--color-primary); font-weight: 800; text-transform: uppercase; margin-bottom: 8px; line-height: 1.3; letter-spacing: 0.5px; }
.card-name { font-size: 0.85rem; color: var(--color-text-main); font-weight: 500; border-top: 1px solid rgba(195, 162, 110, 0.3); padding-top: 8px; text-transform: capitalize; line-height: 1.4; }

.type-root { background: var(--color-primary); border: none; box-shadow: 0 10px 20px rgba(11, 62, 35, 0.3); }
.type-root .card-role { color: var(--color-gold); opacity: 0.9; }
.type-root .card-name { color: white; border-top-color: rgba(255,255,255,0.2); }
.type-nivel-2, .type-area { border-left: 4px solid var(--color-secondary); }
.type-staff { border-left: 4px solid var(--color-gold); font-style: italic; }

.controls-panel { 
    position: absolute; bottom: 30px; right: 30px; 
    background: rgba(255,255,255,0.9); backdrop-filter: blur(5px);
    padding: 8px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); 
    display: flex; gap: 8px; 
}
.ctrl-btn { 
    border: none; background: transparent; width: 40px; height: 40px; border-radius: 8px; 
    cursor: pointer; color: var(--color-text-main); font-size: 1.1rem; transition: background 0.2s;
}
.ctrl-btn:hover { background: #f0f0f0; }

#print-layer { display: none; }

/* RESPONSIVE */
@media screen and (max-width: 768px) {
    header { flex-direction: column; text-align: center; gap: 10px; padding: 15px; }
    .header-divider { display: none; }
    .toolbar { flex-direction: column; gap: 15px; padding: 15px; }
    .actions-group { width: 100%; flex-direction: column; }
    #organigram-container { padding: 20px 10px; display: block; width: 100%; }
    
    .tree ul { display: block; padding-top: 0; }
    .tree li { display: block; padding: 8px 0; width: 100%; text-align: left; }
    .tree li::before, .tree li::after, .tree ul ul::before { display: none; }
    
    .card { 
        width: 100%; min-height: auto; flex-direction: row; align-items: center; 
        justify-content: space-between; gap: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-bottom: 5px;
        text-align: left;
    }
    .card-role { margin-bottom: 0; font-size: 0.7rem; width: 40%; }
    .card-name { border-top: none; padding-top: 0; border-left: 1px solid #eee; padding-left: 10px; width: 60%; }
    .tree ul ul { padding-left: 15px; border-left: 2px solid #eee; margin-left: 10px; }
    .controls-panel { display: none; }
    
    /* Responsive ajustes para ghost-li */
    .ghost-li { padding-top: 0 !important; }
    .ghost-li > ul { padding-top: 0 !important; }
    .ghost-li > ul::before { display: none; }
}