/* CRYPTO LAB — Capa visual "Pro Trading" (solo estilos; no altera estructura ni lógica).
   Se carga después de styles.css. Quitar este archivo restaura el diseño anterior. */
@media screen {
  :root {
    --bg-main: #05080e;
    --bg-card: #0b121b;
    --bg-card-hover: #0f1925;
    --bg-card-elevated: #111b28;
    --bg-input: #080f17;
    --border-color: #15212e;
    --border-light: #1f3043;
    --primary: #1fd6a1;
    --primary-hover: #17bf8e;
    --primary-glow: rgba(31, 214, 161, 0.22);
    --accent: #8ab4ff;
    --accent-hover: #6c98ee;
    --accent-glow: rgba(138, 180, 255, 0.2);
    --gold: #e5c07b;
    --gold-soft: rgba(229, 192, 123, 0.14);
    --warning: #f2b84b;
    --danger: #ff5470;
    --text-main: #eef3f9;
    --text-muted: #93a3b8;
    --text-dim: #66778c;
    --up: #1fd6a1;
    --down: #ff5470;
    --ring: 0 0 0 3px rgba(31, 214, 161, 0.24);
    --ease: cubic-bezier(.2, .7, .2, 1);
  }

  body {
    background:
      radial-gradient(1100px 520px at 12% -10%, rgba(31, 214, 161, 0.08), transparent 60%),
      radial-gradient(900px 480px at 100% 0%, rgba(138, 180, 255, 0.07), transparent 55%),
      var(--bg-main);
    background-attachment: fixed;
    font-feature-settings: "tnum" 1, "cv11" 1;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: rgba(0, 201, 141, 0.35); color: #fff; }
  :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

  /* Cifras alineadas como en un terminal de trading */
  .mono, .stat-value, .stat-mini-val, .asset-featured-price, .table td.mono, input[type=number] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
  }

  /* Barra superior de estado con indicador "en vivo" */
  .system-subbar {
    background: linear-gradient(90deg, #060b12, #0a131d);
    border-bottom-color: #14202d;
  }
  .system-subbar span:first-child::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .55rem;
    border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(22, 211, 154, .6);
    animation: pro-live 2s infinite;
  }
  @keyframes pro-live {
    0% { box-shadow: 0 0 0 0 rgba(22, 211, 154, .55); }
    70% { box-shadow: 0 0 0 8px rgba(22, 211, 154, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 211, 154, 0); }
  }

  /* Navegación */
  .navbar {
    background: rgba(8, 14, 22, 0.78);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid #14202d;
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .8);
  }
  .logo-tag {
    background: linear-gradient(90deg, #1fd6a1, #8ab4ff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: .06em;
  }
  .logo-badge { background: rgba(22, 211, 154, .1); border-color: rgba(22, 211, 154, .35); }

  /* Tarjetas */
  .card, .stat-card, .market-terminal-card, .table-wrapper {
    background: linear-gradient(180deg, rgba(20, 33, 46, .55), rgba(14, 24, 34, .95));
    border-color: var(--border-color);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -18px rgba(0, 0, 0, .9);
  }
  .card { transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
  .card:hover { border-color: #223a52; }
  .card-title { letter-spacing: -.015em; }
  .card-header { border-bottom-color: #172535; }

  /* Tarjetas de indicadores */
  .stat-card { transition: transform .25s var(--ease), border-color .25s var(--ease); }
  .stat-card:hover { transform: translateY(-2px); border-color: #25405b; }
  .stat-card::after { background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold)); height: 2px; opacity: .9; }
  .stat-label { font-size: .7rem; letter-spacing: .09em; color: var(--text-dim); }
  .stat-value { font-size: 1.7rem; font-weight: 700; }

  /* Botones */
  .btn { border-radius: 8px; letter-spacing: .005em; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s, filter .2s; }
  .btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
  .btn:disabled { opacity: .5; cursor: not-allowed; }
  .btn-primary {
    background: linear-gradient(180deg, #19dba1, #00b987);
    border-color: #00b987; color: #04281f;
    box-shadow: 0 6px 18px -8px rgba(0, 201, 141, .75);
  }
  .btn-primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 8px 22px -8px rgba(0, 201, 141, .9); }
  .btn-secondary { background: rgba(255, 255, 255, .04); border-color: #223246; color: var(--text-main); }
  .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, .08); border-color: #2f4660; }
  .btn-danger { background: linear-gradient(180deg, #ff6580, #e8405c); border-color: #e8405c; color: #fff; }
  .btn-lg { border-radius: 10px; padding-top: .8rem; padding-bottom: .8rem; }

  /* Compra / venta con semántica de color */
  .btn-quick-buy { color: var(--up); }
  .btn-quick-sell { color: var(--down); }
  .text-success { color: var(--up) !important; }
  .text-danger { color: var(--down) !important; }
  .flash-up { color: var(--up) !important; }
  .flash-down { color: var(--down) !important; }

  /* Formularios */
  .form-control { background: #09131c; border-color: #1b2c3e; border-radius: 8px; transition: border-color .2s, box-shadow .2s, background .2s; }
  .form-control:hover { border-color: #26405a; }
  .form-control:focus { border-color: var(--primary); box-shadow: var(--ring); background: #0b1620; }
  .form-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
  input[type=number]::-webkit-inner-spin-button { opacity: .25; }
  select.form-control { cursor: pointer; }

  /* Pestañas */
  .tabs { border-bottom-color: #172535; gap: .15rem; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { position: relative; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; }
  .tab-btn:hover { background: rgba(255, 255, 255, .03); }
  .tab-btn.active { background: linear-gradient(180deg, transparent, rgba(0, 201, 141, .08)); text-shadow: 0 0 18px rgba(0, 201, 141, .45); }

  /* Tablas */
  .table th { position: sticky; top: 0; z-index: 1; background: #0a121b; color: var(--text-dim); }
  .table tbody tr { transition: background .15s; }
  .table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .012); }
  .table tbody tr:hover { background: rgba(0, 201, 141, .07); }
  .table td { border-bottom-color: #14212f; }

  /* Etiquetas */
  .badge { border-radius: 999px; padding: .26rem .65rem; border: 1px solid transparent; }
  .badge-success { box-shadow: 0 0 14px -6px rgba(22, 211, 154, .8); }
  .badge-danger { box-shadow: 0 0 14px -6px rgba(255, 84, 112, .8); }

  /* Terminal de mercado y gráfico */
  .market-terminal-card { border-radius: 12px; }
  .asset-featured-price { letter-spacing: -.02em; }
  .chart-pill { border-radius: 999px; transition: all .2s var(--ease); }
  .chart-pill:hover { transform: translateY(-1px); }
  .chart-viewport { border-radius: 10px; border: 1px solid #14212f; background: #060b12; }
  .chart-floating-tooltip { backdrop-filter: blur(10px); border-radius: 8px; }
  .asset-item { border-radius: 10px; transition: background .2s, transform .2s var(--ease); }
  .asset-item:hover { transform: translateX(2px); }
  .asset-icon { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .9); }

  /* Modales */
  .modal-overlay { background: rgba(3, 6, 12, .78); backdrop-filter: blur(10px) saturate(120%); }
  .modal-content { border-radius: 14px; border-color: #1f3248; background: linear-gradient(180deg, #112030, #0d1925); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); }
  .modal-overlay.open .modal-content { animation: pro-pop .28s var(--ease); }
  @keyframes pro-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
  .modal-close { border-radius: 8px; }

  /* Entrada suave de paneles */
  .tab-pane, #view-dashboard, #view-join .card { animation: pro-fade .35s var(--ease) both; }
  @keyframes pro-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* Notificaciones */
  #global-message { border-radius: 10px; backdrop-filter: blur(8px); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .9); }

  /* Barra de desplazamiento */
  ::-webkit-scrollbar-thumb { background: #1f3145; }
  ::-webkit-scrollbar-thumb:hover { background: #2f4863; }
  * { scrollbar-color: #1f3145 transparent; }

  /* Móvil */
  @media (max-width: 640px) {
    .container { padding: .9rem .7rem; }
    .navbar { padding: .65rem .85rem; }
    .system-subbar span:last-child { display: none; }
    .card { padding: 1.05rem; }
    .stat-value { font-size: 1.4rem; }
    .btn, .form-control, .tab-btn { min-height: 42px; }
    .modal-content { padding: 1.1rem; max-height: 94vh; }
    .graph-toolbar { gap: .45rem; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Logo profesional ===== */
.logo { gap: .65rem; }
.logo-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 14px rgba(31, 214, 161, .35)); transition: transform .5s var(--ease, ease); }
.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.06); }
.logo-word { display: flex; flex-direction: column; line-height: 1; }
.logo-word .logo-tag { font-size: 1.05rem; font-weight: 800; letter-spacing: .14em; }
.logo-word small { font-size: .56rem; letter-spacing: .32em; color: var(--gold); font-weight: 600; margin-top: 4px; text-transform: uppercase; }

/* ===== Animación de entrada (splash) ===== */
#splash {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  background: radial-gradient(700px 400px at 50% 40%, rgba(31, 214, 161, .14), transparent 65%), #05080e;
  animation: splash-out .55s ease 1.75s forwards;
}
#splash.gone { display: none; }
#splash svg { width: 92px; height: 92px; overflow: visible; filter: drop-shadow(0 10px 36px rgba(31, 214, 161, .45)); animation: splash-pop .8s cubic-bezier(.2,.8,.2,1) both; }
#splash .sp-hex { stroke-dasharray: 190; stroke-dashoffset: 190; animation: sp-draw 1.1s ease .1s forwards; }
#splash .sp-line { stroke-dasharray: 60; stroke-dashoffset: 60; animation: sp-draw .7s ease .75s forwards; }
#splash .sp-dot { opacity: 0; animation: sp-fade .4s ease 1.3s forwards; }
#splash .sp-name { font-weight: 800; letter-spacing: .34em; font-size: 1.25rem; color: #fff; margin-right: -.34em; opacity: 0; animation: sp-rise .6s ease .8s forwards; }
#splash .sp-name b { background: linear-gradient(90deg, #1fd6a1, #8ab4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#splash .sp-tag { font-size: .66rem; letter-spacing: .4em; color: #e5c07b; text-transform: uppercase; margin-right: -.4em; opacity: 0; animation: sp-rise .6s ease 1.05s forwards; }
#splash .sp-bar { width: 150px; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
#splash .sp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1fd6a1, #8ab4ff, #e5c07b); animation: sp-load 1.5s ease .15s forwards; }
@keyframes sp-draw { to { stroke-dashoffset: 0; } }
@keyframes sp-fade { to { opacity: 1; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sp-load { to { width: 100%; } }
@keyframes splash-pop { from { transform: scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; transform: scale(1.03); } }

/* ===== Modal de resultado ===== */
.result-modal { max-width: 420px; text-align: center; padding: 2rem 1.6rem 1.5rem; }
.res-wrap { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.res-icon { width: 76px; height: 76px; margin-bottom: .3rem; }
.res-circle { fill: none; stroke-width: 2.5; stroke-dasharray: 152; stroke-dashoffset: 152; animation: sp-draw .6s ease forwards; }
.res-mark { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: sp-draw .45s ease .45s forwards; }
.res-success .res-circle, .res-success .res-mark { stroke: var(--up); }
.res-error .res-circle, .res-error .res-mark { stroke: var(--down); }
.res-warning .res-circle, .res-warning .res-mark { stroke: var(--warning); }
.res-success .res-icon { filter: drop-shadow(0 0 18px rgba(31, 214, 161, .45)); }
.res-error .res-icon { filter: drop-shadow(0 0 18px rgba(255, 84, 112, .45)); animation: res-shake .5s ease .5s; }
@keyframes res-shake { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.res-title { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.res-msg { color: var(--text-muted); font-size: .9rem; line-height: 1.5; max-width: 34ch; }
.res-rows { width: 100%; margin: .6rem 0 .4rem; border: 1px solid var(--border-color); border-radius: 10px; background: rgba(255,255,255,.025); text-align: left; }
.res-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .85rem; font-size: .82rem; border-bottom: 1px solid var(--border-color); }
.res-row:last-child { border-bottom: 0; }
.res-row span { color: var(--text-dim); }
.res-row strong { color: #fff; font-weight: 600; text-align: right; word-break: break-all; }
.res-hash { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .8rem; margin-bottom: .6rem; font-size: .75rem; color: var(--accent); background: rgba(138, 180, 255, .08); border: 1px dashed rgba(138, 180, 255, .4); border-radius: 8px; cursor: pointer; }
.res-hash span { color: var(--gold); font-weight: 700; font-family: var(--font-main); }
.res-wrap .btn { margin-top: .3rem; }

/* ===== Transiciones y microinteracciones ===== */
@media screen {
  .stat-grid .stat-card, .asset-item, .tl-item { animation: pro-fade .45s var(--ease) both; }
  .stat-grid .stat-card:nth-child(2) { animation-delay: .06s; } .stat-grid .stat-card:nth-child(3) { animation-delay: .12s; } .stat-grid .stat-card:nth-child(4) { animation-delay: .18s; }
  .asset-item:nth-child(2) { animation-delay: .05s; } .asset-item:nth-child(3) { animation-delay: .1s; } .asset-item:nth-child(4) { animation-delay: .15s; } .asset-item:nth-child(5) { animation-delay: .2s; }
  .btn-primary { background-size: 200% 100%; }
  .btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
  .badge-success, .badge-danger { transition: box-shadow .3s; }
  .flash-up, .flash-down { animation: pro-flash .9s ease; }
  @keyframes pro-flash { 0% { text-shadow: 0 0 14px currentColor; } 100% { text-shadow: none; } }
  .chart-viewport { box-shadow: 0 0 0 1px rgba(138, 180, 255, .05), 0 20px 50px -30px #000; }
  #graph-container { background: radial-gradient(600px 300px at 50% 0%, rgba(138,180,255,.06), transparent 70%), #060b12; border-radius: 12px; }
  .btn-accent { background: linear-gradient(180deg, #a3c3ff, #7aa2f0); color: #0a1530; border-color: #7aa2f0; }
  .exec-report { font-size: inherit; }
  .logo-badge { background: var(--gold-soft); color: var(--gold); border-color: rgba(229, 192, 123, .4); }
  .logo-badge-admin { background: rgba(138,180,255,.12); color: var(--accent); border-color: rgba(138,180,255,.4); }
}

/* ===== Móvil: tipografía y espaciado ===== */
@media (max-width: 640px) {
  html { font-size: 15px; }
  body { font-size: .95rem; }
  h1 { font-size: 1.3rem !important; }
  h2 { font-size: 1.1rem !important; }
  .card-title { font-size: .98rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .stat-card { padding: .9rem .85rem; }
  .stat-value { font-size: 1.15rem !important; word-break: break-word; }
  .stat-label { font-size: .62rem; }
  .asset-featured-price { font-size: 1.55rem !important; }
  .table { font-size: .76rem; }
  .table th, .table td { padding: .55rem .6rem; }
  .tab-btn { font-size: .82rem; padding: .65rem .75rem; }
  .logo-word small { display: none; }
  .logo-mark { width: 28px; height: 28px; }
  .chart-viewport { min-height: 260px; }
  .terminal-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .card-header { flex-wrap: wrap; gap: .6rem; }
  .graph-toolbar .btn, .graph-toolbar select { font-size: .75rem; }
  #graph-container { height: 360px; }
  .result-modal { padding: 1.5rem 1.1rem 1.1rem; }
  .res-title { font-size: 1.15rem; }
  #splash svg { width: 72px; height: 72px; }
  #splash .sp-name { font-size: 1rem; }
}
@media (max-width: 640px) {
  .system-subbar { font-size: .6rem; letter-spacing: .05em; padding: .3rem .8rem; white-space: nowrap; overflow: hidden; }
  .system-subbar span:first-child { overflow: hidden; text-overflow: ellipsis; }
  .navbar { gap: .5rem; padding: .55rem .75rem; }
  .logo-badge { display: none; }
  .logo-word .logo-tag { font-size: .9rem; letter-spacing: .1em; white-space: nowrap; }
  #nav-alias { font-size: .82rem !important; } #nav-room { font-size: .66rem !important; }
  #btn-logout { padding: .4rem .6rem; font-size: .72rem; }
  .stat-value { font-size: 1rem !important; letter-spacing: -.01em; }
  .stat-sub { font-size: .66rem; }
  #view-join { margin: 1.5rem auto !important; }
  #view-join .card { padding: 1.5rem !important; }
}
@media (max-width: 380px) { .stat-grid { grid-template-columns: 1fr; } }
@media print { #splash { display: none !important; } }