@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;800&display=swap');

:root {
    --primary-color:   #00295B;
    --secondary-color: #FF7F00;
    --accent-yellow:   #FFCE00;
    --accent-green:    #AFF9D4;
    --gris:            #7D7D7D;
    --font-family:     'Poppins', sans-serif;
}

.btn-primary,
.bg-primary,
.badge-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    opacity: 0.9;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
    opacity: 0.9;
}

.btn-warning {
    background-color: var(--accent-yellow) !important;
    border-color: var(--accent-yellow) !important;
    color: #00295B !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.bg-azul-principal,
.bg-primary-custom {
    background-color: var(--primary-color) !important;
}

.bg-azul-secundario,
.bg-secondary-custom {
    background-color: var(--secondary-color) !important;
}

.bg-accent-green {
    background-color: var(--accent-green) !important;
}

.bg-accent-yellow {
    background-color: var(--accent-yellow) !important;
}

body {
    font-family: var(--font-family);
    background-color: #f5f6fa;
    color: #333;
    min-height: 100vh;
}

.fw-extrabold {
    font-weight: 800;
}

.btn-azul {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 800;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    transition: opacity 0.2s ease;
}

.btn-azul:hover,
.btn-azul:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    opacity: 0.9;
}

.btn-azul:disabled {
    opacity: 0.6;
}

.btn-naranja {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    font-weight: 800;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    transition: opacity 0.2s ease;
}

.btn-naranja:hover,
.btn-naranja:focus {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    opacity: 0.9;
}

.btn-naranja:disabled {
    opacity: 0.6;
}

.btn-amarillo {
    background-color: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--primary-color);
    font-weight: 800;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    transition: opacity 0.2s ease;
}

.btn-amarillo:hover,
.btn-amarillo:focus {
    background-color: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--primary-color);
    opacity: 0.9;
}

.sidebar-offcanvas {
    --bs-offcanvas-width: 220px;
    width: var(--bs-offcanvas-width);
    border-right: 1px solid #e9ecef;
}

.sidebar-offcanvas .nav-link {
    color: var(--gris);
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-left: 4px solid transparent;
}

.sidebar-offcanvas .nav-link i {
    width: 1.25rem;
    text-align: center;
    color: var(--gris);
    transition: color 0.2s ease;
}

.sidebar-offcanvas .nav-link:hover {
    color: var(--primary-color);
    background-color: #f0f2f8;
}

.sidebar-offcanvas .nav-link:hover i {
    color: var(--primary-color);
}

.sidebar-offcanvas .nav-link.active {
    color: var(--primary-color);
    background-color: #FFF5EB;
    font-weight: 600;
    border-left-color: var(--secondary-color);
}

.sidebar-offcanvas .nav-link.active i {
    color: var(--secondary-color);
}

@media (min-width: 768px) {
    .sidebar-offcanvas {
        width: 220px !important;
        position: fixed !important;
        top: 56px !important;
        left: 0;
        height: calc(100vh - 56px);
        overflow-y: auto;
        visibility: visible !important;
        transform: none !important;
        z-index: 1000;
    }

    .sidebar-offcanvas .offcanvas-header {
        display: none;
    }

    .offcanvas-backdrop {
        display: none !important;
    }

    main.flex-grow-1 {
        margin-left: 220px;
    }
}

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 1rem;
}

.login-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.login-card .login-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.login-card .form-control {
    border-radius: 0.5rem;
    padding: 0.7rem 1rem;
    border: 2px solid #e9ecef;
    transition: border-color 0.2s ease;
}

.login-card .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 41, 91, 0.15);
}

.login-card .magic-link {
    font-size: 0.85rem;
    color: var(--gris);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.login-card .magic-link:hover {
    color: var(--primary-color);
}

.modal-header.bg-primary-custom {
    border-bottom: 3px solid var(--secondary-color);
}

.modal-header.bg-secondary-custom {
    border-bottom: 3px solid var(--accent-yellow);
}

.modal-header.bg-accent-yellow {
    border-bottom: 3px solid var(--primary-color);
}

.modal-header.bg-accent-green {
    border-bottom: 3px solid var(--primary-color);
}

.card-accent-primary {
    border-top: 4px solid var(--primary-color) !important;
}

.card-accent-secondary {
    border-top: 4px solid var(--secondary-color) !important;
}

.card-accent-yellow {
    border-top: 4px solid var(--accent-yellow) !important;
}

.card-accent-green {
    border-top: 4px solid var(--accent-green) !important;
}

.table-header-empresas {
    background-color: #FFF5EB !important;
}

.table-header-usuarios {
    background-color: #EBF5FF !important;
}

.arbol-clickable {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.arbol-clickable:hover {
    background-color: #f0f2f8;
}

.arbol-clickable.active-arbol {
    background-color: #FFF5EB;
    border-left: 3px solid var(--secondary-color);
}

.arbol-add-pregunta-placeholder {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.arbol-add-pregunta-placeholder:hover {
    opacity: 1;
}

/* Paginacion */
#paginacion .pagination {
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);
    --bs-pagination-color: var(--primary-color);
    --bs-pagination-hover-color: var(--primary-color);
}

#paginacion .page-link {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}

#paginacion small {
    white-space: nowrap;
}

/* Column toggle dropdown */
.column-toggle-menu {
    position: absolute;
    inset: 100% 0 auto auto;
    z-index: 1050;
}

.column-toggle-item .form-check {
    min-height: 0;
    padding-left: 1.5rem;
    margin-bottom: 0;
}

.column-toggle-item .form-check-input {
    margin-top: 0.2rem;
}

.column-toggle-item:hover {
    background-color: #f0f2f8;
}

/* Sort icon */
.sort-icon {
    font-size: 0.65rem;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
    transition: opacity 0.15s ease;
}

.table thead th[data-field] {
    user-select: none;
    white-space: nowrap;
}

.table thead th[data-field]:hover .sort-icon {
    opacity: 0.6 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Organigrama - Árbol jerárquico
   ═══════════════════════════════════════════════════════════════════════ */

.org-scroll-wrapper {
    min-height: 400px;
}

/* ── Tree structure ─────────────────────────────────────────────────── */
.org-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    text-align: left;
}

.org-tree .org-tree {
    padding-left: 2.5rem;
}

.org-node {
    position: relative;
    margin-bottom: 0.5rem;
}

.org-node::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.5rem;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.org-node:last-child::before {
    height: 1.25rem;
}

.org-node::after {
    content: '';
    position: absolute;
    top: 1.25rem;
    left: 0.5rem;
    width: 1.5rem;
    height: 2px;
    background: #dee2e6;
}

.org-tree > .org-node::before,
.org-tree > .org-node::after {
    display: none;
}

.org-leaf::after {
    width: 0.75rem;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.org-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--primary-color, #00295B);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    cursor: default;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    min-width: 200px;
    max-width: 280px;
}

.org-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.org-card.active {
    border-color: var(--secondary-color, #FF7F00);
    box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.2);
}

.org-card:focus {
    outline: 2px solid var(--secondary-color, #FF7F00);
    outline-offset: 2px;
}

/* ── Avatar ──────────────────────────────────────────────────────────── */
.org-avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Info ────────────────────────────────────────────────────────────── */
.org-info {
    min-width: 0;
    line-height: 1.3;
}

.org-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-cargo {
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-area {
    font-size: 0.68rem;
}

/* ── Toggle ──────────────────────────────────────────────────────────── */
.org-toggle {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.org-toggle:hover {
    opacity: 1;
}

.org-dot {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    line-height: 1;
}

/* ── Children container ─────────────────────────────────────────────── */
.org-children {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

/* ── Leyenda ──────────────────────────────────────────────────────────── */
.org-leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.78rem;
    color: #495057;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    cursor: default;
    transition: background 0.15s ease;
}

.org-leyenda-item:hover {
    background: #f8f9fa;
}

.org-leyenda-color {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.15rem;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .org-card {
        min-width: 160px;
        max-width: 220px;
        padding: 0.375rem 0.625rem;
    }

    .org-tree .org-tree {
        padding-left: 1.5rem;
    }

    .org-name {
        font-size: 0.78rem;
    }

    .org-cargo {
        font-size: 0.7rem;
    }
}