/* assets/css/promoter-profile.css */

/* Tarjetas */
.eh-card { border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; }
.eh-card__thumb { background-size:cover; background-position:center; aspect-ratio:16/9; }
.eh-card__body { padding:12px 14px; }

/* Perfil */
.eh-profile__banner {
  height:220px; background-size:cover; background-position:center;
  border-radius:16px; margin-bottom:20px;
}
.eh-profile__head { display:flex; gap:16px; align-items:flex-end; margin-bottom:12px; }
.eh-profile__logo { width:84px; height:84px; border-radius:14px; object-fit:cover; border:2px solid rgba(255,255,255,.2); }
.eh-profile__title { margin:0; font-size:1.6rem; line-height:1.1; display:flex; gap:.6rem; align-items:center; }
.eh-badge { font-size:.75rem; background:rgba(0,0,0,.5); padding:.25rem .6rem; border-radius:999px; color:#fff; }
.eh-profile__bio { opacity:.9; }
.eh-profile__social { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:6px; }
.eh-link { text-decoration:underline; opacity:.9; }

/* Grid */
.eh-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.eh-grid--list { grid-template-columns:1fr; }
.eh-card--past { opacity:.8; }
.eh-section-title { margin:22px 0 8px; font-size:1.1rem; opacity:.9; }

.eh-profile-settings .eh-field { margin-bottom:14px; }
.eh-profile-settings .eh-actions { margin-top:16px; }

.eh-media-field .button { margin-right:6px; }
.eh-media-preview img { display:block; max-width:100%; height:auto; }

/* ===== Profile Settings (UI mejorada) ===== */
.eh-profile-settings {
  --eh-bg: #ffffff;
  --eh-fg: #0b0f14;
  --eh-muted: #6b7280;
  --eh-border: rgba(0,0,0,.08);
  --eh-card: #fff;
  --eh-shadow: 0 10px 30px rgba(0,0,0,.10);
  --eh-radius: 14px;
  --eh-gap: 14px;
}

.eh-profile-settings form {
  background: var(--eh-card);
  border: 1px solid var(--eh-border);
  border-radius: var(--eh-radius);
  box-shadow: var(--eh-shadow);
  padding: 18px;
}

.eh-profile-settings .eh-field,
.eh-profile-settings fieldset.eh-field {
  display: grid;
  gap: 8px;
  margin-bottom: var(--eh-gap);
}

.eh-profile-settings label,
.eh-profile-settings legend {
  font-weight: 600;
  color: var(--eh-fg);
}

.eh-profile-settings small,
.eh-profile-settings .description {
  color: var(--eh-muted);
}

.eh-profile-settings input[type="text"],
.eh-profile-settings input[type="url"],
.eh-profile-settings textarea,
.eh-profile-settings select {
  width: 100%;
  border: 1px solid var(--eh-border);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.eh-profile-settings textarea { min-height: 110px; resize: vertical; }

.eh-profile-settings input:focus,
.eh-profile-settings textarea:focus,
.eh-profile-settings select:focus {
  border-color: var(--eh-accent, #503AA8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eh-accent, #503AA8) 20%, transparent);
}

/* Grid 2 columnas en desktop */
@media (min-width: 768px){
  .eh-profile-settings form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
  }
  .eh-profile-settings .eh-field--full { grid-column: 1 / -1; }
}

/* Media fields */
.eh-media-field .eh-media-actions{ display:flex; gap:8px; margin-top:8px; }
.eh-media-preview{ margin-top:6px; border:1px dashed var(--eh-border); border-radius:10px; padding:8px; }

/* Botón principal con acento del skin */
.eh-profile-settings .eh-actions {
  grid-column: 1 / -1;
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px;
}
.eh-profile-settings .eh-btn-accent {
  background: var(--eh-accent, #503AA8);
  color:#fff; border:0; padding:10px 14px;
  border-radius: 10px; cursor:pointer; font-weight:700;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--eh-accent, #503AA8) 35%, transparent);
}
.eh-profile-settings .eh-btn-accent:hover{ opacity:.95; }

/* Chips de ayuda */
.eh-profile-settings .eh-hint {
  background: #f8fafc; color: #0f172a; border: 1px solid var(--eh-border);
  padding: 10px 12px; border-radius: 10px; font-size: .9rem;
}

/* Notificaciones */
.eh-profile-settings .notice { margin-bottom: 14px; border-radius: 10px; }
.eh-profile-settings .notice-success { border-left-color: #10b981; }
.eh-profile-settings .notice-error { border-left-color: #ef4444; }