/* ================================================
   EspacioGPT — Design System v1.0
   Exact match to mockup screenshots
   ================================================ */

/* ---- Reset & Root Variables ---- */
:root {
  --eg-pink: #ec2f98;
  --eg-purple: #765cff;
  --eg-gradient: linear-gradient(135deg, #ec2f98 0%, #765cff 100%);
  --eg-gradient-soft: linear-gradient(135deg, rgba(236,47,152,.08) 0%, rgba(118,92,255,.08) 100%);
  --eg-bg: #fafafd;
  --eg-white: #ffffff;
  --eg-text: #0d0d1a;
  --eg-text-muted: #6b7280;
  --eg-text-soft: #9ca3af;
  --eg-border: #e5e7eb;
  --eg-border-soft: #f3f4f6;
  --eg-shadow: 0 8px 24px rgba(15,23,42,.045), 0 1px 3px rgba(15,23,42,.06);
  --eg-shadow-md: 0 14px 34px rgba(15,23,42,.08), 0 3px 8px rgba(15,23,42,.05);
  --eg-shadow-lg: 0 22px 50px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.07);
  --eg-radius: 12px;
  --eg-radius-lg: 18px;
  --eg-radius-xl: 22px;
  --eg-radius-full: 9999px;
  --sidebar-w: 276px;
  --topbar-h: 84px;
  --font: "Inter", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body.app-body {
  font-family: var(--font);
  background: var(--eg-bg);
  color: var(--eg-text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ================================================
   APP LAYOUT
   ================================================ */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 100vh;
  background: var(--eg-bg);
}

/* ================================================
   SIDEBAR
   ================================================ */
.sidebar {
  grid-column: 1;
  grid-row: 1 / 3;
  width: var(--sidebar-w);
  height: 100vh;
  background: rgba(255,255,255,.96);
  border-right: 1px solid var(--eg-border);
  display: flex;
  flex-direction: column;
  padding: 28px 22px;
  position: sticky;
  top: 0;
  overflow: hidden;
  z-index: 30;
}

/* Logo */
.sidebar-header { margin-bottom: 28px; padding-bottom: 0; border-bottom: 0; display:flex;align-items:center;justify-content:space-between;gap:10px; }
.sidebar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-img { width: 48px; height: 48px; object-fit: contain; box-shadow: 0 10px 24px rgba(236,47,152,.20); }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-title { font-size: 25px; font-weight: 700; color: var(--eg-text); letter-spacing: -.02em; }
.logo-sub { font-size: 13px; font-weight: 500; color: var(--eg-text-muted); }
.sidebar-close { display: none; }

/* New Chat Button */
.btn-new-chat {
  display: flex; align-items: center; gap: 10px;
  background: var(--eg-gradient);
  color: #fff; border: none; border-radius: var(--eg-radius);
  padding: 16px 18px; font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none; width: 100%;
  margin-bottom: 8px; transition: opacity .15s, transform .15s;
  box-shadow: 0 4px 14px rgba(118,92,255,.3);
}
.btn-new-chat:hover { opacity: .92; transform: translateY(-1px); color: #fff; text-decoration: none; }
.btn-new-chat svg { width: 22px; height: 22px; flex-shrink: 0; border:1.5px solid rgba(255,255,255,.55);border-radius:7px;padding:3px; }

/* Nav */
.sidebar-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
.sidebar-nav::-webkit-scrollbar { width: 0; }
.nav-group-label { display:none; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 10px; border-radius: 13px;
  text-decoration: none; color: var(--eg-text-muted);
  font-size: 15px; font-weight: 600; transition: all .12s;
}
.nav-item:hover { background: var(--eg-border-soft); color: var(--eg-text); text-decoration: none; }
.nav-item.active { background: var(--eg-border-soft); color: var(--eg-text); font-weight: 600; }
.nav-icon { font-size: 21px; width: 28px; text-align: center; flex-shrink: 0; }
.nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 700;
  background: var(--eg-gradient); color: #fff;
  padding: 2px 7px; border-radius: var(--eg-radius-full);
}

/* Sidebar Footer — Upgrade banner */
.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--eg-border-soft); }
.upgrade-banner {
  background: var(--eg-gradient-soft);
  border: 1px solid rgba(118,92,255,.2);
  border-radius: var(--eg-radius);
  padding: 22px 18px; display: flex; align-items: center; gap: 10px;
  text-decoration: none; transition: opacity .15s;
}
.upgrade-banner:hover { opacity: .85; text-decoration: none; }
.upgrade-icon { font-size: 34px; flex-shrink: 0; }
.upgrade-text h4 { font-size: 14px; font-weight: 700; color: var(--eg-purple); margin: 0 0 2px; }
.upgrade-text p { font-size: 13px; color: var(--eg-text-muted); margin: 0; line-height: 1.4; }
.upgrade-chevron { margin-left: auto; color: var(--eg-purple); font-size: 16px; }

/* WhatsApp Floating Button */
.whatsapp-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25d366; color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: transform .2s, box-shadow .2s; text-decoration: none;
}
.whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,.55); }
.whatsapp-fab svg { width: 28px; height: 28px; }

/* ================================================
   TOPBAR
   ================================================ */
.topbar {
  grid-column: 2; grid-row: 1;
  height: var(--topbar-h);
  background: transparent;
  border-bottom: 0;
  display: flex; align-items: center; padding: 0 42px;
  gap: 12px; z-index: 20;
}
.topbar-left { flex: 1; }
.topbar-title { font-size: 15px; font-weight: 600; color: var(--eg-text-muted); display: none; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.credits-pill {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--eg-border); border-radius: var(--eg-radius-full);
  padding: 7px 16px; background: var(--eg-white);
  text-decoration: none; color: var(--eg-text); transition: border-color .12s;
  font-size: 14px;
}
.credits-pill:hover { border-color: var(--eg-purple); text-decoration: none; color: var(--eg-text); }
.credits-pill .gift-icon { font-size: 16px; }
.credits-pill .credits-label { color: var(--eg-text-muted); font-weight: 500; }
.credits-pill .credits-num { font-weight: 700; color: var(--eg-purple); font-size: 15px; }

.topbar-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: none; background: transparent;
  border-radius: 8px; color: var(--eg-text-muted); font-size: 14px;
  cursor: pointer; transition: background .12s; text-decoration: none;
}
.topbar-btn:hover { background: var(--eg-border-soft); color: var(--eg-text); text-decoration: none; }

.user-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border: 1.5px solid var(--eg-border);
  border-radius: var(--eg-radius-full); background: var(--eg-white);
  cursor: pointer; text-decoration: none; color: var(--eg-text);
  transition: border-color .12s;
}
.user-pill:hover { border-color: var(--eg-purple); text-decoration: none; color: var(--eg-text); }
.user-avatar-sm {
  width: 30px; height: 30px; border-radius: 50%;
  background: #0d0d1a; color: #fff; display: flex;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.user-name-sm { font-size: 13px; font-weight: 600; }
.menu-toggle { display: none; }
.font-size-controls, .theme-toggle { display: none !important; }

/* ================================================
   MAIN CONTENT
   ================================================ */
.main-content {
  grid-column: 2; grid-row: 2;
  background: var(--eg-bg);
  overflow-y: auto;
  height: calc(100vh - var(--topbar-h));
}
.page-content { padding: 24px 44px 34px; max-width: 1220px; margin:0 auto; width:100%; }

/* ================================================
   CHAT VIEW
   ================================================ */
.chat-wrapper {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  padding: 0;
}
/* Override page-content for chat */
.chat-page .page-content { padding: 0; overflow: hidden; height: 100%; }
.chat-page .main-content { overflow: hidden; }

.chat-messages {
  flex: 1; overflow-y: auto; padding: 28px 32px 16px;
  display: flex; flex-direction: column; gap: 20px;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--eg-border); border-radius: 4px; }

/* Welcome screen */
.chat-welcome {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  min-height: calc(100vh - 220px); gap: 0; padding: 20px 16px 0;
}
.welcome-logo-wrap {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--eg-gradient); display: flex;
  align-items: center; justify-content: center;
  margin-bottom: 20px; box-shadow: 0 8px 32px rgba(118,92,255,.3);
}
.welcome-logo-wrap img { width: 50px; height: 50px; object-fit: contain; filter: brightness(10); }
.chat-welcome h2 {
  font-size: 36px; font-weight: 400; letter-spacing: -.03em;
  color: var(--eg-text); margin-bottom: 10px; line-height: 1.1;
}
.chat-welcome h2 strong { font-weight: 800; background: var(--eg-gradient); -webkit-background-clip: text; color: transparent; }
.chat-welcome .welcome-subtitle { font-size: 15px; color: var(--eg-text-muted); margin-bottom: 28px; max-width: 440px; }

/* Feature cards row */
.feature-cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; max-width: 760px; width: 100%; margin-bottom: 28px;
}
.feature-card {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg); padding: 18px 16px;
  text-align: left; cursor: pointer; text-decoration: none;
  transition: box-shadow .15s, transform .15s; display: block;
  color: var(--eg-text);
}
.feature-card:hover { box-shadow: var(--eg-shadow-md); transform: translateY(-2px); text-decoration: none; color: var(--eg-text); }
.fc-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; font-size: 20px;
}
.fc-icon.pink { background: rgba(236,47,152,.1); }
.fc-icon.purple { background: rgba(118,92,255,.1); }
.fc-icon.blue { background: rgba(59,130,246,.1); }
.fc-icon.teal { background: rgba(20,184,166,.1); }
.feature-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.feature-card p { font-size: 13px; color: var(--eg-text-muted); line-height: 1.4; }
.feature-card .fc-arrow { margin-top: 10px; color: var(--eg-text-soft); font-size: 13px; }

/* Suggestions */
.suggestions-section { max-width: 760px; width: 100%; text-align: left; }
.suggestions-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.suggestions-header h3 { font-size: 15px; font-weight: 600; }
.suggestions-header a { font-size: 13px; color: var(--eg-text-muted); text-decoration: none; }
.suggestion-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.suggestion-card {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius); padding: 22px 18px;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
  display: flex; align-items: flex-start; gap: 8px;
  text-align: left;
}
.suggestion-card:hover { border-color: var(--eg-purple); box-shadow: var(--eg-shadow); }
.sg-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.sg-text { font-size: 13px; color: var(--eg-text); line-height: 1.4; font-weight: 500; }

/* Chat Input */
.chat-input-area {
  padding: 12px 32px 20px; background: var(--eg-bg);
  border-top: 1px solid var(--eg-border-soft);
}
.chat-input-inner { max-width: 760px; margin: 0 auto; }
.chat-input-box {
  background: var(--eg-white); border: 1.5px solid var(--eg-border);
  border-radius: 16px; padding: 14px 16px 10px;
  box-shadow: var(--eg-shadow); transition: border-color .15s;
}
.chat-input-box:focus-within { border-color: var(--eg-purple); box-shadow: 0 0 0 3px rgba(118,92,255,.1); }
.chat-textarea {
  width: 100%; border: none; background: transparent; resize: none;
  outline: none; font-size: 15px; font-family: var(--font);
  color: var(--eg-text); min-height: 44px; max-height: 180px;
  line-height: 1.5;
}
.chat-textarea::placeholder { color: var(--eg-text-soft); }
.chat-input-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.attach-btn {
  width: 34px; height: 34px; border-radius: 8px; border: none;
  background: transparent; color: var(--eg-text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: background .12s;
}
.attach-btn:hover { background: var(--eg-border-soft); }
.model-select-btn {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--eg-border); border-radius: 8px;
  padding: 6px 12px; background: var(--eg-white); font-size: 13px;
  font-weight: 500; color: var(--eg-text); cursor: pointer;
  transition: border-color .12s; font-family: var(--font);
}
.model-select-btn:hover { border-color: var(--eg-purple); }
.model-select-btn .chevron { color: var(--eg-text-muted); font-size: 11px; }
.model-dropdown {
  position: absolute; bottom: 52px; left: 0;
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius); box-shadow: var(--eg-shadow-lg);
  min-width: 220px; z-index: 100; overflow: hidden;
  display: none;
}
.model-dropdown.open { display: block; }
.model-dropdown-item {
  padding: 10px 14px; display: flex; align-items: center;
  justify-content: space-between; cursor: pointer; font-size: 14px;
  transition: background .1s;
}
.model-dropdown-item:hover { background: var(--eg-border-soft); }
.model-dropdown-item.active { color: var(--eg-purple); font-weight: 600; }
.model-tag { font-size: 11px; padding: 2px 7px; border-radius: 999px; font-weight: 600; }
.model-tag.pro { background: rgba(118,92,255,.1); color: var(--eg-purple); }
.model-tag.nuevo { background: rgba(236,47,152,.1); color: var(--eg-pink); }
.input-controls-right { margin-left: auto; }
.send-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--eg-gradient); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: opacity .15s, transform .15s;
  box-shadow: 0 4px 12px rgba(118,92,255,.4);
}
.send-btn:hover { opacity: .88; transform: scale(1.05); }
.send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Chat Messages */
.message-group { max-width: 760px; width: 100%; margin: 0 auto; }
.msg-row { display: flex; gap: 12px; align-items: flex-start; }
.msg-row.user-row { flex-direction: row-reverse; }
.msg-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.ai-avatar { background: var(--eg-gradient); color: #fff; }
.user-avatar-msg { background: #0d0d1a; color: #fff; }
.msg-bubble {
  max-width: 85%; padding: 12px 16px; border-radius: 14px;
  font-size: 14px; line-height: 1.6;
}
.ai-bubble {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  color: var(--eg-text); border-radius: 4px 14px 14px 14px;
}
.user-bubble {
  background: #0d0d1a; color: #fff;
  border-radius: 14px 4px 14px 14px;
}
.msg-actions { display: flex; gap: 6px; margin-top: 6px; }
.msg-action-btn {
  padding: 4px 10px; border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-full); background: var(--eg-white);
  font-size: 12px; color: var(--eg-text-muted); cursor: pointer;
  transition: all .1s;
}
.msg-action-btn:hover { border-color: var(--eg-purple); color: var(--eg-purple); }

/* ================================================
   DASHBOARD VIEW
   ================================================ */
.page-header { margin-bottom: 28px; }
.page-header h1 { font-size: 31px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.page-header h1 strong { background: var(--eg-gradient); -webkit-background-clip: text; color: transparent; }
.page-header p { color: var(--eg-text-muted); font-size: 15px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg); padding: 20px 22px;
  box-shadow: var(--eg-shadow);
}
.stat-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.stat-card-icon {
  width: 56px; height: 56px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.stat-card-icon.purple { background: rgba(118,92,255,.1); }
.stat-card-icon.pink { background: rgba(236,47,152,.1); }
.stat-card-icon.blue { background: rgba(59,130,246,.1); }
.stat-card-icon.teal { background: rgba(20,184,166,.1); }
.stat-label { font-size: 13px; color: var(--eg-text-muted); font-weight: 500; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--eg-text); letter-spacing: -.02em; }
.stat-value span { font-size: 13px; font-weight: 500; color: var(--eg-text-muted); }
.stat-delta { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.stat-delta.up { color: #16a34a; }
.stat-delta.down { color: #dc2626; }

.quick-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.quick-action-card {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg); padding: 20px; display: flex;
  align-items: center; gap: 12px; cursor: pointer; text-decoration: none;
  color: var(--eg-text); transition: box-shadow .15s, transform .15s;
}
.quick-action-card:hover { box-shadow: var(--eg-shadow-md); transform: translateY(-1px); text-decoration: none; color: var(--eg-text); }
.qa-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.qa-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.qa-desc { font-size: 12px; color: var(--eg-text-muted); line-height: 1.3; }
.qa-arrow { margin-left: auto; color: var(--eg-text-soft); font-size: 16px; }

.dashboard-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; }
.dash-section-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.dash-section-title a { font-size: 13px; font-weight: 500; color: var(--eg-text-muted); text-decoration: none; }
.dash-section-title a:hover { color: var(--eg-purple); }

/* Activity list */
.activity-card {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg); padding: 20px; box-shadow: var(--eg-shadow);
}
.activity-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--eg-border-soft); }
.activity-item:last-child { border-bottom: none; }
.activity-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.activity-info { flex: 1; }
.activity-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.activity-meta { font-size: 12px; color: var(--eg-text-muted); }
.activity-time { font-size: 12px; color: var(--eg-text-soft); white-space: nowrap; }
.activity-more-btn { width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; color: var(--eg-text-muted); border-radius: 6px; }
.activity-more-btn:hover { background: var(--eg-border-soft); }

/* Credits usage chart */
.credits-chart-card {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg); padding: 20px; box-shadow: var(--eg-shadow); margin-bottom: 14px;
}
.credits-used-num { font-size: 28px; font-weight: 700; color: var(--eg-text); margin-bottom: 4px; }
.credits-used-label { font-size: 13px; color: var(--eg-text-muted); margin-bottom: 14px; }
.mini-chart { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.mini-bar { flex: 1; border-radius: 4px 4px 0 0; background: rgba(118,92,255,.2); min-width: 0; transition: background .15s; }
.mini-bar.today { background: var(--eg-purple); }
.chart-labels { display: flex; gap: 6px; margin-top: 4px; }
.chart-label { flex: 1; text-align: center; font-size: 10px; color: var(--eg-text-soft); }
.chart-delta { font-size: 12px; margin-top: 8px; }
.chart-delta.down { color: #dc2626; }

/* Models grid */
.models-card {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg); padding: 20px; box-shadow: var(--eg-shadow);
}
.models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.model-item {
  display: flex; align-items: center; gap: 8px; padding: 10px;
  border: 1px solid var(--eg-border); border-radius: 10px;
}
.model-logo { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.model-info .model-name { font-size: 13px; font-weight: 600; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
.status-dot.active { background: #16a34a; }
.model-status { font-size: 11px; color: var(--eg-text-muted); display: flex; align-items: center; }

/* ================================================
   PLANS PAGE
   ================================================ */
.plans-grid { display: grid; grid-template-columns: 1fr 1fr 300px; gap: 22px; align-items: start; }
.plan-card {
  background: var(--eg-white); border: 1.5px solid var(--eg-border);
  border-radius: var(--eg-radius-xl); padding: 28px; box-shadow: var(--eg-shadow);
  position: relative;
}
.plan-card.recommended {
  border-color: var(--eg-purple);
  box-shadow: 0 0 0 3px rgba(118,92,255,.1), var(--eg-shadow-lg);
}
.plan-recommended-badge {
  position: absolute; top: -12px; right: 20px;
  background: var(--eg-gradient); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 12px;
  border-radius: var(--eg-radius-full); display: flex; align-items: center; gap: 5px;
}
.plan-icon-wrap {
  width: 52px; height: 52px; border-radius: var(--eg-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 14px;
}
.plan-icon-wrap.pink { background: rgba(236,47,152,.1); }
.plan-icon-wrap.purple { background: rgba(118,92,255,.1); }
.plan-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.plan-subtitle { font-size: 13px; color: var(--eg-text-muted); margin-bottom: 18px; }
.plan-price { font-size: 36px; font-weight: 800; background: var(--eg-gradient); -webkit-background-clip: text; color: transparent; margin-bottom: 4px; }
.plan-price span { font-size: 15px; font-weight: 500; color: var(--eg-text-muted); }
.plan-equiv { display: inline-block; background: rgba(118,92,255,.08); color: var(--eg-purple); border-radius: var(--eg-radius-full); padding: 4px 12px; font-size: 12px; font-weight: 600; margin-bottom: 20px; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.plan-features li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--eg-text); }
.plan-features li .check,
.plan-features li .check-rec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.plan-btn {
  width: 100%; padding: 13px; border: none; border-radius: var(--eg-radius);
  background: var(--eg-gradient); color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity .15s, transform .15s;
  box-shadow: 0 4px 14px rgba(118,92,255,.3);
}
.plan-btn:hover { opacity: .9; transform: translateY(-1px); }

/* Credits sidebar card */
.credits-sidebar-card {
  background: var(--eg-white); border: 1.5px solid var(--eg-border);
  border-radius: var(--eg-radius-xl); padding: 24px; box-shadow: var(--eg-shadow);
}
.credits-sidebar-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.credits-big-num { font-size: 36px; font-weight: 800; color: var(--eg-purple); margin-bottom: 2px; }
.credits-avail-label { font-size: 13px; color: var(--eg-text-muted); margin-bottom: 16px; }
.credits-history-link { font-size: 13px; color: var(--eg-purple); text-decoration: none; display: flex; align-items: center; gap: 4px; margin-bottom: 20px; }
.credits-info-title { font-size: 13px; font-weight: 600; color: var(--eg-text-muted); margin-bottom: 10px; }
.credits-usage-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.cu-item { display: flex; align-items: center; gap: 10px; }
.cu-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.cu-icon.pink { background: rgba(236,47,152,.1); }
.cu-icon.purple { background: rgba(118,92,255,.1); }
.cu-icon.blue { background: rgba(59,130,246,.1); }
.cu-icon.teal { background: rgba(20,184,166,.1); }
.cu-text { flex: 1; }
.cu-name { font-size: 13px; font-weight: 600; }
.cu-cost { font-size: 12px; color: var(--eg-text-muted); }
.view-all-link { font-size: 13px; color: var(--eg-purple); text-decoration: none; display: flex; align-items: center; gap: 4px; }

/* Trust badges */
.trust-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.trust-badge { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--eg-white); border: 1px solid var(--eg-border); border-radius: var(--eg-radius); }
.tb-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tb-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.tb-desc { font-size: 12px; color: var(--eg-text-muted); line-height: 1.3; }

/* ================================================
   ADMIN PANEL
   ================================================ */
.admin-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }

.admin-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.admin-main-grid > * {
  min-width: 0;
}

.admin-right-panel {
  min-width: 0;
  overflow: visible;
}

@media (min-width: 1600px) {
  .admin-main-grid {
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: start;
  }
}

.admin-table-card {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg); overflow: hidden; box-shadow: var(--eg-shadow);
}
.table-toolbar {
  padding: 16px 20px; display: flex; align-items: center;
  gap: 10px; border-bottom: 1px solid var(--eg-border); flex-wrap: wrap;
}
.search-input-wrap { position: relative; }
.search-input {
  padding: 8px 12px 8px 34px; border: 1.5px solid var(--eg-border);
  border-radius: 10px; font-size: 13px; background: var(--eg-bg);
  outline: none; width: 220px; font-family: var(--font); transition: border-color .12s;
}
.search-input:focus { border-color: var(--eg-purple); }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--eg-text-soft); font-size: 14px; }
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-tab {
  padding: 7px 14px; border-radius: var(--eg-radius-full); font-size: 13px;
  font-weight: 500; cursor: pointer; border: 1.5px solid var(--eg-border);
  background: var(--eg-white); color: var(--eg-text-muted); transition: all .12s; font-family: var(--font);
}
.filter-tab.active { border-color: var(--eg-purple); color: var(--eg-purple); background: rgba(118,92,255,.06); font-weight: 600; }
.filter-tab:hover:not(.active) { border-color: var(--eg-border); background: var(--eg-border-soft); }
.sort-select {
  padding: 7px 12px; border: 1.5px solid var(--eg-border); border-radius: 10px;
  font-size: 13px; background: var(--eg-white); color: var(--eg-text);
  outline: none; cursor: pointer; font-family: var(--font); margin-left: auto;
}
.download-btn {
  width: 34px; height: 34px; border: 1.5px solid var(--eg-border);
  border-radius: 10px; background: var(--eg-white); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--eg-text-muted);
  transition: all .12s;
}
.download-btn:hover { border-color: var(--eg-purple); color: var(--eg-purple); }

.users-table { width: 100%; border-collapse: collapse; }
.users-table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--eg-text-muted);
  padding: 10px 16px; border-bottom: 1px solid var(--eg-border); background: var(--eg-bg);
  text-transform: uppercase; letter-spacing: .04em;
}
.users-table td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--eg-border-soft); vertical-align: middle; }
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: var(--eg-border-soft); }

.user-cell { display: flex; align-items: center; gap: 10px; }
.user-avatar-table {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.user-name-table { font-weight: 600; font-size: 13px; }

.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--eg-radius-full);
  font-size: 12px; font-weight: 600;
}
.status-badge.active { background: rgba(22,163,74,.1); color: #16a34a; }
.status-badge.inactive { background: rgba(107,114,128,.1); color: #6b7280; }
.status-badge.pending { background: rgba(234,179,8,.1); color: #d97706; }

.plan-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--eg-radius-full);
  font-size: 12px; font-weight: 600;
}
.plan-badge.anual { background: rgba(118,92,255,.1); color: var(--eg-purple); }
.plan-badge.mensual { background: rgba(236,47,152,.1); color: var(--eg-pink); }
.plan-badge.noplan { background: var(--eg-border-soft); color: var(--eg-text-muted); }

.action-btn {
  padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1.5px solid; transition: all .12s; white-space: nowrap; font-family: var(--font);
}
.action-btn.mensual { border-color: var(--eg-pink); color: var(--eg-pink); background: rgba(236,47,152,.05); }
.action-btn.mensual:hover { background: var(--eg-pink); color: #fff; }
.action-btn.anual { border-color: var(--eg-purple); color: var(--eg-purple); background: rgba(118,92,255,.05); }
.action-btn.anual:hover { background: var(--eg-purple); color: #fff; }
.action-btn.view { border-color: var(--eg-border); color: var(--eg-text-muted); background: transparent; }
.action-btn.view:hover { border-color: var(--eg-text-muted); color: var(--eg-text); }
.action-menu-btn { width: 26px; height: 26px; border: none; background: transparent; cursor: pointer; border-radius: 6px; color: var(--eg-text-muted); display: inline-flex; align-items: center; justify-content: center; }
.action-menu-btn:hover { background: var(--eg-border-soft); }

.table-actions-cell { display: flex; align-items: center; gap: 6px; }

.pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--eg-border); }
.page-info { font-size: 13px; color: var(--eg-text-muted); }
.page-btns { display: flex; gap: 4px; }
.page-btn {
  width: 32px; height: 32px; border: 1px solid var(--eg-border); border-radius: 8px;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: var(--eg-white); color: var(--eg-text-muted); transition: all .12s; font-family: var(--font);
}
.page-btn:hover { border-color: var(--eg-purple); color: var(--eg-purple); }
.page-btn.active { background: var(--eg-purple); color: #fff; border-color: var(--eg-purple); }

/* Admin right panel */
.admin-right-panel { display: flex; flex-direction: column; gap: 14px; }
.quick-assign-card, .recent-activity-card {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg); padding: 18px; box-shadow: var(--eg-shadow);
}
.qa-card-title { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.qa-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border: 1px solid var(--eg-border); border-radius: 10px;
  margin-bottom: 8px; cursor: pointer; transition: border-color .12s;
}
.qa-row:hover { border-color: var(--eg-purple); }
.qa-row-icon { font-size: 16px; margin-right: 8px; }
.qa-row-label { font-size: 13px; font-weight: 500; color: var(--eg-text-muted); }
.qa-row-num { font-size: 18px; font-weight: 700; color: var(--eg-text); }
.qa-row-pending { color: var(--eg-pink); }
.qa-row-arrow { color: var(--eg-text-soft); font-size: 14px; margin-left: auto; }

.ra-item { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--eg-border-soft); }
.ra-item:last-child { border-bottom: none; }
.ra-avatar { width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ra-text { flex: 1; font-size: 12px; color: var(--eg-text-muted); line-height: 1.4; }
.ra-text strong { color: var(--eg-text); font-weight: 600; }
.ra-time { font-size: 11px; color: var(--eg-text-soft); white-space: nowrap; }
.ra-view-all { font-size: 13px; color: var(--eg-purple); text-decoration: none; margin-top: 8px; display: block; }

/* ================================================
   IMAGES PAGE
   ================================================ */
.images-grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; }
.image-gen-panel {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg); padding: 24px; box-shadow: var(--eg-shadow); height: fit-content;
}
.gen-panel-title { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.form-group { margin-bottom: 16px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--eg-text-muted); margin-bottom: 6px; display: block; }
.form-textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--eg-border);
  border-radius: var(--eg-radius); font-size: 14px; font-family: var(--font);
  resize: none; outline: none; min-height: 100px; transition: border-color .12s; background: var(--eg-white);
}
.form-textarea:focus { border-color: var(--eg-purple); }
.form-select {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--eg-border);
  border-radius: var(--eg-radius); font-size: 14px; font-family: var(--font);
  outline: none; background: var(--eg-white); cursor: pointer; transition: border-color .12s;
}
.form-select:focus { border-color: var(--eg-purple); }
.mode-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.mode-tab {
  flex: 1; padding: 9px; border-radius: var(--eg-radius); border: 1.5px solid var(--eg-border);
  font-size: 13px; font-weight: 500; cursor: pointer; text-align: center;
  background: var(--eg-white); color: var(--eg-text-muted); transition: all .12s; font-family: var(--font);
}
.mode-tab.active { border-color: var(--eg-purple); color: var(--eg-purple); background: rgba(118,92,255,.06); font-weight: 600; }
.generate-btn {
  width: 100%; padding: 13px; border: none; border-radius: var(--eg-radius);
  background: var(--eg-gradient); color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity .15s; box-shadow: 0 4px 14px rgba(118,92,255,.3); font-family: var(--font);
}
.generate-btn:hover { opacity: .9; }
.generate-btn:disabled { opacity: .5; cursor: not-allowed; }
.credits-note { font-size: 12px; color: var(--eg-text-muted); text-align: center; margin-top: 8px; }
.credits-note strong { color: var(--eg-purple); }

.images-gallery-panel { display: flex; flex-direction: column; }
.gallery-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.gallery-header h3 { font-size: 16px; font-weight: 700; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery-item {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg); overflow: hidden; box-shadow: var(--eg-shadow);
  transition: box-shadow .15s, transform .15s;
}
.gallery-item:hover { box-shadow: var(--eg-shadow-md); transform: translateY(-2px); }
.gallery-img-wrap { aspect-ratio: 1; background: var(--eg-bg); overflow: hidden; position: relative; }
.gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--eg-text-soft); font-size: 32px; }
.gallery-item-info { padding: 10px 12px; }
.gallery-item-prompt { font-size: 12px; color: var(--eg-text-muted); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-item-meta { font-size: 11px; color: var(--eg-text-soft); display: flex; align-items: center; justify-content: space-between; }
.gallery-loading {
  aspect-ratio: 1; background: var(--eg-border-soft); border-radius: var(--eg-radius-lg);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 8px; color: var(--eg-text-muted); font-size: 13px;
  border: 2px dashed var(--eg-border);
}
.spinner { width: 28px; height: 28px; border: 3px solid var(--eg-border); border-top-color: var(--eg-purple); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================
   AUTH PAGES
   ================================================ */
body.auth-page {
  background: var(--eg-bg); overflow: auto;
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.auth-container { width: 100%; max-width: 420px; padding: 24px; }
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo img { width: 48px; height: 48px; filter: drop-shadow(0 4px 12px rgba(118,92,255,.3)); }
.auth-logo h1 { font-size: 22px; font-weight: 800; margin-top: 10px; letter-spacing: -.02em; }
.auth-logo h1 strong { background: var(--eg-gradient); -webkit-background-clip: text; color: transparent; }
.auth-card {
  background: var(--eg-white); border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-xl); padding: 32px; box-shadow: var(--eg-shadow-lg);
}
.auth-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.auth-subtitle { font-size: 14px; color: var(--eg-text-muted); margin-bottom: 24px; }
.auth-form-group { margin-bottom: 16px; }
.auth-label { font-size: 13px; font-weight: 600; color: var(--eg-text); display: block; margin-bottom: 6px; }
.auth-input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--eg-border);
  border-radius: 10px; font-size: 14px; font-family: var(--font);
  outline: none; transition: border-color .12s; background: var(--eg-white);
}
.auth-input:focus { border-color: var(--eg-purple); box-shadow: 0 0 0 3px rgba(118,92,255,.08); }
.auth-phone-row { display: grid; grid-template-columns: 100px 1fr; gap: 8px; }
.auth-btn {
  width: 100%; padding: 13px; border: none; border-radius: 10px;
  background: var(--eg-gradient); color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 8px; transition: opacity .15s; font-family: var(--font);
  box-shadow: 0 4px 14px rgba(118,92,255,.3);
}
.auth-btn:hover { opacity: .9; }
.auth-footer { text-align: center; margin-top: 20px; font-size: 13px; color: var(--eg-text-muted); }
.auth-footer a { color: var(--eg-purple); text-decoration: none; font-weight: 600; }
.auth-error { background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.2); color: #dc2626; padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; }

/* ================================================
   SUPER ADMIN LAYOUT
   ================================================ */
.admin-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 100vh;
}
/* Super admin shares the same light EspacioGPT layout as the mockups */
.admin-sidebar { background: rgba(255,255,255,.96); color: var(--eg-text); }
.admin-sidebar .sidebar-logo .logo-title { color: var(--eg-text); }
.admin-sidebar .sidebar-logo .logo-sub { color: var(--eg-text-muted); }
.admin-sidebar .nav-item { color: var(--eg-text-muted); }
.admin-sidebar .nav-item:hover { background: var(--eg-border-soft); color: var(--eg-text); }
.admin-sidebar .nav-item.active { background: var(--eg-border-soft); color: var(--eg-text); }
.admin-sidebar .sidebar-header { border-color: transparent; }
.admin-sidebar .sidebar-footer { border-color: var(--eg-border-soft); }
.admin-sidebar .upgrade-banner { background: var(--eg-gradient-soft); border-color: rgba(118,92,255,.2); }
.admin-sidebar .upgrade-text h4 { color: var(--eg-purple); }
.admin-sidebar .upgrade-text p { color: var(--eg-text-muted); }

/* Scrollbars */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--eg-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--eg-text-soft); }

/* Utilities */
.hidden { display: none !important; }
.text-pink { color: var(--eg-pink); }
.text-purple { color: var(--eg-purple); }
.text-muted { color: var(--eg-text-muted); }
.fw-700 { font-weight: 700; }
.mt-auto { margin-top: auto; }

/* Responsive */
@media (max-width: 1100px) {
  :root { --sidebar-w: 220px; }
  .stats-grid, .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .plans-grid { grid-template-columns: 1fr 1fr; }
  .plans-grid .credits-sidebar-card { grid-column: 1 / 3; }
}
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar { position: fixed; left: -260px; width: 260px; transition: left .25s; z-index: 100; }
  .sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  .sidebar-close { display: flex; }
  .menu-toggle { display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 20px; color: var(--eg-text-muted); }
  .app-layout { grid-template-columns: 1fr; }
  .topbar { grid-column: 1; }
  .main-content { grid-column: 1; }
  .page-content { padding: 16px; }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .images-grid { grid-template-columns: 1fr; }
  .admin-main-grid { grid-template-columns: 1fr; }
  .suggestion-cards { grid-template-columns: repeat(2, 1fr); }
  .feature-cards { grid-template-columns: 1fr; }
  .trust-badges { grid-template-columns: repeat(2, 1fr); }
  .models-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .whatsapp-fab { bottom: 16px; right: 16px; }
}


/* ===== Fase 3: ajuste visual definitivo tipo mockup ===== */
.sidebar-logo img.logo-img{background:var(--eg-gradient)!important;border-radius:50%!important;padding:7px!important;}
.sidebar:after{content:"";position:absolute;right:-1px;top:0;height:100%;width:1px;background:linear-gradient(to bottom,transparent,var(--eg-border),transparent);}
.nav-item span:not(.nav-icon):not(.nav-badge){letter-spacing:-.01em;}
.topbar .credits-pill{border-radius:13px;box-shadow:var(--eg-shadow);padding:13px 18px;background:#fff;}
.topbar .topbar-btn{font-weight:600;color:#111827;}
.topbar .user-pill{border-radius:18px;border:0;box-shadow:none;background:transparent;padding:4px 0 4px 8px;}
.user-avatar-sm{width:42px;height:42px;background:#fff;color:#111;border:1px solid var(--eg-border);font-size:15px;position:relative;}
.user-avatar-sm:after{content:"";position:absolute;right:-1px;bottom:2px;width:10px;height:10px;background:#19d3a2;border:2px solid #fff;border-radius:50%;}
.stat-card,.quick-action-card,.activity-card,.usage-card,.models-card,.plan-card,.credits-sidebar-card,.trust-badge,.admin-table-card,.quick-assign-card,.recent-activity-card{box-shadow:var(--eg-shadow);border-color:#ececf2;}
.stat-card:hover,.quick-action-card:hover,.plan-card:hover,.model-item:hover,.suggestion-card:hover{box-shadow:var(--eg-shadow-md);}
.qa-icon.pink,.fc-icon.pink,.stat-card-icon.pink{background:linear-gradient(135deg,rgba(236,47,152,.18),rgba(236,47,152,.05));color:var(--eg-pink);}
.qa-icon.purple,.fc-icon.purple,.stat-card-icon.purple{background:linear-gradient(135deg,rgba(118,92,255,.18),rgba(118,92,255,.05));color:var(--eg-purple);}
.qa-icon.blue,.fc-icon.blue,.stat-card-icon.blue{background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(59,130,246,.05));color:#3b82f6;}
.qa-icon.teal,.fc-icon.teal,.stat-card-icon.teal{background:linear-gradient(135deg,rgba(20,184,166,.18),rgba(20,184,166,.05));color:#14b8a6;}
.model-logo.openai{background:#fff;color:#111;border:1px solid var(--eg-border);}
.model-logo.gemini{background:linear-gradient(135deg,#e0f2fe,#eef2ff);color:#3b82f6;}
.model-logo.seedance{background:#111;color:#fff;}
.model-logo.deepseek{background:linear-gradient(135deg,#eef2ff,#dbeafe);color:#2563eb;}
.sidebar-admin-chip{font-size:13px;color:var(--eg-text-muted);padding:13px 14px;border:1px solid var(--eg-border);border-radius:14px;background:#fff;margin:6px 0 12px;}
.mock-collapser{position:absolute;right:-18px;top:28px;width:36px;height:36px;border:1px solid var(--eg-border);border-radius:12px;background:#fff;box-shadow:var(--eg-shadow);display:flex;align-items:center;justify-content:center;color:#111;font-weight:800;z-index:5;}

@media (min-width: 1280px){
  .page-content{padding-left:54px;padding-right:54px;}
  .chat-input-inner,.message-group,.suggestions-section,.feature-cards{max-width:840px;}
}


/* ===== Auditoría final: SaaS premium coherente ===== */
.auth-success{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.20);color:#15803d;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;}
.nav-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:currentColor;}
.nav-icon svg,.conv-icon svg,.conv-search-icon svg{width:18px;height:18px;display:block;}
.conv-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--eg-text-soft);}
.conv-search-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
.activity-icon svg,.qa-icon svg,.fc-icon svg,.stat-card-icon svg{width:22px;height:22px;display:block;}
.history-tabs{display:flex;gap:8px;margin:18px 0 20px;flex-wrap:wrap;}
.hist-tab{border:1px solid var(--eg-border);background:#fff;color:var(--eg-text-muted);border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer;transition:.15s;font-family:var(--font);}
.hist-tab.active,.hist-tab:hover{background:var(--eg-gradient);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(118,92,255,.18);}
.history-panel{display:none;}.history-panel.active{display:block;}
.history-icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.history-icon.pink{background:rgba(236,47,152,.10);color:var(--eg-pink);}.history-icon.purple{background:rgba(118,92,255,.10);color:var(--eg-purple);}.history-icon.blue{background:rgba(59,130,246,.10);color:#2563eb;}
.gallery-card{background:#fff;border:1px solid var(--eg-border);border-radius:18px;padding:12px;box-shadow:var(--eg-shadow);}.gallery-card h3{font-size:14px;margin:10px 0 4px;}.gallery-card p{font-size:12px;color:var(--eg-text-muted);}
.settings-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;}.settings-card{background:#fff;border:1px solid var(--eg-border);border-radius:22px;padding:24px;box-shadow:var(--eg-shadow);}.settings-card h2{font-size:18px;margin-bottom:6px;}.settings-card p{color:var(--eg-text-muted);font-size:14px;margin-bottom:18px;}.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}.danger-zone{align-self:start;}.btn-outline{display:inline-flex;border:1.5px solid var(--eg-purple);color:var(--eg-purple);border-radius:999px;padding:10px 16px;text-decoration:none;font-weight:700;}.btn-outline:hover{background:var(--eg-purple);color:#fff;text-decoration:none;}
.coming-soon-card{background:#fff;border:1px solid var(--eg-border);border-radius:28px;padding:42px;box-shadow:var(--eg-shadow);text-align:center;max-width:720px;margin:28px auto;}.cs-icon{width:86px;height:86px;border-radius:28px;background:var(--eg-gradient-soft);color:var(--eg-purple);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}.coming-soon-card h2{font-size:28px;margin-bottom:8px;}.coming-soon-card p{color:var(--eg-text-muted);line-height:1.6;max-width:520px;margin:0 auto 22px;}
.btn-grant-monthly{border:1.5px solid var(--eg-pink);color:var(--eg-pink);background:transparent;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all .12s;white-space:nowrap;}.btn-grant-monthly:hover{background:var(--eg-pink);color:#fff;}
.btn-grant-annual{border:1.5px solid var(--eg-purple);color:var(--eg-purple);background:transparent;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all .12s;white-space:nowrap;}.btn-grant-annual:hover{background:var(--eg-purple);color:#fff;}
.model-logo.openai{background:#000!important;color:#fff!important;border:0!important;font-weight:800;}.model-logo.gemini{background:linear-gradient(135deg,#4285F4,#34A853,#FBBC05,#EA4335)!important;color:#fff!important;font-weight:800;}.model-logo.seedance{background:#765cff!important;color:#fff!important;font-weight:800;}.model-logo.deepseek{background:#1e90ff!important;color:#fff!important;font-weight:800;}
@media(max-width:900px){.settings-grid{grid-template-columns:1fr}.form-grid-2{grid-template-columns:1fr}}

.plan-badge-icon{display:inline-flex;vertical-align:-2px;margin-right:4px}.qa-row-icon svg,.search-icon svg{display:block}


/* Pixel-perfect visual audit refinements */
.sg-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sg-icon svg { width: 16px; height: 16px; }
.credits-pill .gift-icon,
.upgrade-banner .upgrade-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.credits-pill .gift-icon svg { width: 16px; height: 16px; }
.upgrade-banner .upgrade-icon svg { width: 28px; height: 28px; }
.plan-recommended-badge svg { flex-shrink: 0; }
.plan-features li .check svg,
.plan-features li .check-rec svg { display: block; }
.tb-icon svg { display: block; }


/* ================================================
   MODAL PLANES
   ================================================ */
#planModal { display: none; }
#planModal.open { display: flex !important; }
#planModal > div { animation: modalIn .2s cubic-bezier(.34,1.56,.64,1); }
@keyframes modalIn {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* ================================================
   HISTORY EMPTY STATE
   ================================================ */
.history-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 24px; text-align: center;
}
.history-empty-icon {
  width: 72px; height: 72px; border-radius: 20px; margin-bottom: 20px;
  background: linear-gradient(135deg,rgba(118,92,255,.12),rgba(236,47,152,.08));
  display: flex; align-items: center; justify-content: center;
}
.history-empty h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--eg-text); }
.history-empty p  { font-size: 14px; color: var(--eg-text-muted); line-height: 1.6; max-width: 300px; margin: 0 0 24px; }
.history-empty-cta {
  background: var(--eg-gradient); color: #fff; border-radius: 12px;
  padding: 11px 24px; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: opacity .15s;
}
.history-empty-cta:hover { opacity: .88; }

/* ================================================
   VIDEO: BANNER SIN API
   ================================================ */
.video-api-notice {
  background: linear-gradient(135deg,rgba(118,92,255,.06),rgba(236,47,152,.04));
  border: 1.5px solid rgba(118,92,255,.2);
  border-radius: 16px; padding: 20px 24px;
  margin-bottom: 24px; display: flex; align-items: flex-start; gap: 16px;
}


/* ============================================================
   HOTFIX FINAL /SUPER/USERS — proporción real de pantalla
   Fuerza una sola columna en laptops y zoom normal/alto para que
   el panel derecho no se corte. En monitores muy anchos vuelve al costado.
   ============================================================ */
.admin-main-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.admin-main-grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
.admin-table-card,
.admin-right-panel,
.quick-assign-card,
.recent-activity-card {
  min-width: 0 !important;
  max-width: 100% !important;
}
.admin-right-panel {
  overflow: visible !important;
}
.admin-table-card > div,
.admin-table-card [style*="overflow-x"] {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
@media (min-width: 1600px) {
  .admin-main-grid {
    grid-template-columns: minmax(0, 1fr) 270px !important;
    align-items: start !important;
  }
}
@media (max-width: 1599px) {
  .admin-right-panel {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 14px !important;
  }
}


/* ============================================================
   HOTFIX FINAL /SUPER/PLANS — proporción real de pantalla
   Evita que la pantalla de planes se corte horizontalmente en
   laptops, zoom normal/alto y resoluciones medianas.
   ============================================================ */
body.app-body,
.app-layout,
.main-content {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.super-plans-page,
.super-plans-page *,
#plansForm,
#plansForm * {
  box-sizing: border-box !important;
}

.super-plans-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.super-plans-page .plans-summary-grid,
.super-plans-page .plans-cards-grid,
.super-plans-page .plans-credit-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.super-plans-page .plans-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

.super-plans-page .plans-cards-grid {
  grid-template-columns: 1fr !important;
}

.super-plans-page .plans-credit-grid {
  grid-template-columns: 1fr !important;
}

.super-plans-page .stat-card,
.super-plans-page .plan-editor-card,
.super-plans-page .credits-cost-card,
.super-plans-page .credit-cost-item,
.super-plans-page .features-box {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.super-plans-page input[type="number"],
.super-plans-page input[type="text"],
.super-plans-page select,
.super-plans-page textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.super-plans-page .credit-input-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

.super-plans-page .plans-actions {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  max-width: 100% !important;
}

@media (min-width: 1280px) {
  .super-plans-page .plans-credit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1500px) {
  .super-plans-page .plans-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1279px) {
  .super-plans-page .plans-credit-grid {
    grid-template-columns: 1fr !important;
  }

  .super-plans-page .plans-actions button {
    flex: 1 1 220px !important;
  }
}

/* ============================================================
   HOTFIX FINAL /SUPER/COSTS — estabilidad premium responsive
   Organiza costos IA sin desbordes en laptop, zoom alto y pantallas medianas.
   ============================================================ */
.super-costs-page,
.super-costs-page * {
  box-sizing: border-box !important;
}

.super-costs-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.costs-hero {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
}

.costs-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(118,92,255,.10), rgba(236,47,152,.08)) !important;
  color: var(--eg-purple) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.costs-hero h1 {
  font-size: clamp(25px, 2.3vw, 36px) !important;
  font-weight: 850 !important;
  letter-spacing: -.04em !important;
  margin: 0 0 6px !important;
  color: var(--eg-text) !important;
}

.costs-hero h1 strong {
  background: var(--eg-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.costs-hero p {
  margin: 0 !important;
  color: var(--eg-text-muted) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.costs-period-form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  background: #fff !important;
  border: 1px solid var(--eg-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--eg-shadow) !important;
  padding: 10px 12px !important;
  min-width: 0 !important;
}

.costs-period-form label {
  color: var(--eg-text-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.costs-period-form input[type="month"] {
  min-width: 155px !important;
  max-width: 190px !important;
  border: 0 !important;
  outline: none !important;
  background: #f8f7ff !important;
  color: var(--eg-text) !important;
  border-radius: 12px !important;
  padding: 9px 12px !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
}

.costs-period-form span {
  color: var(--eg-purple) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.costs-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.cost-metric-card {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(229,231,235,.95) !important;
  border-radius: 20px !important;
  padding: 20px 22px !important;
  box-shadow: var(--eg-shadow) !important;
}

.cost-metric-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 3px !important;
  background: currentColor !important;
  opacity: .85 !important;
}

.cost-metric-card.tone-red { color: #ef4444 !important; }
.cost-metric-card.tone-amber { color: #f59e0b !important; }
.cost-metric-card.tone-purple { color: var(--eg-purple) !important; }
.cost-metric-card.tone-teal { color: #14b8a6 !important; }

.cost-metric-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, currentColor 12%, white) !important;
  flex: 0 0 auto !important;
}

.cost-metric-icon svg {
  width: 23px !important;
  height: 23px !important;
}

.cost-metric-body {
  min-width: 0 !important;
  flex: 1 !important;
}

.cost-metric-value {
  font-size: clamp(22px, 2vw, 30px) !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
  color: currentColor !important;
  margin-bottom: 7px !important;
  overflow-wrap: anywhere !important;
}

.cost-metric-label {
  color: var(--eg-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-bottom: 2px !important;
}

.cost-metric-sub {
  color: var(--eg-text-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

.costs-insight-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  background: linear-gradient(135deg, rgba(118,92,255,.08), rgba(236,47,152,.05)), #fff !important;
  border: 1px solid rgba(118,92,255,.16) !important;
  border-radius: 22px !important;
  padding: 18px 22px !important;
  box-shadow: var(--eg-shadow) !important;
  margin-bottom: 20px !important;
  min-width: 0 !important;
}

.costs-insight-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: var(--eg-purple) !important;
  border: 1px solid rgba(118,92,255,.18) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.costs-insight-text h2 {
  margin: 0 0 4px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  color: var(--eg-text) !important;
}

.costs-insight-text p {
  margin: 0 !important;
  color: var(--eg-text-muted) !important;
  line-height: 1.45 !important;
  font-size: 13px !important;
}

.costs-insight-text strong {
  color: var(--eg-text) !important;
}

.costs-insight-stats {
  display: grid !important;
  grid-template-columns: repeat(3, auto) !important;
  gap: 10px !important;
}

.costs-insight-stats div {
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(229,231,235,.8) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  min-width: 104px !important;
  text-align: center !important;
}

.costs-insight-stats span {
  display: block !important;
  color: var(--eg-purple) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}

.costs-insight-stats small {
  display: block !important;
  color: var(--eg-text-muted) !important;
  font-size: 11px !important;
  margin-top: 2px !important;
}

.costs-tables-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  min-width: 0 !important;
}

@media (min-width: 1500px) {
  .costs-tables-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.cost-table-card {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid var(--eg-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--eg-shadow) !important;
}

.cost-table-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--eg-border) !important;
  background: linear-gradient(135deg, #fff, #fbfbff) !important;
}

.cost-table-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.cost-table-title h2 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  color: var(--eg-text) !important;
}

.cost-table-title p {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  color: var(--eg-text-muted) !important;
}

.cost-table-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.cost-table-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.cost-table-icon.purple {
  color: var(--eg-purple) !important;
  background: rgba(118,92,255,.10) !important;
}

.cost-table-icon.pink {
  color: var(--eg-pink) !important;
  background: rgba(236,47,152,.10) !important;
}

.cost-table-pill {
  white-space: nowrap !important;
  border-radius: 999px !important;
  background: #f8f7ff !important;
  color: var(--eg-purple) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 7px 11px !important;
}

.cost-table-scroll {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.cost-premium-table {
  width: 100% !important;
  min-width: 620px !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}

.users-cost-table {
  min-width: 520px !important;
}

.cost-premium-table th {
  background: #f8f7ff !important;
  color: var(--eg-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  font-weight: 800 !important;
  border-bottom: 1px solid var(--eg-border) !important;
  padding: 12px 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.cost-premium-table td {
  color: var(--eg-text) !important;
  border-bottom: 1px solid var(--eg-border-soft) !important;
  padding: 13px 16px !important;
  vertical-align: middle !important;
}

.cost-premium-table tr:hover td {
  background: #fbfbff !important;
}

.provider-cell,
.cost-user-cell {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.provider-cell span,
.cost-user-cell > span {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  color: #fff !important;
  background: var(--eg-purple) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.provider-cell strong,
.cost-user-cell strong {
  display: block !important;
  color: var(--eg-text) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.cost-user-cell small {
  display: block !important;
  color: var(--eg-text-muted) !important;
  font-size: 11px !important;
  margin-top: 1px !important;
}

.money-cell {
  font-weight: 850 !important;
  color: #ef4444 !important;
  white-space: nowrap !important;
}

.cost-mini-bar {
  width: 92px !important;
  height: 5px !important;
  background: rgba(239,68,68,.10) !important;
  border-radius: 999px !important;
  margin-top: 6px !important;
  overflow: hidden !important;
}

.cost-mini-bar i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #f97316, #ef4444) !important;
}

.cost-empty-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 96px !important;
  color: var(--eg-text-muted) !important;
  font-weight: 650 !important;
  text-align: center !important;
}

@media (max-width: 960px) {
  .costs-hero {
    align-items: stretch !important;
  }

  .costs-period-form {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .costs-insight-card {
    grid-template-columns: 1fr !important;
  }

  .costs-insight-icon {
    display: none !important;
  }

  .costs-insight-stats {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .costs-metrics-grid {
    grid-template-columns: 1fr !important;
  }

  .cost-table-header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* ============================================================
   HOTFIX CHAT PREMIUM — Experiencia IA superior
   Mejora visual de /app/chat sin tocar lógica ni base de datos.
   ============================================================ */
body.app-body .chat-premium {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 92, 255, .14), transparent 26rem),
    radial-gradient(circle at 18% 18%, rgba(236, 47, 152, .10), transparent 22rem),
    radial-gradient(circle at 88% 22%, rgba(20, 184, 166, .09), transparent 22rem),
    linear-gradient(180deg, #fbfbff 0%, #f6f7ff 46%, #fafafd 100%);
}
body.app-body .chat-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(118,92,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,92,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 72%);
  opacity: .75;
}
body.app-body .chat-premium .chat-messages,
body.app-body .chat-premium .chat-input-area {
  position: relative;
  z-index: 1;
}
body.app-body .chat-premium .chat-messages {
  padding-top: 22px;
  padding-bottom: 18px;
}
body.app-body .chat-premium .chat-welcome {
  min-height: calc(100vh - 255px);
  padding-top: 10px;
}
body.app-body .welcome-orb-wrap {
  position: relative;
  width: 104px;
  height: 76px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.app-body .welcome-orb-glow {
  position: absolute;
  width: 104px;
  height: 64px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(118,92,255,.34), rgba(236,47,152,.18) 45%, transparent 74%);
  filter: blur(2px);
  animation: egChatGlow 3s ease-in-out infinite;
}
body.app-body .chat-premium .welcome-logo-wrap {
  position: relative;
  width: 74px;
  height: 74px;
  margin: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 48%),
    var(--eg-gradient);
  border: 1px solid rgba(255,255,255,.50);
  box-shadow: 0 22px 54px rgba(118,92,255,.28), 0 0 0 10px rgba(118,92,255,.05);
}
body.app-body .chat-premium .welcome-logo-wrap img {
  width: 48px;
  height: 48px;
}
body.app-body .welcome-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(118,92,255,.18);
  color: var(--eg-purple);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  margin-bottom: 14px;
}
body.app-body .chat-premium .chat-welcome h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.04;
  letter-spacing: -.05em;
  margin-bottom: 10px;
}
body.app-body .chat-premium .chat-welcome h2 strong {
  background: linear-gradient(135deg, #ec2f98 0%, #765cff 52%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.app-body .chat-premium .welcome-subtitle {
  font-size: 16px;
  max-width: 640px;
  line-height: 1.55;
  color: #5f6676;
  margin-bottom: 16px;
}
body.app-body .welcome-mini-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
}
body.app-body .welcome-mini-stats span {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.07);
  color: #4b5563;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(15,23,42,.045);
}
body.app-body .chat-premium .feature-cards {
  max-width: 940px;
  gap: 14px;
  margin-bottom: 28px;
}
body.app-body .chat-premium .feature-card {
  position: relative;
  overflow: hidden;
  min-height: 178px;
  padding: 22px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 44px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
body.app-body .chat-premium .feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.70), transparent 52%);
  opacity: .75;
  pointer-events: none;
}
body.app-body .chat-premium .feature-card::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  right: -48px;
  bottom: -56px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(118,92,255,.14), transparent 70%);
  transition: transform .25s ease, opacity .25s ease;
}
body.app-body .chat-premium .feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(118,92,255,.24);
  box-shadow: 0 26px 62px rgba(118,92,255,.16), inset 0 1px 0 rgba(255,255,255,.92);
}
body.app-body .chat-premium .feature-card:hover::after {
  transform: scale(1.22);
  opacity: 1;
}
body.app-body .chat-premium .feature-card h3,
body.app-body .chat-premium .feature-card p,
body.app-body .chat-premium .feature-card .fc-icon,
body.app-body .chat-premium .feature-card .fc-arrow {
  position: relative;
  z-index: 1;
}
body.app-body .chat-premium .fc-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(15,23,42,.06);
}
body.app-body .chat-premium .feature-card h3 {
  font-size: 16px;
  letter-spacing: -.02em;
}
body.app-body .chat-premium .feature-card p {
  font-size: 13.5px;
  line-height: 1.55;
}
body.app-body .chat-premium .fc-arrow {
  margin-top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(118,92,255,.09);
  color: var(--eg-purple);
  font-size: 18px;
}
body.app-body .chat-premium .suggestions-section {
  max-width: 940px;
}
body.app-body .chat-premium .suggestions-header {
  padding: 0 4px;
}
body.app-body .chat-premium .suggestions-header h3 {
  font-size: 15px;
  letter-spacing: -.01em;
}
body.app-body .chat-premium .suggestions-header a {
  color: var(--eg-purple);
  font-weight: 800;
}
body.app-body .chat-premium .suggestion-cards {
  gap: 10px;
}
body.app-body .chat-premium .suggestion-card {
  min-height: 78px;
  border-radius: 18px;
  padding: 16px 16px;
  background: rgba(255,255,255,.82);
  border-color: rgba(15,23,42,.07);
  box-shadow: 0 12px 30px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.85);
}
body.app-body .chat-premium .suggestion-card:hover {
  transform: translateY(-3px);
  border-color: rgba(118,92,255,.26);
  box-shadow: 0 18px 38px rgba(118,92,255,.13);
}
body.app-body .chat-premium .sg-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(118,92,255,.075);
}
body.app-body .chat-premium .sg-text {
  font-weight: 800;
}
body.app-body .chat-premium .message-group {
  max-width: 900px;
}
body.app-body .chat-premium .msg-row {
  animation: egChatMessageIn .22s ease both;
}
body.app-body .chat-premium .msg-avatar {
  width: 38px;
  height: 38px;
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
body.app-body .chat-premium .ai-avatar {
  background: linear-gradient(135deg, #ec2f98, #765cff 60%, #3b82f6);
}
body.app-body .chat-premium .user-avatar-msg {
  background: #111827;
}
body.app-body .chat-premium .msg-bubble {
  border-radius: 20px;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.7;
  box-shadow: 0 12px 32px rgba(15,23,42,.075);
}
body.app-body .chat-premium .ai-bubble {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.08);
  border-top-left-radius: 8px;
}
body.app-body .chat-premium .user-bubble {
  background: linear-gradient(135deg, #111827, #1f2937);
  border-top-right-radius: 8px;
}
body.app-body .chat-premium .msg-action-btn {
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 800;
  background: rgba(118,92,255,.06);
  border-color: rgba(118,92,255,.18);
  color: var(--eg-purple);
}
body.app-body .chat-premium .msg-action-btn:hover {
  background: var(--eg-purple);
  color: #fff;
  border-color: var(--eg-purple);
}
body.app-body .typing-premium-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px !important;
}
body.app-body .typing-premium-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
body.app-body .typing-premium-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--eg-purple);
  animation: blink 1.2s infinite;
  display: block;
}
body.app-body .typing-premium-dots span:nth-child(2) { animation-delay: .18s; }
body.app-body .typing-premium-dots span:nth-child(3) { animation-delay: .36s; }
body.app-body .typing-premium-bubble small {
  color: var(--eg-text-muted);
  font-weight: 700;
}
body.app-body .chat-premium .chat-input-area {
  padding: 16px 32px 24px;
  background: linear-gradient(180deg, rgba(250,250,253,0), rgba(250,250,253,.94) 22%, rgba(250,250,253,1));
  border-top: 1px solid rgba(15,23,42,.055);
}
body.app-body .chat-premium .chat-input-inner {
  max-width: 940px;
}
body.app-body .chat-premium .chat-input-box {
  border-radius: 24px;
  padding: 14px 16px 12px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(118,92,255,.18);
  box-shadow: 0 24px 70px rgba(15,23,42,.13), 0 0 0 6px rgba(118,92,255,.035), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
body.app-body .chat-premium .chat-input-box:focus-within {
  border-color: rgba(118,92,255,.46);
  box-shadow: 0 28px 80px rgba(118,92,255,.18), 0 0 0 6px rgba(118,92,255,.08), inset 0 1px 0 rgba(255,255,255,1);
}
body.app-body .chat-input-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 8px;
}
body.app-body .chat-input-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--eg-purple);
  font-size: 12px;
  font-weight: 900;
}
body.app-body .chat-input-status i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.13);
}
body.app-body .chat-input-hint {
  color: #9ca3af;
  font-size: 11.5px;
  font-weight: 700;
}
body.app-body .chat-premium .chat-textarea {
  min-height: 58px;
  padding: 6px 4px;
  font-size: 16px;
}
body.app-body .chat-premium .chat-textarea::placeholder {
  color: #9aa3b5;
}
body.app-body .chat-premium .chat-input-controls {
  padding-top: 10px;
  border-top: 1px solid rgba(15,23,42,.06);
}
body.app-body .attach-btn-premium {
  width: auto;
  min-width: 112px;
  height: 38px;
  padding: 0 13px;
  gap: 8px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(248,250,252,.92);
  color: #64748b;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}
body.app-body .attach-btn-premium:hover {
  color: var(--eg-purple);
  border-color: rgba(118,92,255,.28);
  background: rgba(118,92,255,.065);
}
body.app-body .model-select-premium {
  height: 38px;
  border-radius: 999px;
  padding: 0 14px;
  background: linear-gradient(135deg, rgba(118,92,255,.10), rgba(236,47,152,.06));
  border-color: rgba(118,92,255,.16);
  color: #1f2937;
  font-weight: 900;
}
body.app-body .model-spark {
  color: var(--eg-purple);
}
body.app-body .chat-premium .send-btn {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #ec2f98, #765cff 60%, #3b82f6);
  box-shadow: 0 16px 30px rgba(118,92,255,.32);
}
body.app-body .chat-premium .send-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 20px 40px rgba(118,92,255,.38);
}
body.app-body .chat-premium .send-btn:disabled {
  background: linear-gradient(135deg, rgba(236,47,152,.24), rgba(118,92,255,.24));
  box-shadow: none;
}
body.app-body .admin-chat-return {
  position: fixed;
  top: 94px;
  right: 26px;
  z-index: 60;
}
body.app-body .admin-chat-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(118,92,255,.16);
  box-shadow: 0 18px 44px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.88);
  color: var(--eg-purple);
  font-weight: 900;
  text-decoration: none;
  font-size: 13px;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
body.app-body .admin-chat-return-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 54px rgba(118,92,255,.15);
  text-decoration: none;
}
@keyframes egChatGlow {
  0%, 100% { transform: scale(1); opacity: .78; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes egChatMessageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1100px) {
  body.app-body .chat-premium .feature-cards,
  body.app-body .chat-premium .suggestion-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.app-body .admin-chat-return {
    top: 84px;
    right: 18px;
  }
}
@media (max-width: 768px) {
  body.app-body .chat-premium .chat-messages {
    padding-inline: 16px;
  }
  body.app-body .chat-premium .feature-cards,
  body.app-body .chat-premium .suggestion-cards {
    grid-template-columns: 1fr;
  }
  body.app-body .welcome-mini-stats {
    display: none;
  }
  body.app-body .chat-premium .chat-input-area {
    padding: 12px 14px 16px;
  }
  body.app-body .chat-input-topline {
    display: none;
  }
  body.app-body .attach-btn-premium span {
    display: none;
  }
  body.app-body .attach-btn-premium {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }
  body.app-body .model-select-premium {
    max-width: 170px;
  }
  body.app-body .admin-chat-return {
    position: static;
    margin: 10px 14px 0 auto;
    text-align: right;
  }
}

/* ============================================================
   DOCUMENTOS IA — EXPERIENCIA PREMIUM
   Diseño profesional para /app/documents sin tocar lógica backend.
   ============================================================ */
.doc-hero-premium{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:24px;
  padding:34px;
  margin-bottom:20px;
  border:1px solid rgba(118,92,255,.16);
  border-radius:28px;
  background:
    radial-gradient(circle at 8% 0%, rgba(236,47,152,.12), transparent 26rem),
    radial-gradient(circle at 88% 18%, rgba(118,92,255,.12), transparent 24rem),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,247,255,.90));
  box-shadow:0 26px 70px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.95);
  overflow:hidden;
}
.doc-hero-premium::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(118,92,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,92,255,.045) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 76%);
  pointer-events:none;
}
.doc-hero-glow{position:absolute;border-radius:50%;filter:blur(28px);opacity:.6;pointer-events:none;}
.doc-hero-glow-a{width:160px;height:160px;background:rgba(236,47,152,.16);left:-44px;top:-56px;}
.doc-hero-glow-b{width:200px;height:200px;background:rgba(118,92,255,.14);right:-70px;bottom:-80px;}
.doc-hero-content,.doc-hero-panel{position:relative;z-index:1;}
.doc-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(118,92,255,.18);background:rgba(255,255,255,.72);border-radius:999px;color:var(--eg-purple);font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;margin-bottom:14px;}
.doc-kicker-icon{color:var(--eg-pink);}
.doc-hero-premium h1{font-size:clamp(32px,3.5vw,52px);letter-spacing:-.04em;line-height:1;margin:0 0 10px;color:var(--eg-text);}
.doc-hero-premium h1 strong{background:var(--eg-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.doc-hero-premium p{font-size:16px;color:var(--eg-text-muted);line-height:1.65;max-width:720px;margin:0;}
.doc-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.doc-primary-btn,.doc-secondary-btn,.doc-light-btn{font-family:var(--font);border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:transform .16s, box-shadow .16s, opacity .16s, border-color .16s;background:none;}
.doc-primary-btn{padding:12px 18px;border-radius:14px;background:var(--eg-gradient);color:#fff;font-weight:800;box-shadow:0 16px 34px rgba(118,92,255,.22),0 4px 12px rgba(236,47,152,.13);}
.doc-primary-btn:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(118,92,255,.28),0 8px 18px rgba(236,47,152,.16);color:#fff;text-decoration:none;}
.doc-primary-btn:disabled{opacity:.62;cursor:not-allowed;transform:none;}
.doc-primary-btn-sm{padding:9px 13px;border-radius:11px;font-size:13px;}
.doc-secondary-btn,.doc-light-btn{padding:11px 16px;border:1px solid rgba(118,92,255,.18);border-radius:14px;background:rgba(255,255,255,.78);color:var(--eg-text);font-weight:800;box-shadow:0 10px 24px rgba(15,23,42,.055);}
.doc-secondary-btn:hover,.doc-light-btn:hover{border-color:rgba(118,92,255,.36);transform:translateY(-1px);text-decoration:none;color:var(--eg-purple);}
.doc-light-btn{padding:9px 13px;font-size:13px;border-radius:11px;color:var(--eg-text-muted);}
.doc-hero-panel{align-self:center;background:rgba(255,255,255,.72);border:1px solid rgba(118,92,255,.14);border-radius:22px;padding:20px;box-shadow:0 18px 44px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.92);backdrop-filter:blur(16px);}
.doc-panel-title{font-size:13px;font-weight:900;color:var(--eg-text);margin-bottom:14px;text-transform:uppercase;letter-spacing:.04em;}
.doc-capability-list{display:grid;gap:10px;}
.doc-capability-list div{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--eg-text-muted);}
.doc-capability-list span{width:22px;height:22px;border-radius:50%;background:rgba(22,163,74,.10);color:#16a34a;display:inline-flex;align-items:center;justify-content:center;font-weight:900;}
.doc-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px;}
.doc-stat-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.92);border:1px solid rgba(148,163,184,.16);border-radius:20px;padding:18px;box-shadow:var(--eg-shadow);}
.doc-stat-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;flex-shrink:0;}
.doc-stat-purple{background:rgba(118,92,255,.10);color:var(--eg-purple);}.doc-stat-pink{background:rgba(236,47,152,.10);color:var(--eg-pink);}.doc-stat-blue{background:rgba(37,99,235,.10);color:#2563eb;}.doc-stat-teal{background:rgba(20,184,166,.10);color:#14b8a6;}
.doc-stat-value{font-size:23px;font-weight:900;letter-spacing:-.03em;color:var(--eg-text);}
.doc-stat-label{font-size:12px;color:var(--eg-text-muted);font-weight:700;}
.doc-command-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;background:rgba(255,255,255,.86);border:1px solid rgba(148,163,184,.14);border-radius:22px;padding:18px 20px;box-shadow:var(--eg-shadow);}
.doc-command-bar h2{font-size:18px;line-height:1;margin:0 0 6px;color:var(--eg-text);}
.doc-command-bar p{margin:0;font-size:13px;color:var(--eg-text-muted);}
.doc-command-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.doc-search-shell{min-width:260px;display:flex;align-items:center;gap:8px;border:1px solid var(--eg-border);background:#fff;border-radius:14px;padding:0 12px;box-shadow:0 8px 20px rgba(15,23,42,.045);}
.doc-search-shell span{color:var(--eg-text-soft);font-weight:900;}
.doc-search-shell input{height:42px;border:0;outline:0;background:transparent;width:100%;font-family:var(--font);font-size:13px;color:var(--eg-text);}
.docs-grid-premium{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.doc-card-premium{position:relative;background:rgba(255,255,255,.94);border:1px solid rgba(148,163,184,.16);border-radius:22px;padding:18px;box-shadow:var(--eg-shadow);overflow:hidden;transition:transform .18s, box-shadow .18s, border-color .18s;}
.doc-card-premium:hover{transform:translateY(-4px);box-shadow:var(--eg-shadow-md);border-color:rgba(118,92,255,.25);}
.doc-card-topline{position:absolute;top:0;left:0;right:0;height:3px;opacity:.82;}
.doc-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;}
.doc-file-icon{width:54px;height:54px;border-radius:16px;background:color-mix(in srgb, var(--doc-accent) 12%, #fff);color:var(--doc-accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;letter-spacing:.04em;border:1px solid color-mix(in srgb, var(--doc-accent) 24%, transparent);}
.doc-file-chip{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--eg-text-muted);background:#f8f7ff;border:1px solid rgba(118,92,255,.12);border-radius:999px;padding:6px 10px;}
.doc-card-premium h3{font-size:17px;line-height:1.25;margin:0 0 8px;color:var(--eg-text);letter-spacing:-.02em;}
.doc-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--eg-text-muted);font-size:12px;font-weight:700;margin-bottom:8px;}
.doc-original-name{color:var(--eg-text-soft);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 10px;border-radius:10px;background:#fafafd;border:1px solid var(--eg-border-soft);margin-bottom:10px;}
.doc-page-pill{display:inline-flex;background:rgba(20,184,166,.08);color:#0f766e;border:1px solid rgba(20,184,166,.18);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;margin-bottom:10px;}
.doc-card-summary{font-size:13px;line-height:1.55;color:var(--eg-text-muted);min-height:62px;margin:0 0 16px;}
.doc-card-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.doc-empty-premium{margin-top:4px;}
.doc-empty-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:center;padding:34px;background:rgba(255,255,255,.92);border:1px solid rgba(118,92,255,.16);border-radius:28px;box-shadow:0 26px 70px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.94);}
.doc-empty-orbit{width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,rgba(118,92,255,.12),transparent 64%),linear-gradient(135deg,rgba(236,47,152,.08),rgba(118,92,255,.08));border:1px solid rgba(118,92,255,.14);position:relative;}
.doc-empty-orbit::after{content:"";position:absolute;inset:24px;border:1px dashed rgba(118,92,255,.24);border-radius:50%;animation:egDocSpin 10s linear infinite;}
@keyframes egDocSpin{to{transform:rotate(360deg)}}
.doc-empty-icon{width:76px;height:76px;border-radius:24px;background:var(--eg-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;box-shadow:0 18px 36px rgba(118,92,255,.22);z-index:1;}
.doc-empty-badge{display:inline-flex;color:var(--eg-purple);background:rgba(118,92,255,.08);border:1px solid rgba(118,92,255,.16);border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
.doc-empty-copy h3{font-size:26px;letter-spacing:-.03em;margin:0 0 8px;color:var(--eg-text);}
.doc-empty-copy p{font-size:15px;line-height:1.7;color:var(--eg-text-muted);max-width:620px;margin:0 0 20px;}
.doc-empty-actions{display:flex;gap:12px;flex-wrap:wrap;}
.doc-modal-overlay{background:rgba(9,13,32,.48)!important;backdrop-filter:blur(16px);align-items:center;justify-content:center;padding:22px;z-index:9999;}
.doc-modal-card{position:relative;width:min(560px,96vw);background:rgba(255,255,255,.96);border:1px solid rgba(148,163,184,.18);border-radius:26px;padding:26px;box-shadow:0 30px 90px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.96);animation:egDocModal .22s cubic-bezier(.34,1.56,.64,1);}
.doc-modal-card-large{width:min(880px,96vw);}
@keyframes egDocModal{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.doc-modal-close{position:absolute;right:18px;top:16px;width:34px;height:34px;border:1px solid var(--eg-border);border-radius:12px;background:#fff;color:var(--eg-text-muted);font-size:20px;line-height:1;cursor:pointer;}
.doc-modal-close:hover{color:var(--eg-text);border-color:rgba(118,92,255,.28);}
.doc-modal-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;padding-right:34px;}
.doc-modal-icon{width:48px;height:48px;border-radius:16px;background:var(--eg-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;flex-shrink:0;box-shadow:0 14px 30px rgba(118,92,255,.22);}
.doc-modal-head h3{font-size:21px;letter-spacing:-.02em;margin:0 0 4px;color:var(--eg-text);}
.doc-modal-head p{font-size:13px;color:var(--eg-text-muted);line-height:1.5;margin:0;}
.doc-form-group{margin-bottom:16px;}
.doc-form-input{width:100%;border:1.5px solid var(--eg-border);border-radius:14px;background:#fff;padding:12px 14px;font-family:var(--font);font-size:14px;outline:0;transition:border-color .15s,box-shadow .15s;}
.doc-form-input:focus{border-color:var(--eg-purple);box-shadow:0 0 0 4px rgba(118,92,255,.10);}
.doc-drop-zone{border:1.5px dashed rgba(118,92,255,.32);background:linear-gradient(135deg,rgba(118,92,255,.055),rgba(236,47,152,.04));border-radius:20px;padding:32px;text-align:center;cursor:pointer;transition:transform .15s, border-color .15s, background .15s;}
.doc-drop-zone:hover,.doc-drop-zone.is-drag{transform:translateY(-2px);border-color:var(--eg-purple);background:linear-gradient(135deg,rgba(118,92,255,.09),rgba(236,47,152,.07));}
.doc-drop-icon{width:56px;height:56px;border-radius:18px;background:#fff;color:var(--eg-purple);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:28px;box-shadow:var(--eg-shadow);}
.doc-drop-title{display:block;font-size:16px;font-weight:900;color:var(--eg-text);margin-bottom:4px;}
.doc-drop-subtitle{font-size:13px;color:var(--eg-text-muted);}
.doc-file-selected{display:flex;justify-content:space-between;gap:12px;margin-top:12px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.18);color:#15803d;border-radius:14px;padding:11px 13px;font-size:13px;}
.doc-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.doc-quick-prompts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.doc-quick-prompts button{border:1px solid rgba(118,92,255,.18);background:rgba(118,92,255,.055);color:var(--eg-purple);border-radius:999px;padding:7px 11px;font-family:var(--font);font-size:12px;font-weight:800;cursor:pointer;}
.doc-quick-prompts button:hover{background:var(--eg-gradient);color:#fff;border-color:transparent;}
.doc-ask-chat{height:380px;overflow:auto;background:linear-gradient(135deg,#fafafd,#fff);border:1px solid var(--eg-border);border-radius:18px;padding:16px;margin-bottom:12px;}
.doc-ask-chat .ask-msg{max-width:82%;padding:12px 14px;border-radius:16px;margin-bottom:10px;font-size:14px;line-height:1.55;white-space:pre-wrap;}
.doc-ask-chat .ask-ai{background:#fff;border:1px solid var(--eg-border);color:var(--eg-text);box-shadow:0 8px 20px rgba(15,23,42,.04);border-bottom-left-radius:5px;}
.doc-ask-chat .ask-user{margin-left:auto;background:var(--eg-gradient);color:#fff;border-bottom-right-radius:5px;box-shadow:0 12px 28px rgba(118,92,255,.20);}
.doc-ask-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;}
@media(max-width:1200px){.doc-hero-premium{grid-template-columns:1fr}.doc-hero-panel{max-width:680px}.doc-stats-grid{grid-template-columns:repeat(2,1fr)}.doc-command-bar{align-items:flex-start;flex-direction:column}.doc-command-actions,.doc-search-shell{width:100%}}
@media(max-width:768px){.doc-hero-premium{padding:24px;border-radius:22px}.doc-stats-grid{grid-template-columns:1fr}.doc-empty-card{grid-template-columns:1fr;text-align:center;padding:26px}.doc-empty-orbit{margin:0 auto}.doc-hero-actions,.doc-empty-actions{justify-content:center}.doc-command-actions{align-items:stretch}.doc-command-actions .doc-primary-btn{width:100%}.doc-ask-input-row{grid-template-columns:1fr}.doc-modal-card{padding:22px}.doc-ask-chat{height:320px}}

/* ============================================================
   HISTORIAL PREMIUM — /app/history
   Corrección visual integral: tarjetas, buscador, filtros,
   estados vacíos y tabla de créditos. Compatible PHP 8.4.
   ============================================================ */
:root {
  --primary: var(--eg-purple);
  --primary-soft: var(--eg-purple);
  --green: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --bg-card: var(--eg-white);
  --bg-card-soft: var(--eg-border-soft);
  --text-main: var(--eg-text);
  --text-muted: var(--eg-text-muted);
  --border-soft: var(--eg-border);
}

html[data-theme="dark"] {
  --eg-bg: #080914;
  --eg-white: #111322;
  --eg-text: #f8fafc;
  --eg-text-muted: #a7adbb;
  --eg-text-soft: #747b8d;
  --eg-border: rgba(255,255,255,.12);
  --eg-border-soft: rgba(255,255,255,.07);
  --eg-shadow: 0 18px 42px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.03) inset;
  --eg-shadow-md: 0 24px 60px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.04) inset;
  --bg-card: var(--eg-white);
  --bg-card-soft: var(--eg-border-soft);
  --text-main: var(--eg-text);
  --text-muted: var(--eg-text-muted);
  --border-soft: var(--eg-border);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar .credits-pill,
html[data-theme="dark"] .user-pill,
html[data-theme="dark"] .topbar .topbar-btn,
html[data-theme="dark"] .history-stat-card,
html[data-theme="dark"] .history-toolbar,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .history-gallery-card,
html[data-theme="dark"] .history-credit-card,
html[data-theme="dark"] .upgrade-banner,
html[data-theme="dark"] .mock-collapser {
  background: rgba(17,19,34,.88) !important;
  border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .topbar .topbar-btn { color: var(--eg-text) !important; }
html[data-theme="dark"] .user-avatar-sm { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .history-search-box input { color: var(--eg-text); }

.history-premium {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 30px;
}

.history-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  align-items: stretch;
  min-height: 224px;
  padding: 30px;
  border: 1px solid rgba(118,92,255,.13);
  border-radius: 32px;
  background:
    radial-gradient(circle at 12% 0%, rgba(236,47,152,.14), transparent 38%),
    radial-gradient(circle at 78% 8%, rgba(118,92,255,.18), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.74));
  box-shadow: 0 28px 70px rgba(23,25,45,.08), 0 1px 0 rgba(255,255,255,.8) inset;
}

html[data-theme="dark"] .history-hero {
  background:
    radial-gradient(circle at 12% 0%, rgba(236,47,152,.28), transparent 38%),
    radial-gradient(circle at 78% 8%, rgba(118,92,255,.32), transparent 42%),
    linear-gradient(135deg, rgba(17,19,34,.94), rgba(17,19,34,.74));
  box-shadow: 0 28px 80px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.06) inset;
}

.history-hero::after {
  content: "";
  position: absolute;
  inset: auto -70px -110px auto;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(236,47,152,.18), rgba(118,92,255,.16));
  filter: blur(2px);
  pointer-events: none;
}

.history-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(118,92,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,92,255,.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
  opacity: .85;
  pointer-events: none;
}

.history-hero-content,
.history-hero-card { position: relative; z-index: 1; }

.history-eyebrow {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(118,92,255,.10);
  color: var(--eg-purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.history-hero h1 {
  margin: 0;
  color: var(--eg-text);
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 850;
}

.history-hero h1 strong {
  background: var(--eg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.history-hero p {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--eg-text-muted);
  font-size: 16px;
  line-height: 1.7;
}

.history-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.history-primary-action,
.history-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.history-primary-action {
  color: #fff;
  background: var(--eg-gradient);
  box-shadow: 0 14px 30px rgba(118,92,255,.25);
}

.history-secondary-action {
  color: var(--eg-text);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(118,92,255,.18);
}

.history-primary-action:hover,
.history-secondary-action:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.history-primary-action:hover { color:#fff; box-shadow: 0 18px 42px rgba(118,92,255,.32); }
.history-secondary-action:hover { color: var(--eg-purple); border-color: rgba(118,92,255,.38); }

.history-hero-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 18px 42px rgba(118,92,255,.10);
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .history-hero-card,
html[data-theme="dark"] .history-secondary-action {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.history-hero-card span {
  color: var(--eg-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.history-hero-card strong {
  color: var(--eg-text);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.03em;
}

.history-hero-card p {
  margin: 0;
  color: var(--eg-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.history-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.history-stat-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--eg-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--eg-shadow);
}

.history-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.history-stat-icon svg { width: 21px; height: 21px; }
.history-stat-card.pink .history-stat-icon { color: var(--eg-pink); background: rgba(236,47,152,.10); }
.history-stat-card.purple .history-stat-icon { color: var(--eg-purple); background: rgba(118,92,255,.10); }
.history-stat-card.blue .history-stat-icon { color: #2563eb; background: rgba(37,99,235,.10); }
.history-stat-card.teal .history-stat-icon { color: #0f9f8f; background: rgba(20,184,166,.10); }
.history-stat-card strong { display:block; color: var(--eg-text); font-size: 24px; line-height:1; letter-spacing:-.03em; }
.history-stat-card span { display:block; margin-top:4px; color: var(--eg-text-muted); font-size: 12px; font-weight: 700; }

.history-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--eg-border);
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--eg-shadow);
  backdrop-filter: blur(18px);
}

.history-search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--eg-border);
  border-radius: 17px;
  background: var(--eg-bg);
  overflow: hidden;
}

.history-search-box svg {
  width: 19px;
  height: 19px;
  margin-left: 15px;
  color: var(--eg-text-soft);
  flex-shrink: 0;
}

.history-search-box input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 15px 0 10px;
  border: 0;
  outline: none;
  background: transparent;
  font: 600 14px/1 var(--font);
  color: var(--eg-text);
}

.history-search-box:focus-within {
  border-color: rgba(118,92,255,.55);
  box-shadow: 0 0 0 4px rgba(118,92,255,.10);
}

.history-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 !important;
}

.hist-tab {
  min-height: 42px;
  border: 1px solid var(--eg-border) !important;
  background: #fff !important;
  color: var(--eg-text-muted) !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease !important;
  font-family: var(--font) !important;
}

.hist-tab.active,
.hist-tab:hover {
  background: var(--eg-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(118,92,255,.22) !important;
  transform: translateY(-1px);
}

.history-panel { display: none; }
.history-panel.active { display: block; animation: historyFade .18s ease both; }
@keyframes historyFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.history-timeline {
  display: grid;
  gap: 12px;
}

.history-item {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--eg-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--eg-shadow);
  color: var(--eg-text);
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.history-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--eg-gradient);
  opacity: 0;
  transition: opacity .15s ease;
}

.history-item:hover {
  color: var(--eg-text);
  transform: translateY(-2px);
  box-shadow: var(--eg-shadow-md);
  border-color: rgba(118,92,255,.28);
}

.history-item:hover::before { opacity: 1; }

.history-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.history-icon svg { width: 22px; height: 22px; }
.history-icon.pink { background: linear-gradient(135deg, rgba(236,47,152,.16), rgba(236,47,152,.06)) !important; color: var(--eg-pink) !important; }
.history-icon.purple { background: linear-gradient(135deg, rgba(118,92,255,.16), rgba(118,92,255,.06)) !important; color: var(--eg-purple) !important; }
.history-icon.blue { background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(37,99,235,.06)) !important; color: #2563eb !important; }
.history-icon.teal { background: linear-gradient(135deg, rgba(20,184,166,.16), rgba(20,184,166,.06)) !important; color: #0f9f8f !important; }
.history-icon.orange { background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.06)) !important; color: #d97706 !important; }

.history-item-body { min-width: 0; }
.history-item-top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom: 5px; }
.history-badge,
.history-mini-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(118,92,255,.09);
  color: var(--eg-purple);
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
}

.history-title {
  display: block;
  color: var(--eg-text);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 820;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.history-meta {
  color: var(--eg-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.history-item p {
  margin: 4px 0 0;
  color: var(--eg-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.history-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--eg-border-soft);
  color: var(--eg-text-soft);
  font-size: 24px;
  line-height: 1;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.history-item:hover .history-arrow {
  transform: translateX(3px);
  background: rgba(118,92,255,.12);
  color: var(--eg-purple);
}

.history-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.history-gallery-card {
  display: block;
  border: 1px solid var(--eg-border);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--eg-shadow);
  text-decoration: none !important;
  color: var(--eg-text);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.history-gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--eg-shadow-md);
  border-color: rgba(118,92,255,.30);
  color: var(--eg-text);
}

.history-gallery-media {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 20% 15%, rgba(236,47,152,.18), transparent 35%),
    radial-gradient(circle at 80% 25%, rgba(118,92,255,.18), transparent 40%),
    var(--eg-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--eg-purple);
  font-weight: 900;
}

.history-gallery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}

.history-gallery-card:hover .history-gallery-media img { transform: scale(1.035); }
.history-gallery-info { padding: 14px 15px 16px; }
.history-gallery-info strong { display:block; font-size: 14px; line-height:1.35; margin-bottom: 5px; color: var(--eg-text); overflow-wrap:anywhere; }
.history-gallery-info span { display:block; color: var(--eg-text-muted); font-size:12px; font-weight:650; }

.history-credit-card {
  overflow-x: auto;
  border: 1px solid var(--eg-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--eg-shadow);
}

.history-credit-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.history-credit-table th {
  text-align: left;
  padding: 14px 16px;
  background: var(--eg-bg);
  color: var(--eg-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--eg-border);
}

.history-credit-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--eg-border-soft);
  color: var(--eg-text-muted);
  font-size: 13px;
  vertical-align: top;
}

.history-credit-table tr:last-child td { border-bottom: 0; }
.history-credit-table tr:hover td { background: var(--eg-border-soft); }
.history-credit-positive { color: #0f9f8f; }
.history-credit-negative { color: #dc2626; }

.history-empty.premium-empty {
  min-height: 300px;
  border: 1px solid var(--eg-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(118,92,255,.11), transparent 38%),
    #fff;
  box-shadow: var(--eg-shadow);
}

html[data-theme="dark"] .history-empty.premium-empty { background: rgba(17,19,34,.88); }
.history-empty-icon { color: var(--eg-purple); }
.history-no-results {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 120px;
  border: 1px dashed rgba(118,92,255,.28);
  border-radius: 24px;
  color: var(--eg-text-muted);
  text-align: center;
}
.history-no-results strong { color: var(--eg-text); font-size: 15px; }
.history-no-results span { font-size: 13px; }

@media (max-width: 1180px) {
  .history-hero { grid-template-columns: 1fr; }
  .history-hero-card { max-width: 340px; }
  .history-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-toolbar { grid-template-columns: 1fr; }
  .history-tabs { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .page-content { padding: 18px 16px 28px; }
  .history-hero { padding: 22px; border-radius: 26px; }
  .history-hero h1 { font-size: 34px; }
  .history-hero p { font-size: 14px; }
  .history-stats-grid { grid-template-columns: 1fr; }
  .history-toolbar { position: static; border-radius: 22px; }
  .history-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; justify-content: flex-start; }
  .hist-tab { white-space: nowrap; }
  .history-item { grid-template-columns: 46px minmax(0,1fr); padding: 14px; }
  .history-icon { width: 46px !important; height: 46px !important; border-radius: 15px !important; }
  .history-arrow { display: none; }
  .history-gallery-grid { grid-template-columns: 1fr; }
  .history-hero-actions a { width: 100%; }
}

@media (max-width: 480px) {
  .history-hero-card { max-width: none; }
  .history-item-top { align-items:flex-start; flex-direction:column; gap:6px; }
  .history-title { font-size: 14px; }
}


/* ==== Imágenes: popup de visualización y descarga ==== */
.gallery-img-wrap {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
}
.gallery-img-wrap img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .28s ease;
}
.gallery-item:hover .gallery-img-wrap img {
  transform: scale(1.03);
}
.gallery-download-btn {
  cursor: pointer;
}
.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}
.image-preview-modal.open {
  display: block;
}
.image-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
}
.image-preview-dialog {
  position: relative;
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  background: var(--eg-card);
  border: 1px solid var(--eg-border);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(320px, 68vh) auto;
}
.image-preview-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15, 23, 42, .58);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.image-preview-media-wrap {
  background: linear-gradient(180deg, rgba(124,58,237,.09), rgba(15,23,42,.03));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.image-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
}
.image-preview-content {
  padding: 22px 24px 24px;
}
.image-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.image-preview-head h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.image-preview-head p {
  margin: 0;
  color: var(--eg-text-muted);
  font-size: .95rem;
}
.image-preview-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--eg-pink), var(--eg-purple));
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 14px 32px rgba(124, 58, 237, .22);
}
.image-preview-prompt {
  color: var(--eg-text);
  line-height: 1.65;
  font-size: .98rem;
  background: var(--eg-bg-soft);
  border: 1px solid var(--eg-border);
  border-radius: 16px;
  padding: 14px 16px;
}
@media (max-width: 767px) {
  .image-preview-dialog {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
    margin: 9px auto;
    grid-template-rows: minmax(260px, 54vh) auto;
    border-radius: 20px;
  }
  .image-preview-content {
    padding: 18px;
  }
  .image-preview-head {
    flex-direction: column;
  }
  .image-preview-download {
    width: 100%;
  }
  .gallery-img-wrap img {
    height: 200px;
  }
}


/* ==== Prompts largos y cortos ==== */
.long-prompt-textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.55;
}
.prompt-helper-row, .chat-input-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.prompt-helper-note {
  color: var(--eg-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.prompt-counter {
  color: var(--eg-purple);
  font-size: 12px;
  font-weight: 700;
  background: rgba(118,92,255,.08);
  border: 1px solid rgba(118,92,255,.16);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.long-prompt-chat {
  min-height: 110px;
  max-height: 420px;
}
@media (max-width: 767px) {
  .long-prompt-textarea { min-height: 132px; }
  .long-prompt-chat { min-height: 96px; }
  .prompt-helper-row, .chat-input-meta { align-items: flex-start; }
}


/* ==== Chat multimodal: adjuntos persistentes premium ==== */
.chat-attachments-tray {
  margin-top: 12px;
}
.chat-attachments-panel {
  width: 100%;
  border: 1px solid rgba(118,92,255,.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(236,47,152,.08), transparent 30%),
    radial-gradient(circle at 90% 0%, rgba(118,92,255,.10), transparent 32%),
    rgba(255,255,255,.82);
  box-shadow: 0 16px 44px rgba(118,92,255,.10);
  padding: 12px;
  overflow: hidden;
}
[data-theme="dark"] .chat-attachments-panel {
  background:
    radial-gradient(circle at 10% 0%, rgba(236,47,152,.14), transparent 30%),
    radial-gradient(circle at 90% 0%, rgba(118,92,255,.16), transparent 32%),
    rgba(20, 20, 43, .82);
}
.chat-attachments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(118,92,255,.12);
  margin-bottom: 10px;
}
.chat-attachments-head strong {
  display: block;
  font-size: 13px;
  color: var(--eg-text);
  letter-spacing: -.01em;
}
.chat-attachments-head span {
  display: block;
  margin-top: 2px;
  color: var(--eg-text-muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.chat-clear-files {
  flex: 0 0 auto;
  border: 1px solid rgba(118,92,255,.16);
  background: rgba(118,92,255,.07);
  color: var(--eg-purple);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.chat-clear-files:hover { background: rgba(236,47,152,.10); color: var(--eg-pink); }
.chat-attachments-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.chat-attachment-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(118,92,255,.14);
  background: rgba(255,255,255,.76);
  border-radius: 18px;
  padding: 10px;
  min-width: 0;
  box-shadow: 0 10px 28px rgba(20,20,43,.05);
}
[data-theme="dark"] .chat-attachment-card { background: rgba(255,255,255,.06); }
.chat-attachment-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(118,92,255,.16), rgba(236,47,152,.12));
  color: var(--eg-purple);
}
.chat-file-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(118,92,255,.16);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
}
[data-theme="dark"] .chat-file-badge { background: rgba(15,23,42,.38); }
.chat-attachment-main { min-width: 0; }
.chat-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--eg-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.chat-attachment-meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--eg-text-muted);
  font-size: 11px;
  min-width: 0;
  flex-wrap: wrap;
}
.chat-attachment-meta i {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(118,92,255,.35);
}
.chat-attachment-meta .ready {
  color: #16a34a;
  font-weight: 800;
}
.chat-attachment-remove {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 12px;
  background: rgba(15,23,42,.06);
  color: var(--eg-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.chat-attachment-remove:hover {
  background: rgba(239,68,68,.12);
  color: #ef4444;
}
.chat-input-meta {
  border-top: 1px solid rgba(118,92,255,.08);
  padding-top: 10px;
}
@media (max-width: 767px) {
  .chat-attachments-panel { border-radius: 18px; padding: 10px; }
  .chat-attachments-head { align-items: flex-start; }
  .chat-attachments-list { grid-template-columns: 1fr; }
  .chat-attachment-card { grid-template-columns: 40px minmax(0,1fr) 30px; border-radius: 16px; }
  .chat-attachment-icon { width: 40px; height: 40px; border-radius: 14px; }
  .chat-attachment-meta { font-size: 10.5px; }
}

/* ============================================================
   FASE 1 — Dashboard de inicio premium EspacioGPT
   Pantalla principal tipo SaaS: bienvenida, prompt central,
   módulos principales y resumen de actividad. Compatible PHP 8.4.
   ============================================================ */
.eg-home-shell{
  position:relative;
  isolation:isolate;
  min-height:calc(100vh - var(--topbar-h) - 58px);
  padding:8px 0 36px;
}
.eg-home-bg{position:absolute;z-index:-1;border-radius:999px;filter:blur(12px);pointer-events:none;opacity:.76;}
.eg-home-bg-a{width:420px;height:420px;left:8%;top:28px;background:radial-gradient(circle,rgba(236,47,152,.15),transparent 66%);}
.eg-home-bg-b{width:520px;height:520px;right:6%;top:60px;background:radial-gradient(circle,rgba(118,92,255,.15),transparent 68%);}
.eg-home-hero{
  position:relative;
  max-width:940px;
  margin:0 auto 22px;
  padding:34px 34px 28px;
  text-align:center;
  border:1px solid rgba(118,92,255,.13);
  border-radius:34px;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.74));
  box-shadow:0 28px 80px rgba(118,92,255,.10),0 10px 30px rgba(15,23,42,.04);
  overflow:hidden;
}
.eg-home-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 22% 0%,rgba(236,47,152,.12),transparent 32%),radial-gradient(circle at 78% 8%,rgba(118,92,255,.14),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.2),rgba(250,250,253,.56));
}
.eg-home-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;margin-bottom:14px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(118,92,255,.13);
  color:var(--eg-purple);
  font-size:12px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(118,92,255,.08);
}
.eg-home-badge svg{width:15px;height:15px;}
.eg-home-logo-mark{
  width:76px;height:76px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;border-radius:26px;
  background:linear-gradient(135deg,#111827,#0d0d1a 60%,#2b174d);
  box-shadow:0 18px 42px rgba(13,13,26,.22),0 0 0 8px rgba(118,92,255,.05);
}
.eg-home-logo-mark svg{width:35px;height:35px;}
.eg-home-hero h1{
  margin:0 0 8px;
  font-size:clamp(34px,4vw,54px);
  line-height:1.02;
  letter-spacing:-.055em;
  color:var(--eg-text);
  font-weight:900;
}
.eg-home-hero h1 strong{background:var(--eg-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.eg-home-hero p{max-width:620px;margin:0 auto 18px;color:var(--eg-text-muted);font-size:16px;line-height:1.5;}
.eg-home-chips{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.eg-home-chips a{
  padding:8px 13px;border-radius:999px;background:#fff;border:1px solid rgba(229,231,235,.9);
  color:var(--eg-text);font-size:12.5px;font-weight:750;text-decoration:none;box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.eg-home-chips a:hover{border-color:rgba(118,92,255,.28);color:var(--eg-purple);text-decoration:none;}
.eg-home-prompt{
  width:min(720px,100%);
  margin:0 auto;
  text-align:left;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(229,231,235,.95);
  border-radius:22px;
  padding:16px;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
}
.eg-home-prompt label{display:block;margin:0 0 9px;font-size:14px;font-weight:850;color:var(--eg-text);}
.eg-home-textarea-wrap{position:relative;}
.eg-home-textarea-wrap textarea{
  width:100%;min-height:118px;padding:15px 62px 15px 15px;resize:vertical;
  border:1px solid var(--eg-border);border-radius:16px;outline:none;
  background:#fff;color:var(--eg-text);font-family:var(--font);font-size:14px;line-height:1.55;
}
.eg-home-textarea-wrap textarea:focus{border-color:rgba(118,92,255,.45);box-shadow:0 0 0 4px rgba(118,92,255,.08);}
.eg-home-textarea-wrap button{
  position:absolute;right:12px;bottom:12px;width:42px;height:42px;border:0;border-radius:15px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;background:var(--eg-gradient);
  box-shadow:0 10px 24px rgba(118,92,255,.28);transition:transform .15s ease,opacity .15s ease;
}
.eg-home-textarea-wrap button:hover{transform:translateY(-1px);opacity:.94;}
.eg-home-textarea-wrap button svg{width:18px;height:18px;}
.eg-home-prompt-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;}
.eg-home-prompt-actions a,.eg-home-prompt-actions span{
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;
  background:#fff;border:1px solid var(--eg-border);color:var(--eg-text-muted);font-size:12px;font-weight:750;text-decoration:none;
}
.eg-home-prompt-actions svg{width:14px;height:14px;}
.eg-home-prompt-actions a:hover{color:var(--eg-purple);border-color:rgba(118,92,255,.28);text-decoration:none;}
.eg-home-prompt-actions span{margin-left:auto;color:var(--eg-purple);background:rgba(118,92,255,.06);border-color:rgba(118,92,255,.14);}
.eg-home-secure{margin-top:12px;color:var(--eg-text-soft);font-size:12px;font-weight:650;}
.eg-home-secure::before{content:"🔒 ";}
.eg-home-modules{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin:0 auto 18px;
}
.eg-home-module-card{
  min-height:184px;
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:20px 18px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(229,231,235,.95);
  border-radius:22px;
  box-shadow:var(--eg-shadow);
  color:var(--eg-text);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  overflow:hidden;
}
.eg-home-module-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:currentColor;opacity:.55;}
.eg-home-module-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(15,23,42,.10);text-decoration:none;color:var(--eg-text);border-color:rgba(118,92,255,.20);}
.eg-home-module-card.pink{color:var(--eg-pink);}.eg-home-module-card.purple{color:var(--eg-purple);}.eg-home-module-card.blue{color:#3b82f6;}.eg-home-module-card.teal{color:#14b8a6;}.eg-home-module-card.orange{color:#f97316;}.eg-home-module-card.violet{color:#8b5cf6;}
.eg-home-module-icon{width:43px;height:43px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,currentColor 12%,white);}
.eg-home-module-icon svg{width:21px;height:21px;}
.eg-home-module-card strong{color:var(--eg-text);font-size:15px;font-weight:900;letter-spacing:-.02em;margin-top:2px;}
.eg-home-module-card small{color:var(--eg-text-muted);font-size:12.3px;line-height:1.45;font-weight:560;}
.eg-home-module-arrow{margin-top:auto;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:currentColor;background:color-mix(in srgb,currentColor 10%,white);font-size:20px;font-weight:900;}
.eg-home-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px;}
.eg-home-summary-card{
  background:#fff;border:1px solid var(--eg-border);border-radius:20px;padding:18px 20px;box-shadow:var(--eg-shadow);
}
.eg-home-summary-card span{display:block;color:var(--eg-text-muted);font-size:12.5px;font-weight:750;margin-bottom:8px;}
.eg-home-summary-card strong{display:block;color:var(--eg-text);font-size:30px;line-height:1;font-weight:900;letter-spacing:-.04em;margin-bottom:8px;}
.eg-home-summary-card small{display:block;color:var(--eg-text-soft);font-size:12px;line-height:1.4;}
.eg-home-lower-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start;}
.eg-home-panel{background:#fff;border:1px solid var(--eg-border);border-radius:24px;padding:20px;box-shadow:var(--eg-shadow);min-width:0;}
.eg-home-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.eg-home-section-title span{font-size:15px;font-weight:900;color:var(--eg-text);}
.eg-home-section-title a{font-size:13px;color:var(--eg-purple);font-weight:760;text-decoration:none;}
.eg-home-activity-list{display:flex;flex-direction:column;gap:0;}
.eg-home-activity-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--eg-border-soft);min-width:0;}
.eg-home-activity-item:last-child{border-bottom:0;}
.eg-home-activity-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:14px;flex:0 0 auto;}
.eg-home-activity-icon svg{width:19px;height:19px;}
.eg-home-activity-icon.pink{color:var(--eg-pink);background:rgba(236,47,152,.09)}.eg-home-activity-icon.purple{color:var(--eg-purple);background:rgba(118,92,255,.09)}.eg-home-activity-icon.blue{color:#3b82f6;background:rgba(59,130,246,.09)}.eg-home-activity-icon.orange{color:#f97316;background:rgba(249,115,22,.10)}.eg-home-activity-icon.teal{color:#14b8a6;background:rgba(20,184,166,.10)}
.eg-home-activity-body{min-width:0;flex:1;}
.eg-home-activity-body strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--eg-text);font-size:13.5px;font-weight:800;margin-bottom:2px;}
.eg-home-activity-body small{display:block;color:var(--eg-text-muted);font-size:12px;}
.eg-home-activity-item em{font-style:normal;color:var(--eg-text-soft);font-size:12px;white-space:nowrap;}
.eg-home-empty-state{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--eg-text-muted);gap:8px;}
.eg-home-empty-state span{width:52px;height:52px;border-radius:18px;background:var(--eg-gradient-soft);color:var(--eg-purple);display:flex;align-items:center;justify-content:center;}
.eg-home-empty-state svg{width:24px;height:24px;}
.eg-home-empty-state strong{color:var(--eg-text);font-size:15px;}
.eg-home-empty-state small{max-width:360px;line-height:1.5;}
.eg-home-credits-used{display:block;font-size:42px;line-height:1;font-weight:950;letter-spacing:-.06em;background:var(--eg-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:4px;}
.eg-home-credits-label{display:block;color:var(--eg-text-muted);font-weight:700;margin:8px 0 18px;}
.eg-home-mini-chart{height:86px;display:flex;align-items:flex-end;gap:8px;margin-bottom:8px;}
.eg-home-mini-chart span{flex:1;min-width:0;border-radius:9px 9px 3px 3px;background:rgba(118,92,255,.16);}
.eg-home-mini-chart span.today{background:var(--eg-gradient);box-shadow:0 10px 20px rgba(118,92,255,.18);}
.eg-home-chart-days{display:flex;gap:8px;}
.eg-home-chart-days span{flex:1;text-align:center;font-size:10px;color:var(--eg-text-soft);white-space:nowrap;}

@media(max-width:1320px){
  .eg-home-modules{grid-template-columns:repeat(3,minmax(0,1fr));}
  .eg-home-module-card{min-height:164px;}
}
@media(max-width:1080px){
  .eg-home-lower-grid{grid-template-columns:1fr;}
  .eg-home-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:768px){
  .eg-home-shell{padding:0 0 24px;}
  .eg-home-hero{padding:26px 18px 20px;border-radius:26px;}
  .eg-home-logo-mark{width:62px;height:62px;border-radius:22px;}
  .eg-home-hero h1{font-size:34px;}
  .eg-home-hero p{font-size:14px;}
  .eg-home-prompt{padding:12px;border-radius:18px;}
  .eg-home-textarea-wrap textarea{min-height:104px;padding-right:54px;}
  .eg-home-prompt-actions span{margin-left:0;}
  .eg-home-modules{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .eg-home-module-card{min-height:172px;padding:17px 15px;border-radius:18px;}
  .eg-home-summary-grid{grid-template-columns:1fr;}
  .eg-home-panel{border-radius:20px;padding:16px;}
  .eg-home-activity-item{align-items:flex-start;}
  .eg-home-activity-item em{display:none;}
}
@media(max-width:460px){
  .eg-home-chips{justify-content:flex-start;}
  .eg-home-modules{grid-template-columns:1fr;}
  .eg-home-module-card{min-height:auto;}
  .eg-home-prompt-actions a,.eg-home-prompt-actions span{width:100%;justify-content:center;}
}


/* ============================================================
   FASE 2 · Comunicados, promociones y novedades
   ============================================================ */
.eg-ann-strip{position:relative;z-index:2;width:min(1040px,100%);margin:0 auto 22px;background:rgba(255,255,255,.88);border:1px solid rgba(118,92,255,.14);box-shadow:0 22px 70px rgba(99,102,241,.10);backdrop-filter:blur(16px);border-radius:24px;padding:16px;overflow:hidden;}
.eg-ann-strip:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(118,92,255,.08),rgba(255,106,213,.06),rgba(20,184,166,.05));pointer-events:none;}
.eg-ann-head{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.eg-ann-head-icon{width:46px;height:46px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 10px 28px rgba(118,92,255,.14);font-size:22px;flex:0 0 auto;}
.eg-ann-head strong{display:block;color:var(--eg-text);font-weight:850;letter-spacing:-.02em;}
.eg-ann-head small{display:block;color:var(--eg-text-muted);font-size:12px;margin-top:2px;}
.eg-ann-head a{margin-left:auto;color:var(--eg-purple);font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap;}
.eg-ann-scroll{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;}
.eg-ann-scroll::-webkit-scrollbar{height:7px}.eg-ann-scroll::-webkit-scrollbar-thumb{background:rgba(118,92,255,.22);border-radius:999px}.eg-ann-scroll::-webkit-scrollbar-track{background:transparent}
.eg-ann-card{min-width:230px;max-width:290px;flex:1 0 230px;scroll-snap-align:start;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid rgba(15,23,42,.08);border-radius:18px;background:#fff;text-decoration:none;color:var(--eg-text);box-shadow:0 12px 26px rgba(15,23,42,.05);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.eg-ann-card:hover{transform:translateY(-2px);box-shadow:0 16px 35px rgba(15,23,42,.10);border-color:rgba(118,92,255,.24);}
.eg-ann-icon{width:46px;height:46px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto;}
.eg-ann-card.purple .eg-ann-icon{background:rgba(118,92,255,.12);color:#765cff}.eg-ann-card.pink .eg-ann-icon{background:rgba(236,72,153,.12);color:#db2777}.eg-ann-card.green .eg-ann-icon{background:rgba(16,185,129,.12);color:#059669}.eg-ann-card.orange .eg-ann-icon{background:rgba(245,158,11,.14);color:#d97706}.eg-ann-card.blue .eg-ann-icon{background:rgba(59,130,246,.12);color:#2563eb}.eg-ann-card.red .eg-ann-icon{background:rgba(239,68,68,.12);color:#dc2626}.eg-ann-card.dark .eg-ann-icon{background:rgba(15,23,42,.10);color:#0f172a}
.eg-ann-content{min-width:0;display:block;}.eg-ann-content em{display:inline-flex;margin-bottom:5px;font-size:10px;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:4px 8px;border-radius:999px;background:rgba(118,92,255,.08);color:var(--eg-purple);}.eg-ann-content strong{display:block;font-size:13px;line-height:1.2;margin-bottom:3px;}.eg-ann-content small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--eg-text-muted);font-size:12px;line-height:1.25;}.eg-ann-card b{margin-left:auto;color:var(--eg-text-muted);font-size:24px;}
.eg-admin-ann-card .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--eg-purple);font-weight:900;}.eg-alert{border-radius:14px;padding:12px 14px;margin:0 0 14px;font-weight:750;font-size:14px;}.eg-alert.success{background:rgba(16,185,129,.10);color:#047857;border:1px solid rgba(16,185,129,.20);}.eg-alert.error{background:rgba(239,68,68,.10);color:#b91c1c;border:1px solid rgba(239,68,68,.20);}
.eg-admin-link-btn,.eg-admin-primary-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:14px;padding:12px 16px;background:var(--eg-gradient);color:#fff;text-decoration:none;font-weight:850;font-family:var(--font);cursor:pointer;box-shadow:0 14px 30px rgba(118,92,255,.18);}.eg-admin-primary-btn{width:100%;margin-top:4px;}
.eg-admin-ann-form{display:grid;gap:13px;}.eg-admin-ann-form label{display:grid;gap:7px;font-size:13px;font-weight:800;color:var(--eg-text);}.eg-admin-ann-form input,.eg-admin-ann-form textarea,.eg-admin-ann-form select{width:100%;border:1.5px solid var(--eg-border);border-radius:14px;padding:11px 12px;font-family:var(--font);font-size:14px;outline:none;background:#fff;color:var(--eg-text);}.eg-admin-ann-form textarea{resize:vertical;}.eg-admin-ann-form input:focus,.eg-admin-ann-form textarea:focus,.eg-admin-ann-form select:focus{border-color:var(--eg-purple);box-shadow:0 0 0 4px rgba(118,92,255,.10);}.eg-form-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.eg-form-grid-3{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:12px;}
.eg-admin-ann-list{display:grid;gap:12px;}.eg-admin-ann-item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--eg-border);border-radius:18px;padding:14px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.04);}.eg-admin-ann-icon{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:900;background:rgba(118,92,255,.10);color:var(--eg-purple);flex:0 0 auto;}.eg-admin-ann-body{min-width:0;flex:1;}.eg-admin-ann-meta{display:flex;gap:8px;align-items:center;margin-bottom:5px;}.eg-admin-ann-meta span,.eg-admin-ann-meta em{font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:900;font-style:normal;border-radius:999px;padding:4px 8px;}.eg-admin-ann-meta span{background:rgba(118,92,255,.08);color:var(--eg-purple);}.eg-admin-ann-meta em{background:rgba(16,185,129,.10);color:#047857;}.eg-admin-ann-body strong{display:block;font-size:15px;margin-bottom:4px;}.eg-admin-ann-body p{margin:0 0 4px;color:var(--eg-text-muted);font-size:13px;}.eg-admin-ann-body small{color:var(--eg-text-soft);font-size:12px;}.eg-admin-ann-actions{display:flex;flex-direction:column;gap:6px;min-width:115px;}.eg-admin-ann-actions a,.eg-admin-ann-actions button{width:100%;border:1px solid var(--eg-border);background:#fff;border-radius:11px;padding:8px 10px;text-align:center;text-decoration:none;color:var(--eg-text);font-family:var(--font);font-size:12px;font-weight:800;cursor:pointer;}.eg-admin-ann-actions a:hover,.eg-admin-ann-actions button:hover{border-color:var(--eg-purple);color:var(--eg-purple);}.eg-admin-ann-actions button.danger:hover{border-color:#ef4444;color:#dc2626;}.eg-admin-empty{border:1px dashed var(--eg-border);border-radius:18px;padding:24px;text-align:center;color:var(--eg-text-muted);font-weight:700;}
@media(max-width:760px){.eg-ann-strip{border-radius:20px;padding:14px;margin-bottom:18px;}.eg-ann-head{align-items:flex-start}.eg-ann-head a{display:none}.eg-ann-card{min-width:245px;flex-basis:245px}.eg-form-grid-2,.eg-form-grid-3{grid-template-columns:1fr}.eg-admin-ann-item{flex-direction:column}.eg-admin-ann-actions{width:100%;flex-direction:row;flex-wrap:wrap}.eg-admin-ann-actions form{flex:1}.eg-admin-ann-actions a,.eg-admin-ann-actions button{min-width:110px}}