/* ═══════════════════════════════════════════════════════════════
   TATUADORES MX — Public CSS  (perfiles, búsqueda, registro)
   Estética: negro, blanco, plateado — estudio de tatuajes premium
═══════════════════════════════════════════════════════════════ */

/* ── Variables (se sobreescriben con los settings del plugin) ── */
:root {
  --tmx-primary:    #c0c0c0;
  --tmx-bg:         #000000;
  --tmx-surface:    #111111;
  --tmx-border:     #2a2a2a;
  --tmx-text:       #ffffff;
  --tmx-text-muted: #888888;
  --tmx-font:       "Inter", sans-serif;
  --tmx-radius:     12px;
  --tmx-transition: .2s ease;
}

/* ── Reset & base ──────────────────────────────────────────────── */
.tmx-page * { box-sizing: border-box; }
.tmx-page {
  background: var(--tmx-bg);
  color:       var(--tmx-text);
  font-family: var(--tmx-font);
  min-height:  100vh;
}

/* ── 404 elegante ─────────────────────────────────────────────── */
.tmx-notfound {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      60vh;
}
.tmx-notfound-inner {
  text-align: center;
  padding:    40px 20px;
}
.tmx-notfound-icon { font-size: 4rem; display: block; margin-bottom: 20px; }
.tmx-notfound h1   { font-size: 1.8rem; font-weight: 800; margin-bottom: 12px; }
.tmx-notfound p    { color: var(--tmx-text-muted); margin-bottom: 24px; }

/* ── Cover ─────────────────────────────────────────────────────── */
.tmx-profile-cover {
  height:     320px;
  position:   relative;
  overflow:   hidden;
  background: var(--tmx-surface);
  margin-bottom: -80px;
}
.tmx-cover-img {
  width: 100%; height: 100%; object-fit: cover;
}
.tmx-cover-fallback {
  width:  100%; height: 100%;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d0d0d 100%);
  position: relative;
}
.tmx-cover-fallback::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.015) 0,
    rgba(255,255,255,.015) 1px,
    transparent 0,
    transparent 50%
  );
  background-size: 30px 30px;
}
.tmx-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.85) 100%);
}

/* ── Profile wrap ──────────────────────────────────────────────── */
.tmx-profile-wrap {
  max-width: 960px;
  margin:    0 auto;
  padding:   0 24px 80px;
}

/* ── Header del perfil ─────────────────────────────────────────── */
.tmx-profile-header {
  display:   flex;
  gap:       24px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--tmx-border);
  margin-bottom: 40px;
}

/* Avatar */
.tmx-profile-avatar {
  width:         110px;
  height:        110px;
  border-radius: 50%;
  border:        4px solid var(--tmx-bg);
  overflow:      hidden;
  background:    var(--tmx-surface);
  flex-shrink:   0;
  position:      relative;
  z-index:       1;
  box-shadow:    0 0 0 2px var(--tmx-border), 0 8px 24px rgba(0,0,0,.6);
}
.tmx-profile-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.tmx-profile-avatar span {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:  100%;
  height: 100%;
  font-size: 3rem;
}

/* Meta */
.tmx-profile-meta { flex: 1; min-width: 200px; padding-top: 60px; }

/* Badges */
.tmx-profile-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tmx-badge-pill {
  padding:       4px 12px;
  border-radius: 20px;
  font-size:     .72rem;
  font-weight:   700;
  letter-spacing:.06em;
  border:        1px solid transparent;
}
.badge-elite,    .plan-elite     { background: rgba(192,192,192,.12); color: var(--tmx-primary); border-color: rgba(192,192,192,.3); }
.badge-destacado,.plan-destacado { background: rgba(139,92,246,.12);  color: #a78bfa; border-color: rgba(139,92,246,.3); }
.badge-pro,      .plan-pro       { background: rgba(59,130,246,.12);  color: #60a5fa; border-color: rgba(59,130,246,.3); }
.badge-fundador                  { background: rgba(245,158,11,.12);  color: #fbbf24; border-color: rgba(245,158,11,.3); }
.plan-free                       { background: rgba(255,255,255,.05); color: var(--tmx-text-muted); border-color: var(--tmx-border); }

/* Nombre */
.tmx-artist-name {
  font-size:   2.4rem;
  font-weight: 900;
  color:       var(--tmx-text);
  letter-spacing: -.03em;
  margin:      0 0 6px;
  line-height: 1.1;
}
.tmx-artist-city {
  color:       var(--tmx-text-muted);
  font-size:   .9rem;
  margin:      0 0 12px;
}

/* Style chips */
.tmx-style-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tmx-style-chip {
  padding:       5px 14px;
  background:    var(--tmx-surface);
  border:        1px solid var(--tmx-border);
  border-radius: 20px;
  font-size:     .75rem;
  color:         var(--tmx-text-muted);
  transition:    all var(--tmx-transition);
}
.tmx-style-chip:hover { border-color: var(--tmx-primary); color: var(--tmx-primary); }

/* Botones de contacto */
.tmx-contact-btns {
  display:   flex;
  flex-direction: column;
  gap:       10px;
  align-self: center;
  padding-top: 60px;
}
.tmx-btn-wa {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         14px 22px;
  background:      linear-gradient(135deg, #25d366, #128c7e);
  color:           #fff;
  border-radius:   var(--tmx-radius);
  text-decoration: none;
  font-weight:     700;
  font-size:       .9rem;
  transition:      all var(--tmx-transition);
  white-space:     nowrap;
}
.tmx-btn-wa:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,.3); }

.tmx-btn-ig {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         12px 20px;
  background:      var(--tmx-surface);
  border:          1px solid var(--tmx-border);
  color:           var(--tmx-text-muted);
  border-radius:   var(--tmx-radius);
  text-decoration: none;
  font-size:       .85rem;
  transition:      all var(--tmx-transition);
}
.tmx-btn-ig:hover { border-color: var(--tmx-primary); color: var(--tmx-primary); }

/* ── Secciones del body ─────────────────────────────────────────── */
.tmx-profile-body { display: flex; flex-direction: column; gap: 40px; }

.tmx-section {}
.tmx-section-title {
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--tmx-text);
  margin:      0 0 20px;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--tmx-border);
  display:     flex;
  align-items: center;
  gap:         10px;
}
.tmx-gallery-count {
  font-size:   .78rem;
  font-weight: 400;
  color:       var(--tmx-text-muted);
}

/* Bio */
.tmx-bio {
  color:       var(--tmx-text-muted);
  line-height: 1.85;
  font-size:   .95rem;
  max-width:   680px;
}

/* ── Galería ─────────────────────────────────────────────────────── */
.tmx-gallery {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   10px;
}
.tmx-gallery-item {
  aspect-ratio: 1;
  border-radius: calc(var(--tmx-radius) - 2px);
  overflow:     hidden;
  cursor:       pointer;
  position:     relative;
  border:       1px solid var(--tmx-border);
  transition:   all var(--tmx-transition);
  background:   var(--tmx-surface);
}
.tmx-gallery-item:hover {
  transform:    scale(1.03);
  border-color: var(--tmx-primary);
  box-shadow:   0 4px 20px rgba(192,192,192,.15);
}
.tmx-gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--tmx-transition);
}
.tmx-gallery-item:hover img { transform: scale(1.05); }
.tmx-gallery-overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(0,0,0,.55);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  opacity:         0;
  transition:      opacity var(--tmx-transition);
}
.tmx-gallery-item:hover .tmx-gallery-overlay { opacity: 1; }

/* ── Info grid ───────────────────────────────────────────────────── */
.tmx-info-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   14px;
}
.tmx-info-card {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  background:    var(--tmx-surface);
  border:        1px solid var(--tmx-border);
  border-radius: var(--tmx-radius);
  padding:       18px;
  transition:    border-color var(--tmx-transition);
}
.tmx-info-card:hover { border-color: var(--tmx-primary); }
.tmx-info-icon   { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.tmx-info-label  { font-size: .72rem; color: var(--tmx-text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
.tmx-info-value  { font-size: .9rem;  color: var(--tmx-text); margin: 0; }
.tmx-info-value a { color: var(--tmx-primary); text-decoration: none; }
.tmx-info-value a:hover { text-decoration: underline; }

/* ── Botón primario ─────────────────────────────────────────────── */
.tmx-btn-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         14px 28px;
  background:      var(--tmx-primary);
  color:           #000;
  border-radius:   var(--tmx-radius);
  font-weight:     700;
  font-size:       .95rem;
  text-decoration: none;
  transition:      all var(--tmx-transition);
}
.tmx-btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(192,192,192,.25); }

/* ── CTA Banner ─────────────────────────────────────────────────── */
.tmx-cta-banner {
  margin-top:    48px;
  background:    linear-gradient(135deg, rgba(192,192,192,.07), rgba(192,192,192,.02));
  border:        1px solid rgba(192,192,192,.15);
  border-radius: var(--tmx-radius);
  padding:       48px 40px;
  text-align:    center;
}
.tmx-cta-banner h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; }
.tmx-cta-banner p  { color: var(--tmx-text-muted); margin: 0 0 24px; }

/* ── Lightbox ────────────────────────────────────────────────────── */
#tmx-lightbox {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.96);
  z-index:         99999;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             16px;
}
#lb-img {
  max-width: 92vw; max-height: 80vh;
  object-fit: contain;
  border-radius: var(--tmx-radius);
  box-shadow: 0 0 60px rgba(0,0,0,.8);
}
#lb-close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none; color: #fff;
  font-size: 2rem; cursor: pointer; line-height: 1;
  opacity: .7; transition: opacity var(--tmx-transition);
}
#lb-close:hover { opacity: 1; }
#lb-prev, #lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 1.6rem;
  width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tmx-transition);
}
#lb-prev { left: 20px; }
#lb-next { right: 20px; }
#lb-prev:hover, #lb-next:hover { background: rgba(255,255,255,.2); }
#lb-count {
  position: absolute; bottom: 20px;
  color: rgba(255,255,255,.5); font-size: .82rem;
  font-family: var(--tmx-font);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .tmx-profile-cover  { height: 200px; margin-bottom: -50px; }
  .tmx-profile-wrap   { padding: 0 16px 60px; }
  .tmx-profile-header { flex-direction: column; align-items: flex-start; }
  .tmx-profile-avatar { width: 85px; height: 85px; }
  .tmx-profile-meta   { padding-top: 20px; }
  .tmx-artist-name    { font-size: 1.7rem; }
  .tmx-contact-btns   { flex-direction: row; flex-wrap: wrap; padding-top: 0; width: 100%; }
  .tmx-btn-wa, .tmx-btn-ig { flex: 1; justify-content: center; }
  .tmx-gallery        { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .tmx-cta-banner     { padding: 32px 20px; }
  #lb-prev { left: 6px; }
  #lb-next { right: 6px; }
}