/**
 * MexiCenter Garitas – CSS del Widget en Vivo
 * Armonizado con el CSS global de mexicenter (paleta mc-* y vc-*)
 * Pegar en: Apariencia > Personalizar > CSS Adicional (debajo del global)
 */

.mcg-widget {
  --mcg-verde:    #1A6644;
  --mcg-amarillo: #B8860B;
  --mcg-naranja:  #C2410C;
  --mcg-rojo:     #8B1A2E;
  --mcg-gris:     #6B6B6B;
  --mcg-borde:    #E8E0DC;
  --mcg-fondo:    #FAF8F5;
  --mcg-texto:    #1A1A1A;
  --mcg-mid:      #3D3D3D;
  --mcg-accent:   #8B1A2E;
  font-family: inherit;
  color: var(--mcg-texto);
  max-width: 980px;
  margin: 1.5rem auto;
}

/* ── Header del widget ──────────────────────────────────────────── */
.mcg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  background: var(--mcg-fondo);
  border: 1px solid var(--mcg-borde);
  border-radius: 10px 10px 0 0;
  font-size: 14px;
  color: var(--mcg-gris);
}
.mcg-header a { color: var(--mcg-accent); text-decoration: none; font-weight: 600; }
.mcg-header a:hover { text-decoration: underline; }
.mcg-actualizado strong { color: var(--mcg-texto); }

/* ── Grid de puertos ────────────────────────────────────────────── */
.mcg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
  padding: 18px 0;
}

/* ── Card de puerto ─────────────────────────────────────────────── */
.mcg-puerto {
  background: #fff;
  border: 1px solid var(--mcg-borde);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(139,26,46,.06);
  transition: box-shadow .2s, transform .2s;
}
.mcg-puerto:hover { box-shadow: 0 6px 18px rgba(139,26,46,.12); transform: translateY(-2px); }

.mcg-puerto.mcg-verde    { border-top: 4px solid var(--mcg-verde); }
.mcg-puerto.mcg-amarillo { border-top: 4px solid var(--mcg-amarillo); }
.mcg-puerto.mcg-naranja  { border-top: 4px solid var(--mcg-naranja); }
.mcg-puerto.mcg-rojo     { border-top: 4px solid var(--mcg-rojo); }
.mcg-puerto.mcg-nd       { border-top: 4px solid var(--mcg-gris); }

/* ── Header del card ────────────────────────────────────────────── */
.mcg-puerto-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--mcg-borde);
}
.mcg-puerto-header h3 {
  margin: 0;
  font-size: 18px !important;
  font-weight: 700;
  color: var(--mcg-accent);
  line-height: 1.3;
  border: none;
  padding: 0;
}

/* ── Badge tiempo total ─────────────────────────────────────────── */
.mcg-badge {
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.mcg-badge.mcg-verde    { background: #EDF5F0; color: var(--mcg-verde); }
.mcg-badge.mcg-amarillo { background: #FFF8E6; color: var(--mcg-amarillo); }
.mcg-badge.mcg-naranja  { background: #FFEDD5; color: var(--mcg-naranja); }
.mcg-badge.mcg-rojo     { background: #FDF0F2; color: var(--mcg-rojo); }
.mcg-badge.mcg-nd       { background: var(--mcg-fondo); color: var(--mcg-gris); }

/* ── Tabla de carriles ──────────────────────────────────────────── */
.mcg-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.mcg-tabla th,
.mcg-tabla td {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid var(--mcg-borde);
  font-size: 15px !important;
}
.mcg-tabla th {
  background: var(--mcg-fondo);
  font-weight: 700;
  color: var(--mcg-gris);
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mcg-tabla td:first-child { text-align: left; font-weight: 600; color: var(--mcg-texto); }
.mcg-tabla tr:last-child td { border-bottom: none; }
.mcg-tabla tr:hover { background: var(--mcg-fondo); }

/* ── Etiquetas de tiempo ────────────────────────────────────────── */
.mcg-min { font-weight: 700; font-size: 15px; }
.mcg-min.mcg-verde    { color: var(--mcg-verde); }
.mcg-min.mcg-amarillo { color: var(--mcg-amarillo); }
.mcg-min.mcg-naranja  { color: var(--mcg-naranja); }
.mcg-min.mcg-rojo     { color: var(--mcg-rojo); }

.mcg-na      { color: var(--mcg-gris); font-size: 14px; }
.mcg-cerrado { color: var(--mcg-rojo); font-size: 14px; font-weight: 600; }
.mcg-nd      { color: var(--mcg-gris); }
.mcg-tabla small { display: block; color: var(--mcg-gris); font-size: 13px; font-weight: 400; }

/* ── Loading ────────────────────────────────────────────────────── */
.mcg-loading { text-align: center; padding: 48px 20px; color: var(--mcg-gris); font-size: 16px; }
.mcg-spinner {
  width: 38px; height: 38px;
  border: 3px solid var(--mcg-borde);
  border-top-color: var(--mcg-accent);
  border-radius: 50%;
  animation: mcg-spin .8s linear infinite;
  margin: 0 auto 14px;
}
@keyframes mcg-spin { to { transform: rotate(360deg); } }

/* ── Error ──────────────────────────────────────────────────────── */
.mcg-error-box {
  background: #FFF8E6;
  border: 1px solid #DDD0A8;
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 16px;
  color: #7A4F00;
}
.mcg-err-msg { color: var(--mcg-gris); font-size: 15px; text-align: center; padding: 22px; }
.mcg-retry {
  background: var(--mcg-accent);
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  margin-left: 8px;
}
.mcg-retry:hover { background: #6e1424; }

/* ── Error card ─────────────────────────────────────────────────── */
.mcg-puerto.mcg-error { background: var(--mcg-fondo); }
.mcg-puerto.mcg-error h3 {
  padding: 14px 16px 10px;
  margin: 0;
  font-size: 16px !important;
  color: var(--mcg-gris);
  border: none;
}

/* ── Leyenda semáforo ───────────────────────────────────────────── */
.mcg-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0 4px;
  font-size: 14px;
  color: var(--mcg-gris);
}
.mcg-leyenda-item { display: flex; align-items: center; gap: 7px; }
.mcg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.mcg-dot.verde    { background: #1A6644; }
.mcg-dot.amarillo { background: #B8860B; }
.mcg-dot.naranja  { background: #C2410C; }
.mcg-dot.rojo     { background: #8B1A2E; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mcg-grid { grid-template-columns: 1fr; }
  .mcg-header { flex-direction: column; align-items: flex-start; }
  .mcg-tabla th, .mcg-tabla td { padding: 8px 9px; font-size: 14px !important; }
}