/* Fondo gris para el area de contenido y celdas blancas encima.
   Sin esto las tarjetas quedan blancas sobre blanco y no se distinguen:
   el gris de atras es lo que hace que cada celda se lea como una pieza aparte.
   Va al final de todos los estilos: solo cambia fondos, bordes y encabezados. */

.main{background:#ECECEA}

/* todo lo que es una celda va en blanco, para que resalte contra el gris */
.tile,.mach,.appbox,.form,.list,.grupo,.via,.formx .fld{background:var(--paper)}
.mach .l{background:var(--paper)}
.grupo,.list,.form,.tile,.appbox,.mach{border-color:var(--line2)}

/* encabezado de celda: fondo rojizo suave, del mismo tono de la marca */
.grupo .gh{background:#FBEFF1;border-bottom-color:#F0D3D6}
.grupo .gh b{color:var(--ink)}
.grupo .gh span{color:#8A555D}

/* el grupo de los avisos se marca con una franja roja al costado,
   no con otro color: es el mismo lenguaje, un poco mas fuerte */
.grupo.clave{border-color:#E9C4C8;box-shadow:inset 3px 0 0 var(--red)}
.grupo.clave .gh{background:#F7E3E5;border-bottom-color:#E9C4C8}
.grupo.clave .gh span{color:#8E1319}

/* los encabezados de las listas siguen la misma idea */
.list .h{background:#FBEFF1;color:#8A5A61;border-bottom-color:#F0D3D6}
.list .h .c{color:#8A5A61}

/* el fondo del dibujo de las tarjetas de asistencia, un punto mas gris */
.via .dib{background:linear-gradient(170deg,#FAFBFD 0%,#F1F3F7 100%)}

/* --- Iconos del menu lateral ---
   Los titulos de grupo llevan icono y las opciones no. Asi se distingue de un
   vistazo el encabezado de una opcion seleccionada, que antes tomaban un fondo
   parecido y se confundian entre si. */
.side a.top{display:flex;align-items:center;gap:9px}
.side .gh > svg,.side a.top > svg{flex:none;width:17px;height:17px;color:var(--red)}
.side .gh > span:not(.ch),.side a.top > span{flex:1}
.side .gh .ch{flex:none;margin-left:0}
/* las opciones se corren para alinearse con el texto del grupo, no con el icono */
.side .sub a.it{padding-left:45px}

/* --- Titulos de columna dentro de una lista ---
   Van debajo del encabezado rojizo y con la misma grilla que las filas,
   para que se lea que "WXB0734006" es una serie y que "Operativa" es un estado. */
.list .cols{display:flex;gap:12px;align-items:center;padding:7px 16px;
  border-bottom:1px solid var(--line);background:var(--paper);
  font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#6C6C73}
.list .cols .id{min-width:92px}
.list .cols .st{margin-left:auto;border:0;padding:0;white-space:nowrap}