/* ==========================================================================
   Tarjetas — paneles de cristal, elementos internos, títulos y estados vacíos
   ========================================================================== */

/* Panel / tarjeta: cristal sobre el fondo vivo */
html[data-theme] .page-layout :is(
  .home-section, .home-flow, .gt-publish-panel, .gt-market-panel, .gt-results-header,
  .archi-header, .archi-panel, .archi-manage-strip, .app-link-panel,
  .harvest-summary, .map-search-panel, .progress-stat-card, .progress-panel,
  .section-card, .profile-header, .profile-archi-summary, .profile-secondary-tools,
  .panel, .panel-ornate, .cache-section, .stat-card, .admin-header, .auth-card,
  .detail-panel, .item-portrait, .description-box, .zone-overview
) {
  background: var(--c-glass) !important;
  background-image: none !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--c-shadow) !important;
  color: var(--c-text);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* Tarjetas que se repiten mucho o tienen scroll interno: sólidas, sin blur (más ligero) */
html[data-theme] .page-layout :is(.archi-card, .harvest-stage, .zone-group) {
  background: var(--c-surface) !important;
  background-image: none !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--c-shadow) !important;
}

/* Tarjetas que se tocan: se elevan y el borde toma el acento */
html[data-theme] .page-layout :is(.archi-card, .feature-card, .flow-step, .progress-stat-card, .harvest-stage) {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease) !important;
}
html[data-theme] .page-layout :is(.archi-card, .feature-card, .flow-step):hover {
  transform: translateY(-2px);
  box-shadow: var(--c-shadow-hover) !important;
  border-color: var(--c-line-hover) !important;
}
html[data-theme] .page-layout :is(.feature-card, .flow-step) { border-radius: var(--r-inner) !important; }

/* Elementos dentro de una tarjeta (filas, ítems, chips) */
html[data-theme] .page-layout :is(
  .archi-row, .want-card, .gt-row, .progress-priority-item, .progress-trade-row, .profile-archi-stat,
  .res-card, .recipe-card, .drop-item, .effect-row, .profile-trade-chip, .profile-info-pill,
  .home-panel-row, .guide-item, .trade-side, .user-card-public
) {
  background: var(--c-inset) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-inner) !important;
  box-shadow: none !important;
}
html[data-theme] .page-layout :is(.archi-row, .want-card, .gt-row, .progress-priority-item,
  .res-card, .recipe-card, .drop-item, .guide-item):hover {
  background: var(--c-inset-2) !important;
  border-color: var(--c-line-strong) !important;
}
html[data-theme] .page-layout :is(.want-card.active, .guide-item.active, .guide-item.is-active) {
  background: var(--c-accent-soft) !important;
  border-color: var(--c-line-accent) !important;
}
html[data-theme] :is(.archi-row-name, .want-card span) { color: var(--c-text) !important; }

/* Títulos de sección: tipografía moderna en vez de MAYÚSCULAS espaciadas */
html[data-theme] :is(
  .section-title, .section-card-header h2, .trade-section-header h2, .archi-panel-title,
  .priority-panel-head h2, .summary-section-title, .dp-title, .alm-title, .fw-title,
  .profile-archi-title, .gt-publish-panel h2, .gt-market-head h2, .gt-results-header h2,
  .progress-panel h2, .progress-panel h3, .archi-manage-strip strong, .cache-section h3,
  .user-card-public-title, .zone-overview-title
) {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-variant: normal !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  color: var(--c-text) !important;
}
html[data-theme] :is(.archi-panel-title, .summary-section-title, .alm-title, .fw-title,
  .gt-publish-panel h2, .gt-market-head h2, .gt-results-header h2) {
  font-size: 1.02rem !important;
}
html[data-theme] :is(.summary-section-title span, .archi-panel-title .count) {
  color: var(--c-text-3) !important;
  font-weight: 500 !important;
}
/* Títulos grandes: Geist apretado (la serif de Dofus queda solo en los banners) */
html[data-theme] :is(.harvest-title, .home-section h2, .home-flow h2) {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-variant: normal !important;
  text-transform: none !important;
  letter-spacing: -.02em !important;
  color: var(--c-text) !important;
}
/* Etiquetas pequeñas */
html[data-theme] :is(.astat-label, .user-card-public label, .alm-tribute-label, .alm-bonus-label,
  .home-panel-row span, .home-section-tag, .progress-stat-card span, .progress-kicker,
  .map-kicker, .home-kicker) {
  letter-spacing: .06em !important;
  font-weight: 600 !important;
}
html[data-theme] :is(.harvest-sub, .home-section-head p, .home-flow p, .gt-publish-panel p,
  .gt-market-head p, .gt-results-header p) {
  color: var(--c-text-2) !important;
}

/* Estados vacíos */
html[data-theme] .page-layout :is(.gt-empty, .gt-loading, .archi-empty, .progress-empty, .fw-empty) {
  background: transparent !important;
  border: 1.5px dashed var(--c-line-strong) !important;
  border-radius: var(--r-inner) !important;
  color: var(--c-text-3) !important;
}

/* Avatares: cuadrado redondeado en vez de círculo */
html[data-theme] :is(.user-card-avatar, .archi-avatar, .nav-avatar, .fw-avatar) { border-radius: 30% !important; }