.cc { position: relative; z-index: 2; margin: 28px 0 36px; }
.cc-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cc-restaurar { font-size: 11px; }
.cc-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cc-panel {
  display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 12px;
  background: linear-gradient(180deg, rgb(var(--surface-rgb) / 0.92), rgb(var(--bg2-rgb) / 0.92));
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 1px 0 rgb(var(--cyan-rgb) / 0.08);
}
.cc-panel[hidden] { display: none; }
.cc-panel__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cc-panel__titulo { margin: 0; font-family: var(--f-mono); font-size: 13px; font-weight: 400; letter-spacing: 0.14em; color: var(--neon-cyan); }
.cc-panel__acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cc-panel__enlace { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); text-decoration: none; white-space: nowrap; }
.cc-panel__enlace:hover { color: var(--neon-cyan); }
.cc-panel__vaciar { padding: 2px 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); background: none; border: 1px solid var(--border-strong); border-radius: 2px; cursor: pointer; }
.cc-panel__vaciar:hover, .cc-panel__vaciar:focus-visible { color: var(--neon-pink); border-color: var(--neon-pink); outline: none; }
.cc-panel__ocultar {
  padding: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
}
.cc-panel__ocultar:hover, .cc-panel__ocultar:focus-visible { color: var(--neon-pink); border-color: var(--neon-pink); outline: none; }
.cc-panel__cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1; }

@media (hover: hover) and (pointer: fine) {
  .cc-panel { cursor: grab; }
  .cc-panel a, .cc-panel button, .cc-panel input, .cc-panel select, .cc-panel textarea { cursor: pointer; }
}
.cc-panel--arrastrando {
  position: fixed !important; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing;
  transform: rotate(1deg) scale(1.02); opacity: 0.92;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 26px rgb(var(--cyan-rgb) / 0.35) !important;
  transition: none !important;
}
.cc-panel--hueco {
  background: rgb(var(--cyan-rgb) / 0.04) !important; border: 1px dashed var(--neon-cyan) !important; box-shadow: none !important;
}
body.arrastrando-panel { user-select: none; cursor: grabbing; }

.cc-tiempo { display: flex; align-items: center; gap: 12px; }
.cc-tiempo__icono { display: inline-flex; flex: none; width: 40px; height: 40px; color: var(--neon-cyan); }
.cc-tiempo__icono svg { width: 100%; height: 100%; }
.cc-tiempo__datos { min-width: 0; }
.cc-tiempo__ciudad { margin: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tiempo__temp { margin: 2px 0; font: 700 26px var(--f-title); color: var(--neon-cyan); line-height: 1; }
.cc-tiempo__desc { margin: 0; font-size: 13px; }

.cc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cc-fila {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 15px;
}
.cc-fila:last-child { border-bottom: 0; }
.cc-fila__cuando { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cc-fila__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cc-fila__valor { font-family: var(--f-mono); font-size: 13px; color: var(--text); white-space: nowrap; }
.cc-fila--pronto .cc-fila__cuando { color: var(--neon-yellow); }
.cc-tenue { color: var(--muted); }

.cc-sublista__titulo {
  margin: 10px 0 2px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.1em; color: var(--neon-orange);
}

.cc-lista--avisos { gap: 8px; }
.cc-aviso { display: grid; gap: 2px; padding: 7px 10px; border-left: 3px solid var(--neon-orange); background: rgb(var(--orange-rgb) / 0.06); font-size: 14px; color: var(--muted); }
.cc-aviso strong { font-family: var(--f-mono); font-size: 12.5px; font-weight: 400; letter-spacing: 0.06em; color: var(--neon-orange); }
.cc-aviso--urgente { border-left-color: var(--neon-pink); background: rgb(var(--pink-rgb) / 0.08); }
.cc-aviso--urgente strong { color: var(--neon-pink); }
.cc-aviso--critico { border: 1px solid var(--neon-pink); border-left-width: 3px; box-shadow: 0 0 16px rgb(var(--pink-rgb) / 0.35); }
.cc-aviso--info { border-left-color: var(--neon-yellow); background: rgb(var(--yellow-rgb) / 0.05); }
.cc-aviso--info strong { color: var(--neon-yellow); }

.cc-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.cc-estado--up .cc-punto { background: var(--neon-lime); box-shadow: 0 0 8px var(--neon-lime); }
.cc-estado--down .cc-punto { background: var(--neon-pink); box-shadow: 0 0 8px var(--neon-pink); }
.cc-estado--down .cc-fila__cuando { color: var(--neon-pink); }

.cc-vacio { margin: 0; color: var(--muted); font-size: 14.5px; }
.cc-pie { margin: auto 0 0; padding-top: 6px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted); }
.cc-pie--mal { color: var(--neon-pink); }
.cc-boton {
  align-self: flex-start; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--neon-cyan); padding: 7px 12px; border: 1px solid var(--neon-cyan); border-radius: 2px; background: rgb(var(--cyan-rgb) / 0.06);
}
.cc-boton:hover { box-shadow: 0 0 12px rgb(var(--cyan-rgb) / 0.35); }

@media (max-width: 560px) {
  .cc-fila { grid-template-columns: 78px 1fr auto; gap: 8px; font-size: 14px; }
}

.resumen-dia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; position: relative; }
.resumen-dia[hidden] { display: none; }
.resumen-dia__item {
  position: relative; padding: 12px 14px; border: 1px solid var(--border);
  background: rgb(var(--bg-rgb) / 0.6); border-radius: var(--radius); overflow: hidden; min-width: 0;
}
.resumen-dia__item::before {
  content: ""; position: absolute; top: 0; left: 0; width: 18px; height: 1px;
  background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan);
}
.resumen-dia__label {
  font-family: var(--f-mono); font-size: 10.5px; color: var(--neon-cyan); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 5px; opacity: 0.8;
}
.resumen-dia__valor { font-size: 14.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumen-dia__valor.is-ok { color: var(--neon-lime); }
.resumen-dia__valor.is-mal { color: var(--neon-pink); }
.resumen-dia__sub { margin-top: 2px; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .resumen-dia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}