feat(A08): Ámbito dtic-NOTAS creado - Sistema web de notas/informes
Nuevo ámbito A08 para gestión de notas e informes formales: Arquitectura: - Separación contenido (archivos .md) de presentación (web HTML) - Plantillas configurables para diferentes tipos de notas - Vista previa con membrete institucional UTN-FRLR - Impresión/PDF via window.print() con CSS @media print Archivos creados: - docs/ambito/dtic-NOTAS/A08_dtic-NOTAS.md (manifiesto) - docs/ambito/dtic-NOTAS/A08.P001_Sistema-Web-Notas.md (plan) - docs/ambito/dtic-NOTAS/app/index.html (interfaz) - docs/ambito/dtic-NOTAS/app/styles.css (estilos institucionales) - docs/ambito/dtic-NOTAS/app/app.js (lógica + marked.js CDN) - docs/ambito/dtic-NOTAS/plantillas/nota-simple.md - docs/ambito/dtic-NOTAS/contenido/2026/ejemplo-nota.md Migración: - dtic-NOTAs/ movido a docs/ambito/dtic-NOTAS/dtic-NOTAs/ - Histórico 2019-2025 preservado en .Hist/ - Convención de nombres documentada: Nota-<AÑO><NUMERO>_<Asunto>.<ext> Uso: 1. Abrir docs/ambito/dtic-NOTAS/app/index.html en navegador 2. Seleccionar plantilla o cargar archivo .md 3. Completar datos de nota 4. Generar vista previa e imprimir Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ricardo Monla
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
2ab51af7f1
commit
85645ce0b8
@@ -0,0 +1,298 @@
|
||||
/* =============================================
|
||||
Estilos - Generador de Notas DTIC UTN-FRLR
|
||||
============================================= */
|
||||
|
||||
:root {
|
||||
--primary: #1a4d8f;
|
||||
--secondary: #2c5f2d;
|
||||
--accent: #97bc09;
|
||||
--light: #f5f5f5;
|
||||
--dark: #333;
|
||||
--border: #ddd;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: var(--light);
|
||||
color: var(--dark);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
height: fit-content;
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
color: var(--primary);
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
color: var(--dark);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.section select,
|
||||
.section input[type="text"],
|
||||
.section input[type="date"],
|
||||
.section input[type="file"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
color: var(--primary);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.actions button {
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.actions button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.actions button:nth(1) { background: var(--primary); color: white; }
|
||||
.actions button:nth(2) { background: var(--secondary); color: white; }
|
||||
.actions button:nth(3) { background: var(--accent); color: white; }
|
||||
.actions button:nth(4) { background: var(--dark); color: white; }
|
||||
|
||||
/* Editor */
|
||||
.editor {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.editor h2 {
|
||||
color: var(--primary);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#editorTexto {
|
||||
width: 100%;
|
||||
min-height: 500px;
|
||||
padding: 15px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Preview */
|
||||
.preview {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.preview h2 {
|
||||
color: var(--primary);
|
||||
margin-bottom: 15px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid var(--border);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 100px 20px;
|
||||
}
|
||||
|
||||
/* Documento */
|
||||
.documento {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border: 1px solid #eee;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.nota {
|
||||
max-width: 210mm; /* A4 width */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Membrete */
|
||||
.membrete {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 3px solid var(--primary);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.datos-institucion h1 {
|
||||
font-size: 1.3rem;
|
||||
color: var(--primary);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.datos-institucion h2 {
|
||||
font-size: 1rem;
|
||||
color: var(--secondary);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.datos-institucion p {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Datos de la nota */
|
||||
.datos-nota,
|
||||
.destinatario {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.datos-nota p,
|
||||
.destinatario p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Cuerpo */
|
||||
.cuerpo {
|
||||
min-height: 300px;
|
||||
line-height: 1.8;
|
||||
font-size: 11pt;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.cuerpo p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Firma */
|
||||
.firma {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.espacio-firma {
|
||||
height: 60px;
|
||||
border-bottom: 1px solid var(--dark);
|
||||
margin-bottom: 10px;
|
||||
width: 60%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.firma .nombre-remitente {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.firma .cargo-remitente {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
Estilos para impresión
|
||||
============================================= */
|
||||
@media print {
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.sidebar,
|
||||
.editor,
|
||||
.preview h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.documento {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nota {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 2.5cm;
|
||||
size: A4;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user