refactor(web): esquinas como variables del tema (--radius)

Los radios estaban escritos en cada componente. Ahora salen de --radius
(campos), --radius-lg (botones), --radius-pill (insignias) y --radius-panel
(tablas y ventanas, 0 por defecto). Sin cambio visual: un tema nuevo puede
redondear la interfaz sin tocar componentes.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/README.md

@@ -27,7 +27,9 @@ Agregar un tema:
 2. `@import` en `src/styles.css`.
 3. Una entrada en `src/app/core/theme/themes.ts`.
 
-Tokens: `--app --shell --shell-ink --shell-quiet --win --panel --line --line-soft --ink --quiet --field --field-ro --field-b --focus --gold --grid-head --row-sel --row-alt --ok --ok-bg --warn --warn-bg --err --err-bg --btn --btn-b --btn-h --overlay --shadow-pop`.
+Forma: `--radius` (campos, 2 px), `--radius-lg` (botones, 3 px), `--radius-pill` (insignias) y `--radius-panel` (tablas, ventanas y diálogos; 0 = esquinas rectas como SBO). Un tema puede redondear sin tocar componentes.
+
+Tokens de color: `--app --shell --shell-ink --shell-quiet --win --panel --line --line-soft --ink --quiet --field --field-ro --field-b --focus --gold --grid-head --row-sel --row-alt --ok --ok-bg --warn --warn-bg --err --err-bg --btn --btn-b --btn-h --overlay --shadow-pop`.
 
 ## Tipos compartidos
 

apps/web/src/app/core/theme/theme-switcher.ts

@@ -26,7 +26,7 @@ import { ThemeService } from './theme.service';
       background: transparent;
       color: var(--shell-ink);
       border: 1px solid var(--shell-quiet);
-      border-radius: 3px;
+      border-radius: var(--radius-lg);
       padding: 1px 4px;
     }
     option {

apps/web/src/app/features/home/home.page.ts

@@ -26,7 +26,7 @@ import { MenuService } from '../../core/menu/menu.service';
     .sub { margin: 2px 0 16px; color: var(--quiet); }
     h2 { margin: 12px 0 6px; font-size: 13px; color: var(--quiet); text-transform: uppercase; letter-spacing: .4px; }
     .links { display: flex; flex-wrap: wrap; gap: 6px; }
-    a { padding: 4px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); text-decoration: none; }
+    a { padding: 4px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; }
     a:hover { background: var(--row-sel); border-color: var(--focus); }
   `,
 })

apps/web/src/app/features/login/login.page.css

@@ -52,7 +52,7 @@ label {
   width: 100%;
   padding: 2px 8px;
   border: 1px solid var(--field-b);
-  border-radius: 2px;
+  border-radius: var(--radius);
   background: var(--field);
 }
 .in:focus {
@@ -64,7 +64,7 @@ label {
   margin-top: 14px;
   height: 32px;
   border: 1px solid var(--btn-b);
-  border-radius: 3px;
+  border-radius: var(--radius-lg);
   background: var(--btn);
   cursor: pointer;
 }

apps/web/src/app/layout/main-layout.css

@@ -35,7 +35,7 @@
   background: transparent;
   color: var(--shell-ink);
   border: 1px solid var(--shell-quiet);
-  border-radius: 3px;
+  border-radius: var(--radius-lg);
   padding: 2px 10px;
   cursor: pointer;
 }

apps/web/src/app/shared/list/data-table.css

@@ -8,6 +8,7 @@
   min-height: 0;
   overflow: auto;
   border: 1px solid var(--line);
+  border-radius: var(--radius-panel);
   background: var(--panel);
 }
 .tablewrap.busy {
@@ -78,7 +79,7 @@ tr.none td {
   display: inline-block;
   padding: 0 8px;
   border: 1px solid var(--line);
-  border-radius: 10px;
+  border-radius: var(--radius-pill);
   font-size: 11.5px;
   color: var(--quiet);
 }

apps/web/src/app/shared/list/filter-bar.css

@@ -47,7 +47,7 @@
   gap: 3px;
   padding: 0 4px 0 6px;
   border: 1px solid var(--focus);
-  border-radius: 2px;
+  border-radius: var(--radius);
   background: var(--row-sel);
   color: var(--focus);
   font-size: 11.5px;

apps/web/src/app/shared/value-help/value-help.css

@@ -16,6 +16,8 @@
   min-height: 360px;
   background: var(--win);
   border: 1px solid var(--line);
+  border-radius: var(--radius-panel);
+  overflow: hidden;
   box-shadow: var(--shadow-pop);
 }
 header {

apps/web/src/styles/base.css

@@ -5,6 +5,12 @@
 :root {
   --font: 'Segoe UI', Tahoma, 'Helvetica Neue', Arial, sans-serif;
   --fs: 13px;
+
+  /* Forma: esquinas contenidas, como SBO. Un tema puede redondear sin tocar componentes. */
+  --radius: 2px; /* campos, chips */
+  --radius-lg: 3px; /* botones, tarjetas pequeñas */
+  --radius-pill: 10px; /* insignias */
+  --radius-panel: 0; /* tablas, ventanas y diálogos */
 }
 
 *,

apps/web/src/styles/forms.css

@@ -10,7 +10,7 @@
   min-width: 0;
   padding: 1px 6px;
   border: 1px solid var(--field-b);
-  border-radius: 2px;
+  border-radius: var(--radius);
   background: var(--field);
 }
 .sbo-ta {
@@ -55,7 +55,7 @@
   min-width: 26px;
   padding: 0 6px;
   border: 1px solid var(--field-b);
-  border-radius: 2px;
+  border-radius: var(--radius);
   background: var(--btn);
   cursor: pointer;
 }
@@ -92,7 +92,7 @@
   padding: 0 14px;
   background: var(--btn);
   border: 1px solid var(--btn-b);
-  border-radius: 3px;
+  border-radius: var(--radius-lg);
   cursor: pointer;
 }
 .btn:hover:not(:disabled) {