/*
 * WebLayout — el único control base.
 *
 * Aquí NO se decide nada que sea de una instancia. El fondo, el aire, el borde del marco y
 * las separaciones llegan por variables que escribe el control; los bordes de las celdas y
 * los colores de sus estados van en estilo en línea de cada celda, porque son suyos y de
 * nadie más.
 *
 * Y NO hay valores de reserva en los `var()`: el control escribe siempre todas sus
 * variables, así que una reserva aquí sería un valor por defecto escrito dos veces.
 */

.web-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}

/* Oculto: el que desaparece es EL PANEL, no la raíz. La raíz es el sitio donde el control
   está colgado y se queda quieta; lo que se ve o no se ve es el marco con su rejilla
   dentro.
   Y ocultar no destruye nada: la rejilla conserva sus celdas, sus estados y su contenido,
   así que volver a enseñarla es inmediato. */
.web-layout[data-visible="false"] .web-layout__panel {
  display: none;
}

/* «contenido»: mide lo que midan sus filas en vez de llenar el hueco. Hace falta para una
   lista que crece o para un bloque que no debe estirarse. */
.web-layout[data-height="content"] {
  height: auto;
  grid-template-rows: auto;
}

/* El marco. Es lo que antes hacía por su cuenta el WebControl. */
.web-layout__panel {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: var(--web-layout-panel-bg);
  padding: var(--web-layout-panel-padding);
  /* En tres líneas y no en el atajo `border`, porque el grosor lleva un valor por lado:
     el atajo solo admite uno y se comería «sin borde arriba». */
  border-style: solid;
  border-width: var(--web-layout-panel-border-width);
  border-color: var(--web-layout-panel-border-color);
  border-radius: var(--web-layout-panel-border-radius);
  overflow: hidden;
  box-sizing: border-box;
}

.web-layout[data-height="content"] .web-layout__panel {
  height: auto;
}

/* La rejilla. */
.web-layout__grid {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  row-gap: var(--web-layout-grid-row-gap);
  column-gap: var(--web-layout-grid-column-gap);
  box-sizing: border-box;
}

.web-layout[data-height="content"] .web-layout__grid {
  height: auto;
}

/*
 * La celda.
 *
 * Sin fondo y sin bordes AQUÍ: los pone el control en cada celda, porque el fondo sale de
 * sus estados y los bordes de las reglas de rango. Una celda sin estados y sin reglas es un
 * hueco, y así es como se usa en un formulario.
 */
.web-layout__cell {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}