Organización Estratégica DJAOS
/* Variables de Diseño DJAOS */
:root {
–navy-primary: #0f172a;
–gold-accent: #f59e0b;
–bg-light: #f1f5f9;
}
body {
font-family: ‘Inter’, sans-serif;
background-color: var(–bg-light);
color: #1f2937;
}
.card-shadow {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.fade-in { animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* — ESTILOS BLINDADOS — */
#app-container button.btn-primary, body .btn-primary, #app-container a.btn-primary {
background-color: #0f172a !important;
color: #ffffff !important;
border: 2px solid #0f172a !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#app-container button.btn-secondary, body .btn-secondary {
background-color: #ffffff !important;
color: #0f172a !important;
border: 2px solid #cbd5e1 !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
#app-container button.btn-ghost, body .btn-ghost {
background-color: transparent !important;
color: #64748b !important;
border: none !important;
font-weight: 600 !important;
}
/* Inputs específicos para tablas */
input.table-input {
border: none;
background: transparent;
width: 100%;
padding: 8px;
outline: none;
}
/* — OPTIMIZACIÓN DE IMPRESIÓN (PDF) — */
@media print {
header, footer, .no-print, button, .btn-ghost, .btn-primary, .btn-secondary, a.btn-primary { display: none !important; }
@page { margin: 1cm; size: A4 portrait; }
body {
background-color: white !important;
color: black !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
font-size: 11px !important;
}
.bg-slate-900, .bg-[#0f172a] { background-color: #0f172a !important; color: white !important; }
.bg-slate-50 { background-color: #f8fafc !important; }
.bg-white { background-color: #ffffff !important; }
.text-[#f59e0b], .text-amber-500 { color: #f59e0b !important; }
.border-t-4 { border-top-width: 4px !important; }
.border-[#f59e0b] { border-color: #f59e0b !important; }
.border-[#0f172a] { border-color: #0f172a !important; }
#app-container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; }
/* Ajustes layout */
.grid { display: block !important; }
.grid > div { margin-bottom: 1cm; page-break-inside: avoid; }
/* Inputs texto plano */
input, textarea {
border: 1px solid #ddd !important;
resize: none !important;
background: white !important;
padding: 5px !important;
font-size: 11px !important;
min-height: 0 !important;
height: auto !important;
}
.card-shadow { box-shadow: none !important; border: 1px solid #ccc !important; }
h1 { font-size: 24px !important; }
h2, h3 { font-size: 18px !important; margin-bottom: 5px !important; }
}
const state = {
step: 0,
supportNetwork: [ { name: », role: », availability: » }, { name: », role: », availability: » }, { name: », role: », availability: » } ],
materials: »,
smartGoal: { specific: », measurable: », achievable: », relevant: », timeBound: » },
tracking: »,
reflection: »
};
const savedData = localStorage.getItem(‘djaos_org_data’);
if (savedData) Object.assign(state, JSON.parse(savedData));
function init() { render(); }
function saveData() { localStorage.setItem(‘djaos_org_data’, JSON.stringify(state)); }
function setStep(newStep) { state.step = newStep; render(); window.scrollTo(0, 0); }
function updateSupport(index, field, value) { state.supportNetwork[index][field] = value; saveData(); }
function addSupportRow() { state.supportNetwork.push({ name: », role: », availability: » }); render(); saveData(); }
function updateField(key, value) { state[key] = value; saveData(); }
function updateSmart(field, value) { state.smartGoal[field] = value; saveData(); }
function render() {
const container = document.getElementById(‘app-container’);
const stepIndicator = document.getElementById(‘step-indicator’);
if (state.step > 0 && state.step < 5) {
stepIndicator.innerHTML = `
Fase ${state.step} de 4`;
} else { stepIndicator.innerHTML = »; }
if (state.step === 0) container.innerHTML = getWelcomeHTML();
else if (state.step === 1) container.innerHTML = getResourcesHTML();
else if (state.step === 2) container.innerHTML = getSmartGoalHTML();
else if (state.step === 3) container.innerHTML = getTrackingHTML();
else if (state.step === 4) container.innerHTML = getSummaryHTML();
}
function getWelcomeHTML() {
return `
Prepara tu entorno, tus recursos y define tus objetivos.
`;
}
function getResourcesHTML() {
const rows = state.supportNetwork.map((item, idx) => `
|
|
|
`).join(»);
return `
| Persona | Asignatura / Rol | Disponibilidad |
|---|
${rows}
`;
}
function getSmartGoalHTML() {
return `
`;
}
function getTrackingHTML() {
return `
`;
}
function getSummaryHTML() {
const supportRows = state.supportNetwork.filter(s => s.name).map(s => `
| ${s.name} | ${s.role} | ${s.availability} |
`).join(»);
return `
Estrategia definida para el éxito.
Específico
${state.smartGoal.specific || ‘-‘}
Medible
${state.smartGoal.measurable || ‘-‘}
Alcanzable
${state.smartGoal.achievable || ‘-‘}
Relevante
${state.smartGoal.relevant || ‘-‘}
Tiempo
${state.smartGoal.timeBound || ‘-‘}
👥 Red de Apoyo
| Nombre | Rol | Disponibilidad |
|---|
${supportRows || ‘| Sin datos |
‘}
📚 Recursos
${state.materials || ‘-‘}
Compromiso y Reflexión
«${state.reflection || ‘…’}»
Seguimiento: ${state.tracking || ‘-‘}Firma: ____________________
`;
}
init();
