diff --git a/CONTEXT.md b/CONTEXT.md
index efe4dd0..d8a26fb 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -2,27 +2,24 @@
 
 ## Resumen Ejecutivo de la Sesión
 
-El objetivo principal de esta sesión consistió en la creación e implementación de **`colaborando3.php`**, la depuración del código en **`jsCode.js`**, y la refactorización arquitectónica de estilos mediante la extracción a **`estilos3.css`** con control de caché dinámico (*cache busting*).
+El objetivo principal de esta sesión consistió en el refinamiento del layout responsivo y la escala tipográfica de **`colaborando3.php`** y **`estilos3.css`**, ajustando proporciones en porcentajes, reordenando el panel lateral (Rail) y aumentando la legibilidad general de la interfaz.
 
 ---
 
 ## Decisiones Principales y Arquitectura
 
-1. **Desacoplamiento de Estilos (`estilos3.css`)**:
-   * Se extrajeron más de 1,470 líneas del bloque `<style>` de `colaborando3.php` hacia el nuevo archivo independiente **`estilos3.css`**, reduciendo el archivo PHP de ~2,270 a 798 líneas.
-   * **Cache Busting Dinámico**: Se implementó la inclusión con versión basada en tiempo de modificación (`filemtime('estilos3.css')`) en `colaborando3.php`.
-   * **Refinamiento de UI**: Ocultación de slots vacíos en la tarjeta del Proyecto en Turno (`:empty { display: none !important; }`), ajuste tipográfico en el temporizador (`.timer-face`), y actualización de enlaces a `resumen3.php`.
+1. **Reestructuración de Layout en Porcentajes (`estilos3.css`)**:
+   * **Cuadrícula Principal (`.layout`)**: Se migró de anchos fijos a `18% 1fr 30%`. La columna de Proyectos ocupa ahora el 30% del viewport.
+   * **Navegación Horizontal (`.rail-btns`)**: Se configuró en fila (`flex-direction: row`), manteniendo "Pantalla Completa" e "Ir al Resumen" en el mismo renglón.
+   * **Reorganización del Rail (`colaborando3.php`)**: Se posicionó el bloque `#tablaAccionesPosibles` por encima de la `#tablaActivos`.
+   * **Proporción Capacitaciones / Acciones**: Ajustada a cuadrícula `1fr 30%` con botones flexibles (`flex: 1`).
 
-2. **Creación y Refactorización de `colaborando3.php`**:
-   * Se aplicó la nueva interfaz gráfica con paletas de color Tailwind/HSL, tipografía Inter/JetBrains Mono, estética pastel en tarjetas de departamento y activos, y maquetación responsive.
-   * **Tarjetas de Proyectos**: Rediseño del Proyecto en Turno y proyectos secundarios con etiquetas compactas y contadores temáticos.
-   * **Tabla de Activos (`#tablaActivos`)**: Refinada con bordes y letras en colores temáticos sobre fondos pastel.
-   * **Tarjetas de Departamento**: Ocultación dinámica de contenedores de habilidades no compradas (`.dept-hab-item:empty { display: none !important; }`).
+2. **Escala Visual y Tipografía**:
+   * **Avatares de Departamentos**: Se duplicó el tamaño del contenedor a **`130px × 130px`** y las imágenes a `123px` para mayor visibilidad.
+   * **Ampliación Tipográfica General**: Aumento progresivo de tamaños de fuente en títulos de proyectos (16px), descripciones (15px), etiquetas del rail (13px), tarjetas de proyectos chicos (12px/13px) y habilidades (15px).
 
-3. **Limpieza y Consistencia en `jsCode.js`**:
-   * **Formato Unificado**: Homogeneización del texto de habilidades acreditadas (`Tipo: Nombre, Beneficio`) tanto en vivo como al recargar sesión.
-   * **Depuración de Código Muerto**: Eliminación de funciones huérfanas sin invocaciones en el proyecto.
-   * **Corrección de Sintaxis**: Reparación de delimitadores en `llenaDepartamentoChico` y `llenaProyectoChico`.
+3. **Desacoplamiento previo de Estilos (`estilos3.css`)**:
+   * Estilos extraídos del bloque `<style>` de `colaborando3.php` con *cache busting* dinámico (`filemtime`).
 
 ---
 
diff --git a/colaborando3.php b/colaborando3.php
index f8c89fa..24e21fa 100644
--- a/colaborando3.php
+++ b/colaborando3.php
@@ -106,16 +106,16 @@
             <!-- CAPACITACIONES Y ACCIONES EN 2 RENGLONES COMPACTOS -->
             <div class="rail-block">
                 <!-- Renglon 1: Etiquetas (Capacitaciones a la izquierda, Acciones a la derecha) -->
-                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
+                <div style="display:grid; grid-template-columns: 1fr 30%; align-items:center; margin-bottom:4px;">
                     <div style="display:flex; align-items:center; gap:5px;">
                         <input type="checkbox" name="habilidadesAcreditadas" id="habilidadesAcreditadas">
-                        <label for="habilidadesAcreditadas" class="rail-lbl" style="cursor:pointer; text-transform:none; font-size:11px;">Capacitaciones</label>
+                        <label for="habilidadesAcreditadas" class="rail-lbl" style="cursor:pointer; text-transform:none;">Capacitaciones</label>
                     </div>
-                    <span class="rail-lbl" style="font-size:10px;">Acciones</span>
+                    <span class="rail-lbl" style="text-align:center;">Acciones</span>
                 </div>
 
                 <!-- Renglon 2: Contenido (#haNombre a la izquierda, botones #bAccion1 y #bAccion2 a la derecha) -->
-                <div style="display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center;">
+                <div style="display:grid; grid-template-columns: 1fr 30%; gap:8px; align-items:center;">
                     <table id="tablaHabilidadesAcreditadas" actual="" style="height:32px; width:100%; text-align:center; font-size:10px; background:var(--panel-2); border-radius:6px; border:1px solid var(--border-soft); box-sizing:border-box;">
                         <tr>
                             <td><span id="haNombre" style="font-size: 9px;font-weight:bold; display:block; line-height:1.1;"></span></td>
@@ -125,13 +125,28 @@
                         </tr>
                     </table>
                     
-                    <div style="display:flex; gap:4px; align-items:center;">
-                        <button id="bAccion1" onclick="toggleColor(this)">1</button>
-                        <button id="bAccion2" onclick="toggleColor(this)">2</button>
+                    <div style="display:flex; gap:4px; align-items:center; width:100%;">
+                        <button id="bAccion1" onclick="toggleColor(this)" style="flex:1;">1</button>
+                        <button id="bAccion2" onclick="toggleColor(this)" style="flex:1;">2</button>
                     </div>
                 </div>
             </div>
 
+            <!-- ACCIONES POSIBLES -->
+            <div class="rail-block">
+                <div class="rail-lbl" style="margin-bottom:4px;">Acciones Posibles</div>
+                <table id="tablaAccionesPosibles" style="width:100%; border:1px solid var(--border); font-size:14.5px; border-radius:6px; background:var(--panel-2);padding:8px">
+                    <tr><td>1.-</td><td>Generar recursos</td></tr>
+                    <tr><td>2.-</td><td>Generar activos</td></tr>
+                    <tr><td>3.-</td><td>Intercambiar recursos</td></tr>
+                    <tr><td>4.-</td><td><span id="accionGestionarProyecto">Gestionar nuevo proyecto</span></td></tr>
+                    <tr><td>5.-</td><td>Convocar junta</td></tr>
+                    <tr><td>6.-</td><td><span id="accionComprarCapacitacion">Abrir/Cambiar/Comprar habilidad</span></td></tr>
+                    <tr><td>7.-</td><td>Colocar activos recuperados</td></tr>
+                    <tr><td>8.-</td><td><span id="accionHabilidadEspecial">Habilidad especial</span></td></tr>
+                </table>
+            </div>
+
             <!-- TABLA DE ACTIVOS (PRODUCCIÓN / RECUPERACIÓN) -->
             <div class="rail-block">
                 <div class="rail-lbl" style="margin-bottom:4px;">Tabla de Activos</div>
@@ -178,21 +193,6 @@
                 </table>
             </div>
 
-            <!-- ACCIONES POSIBLES -->
-            <div class="rail-block">
-                <div class="rail-lbl" style="margin-bottom:4px;">Acciones Posibles</div>
-                <table id="tablaAccionesPosibles" style="width:100%; border:1px solid var(--border); font-size:10.5px; border-radius:6px; background:var(--panel-2);">
-                    <tr><td>1.-</td><td>Generar recursos</td></tr>
-                    <tr><td>2.-</td><td>Generar activos</td></tr>
-                    <tr><td>3.-</td><td>Intercambiar recursos</td></tr>
-                    <tr><td>4.-</td><td><span id="accionGestionarProyecto">Gestionar nuevo proyecto</span></td></tr>
-                    <tr><td>5.-</td><td>Convocar junta</td></tr>
-                    <tr><td>6.-</td><td><span id="accionComprarCapacitacion">Abrir/Cambiar/Comprar habilidad</span></td></tr>
-                    <tr><td>7.-</td><td>Colocar activos recuperados</td></tr>
-                    <tr><td>8.-</td><td><span id="accionHabilidadEspecial">Habilidad especial</span></td></tr>
-                </table>
-            </div>
-
             <!-- CONTADORES FINALES -->
             <div class="rail-block">
                 <table style="width:100%; text-align:center; font-size:11px; border:1px solid var(--border); border-radius:6px; background:var(--panel);">
diff --git a/estilos3.css b/estilos3.css
index 6eddcdf..17f9523 100644
--- a/estilos3.css
+++ b/estilos3.css
@@ -41,13 +41,13 @@ body {
 
 .canvas {
     width: 100%;
-    max-width: 1680px;
+    /*max-width: 1680px;*/
     margin: 0 auto;
 }
 
 .layout {
     display: grid;
-    grid-template-columns: 260px 1fr 350px;
+    grid-template-columns: 18% 1fr 30%;
     gap: 14px;
     align-items: start;
 }
@@ -98,7 +98,7 @@ body {
 
 .rail-lbl {
     font-family: var(--font-mono);
-    font-size: 10px;
+    font-size: 13px;
     letter-spacing: .08em;
     color: var(--text-faint);
     text-transform: uppercase;
@@ -107,14 +107,14 @@ body {
 
 .rail-btns {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: 5px;
 }
 
 .btn {
     font-family: var(--font-display);
     font-weight: 600;
-    font-size: 11px;
+    font-size: 13px;
     padding: 6px 10px;
     border-radius: 6px;
     border: 1px solid var(--border);
@@ -581,7 +581,7 @@ table.activos td {
     border-radius: 14px !important;
     padding: 0 10px !important;
     height: 28px !important;
-    font-size: 9px !important;
+    font-size: 13px !important;
     font-weight: 700 !important;
     cursor: pointer;
     line-height: 1.2;
@@ -703,7 +703,7 @@ table.activos td {
 
 .pf-title-block {
     font-family: var(--font-body);
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 700;
     line-height: 1.2;
     color: var(--text);
@@ -713,7 +713,7 @@ table.activos td {
 
 .pf-title-block span {
     font-family: var(--font-mono);
-    font-size: 9px;
+    font-size: 13px;
     letter-spacing: .08em;
     color: var(--text-faint);
     text-transform: uppercase;
@@ -722,7 +722,7 @@ table.activos td {
 }
 
 .pf-desc {
-    font-size: 10.5px;
+    font-size: 15px;
     color: var(--text-dim);
     line-height: 1.35;
 }
@@ -1033,7 +1033,7 @@ table.activos td {
 
 .pm-dept {
     font-family: var(--font-mono);
-    font-size: 8px;
+    font-size: 12px;
     font-weight: 700;
     letter-spacing: .06em;
     color: var(--text-faint);
@@ -1042,7 +1042,7 @@ table.activos td {
 
 .pm-title {
     font-family: var(--font-body);
-    font-size: 11.5px;
+    font-size: 13px;
     font-weight: 700;
     color: var(--text);
     line-height: 1.25;
@@ -1053,7 +1053,7 @@ table.activos td {
 
 .pm-puntos {
     font-family: var(--font-mono);
-    font-size: 8.5px;
+    font-size: 12px;
     font-weight: 700;
     color: var(--green-ok);
     line-height: 1.2;
@@ -1063,10 +1063,11 @@ table.activos td {
 }
 
 .pm-desc {
-    font-size: 9.5px;
+    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;
@@ -1091,7 +1092,7 @@ table.activos td {
     border-radius: 12px !important;
     padding: 2px 7px !important;
     font-family: var(--font-mono) !important;
-    font-size: 9px !important;
+    font-size: 11px !important;
     font-weight: 700 !important;
     line-height: 1.2 !important;
     white-space: nowrap !important;
@@ -1188,7 +1189,7 @@ table.activos td {
 /* Mantenimiento en Proyectos Chicos */
 .pm-manto {
     font-family: var(--font-mono);
-    font-size: 8.5px;
+    font-size: 11px;
     font-weight: 700;
     color: var(--text-faint);
     letter-spacing: .04em;
@@ -1211,7 +1212,7 @@ table.activos td {
 .pm-card #activoAsignado2,
 .pm-card #activoAsignado3 {
     font-family: var(--font-mono) !important;
-    font-size: 10px !important;
+    font-size: 12px !important;
     font-weight: 800 !important;
     line-height: 1 !important;
     background: transparent !important;
@@ -1306,8 +1307,8 @@ table.activos td {
 }
 
 .dept-avatar-box {
-    width: 65px;
-    height: 65px;
+    width: 130px;
+    height: 130px;
     border-radius: 10px;
     background: var(--panel-2);
     border: 1px solid var(--border-soft);
@@ -1319,7 +1320,7 @@ table.activos td {
 }
 
 .dept-avatar-box img {
-    height: 56px;
+    height: 123px;
     width: auto;
     object-fit: contain;
 }
@@ -1351,7 +1352,7 @@ table.activos td {
     border-radius: 8px;
     background: var(--panel-2);
     padding: 6px 10px;
-    font-size: 11px;
+    font-size: 15px;
     color: var(--text-dim);
     line-height: 1.3;
     box-sizing: border-box;
@@ -1386,21 +1387,21 @@ table.activos td {
     color: #C79A16 !important;
     font-family: var(--font-mono);
     font-weight: 700;
-    font-size: 10px;
+    font-size: 13px;
 }
 
 .val-personal {
     color: #0E86A8 !important;
     font-family: var(--font-mono);
     font-weight: 700;
-    font-size: 10px;
+    font-size: 13px;
 }
 
 .val-capital {
     color: #8A38C4 !important;
     font-family: var(--font-mono);
     font-weight: 700;
-    font-size: 10px;
+    font-size: 13px;
 }
 
 .dept-habilidades-acreditadas-list {
@@ -1413,7 +1414,7 @@ table.activos td {
 
 .dept-hab-item {
     color: var(--text);
-    font-size: 11px;
+    font-size: 15px;
     line-height: 1.3;
 }
 
@@ -1460,7 +1461,7 @@ table.activos td {
     border-width: 5px;
 }
 .ui-dialog .ui-dialog-content {
-    font-size: 16px;
+    font-size: 15px;
     font-weight: bold;
     text-align: center;
 }