# Forma y sombra

> Radios y sombras institucionales.

Categoría: Base · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Radios

```html
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="rounded-ccs border border-ccs-line bg-white p-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-sm font-medium">Superficie y botón</div>
    <div class="spec mt-2">rounded-ccs · 15px</div>
    <p class="mt-2 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Cards, diálogos, menús, avisos, tablas y botones con texto.</p>
    <button type="button" class="mt-4 h-10 px-4 text-sm rounded-ccs bg-ccs-blue text-white font-medium hover:bg-ccs-blue-mid transition shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Inscribirme</button>
  </div>
  <div class="rounded-ccs border border-ccs-line bg-white p-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-sm font-medium">Campo y pieza interna</div>
    <div class="spec mt-2">rounded-lg · 8px</div>
    <p class="mt-2 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Campos y piezas dentro de una superficie: ítems de menú, teclas, chips cuadrados, botón copiar.</p>
    <div class="mt-4 h-9 px-3 flex items-center rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-slate dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text-2">nombre@empresa.cl</div>
  </div>
  <div class="rounded-ccs border border-ccs-line bg-white p-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-sm font-medium">Contenedor de grupo</div>
    <div class="spec mt-2">rounded-xl · 12px</div>
    <p class="mt-2 text-sm text-ccs-slate dark:text-ccs-dark-text-2">El borde que agrupa opciones de 8 px con 4 px de espacio, como el Grupo segmentado: 8 + 4 = 12.</p>
    <div class="mt-4 inline-flex rounded-xl border border-ccs-line bg-white p-1 dark:border-ccs-dark-line dark:bg-ccs-dark-surface"><span class="px-3 h-8 inline-flex items-center text-sm font-medium rounded-lg bg-ccs-blue text-white dark:bg-ccs-blue-mid">Día</span><span class="px-3 h-8 inline-flex items-center text-sm font-medium text-ccs-slate dark:text-ccs-dark-text-2">Semana</span></div>
  </div>
  <div class="rounded-ccs border border-ccs-line bg-white p-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-sm font-medium">Círculo y píldora</div>
    <div class="spec mt-2">rounded-full</div>
    <p class="mt-2 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Avatares, badges, contadores, botones de solo ícono redondos.</p>
    <div class="mt-4 flex items-center gap-2">
      <span class="inline-flex items-center h-6 px-2.5 rounded-full text-xs font-medium bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Activo</span>
      <span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm">MP</span>
    </div>
  </div>
  <div class="rounded-ccs border border-ccs-line bg-white p-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-sm font-medium">Casilla</div>
    <div class="spec mt-2">rounded · 4px</div>
    <p class="mt-2 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Solo casillas (con <code class="mono">ccs-check</code>). Ningún otro elemento usa 4 px.</p>
    <label class="mt-4 flex items-center gap-2 text-sm"><input type="checkbox" checked class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid"/>Recibir el boletín</label>
  </div>
  <div class="rounded-ccs border border-ccs-line bg-white p-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-sm font-medium">Muestra de color</div>
    <div class="spec mt-2">rounded-none</div>
    <p class="mt-2 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Muestras de color en paletas y leyendas de gráficos.</p>
    <div class="mt-4 flex gap-1"><span class="h-6 w-6 rounded-none bg-ccs-blue"></span><span class="h-6 w-6 rounded-none bg-ccs-blue-mid"></span><span class="h-6 w-6 rounded-none bg-ccs-ink dark:bg-ccs-dark-text"></span></div>
  </div>
</div>
```

## Guía: Una pieza dentro de otra

Cuando una pieza va dentro de otra con poco espacio entre ambas (hasta 8 px), su radio es el de afuera menos ese espacio, para que las esquinas queden paralelas: opciones de 8 px dentro de un grupo de 12 px con 4 px de espacio, e ítems de 8 px dentro de un menú de 15 px con 6 u 8 px de espacio (1 px de diferencia no se corrige). Con más espacio, cada una mantiene su radio: un botón de 15 px dentro de una card con p-5 sigue en 15 px.

## Sombras

```html
<div class="grid sm:grid-cols-2 gap-4">
  <div class="rounded-ccs border border-ccs-line bg-white p-6 shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-sm font-medium">Card elevada</div>
    <div class="spec mt-3">shadow-ccs<br/>1px 3px 20px -2px rgba(0,0,0,.15)</div>
  </div>
  <div class="rounded-ccs border border-ccs-line bg-white p-6 shadow-ccs-sm dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-sm font-medium">Control y superficie plana</div>
    <div class="spec mt-3">shadow-ccs-sm<br/>0 1px 4px rgba(11,27,61,.06)</div>
  </div>
</div>
```