* {
  font-family: monospace;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  padding: 20px;
}

header h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.domain {
  min-width: 320px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 16px;
}

.domain-name {
  text-transform: uppercase;
  padding: 12px;
  margin: 0;
  font-size: 14px;
}

/* .render:hover {
	background-color: #101010;
	cursor: pointer;
  }

  .render:hover * {
	color: white;
  } */

.MORE {
  cursor: pointer;
  font-weight: bold;
  user-select: none;
}

.MORE-INFO {
  padding: 10px;
  list-style: none;
}

.status .show {
  color: #4caf50;
  font-weight: bold;
}

.status .render-error {
  color: #f44336;
}

.time-lapsed {
  color: #666;
}

.disabled {
  color: #999 important;
}

.day {
  margin-top: 32px;
  font-size: 8px;
}

.error {
  color: red;
}

.hide {
  display: none;
}
.show {
  display: block;
}

.info {
  display: flex;
  column-gap: 8px;
  align-items: center;
}

.toggle {
  padding-right: 8px;
  color: #999;
}

.data {
  display: flex;
  flex-direction: row;
}

/*----------------*/

.render {
  padding-inline: 20px;
  padding-block: 8px;
  /* transition: all 0.1s ease; */
  border-radius: 14px;
}

.render-opened {
  color: white;
  background-color: #101010;
  margin-bottom: 8px;
  padding-block: 16px;
}

.render-opened .time-lapsed {
  color: #f5f5f5;
}

.render-opened .more-info {
  color: #f5f5f5;
}

.render .status .render-pending {
  color: #55afaf;
  animation: parpadeo 1s infinite;
}

.render-opened .render-stat {
  color: red;
}
.render-opened .times {
  color: #f5f5f5;
}

.render-opened .disabled {
  color: #999;
}

@keyframes parpadeo {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* --- Estilos para el Layout Dinámico --- */
.log-chart-container {
    display: flex;
    gap: 25px;
    padding: 10px;
}

/* Layout por defecto (más de 2 dominios): apilado */
.log-chart-container.layout-domains-many {
    flex-direction: column;
}

/* Layout para 1 o 2 dominios: lado a lado */
.log-chart-container.layout-domains-1,
.log-chart-container.layout-domains-2 {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.data-wrapper { flex-grow: 1; flex-shrink: 1; } /* El contenedor de datos es flexible */
.chart-wrapper { flex-shrink: 0; } /* El contenedor de la gráfica no se encoge */

/* Anchos específicos según el número de dominios */
.layout-domains-1 .data-wrapper { flex-basis: 33.33%; }
.layout-domains-1 .chart-wrapper { flex-basis: 66.67%; position: sticky; top: 10px; }
.layout-domains-2 .data-wrapper,
.layout-domains-2 .chart-wrapper { flex-basis: 50%; }
.layout-domains-2 .chart-wrapper { position: sticky; top: 10px; }

/* --- Estilos del Contenedor de la Gráfica --- */
.chart-wrapper { border: 1px solid #ccc; padding: 20px; background-color: #fff; }
.chart-title { margin-top: 0; margin-bottom: 20px; font-family: sans-serif; font-size: 1.5em; text-align: center; }

/* --- Estilos para la Gráfica SVG y Leyenda (sin cambios) --- */
.timeseries-chart { font-family: sans-serif; display: block; width: 100%; }
.axis-label { font-size: 14px; text-anchor: middle; }
.tick-label { font-size: 12px; }
.y-axis .tick-label { text-anchor: end; }
.grid-line { stroke: #e0e0e0; }
.axis-line { stroke: #333; }
.bar-group:hover { filter: brightness(1.2); cursor: pointer; }
.bar-render { fill: #4CAF50; }
.bar-s3 { fill: #2196F3; }
.bar-build-end { fill: #FFC107; }
.chart-legend { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; display: flex; gap: 20px; font-family: sans-serif; justify-content: center; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; font-size: 14px; }
.legend-color-box { width: 18px; height: 18px; margin-right: 8px; }