/* /var/www/html/jdserver/2026/modules/webcams_gallery/webcams_gallery.css
 * JDServer-Webs — modules/webcams_gallery/webcams_gallery.css (v1.1)
 * + Marcos por comarca/provincia (wg-group)
 */
#webcams-gallery{ margin: 14px 0 28px; }

.wg-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: .95rem;
}

/* Región */
.wg-region{ margin-top: 18px; }
.wg-region-title{ margin: 0; font-weight: 800; }
.wg-region-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: .95rem;
}

/* ✅ Contenedor de grupos */
.wg-groups{
  display:flex;
  flex-direction:column;
  gap: 14px;
  margin-top: 14px;
}

/* ✅ Marco por grupo (comarca/provincia) */
.wg-group{
  background: color-mix(in srgb, var(--card) 85%, var(--bg));
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-1);
  padding: 12px;
}

.wg-group-title{
  font-weight: 800;
  margin-bottom: 10px;
  padding-left: 2px;
}

/* Grid (dentro de cada grupo) */
.wg-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px){
  .wg-grid{ grid-template-columns: 1fr; }
}

/* Card */
.wg-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.wg-head{
  padding: 12px 12px 10px;
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.wg-title{ font-weight: 700; }
.wg-subtitle{ color: var(--muted); font-size: .92rem; }

.wg-fig{
  margin:0;
  padding:0;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.wg-fig img{
  display:block;
  width:100%;
  height:auto;
  object-fit: contain;
}

/* Foot */
.wg-foot{
  padding: 10px 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.wg-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand, #3b82f6) 14%, var(--bg));
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .06em;
}

.wg-hint{
  color: var(--muted);
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty */
.wg-empty{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--card) 65%, var(--bg));
}

.wg-empty-title{ font-weight: 700; margin-bottom: 4px; }
.wg-empty-body{ color: var(--muted); margin-bottom: 10px; }

.wg-retry{
  appearance:none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  cursor:pointer;
  box-shadow: var(--shadow-1);
}
.wg-retry:hover{
  background: color-mix(in srgb, var(--card) 85%, var(--bg));
}
.wg-retry:active{
  transform: translateY(1px);
}

/* Mobile edge-to-edge */
@media (max-width: 520px){
  .wg-groups{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 10px;
  }
  .wg-group{ padding: 10px; }
}