/* SPDX-License-Identifier: AGPL-3.0-only
 * S4 Sales · marco al estilo de S4 Projects (Javi, 2026-10-30: «los menús de todas las apps deben seguir la misma línea»).
 * Marco gris con 8 px de margen, lateral blanco redondeado y panel de contenido blanco redondeado.
 * Las clases de Twenty son hashes que cambian entre versiones: aquí se usa la ESTRUCTURA (#root > aplicación > fila >
 * [lateral, contenido]). Tras cada actualización de Twenty hay que mirar la aplicación y, si algo se ve roto, ajustar
 * solo este fichero. La barra común <s4-barra> y S4 UI no se tocan (aprobado en firme).
 */
html.light { --s4-marco: #e7ebed; }
html.dark { --s4-marco: var(--bg-canvas, #00102a); }

html, body { background: var(--s4-marco); }

/* La aplicación llena el hueco bajo la barra (Twenty fija su contenedor a 100 vh y se salía 48 px por abajo). */
#root > div {
  height: 100%;
  background: transparent !important;
  padding: 0 8px 8px;
  box-sizing: border-box;
}

/* Fila principal: lateral + contenido. */
#root > div > div { gap: 8px; background: transparent !important; }

/* Lateral blanco redondeado. */
#root > div > div > div:first-child {
  background: var(--bg-surface-1, #fff);
  border: 1px solid var(--border-subtle, #dfe5e6);
  border-radius: 8px;
  overflow: hidden;
}

/* Panel de contenido blanco redondeado. */
#root > div > div > div:nth-child(2) {
  background: var(--bg-surface-1, #fff);
  border: 1px solid var(--border-subtle, #dfe5e6);
  border-radius: 8px;
  overflow: hidden;
}