:root {
    --bg: #F2F3F6;
    --panel: #FFFFFF;
    --panel-2: #EFF1F5;
    --border: #DEE1E8;
    --border-soft: #E8EAEF;
    --text: #171B24;
    --text-dim: #545C70;
    --text-faint: #8890A3;
    --gold: #B9860E;
    --sky: #0E86A8;
    --violet: #8A38C4;
    --timer-accent: #5FD8EE;
    --red: #C6432B;
    --green-ok: #2F9E5B;
    --a-personal: #C79A16;
    --a-analistas: #C97324;
    --a-flujo: #2F9E5B;
    --a-credito: #2F6FE0;
    --a-tecnologia: #C6432B;
    --a-transporte: #1F3B73;
    --radius: 10px;
    --font-display: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-body: 'Ubuntu', sans-serif;
}

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

body {
    background: radial-gradient(1200px 700px at 15% -10%, #FFFFFF 0%, var(--bg) 55%);
    color: var(--text);
    font-family: var(--font-body);
    padding: 16px;
    min-width: 1100px;
}

.canvas {
    width: 100%;
    /*max-width: 1680px;*/
    margin: 0 auto;
}

.layout {
    display: grid;
    grid-template-columns: 18% 1fr 30%;
    gap: 14px;
    align-items: start;
}

/* ============ COLUMNA IZQUIERDA (RAIL DE CONTROL) ============ */
.rail {
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: 0 1px 4px rgba(23,27,36,.06);
}

.rail-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rail-block + .rail-block {
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
}

.rail-logo {
    text-align: center;
}

.rail-logo img {
    height: 26px;
    max-height: 28px;
    width: auto;
    object-fit: contain;
}

.rail-session {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
}

.rail-lbl {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--text-faint);
    text-transform: uppercase;
    font-weight: 700;
}

.rail-btns {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.btn {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    white-space: nowrap;
    text-align: center;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--border-soft);
    color: var(--text);
}

.btn-primary {
    background: var(--gold);
    color: #FFFDF6;
    border-color: var(--gold);
}

.btn-primary:hover {
    background: #a2750a;
    border-color: #a2750a;
    color: #FFFDF6;
}

.tq-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.trimestre-tabs {
    display: flex;
    gap: 3px;
    margin-top: 2px;
}

.trimestre-tab {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--border);
    color: var(--text-dim);
    background: var(--panel-2);
    cursor: default;
}

.trimestre-tab[style*="068bc3"],
.trimestre-tab[style*="6, 139, 195"] {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #FFFDF6 !important;
}

.quincena-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.step-btn {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.step-btn:hover {
    background: var(--border);
}

.quincena-value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    width: 22px;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--text);
    outline: none;
}

.timer-face {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .03em;
    background: #ffffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
    /*padding: 6px 0;*/
    /*color: var(--gold);*/
    text-align: center;
}

.timer-sub {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--text-faint);
    text-align: center;
    margin-top: 3px;
}

#timeRange {
    -webkit-appearance: none;
    appearance: none;
    accent-color: var(--gold);
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    outline: none;
    margin-top: 6px;
}

#timeRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: none;
}

#timeRange::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: none;
}

.resgen-block {
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
}

.resgen-buttons {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

#RGR, #asignarRecursos {
    background: var(--gold) !important;
    color: #FFFDF6 !important;
    border: 1px solid var(--gold) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    text-shadow: none !important;
}

#RGR:hover, #asignarRecursos:hover:not(.ui-state-disabled) {
    background: #a2750a !important;
    border-color: #a2750a !important;
    color: #FFFDF6 !important;
}

#asignarRecursos.ui-state-disabled, #asignarRecursos:disabled {
    background: var(--border) !important;
    border-color: var(--border) !important;
    color: var(--text-faint) !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Sobrescritura del estado activo de jQuery UI (.ui-state-active) a Dorado var(--gold) */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover,
label[for="habilidadesAcreditadas"].ui-state-active,
label[for="habilidadesAcreditadas"]:active,
label[for="habilidadesAcreditadas"]:focus {
    border: 1px solid var(--gold) !important;
    background: var(--gold) !important;
    background-color: var(--gold) !important;
    color: #FFFDF6 !important;
}

/* Checkbox y label de Capacitaciones */
#habilidadesAcreditadas {
    accent-color: var(--gold);
    cursor: pointer;
    width: 14px;
    height: 14px;
}

#habilidadesAcreditadas:checked + label,
label[for="habilidadesAcreditadas"].ui-checkboxradio-checked,
label[for="habilidadesAcreditadas"].ui-state-active {
    color: #FFFDF6 !important;
    font-weight: 700 !important;
    background: var(--gold) !important;
    background-color: var(--gold) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 4px;
    padding: 2px 6px;
}

/* Botones de Acciones Quincenales (#bAccion1, #bAccion2) */
#bAccion1, #bAccion2 {
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    border: 1px solid var(--border) !important;
    background: var(--panel-2) !important;
    color: var(--text) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    min-width: 28px !important;
    height: 28px !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    line-height: 1 !important;
}

#bAccion1:hover, #bAccion2:hover {
    border-color: var(--gold) !important;
    background: var(--panel) !important;
}

/* Sobrescritura del color azul inyectado por JS a dorado */
#bAccion1[style*="068bc3"], #bAccion1[style*="6, 139, 195"],
#bAccion2[style*="068bc3"], #bAccion2[style*="6, 139, 195"] {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #FFFDF6 !important;
    box-shadow: 0 2px 5px rgba(185,134,14,0.3) !important;
}

#recRand1, #recRand2, #recRand3, #recRand4 {
    display: none;
}

#recRand1:has(img),
#recRand2:has(img),
#recRand3:has(img),
#recRand4:has(img) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 6px;
    box-shadow: 0 1px 3px rgba(23,27,36,.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-width: 38px;
    min-height: 38px;
}

#recRand1:has(img):hover,
#recRand2:has(img):hover,
#recRand3:has(img):hover,
#recRand4:has(img):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

/* Reemplazo visual automático de imágenes de recursos por íconos SVG vectoriales modernos */
#recRand1 img[src*="tiempo"],
#recRand2 img[src*="tiempo"],
#recRand3 img[src*="tiempo"],
#recRand4 img[src*="tiempo"] {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="%23B9860E" stroke-width="2.2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    width: 28px !important;
    height: 28px !important;
}

#recRand1 img[src*="personal"],
#recRand2 img[src*="personal"],
#recRand3 img[src*="personal"],
#recRand4 img[src*="personal"] {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="%230E86A8" stroke-width="2.2"><circle cx="12" cy="7.5" r="3.6" fill="%230E86A8"/><path d="M4.5 20c.7-4.6 4-7 7.5-7s6.8 2.4 7.5 7" stroke-linecap="round"/></svg>') !important;
    width: 28px !important;
    height: 28px !important;
}

#recRand1 img[src*="capital"],
#recRand2 img[src*="capital"],
#recRand3 img[src*="capital"],
#recRand4 img[src*="capital"] {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="%238A38C4" stroke-width="2.2"><circle cx="12" cy="12" r="9"/><text x="12" y="15.5" text-anchor="middle" font-size="11" font-family="Arial, sans-serif" font-weight="700" fill="%238A38C4">$</text></svg>') !important;
    width: 28px !important;
    height: 28px !important;
}

.departamentos img[src*="tiempo"] {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="%23B9860E" stroke-width="2.2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle;
}

.departamentos img[src*="personal"] {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="%230E86A8" stroke-width="2.2"><circle cx="12" cy="7.5" r="3.6" fill="%230E86A8"/><path d="M4.5 20c.7-4.6 4-7 7.5-7s6.8 2.4 7.5 7" stroke-linecap="round"/></svg>') !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle;
}

.departamentos img[src*="capital"] {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="%238A38C4" stroke-width="2.2"><circle cx="12" cy="12" r="9"/><text x="12" y="15.5" text-anchor="middle" font-size="11" font-family="Arial, sans-serif" font-weight="700" fill="%238A38C4">$</text></svg>') !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle;
}

table.activos {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

table.activos th {
    background: #e9e9e9;
    padding: 4px;
    font-size: 11px;
    text-align: center;
}

table.activos td {
    padding: 4px;
    border-top: 1px solid var(--border-soft);
    text-align: center;
}

/* Estilos de Tabla de Activos (#tablaActivos) con borde y texto en color del activo sobre fondo suave pastel */
#tablaActivos td.actPersonalCalificado {
    background-color: #FFFDF4 !important;
    color: var(--a-personal) !important;
    border: 1.5px solid var(--a-personal) !important;
    font-weight: 700 !important;
}

#tablaActivos td.actAnalistas {
    background-color: #FFF9F3 !important;
    color: var(--a-analistas) !important;
    border: 1.5px solid var(--a-analistas) !important;
    font-weight: 700 !important;
}

#tablaActivos td.actFlujoDeEfectivo {
    background-color: #F3FAF5 !important;
    color: var(--a-flujo) !important;
    border: 1.5px solid var(--a-flujo) !important;
    font-weight: 700 !important;
}

#tablaActivos td.actCreditoEInversion {
    background-color: #F3F7FE !important;
    color: var(--a-credito) !important;
    border: 1.5px solid var(--a-credito) !important;
    font-weight: 700 !important;
}

#tablaActivos td.actTecnologia {
    background-color: #FDF4F2 !important;
    color: var(--a-tecnologia) !important;
    border: 1.5px solid var(--a-tecnologia) !important;
    font-weight: 700 !important;
}

#tablaActivos td.actTransporteYMaquinaria {
    background-color: #F3F5FA !important;
    color: var(--a-transporte) !important;
    border: 1.5px solid var(--a-transporte) !important;
    font-weight: 700 !important;
}

/* Variables de Colores de Activos según la propuesta de diseño */
:root {
    --a-personal: #C79A16;
    --a-analistas: #C97324;
    --a-flujo: #2F9E5B;
    --a-credito: #2F6FE0;
    --a-tecnologia: #C6432B;
    --a-transporte: #1F3B73;
}

/* Clases de colores de activos */
.actNinguno { background-color: #FFFFFF; color: var(--text) !important; }

.actPersonalCalificado {
    background-color: var(--a-personal) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}
.actAnalistas {
    background-color: var(--a-analistas) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}
.actFlujoDeEfectivo {
    background-color: var(--a-flujo) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}
.actCreditoEInversion {
    background-color: var(--a-credito) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}
.actTecnologia {
    background-color: var(--a-tecnologia) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}
.actTransporteYMaquinaria {
    background-color: var(--a-transporte) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

/* Estilo pill/chip para los activos en tarjetas de departamento chicos */
.activo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px !important;
    padding: 0 10px !important;
    height: 28px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
}

.activo-item.actPersonalCalificado {
    border: 1.5px solid var(--a-personal) !important;
    background: #FFFDF4 !important;
    color: var(--a-personal) !important;
}
.activo-item.actPersonalCalificado::before {
    content: "Pers. ×";
    margin-right: 1px;
}

.activo-item.actAnalistas {
    border: 1.5px solid var(--a-analistas) !important;
    background: #FFF9F3 !important;
    color: var(--a-analistas) !important;
}
.activo-item.actAnalistas::before {
    content: "Anali. ×";
    margin-right: 1px;
}

.activo-item.actFlujoDeEfectivo {
    border: 1.5px solid var(--a-flujo) !important;
    background: #F3FAF5 !important;
    color: var(--a-flujo) !important;
}
.activo-item.actFlujoDeEfectivo::before {
    content: "Flujo ×";
    margin-right: 1px;
}

.activo-item.actCreditoEInversion {
    border: 1.5px solid var(--a-credito) !important;
    background: #F3F7FE !important;
    color: var(--a-credito) !important;
}
.activo-item.actCreditoEInversion::before {
    content: "Créd. ×";
    margin-right: 1px;
}

.activo-item.actTecnologia {
    border: 1.5px solid var(--a-tecnologia) !important;
    background: #FDF4F2 !important;
    color: var(--a-tecnologia) !important;
}
.activo-item.actTecnologia::before {
    content: "Tecno. ×";
    margin-right: 1px;
}

.activo-item.actTransporteYMaquinaria {
    border: 1.5px solid var(--a-transporte) !important;
    background: #F3F5FA !important;
    color: var(--a-transporte) !important;
}
.activo-item.actTransporteYMaquinaria::before {
    content: "Transp. ×";
    margin-right: 1px;
}

.ui-draggable-dragging {
    z-index: 999999 !important;
}

.draggable, .proyectoEncabezado, #activoReqProyectoNom1, #activoReqProyectoNom2, #activoReqProyectoNom3, .departamentos, #accionGestionarProyecto, #accionComprarCapacitacion, #accionHabilidadEspecial {
    cursor: pointer;
}

/* ============ PROYECTO DESTACADO / EN TURNO (GRANDE) ============ */
.proj-featured {
    background: var(--panel-2);
    border: 1.5px solid var(--gold);
    border-radius: 10px;
    padding: 14px 12px 10px 12px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 18px -8px rgba(185,134,14,.4);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.featured-flag {
    position: absolute;
    top: -9px;
    left: 14px;
    background: var(--gold);
    color: #FFFDF6;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 9px;
    border-radius: 4px;
    text-transform: uppercase;
}

.pf-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

.pf-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pf-title-block {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    display: flex;
    flex-direction: column-reverse;
}

.pf-title-block span {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--text-faint);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
}

.pf-desc {
    font-size: 15px;
    color: var(--text-dim);
    line-height: 1.35;
}

.pf-image-box {
    width: 100%;
    height: 95px;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.pf-image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pf-money {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    margin-top: 2px;
}

.pf-money .potencial {
    color: var(--green-ok) !important;
    font-weight: 700;
}

.pf-money .penal {
    color: var(--red) !important;
    font-weight: 700;
}

.pf-assets-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.pf-asset-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 2px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--panel);
    text-align: center;
    transition: all 0.15s ease;
}

#activoReqProyectoNom1, #activoReqProyectoNom2, #activoReqProyectoNom3 {
    display: block !important;
    font-size: 9px !important;
    color: transparent !important; /* Oculta la cadena larga original de jsCode.js */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2;
    width: 100%;
    text-align: center;
    position: relative;
    height: 14px;
}

#activoReqProyectoNom1::before,
#activoReqProyectoNom2::before,
#activoReqProyectoNom3::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#activoReqProyectoNom1.actPersonalCalificado::before,
#activoReqProyectoNom2.actPersonalCalificado::before,
#activoReqProyectoNom3.actPersonalCalificado::before {
    content: "PERS. CAL.";
    color: var(--a-personal) !important;
}
#activoReqProyectoNom1.actAnalistas::before,
#activoReqProyectoNom2.actAnalistas::before,
#activoReqProyectoNom3.actAnalistas::before {
    content: "ANALISTAS";
    color: var(--a-analistas) !important;
}
#activoReqProyectoNom1.actFlujoDeEfectivo::before,
#activoReqProyectoNom2.actFlujoDeEfectivo::before,
#activoReqProyectoNom3.actFlujoDeEfectivo::before {
    content: "FLUJO EFVO.";
    color: var(--a-flujo) !important;
}
#activoReqProyectoNom1.actCreditoEInversion::before,
#activoReqProyectoNom2.actCreditoEInversion::before,
#activoReqProyectoNom3.actCreditoEInversion::before {
    content: "CRÉD. E INV.";
    color: var(--a-credito) !important;
}
#activoReqProyectoNom1.actTecnologia::before,
#activoReqProyectoNom2.actTecnologia::before,
#activoReqProyectoNom3.actTecnologia::before {
    content: "TECNOLOGÍA";
    color: var(--a-tecnologia) !important;
}
#activoReqProyectoNom1.actTransporteYMaquinaria::before,
#activoReqProyectoNom2.actTransporteYMaquinaria::before,
#activoReqProyectoNom3.actTransporteYMaquinaria::before {
    content: "TRANSP./MAQ.";
    color: var(--a-transporte) !important;
}

.pf-asset-val {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 2px;
    color: var(--text);
}

/* Estilos de bordes y fondos claros de los asset boxes según el tipo de activo */
.pf-asset-box:has(.actPersonalCalificado) {
    border: 1.5px solid var(--a-personal) !important;
    background: #FFFDF4 !important;
}
.pf-asset-box:has(.actAnalistas) {
    border: 1.5px solid var(--a-analistas) !important;
    background: #FFF9F3 !important;
}
.pf-asset-box:has(.actFlujoDeEfectivo) {
    border: 1.5px solid var(--a-flujo) !important;
    background: #F3FAF5 !important;
}
.pf-asset-box:has(.actCreditoEInversion) {
    border: 1.5px solid var(--a-credito) !important;
    background: #F3F7FE !important;
}
.pf-asset-box:has(.actTecnologia) {
    border: 1.5px solid var(--a-tecnologia) !important;
    background: #FDF4F2 !important;
}
.pf-asset-box:has(.actTransporteYMaquinaria) {
    border: 1.5px solid var(--a-transporte) !important;
    background: #F3F5FA !important;
}

/* Fila de Activos Pagados / Asignados (#activosProyectoGde) */
.pf-paid-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.pf-paid-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    border-radius: 6px;
    border: 1.5px solid var(--border-soft);
    background: var(--panel-2);
    font-family: var(--font-mono);
    text-align: center;
}

#activoReqProyectoCant1,
#activoReqProyectoCant2,
#activoReqProyectoCant3 {
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#activoReqProyectoCant1.actPersonalCalificado,
#activoReqProyectoCant2.actPersonalCalificado,
#activoReqProyectoCant3.actPersonalCalificado {
    color: var(--a-personal) !important;
}
#activoReqProyectoCant1.actAnalistas,
#activoReqProyectoCant2.actAnalistas,
#activoReqProyectoCant3.actAnalistas {
    color: var(--a-analistas) !important;
}
#activoReqProyectoCant1.actFlujoDeEfectivo,
#activoReqProyectoCant2.actFlujoDeEfectivo,
#activoReqProyectoCant3.actFlujoDeEfectivo {
    color: var(--a-flujo) !important;
}
#activoReqProyectoCant1.actCreditoEInversion,
#activoReqProyectoCant2.actCreditoEInversion,
#activoReqProyectoCant3.actCreditoEInversion {
    color: var(--a-credito) !important;
}
#activoReqProyectoCant1.actTecnologia,
#activoReqProyectoCant2.actTecnologia,
#activoReqProyectoCant3.actTecnologia {
    color: var(--a-tecnologia) !important;
}
#activoReqProyectoCant1.actTransporteYMaquinaria,
#activoReqProyectoCant2.actTransporteYMaquinaria,
#activoReqProyectoCant3.actTransporteYMaquinaria {
    color: var(--a-transporte) !important;
}

.pf-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9.5px;
    color: var(--text-faint);
    border-top: 1px solid var(--border-soft);
    padding-top: 6px;
    margin-top: 4px;
}

.manto {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-dim);
    background: transparent !important;
}

.status-badge {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text-dim);
}

/* ============ PROYECTOS SECUNDARIOS / ACTIVOS (PROYECTOS CHICOS 1 AL 6) ============ */
.proj-grid-sm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 6px;
}

.proj-card-sm {
    width: 100%;
    min-width: 0;
}

.pm-card {
    background: var(--panel-2);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: all 0.15s ease;
    position: relative;
    cursor: pointer;
    min-height: 125px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.pm-card:hover {
    border-color: #A0AABF;
    box-shadow: 0 3px 8px rgba(0,0,0,.08);
}

.pm-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.pm-dept {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-faint);
    text-transform: uppercase;
}

.pm-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pm-puntos {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--green-ok);
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-top: 1px;
}

.pm-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.35;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Activos Requeridos Compactos en Proyectos Chicos (Inmunes a jsCode.js class wipes) */
.pm-assets-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.pm-card #activoReq1,
.pm-card #activoReq2,
.pm-card #activoReq3 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    padding: 2px 7px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin: 1px !important;
}

.pm-card #activoReq1.actPersonalCalificado,
.pm-card #activoReq2.actPersonalCalificado,
.pm-card #activoReq3.actPersonalCalificado {
    border: 1.5px solid var(--a-personal) !important;
    background: #FFFDF4 !important;
    color: var(--a-personal) !important;
}
.pm-card #activoReq1.actPersonalCalificado::before,
.pm-card #activoReq2.actPersonalCalificado::before,
.pm-card #activoReq3.actPersonalCalificado::before {
    content: "● ";
}

.pm-card #activoReq1.actAnalistas,
.pm-card #activoReq2.actAnalistas,
.pm-card #activoReq3.actAnalistas {
    border: 1.5px solid var(--a-analistas) !important;
    background: #FFF9F3 !important;
    color: var(--a-analistas) !important;
}
.pm-card #activoReq1.actAnalistas::before,
.pm-card #activoReq2.actAnalistas::before,
.pm-card #activoReq3.actAnalistas::before {
    content: "● ";
}

.pm-card #activoReq1.actFlujoDeEfectivo,
.pm-card #activoReq2.actFlujoDeEfectivo,
.pm-card #activoReq3.actFlujoDeEfectivo {
    border: 1.5px solid var(--a-flujo) !important;
    background: #F3FAF5 !important;
    color: var(--a-flujo) !important;
}
.pm-card #activoReq1.actFlujoDeEfectivo::before,
.pm-card #activoReq2.actFlujoDeEfectivo::before,
.pm-card #activoReq3.actFlujoDeEfectivo::before {
    content: "● ";
}

.pm-card #activoReq1.actCreditoEInversion,
.pm-card #activoReq2.actCreditoEInversion,
.pm-card #activoReq3.actCreditoEInversion {
    border: 1.5px solid var(--a-credito) !important;
    background: #F3F7FE !important;
    color: var(--a-credito) !important;
}
.pm-card #activoReq1.actCreditoEInversion::before,
.pm-card #activoReq2.actCreditoEInversion::before,
.pm-card #activoReq3.actCreditoEInversion::before {
    content: "● ";
}

.pm-card #activoReq1.actTecnologia,
.pm-card #activoReq2.actTecnologia,
.pm-card #activoReq3.actTecnologia {
    border: 1.5px solid var(--a-tecnologia) !important;
    background: #FDF4F2 !important;
    color: var(--a-tecnologia) !important;
}
.pm-card #activoReq1.actTecnologia::before,
.pm-card #activoReq2.actTecnologia::before,
.pm-card #activoReq3.actTecnologia::before {
    content: "● ";
}

.pm-card #activoReq1.actTransporteYMaquinaria,
.pm-card #activoReq2.actTransporteYMaquinaria,
.pm-card #activoReq3.actTransporteYMaquinaria {
    border: 1.5px solid var(--a-transporte) !important;
    background: #F3F5FA !important;
    color: var(--a-transporte) !important;
}
.pm-card #activoReq1.actTransporteYMaquinaria::before,
.pm-card #activoReq2.actTransporteYMaquinaria::before,
.pm-card #activoReq3.actTransporteYMaquinaria::before {
    content: "● ";
}

.pm-card #activoReq1.actNinguno,
.pm-card #activoReq2.actNinguno,
.pm-card #activoReq3.actNinguno,
.pm-card #activoReq1:empty,
.pm-card #activoReq2:empty,
.pm-card #activoReq3:empty {
    display: none !important;
}

/* Mantenimiento en Proyectos Chicos */
.pm-manto {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 2px;
    background: transparent !important;
    text-align: center;
}

/* Activos Pagados / Asignados en Proyectos Chicos (Inmunes a jsCode.js class wipes) */
.pm-paid-row {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.pm-card #activoAsignado1,
.pm-card #activoAsignado2,
.pm-card #activoAsignado3 {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #b7b7b7 !important;
    border-radius: 4px !important;
    padding: 2px 7px !important;
    text-align: center !important;
    display: inline-block !important;
    margin: 1px !important;
}

.pm-card #activoAsignado1:empty,
.pm-card #activoAsignado2:empty,
.pm-card #activoAsignado3:empty {
    display: none !important;
}

.pm-card #activoAsignado1.actPersonalCalificado,
.pm-card #activoAsignado2.actPersonalCalificado,
.pm-card #activoAsignado3.actPersonalCalificado {
    color: var(--a-personal) !important;
}
.pm-card #activoAsignado1.actAnalistas,
.pm-card #activoAsignado2.actAnalistas,
.pm-card #activoAsignado3.actAnalistas {
    color: var(--a-analistas) !important;
}
.pm-card #activoAsignado1.actFlujoDeEfectivo,
.pm-card #activoAsignado2.actFlujoDeEfectivo,
.pm-card #activoAsignado3.actFlujoDeEfectivo {
    color: var(--a-flujo) !important;
}
.pm-card #activoAsignado1.actCreditoEInversion,
.pm-card #activoAsignado2.actCreditoEInversion,
.pm-card #activoAsignado3.actCreditoEInversion {
    color: var(--a-credito) !important;
}
.pm-card #activoAsignado1.actTecnologia,
.pm-card #activoAsignado2.actTecnologia,
.pm-card #activoAsignado3.actTecnologia {
    color: var(--a-tecnologia) !important;
}
.pm-card #activoAsignado1.actTransporteYMaquinaria,
.pm-card #activoAsignado2.actTransporteYMaquinaria,
.pm-card #activoAsignado3.actTransporteYMaquinaria {
    color: var(--a-transporte) !important;
}

/* ============ COLUMNA CENTRAL (DEPARTAMENTOS) ============ */
.col-departamentos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-depto-gde {
    background: var(--panel);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: 0 2px 8px rgba(185,134,14,.15);
}

.dept-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.dept-card-sm {
    background: var(--panel);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: 0 1px 3px rgba(23,27,36,.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dept-card-sm:hover {
    border-color: #A0AABF;
    box-shadow: 0 3px 8px rgba(0,0,0,.08);
}

.dept-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dept-avatar-box {
    width: 130px;
    height: 130px;
    border-radius: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.dept-avatar-box img {
    height: 123px;
    width: auto;
    object-fit: contain;
}

.dept-info-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.dept-title {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.dept-members {
    font-family: var(--font-body);
    font-size: 10.5px;
    color: var(--text-dim);
}

.dept-habilidad-row {
    width: 100%;
    border: 1px dashed #C3C9D6;
    border-radius: 8px;
    background: var(--panel-2);
    padding: 6px 10px;
    font-size: 15px;
    color: var(--text-dim);
    line-height: 1.3;
    box-sizing: border-box;
}

.dept-habilidad-lbl {
    font-weight: 700;
    color: var(--text);
}

.dept-resources-assets-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.dept-res-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 3px 8px;
    height: 28px;
    box-sizing: border-box;
}

.val-tiempo {
    color: #C79A16 !important;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
}

.val-personal {
    color: #0E86A8 !important;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
}

.val-capital {
    color: #8A38C4 !important;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
}

.dept-habilidades-acreditadas-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
}

.dept-hab-item {
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
}

.dept-hab-item:empty {
    display: none !important;
}

/* ============ COLUMNA DERECHA (PROYECTOS) ============ */
.col-proyectos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-proj-gde {
    background: var(--panel);
    border: 2px solid #007bff;
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,123,255,.15);
}

.proj-grid-sm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.proj-card-sm {
    background: var(--panel);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* jQuery UI Alert Titlebar crimson theme */
.ui-dialog-titlebar {
    background-color: crimson;
    color: white;
}
.ui-widget.ui-widget-content {
    border-color: crimson;
    border-width: 5px;
}
.ui-dialog .ui-dialog-content {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}
.ui-dialog .ui-dialog-buttonpane button {
    font-size: 17px;
}