/* ═══════════════════════════════════════════════════════════════
   TATUADORES MX — INTRANET CSS
   Dark UI premium con design tokens calibrados para conversión
═══════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  --tmx-bg:           var(--tmx-bg);
  --tmx-surface:      var(--tmx-surface);
  --tmx-surface-2:    var(--tmx-surface);
  --tmx-border:       var(--tmx-border);
  --tmx-border-light: #3f3f46;

  --tmx-gold:         var(--tmx-primary);
  --tmx-gold-light:   #e8c472;
  --tmx-gold-dark:    #a07830;

  --tmx-text:         var(--tmx-text);
  --tmx-text-muted:   var(--tmx-text-muted);
  --tmx-text-subtle:  #52525b;

  --tmx-elite:        var(--tmx-primary);
  --tmx-destacado:    #7c3aed;
  --tmx-pro:          #2563eb;
  --tmx-free:         #52525b;

  --tmx-success:      #16a34a;
  --tmx-warning:      #ca8a04;
  --tmx-error:        #dc2626;
  --tmx-info:         #0284c7;

  --tmx-radius:       12px;
  --tmx-radius-sm:    8px;
  --tmx-radius-lg:    20px;

  --tmx-shadow:       0 4px 24px rgba(0,0,0,.5);
  --tmx-shadow-gold:  0 0 32px rgba(212,168,83,.15);

  --tmx-transition:   all .2s cubic-bezier(.4,0,.2,1);
  --tmx-font:         'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Reset / Base ─────────────────────────────────────────── */
.tmx-intranet *,
.tmx-intranet *::before,
.tmx-intranet *::after { box-sizing: border-box; margin: 0; padding: 0; }

.tmx-intranet {
  font-family:    var(--tmx-font);
  color:          var(--tmx-text);
  background:     var(--tmx-bg);
  min-height:     100vh;
  padding:        24px 0 80px;
}

/* ── Header del tatuador ──────────────────────────────────── */
.tmx-intranet-header {
  display:      flex;
  align-items:  flex-start;
  gap:          20px;
  background:   var(--tmx-surface);
  border:       1px solid var(--tmx-border);
  border-radius:var(--tmx-radius-lg);
  padding:      28px;
  margin-bottom:24px;
}

.tmx-avatar-img,
.tmx-avatar-placeholder {
  width:  80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--tmx-gold);
  flex-shrink: 0;
}
.tmx-avatar-placeholder {
  background: var(--tmx-surface-2);
  display:    flex;
  align-items:center;
  justify-content:center;
  font-size:  36px;
}

.tmx-intranet-meta { flex: 1; }
.tmx-intranet-meta h2 {
  font-size:   1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.tmx-intranet-tags {
  display: flex;
  gap:     10px;
  flex-wrap: wrap;
}

.tmx-intranet-stats-mini {
  display:   flex;
  gap:       20px;
  flex-shrink: 0;
}
.tmx-stat-mini {
  text-align: center;
  min-width:  60px;
}
.tmx-stat-value {
  display:     block;
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--tmx-gold);
}
.tmx-stat-label {
  font-size: .7rem;
  color:     var(--tmx-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Badges de plan ───────────────────────────────────────── */
.tmx-plan-badge {
  padding:       4px 10px;
  border-radius: 20px;
  font-size:     .75rem;
  font-weight:   700;
  letter-spacing:.08em;
}
.tmx-plan-badge.plan-elite    { background:rgba(212,168,83,.2); color:var(--tmx-elite);     border:1px solid rgba(212,168,83,.4); }
.tmx-plan-badge.plan-destacado{ background:rgba(124,58,237,.2); color:#a78bfa;              border:1px solid rgba(124,58,237,.4); }
.tmx-plan-badge.plan-pro      { background:rgba(37,99,235,.2);  color:#60a5fa;              border:1px solid rgba(37,99,235,.4); }
.tmx-plan-badge.plan-free     { background:rgba(82,82,91,.2);   color:var(--tmx-text-muted);border:1px solid rgba(82,82,91,.4); }

.tmx-status-badge {
  padding:       4px 10px;
  border-radius: 20px;
  font-size:     .75rem;
  font-weight:   600;
}
.tmx-status-badge.status-approved  { background:rgba(22,163,74,.15);  color:#4ade80; border:1px solid rgba(22,163,74,.3); }
.tmx-status-badge.status-pending   { background:rgba(202,138,4,.15);  color:#fbbf24; border:1px solid rgba(202,138,4,.3); }
.tmx-status-badge.status-rejected  { background:rgba(220,38,38,.15);  color:#f87171; border:1px solid rgba(220,38,38,.3); }
.tmx-status-badge.status-suspended { background:rgba(220,38,38,.1);   color:#f87171; border:1px solid rgba(220,38,38,.2); }

.tmx-city-tag {
  padding:       4px 10px;
  border-radius: 20px;
  font-size:     .75rem;
  color:         var(--tmx-text-muted);
  background:    var(--tmx-surface-2);
  border:        1px solid var(--tmx-border);
}

/* ── Alertas ──────────────────────────────────────────────── */
.tmx-alert {
  padding:       12px 16px;
  border-radius: var(--tmx-radius-sm);
  font-size:     .875rem;
  margin:        12px 0;
  border-left:   4px solid;
}
.tmx-alert-info    { background:rgba(2,132,199,.1);  border-color:var(--tmx-info);    color:#7dd3fc; }
.tmx-alert-warning { background:rgba(202,138,4,.1);  border-color:var(--tmx-warning); color:#fcd34d; }
.tmx-alert-error   { background:rgba(220,38,38,.1);  border-color:var(--tmx-error);   color:#fca5a5; }
.tmx-alert-success { background:rgba(22,163,74,.1);  border-color:var(--tmx-success); color:#86efac; }

/* ── Navegación intranet ──────────────────────────────────── */
.tmx-intranet-nav {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding:   4px;
  background:var(--tmx-surface);
  border:    1px solid var(--tmx-border);
  border-radius: var(--tmx-radius);
}

.tmx-nav-btn {
  flex:          1;
  min-width:     120px;
  padding:       10px 16px;
  background:    transparent;
  border:        none;
  color:         var(--tmx-text-muted);
  cursor:        pointer;
  border-radius: var(--tmx-radius-sm);
  font-size:     .875rem;
  font-weight:   500;
  transition:    var(--tmx-transition);
  white-space:   nowrap;
}
.tmx-nav-btn:hover { color:var(--tmx-text); background:var(--tmx-surface-2); }
.tmx-nav-btn.active {
  background: linear-gradient(135deg, rgba(212,168,83,.2), rgba(212,168,83,.05));
  color:      var(--tmx-gold);
  border:     1px solid rgba(212,168,83,.3);
}

/* ── Sección ──────────────────────────────────────────────── */
.tmx-intranet-section {
  background:    var(--tmx-surface);
  border:        1px solid var(--tmx-border);
  border-radius: var(--tmx-radius-lg);
  padding:       32px;
}
.tmx-intranet-section h3 {
  font-size:     1.2rem;
  font-weight:   700;
  margin-bottom: 24px;
  padding-bottom:16px;
  border-bottom: 1px solid var(--tmx-border);
  color:         var(--tmx-text);
}

/* ── Formulario ───────────────────────────────────────────── */
.tmx-form { display: flex; flex-direction: column; gap: 20px; }
.tmx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .tmx-form-row { grid-template-columns: 1fr; } }

.tmx-form-group { display: flex; flex-direction: column; gap: 6px; }
.tmx-form-group label {
  font-size:   .8rem;
  font-weight: 600;
  color:       var(--tmx-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tmx-form-group input,
.tmx-form-group select,
.tmx-form-group textarea {
  background:    var(--tmx-surface-2);
  border:        1px solid var(--tmx-border);
  border-radius: var(--tmx-radius-sm);
  color:         var(--tmx-text);
  padding:       12px 14px;
  font-size:     .95rem;
  font-family:   var(--tmx-font);
  transition:    var(--tmx-transition);
  width:         100%;
}
.tmx-form-group input:focus,
.tmx-form-group select:focus,
.tmx-form-group textarea:focus {
  outline:       none;
  border-color:  var(--tmx-gold);
  box-shadow:    0 0 0 3px rgba(212,168,83,.15);
}
.tmx-form-group input:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.tmx-input-prefix { display: flex; align-items: center; gap: 0; }
.tmx-input-prefix span {
  background:   var(--tmx-surface-2);
  border:       1px solid var(--tmx-border);
  border-right: none;
  border-radius:var(--tmx-radius-sm) 0 0 var(--tmx-radius-sm);
  padding:      12px 10px;
  color:        var(--tmx-text-muted);
  font-size:    1rem;
}
.tmx-input-prefix input { border-radius: 0 var(--tmx-radius-sm) var(--tmx-radius-sm) 0; }

.tmx-char-count { font-size: .75rem; color: var(--tmx-text-muted); text-align: right; }

/* ── Estilos chips ────────────────────────────────────────── */
.tmx-styles-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}
.tmx-style-chip {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 14px;
  background:    var(--tmx-surface-2);
  border:        1px solid var(--tmx-border);
  border-radius: 20px;
  cursor:        pointer;
  font-size:     .8rem;
  color:         var(--tmx-text-muted);
  transition:    var(--tmx-transition);
}
.tmx-style-chip input { display: none; }
.tmx-style-chip:hover,
.tmx-style-chip.selected {
  background:  rgba(212,168,83,.15);
  border-color:var(--tmx-gold);
  color:       var(--tmx-gold);
}

/* ── Botones ──────────────────────────────────────────────── */
.tmx-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       12px 24px;
  border-radius: var(--tmx-radius-sm);
  font-size:     .9rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    var(--tmx-transition);
  border:        none;
  font-family:   var(--tmx-font);
  text-decoration: none;
}
.tmx-btn-primary {
  background: linear-gradient(135deg, var(--tmx-gold), var(--tmx-gold-dark));
  color:      #000;
}
.tmx-btn-primary:hover {
  background: linear-gradient(135deg, var(--tmx-gold-light), var(--tmx-gold));
  transform:  translateY(-1px);
  box-shadow: var(--tmx-shadow-gold);
}
.tmx-btn-ghost {
  background: transparent;
  border:     1px solid var(--tmx-border);
  color:      var(--tmx-text-muted);
}
.tmx-btn-ghost:hover { border-color:var(--tmx-border-light); color:var(--tmx-text); }
.tmx-btn-upgrade {
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  color:      #fff;
  width:      100%;
  justify-content: center;
  margin-top: 12px;
}
.tmx-btn-upgrade:hover { background: linear-gradient(135deg, #8b5cf6, #6d28d9); transform: translateY(-1px); }

.tmx-form-footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tmx-form-note { font-size: .8rem; color: var(--tmx-text-muted); width: 100%; }
.tmx-save-status { font-size: .85rem; }
.tmx-save-status.success { color: #4ade80; }
.tmx-save-status.error   { color: #f87171; }

.tmx-feature-lock {
  font-size:   .7rem;
  padding:     2px 8px;
  background:  rgba(212,168,83,.1);
  border:      1px solid rgba(212,168,83,.2);
  border-radius: 20px;
  color:       var(--tmx-gold);
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Galería ──────────────────────────────────────────────── */
.tmx-gallery-meta {
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  margin-bottom:  16px;
  gap:            16px;
  flex-wrap:      wrap;
}
.tmx-gallery-usage { flex: 1; display: flex; align-items: center; gap: 12px; }
.tmx-usage-bar {
  flex:           1;
  height:         6px;
  background:     var(--tmx-surface-2);
  border-radius:  3px;
  overflow:       hidden;
  max-width:      200px;
}
.tmx-usage-fill {
  height:       100%;
  background:   linear-gradient(90deg, var(--tmx-gold), var(--tmx-gold-light));
  border-radius:3px;
  transition:   width .5s ease;
}

/* Drop zone */
.tmx-drop-zone {
  border:         2px dashed var(--tmx-border);
  border-radius:  var(--tmx-radius);
  padding:        40px 20px;
  text-align:     center;
  cursor:         pointer;
  transition:     var(--tmx-transition);
  margin-bottom:  24px;
}
.tmx-drop-zone:hover,
.tmx-drop-zone.drag-over {
  border-color: var(--tmx-gold);
  background:   rgba(212,168,83,.05);
}
.tmx-drop-zone.disabled { opacity: .4; pointer-events: none; }
.tmx-drop-icon { font-size: 2.5rem; margin-bottom: 12px; }
.tmx-drop-zone button {
  background:  transparent;
  border:      none;
  color:       var(--tmx-gold);
  cursor:      pointer;
  font-size:   inherit;
  font-weight: 600;
  text-decoration: underline;
}
.tmx-drop-zone .tmx-muted { font-size: .8rem; color: var(--tmx-text-muted); margin-top: 6px; }

/* Gallery grid */
.tmx-gallery-grid {
  display:              grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:                  12px;
}
.tmx-gallery-item {
  position:     relative;
  aspect-ratio: 1;
  border-radius:var(--tmx-radius-sm);
  overflow:     hidden;
  cursor:       grab;
  border:       2px solid var(--tmx-border);
  transition:   var(--tmx-transition);
}
.tmx-gallery-item:hover { border-color: var(--tmx-gold); transform: scale(1.02); }
.tmx-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tmx-gallery-overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(0,0,0,.6);
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  opacity:         0;
  transition:      var(--tmx-transition);
}
.tmx-gallery-item:hover .tmx-gallery-overlay { opacity: 1; }
.tmx-gallery-delete {
  background: rgba(220,38,38,.8);
  border:     none;
  border-radius: 50%;
  width:      36px;
  height:     36px;
  cursor:     pointer;
  font-size:  1rem;
  display:    flex;
  align-items:center;
  justify-content:center;
}
.tmx-gallery-drag-handle { font-size: 1.5rem; color: #fff; cursor: grab; }
.tmx-gallery-empty { grid-column: 1/-1; text-align: center; color: var(--tmx-text-muted); padding: 40px; }

/* Progress bar */
.tmx-progress-bar {
  height:       8px;
  background:   var(--tmx-surface-2);
  border-radius:4px;
  overflow:     hidden;
  margin:       12px 0 8px;
}
.tmx-progress-fill {
  height:       100%;
  background:   linear-gradient(90deg, var(--tmx-gold), var(--tmx-gold-light));
  border-radius:4px;
  transition:   width .3s ease;
}
#tmx-upload-msg { font-size: .85rem; color: var(--tmx-text-muted); }

/* ── Portada ──────────────────────────────────────────────── */
.tmx-cover-preview {
  width:         100%;
  aspect-ratio:  3/1;
  border-radius: var(--tmx-radius);
  overflow:      hidden;
  border:        2px solid var(--tmx-border);
  margin-bottom: 16px;
  background:    var(--tmx-surface-2);
}
.tmx-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.tmx-cover-placeholder {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100%;
  color:           var(--tmx-text-muted);
}
.tmx-cover-placeholder span { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
.tmx-cover-placeholder p { font-size: .85rem; }
.tmx-cover-actions { display: flex; gap: 12px; }

/* ── Plan / Suscripción ───────────────────────────────────── */
.tmx-plan-current {
  background:    var(--tmx-surface-2);
  border:        1px solid var(--tmx-border);
  border-radius: var(--tmx-radius);
  overflow:      hidden;
  margin-bottom: 32px;
}
.tmx-plan-header {
  display:     flex;
  align-items: center;
  gap:         16px;
  padding:     20px 24px;
  border-bottom: 1px solid var(--tmx-border);
}
.tmx-plan-header.plan-elite    { background: linear-gradient(135deg, rgba(212,168,83,.15), rgba(212,168,83,.05)); }
.tmx-plan-header.plan-destacado{ background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(124,58,237,.05)); }
.tmx-plan-header.plan-pro      { background: linear-gradient(135deg, rgba(37,99,235,.15),  rgba(37,99,235,.05)); }
.tmx-plan-icon { font-size: 2rem; }
.tmx-plan-header h4 { font-size: 1.2rem; font-weight: 700; margin: 0 0 4px; }
.tmx-plan-header p  { font-size: .9rem; color: var(--tmx-text-muted); margin: 0; }

.tmx-plan-features {
  list-style: none;
  padding:    20px 24px;
  display:    flex;
  flex-direction: column;
  gap:        8px;
}
.tmx-plan-features li { font-size: .9rem; color: var(--tmx-text-muted); }
.tmx-plan-features li::before { content: '✓ '; color: var(--tmx-gold); font-weight: 700; }

.tmx-upgrade-title { font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: var(--tmx-text-muted); }
.tmx-plans-upgrade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
@media(max-width:600px) { .tmx-plans-upgrade-grid { grid-template-columns: 1fr; } }

.tmx-upgrade-card {
  background:    var(--tmx-surface-2);
  border:        1px solid var(--tmx-border);
  border-radius: var(--tmx-radius);
  padding:       24px;
  display:       flex;
  flex-direction:column;
  gap:           8px;
}
.tmx-upgrade-card.plan-elite    { border-color: rgba(212,168,83,.3); }
.tmx-upgrade-card.plan-destacado{ border-color: rgba(124,58,237,.3); }
.tmx-upgrade-card.plan-pro      { border-color: rgba(37,99,235,.3);  }
.tmx-upgrade-badge { font-size: 1.8rem; }
.tmx-upgrade-card h4 { font-size: 1rem; font-weight: 700; margin: 0; }
.tmx-upgrade-price { font-size: 1.6rem; font-weight: 700; color: var(--tmx-gold); }
.tmx-upgrade-price span { font-size: .75rem; color: var(--tmx-text-muted); font-weight: 400; }
.tmx-upgrade-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tmx-upgrade-card ul li { font-size: .8rem; color: var(--tmx-text-muted); }
.tmx-upgrade-card ul li::before { content: '✓ '; color: var(--tmx-success); font-weight: 700; }

.tmx-subscription-manage {
  background:    var(--tmx-surface-2);
  border:        1px solid var(--tmx-border);
  border-radius: var(--tmx-radius);
  padding:       24px;
}
.tmx-subscription-manage h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.tmx-subscription-manage p  { font-size: .9rem; color: var(--tmx-text-muted); margin-bottom: 16px; }

/* ── Historial ────────────────────────────────────────────── */
.tmx-history-item {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  padding:       14px 0;
  border-bottom: 1px solid var(--tmx-border);
}
.tmx-history-item:last-child { border-bottom: none; }
.tmx-history-icon { font-size: 1.3rem; flex-shrink: 0; padding-top: 2px; }
.tmx-history-info { flex: 1; }
.tmx-history-info strong { font-size: .95rem; font-weight: 600; display: block; margin-bottom: 2px; }
.tmx-history-status { font-size: .8rem; color: var(--tmx-text-muted); }
.tmx-history-note {
  font-size:   .8rem;
  color:       var(--tmx-text-muted);
  background:  var(--tmx-surface-2);
  border-radius: var(--tmx-radius-sm);
  padding:     8px 10px;
  margin-top:  6px;
  border-left: 3px solid var(--tmx-border);
}
.tmx-history-item.status-success .tmx-history-status { color: #4ade80; }
.tmx-history-item.status-error   .tmx-history-status { color: #f87171; }
.tmx-history-item.status-warning .tmx-history-status { color: #fbbf24; }
.tmx-history-date { font-size: .75rem; color: var(--tmx-text-muted); flex-shrink: 0; }

.tmx-upgrade-link { font-size: .8rem; color: var(--tmx-gold); text-decoration: none; white-space: nowrap; }
.tmx-muted { color: var(--tmx-text-muted); }

/* ── Estado setup ─────────────────────────────────────────── */
.tmx-setup-needed {
  text-align:  center;
  padding:     80px 20px;
}
.tmx-setup-needed h2 { font-size: 1.5rem; margin-bottom: 12px; }
.tmx-setup-needed p  { color: var(--tmx-text-muted); margin-bottom: 24px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .tmx-intranet-header { flex-direction: column; }
  .tmx-intranet-stats-mini { align-self: stretch; justify-content: space-around; }
  .tmx-nav-btn { font-size: .75rem; padding: 8px 10px; min-width: 80px; }
  .tmx-intranet-section { padding: 20px 16px; }
  .tmx-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}