/* =====================================================================
   Trokar: la configuración del diseño, en un solo lugar.
   Todas las páginas usan estas medidas a través del marco único (Sitio/Marco.cs y el final de trokar.css). Para cambiar un ancho, el
   menú, la letra o los radios en todo el sitio, se cambia aquí. Los colores están en temas.css. La app usa las mismas medidas en
   app/src/tema.ts (medidas).
   ===================================================================== */
:root{
  /* Anchos del marco */
  --ancho-centro:720px;          /* la columna central de lo social (Inicio, perfiles, juegos…) */
  --ancho-derecha:360px;         /* la columna derecha */
  /* El ancho total es uno solo en todo el sitio (centro + separación + derecha): las páginas amplias usan exactamente los mismos
     bordes que las sociales, así nada se mueve al pasar de una a otra. No se cambia aparte: sale de las otras tres medidas. */
  --ancho-amplio:calc(var(--ancho-centro) + var(--separacion-columnas) + var(--ancho-derecha));
  --ancho-amplio-tablas:1480px;  /* las tablas grandes de la administración */
  --separacion-columnas:40px;
  --margen-pagina:16px;          /* el margen a los lados del contenido */
  --ancho-menu-admin:240px;      /* el menú propio de la administración, dentro de la página */
  --ancho-buscador:460px;        /* el buscador de la barra de arriba */

  /* El menú de íconos de la izquierda y la barra de arriba */
  --riel-cerrado:76px;
  --riel-abierto:250px;
  --alto-barra:54px;

  /* Letra */
  --letra-chica:13px;
  --letra:15px;
  --letra-texto:17px;           /* el texto de las publicaciones del muro */
  --letra-titulo:21px;          /* los títulos de página (h1) */

  /* Radios, sombras y espacios */
  --radio-tarjeta:10px;         /* las tarjetas y paneles */
  --radio-boton:7px;            /* los botones */
  --radio-chico:8px;
  --radio:12px;
  --radio-grande:16px;
  --sombra:0 2px 10px rgba(0,0,0,.08);
  --sombra-alta:0 10px 30px rgba(0,0,0,.14);
  --espacio-1:4px;
  --espacio-2:8px;
  --espacio-3:12px;
  --espacio-4:16px;
  --espacio-5:24px;
}