.sk-table {
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.sk-table thead th {
  text-align: center;
  padding: 6px 4px;
  font-weight: 600;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}


.sk-table .day-name {
  font-size: 12px;
  text-transform: capitalize;
  opacity: 0.9;

}
.img-weather {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.row-icons td,
.row-icons-detail td,
.wind td {
    padding: 2px;
}
.row-icons-detail td {
    font-size: 12px;
    line-height: 1.1;
}
 
 
.day{
     width: 39px;
}
.sk-table td,
.sk-table th {
    vertical-align: middle;
    text-align: center;
}
 .cell-past {
  display: none;
}
.sk-table .day-num {
  font-size: 18px;
  font-weight: bold;
}

.sk-table .period {
  font-size: 10px;

  text-transform: uppercase;
}

.col-altura {
  width: 80px;
  border-right: 1px solid #d6dde6;
  text-align: center;
}
.cell-border-right {
    border-right: 1px solid #b0b0b0!important;
}
.cell-border-top{
    border-top: 1px solid #b0b0b0!important;
}
.cell-border-bottom{
    border-bottom: 1px solid #b0b0b0!important;
}
.row-title {
  font-size: 10px;
  border-right: 1px solid #b0b0b0!important;
  padding: 4px;
    text-align: center;
}

.cell {
  padding: 4px 2px;
  text-align: center;
  width: 39px;
}
 
.img-weather{
    display: block;
    width: 38px;
    height: 38px;
}
.cell.icon img {
  display: block;
  width: 38px;
  height: 38px;
  padding: 0!important;
}

 

/* ===== TEMPERATURA ===== */
.row-temp-max .cell {
  font-weight: bold;
}

.temp-very-cold {
  background: #003366;
  color: #fff;
}

.temp-cold {
  background: #3399ff;
  color: #fff;
}

.temp-mild {
  background: #66cc66;
}

.temp-warm {
  background: #ff9933;
  color: #fff;
}

 .wind {
    position: relative;
}

.wind-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    
    background: #222;
    color: #fff;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 4px;

    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}
 
 
 .wind td {
    vertical-align: middle;
    text-align: center;
}

 
.wind:hover .wind-tooltip {
    opacity: 1;
}

.wind-low {
  background: #d4f4dd;
}

.wind-medium {
  background: #ffeeba;
}

.wind-high {
  background: #f5c6cb;
}

.wind-icon__svg.wind-white text {
  fill: #ffffff;
}

.wind-icon__svg.wind-green text {
  fill: #00c853;
}

.wind-icon__svg.wind-yellow text {
  fill: #ffeb3b;
}

.wind-icon__svg.wind-red text {
  fill: #ff3b30;
}

/* flecha siempre negra */
.wind-icon__svg polygon,
.wind-icon__svg rect {
  fill: #000;
}
.wind-wrap {
  position: relative;
  display: block;
}

/* tooltip oculto */
.wind-tooltip {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);

  background: #000;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;

  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
 
.wind-icon__svg text {
    font-size: 13px;
    fill: #fff;
}

.wind-icon__svg circle {
    fill: #000;
}
.wind-wrap {
    width: 44px;
    height: 44px;
}

.wind-icon__svg {
    width: 40px;
    height: 40px;
     display: block;
}

 

.cm_snow {
  font-size: 13px;
  font-weight: 600;
}
.snow-amount {
  position: relative;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #c00;
  background: #f2f2f2;
}
.rain-amount {
  position: relative;
  text-align: center;
}

.rain-amount .fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e5f0ff;
  z-index: 0;
}
.icon-map {
  height: 101px;
}
.level-value {
  color: #4463ee;
}
/* TEMP */
.t1 {
  background: #002b5c;
  color: #fff;
}
.t2 {
  background: #004080;
  color: #fff;
}
.t3 {
  background: #3399ff;
  color: #fff;
}
.t4 {
  background: #00cc66;
}
.t5 {
  background: #66ff66;
}
.t6 {
  background: #ffff66;
}
.t7 {
  background: #ffcc33;
}

/* CHILL */
.c1 {
  background: #001a33;
  color: #fff;
}
.c2 {
  background: #003366;
  color: #fff;
}
.c3 {
  background: #3399ff;
  color: #fff;
}
.c4 {
  background: #00cc66;
}
.c5 {
  background: #ffff66;
}

/* HUMEDAD */
.h1 {
  background: #f0f0f0;
}
.h2 {
  background: #d9d9d9;
}
.h3 {
  background: #bfbfbf;
}
.h4 {
  background: #99ccff;
}

.map_img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left;
  object-position: left;
}
.rain-amount .value {
  position: relative;
  z-index: 1;
  color: #0d5bcf;
  font-weight: 600;
}

.wind-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);

  border: 4px solid transparent;
  border-top-color: #000;
}


.wind-wrap:hover .wind-tooltip {
  opacity: 1;
}

.temp-value--1 {
    background-color: #520052
}

.temp-value--1 rect {
    fill: #520052
}

.temp-value--1 {
    color: #fff
}

.temp-value--1 text {
    fill: #fff
}

.temp-value--2 {
    background-color: #7a007a
}

.temp-value--2 rect {
    fill: #7a007a
}

.temp-value--2 {
    color: #fff
}

.temp-value--2 text {
    fill: #fff
}

.temp-value--3 {
    background-color: purple
}

.temp-value--3 rect {
    fill: purple
}

.temp-value--3 {
    color: #fff
}

.temp-value--3 text {
    fill: #fff
}

.temp-value--4 {
    background-color: #b800b8
}

.temp-value--4 rect {
    fill: #b800b8
}

.temp-value--4 {
    color: #fff
}

.temp-value--4 text {
    fill: #fff
}

.temp-value--5 {
    background-color: #f0f
}

.temp-value--5 rect {
    fill: #f0f
}

.temp-value--5 {
    color: #fff
}

.temp-value--5 text {
    fill: #fff
}

.temp-value--6 {
    background-color: #8000ff
}

.temp-value--6 rect {
    fill: #8000ff
}

.temp-value--6 {
    color: #fff
}

.temp-value--6 text {
    fill: #fff
}

.temp-value--7 {
    background-color: #00f
}

.temp-value--7 rect {
    fill: #00f
}

.temp-value--7 {
    color: #fff
}

.temp-value--7 text {
    fill: #fff
}

.temp-value--8 {
    background-color: #007fff
}

.temp-value--8 rect {
    fill: #007fff
}

.temp-value--8 {
    color: #fff
}

.temp-value--8 text {
    fill: #fff
}

.temp-value--9 {
    background-color: #0ff
}

.temp-value--9 rect {
    fill: #0ff
}

.temp-value--10 {
    background-color: #00ff7f
}

.temp-value--10 rect {
    fill: #00ff7f
}

.temp-value--11 {
    background-color: #7fff00
}

.temp-value--11 rect {
    fill: #7fff00
}

.temp-value--12 {
    background-color: #ff0
}

.temp-value--12 rect {
    fill: #ff0
}

.temp-value--13 {
    background-color: #ffbe00
}

.temp-value--13 rect {
    fill: #ffbe00
}

.temp-value--14 {
    background-color: #ff7f00
}

.temp-value--14 rect {
    fill: #ff7f00
}

.temp-value--15 {
    background-color: #e07000
}

.temp-value--15 rect {
    fill: #e07000
}

.temp-value--15 {
    color: #fff
}

.temp-value--15 text {
    fill: #fff
}

.temp-value--16 {
    background-color: #f50000
}

.temp-value--16 rect {
    fill: #f50000
}

.temp-value--16 {
    color: #fff
}

.temp-value--16 text {
    fill: #fff
}

.temp-value--17 {
    background-color: #c00
}

.temp-value--17 rect {
    fill: #c00
}

.temp-value--17 {
    color: #fff
}

.temp-value--17 text {
    fill: #fff
}

.temp-value--18 {
    background-color: #8f0000
}

.temp-value--18 rect {
    fill: #8f0000
}

.temp-value--18 {
    color: #fff
}

.temp-value--18 text {
    fill: #fff
}
.levels {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
        align-items: center;
}

.level-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 55px;
    padding: .3125rem .375rem;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: #222;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #bbb;
    border-radius: 3rem;
}


.level-item:hover {
    background: #e2e8f0;
    color: #000;
}


.level-item.active {
    background: #1e293b;
    color: #fff;
    font-weight: 600;
}


.level-item.active::after {
    content: '';
    display: block;
    height: 2px;
    background: #38bdf8;
    margin-top: 4px;
}