mirror of
https://github.com/cheveguerra/Colaborando.git
synced 2026-08-18 16:36:39 +00:00
cheveguerra
77c86122f0
- Ajustar la cuadricula del tablero (.layout) a proporciones en porcentaje (18% 1fr 30%). - Disponer botones de navegacion (.rail-btns) horizontalmente en un solo renglon. - Reordenar el bloque de Acciones Posibles por encima de la Tabla de Activos en el Rail. - Ajustar proporciones de Capacitaciones y Acciones a 70%/30% con botones flexibles. - Ampliar escala tipografica en titulos, descripciones, tarjetas de departamentos y proyectos. - Aumentar tamano del avatar de departamentos a 130px. - Actualizar CONTEXT.md con la arquitectura y decisiones de la sesion.
1471 lines
36 KiB
CSS
1471 lines
36 KiB
CSS
: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;
|
||
}
|