style(ui): refactorizar layout en porcentajes y ajustar escala tipografica

- 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.

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);">