/* RESET */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Nunito', Helvetica, Arial, sans-serif;
}

body {
  font-family: 'Nunito', Helvetica, Arial, sans-serif;
  font-size: larger;
  background: #ffffff;
}

/* ===== SIMBOLOGÍA ===== */

.simbologia {
  display: flex;
  justify-content: space-evenly;
  margin-top: 15px;
  border-bottom: 1px solid #ff0000;
  background: #ffff;
  color: #000000;
  font-weight: 700;
}

.circle {
  border: 1px solid #000000;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.circleComb {
  border: 3px solid #000000 !important;
  background: #ff0000;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.estOperativa {
  background: #ffffff;
}

.circleCerrados {
  background: linear-gradient(to bottom right, #ff0000 50%, #ffffff 50%);
}

.circleTemp {
  background: #ff0000;
}

.simbologia>div {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== LAYOUT PRINCIPAL ===== */
main {
  display: flex;
  gap: 8px;
  padding: 10px 10px;
  justify-content: center;
  font-size: 12px;
  background: #ffffff;
  /* min-height: 100vh; */
}

/* ===== VARIABLES PARA COLORES ===== */
:root {
  --color-l1: #ec1d25;
  --color-l2: #f7941d;
  --color-l3: #994807;
  --color-l4: #2e3192;
  --color-l4a: #05adf4;
  --color-l5: #0b9444;
  --color-l6: #a35db5;
}

/* ===== ESTILOS PARA LÍNEAS ===== */
[class^="circlel"] {
  border: 1px solid;
}

.circlel1 {
  border-color: var(--color-l1);
}

.estacionl1 {
  background: #ec1d25;
  height: 45px;
  color: #ffffff;
  font-size: large;
  border-radius: 5px;
}

.estacionl2 {
  background: #f7941d;
  height: 45px;
  color: #ffffff;
  font-size: large;
  border-radius: 5px;
}

.estacionl3 {
  background: #994807;
  height: 45px;
  color: #ffffff;
  font-size: medium;
  border-radius: 5px;
}

.estacionl4 {
  background: #2e3192;
  height: 45px;
  color: #ffffff;
  font-size: medium;
  border-radius: 5px;
}

.estacionl4a {
  background: #05adf4;
  height: 45px;
  color: #ffffff;
  font-size: medium;
  border-radius: 5px;
}

.estacionl5 {
  background: #0b9444;
  height: 45px;
  color: #ffffff;
  font-size: medium;
  border-radius: 5px;
}

.estacionl6 {
  background: #a35db5;
  height: 45px;
  color: #ffffff;
  font-size: medium;
  border-radius: 5px;
}

.circlel2 {
  border-color: var(--color-l2);
}

.circlel3 {
  border-color: var(--color-l3);
}

.circlel4 {
  border-color: var(--color-l4);
}

.circlel4a {
  border-color: var(--color-l4a);
}

.circlel5 {
  border-color: var(--color-l5);
}

.circlel6 {
  border-color: var(--color-l6);
}

/* ===== ESTILOS GENERALES DE LÍNEAS ===== */
[class^="linea"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}

[class^="estacionl"] {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin-left: 5px;
}

/* ===== ESTILOS PARA TÍTULOS DE LÍNEAS ===== */
h3 {
  border-radius: 5px;
  width: 100%;
  height: 25px;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding-left: 10px;
  margin-left: 5px;
  font-size: medium;
}

.titlel1 {
  background: var(--color-l1);
}

.titlel2 {
  background: var(--color-l2);
}

.titlel3 {
  background: var(--color-l3);
}

.titlel4 {
  background: var(--color-l4);
}

.titlel4a {
  background: var(--color-l4a);
}

.titlel5 {
  background: var(--color-l5);
}

.titlel6 {
  background: var(--color-l6);
  width: 100%;
}