/* ============================================================================
   RadioaficionadosClub.cl - Widget CSS
   Versión optimizada: iconos uniformes y CSS sin duplicación
   Archivo dedicado para widgets laterales.
   Mantener aquí el diseño de widgets para evitar mezclarlo con app.css.
============================================================================ */

/* ---------------------------------------------------------------------------
   Estructura general del sidebar y widgets
--------------------------------------------------------------------------- */
.sidebar,
.ag-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

.widget,
.ag-sidebar .widget,
.sidebar.ag-sidebar .widget {
  background: #fff;
  border: 1px solid #d7dde4;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
  padding: 18px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.widget h3,
.ag-sidebar .widget h3,
.sidebar.ag-sidebar .widget h3 {
  margin: 0 0 13px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget li {
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.widget li:last-child {
  border-bottom: 0;
}

.widget a {
  color: #0b57bf;
  text-decoration: none;
}

.widget a:hover {
  text-decoration: underline;
}

.widget small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  line-height: 1.35;
}

/* ---------------------------------------------------------------------------
   Widget: Herramientas
--------------------------------------------------------------------------- */
.tools-widget {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.tools-widget-list {
  display: grid;
  gap: 10px;
}

.tools-widget-item {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f2d50 !important;
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.tools-widget-item:hover,
.tools-widget-item:focus-visible {
  transform: translateY(-1px);
  border-color: #93c5fd;
  background: #eef6ff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
  outline: none;
}

.tools-widget-item:hover .tools-widget-icon,
.tools-widget-item:focus-visible .tools-widget-icon {
  transform: scale(1.06);
}

.tools-widget-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.tools-widget-icon svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: currentColor;
  flex-shrink: 0;
}

.tools-widget-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tools-widget-icon-calculator {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.tools-widget-icon-qsl {
  background: linear-gradient(135deg, #059669, #22c55e);
}

.tools-widget-icon-discord {
  background: linear-gradient(135deg, #5865F2, #404EED);
}

.tools-widget-name {
  display: block;
  min-width: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.25;
}

/* ---------------------------------------------------------------------------
   Widget: Estadísticas
--------------------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stats-grid a,
.stats-grid div,
.stats-grid .stat-card,
.stats-grid .stat-box {
  display: block;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none !important;
}

.stats-grid b {
  display: block;
  color: #2563eb;
  font-size: 22px;
  line-height: 1.15;
}

.stats-grid span,
.stats-grid small,
.stats-grid .stat-label {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

/* ---------------------------------------------------------------------------
   Widget: Usuarios / Medallas
--------------------------------------------------------------------------- */
.user-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-mini img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.user-mini span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-mini-medal {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fef3c7;
  flex: 0 0 auto;
}

.ag-widget-trending small,
.ag-widget-badges small,
.ag-widget-top-posts small {
  display: block;
  opacity: .72;
  margin-top: 3px;
}

/* ---------------------------------------------------------------------------
   Widget: Contacto
--------------------------------------------------------------------------- */
.tools-widget-icon-contacto {
  background: linear-gradient(135deg, #ea580c, #fb923c);
}


/* ---------------------------------------------------------------------------
   Widget: WhatsApp
--------------------------------------------------------------------------- */
.tools-widget-icon-whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
}


/* ---------------------------------------------------------------------------
   Widget: Etiquetas
--------------------------------------------------------------------------- */
.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tags a,
.tags span {
  background: #e0f2fe;
  color: #0369a1 !important;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none !important;
}

.tags a:hover {
  background: #bae6fd;
}

/* ---------------------------------------------------------------------------
   Modo oscuro del sitio
--------------------------------------------------------------------------- */
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .widget,
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .ag-sidebar .widget,
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .sidebar.ag-sidebar .widget {
  background: #111827;
  border-color: rgba(148, 163, 184, .24);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  color: #e5e7eb;
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .widget h3,
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .widget-title {
  color: #f8fafc;
  border-bottom-color: rgba(148, 163, 184, .22);
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .widget li {
  border-bottom-color: rgba(148, 163, 184, .16);
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .widget a {
  color: #93c5fd;
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .widget small {
  color: #cbd5e1;
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .tools-widget {
  background: linear-gradient(180deg, #111827, #0f172a);
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .tools-widget-item {
  background: #0f172a;
  border-color: rgba(148, 163, 184, .24);
  color: #e5e7eb !important;
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .tools-widget-item:hover,
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .tools-widget-item:focus-visible {
  background: #172033;
  border-color: #60a5fa;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .tools-widget-name {
  color: #f8fafc;
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .stats-grid a,
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .stats-grid div,
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .stats-grid .stat-card,
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .stats-grid .stat-box {
  background: #0f172a;
  border-color: rgba(148, 163, 184, .22);
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .stats-grid b {
  color: #60a5fa;
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .stats-grid span,
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .stats-grid small,
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .stats-grid .stat-label {
  color: #cbd5e1;
}

html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .tags a,
html[data-theme="dark"] body.ag-body:not(.ag-admin-body) .tags span {
  background: rgba(14, 165, 233, .16);
  color: #bae6fd !important;
  border: 1px solid rgba(125, 211, 252, .18);
}

/* ---------------------------------------------------------------------------
   Responsivo
--------------------------------------------------------------------------- */
@media (max-width: 760px) {

  .widget,
  .ag-sidebar .widget,
  .sidebar.ag-sidebar .widget {
    padding: 16px;
  }

  .tools-widget-item {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 58px;
  }

  .tools-widget-icon {
    width: 42px;
    height: 42px;
  }
}
/* Preguntas y respuestas */
.tools-widget-icon-questions{background:linear-gradient(135deg,#0b72e7,#24a8ff)}
.tools-widget-icon-questions svg{fill:#fff}