/* JDServer-Webs v6.3 — modules/compare-compact/compare-compact.css
   - Tabla compacta estilo Live para comparativa entre estaciones
   - Fila completa tintada por slug
   - Botón a duels.jdserver.es
*/

#compare-compact{
  margin:18px 0 28px;
}

.cc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.cc-head h3{
  margin:0;
  font-weight:700;
}

.cc-duel-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--card) 86%, var(--brand, #3b82f6) 14%);
  color:var(--text);
  text-decoration:none;
  font:800 13px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  box-shadow:var(--shadow-1);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cc-duel-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-1);
  border-color:color-mix(in oklab, var(--brand, #3b82f6) 45%, var(--border));
}

.cc-duel-ico{
  position:relative;
  width:16px;
  height:16px;
  flex:0 0 auto;
}

.cc-duel-ico::before{
  content:"";
  position:absolute;
  left:3px;
  top:1px;
  width:10px;
  height:8px;
  border:2px solid #fbbf24;
  border-bottom-width:3px;
  border-radius:0 0 4px 4px;
  border-top-left-radius:2px;
  border-top-right-radius:2px;
}

.cc-duel-ico::after{
  content:"";
  position:absolute;
  left:6px;
  bottom:1px;
  width:4px;
  height:6px;
  background:#f59e0b;
  border-radius:1px;
  box-shadow:-3px 4px 0 0 #fbbf24, 3px 4px 0 0 #fbbf24;
}

.cc-wrap{
  width:100%;
}

.cc-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.cc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  font:0.92rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.cc-table thead{
  background:var(--surface, color-mix(in oklab, var(--card) 92%, var(--text) 3%));
  color:var(--muted);
}

.cc-table thead th{
  text-align:center;
  padding:9px 10px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  font-weight:700;
}

.cc-table thead th:first-child{
  text-align:left;
}

.cc-table tbody td{
  padding:8px 10px;
  border-bottom:1px solid color-mix(in oklab, var(--border) 82%, transparent);
  vertical-align:middle;
  white-space:nowrap;
  text-align:center;
}

.cc-table tbody tr:last-child td{
  border-bottom:none;
}

/* fila completa tintada */
.cc-row{
  --cc-row-color:#64748b;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--cc-row-color) 18%, transparent) 0 6px,
      transparent 6px 100%
    ),
    color-mix(in oklab, var(--card) 88%, var(--cc-row-color) 12%);
}

.cc-row:nth-child(even){
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--cc-row-color) 18%, transparent) 0 6px,
      transparent 6px 100%
    ),
    color-mix(in oklab, var(--card) 84%, var(--cc-row-color) 16%);
}

.cc-row:hover{
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--cc-row-color) 28%, transparent) 0 6px,
      transparent 6px 100%
    ),
    color-mix(in oklab, var(--card) 78%, var(--cc-row-color) 22%);
}

/* oscuro */
@media (prefers-color-scheme: dark){
  .cc-row{
    background:
      linear-gradient(90deg,
        color-mix(in oklab, var(--cc-row-color) 30%, transparent) 0 6px,
        transparent 6px 100%
      ),
      color-mix(in oklab, var(--card) 92%, var(--cc-row-color) 8%);
  }

  .cc-row:nth-child(even){
    background:
      linear-gradient(90deg,
        color-mix(in oklab, var(--cc-row-color) 30%, transparent) 0 6px,
        transparent 6px 100%
      ),
      color-mix(in oklab, var(--card) 88%, var(--cc-row-color) 12%);
  }

  .cc-row:hover{
    background:
      linear-gradient(90deg,
        color-mix(in oklab, var(--cc-row-color) 42%, transparent) 0 6px,
        transparent 6px 100%
      ),
      color-mix(in oklab, var(--card) 82%, var(--cc-row-color) 18%);
  }
}

.cc-station{
  text-align:left !important;
  min-width:220px;
}

.cc-st-name{
  display:inline-block;
  font:800 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
}

.cc-num{
  text-align:center;
}

.cc-updated{
  white-space:nowrap;
}

.cc-unit{
  color:var(--muted);
  font-weight:600;
}

@media (max-width: 720px){
  .cc-table{
    min-width:920px;
  }

  .cc-duel-btn{
    width:100%;
    justify-content:center;
  }

  .cc-table thead th{
    padding:8px 9px;
  }

  .cc-table tbody td{
    padding:7px 9px;
  }

  .cc-st-name{
    font-size:12.5px;
  }
}