:root {
            --azul: #0056b3; --naranja: #e67e22; --gris: #f4f4f4; --linea: #ccc;
        }


        /* --- CONTENEDOR COLAPSABLE --- */
        #wrapper-tarjeta {
            display: grid;
            grid-template-rows: 0fr; /* Altura 0 inicial */
            transition: grid-template-rows 0.5s ease, margin-bottom 0.5s ease;
            width: 100%;
            max-width: 600px;
            overflow: hidden;
            margin-bottom: 0; /* Sin espacio cuando está cerrado */
        }

        /* Cuando la tarjeta está activa */
        #wrapper-tarjeta.abierto {
            grid-template-rows: 1fr; /* Se expande para ajustar el contenido */
            margin-bottom: 40px; /* Aparece el margen solo cuando hay tarjeta */
        }

        .container-interno {
            min-height: 0;
            display: flex;
            justify-content: center;
            padding: 10px 0; /* Espaciado interno para que la sombra no se corte */
        }

        /* --- LA TARJETA (Efecto de expansión) --- */
        .card {
            background: white; border-left: 8px solid var(--azul); border-radius: 12px;
            padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            width: 100%; 
            transform: scaleX(0); opacity: 0; transform-origin: center;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s, filter 0.4s;
        }

        
        .card.visible { transform: scaleX(1); opacity: 1; }
        .card.cambiando { filter: blur(15px); opacity: 0.5; }

        .card-content { display: flex; align-items: center; gap: 20px; }
        .circular-photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 3px solid var(--azul); }

        /* --- ORGANIGRAMA --- */
        .tree ul { padding-top: 20px; position: relative; display: flex; justify-content: center; padding-left: 0; }
        .tree li { list-style-type: none; position: relative; padding: 20px 10px 0 10px; text-align: center; }
        
        .tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--linea); width: 50%; height: 20px; }
        .tree li::after { right: auto; left: 50%; border-left: 2px solid var(--linea); }
        .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(--linea); border-radius: 0 5px 0 0; }
        .tree li:first-child::after { border-radius: 5px 0 0 0; }
        .tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--linea); width: 0; height: 20px; }

        .empleado-box {
            border: 2px solid var(--linea); padding: 12px; border-radius: 8px;
            background: white; width: 140px; cursor: pointer; transition: 0.3s;
            display: inline-block; position: relative; z-index: 10;
        }
        .empleado-box:hover { transform: scale(1.1); border-color: var(--naranja); background: #fff9e6; z-index: 20; }
        .empleado-box.active { border-color: var(--azul); background: #ebf5ff; }

        .nombre-min { font-weight: bold; font-size: 16px; color: var(--azul); }
        .puesto-min { font-size: 12px; color: var(--naranja); text-transform: uppercase; margin-top: 4px; }